add register

src/api/user.js

@@ -79,6 +79,14 @@ export function groupUsers (data) {
   return request({
     url: '/user/groupUsers',
     method: 'post',
-    data
+    data,
+  })
+}
+
+export function register (data) {
+  return request({
+    url: '/user/register',
+    method: 'post',
+    data,
   })
 }

src/permission.js

@@ -10,7 +10,7 @@ import { T } from '@/utils/i18n'
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
-const whiteList = ['/login']
+const whiteList = ['/login', '/register']
 const routeStore = useRouteStore(pinia)
 const appStore = useAppStore(pinia)
 router.beforeEach(async (to, from, next) => {

src/router/index.js

@@ -7,7 +7,12 @@ const constantRoutes = [
     meta: { title: 'Login' },
     component: () => import('@/views/login/login.vue'),
   },
-
+  {
+    path: '/register',
+    name: 'Register',
+    meta: { title: 'Register' },
+    component: () => import('@/views/register/index.vue'),
+  },
   {
     path: '/404',
     component: () => import('@/views/error-page/404.vue'),

src/utils/i18n/en.json

@@ -438,5 +438,14 @@
   },
   "LastOnlineIp": {
     "One": "Last Online Ip"
+  },
+  "ConfirmPassword": {
+    "One": "Confirm Password"
+  },
+  "PasswordNotMatchConfirmPassword": {
+    "One": "Password not match Confirm Password"
+  },
+  "ToLogin": {
+    "One": "To Login"
   }
 }

src/utils/i18n/ko.json

@@ -424,5 +424,14 @@
   },
   "LastOnlineIp": {
     "One": "마지막 온라인 IP"
+  },
+  "ConfirmPassword": {
+    "One": "비밀번호 확인"
+  },
+  "PasswordNotMatchConfirmPassword": {
+    "One": "비밀번호가 확인 비밀번호와 일치하지 않습니다"
+  },
+  "ToLogin": {
+    "One": "로그인하려면 클릭하십시오"
   }
 }

src/utils/i18n/ru.json

@@ -438,6 +438,15 @@
   },
   "LastOnlineIp": {
     "One": "Последний IP онлайн"
+  },
+  "ConfirmPassword": {
+    "One": "Подтвердите пароль"
+  },
+  "PasswordNotMatchConfirmPassword": {
+    "One": "Пароль и подтверждение пароля не совпадают"
+  },
+  "ToLogin": {
+    "One": "Войти"
   }
 }
 

src/utils/i18n/zh_CN.json

@@ -428,8 +428,16 @@
   "LastOnlineIp": {
     "One": "最后在线IP"
   },
-  "or login in with" :
-  {
+  "or login in with": {
     "One": "或使用以下登陆"
+  },
+  "ConfirmPassword": {
+    "One": "确认密码"
+  },
+  "PasswordNotMatchConfirmPassword": {
+    "One": "密码与确认密码不匹配"
+  },
+  "ToLogin": {
+    "One": "去登录"
   }
 }

src/views/login/login.vue

@@ -15,6 +15,7 @@
 
         <el-form-item>
           <el-button @click="login" type="primary" class="login-button">{{ T('Login') }}</el-button>
+          <el-button v-if="allowRegister" @click="register" class="login-button">{{ T('Register') }}</el-button>
         </el-form-item>
       </el-form>
 
@@ -103,11 +104,13 @@ const getProviderImage = (provider) => {
   return providerImageMap[provider] || providerImageMap.default;
 };
 
+const allowRegister = ref(false)
 const loadLoginOptions = async () => {
   try {
     const res = await loginOptions().catch(_ => false);
     if(!res || !res.data) return console.error('No valid response received');
-    res.data.map(option => (options.push({ name: option }))); // 创建新的对象数组
+    res.data.ops.map(option => (options.push({ name: option }))); // 创建新的对象数组
+    allowRegister.value = res.data.register
   } catch (error) {
     console.error('Error loading login options:', error.message);
   }
@@ -130,6 +133,9 @@ onMounted(async () => {
   }
 });
 
