mirror of
https://github.com/go-shiori/shiori.git
synced 2024-11-16 14:16:29 +08:00
100 lines
No EOL
3.6 KiB
HTML
100 lines
No EOL
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<link rel="stylesheet" href="/css/stylesheet.css">
|
|
<link rel="stylesheet" href="/css/fontawesome.css">
|
|
<link rel="stylesheet" href="/css/source-sans-pro.css">
|
|
<script src="/js/vue.js"></script>
|
|
<script src="/js/axios.js"></script>
|
|
<script src="/js/js-cookie.js"></script>
|
|
<title>Login - Shiori - Bookmarks Manager</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="login-page">
|
|
<p class="error-message" v-if="error !== ''">{{error}}</p>
|
|
<div id="login-box">
|
|
<div id="logo-area">
|
|
<p id="logo">
|
|
<span>栞</span>shiori
|
|
</p>
|
|
<p id="tagline">simple bookmark manager</p>
|
|
</div>
|
|
<div id="input-area">
|
|
<div class="input-field">
|
|
<p>Username: </p>
|
|
<input type="text" name="username" v-model.trim="username" placeholder="Username">
|
|
</div>
|
|
<div class="input-field">
|
|
<p>Password: </p>
|
|
<input type="password" name="password" v-model.trim="password" placeholder="Password" @keyup.enter="login">
|
|
</div>
|
|
<div class="input-field">
|
|
<a @click="toggleRemember">
|
|
<i class="fa-fw" :class="rememberMe ? 'fas fa-check-square' : 'far fa-square'"></i>Remember me
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div id="button-area">
|
|
<a v-if="loading">
|
|
<i class="fas fa-fw fa-spinner fa-spin"></i>
|
|
</a>
|
|
<a v-else class="button" @click="login">Login</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
var app = new Vue({
|
|
el: '#login-page',
|
|
data: {
|
|
error: "",
|
|
loading: false,
|
|
username: '',
|
|
password: '',
|
|
rememberMe: false
|
|
},
|
|
methods: {
|
|
toggleRemember: function () {
|
|
this.rememberMe = !this.rememberMe;
|
|
},
|
|
login: function () {
|
|
// Validate input
|
|
if (this.username === '') {
|
|
this.error = 'Username must not empty';
|
|
return;
|
|
}
|
|
|
|
// Send request
|
|
this.loading = true;
|
|
axios.post('/api/login', {
|
|
username: this.username,
|
|
password: this.password,
|
|
remember: this.rememberMe
|
|
}, {
|
|
timeout: 10000
|
|
})
|
|
.then(function (response) {
|
|
var token = response.data;
|
|
Cookies.set('token', token, {
|
|
expires: this.rememberMe ? 7 : 0.5
|
|
});
|
|
|
|
location.href = '/';
|
|
})
|
|
.catch(function (error) {
|
|
var errorMsg = error.response ? error.response.data : error.message;
|
|
app.password = '';
|
|
app.loading = false;
|
|
app.error = errorMsg.trim();
|
|
});
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |