Merge branch 'master' into changeOwnPasswd

This commit is contained in:
Tao Chen
2024-10-31 16:16:27 +08:00
committed by GitHub
11 changed files with 229 additions and 27 deletions
+9 -1
View File
@@ -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,
})
}
+1 -1
View File
@@ -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) => {
+8 -1
View File
@@ -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'),
@@ -15,11 +20,13 @@ const constantRoutes = [
},
{
path: '/oauth/:code',
meta: { title: 'OauthLogin' },
component: () => import('@/views/oauth/login.vue'),
hidden: true,
},
{
path: '/oauth/bind/:code',
meta: { title: 'OauthBind' },
component: () => import('@/views/oauth/bind.vue'),
hidden: true,
},
+9
View File
@@ -438,5 +438,14 @@
},
"LastOnlineIp": {
"One": "Last Online Ip"
},
"ConfirmPassword": {
"One": "Confirm Password"
},
"PasswordNotMatchConfirmPassword": {
"One": "Password not match Confirm Password"
},
"ToLogin": {
"One": "To Login"
}
}
+9
View File
@@ -424,5 +424,14 @@
},
"LastOnlineIp": {
"One": "마지막 온라인 IP"
},
"ConfirmPassword": {
"One": "비밀번호 확인"
},
"PasswordNotMatchConfirmPassword": {
"One": "비밀번호가 확인 비밀번호와 일치하지 않습니다"
},
"ToLogin": {
"One": "로그인하려면 클릭하십시오"
}
}
+9
View File
@@ -438,6 +438,15 @@
},
"LastOnlineIp": {
"One": "Последний IP онлайн"
},
"ConfirmPassword": {
"One": "Подтвердите пароль"
},
"PasswordNotMatchConfirmPassword": {
"One": "Пароль и подтверждение пароля не совпадают"
},
"ToLogin": {
"One": "Войти"
}
}
+8 -3
View File
@@ -428,8 +428,7 @@
"LastOnlineIp": {
"One": "最后在线IP"
},
"or login in with" :
{
"or login in with": {
"One": "或使用以下登陆"
},
"Optional, default is" :
@@ -450,7 +449,13 @@
"New PassWD": {
"One": "新密码"
},
"ConformPassWD": {
"ConfirmPassword": {
"One": "确认密码"
},
"PasswordNotMatchConfirmPassword": {
"One": "密码与确认密码不匹配"
},
"ToLogin": {
"One": "去登录"
}
}
+14 -16
View File
@@ -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>
@@ -26,7 +27,7 @@
<div v-for="(option, index) in options" :key="index" class="oidc-option">
<el-button @click="handleOIDCLogin(option.name)" class="oidc-btn">
<img :src="getProviderImage(option.name)" alt="provider" class="oidc-icon" />
{{ T(option.name) }}
<span>{{ T(option.name) }}</span>
</el-button>
</div>
</div>
@@ -103,23 +104,13 @@ const getProviderImage = (provider) => {
return providerImageMap[provider] || providerImageMap.default;
};
const allowRegister = ref(false)
const loadLoginOptions = async () => {
try {
const res = await loginOptions().catch(() => []);
if (!Array.isArray(res) || !res.length) return console.warn('No valid response received');
const jsonPart = res[0].split('/')[1];
if (!jsonPart) return console.error('Invalid input string:', res[0]);
// const ops = JSON.parse(jsonPart).map(option => ({ name: option.name }));
// 不确定怎么处理webauth,不显示
// 解析 JSON,并过滤掉 "webauth" 类型的选项
const ops = JSON.parse(jsonPart)
.filter(option => option.name !== "webauth") // 排除 "webauth" 类型的选项
.map(option => ({ name: option.name })); // 创建新的对象数组
if (!ops.length) return;
options.push(...ops);
const res = await loginOptions().catch(_ => false);
if(!res || !res.data) return console.error('No valid response received');
res.data.ops.map(option => (options.push({ name: option }))); // 创建新的对象数组
allowRegister.value = res.data.register
} catch (error) {
console.error('Error loading login options:', error.message);
}
@@ -141,6 +132,10 @@ onMounted(async () => {
loadLoginOptions(); // 组件挂载后调用登录选项加载函数
}
});
const register = () => {
router.push('/register')
}
</script>
<style scoped lang="scss">
@@ -151,6 +146,7 @@ onMounted(async () => {
height: 100vh;
background-color: #2d3a4b;
padding: 20px;
box-sizing: border-box;
}
.login-card {
@@ -180,6 +176,7 @@ h1 {
width: 100%;
height: 40px;
margin-bottom: 20px;
margin-left: 0;
}
.divider {
@@ -230,6 +227,7 @@ h1 {
.oidc-icon {
width: 24px;
height: 24px;
margin-right: 10px;
}
.login-logo {
+11 -4
View File
@@ -49,10 +49,17 @@
const res = await bindConfirm({ code }).catch(_ => false)
if (res) {
resStatus.value = 1
ElMessage.success(T('OperationSuccessAndCloseAfter3Seconds'))
setTimeout(_ => {
out()
}, 3000)
if (res.data.device_type === 'webadmin') {
ElMessage.success(T('OperationSuccess'))
//后台登录
router.push('/')
} else {
ElMessage.success(T('OperationSuccessAndCloseAfter3Seconds'))
setTimeout(_ => {
out()
}, 3000)
}
}
}
const out = () => {
+147
View File
@@ -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>
+3
View File
@@ -91,6 +91,9 @@ export function useDel () {
}
const res = remove({ id }).catch(_ => false)
if (res) {
ElMessage.success(T('OperationSuccess'))
}
return res
}
return {