i18n for register page (labring#192)

* docs: update docs;

* docs: fix deploy docs

* feat: validate old password before updating password (labring#152)

* feat: add account sign up mode config (labring#172) (labring#181)

* chore: add account sign up mode config (labring#172)

* fix: k8s ACCOUNT_SIGNUP_MODE config (labring#172)

* docs: migrate vitepress to 1.0.0 (labring#182)

* doc: release 0.8.4

* docs: complete docs (labring#185)

* docs: release 0.8.5

* fix: error of `process is not defined` (labring#146)

* docs: update docs;

* fix: error on opening app-console

Co-authored-by: maslow <[email protected]>

* fix: default route

* feat: i18n for register page

Co-authored-by: maslow <[email protected]>
Co-authored-by: CCCY <[email protected]>

Author: 3 people

packages/web/auto-imports.d.ts

@@ -110,7 +110,6 @@ declare global {
   const useAttrs: typeof import('vue')['useAttrs']
   const useBase64: typeof import('@vueuse/core')['useBase64']
   const useBattery: typeof import('@vueuse/core')['useBattery']
-  const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
   const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
   const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
   const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
@@ -158,7 +157,6 @@ declare global {
   const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
   const useI18n: typeof import('vue-i18n')['useI18n']
   const useIdle: typeof import('@vueuse/core')['useIdle']
-  const useImage: typeof import('@vueuse/core')['useImage']
   const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
   const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
   const useInterval: typeof import('@vueuse/core')['useInterval']

packages/web/components.d.ts

@@ -7,7 +7,6 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     CommonOpener: typeof import('./src/components/CommonOpener.vue')['default']
     Counter: typeof import('./src/components/Counter.vue')['default']
-    ElAside: typeof import('element-plus/es')['ElAside']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElContainer: typeof import('element-plus/es')['ElContainer']
@@ -21,13 +20,10 @@ declare module '@vue/runtime-core' {
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElMain: typeof import('element-plus/es')['ElMain']
-    ElMenu: typeof import('element-plus/es')['ElMenu']
-    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElRadio: typeof import('element-plus/es')['ElRadio']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSpace: typeof import('element-plus/es')['ElSpace']
-    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTag: typeof import('element-plus/es')['ElTag']

packages/web/locales/en.yml

@@ -20,10 +20,15 @@ pages:
       login-btn: Login
       password: Password
       title: Login
-    register: Register
+    register:
+      name: Name
+      success-msg: registration success!
+      title: Register
 utils:
   form:
     email: Email is invalid
+    maxlength: '{name} is not longer than {len} digits'
+    minlength: '{name} is not less than {len} digits'
     password: '{name} requires at least 8 digits'
     required: '{name} cannot be empty'
     submit: Submit

packages/web/locales/zh-CN.yml

@@ -20,10 +20,15 @@ pages:
       login-btn: 登录
       password: 密码
       title: 登录
-    register: 注册
+    register:
+      name: 姓名
+      success-msg: 注册成功！
+      title: 注册
 utils:
   form:
     email: 邮箱格式不正确
+    maxlength: '{name}的长度不高于{len}位'
+    minlength: '{name}的长度不少于{len}位'
     password: '{name} 至少需要8位'
     required: '{name}不能为空'
     submit: 提交

packages/web/src/assets/logo.png

@@ -55,7 +55,7 @@ const login = async (loginEl: FormInstance | undefined) => {
         <div flex justify-between items-center>
           <span text-4>{{ $t('pages.account.login.title') }}</span>
           <el-button type="primary" text @click="goPage('/register')">
-            {{ $t('pages.account.register') }}
+            {{ $t('pages.account.register.title') }}
           </el-button>
         </div>
       </template>

packages/web/src/pages/account/login.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import type { FormInstance } from 'element-plus'
 import * as useraApi from '~/api/user'
-
+import LanguageMenu from '~/layout/components/LanguageMenu.vue'
+import { maxLengthField, minLengthField, passwordField, requiredField } from '~/utils/form'
+const { t } = useI18n()
 const router = useRouter()
 const goLogin = () => {
   router.push('/login')
@@ -17,24 +19,24 @@ const registerForm = $ref({
 })
 const registerRules = {
   username: [
-    { required: true, message: 'Please input your username!' },
-    { min: 4, message: 'Length should be greater than 4' },
-    { max: 20, message: 'Length should be less than 20' },
+    requiredField(t('pages.account.login.account')),
+    minLengthField(4, t('pages.account.login.account')),
+    maxLengthField(20, t('pages.account.login.account')),
   ],
   name: [
-    { required: true, message: 'Please input your name!' },
+    requiredField(t('pages.account.register.name')),
   ],
   password: [
-    { required: true, message: 'Please input your password!', trigger: 'blur' },
-    { min: 8, message: 'Length should be greater than 8' },
+    requiredField(t('pages.account.login.password')),
+    passwordField(t('pages.account.login.password')),
   ],
   password2: [
-    { required: true, message: 'Please input your password again!' },
-    { min: 8, message: 'Length should be greater than 8' },
+    requiredField(t('layout.components.reset-password.form.confirm-password')),
+    passwordField(t('layout.components.reset-password.form.confirm-password')),
     {
       validator: (rule: any, value: string, callback: any) => {
         if (value !== registerForm.password)
-          callback(new Error('Two passwords that you enter is inconsistent!'))
+          callback(new Error(t('layout.components.reset-password.rules.confirm')))
 
         else
           callback()
@@ -66,7 +68,7 @@ const register = async (registerEl: FormInstance | undefined) => {
     }
 
     ElMessage({
-      message: '注册成功！',
+      message: t('pages.account.register.success-msg'),
       type: 'success',
     })
     goLogin()
@@ -78,13 +80,13 @@ const register = async (registerEl: FormInstance | undefined) => {
   <el-card w-sm mt-20 ma>
     <template #header>
       <div flex justify-between items-center>
-        <span text-4>LAF 云开发账户注册</span>
+        <span text-4>{{ $t('pages.account.register.title') }}</span>
         <el-button
           type="primary"
           text
           @click="goLogin"
         >
-          去登录
+          {{ $t('pages.account.login.title') }}
         </el-button>
       </div>
     </template>
@@ -96,17 +98,17 @@ const register = async (registerEl: FormInstance | undefined) => {
       :rules="registerRules"
       autocomplete="off"
     >
-      <el-form-item label="账户" prop="username">
-        <el-input v-model.trim="registerForm.username" placeholder="请输入账户名" />
+      <el-form-item :label="$t('pages.account.login.account')" prop="username">
+        <el-input v-model.trim="registerForm.username" />
       </el-form-item>
-      <el-form-item label="姓名" mt-6 prop="name">
-        <el-input v-model.trim="registerForm.name" placeholder="请输入姓名" />
+      <el-form-item :label="$t('pages.account.register.name')" mt-6 prop="name">
+        <el-input v-model.trim="registerForm.name" />
       </el-form-item>
-      <el-form-item label="密码" mt-6 prop="password">
-        <el-input v-model.trim="registerForm.password" type="password" placeholder="请输入密码" />
+      <el-form-item :label="$t('pages.account.login.password')" mt-6 prop="password">
+        <el-input v-model.trim="registerForm.password" type="password" />
       </el-form-item>
-      <el-form-item label="确认密码" mt-6 prop="password2">
-        <el-input v-model.trim="registerForm.password2" type="password" placeholder="请再次输入密码" />
+      <el-form-item :label="$t('layout.components.reset-password.form.confirm-password')" mt-6 prop="password2">
+        <el-input v-model.trim="registerForm.password2" type="password" />
       </el-form-item>
       <el-form-item mt-10>
         <el-button
@@ -116,15 +118,18 @@ const register = async (registerEl: FormInstance | undefined) => {
           :loading="loading"
           @click="register(registerFormRef)"
         >
-          注册
+          {{ $t('pages.account.register.title') }}
         </el-button>
       </el-form-item>
     </el-form>
+    <div text-center>
+      <LanguageMenu show-name />
+    </div>
   </el-card>
 </template>
 
 <route lang="yaml">
 name: register
 meta:
-  title: 注册
+  title: t('pages.account.register.title')
 </route>

packages/web/src/pages/account/register.vue

@@ -35,7 +35,7 @@ router.beforeEach(async (to, from, next) => {
 
     if (to.path === '/login' || to.path === '/register' || to.path === '/') {
       // if is logged in, redirect to the home page
-      next({ path: '/application' })
+      next({ path: '/apps' })
       NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
     }
     else {

packages/web/src/router/permission.ts

@@ -19,3 +19,19 @@ export function emailField(name: string): FormItemRule {
     message: i18n.global.t('utils.form.email', { name }),
   }
 }
+
+export function minLengthField(len: number, name: string): FormItemRule {
+  return {
+    trigger: 'blur',
+    min: len,
+    message: i18n.global.t('utils.form.minlength', { name, len }),
+  }
+}
+
+export function maxLengthField(len: number, name: string): FormItemRule {
+  return {
+    trigger: 'blur',
+    max: len,
+    message: i18n.global.t('utils.form.maxlength', { name, len }),
+  }
+}