64 lines
2.2 KiB
Vue
64 lines
2.2 KiB
Vue
<script setup>
|
|
import {ref} from "vue";
|
|
import {useUserStore} from "stores/User";
|
|
import {useRouter} from "vue-router";
|
|
import {isRequired, isValidEmail, minLength} from "src/composables/form/rules";
|
|
import {useQuasar} from "quasar";
|
|
import {errorObject} from "src/composables/dialog";
|
|
|
|
const email = ref("");
|
|
const password = ref("");
|
|
const $router = useRouter();
|
|
const $q = useQuasar();
|
|
|
|
const logUser = () => {
|
|
useUserStore().login({email: email.value, password: password.value}).then(() => {
|
|
$router.push({name: "myFlights"});
|
|
}).catch((err) => {
|
|
$q.notify(errorObject("Přihlášení se nezdařilo."))
|
|
})
|
|
};
|
|
|
|
const rules = {
|
|
email: [isRequired, isValidEmail],
|
|
password: [isRequired, minLength(4)]
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<q-layout view="lHh Lpr lFf">
|
|
<q-page-container>
|
|
|
|
<q-page class="window-height window-width row justify-center">
|
|
<q-card square style="width:95%; max-width: 450px; height:400px;" class="q-mt-lg">
|
|
<q-card-section class="bg-primary">
|
|
<h4 class="text-h5 q-my-md text-white">Login</h4>
|
|
</q-card-section>
|
|
<q-card-section>
|
|
<q-form class="q-px-sm q-pt-xl" @submit.prevent="logUser()">
|
|
<q-input square clearable v-model="email" :rules="rules.email" type="email" label="E-mail">
|
|
<template v-slot:prepend>
|
|
<q-icon name="email"/>
|
|
</template>
|
|
</q-input>
|
|
<q-input square clearable v-model="password" :rules="rules.password" type="password" label="Password">
|
|
<template v-slot:prepend>
|
|
<q-icon name="lock"/>
|
|
</template>
|
|
</q-input>
|
|
</q-form>
|
|
</q-card-section>
|
|
|
|
<q-card-actions class="q-px-lg">
|
|
<q-btn unelevated size="lg" class="full-width" label="Přihlásit se" @click.prevent="logUser()"/>
|
|
</q-card-actions>
|
|
<!-- <q-card-section class="text-center q-pa-sm">-->
|
|
<!-- <router-link :to="{name: 'forgottenPassword'}" class="text-grey-6">Zapomenuté heslo</router-link>-->
|
|
<!-- </q-card-section>-->
|
|
</q-card>
|
|
|
|
</q-page>
|
|
</q-page-container>
|
|
</q-layout>
|
|
</template>
|