feat: register CheckBox

KUN1007 · Oct 15, 2024 · d80bf4a · d80bf4a
1 parent 31cd51c
commit d80bf4a
Show file tree

Hide file tree

Showing 11 changed files with 212 additions and 147 deletions.
diff --git a/components/kun/CheckBox.vue b/components/kun/CheckBox.vue
@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+const model = defineModel<boolean>({ required: true })
+</script>
+
+<template>
+  <label class="kun-checkbox">
+    <input type="checkbox" v-model="model" />
+    <span class="checkmark" />
+    <slot />
+  </label>
+</template>
+
+<style lang="scss" scoped>
+.kun-checkbox {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+  padding-left: 32px;
+  font-size: 16px;
+
+  input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+
+    &:checked ~ .checkmark {
+      background-color: var(--kungalgame-blue-5);
+      border-color: var(--kungalgame-blue-5);
+
+      &:after {
+        display: block;
+      }
+    }
+  }
+
+  .checkmark {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 20px;
+    width: 20px;
+    background-color: var(--kungalgame-white);
+    border: 2px solid var(--kungalgame-blue-5);
+    border-radius: 4px;
+    transition: all 0.3s ease;
+
+    &:after {
+      content: '';
+      position: absolute;
+      display: none;
+      top: 1px;
+      left: 5px;
+      width: 4px;
+      height: 10px;
+      border: solid var(--kungalgame-white);
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
+    }
+  }
+}
+</style>
diff --git a/components/kun/verification-code/Code.vue b/components/kun/verification-code/Code.vue
@@ -65,7 +65,7 @@ const handleSendCode = () => {
 
 <template>
   <button @click="handleSendCode" :disabled="isSending">
-    {{ isSending ? countdown : $t('login.register.send') }}
+    {{ isSending ? countdown : $t('register.send') }}
   </button>
 </template>
 

diff --git a/components/login/Login.vue b/components/login/Login.vue
@@ -61,7 +61,7 @@ watch(
 
       <div>
         <label for="username">
-          {{ $t('login.login.loginUsername') }}
+          {{ $t('login.email') }}
         </label>
         <KunInput
           id="username"
@@ -73,7 +73,7 @@ watch(
 
       <div>
         <label for="password">
-          {{ $t('login.login.loginPassword') }}
+          {{ $t('login.password') }}
         </label>
         <KunInput
           id="password"
@@ -84,7 +84,7 @@ watch(
       </div>
 
       <KunButton @click="handleLogin" class="btn">
-        {{ $t('login.login.loginTitle') }}
+        {{ $t('login.title') }}
       </KunButton>
     </form>
 
@@ -94,11 +94,11 @@ watch(
 
     <div class="more">
       <NuxtLinkLocale to="/register">
-        {{ $t('login.register.title') }}
+        {{ $t('register.title') }}
       </NuxtLinkLocale>
 
       <NuxtLinkLocale to="/forgot">
-        {{ $t('login.login.forget') }}
+        {{ $t('login.forgot') }}
       </NuxtLinkLocale>
     </div>
   </div>

diff --git a/components/register/Register.vue b/components/register/Register.vue
@@ -14,6 +14,7 @@ const { checkForm, checkRegister } = checkRegisterForm.asyncData(
 
 const localePath = useLocalePath()
 const isSendCode = ref(false)
+const isAgree = ref(false)
 
 const registerForm = reactive<Record<string, string>>({
   name: '',
@@ -32,6 +33,11 @@ const handleSendCode = () => {
     return
   }
 
+  if (!isAgree.value) {
+    useMessage(10147, 'warn')
+    return
+  }
+
   if (!isCaptureSuccessful.value) {
     isShowCapture.value = true
     return
@@ -77,7 +83,7 @@ const handleRegister = async () => {
         :key="item.index"
       >
         <label :for="item.value">
-          {{ $t(`login.register.${item.placeholder}`) }}
+          {{ $t(`register.${item.placeholder}`) }}
         </label>
         <KunInput
           :id="item.value"
@@ -96,8 +102,18 @@ const handleRegister = async () => {
         to="register"
       />
 
+      <KunCheckBox v-model="isAgree">
+        <span>{{ $t('register.agree') }}</span>
+        <NuxtLinkLocale to="/agreement">
+          {{ $t('register.agreement') }}
+        </NuxtLinkLocale>
+        <NuxtLinkLocale to="/privacy">
+          {{ $t('register.privacy') }}
+        </NuxtLinkLocale>
+      </KunCheckBox>
+
       <KunButton @click="handleRegister">
-        {{ $t('login.register.title') }}
+        {{ $t('register.title') }}
       </KunButton>
     </form>
 
@@ -107,11 +123,11 @@ const handleRegister = async () => {
 
     <div class="more">
       <NuxtLinkLocale to="/login">
-        {{ $t('login.login.loginTitle') }}
+        {{ $t('login.title') }}
       </NuxtLinkLocale>
 
       <NuxtLinkLocale to="/forgot">
-        {{ $t('login.login.forget') }}
+        {{ $t('login.forgot') }}
       </NuxtLinkLocale>
     </div>
   </div>
@@ -155,10 +171,24 @@ const handleRegister = async () => {
 
   .code {
     position: absolute;
-    bottom: 60px;
+    bottom: 94px;
     right: 16px;
   }
 
+  .kun-checkbox {
+    display: flex;
+    align-items: center;
+    font-size: small;
+    margin-bottom: 16px;
+
+    a {
+      color: var(--kungalgame-blue-5);
+      text-decoration: underline;
+      text-underline-offset: 3px;
+      margin-left: 4px;
+    }
+  }
+
   .kun-button {
     width: 100%;
     background-color: var(--kungalgame-blue-5);

diff --git a/error/kunMessage.ts b/error/kunMessage.ts
@@ -54,6 +54,7 @@ export const infoMessagesEN: Record<number, string> = {
   10144: 'The maximum length of the report content is 1007 characters.',
   10145: 'Report submitted successfully!',
   10146: 'You need to login to continue your operation',
+  10147: 'Please click to agree to our User Agreement and Privacy Policy.',
 
   10201: 'Publishing...',
   10202: 'Tag already exists, please choose another one',
@@ -242,6 +243,9 @@ export const infoMessagesJP: Record<number, string> = {
   10143: '通報理由を記入してください',
   10144: '通報内容は最大 1007 文字です',
   10145: '通報の送信に成功しました！',
+  10146: '操作を続行するにはログインが必要です',
+  10147:
+    'ユーザー契約とプライバシーポリシーに同意するためにクリックしてください。',
 
   10201: '投稿中...',
   10202: 'タグは既に存在します。別のタグを選んでください',
@@ -429,6 +433,8 @@ export const infoMessagesCN: Record<number, string> = {
   10143: '请填写举报理由',
   10144: '举报内容最多 1007 字',
   10145: '举报提交成功!',
+  10146: '您需要登录才能继续操作',
+  10147: '请点击同意我们的用户协议和隐私政策',
 
   10201: '正在发布...',
   10202: '标签已存在，请更换',
@@ -609,6 +615,8 @@ export const infoMessagesTW: Record<number, string> = {
   10143: '請填寫舉報理由',
   10144: '舉報內容最多 1007 字',
   10145: '舉報提交成功!',
+  10146: '您需要登入才能繼續操作',
+  10147: '請點擊同意我們的用戶協議和隱私政策。',
 
   10201: '正在發佈...',
   10202: '標簽已存在，請更換',

diff --git a/language/en.json b/language/en.json
@@ -107,7 +107,8 @@
       "friendLinks": "Friend Links",
       "galgame": "Visual Novels",
       "kungalgame": "About Us",
-      "login": "Login / Register",
+      "login": "Login",
+      "register": "Register",
       "nonMoe": "Non-Moe",
       "pool": "All Topics",
       "privacy": "Privacy Policy",
@@ -329,35 +330,21 @@
   },
   "login": {
     "or": "OR",
-    "login": {
-      "loginTitle": "Login",
-      "forget": "Forgot your password?",
-      "loginUsername": "Username or email",
-      "loginPassword": "Password"
-    },
-    "overlay": {
-      "title": "Welcome to KUN Visual Novel Registration",
-      "world": "The World's",
-      "moe": "Cutest",
-      "forum": "Galgame Forum",
-      "login": "Login",
-      "home": "Welcome Back",
-      "kun": "KUN Visual Novel Gives You",
-      "hug": "The Warmest Hug",
-      "register": "Register"
-    },
-    "register": {
-      "title": "Register",
-      "name": "username",
-      "email": "email",
-      "password": "password",
-      "code": "Email verification code",
-      "send": "Send code",
-      "click": "Clicking Register means you have agreed to our",
-      "agreement": "User Agreement",
-      "and": "and",
-      "privacy": "Privacy Policy"
-    }
+    "title": "Login",
+    "forgot": "Forgot your password?",
+    "email": "Username or email",
+    "password": "Password"
+  },
+  "register": {
+    "title": "Register",
+    "name": "Username",
+    "email": "Email",
+    "password": "Password",
+    "code": "Email verification code",
+    "send": "Send code",
+    "agree": "I agree",
+    "agreement": "User Agreement",
+    "privacy": "Privacy Policy"
   },
   "user": {
     "notFound": "User not found",
@@ -829,8 +816,12 @@
       "description": "KUN Visual Novel is a visualnovel forum that will become a website integrating all things visualnovel, including visualnovel downloads, visualnovel reviews, visualnovel data analysis, visualnovel news, visualnovel translation/internationalization, visualnovel production, and more. Our ultimate goal is to be the world's best visualnovel forum!"
     },
     "login": {
-      "title": "Login / Register KUN Visual Novel Forum",
-      "description": "Login / Register KUN Visual Novel Forum, the world's cutest visualnovel forum! Visualnovel discussions, technical exchanges. Striving to create the best atmosphere! No advertisements ever! Always free!"
+      "title": "Login the KUN Visual Novel Forum",
+      "description": "Login the KUN Visual Novel Forum, the world's cutest visualnovel forum! Welcome home!"
+    },
+    "register": {
+      "title": "Register the KUN Visual Novel Forum",
+      "description": "Register the KUN Visual Novel Forum, the world's cutest visualnovel forum! Visualnovel discussions, technical exchanges. Striving to create the best atmosphere! No advertisements ever! Always free!"
     },
     "nonMoe": {
       "title": "Non-moe Record",

diff --git a/language/ja-JP.json b/language/ja-JP.json
@@ -107,7 +107,8 @@
       "friendLinks": "友好リンク",
       "galgame": "ギャルゲーム リソース",
       "kungalgame": "私たちについて",
-      "login": "ログイン / 登録",
+      "login": "ログイン",
+      "register": "登録",
       "nonMoe": "非萌え記録",
       "pool": "すべてのトピック",
       "privacy": "プライバシ",
@@ -326,36 +327,22 @@
     }
   },
   "login": {
-    "or": "または",
-    "login": {
-      "loginTitle": "ログイン",
-      "forget": "パスワードを忘れましたか？",
-      "loginUsername": "ユーザー名またはメールアドレス",
-      "loginPassword": "パスワード"
-    },
-    "overlay": {
-      "title": "鯤 ギャルゲーム フォーラムへの登録を歓迎します",
-      "world": "世界で最も",
-      "moe": "萌える",
-      "forum": "ギャルゲーム フォーラム",
-      "login": "ログイン",
-      "home": "お帰りなさい",
-      "kun": "鯤 ギャルゲーム フォーラムがあなたに",
-      "hug": "最も温かい抱擁を提供します",
-      "register": "登録"
-    },
-    "register": {
-      "title": "登録",
-      "name": "ユーザー名",
-      "email": "メールアドレス",
-      "password": "パスワード",
-      "code": "メール認証コード",
-      "send": "認証コードを送信",
-      "click": "登録をクリックすることで、当社の",
-      "agreement": "利用規約",
-      "and": "と",
-      "privacy": "プライバシ"
-    }
+    "title": "ログイン",
+    "forgot": "パスワードを忘れましたか？",
+    "email": "ユーザー名またはメールアドレス",
+    "password": "パスワード",
+    "or": "または"
+  },
+  "register": {
+    "title": "登録",
+    "name": "ユーザー名",
+    "email": "メールアドレス",
+    "password": "パスワード",
+    "code": "メール認証コード",
+    "send": "認証コードを送信",
+    "agree": "私は同意します",
+    "agreement": "利用規約",
+    "privacy": "プライバシ"
   },
   "user": {
     "notFound": "ユーザーが存在しません",
@@ -831,8 +818,12 @@
       "description": "鯤 ギャルゲームユーザー, ユーザー情報, ユーザーアイコン, ユーザー名, ユーザー萌萌点, ユーザーのトピック, ユーザーの返信, ユーザーのコメント, ユーザーのいいね, ユーザーの推薦, ユーザーの署名"
     },
     "login": {
-      "title": "ログイン / 鯤 ギャルゲームフォーラムに登録",
-      "description": "鯤 ギャルゲームフォーラムにログイン / 登録, 世界で最も萌えたギャルゲームフォーラム！ギャルゲームの交流と議論。最高の雰囲気を作るために努力！広告は決して表示されません！永遠に無料！"
+      "title": "ログイン - 鯤 ギャルゲームフォーラム",
+      "description": "登録 鯤 ギャルゲームフォーラムにログイン, 世界で最も萌えたギャルゲームフォーラム！おかえりなさい！"
+    },
+    "register": {
+      "title": "登録 - 鯤 ギャルゲームフォーラムに",
+      "description": "登録 鯤 ギャルゲームフォーラムにログイン, 世界で最も萌えたギャルゲームフォーラム！ギャルゲームの交流と議論。最高の雰囲気を作るために努力！広告は決して表示されません！永遠に無料！"
     },
     "nonMoe": {
       "title": "不萌記録",