mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2025-08-31 23:36:18 +00:00
Update login.html
This commit is contained in:
MasoudKhz
GitHub
parent
24eeac691b
commit
b3c33494ce
1 changed files with 148 additions and 144 deletions
|
|
@ -1,159 +1,163 @@
|
||||||
|
saeed<!DOCTYPE html>
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
{{template "head" .}}
|
||||||
<meta charset="utf-8">
|
<style>
|
||||||
<meta name="renderer" content="webkit">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="author" content="">
|
|
||||||
<title>{{ .host }}-{{ i18n .title}}</title>
|
|
||||||
<link href="{{ .base_path }}saeed/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
|
|
||||||
<link href="{{ .base_path }}saeed/css/sb-admin-2.min.css" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<a-layout id="app" v-cloak class="login">
|
#app {
|
||||||
|
padding-top: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
<body class="bg-gradient-primary">
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
margin: 20px 0 50px 0;
|
||||||
|
}
|
||||||
|
|
||||||
<div class="container">
|
.ant-btn, .ant-input {
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
<!-- Outer Row -->
|
.ant-input-group-addon {
|
||||||
<div class="row justify-content-center">
|
border-radius: 0 30px 30px 0;
|
||||||
|
width: 50px;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
<div class="col-xl-10 col-lg-12 col-md-9">
|
.ant-input-affix-wrapper .ant-input-prefix {
|
||||||
|
left: 23px;
|
||||||
|
}
|
||||||
|
|
||||||
<div class="card o-hidden border-0 shadow-lg my-5">
|
.ant-input-affix-wrapper .ant-input:not(:first-child) {
|
||||||
<div class="card-body p-0">
|
padding-left: 50px;
|
||||||
<!-- Nested Row within Card Body -->
|
}
|
||||||
<div class="row">
|
|
||||||
<div class="col-lg-6 d-none d-lg-block bg-login-image"></div>
|
|
||||||
<div class="col-lg-6">
|
|
||||||
<div class="p-5">
|
|
||||||
<div class="text-center">
|
|
||||||
<h1 class="h4 text-gray-900 mb-4">{{ i18n "pages.login.title" }}</h1>
|
|
||||||
</div>
|
|
||||||
<form class="user">
|
|
||||||
<a-form-item v-if="secretEnable">
|
|
||||||
<password-input icon="key" v-model.trim="user.loginSecret"
|
|
||||||
placeholder='{{ i18n "secretToken" }}' @keydown.enter.native="login">
|
|
||||||
</password-input>
|
|
||||||
</a-input>
|
|
||||||
<div class="form-group">
|
|
||||||
<a-input v-model.trim="user.username" placeholder='{{ i18n "username" }}'
|
|
||||||
@keydown.enter.native="login" autofocus>
|
|
||||||
<a-icon slot="prefix" type="user" :style="'font-size: 16px;' + themeSwitcher.textStyle" />
|
|
||||||
</a-input>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<!-- <input type="password" class="form-control form-control-user"
|
|
||||||
id="exampleInputPassword" placeholder="Password"> -->
|
|
||||||
|
|
||||||
<password-input icon="lock" v-model.trim="user.password"
|
.centered {
|
||||||
placeholder='{{ i18n "password" }}' @keydown.enter.native="login">
|
display: flex;
|
||||||
</password-input>
|
text-align: center;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
</div>
|
.title {
|
||||||
<!-- <div class="form-group">
|
font-size: 32px;
|
||||||
<div class="custom-control custom-checkbox small">
|
font-weight: bold;
|
||||||
<input type="checkbox" class="custom-control-input" id="customCheck">
|
}
|
||||||
<label class="custom-control-label" for="customCheck">Remember
|
|
||||||
Me</label>
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<a-button type="primary" :loading="loading"
|
</style>
|
||||||
class="btn btn-primary btn-user btn-block"
|
<body>
|
||||||
:class="btn btn-primary btn-user btn-block"
|
<a-layout id="app" v-cloak class="login" :class="themeSwitcher.darkCardClass">
|
||||||
@click="login"
|
<transition name="list" appear>
|
||||||
:icon="loading ? 'poweroff' : undefined"
|
<a-layout-content>
|
||||||
:style="loading ? { width: '50px' } : { display: 'block', width: '100%' }">
|
<a-row type="flex" justify="center">
|
||||||
[[ loading ? '' : '{{ i18n "login" }}' ]]
|
<a-col :xs="22" :sm="20" :md="16" :lg="12" :xl="8">
|
||||||
</a-button>
|
<h1 class="title">Hello {{ i18n "pages.login.title" }}</h1>
|
||||||
|
</a-col>
|
||||||
<!-- <hr>
|
</a-row>
|
||||||
<a href="index.html" class="btn btn-google btn-user btn-block">
|
<a-row type="flex" justify="center">
|
||||||
<i class="fab fa-google fa-fw"></i> Login with Google
|
<a-col :xs="22" :sm="20" :md="16" :lg="12" :xl="8">
|
||||||
</a>
|
<a-form>
|
||||||
<a href="index.html" class="btn btn-facebook btn-user btn-block">
|
<a-form-item>
|
||||||
<i class="fab fa-facebook-f fa-fw"></i> Login with Facebook
|
<a-input v-model.trim="user.username" placeholder='{{ i18n "username" }}'
|
||||||
</a> -->
|
@keydown.enter.native="login" autofocus>
|
||||||
</form>
|
<a-icon slot="prefix" type="user" :style="'font-size: 16px;' + themeSwitcher.textStyle" />
|
||||||
</div>
|
</a-input>
|
||||||
</div>
|
</a-form-item>
|
||||||
</div>
|
<a-form-item>
|
||||||
</div>
|
<password-input icon="lock" v-model.trim="user.password"
|
||||||
</div>
|
placeholder='{{ i18n "password" }}' @keydown.enter.native="login">
|
||||||
|
</password-input>
|
||||||
</div>
|
</a-form-item>
|
||||||
|
<a-form-item v-if="secretEnable">
|
||||||
</div>
|
<password-input icon="key" v-model.trim="user.loginSecret"
|
||||||
|
placeholder='{{ i18n "secretToken" }}' @keydown.enter.native="login">
|
||||||
</div>
|
</password-input>
|
||||||
</body>
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-row justify="center" class="centered">
|
||||||
|
<a-button type="primary" :loading="loading" @click="login" :icon="loading ? 'poweroff' : undefined"
|
||||||
|
:style="loading ? { width: '50px' } : { display: 'block', width: '100%' }">
|
||||||
|
[[ loading ? '' : '{{ i18n "login" }}' ]]
|
||||||
|
</a-button>
|
||||||
|
</a-row>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-row justify="center" class="centered">
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-select ref="selectLang" v-model="lang" @change="setLang(lang)" :dropdown-class-name="themeSwitcher.darkCardClass">
|
||||||
|
<a-select-option :value="l.value" :label="l.value" v-for="l in supportLangs">
|
||||||
|
<span role="img" :aria-label="l.name" v-text="l.icon"></span>
|
||||||
|
<span v-text="l.name"></span>
|
||||||
|
</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-row justify="center" class="centered">
|
||||||
|
<theme-switch />
|
||||||
|
</a-row>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-layout-content>
|
||||||
|
</transition>
|
||||||
</a-layout>
|
</a-layout>
|
||||||
{{template "js" .}}
|
{{template "js" .}}
|
||||||
{{template "component/themeSwitcher" .}}
|
{{template "component/themeSwitcher" .}}
|
||||||
{{template "component/password" .}}
|
{{template "component/password" .}}
|
||||||
|
<script>
|
||||||
|
|
||||||
<!-- Bootstrap core JavaScript-->
|
const app = new Vue({
|
||||||
<script src="{{ .base_path }}saeed/vendor/jquery/jquery.min.js"></script>
|
delimiters: ['[[', ']]'],
|
||||||
<script src="{{ .base_path }}saeed/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
el: '#app',
|
||||||
|
data: {
|
||||||
<!-- Core plugin JavaScript-->
|
themeSwitcher,
|
||||||
<script src="{{ .base_path }}saeed/vendor/jquery-easing/jquery.easing.min.js"></script>
|
loading: false,
|
||||||
|
user: new User(),
|
||||||
<!-- Custom scripts for all pages-->
|
secretEnable: false,
|
||||||
<script src="{{ .base_path }}saeed/js/sb-admin-2.min.js"></script>
|
lang: ""
|
||||||
|
},
|
||||||
<script>
|
async created() {
|
||||||
const app = new Vue({
|
this.updateBackground();
|
||||||
delimiters: ['[[', ']]'],
|
this.lang = getLang();
|
||||||
el: '#app',
|
this.secretEnable = await this.getSecretStatus();
|
||||||
data: {
|
},
|
||||||
themeSwitcher,
|
methods: {
|
||||||
loading: false,
|
async login() {
|
||||||
user: new User(),
|
this.loading = true;
|
||||||
secretEnable: false,
|
const msg = await HttpUtil.post('/login', this.user);
|
||||||
lang: ""
|
this.loading = false;
|
||||||
|
if (msg.success) {
|
||||||
|
location.href = basePath + 'panel/';
|
||||||
|
}
|
||||||
},
|
},
|
||||||
async created() {
|
async getSecretStatus() {
|
||||||
|
this.loading = true;
|
||||||
|
const msg = await HttpUtil.post('/getSecretStatus');
|
||||||
|
this.loading = false;
|
||||||
|
if (msg.success) {
|
||||||
|
this.secretEnable = msg.obj;
|
||||||
|
return msg.obj;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
updateBackground() {
|
||||||
|
const leftColor = RandomUtil.randomIntRange(0x222222, 0xFFFFFF / 2).toString(16);
|
||||||
|
const rightColor = RandomUtil.randomIntRange(0xFFFFFF / 2, 0xDDDDDD).toString(16);
|
||||||
|
const deg = RandomUtil.randomIntRange(0, 360);
|
||||||
|
const background = `linear-gradient(${deg}deg, #${leftColor} 10%, #${rightColor} 100%)`;
|
||||||
|
document.querySelector('#app').style.background = this.themeSwitcher.isDarkTheme ? colors.dark.bg : background;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
'themeSwitcher.isDarkTheme'(newVal, oldVal) {
|
||||||
this.updateBackground();
|
this.updateBackground();
|
||||||
this.lang = getLang();
|
|
||||||
this.secretEnable = await this.getSecretStatus();
|
|
||||||
},
|
},
|
||||||
methods: {
|
},
|
||||||
async login() {
|
});
|
||||||
this.loading = true;
|
|
||||||
const msg = await HttpUtil.post('/login', this.user);
|
</script>
|
||||||
this.loading = false;
|
</body>
|
||||||
if (msg.success) {
|
|
||||||
location.href = basePath + 'panel/';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async getSecretStatus() {
|
|
||||||
this.loading = true;
|
|
||||||
const msg = await HttpUtil.post('/getSecretStatus');
|
|
||||||
this.loading = false;
|
|
||||||
if (msg.success) {
|
|
||||||
this.secretEnable = msg.obj;
|
|
||||||
return msg.obj;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
updateBackground() {
|
|
||||||
const leftColor = RandomUtil.randomIntRange(0x222222, 0xFFFFFF / 2).toString(16);
|
|
||||||
const rightColor = RandomUtil.randomIntRange(0xFFFFFF / 2, 0xDDDDDD).toString(16);
|
|
||||||
const deg = RandomUtil.randomIntRange(0, 360);
|
|
||||||
const background = `linear-gradient(${deg}deg, #${leftColor} 10%, #${rightColor} 100%)`;
|
|
||||||
document.querySelector('#app').style.background = this.themeSwitcher.isDarkTheme ? colors.dark.bg : background;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
'themeSwitcher.isDarkTheme'(newVal, oldVal) {
|
|
||||||
this.updateBackground();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in a new issue