From 8f3585414daa864570373e1606883fc285e74061 Mon Sep 17 00:00:00 2001
From: ThrRip <coding@thrrip.space>
Date: Thu, 4 Jan 2024 12:38:54 +0800
Subject: [PATCH] admin: Bring back the `visible` property for fading out

... the Login Modal after a successful login
---
 packages/admin/app.vue                   | 9 ++++++++-
 packages/admin/components/LoginModal.vue | 4 ++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/admin/app.vue b/packages/admin/app.vue
index 61919f4..07d3660 100644
--- a/packages/admin/app.vue
+++ b/packages/admin/app.vue
@@ -110,6 +110,7 @@
       <LoginModal
         v-if="!backendLoggedIn && !backendLoggedInChecking"
         :auth-state="backendAuthState"
+        :visible="viewShowLoginModal"
         @submit="backendLogin"
       />
       <NuxtPage
@@ -179,10 +180,12 @@ function backendLogin (email: string, password: string) {
     .then(
       () => {
         backendAuthState.value = 'succeeded'
+        setTimeout(() => { viewShowLoginModal.value = false }, 1000)
         setTimeout(() => {
           backendAuthState.value = ''
           backendLoggedIn.value = true
-        }, 1000)
+          viewShowLoginModal.value = true
+        }, 1300)
       },
       () => { backendAuthState.value = 'failed' }
     )
@@ -205,10 +208,14 @@ function backendLogout () {
 }
 
 // View
+const viewShowLoginModal = ref<Boolean>(true)
+
 const viewShowFullNavigationBar = ref<Boolean>(false)
 const viewShowFullNavigationBarRealState = ref<Boolean>(false)
 const viewFullNavigationBarToggles = ref<number>(0)
+
 const viewShowPageContent = ref<Boolean>(true)
+
 function viewToggleFullNavigationBar (show?: boolean) {
   if (show === undefined) {
     viewShowFullNavigationBar.value = !viewShowFullNavigationBar.value
diff --git a/packages/admin/components/LoginModal.vue b/packages/admin/components/LoginModal.vue
index ca3cb6e..bd8196b 100644
--- a/packages/admin/components/LoginModal.vue
+++ b/packages/admin/components/LoginModal.vue
@@ -15,7 +15,7 @@
       leave-active-class="transition-opacity duration-300"
       leave-to-class="opacity-0"
     >
-      <div key="content" class="flex flex-col gap-y-8 justify-center items-center w-4/5 max-w-xs">
+      <div v-if="props.visible" key="content" class="flex flex-col gap-y-8 justify-center items-center w-4/5 max-w-xs">
         <div class="flex flex-col gap-y-1 text-white">
           登录至
           <h1 class="text-3xl">
@@ -62,7 +62,7 @@
           </span>
         </transition-group>
       </div>
-      <div key="background" class="-z-20 w-full max-w-lg h-full max-h-[30rem] bg-blue-l" />
+      <div v-if="props.visible" key="background" class="-z-20 w-full max-w-lg h-full max-h-[30rem] bg-blue-l" />
     </transition-group>
   </div>
 </template>