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(webpackHotMiddleware(compiler));
} }
app.use(express.static(path.join(__dirname, 'custom')));
app.use(express.static(path.join(__dirname, 'public', 'dist'))); 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", "lodash": "^4.17.5",
"mkdirp": "^0.5.1", "mkdirp": "^0.5.1",
"nedb": "^1.8.0", "nedb": "^1.8.0",
"npm": "^5.7.1", "npm": "^5.8.0",
"shortid": "^2.2.8", "shortid": "^2.2.8",
"tus-node-server": "^0.2.10" "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'; 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 { export default {
name: 'app', name: 'app',
data () { data () {

View File

@ -4,6 +4,22 @@ import VueRouter from 'vue-router';
import App from './App.vue'; import App from './App.vue';
import messages from './lang'; 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(VueI18n);
Vue.use(VueRouter); Vue.use(VueRouter);

View File

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

View File

@ -19,6 +19,16 @@ export default {
done: 'Done', done: 'Done',
dropPaste: 'Drop files here, paste or', dropPaste: 'Drop files here, paste or',
browse: 'browse' browse: 'browse'
},
admin: {
login: {
usernamePlaceholder: 'Username or e-mail address',
passwordPlaceholder: 'Password',
button: 'Login',
buttonChecking: 'Checking...'
}
} }
}, },
@ -42,6 +52,16 @@ export default {
done: 'Gereed', done: 'Gereed',
dropPaste: 'Sleep bestanden, plak of ', dropPaste: 'Sleep bestanden, plak of ',
browse: 'selecteer' 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"> <div id="landing">
<form class="pure-form pure-form-stacked" @submit.prevent="checkCode"> <form class="pure-form pure-form-stacked" @submit.prevent="checkCode">
<fieldset class="pure-group"> <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> </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> <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> <template>
<div id="landing"> <div id="container">
<div class="content"> <div class="content">
<div class="logo"> <div class="logo">
<img src="/images/logo.png"> <img src="/images/logo.png">

View File

@ -1,14 +1,21 @@
<template> <template>
<div id="login"> <div id="container">
<form class="pure-form pure-form-stacked" @submit.prevent="login"> <div class="content">
<fieldset class="pure-group"> <div id="login">
<input type="text" class="pure-input-1-2" v-model="username" :placeholder="$t('landing.invitePlaceholder')"> <div class="logo">
<input type="password" class="pure-input-1-2" v-model="password" :placeholder="$t('landing.invitePlaceholder')"> <img src="/images/logo.png">
</fieldset> </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 class="pure-form pure-form-stacked" @submit.prevent="login">
</form> <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> </div>
</template> </template>
@ -26,8 +33,50 @@ export default {
methods: { methods: {
login() 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>