More admin login preparation

This commit is contained in:
Mark van Renswoude 2018-04-03 23:28:43 +02:00
parent e08b0b19d2
commit f9923b7813
11 changed files with 560 additions and 561 deletions

View File

@ -59,6 +59,7 @@ const webpackConfig = require('./webpack.config.js');
app.use(webpackHotMiddleware(compiler));
}
app.use(express.static(path.join(__dirname, 'custom')));
app.use(express.static(path.join(__dirname, 'public', 'dist')));

991
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -25,7 +25,7 @@
"lodash": "^4.17.5",
"mkdirp": "^0.5.1",
"nedb": "^1.8.0",
"npm": "^5.7.1",
"npm": "^5.8.0",
"shortid": "^2.2.8",
"tus-node-server": "^0.2.10"
},

1
public/dist/custom.css vendored Normal file
View File

@ -0,0 +1 @@
/* This space intentionally left blank */

View File

@ -17,21 +17,6 @@ import _ from 'lodash';
import shared from './shared';
if (typeof customMessages !== 'undefined')
{
_.merge(messages, customMessages);
if (customMessages.hasOwnProperty('allLocales'))
{
for (var key in messages)
{
if (key !== 'allLocales' && messages.hasOwnProperty(key))
_.merge(messages[key], customMessages.allLocales);
}
}
}
export default {
name: 'app',
data () {

View File

@ -4,6 +4,22 @@ import VueRouter from 'vue-router';
import App from './App.vue';
import messages from './lang';
if (typeof customMessages !== 'undefined')
{
_.merge(messages, customMessages);
if (customMessages.hasOwnProperty('allLocales'))
{
for (var key in messages)
{
if (key !== 'allLocales' && messages.hasOwnProperty(key))
_.merge(messages[key], customMessages.allLocales);
}
}
}
Vue.use(VueI18n);
Vue.use(VueRouter);

View File

@ -4,8 +4,10 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Recv</title>
<link rel="stylesheet" type="text/css" href="/custom.css">
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="/custom.js"></script>
</body>
</html>

View File

@ -19,6 +19,16 @@ export default {
done: 'Done',
dropPaste: 'Drop files here, paste or',
browse: 'browse'
},
admin: {
login: {
usernamePlaceholder: 'Username or e-mail address',
passwordPlaceholder: 'Password',
button: 'Login',
buttonChecking: 'Checking...'
}
}
},
@ -42,6 +52,16 @@ export default {
done: 'Gereed',
dropPaste: 'Sleep bestanden, plak of ',
browse: 'selecteer'
},
admin: {
login: {
usernamePlaceholder: 'Gebruikersnaam of e-mail adres',
passwordPlaceholder: 'Wachtwoord',
button: 'Inloggen',
buttonChecking: 'Controleren...'
}
}
}
}

View File

@ -2,7 +2,7 @@
<div id="landing">
<form class="pure-form pure-form-stacked" @submit.prevent="checkCode">
<fieldset class="pure-group">
<input type="text" class="pure-input-1-2" v-model="code.value" :placeholder="$t('landing.invitePlaceholder')">
<input type="text" class="pure-input-1-2" v-model="code.value" :placeholder="$t('landing.invitePlaceholder')" autofocus>
</fieldset>
<button type="submit" class="pure-button pure-button-primary" :disabled="code.value.trim() == '' || code.checking">{{ $t(code.checking ? 'landing.inviteButtonChecking' : 'landing.inviteButton') }} <span v-if="code.checking"><i class="fas fa-spinner fa-pulse"></i></span></button>

View File

@ -1,5 +1,5 @@
<template>
<div id="landing">
<div id="container">
<div class="content">
<div class="logo">
<img src="/images/logo.png">

View File

@ -1,14 +1,21 @@
<template>
<div id="login">
<form class="pure-form pure-form-stacked" @submit.prevent="login">
<fieldset class="pure-group">
<input type="text" class="pure-input-1-2" v-model="username" :placeholder="$t('landing.invitePlaceholder')">
<input type="password" class="pure-input-1-2" v-model="password" :placeholder="$t('landing.invitePlaceholder')">
</fieldset>
<div id="container">
<div class="content">
<div id="login">
<div class="logo">
<img src="/images/logo.png">
</div>
<button type="submit" class="pure-button pure-button-primary" :disabled="username.trim() == '' || password.trim() == '' || checking">{{ $t(checking ? 'landing.inviteButtonChecking' : 'landing.inviteButton') }} <span v-if="checking"><i class="fas fa-spinner fa-pulse"></i></span></button>
</form>
<form class="pure-form pure-form-stacked" @submit.prevent="login">
<fieldset class="pure-group">
<input type="text" class="pure-input-1-2" v-model="username" :placeholder="$t('admin.login.usernamePlaceholder')" autofocus>
<input type="password" class="pure-input-1-2" v-model="password" :placeholder="$t('admin.login.passwordPlaceholder')">
</fieldset>
<button type="submit" class="pure-button pure-button-primary" :disabled="username.trim() == '' || password.trim() == '' || checking">{{ $t(checking ? 'admin.login.buttonChecking' : 'admin.login.button') }} <span v-if="checking"><i class="fas fa-spinner fa-pulse"></i></span></button>
</form>
</div>
</div>
</div>
</template>
@ -26,8 +33,50 @@ export default {
methods: {
login()
{
alert('TODO');
var self = this;
if (self.checking)
return;
self.checking = true;
axios.post('/token/login', {
username: self.username,
password: self.password
})
.then((response) =>
{
shared.token = response.data;
self.$router.push({ path: '/admin/codes' });
})
.catch((error) =>
{
if (error.response && error.response.status == 403)
shared.$emit('showNotification', self.$i18n.t('notification.invalidCode'), false);
else
shared.$emit('showNotification', error.message);
})
.then(() =>
{
self.checking = false;
});
}
}
}
</script>
</script>
<style lang="scss">
#login
{
text-align: center;
input
{
display: inline-block;
}
.login
{
margin-top: 5em;
}
}
</style>