2018-02-22 17:48:36 +08:00
|
|
|
<!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>
|
2018-02-26 14:43:17 +08:00
|
|
|
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/res/apple-touch-icon-144x144.png" />
|
|
|
|
|
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/res/apple-touch-icon-152x152.png" />
|
|
|
|
|
<link rel="icon" type="image/png" href="/res/favicon-32x32.png" sizes="32x32" />
|
|
|
|
|
<link rel="icon" type="image/png" href="/res/favicon-16x16.png" sizes="16x16" />
|
2018-02-22 17:48:36 +08:00
|
|
|
<title>Login - Shiori - Bookmarks Manager</title>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
2018-05-23 21:14:26 +08:00
|
|
|
<div id="login-page" :class="{night: nightMode}">
|
2018-02-22 17:48:36 +08:00
|
|
|
<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">
|
2018-05-23 21:15:27 +08:00
|
|
|
<div class="input-field">
|
2018-02-22 17:48:36 +08:00
|
|
|
<p>Username: </p>
|
2018-05-26 23:00:14 +08:00
|
|
|
<input type="text" name="username" v-model.trim="username" placeholder="Username" tabindex="1">
|
2018-02-22 17:48:36 +08:00
|
|
|
</div>
|
|
|
|
|
<div class="input-field">
|
|
|
|
|
<p>Password: </p>
|
2018-05-26 23:00:14 +08:00
|
|
|
<input type="password" name="password" v-model.trim="password" placeholder="Password" tabindex="2" @keyup.enter="login">
|
2018-02-22 17:48:36 +08:00
|
|
|
</div>
|
|
|
|
|
<div class="input-field">
|
2018-05-26 23:00:14 +08:00
|
|
|
<a @click="toggleRemember" @keyup.enter="toggleRemember" tabindex="3">
|
2018-02-22 17:48:36 +08:00
|
|
|
<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>
|
2018-05-26 23:00:14 +08:00
|
|
|
<a v-else class="button" tabindex="4" @click="login" @keyup.enter="login">Login</a>
|
2018-02-22 17:48:36 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<script>
|
|
|
|
|
var app = new Vue({
|
|
|
|
|
el: '#login-page',
|
|
|
|
|
data: {
|
2018-05-23 21:14:26 +08:00
|
|
|
error: '',
|
2018-02-22 17:48:36 +08:00
|
|
|
loading: false,
|
|
|
|
|
username: '',
|
|
|
|
|
password: '',
|
2018-05-23 21:14:26 +08:00
|
|
|
rememberMe: false,
|
|
|
|
|
nightMode: false,
|
2018-02-22 17:48:36 +08:00
|
|
|
},
|
|
|
|
|
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) {
|
2018-06-06 22:48:46 +08:00
|
|
|
// Save token
|
2018-02-22 17:48:36 +08:00
|
|
|
var token = response.data;
|
|
|
|
|
Cookies.set('token', token, {
|
2018-05-23 21:14:26 +08:00
|
|
|
expires: this.rememberMe ? 7 : 1
|
2018-02-22 17:48:36 +08:00
|
|
|
});
|
|
|
|
|
|
2018-06-06 22:48:46 +08:00
|
|
|
// Set destination URL
|
|
|
|
|
var rx = /[&?]dst=([^&]+)(&|$)/g,
|
|
|
|
|
match = rx.exec(location.href);
|
|
|
|
|
|
|
|
|
|
if (match == null) {
|
|
|
|
|
location.href = '/';
|
|
|
|
|
} else {
|
|
|
|
|
var dst = match[1];
|
|
|
|
|
location.href = decodeURIComponent(dst);
|
|
|
|
|
}
|
2018-02-22 17:48:36 +08:00
|
|
|
})
|
|
|
|
|
.catch(function (error) {
|
2018-05-23 21:14:26 +08:00
|
|
|
var errorMsg = (error.response ? error.response.data : error.message).trim();
|
2018-02-22 17:48:36 +08:00
|
|
|
app.password = '';
|
|
|
|
|
app.loading = false;
|
2018-05-23 21:14:26 +08:00
|
|
|
app.error = errorMsg;
|
2018-02-22 17:48:36 +08:00
|
|
|
});
|
|
|
|
|
}
|
2018-05-23 21:14:26 +08:00
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
// Read config from local storage
|
|
|
|
|
var nightMode = localStorage.getItem('shiori-night-mode');
|
|
|
|
|
this.nightMode = nightMode === '1';
|
2018-02-22 17:48:36 +08:00
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
