feat(ui): 💄 Add dark mode support for user authentication and registr…

…ation pages

components/p/form/Input.vue

@@ -33,7 +33,7 @@ defineExpose({ focus })
   <label class="input relative w-full border-b-2 border-purple-400 transition-colors focus-within:border-purple-600">
     <span
       class="label absolute px-2 transition-all ease-out"
-      :class="[modelValue ? 'top-0 text-xs' : 'top-4', disabled ? 'text-gray-400' : 'text-gray-600']"
+      :class="[modelValue ? 'top-0 text-xs' : 'top-4', disabled ? 'text-gray-400' : 'text-gray-600 dark:text-gray-100']"
     >
       {{ label }}
       <span

layouts/loginLayout.vue

@@ -19,7 +19,7 @@ const bgType = computed(() => `type${props.bgType}`)
     <div class="md:hidden absolute w-full h-15 bg-gradient-to-b from-white" />
 
     <!-- White Mask -->
-    <div class="w-full h-full bg-white bg-opacity-50 md:bg-opacity-40 flex items-center">
+    <div class="w-full h-full bg-white bg-opacity-50 md:bg-opacity-40 dark:bg-gray-500/10 dark:bg-opacity-60 flex items-center">
       <div class="flex-1 flex justify-center">
         <slot />
       </div>

pages/user/forget-password.vue

