mirror of
https://github.com/go-shiori/shiori.git
synced 2024-11-16 06:06:31 +08:00
Update login page
This commit is contained in:
Radhi Fadlillah
parent
3f27ffb08c
commit
3bf2bc5d1b
6 changed files with 94 additions and 31 deletions
File diff suppressed because one or more lines are too long
|
|
@ -29,8 +29,6 @@ func newWebHandler(db dt.Database, dataDir string) (*webHandler, error) {
|
|||
return nil, err
|
||||
}
|
||||
|
||||
jwtKey = []byte("Test12345")
|
||||
|
||||
// Create handler
|
||||
handler := &webHandler{
|
||||
db: db,
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -54,7 +54,7 @@
|
|||
</a>
|
||||
</yla-tooltip>
|
||||
<yla-tooltip placement="right" content="Log out">
|
||||
<a>
|
||||
<a @click="showDialogLogout">
|
||||
<i class="fas fa-sign-out-alt fa-fw"></i>
|
||||
</a>
|
||||
</yla-tooltip>
|
||||
|
|
@ -547,6 +547,18 @@
|
|||
}
|
||||
});
|
||||
},
|
||||
showDialogLogout() {
|
||||
this.showDialog({
|
||||
title: 'Log Out',
|
||||
content: 'Do you want to log out from shiori ?',
|
||||
mainText: 'Yes',
|
||||
secondText: 'No',
|
||||
mainClick: () => {
|
||||
Cookies.remove('token');
|
||||
location.href = '/login';
|
||||
}
|
||||
});
|
||||
},
|
||||
getHostname(url) {
|
||||
parser = document.createElement('a');
|
||||
parser.href = url;
|
||||
|
|
|
|||
|
|
@ -109,10 +109,12 @@ a {
|
|||
width: 100%;
|
||||
margin: 16px 16px 0;
|
||||
max-width: 400px;
|
||||
font-size: 0.9em;
|
||||
background-color: @contentBg;
|
||||
border: 1px solid @border;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
color: @main;
|
||||
}
|
||||
#login-box {
|
||||
width: 100%;
|
||||
|
|
@ -137,7 +139,8 @@ a {
|
|||
}
|
||||
}
|
||||
#tagline {
|
||||
font-weight: 100;
|
||||
font-size: 0.9em;
|
||||
font-weight: 500;
|
||||
color: @main;
|
||||
}
|
||||
}
|
||||
|
|
@ -157,6 +160,7 @@ a {
|
|||
input {
|
||||
color: @color;
|
||||
padding: 8px;
|
||||
background-color: @contentBg;
|
||||
border: 1px solid @border;
|
||||
flex: 1 0;
|
||||
font-size: 0.9em;
|
||||
|
|
@ -172,7 +176,8 @@ a {
|
|||
margin-right: 8px;
|
||||
color: @color;
|
||||
}
|
||||
&:hover {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @main;
|
||||
}
|
||||
}
|
||||
|
|
@ -182,17 +187,59 @@ a {
|
|||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
padding: 16px;
|
||||
justify-content: center;
|
||||
a {
|
||||
color: @colorLink;
|
||||
text-transform: uppercase;
|
||||
background-color: @contentBg;
|
||||
flex: 1 0;
|
||||
text-align: center;
|
||||
&.button {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: @accent;
|
||||
font-size: 0.9em;
|
||||
font-weight: 600;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @main;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.night {
|
||||
background-color: @nightBg;
|
||||
>.error-message {
|
||||
border-color: @nightBorder;
|
||||
background-color: @nightContentBg;
|
||||
}
|
||||
#login-box {
|
||||
border-color: @nightBorder;
|
||||
background-color: @nightContentBg;
|
||||
#logo-area {
|
||||
border-color: @nightBorder;
|
||||
}
|
||||
#input-area {
|
||||
border-color: @nightBorder;
|
||||
.input-field {
|
||||
p {
|
||||
color: @nightColor;
|
||||
}
|
||||
input {
|
||||
border-color: @nightBorder;
|
||||
background-color: @nightContentBg;
|
||||
color: @nightColor;
|
||||
}
|
||||
a {
|
||||
color: @nightColor;
|
||||
i {
|
||||
color: @nightColor;
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @main;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#button-area a {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @main;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div id="login-page">
|
||||
<div id="login-page" :class="{night: nightMode}">
|
||||
<p class="error-message" v-if="error !== ''">{{error}}</p>
|
||||
<div id="login-box">
|
||||
<div id="logo-area">
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
<p id="tagline">simple bookmark manager</p>
|
||||
</div>
|
||||
<div id="input-area">
|
||||
<div class="input-field">
|
||||
<div class="input-field" @keyup.enter="login">
|
||||
<p>Username: </p>
|
||||
<input type="text" name="username" v-model.trim="username" placeholder="Username">
|
||||
</div>
|
||||
|
|
@ -55,11 +55,12 @@
|
|||
var app = new Vue({
|
||||
el: '#login-page',
|
||||
data: {
|
||||
error: "",
|
||||
error: '',
|
||||
loading: false,
|
||||
username: '',
|
||||
password: '',
|
||||
rememberMe: false
|
||||
rememberMe: false,
|
||||
nightMode: false,
|
||||
},
|
||||
methods: {
|
||||
toggleRemember: function () {
|
||||
|
|
@ -84,18 +85,23 @@
|
|||
.then(function (response) {
|
||||
var token = response.data;
|
||||
Cookies.set('token', token, {
|
||||
expires: this.rememberMe ? 7 : 0.5
|
||||
expires: this.rememberMe ? 7 : 1
|
||||
});
|
||||
|
||||
location.href = '/';
|
||||
})
|
||||
.catch(function (error) {
|
||||
var errorMsg = error.response ? error.response.data : error.message;
|
||||
var errorMsg = (error.response ? error.response.data : error.message).trim();
|
||||
app.password = '';
|
||||
app.loading = false;
|
||||
app.error = errorMsg.trim();
|
||||
app.error = errorMsg;
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// Read config from local storage
|
||||
var nightMode = localStorage.getItem('shiori-night-mode');
|
||||
this.nightMode = nightMode === '1';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue