admin: Bring back the visible property for fading out

... the Login Modal after a successful login
ThrRip · Jan 4, 2024 · 8f35854 · 8f35854
1 parent 03d20d1
commit 8f35854
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git 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
@@ -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>