Merge branch 'master' into changeOwnPasswd
This commit is contained in:
Tao Chen
GitHub
+15
-17
@@ -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 {
|
||||
@@ -255,4 +253,4 @@ h1 {
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -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 = () => {
|
||||
|
||||
@@ -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>
|
||||
@@ -91,6 +91,9 @@ export function useDel () {
|
||||
}
|
||||
|
||||
const res = remove({ id }).catch(_ => false)
|
||||
if (res) {
|
||||
ElMessage.success(T('OperationSuccess'))
|
||||
}
|
||||
return res
|
||||
}
|
||||
return {
|
||||
|
||||
Reference in New Issue
Block a user