[wip] RegisterProfileWarn

src/components/ActionBlock.vue

@@ -52,14 +52,14 @@ const emits = defineEmits(['action'])
 
 <style scoped lang="postcss">
 .action-block {
-  @apply flex flex-col gap-[10px];
+  @apply flex flex-col gap-[15px];
 }
 .action-block .upper {
-  @apply flex items-center gap-[20px];
+  @apply flex items-start gap-[20px];
 }
 
 .action-block .title {
-  @apply text-md font-bold;
+  @apply text-md font-bold pb-[3px];
 }
 
 .action-block .footer {

src/views/Profile/components/JoinServerWarning.vue

@@ -1,9 +1,28 @@
 <template>
-  <ActionBlock title="尚未加入 SHELTER ZONE" actionName="Join Discord">
-    <template #icon><Warning /></template>
-    sacasccascsacscscsac
+  <ActionBlock
+    title="加入 SHELTER ZONE Discord 伺服器"
+    actionName="Join Discord"
+    @action="joinDiscord"
+  >
+    <template #icon><LogoDiscord /></template>
+    <div>
+      <p class="pb-[10px]">
+        請先加入 SHELTER ZONE Discord 伺服器，SZ 所有的服務都以 Discord
+        為中心，所以請務必加入
+      </p>
+
+      <n-alert type="error"
+        >請牢記，如果退出 Discord 伺服器，系統將會自動抹除你的所有資料
+        !</n-alert
+      >
+    </div>
     <template #hint>
-      <n-button text class="text-sm underline">
+      <n-button
+        text
+        class="text-sm underline"
+        :loading="loading"
+        @click="checkJoin"
+      >
         我已經加入，點擊此處驗證
       </n-button>
     </template>
@@ -13,7 +32,7 @@
 <script setup>
 import { ref } from 'vue'
 import { NButton, NAlert } from 'naive-ui'
-import { Warning } from '@vicons/carbon'
+import { LogoDiscord } from '@vicons/carbon'
 import { SZInviteLink } from '@/configs/links'
 import { useOauthStore } from '@/stores/oauth'
 import AreaBlock from '@/components/AreaBlock.vue'
@@ -26,7 +45,7 @@ const joinDiscord = () => {
   window.open(SZInviteLink, '_blank')
 }
 
-const reCheck = async () => {
+const checkJoin = async () => {
   loading.value = true
   await findMeGuilds()
   loading.value = false

src/views/Profile/components/NotAccess.vue

@@ -7,21 +7,24 @@
 
       <div class="flex flex-col items-center gap-[10px]">
         <n-icon :size="30" color="var(--danger)"><Locked /></n-icon>
-        <p class="text-danger text-md">Access Denied</p>
+        <p class="text-danger text-lg font-bold">Access Denied</p>
       </div>
 
-      <section class="max-w-[500px] w-full">
+      <section class="max-w-[600px] w-full flex flex-col gap-[30px]">
         <JoinServerWarning />
+        <n-divider></n-divider>
+        <RegisterProfileWarn />
       </section>
     </div>
   </SZBlockContainer>
 </template>
 
 <script setup>
-import { Campsite, Locked, WarningFilled } from '@vicons/carbon'
+import { Campsite, Locked } from '@vicons/carbon'
 import { NIcon, NButton, NDivider } from 'naive-ui'
 import { SZBlockContainer } from '@shelter-zone/shelter-ui'
 import JoinServerWarning from './JoinServerWarning.vue'
+import RegisterProfileWarn from './RegisterProfileWarn.vue'
 </script>
 
 <style scoped lang="postcss"></style>

src/views/Profile/components/RegisterProfileWarn.vue

@@ -1,14 +1,35 @@
 <template>
-  <SZBlockContainer class="">
-    <p>尚未進行驗證</p>
-
-    <n-button>前往認證</n-button>
-  </SZBlockContainer>
+  <ActionBlock title="避難者驗證" actionName="前往驗證" @action="goVerify">
+    <template #icon><FingerprintRecognition /></template>
+    <div>
+      <p>
+        進行身分驗證將會創建 SZ 避難者身分資料，正式取得進入 SZ
+        的通行證，才可看到所有伺服器中的頻道，且可使用 SZ 的相關服務與應用
+      </p>
+    </div>
+  </ActionBlock>
 </template>
 
 <script setup>
-import { SZBlockContainer } from '@shelter-zone/shelter-ui'
-import { NButton } from 'naive-ui'
+import { ref } from 'vue'
+import { NButton, NAlert } from 'naive-ui'
+import { AirlineRapidBoard, FingerprintRecognition } from '@vicons/carbon'
+import { SZInviteLink } from '@/configs/links'
+import { useOauthStore } from '@/stores/oauth'
+import AreaBlock from '@/components/AreaBlock.vue'
+import ActionBlock from '@/components/ActionBlock.vue'
+import { useRouter } from 'vue-router'
+
+const { findMeGuilds, szJoined } = useOauthStore()
+const router = useRouter()
+
+const goVerify = () => {
+  router.push({ name: 'home' })
+}
 </script>
 
-<style scoped lang="postcss"></style>
+<style lang="postcss" scoped>
+.join-server-warning {
+  @apply border-2 border-primary-bg p-[10px] rounded-sub;
+}
+</style>