83 lines
1.9 KiB
Vue
83 lines
1.9 KiB
Vue
<template>
|
|
<div class="fill-height">
|
|
<div class="login d-flex align-center justify-center flex-column elevation-10">
|
|
<div class="title">
|
|
<span class="white--text display-2">GelegeApp</span>
|
|
</div>
|
|
<div class="login-form">
|
|
<v-text-field
|
|
v-model="email"
|
|
label="E-Mail"
|
|
outlined
|
|
type="text"
|
|
color="white"
|
|
></v-text-field>
|
|
<v-text-field
|
|
v-model="password"
|
|
label="Passwort"
|
|
outlined
|
|
type="password"
|
|
color="white"
|
|
></v-text-field>
|
|
</div>
|
|
</div>
|
|
<div class="button-container d-flex align-center justify-center">
|
|
<v-btn class="mt-3" width="250" height="50" color="primary"
|
|
@click="loginClicked">Login</v-btn>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {Component, Vue} from "vue-property-decorator";
|
|
import {namespace} from 'vuex-class';
|
|
|
|
const AuthStore = namespace('auth');
|
|
|
|
@Component
|
|
export default class LoginView extends Vue {
|
|
|
|
@AuthStore.Action('loginAction')
|
|
public login!: (payload: { email: string, password: string }) => any;
|
|
|
|
public email: string = 't.indorf@28apps.de';
|
|
public password: string = 'test';
|
|
|
|
public async loginClicked() {
|
|
const response = await this.login({
|
|
email: this.email,
|
|
password: this.password
|
|
});
|
|
|
|
if (response.status === 200) {
|
|
await this.$router.push({name: 'areaSelection'});
|
|
} else {
|
|
// TODO: Show error!
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.title {
|
|
height: 150px;
|
|
}
|
|
|
|
.login {
|
|
height: 75%;
|
|
background: rgb(58, 200, 121);
|
|
background: linear-gradient(180deg, rgba(58, 200, 107, 1) 0%, rgba(51, 179, 112, 1) 42%, rgba(42, 150, 103, 1) 100%);
|
|
|
|
.login-form {
|
|
width: 100%;
|
|
max-width: 350px;
|
|
}
|
|
}
|
|
|
|
.button-container {
|
|
height: 25%;
|
|
}
|
|
</style>
|