+const register = () => {
+  router.push('/register')
+}
 </script>
 
 <style scoped lang="scss">
@@ -140,6 +146,7 @@ onMounted(async () => {
   height: 100vh;
   background-color: #2d3a4b;
   padding: 20px;
+  box-sizing: border-box;
 }
 
 .login-card {
@@ -169,6 +176,7 @@ h1 {
   width: 100%;
   height: 40px;
   margin-bottom: 20px;
+  margin-left: 0;
 }
 
 .divider {

src/views/register/index.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="login-container">
+    <div class="login-card">
+      <img src="@/assets/logo.png" alt="logo" class="login-logo"/>
+      <el-form ref="f" :model="form" label-position="top" class="login-form" :rules="rules">
+        <el-form-item :label="T('Username')" prop="username">
+          <el-input v-model="form.username" class="login-input"></el-input>
+        </el-form-item>
+
+        <el-form-item :label="T('Password')" prop="password">
+          <el-input v-model="form.password" type="password" show-password
+                    class="login-input"></el-input>
+        </el-form-item>
+        <el-form-item :label="T('ConfirmPassword')" prop="confirm_password">
+          <el-input v-model="form.confirm_password" type="password" @keyup.enter.native="submit" show-password
+                    class="login-input"></el-input>
+        </el-form-item>
+        <el-form-item label="">
+          <el-button @click="submit" class="login-button" type="success">{{ T('Submit') }}</el-button>
+          <el-button @click="toLogin" class="login-button">{{ T('ToLogin') }}</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { reactive, ref } from 'vue'
+  import { ElMessage } from 'element-plus'
+  import { T } from '@/utils/i18n'
+  import { useRoute, useRouter } from 'vue-router'
+  import { register } from '@/api/user'
+  import { useUserStore } from '@/store/user'
+
+  const router = useRouter()
+  const userStore = useUserStore()
+  const form = reactive({
+    username: '',
+    password: '',
+    confirm_password: '',
+  })
+  const rules = {
+    username: [
+      { required: true, message: T('ParamRequired', { param: T('Username') }), trigger: 'blur' },
+    ],
+    password: [
+      { required: true, message: T('ParamRequired', { param: T('Password') }), trigger: 'blur' },
+    ],
+    confirm_password: [
+      { required: true, message: T('ParamRequired', { param: T('ConfirmPassword') }), trigger: 'blur' },
+      {
+        validator: (rule, value, callback) => {
+          if (value !== form.password) {
+            callback(new Error(T('PasswordNotMatchConfirmPassword')))
+          } else {
+            callback()
+          }
+        }, trigger: 'blur',
+      },
+    ],
+  }
+  const f = ref(null)
+  const submit = async () => {
+    const v = await f.value.validate().catch(_ => false)
+    if (!v) {
+      return
+    }
+    const res = await register(form).catch(_ => false)
+    if (!res) {
+      return
+    }
+    userStore.saveUserData(res.data)
+    ElMessage.success('Submit')
+    router.push('/')
+  }
+  const toLogin = () => {
+    router.push('/login')
+
+  }
+</script>
+
+<style scoped lang="scss">
+.login-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-color: #2d3a4b;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.login-card {
+  width: 360px;
+  background-color: #283342;
+  padding: 40px;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+h1 {
+  margin-bottom: 20px;
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.login-form {
+  margin-bottom: 20px;
+}
+
+.login-input {
+  width: 100%;
+}
+
+.login-button {
+  width: 100%;
+  height: 40px;
+  margin-bottom: 20px;
+  margin-top: 20px;
+  margin-left: 0;
+}
+
+.login-logo {
+  width: 80px;
+  height: 80px;
+  margin: 0 auto 20px;
+  display: block;
+}
+
+.el-form-item {
+  ::v-deep(.el-form-item__label) {
+    color: #fff;
+  }
+
+  .el-input {
+    ::v-deep(.el-input__wrapper) {
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      background: transparent;
+    }
+
+    ::v-deep(input) {
+      color: #fff;
+    }
+  }
+}
+</style>