summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/LoginPage.vue
diff options
context:
space:
mode:
authorJannik Schönartz2018-07-02 22:39:23 +0200
committerJannik Schönartz2018-07-02 22:39:23 +0200
commit718f9b58331f4a9bee5eba3296329cc58b4364a6 (patch)
tree63e0048923f1a2a4f4fc44ef9aec0e7c51a967e1 /webapp/src/components/LoginPage.vue
parent[server] Initial commit to add the node server stuff. (diff)
downloadbas-718f9b58331f4a9bee5eba3296329cc58b4364a6.tar.gz
bas-718f9b58331f4a9bee5eba3296329cc58b4364a6.tar.xz
bas-718f9b58331f4a9bee5eba3296329cc58b4364a6.zip
[webapp] Initial commit to add the node webapp stuff.
Diffstat (limited to 'webapp/src/components/LoginPage.vue')
-rw-r--r--webapp/src/components/LoginPage.vue127
1 files changed, 127 insertions, 0 deletions
diff --git a/webapp/src/components/LoginPage.vue b/webapp/src/components/LoginPage.vue
new file mode 100644
index 0000000..36a7de5
--- /dev/null
+++ b/webapp/src/components/LoginPage.vue
@@ -0,0 +1,127 @@
+<i18n>
+{
+ "en": {
+ "username": "Username",
+ "password": "Password",
+ "login": "Login",
+ "usernameError": "User not found.",
+ "passwordError": "Wrong password.",
+ "usernameEmptyError": "Username can not be empty.",
+ "passwordEmptyError": "Passwort can not be empty."
+ },
+ "de": {
+ "username": "Benutzername",
+ "password": "Passwort",
+ "login": "Anmelden",
+ "usernameError": "Benutzer nicht gefunden.",
+ "passwordError": "Passwort falsch.",
+ "usernameEmptyError": "Benutzername kann nicht leer sein.",
+ "passwordEmptyError": "Passwort kann nicht leer sein."
+ }
+}
+</i18n>
+
+<template>
+ <v-app dark class="grey darken-4 non-selectable">
+ <div class="login-page">
+ <img class="logo non-draggable" src="@/assets/logo.svg" />
+ <v-form class="login-form" ref="form" v-model="valid" lazy-validation @submit.prevent="login">
+ <v-text-field
+ v-model="username"
+ :rules="usernameRules"
+ :label="$t('username')"
+ autocomplete="off"
+ @input="clearErrors"
+ ></v-text-field>
+ <v-text-field
+ type="password"
+ v-model="password"
+ :rules="passwordRules"
+ :label="$t('password')"
+ autocomplete="off"
+ @input="passwordError = false"
+ ></v-text-field>
+ <v-btn type="submit" class="login-button primary" raised>{{ $t('login') }}</v-btn>
+ </v-form>
+ </div>
+ </v-app>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+ name: 'LoginPage',
+ data () {
+ return {
+ valid: true,
+ username: '',
+ usernameError: false,
+ usernameRules: [
+ v => !!v || this.$t('usernameEmptyError'),
+ v => !this.usernameError || this.$t('usernameError')
+ ],
+ password: '',
+ passwordError: false,
+ passwordRules: [
+ v => !!v || this.$t('passwordEmptyError'),
+ v => !this.passwordError || this.$t('passwordError')
+ ]
+ }
+ },
+ computed: mapState(['dark']),
+ methods: {
+ clearErrors () {
+ if (this.usernameError) this.usernameError = false
+ if (this.passwordError) {
+ this.passwordError = false
+ this.$refs.form.validate()
+ }
+ },
+ login () {
+ if (this.$refs.form.validate()) {
+ this.$http.post('/api/login', { username: this.username, password: this.password })
+ .then(response => {
+ this.$router.push('/dashboard')
+ })
+ .catch(error => {
+ if (error.response.data.status === 'USER_NOTFOUND') {
+ this.usernameError = true
+ } else if (error.response.data.status === 'PASSWORD_INVALID') {
+ this.passwordError = true
+ }
+ this.$refs.form.validate()
+ })
+ }
+ }
+ }
+}
+</script>
+
+<style scoped>
+
+.login-page {
+ height: 100%;
+ width: 100%;
+ min-height: 500px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+.logo {
+ height: 180px;
+ margin-bottom: 60px;
+}
+
+.login-form {
+ width: 300px;
+}
+
+.login-button {
+ margin-top: 20px;
+ float: right;
+}
+
+</style>