@@ -78,18 +78,18 @@ async function forget() {
   <div>
     <NuxtLayout name="login-layout" :bg-type="1">
       <form
-        class="flex m-5 md:m-auto px-8 md:px-10 pt-5 pb-8 md:py-12 w-full max-w-108 flex-col gap-3 md:gap-6 rounded-md shadow-xl shadow-purple-400/60 bg-white/80 ring-2 ring-purple-400"
+        class="flex m-5 md:m-auto px-8 md:px-10 pt-5 pb-8 md:py-12 w-full max-w-108 flex-col gap-3 md:gap-6 rounded-md shadow-xl shadow-purple-400/60 bg-white/80 ring-2 ring-purple-400 dark:bg-gray-800/90 dark:ring-gray-600 dark:text-gray-200 dark:shadow-gray-700"
         @submit.prevent="forget"
       >
         <div class="flex mb-2 mx-auto items-center">
           <NuxtLink to="/">
             <Logo :larger="8" />
           </NuxtLink>
 
-          <span class="ml-2 pl-4 md:text-lg border-l-2 border-gray-400">{{ t('user.forget-password.title') }}</span>
+          <span class="ml-2 pl-4 md:text-lg border-l-2 border-gray-400 dark:border-gray-500">{{ t('user.forget-password.title') }}</span>
         </div>
 
-        <div v-if="forgetError" class="p-2 text-rose-600 rounded-lg ring-2 ring-rose-400 bg-white/50">
+        <div v-if="forgetError" class="p-2 text-rose-600 rounded-lg ring-2 ring-rose-400 bg-white/50 dark:bg-gray-700 dark:text-rose-300 dark:ring-rose-500">
           <p class="text-center">
             {{ forgetError }}
           </p>
@@ -108,7 +108,7 @@ async function forget() {
 
         <div class="mt-2">
           <button
-            class="focus:outline-none w-full py-2 text-white font-bold rounded-md bg-purple-500 disabled:bg-purple-300 hover:bg-purple-600 disabled:hover:bg-purple-300"
+            class="focus:outline-none w-full py-2 text-white font-bold rounded-md bg-purple-500 disabled:bg-purple-300 hover:bg-purple-600 disabled:hover:bg-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 disabled:dark:bg-purple-400 disabled:dark:hover:bg-purple-400"
             type="submit"
             :disabled="loading > 0"
           >
@@ -120,11 +120,11 @@ async function forget() {
           </button>
         </div>
 
-        <div class="flex -mt-2 justify-center gap-2 text-purple-600 text-sm">
+        <div class="flex -mt-2 justify-center gap-2 text-purple-600 text-sm dark:text-purple-300">
           <NuxtLink :to="{ path: '/user/login', query: { from: 'forget-password' } }">
             {{ t('user.forget-password.back-login') }}
           </NuxtLink>
-          <span class="text-gray-400">|</span>
+          <span class="text-gray-400 dark:text-gray-500">|</span>
           <NuxtLink to="/user/signup">
             {{ t('user.forget-password.signup') }}
           </NuxtLink>

pages/user/login.vue

@@ -30,8 +30,8 @@ function passwordValidator(value: string) {
 }
 const passwordValid = computed(() => passwordValidator(password.value))
 
-// When "user name exists!" or "email is already been used!" appears for seveal times,
-// user will doubts whether the page stucks, this count is used to show the page works.
+// When "user name exists!" or "email is already been used!" appears for several times,
+// user will doubt whether the page is stuck, this count is used to show the page works.
 const errorCount = ref(0)
 
 // 0: ready; 1: loading; 2: refreshing user data
@@ -149,7 +149,7 @@ async function login() {
   <div>
     <NuxtLayout name="login-layout" :bg-type="1">
       <form
-        class="flex m-5 md:m-auto px-8 md:px-10 pt-5 pb-8 md:py-12 w-full max-w-108 flex-col gap-3 md:gap-6 rounded-md shadow-xl shadow-purple-400/60 bg-white/80 ring-2 ring-purple-400"
+        class="flex m-5 md:m-auto px-8 md:px-10 pt-5 pb-8 md:py-12 w-full max-w-108 flex-col gap-3 md:gap-6 rounded-md shadow-xl shadow-purple-400/60 bg-white/80 ring-2 ring-purple-400 dark:bg-gray-800/80 dark:ring-gray-600 dark:text-gray-200 dark:shadow-gray-700"
         @submit.prevent="login"
       >
         <div class="flex mb-2 mx-auto items-center">
@@ -160,7 +160,7 @@ async function login() {
           <span class="ml-2 pl-4 text-lg border-l-2 border-gray-400">{{ t('user.login.title') }}</span>
         </div>
 
-        <div v-if="loginError" class="p-2 text-rose-600 rounded-lg ring-2 ring-rose-400 bg-white/50">
+        <div v-if="loginError" class="p-2 text-rose-600 rounded-lg ring-2 ring-rose-400 bg-white/50 dark:bg-gray-700 dark:text-rose-300 dark:ring-rose-500">
           <p class="text-center">
             {{ loginError }}
           </p>
@@ -190,7 +190,7 @@ async function login() {
 
         <div class="mt-2">
           <button
-            class="focus:outline-none w-full py-2 text-white font-bold rounded-md bg-purple-500 disabled:bg-purple-300 hover:bg-purple-600 disabled:hover:bg-purple-300"
+            class="focus:outline-none w-full py-2 text-white font-bold rounded-md bg-purple-500 disabled:bg-purple-300 hover:bg-purple-600 disabled:hover:bg-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 disabled:dark:bg-purple-400 disabled:dark:hover:bg-purple-400"
             type="submit"
             :disabled="loading > 0"
           >
@@ -202,11 +202,11 @@ async function login() {
           </button>
         </div>
 
-        <div class="flex -mt-2 justify-center gap-2 text-purple-600 text-sm">
+        <div class="flex -mt-2 justify-center gap-2 text-purple-600 text-sm dark:text-purple-300">
           <NuxtLink to="/user/forget-password">
             {{ t('user.login.forget-password') }}
           </NuxtLink>
-          <span class="text-gray-400">|</span>
+          <span class="text-gray-400 dark:text-gray-500">|</span>
           <NuxtLink to="/user/signup">
             {{ t('user.login.signup') }}
           </NuxtLink>

pages/user/reset-password.vue

@@ -99,7 +99,7 @@ async function reset() {
   <div>
     <NuxtLayout name="login-layout" :bg-type="2">
       <form
-        class="flex m-5 md:m-auto px-8 md:px-10 pt-5 pb-8 md:py-12 w-full max-w-108 flex-col gap-3 md:gap-6 rounded-md shadow-xl shadow-purple-400/60 bg-white/80 ring-2 ring-purple-400"
+        class="flex m-5 md:m-auto px-8 md:px-10 pt-5 pb-8 md:py-12 w-full max-w-108 flex-col gap-3 md:gap-6 rounded-md shadow-xl shadow-purple-400/60 bg-white/80 ring-2 ring-purple-400  dark:bg-gray-800/70 dark:ring-gray-600 dark:text-gray-200 dark:shadow-gray-700"
         @submit.prevent="reset"
       >
         <div class="flex mb-2 mx-auto items-center">

pages/user/signup.vue

@@ -213,7 +213,7 @@ async function signup() {
   <div>
     <NuxtLayout name="login-layout" :bg-type="2">
       <form
-        class="flex m-5 md:m-auto px-8 md:px-10 pt-5 pb-8 md:py-12 w-full max-w-108 flex-col gap-3 md:gap-6 rounded-md shadow-xl shadow-purple-400/60 bg-white/80 ring-2 ring-purple-400"
+        class="flex m-5 md:m-auto px-8 md:px-10 pt-5 pb-8 md:py-12 w-full max-w-108 flex-col gap-3 md:gap-6 rounded-md shadow-xl shadow-purple-400/60 bg-white/80 ring-2 ring-purple-400 dark:bg-gray-800/70 dark:ring-gray-600 dark:text-gray-200 dark:shadow-gray-700"
         @submit.prevent="signup"
       >
         <div class="flex mb-2 mx-auto items-center">