From 7b445e2649e5848387d627505b98129537977664 Mon Sep 17 00:00:00 2001
From: Proladon <Proladon@gmail.com>
Date: Mon, 30 Oct 2023 00:25:57 +0800
Subject: [PATCH] [wip] RegisterProfileWarn

---
 src/components/ActionBlock.vue                |  6 +--
 .../Profile/components/JoinServerWarning.vue  | 31 +++++++++++++---
 src/views/Profile/components/NotAccess.vue    |  9 +++--
 .../components/RegisterProfileWarn.vue        | 37 +++++++++++++++----
 4 files changed, 63 insertions(+), 20 deletions(-)

diff --git a/src/components/ActionBlock.vue b/src/components/ActionBlock.vue
index 75d60fc..1a6d38b 100644
--- a/src/components/ActionBlock.vue
+++ b/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 {
diff --git a/src/views/Profile/components/JoinServerWarning.vue b/src/views/Profile/components/JoinServerWarning.vue
index 6448c3d..cc1442e 100644
--- a/src/views/Profile/components/JoinServerWarning.vue
+++ b/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
diff --git a/src/views/Profile/components/NotAccess.vue b/src/views/Profile/components/NotAccess.vue
index b538c30..8c5cef0 100644
--- a/src/views/Profile/components/NotAccess.vue
+++ b/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>
diff --git a/src/views/Profile/components/RegisterProfileWarn.vue b/src/views/Profile/components/RegisterProfileWarn.vue
index 3454e22..2a1533d 100644
--- a/src/views/Profile/components/RegisterProfileWarn.vue
+++ b/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>