57 lines
1.4 KiB
Vue
57 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<q-page padding class="fit row justify-center items-center content-center">
|
||
|
|
<q-card
|
||
|
|
class="col-xs-11 col-sm-8 col-md-6 col-lg-4 justify-center items-center content-center"
|
||
|
|
>
|
||
|
|
<q-toolbar class="bg-primary text-white">
|
||
|
|
<q-toolbar-title>
|
||
|
|
Login
|
||
|
|
</q-toolbar-title>
|
||
|
|
</q-toolbar>
|
||
|
|
|
||
|
|
<q-card-section>
|
||
|
|
<q-form ref="LoginForm" @submit="doLogin" class="q-gutter-md">
|
||
|
|
<q-input
|
||
|
|
filled
|
||
|
|
v-model="username"
|
||
|
|
label="Benutzername oder E-Mail"
|
||
|
|
:rules="rules"
|
||
|
|
/>
|
||
|
|
<q-input
|
||
|
|
filled
|
||
|
|
v-model="password"
|
||
|
|
type="password"
|
||
|
|
label="Password"
|
||
|
|
:rules="rules"
|
||
|
|
/>
|
||
|
|
<div class="row justify-end">
|
||
|
|
<q-btn label="Login" type="submit" color="primary" />
|
||
|
|
</div>
|
||
|
|
</q-form>
|
||
|
|
</q-card-section>
|
||
|
|
</q-card>
|
||
|
|
</q-page>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { defineComponent, ref } from '@vue/composition-api';
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
// name: 'PageName'
|
||
|
|
setup() {
|
||
|
|
const username = ref('');
|
||
|
|
const password = ref('');
|
||
|
|
const rules = [
|
||
|
|
(val: string) => (val && val.length > 0) || 'Feld darf nicht leer sein!'
|
||
|
|
];
|
||
|
|
|
||
|
|
function doLogin() {
|
||
|
|
console.log(username.value, password.value);
|
||
|
|
this.$router.push({ name: 'home' });
|
||
|
|
}
|
||
|
|
|
||
|
|
return { username, password, doLogin, rules };
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|