Skip to content

Commit

Permalink
admin: Replace setTimeout() with the appear property
Browse files Browse the repository at this point in the history 
... on `<transition>`, for fading in the Login Modal
  • Loading branch information
@ThrRip
ThrRip committed Dec 23, 2023
1 parent a9063a7 commit 1969c01
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 61 deletions.
10 changes: 1 addition & 9 deletions packages/admin/app.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,6 @@
<main class="overflow-x-clip overflow-y-auto lg:overflow-y-hidden grid grid-cols-[1fr] grid-rows-[1fr] h-full">
<LoginModal
v-if="!backendLoggedIn && !backendLoggedInChecking"
:visible="viewShowLoginModal"
:auth-state="backendAuthState"
@submit="backendLogin"
/>
Expand Down Expand Up @@ -157,7 +156,6 @@ onBeforeMount(() => {
async () => {
await navigateTo('/')
backendLoggedInChecking.value = false
setTimeout(() => { viewShowLoginModal.value = true }, 50)
}
)
})
Expand All @@ -171,13 +169,10 @@ function backendLogin (email: string, password: string) {
.then(
() => {
backendAuthState.value = 'succeeded'
setTimeout(() => {
viewShowLoginModal.value = false
}, 1000)
setTimeout(() => {
backendAuthState.value = ''
backendLoggedIn.value = true
}, 1300)
}, 1000)
},
() => { backendAuthState.value = 'failed' }
)
Expand All @@ -193,16 +188,13 @@ function backendLogout () {
viewToggleFullNavigationBar(false)
backendAuthState.value = ''
backendLoggedIn.value = false
nextTick(() => { viewShowLoginModal.value = true })
}, 1000)
},
() => { backendAuthState.value = 'failed' }
)
}
// View
const viewShowLoginModal = ref<Boolean>(false)
const viewShowFullNavigationBar = ref<Boolean>(false)
const viewShowFullNavigationBarRealState = ref<Boolean>(false)
const viewFullNavigationBarToggles = ref<number>(0)
Expand Down
106 changes: 54 additions & 52 deletions packages/admin/components/LoginModal.vue
View file
Original file line number Diff line number Diff line change
@@ -1,59 +1,61 @@
<template>
<div class="grid grid-areas-stack place-items-center">
<div
class="flex flex-col gap-y-8 justify-center items-center w-4/5 max-w-xs transition-opacity duration-300"
:class="{ 'opacity-0': !props.visible }"
<transition-group
appear
enter-from-class="opacity-0"
enter-active-class="transition-opacity duration-300"
leave-active-class="transition-opacity duration-300"
leave-to-class="opacity-0"
>
<div class="flex flex-col gap-y-1 text-white">
登录至
<h1 class="text-3xl">
管理面板｜洺知-故犯
</h1>
</div>
<form class="flex flex-col w-full">
<input
v-model="email"
type="email"
:readonly="props.authState === 'processing'"
class="px-5 h-14 text-black bg-white-alta/75 focus:bg-white-alta/95
rounded-t-xl focus:outline-none backdrop-blur transition-colors duration-500"
placeholder="邮箱"
@keydown.enter="submit"
>
<input
v-model="password"
type="password"
:readonly="props.authState === 'processing'"
class="px-5 h-14 text-black bg-white-alta/75 focus:bg-white-alta/95
rounded-b-xl focus:outline-none backdrop-blur transition-colors duration-500"
placeholder="密码"
@keydown.enter="submit"
<div 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">
管理面板｜洺知-故犯
</h1>
</div>
<form class="flex flex-col w-full">
<input
v-model="email"
type="email"
:readonly="props.authState === 'processing'"
class="px-5 h-14 text-black bg-white-alta/75 focus:bg-white-alta/95
rounded-t-xl focus:outline-none backdrop-blur transition-colors duration-500"
placeholder="邮箱"
@keydown.enter="submit"
>
<input
v-model="password"
type="password"
:readonly="props.authState === 'processing'"
class="px-5 h-14 text-black bg-white-alta/75 focus:bg-white-alta/95
rounded-b-xl focus:outline-none backdrop-blur transition-colors duration-500"
placeholder="密码"
@keydown.enter="submit"
>
</form>
<transition-group
tag="button"
class="grid grid-areas-stack place-items-center w-full h-12
text-white bg-blue hover:bg-blue-a rounded-xl focus:outline outline-2 outline-offset-3 outline-blue-a
transition duration-200 active:scale-95"
enter-from-class="opacity-0"
enter-active-class="transition-opacity duration-200"
leave-active-class="transition-opacity duration-200"
leave-to-class="opacity-0"
@click="submit"
>
</form>
<transition-group
tag="button"
class="grid grid-areas-stack place-items-center w-full h-12
text-white bg-blue hover:bg-blue-a rounded-xl focus:outline outline-2 outline-offset-3 outline-blue-a
transition duration-200 active:scale-95"
enter-from-class="opacity-0"
enter-active-class="transition-opacity duration-200"
leave-active-class="transition-opacity duration-200"
leave-to-class="opacity-0"
@click="submit"
>
<span v-if="props.authState === ''" key="idle">登录</span>
<font-awesome-icon v-if="props.authState === 'processing'" key="processing" :icon="['fas', 'circle-notch']" spin class="!h-5" />
<font-awesome-icon v-if="props.authState === 'succeeded'" key="succeeded" :icon="['fas', 'check']" class="!h-5" />
<span v-if="props.authState === 'failed'" key="failed" class="flex flex-row gap-x-2 items-center">
<font-awesome-icon :icon="['fas', 'circle-exclamation']" class="!h-5" />
请重试
</span>
</transition-group>
</div>
<div
class="-z-20 w-full max-w-lg h-full max-h-[30rem] bg-blue-l transition-opacity duration-300"
:class="{ 'opacity-0': !props.visible }"
/>
<span v-if="props.authState === ''" key="idle">登录</span>
<font-awesome-icon v-if="props.authState === 'processing'" key="processing" :icon="['fas', 'circle-notch']" spin class="!h-5" />
<font-awesome-icon v-if="props.authState === 'succeeded'" key="succeeded" :icon="['fas', 'check']" class="!h-5" />
<span v-if="props.authState === 'failed'" key="failed" class="flex flex-row gap-x-2 items-center">
<font-awesome-icon :icon="['fas', 'circle-exclamation']" class="!h-5" />
请重试
</span>
</transition-group>
</div>
<div key="background" class="-z-20 w-full max-w-lg h-full max-h-[30rem] bg-blue-l" />
</transition-group>
</div>
</template>

Expand Down

0 comments on commit 1969c01

Please sign in to comment.