feat: refactor the forgot password page

components/forgot/Password.vue

@@ -70,31 +70,47 @@ const handleChangePassword = async () => {
 
 <template>
   <Transition mode="out-in" name="slide">
-    <div class="email" v-if="flag">
-      <div class="input">
-        <span>{{ $t('forgot.email') }}: </span>
-        <input v-model="input.email" type="text" autocomplete="email" />
+    <form class="email" v-if="flag" @submit.prevent>
+      <div class="input-container">
+        <label for="email">
+          {{ $t('forgot.email') }}
+        </label>
+        <KunInput
+          id="email"
+          v-model="input.email"
+          autocomplete="email"
+          type="text"
+        />
       </div>
 
-      <div class="input">
-        <span>{{ $t('forgot.code') }}: </span>
-        <input v-model="input.code" type="text" />
+      <div class="input-container">
+        <label for="code">
+          {{ $t('forgot.code') }}
+        </label>
+        <KunInput id="code" v-model="input.code" type="text" />
       </div>
-    </div>
+    </form>
 
     <form class="password" v-else-if="!flag" @submit.prevent>
       <input autocomplete="username" type="text" hidden />
-      <div class="input">
-        <span>{{ $t('forgot.new') }}: </span>
-        <input
+
+      <div class="input-container">
+        <label for="new-password">
+          {{ $t('forgot.new') }}
+        </label>
+        <KunInput
+          id="new-password"
           v-model="input.newPassword"
           autocomplete="new-password"
           type="password"
         />
       </div>
-      <div class="input">
-        <span>{{ $t('forgot.rePwd') }}: </span>
-        <input
+      <div class="input-container">
+        <label for="new-password">
+          {{ $t('forgot.rePwd') }}
+        </label>
+        <KunInput
+          id="password"
           v-model="input.confirmPassword"
           autocomplete="new-password"
           type="password"
@@ -113,65 +129,48 @@ const handleChangePassword = async () => {
       to="forgot"
     />
 
-    <button v-if="flag" @click="handleClickNext">
+    <KunButton v-if="flag" @click="handleClickNext">
       {{ $t('forgot.next') }}
-    </button>
+    </KunButton>
 
-    <button v-if="!flag" @click="handleClickPrev">
+    <KunButton v-if="!flag" @click="handleClickPrev">
       {{ $t('forgot.prev') }}
-    </button>
+    </KunButton>
 
-    <button v-if="!flag" @click="handleChangePassword">
+    <KunButton v-if="!flag" @click="handleChangePassword">
       {{ $t('forgot.confirm') }}
-    </button>
+    </KunButton>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.email,
-.password {
+form {
   display: flex;
   justify-content: center;
   flex-direction: column;
   padding: 20px;
   margin-top: 50px;
 }
 
-.input {
+.input-container {
   padding: 0 10px;
-  display: flex;
   margin-bottom: 30px;
-  justify-content: space-between;
-
-  input {
-    border: none;
-    color: var(--kungalgame-font-color-3);
-    border-bottom: 1.5px solid var(--kungalgame-blue-2);
-    background-color: var(--kungalgame-trans-white-9-white);
-    transition: all 0.2s;
-
-    &:focus {
-      border-bottom: 1.5px solid var(--kungalgame-blue-5);
-    }
+  display: flex;
+  flex-direction: column;
+
+  label {
+    font-size: 14px;
+  }
+
+  .kun-input {
+    margin-top: 8px;
   }
 }
 
 .btn {
-  width: 100%;
   display: flex;
-  justify-content: center;
-
-  button {
-    cursor: pointer;
-    width: 110px;
-    height: 33px;
-    padding: 8px 12px;
-    border: 1px solid var(--kungalgame-blue-5);
-    border-radius: 5px;
-    background-color: transparent;
-    margin: 10px;
-    color: var(--kungalgame-blue-5);
-  }
+  justify-content: space-around;
+  align-items: center;
 }
 
 .slide-enter-active,

components/home/utils/sitemap.ts

@@ -44,6 +44,10 @@ export const sitemap: Sitemap[] = [
     route: '/login',
     name: 'login'
   },
+  {
+    route: '/register',
+    name: 'register'
+  },
   {
     route: '/non-moe',
     name: 'nonMoe'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kun-galgame-nuxt3",
-  "version": "2.18.40",
+  "version": "2.19.0",
   "packageManager": "[email protected]",
   "private": true,
   "scripts": {

pages/forgot/index.vue

@@ -37,9 +37,7 @@ useHead({
 
 .container {
   margin: auto;
-  width: 300px;
-  height: 400px;
-
+  width: 360px;
   @include kun-blur;
 }