111 lines
4.8 KiB
PHP
111 lines
4.8 KiB
PHP
<?php include ("./link/session.php") ?>
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<?php include ("./public/head.inc") ?>
|
|
</head>
|
|
<body>
|
|
<div class="container-fluid login auth-cover lp-align-center" id="app">
|
|
<div class="card border-3" style="width: 400px">
|
|
<div class="card-body p-4">
|
|
<div class="row">
|
|
<div class="col-lg-12 text-center">
|
|
<img src="assets/img/logo.png" class="" width="126">
|
|
</div>
|
|
</div>
|
|
<div class="form-body mt-4 pb-3">
|
|
<form @submit.prevent="handleSubmit" class="row g-3" action="/link/action.php" method="post" ref="form" autocomplete="off">
|
|
<div class="col-12">
|
|
<div class="input-group">
|
|
<div class="input-group-text border-0 lp-cursor-pointer"><i class="fa-solid fa-user"></i></div>
|
|
<input v-model.trim.lazy="username" type="text" class="form-control border-0 border-start" name="username">
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="input-group">
|
|
<div class="input-group-text border-0 lp-cursor-pointer"><i class="fa-solid fa-key"></i></div>
|
|
<input v-model.trim.lazy="password" :type="!showPasswd ? 'password' : 'text'" class="form-control border-0 border-start input-passwd" name="password">
|
|
<div class="input-group-text border-0 lp-cursor-pointer font-16" @click="showPasswd = !showPasswd"><i :class="['fa-regular',{'fa-eye-slash':showPasswd},{'fa-eye ':!showPasswd}]"></i></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="form-check form-switch form-check-primary border-0">
|
|
<input class="form-check-input lp-cursor-pointer" type="checkbox" v-model="remember">
|
|
<label class="form-check-label"><cn>记住密码</cn><en>Remember Me</en></label>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 text-center">
|
|
<div class="d-grid">
|
|
<button type="submit" class="btn border-3 btn-primary"><cn>登录</cn><en>Login</en></button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<?php include ("./public/foot.inc") ?>
|
|
|
|
<script type="module">
|
|
|
|
import { alertMsg,getUrlParam,isEmpty } from "./assets/js/lp.utils.js";
|
|
import { ignoreCustomElementPlugin } from "./assets/js/vue.helper.js";
|
|
import vue from "./assets/js/vue.build.js";
|
|
|
|
const { createApp,ref,onMounted } = vue;
|
|
const app = createApp({
|
|
setup(props,context) {
|
|
|
|
const state = {
|
|
form: ref(null),
|
|
username: ref(""),
|
|
password: ref(""),
|
|
remember: ref(false),
|
|
showPasswd:ref(false)
|
|
}
|
|
|
|
const removeUrlParam = () => {
|
|
const urlWithoutParams = window.location.href.split('?')[0];
|
|
history.replaceState({}, document.title, urlWithoutParams);
|
|
}
|
|
|
|
const handleSubmit = () => {
|
|
if(isEmpty(state.username.value) || isEmpty(state.password.value)) {
|
|
alertMsg("<cn>账号或密码不能为空</cn><en>Account or password cannot be empty</en>", "error")
|
|
return;
|
|
}
|
|
|
|
if(state.remember.value) {
|
|
localStorage.setItem("username",state.username.value);
|
|
localStorage.setItem("password",state.password.value);
|
|
} else {
|
|
localStorage.removeItem("username");
|
|
localStorage.removeItem("password");
|
|
}
|
|
state.form.value.submit();
|
|
}
|
|
|
|
onMounted(()=>{
|
|
let uname = localStorage.getItem("username");
|
|
let passwd = localStorage.getItem("password");
|
|
if(uname !== null && passwd !== null) {
|
|
state.remember.value = true;
|
|
state.username.value = uname;
|
|
state.password.value = passwd;
|
|
}
|
|
|
|
let param = getUrlParam("u");
|
|
if(param === "e") {
|
|
alertMsg("<cn>账号或密码错误</cn><en>The account or password is incorrect</en>","error")
|
|
removeUrlParam();
|
|
}
|
|
})
|
|
return { ...state,handleSubmit }
|
|
},
|
|
});
|
|
app.use(ignoreCustomElementPlugin);
|
|
app.mount('#app');
|
|
</script>
|
|
</body>
|
|
</html>
|