vetro/weather-demo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Simplified login form

Browse Source
This commit is contained in:
Kamil Klecha
2021-10-15 00:27:00 +02:00
parent c11c58087e
commit 0b2d6be6fd
1 changed files with 47 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
src/views/Login.vue
View File

@@ -1,66 +1,57 @@
<template>
<v-row class="fill-height pa-4" align="center">
<v-col cols="12" class="pa-0">
<v-row no-gutters justify="center">
<v-card class="elevation-12" width="500">
<v-toolbar color="primary">
<v-toolbar-title class="white--text font-weight-bold"
>Zaloguj się</v-toolbar-title
>
</v-toolbar>
<v-form v-model="inputValidated" @submit.prevent="loginUser()">
<v-card-text class="pb-0">
<v-text-field
autofocus
outlined
v-model="email"
prepend-icon="mdi-at"
:rules="[rules.required, rules.counter(email, 6, 'ów')]"
label="E-mail"
color="primary"
type="text"
class="my-2"
></v-text-field>
<v-text-field
outlined
v-model="password"
prepend-icon="mdi-lock"
:append-icon="showPass ? 'mdi-eye' : 'mdi-eye-off'"
@click:append="showPass = !showPass"
:rules="[rules.required, rules.counter(password, 6, 'ów')]"
label="Hasło"
color="primary"
:type="showPass ? 'text' : 'password'"
class="my-2"
></v-text-field>
</v-card-text>
<v-card-actions class="pt-0">
<v-spacer></v-spacer>
<v-btn
:disabled="!inputValidated"
color="primary"
type="submit"
>
<span class="font-weight-bold">Zaloguj</span>
<v-icon right>mdi-key</v-icon>
</v-btn>
</v-card-actions>
</v-form>
</v-card>
</v-row>
<v-row justify="center">
<v-col cols="auto">
<v-card flat outlined class="rounded-lg" width="500">
<v-card-title class="primary white--text">Zaloguj się</v-card-title>
<v-divider></v-divider>
<v-form v-model="inputValidated" @submit.prevent="loginUser()">
<v-card-text class="pb-0">
<v-text-field
autofocus
outlined
v-model="email"
prepend-icon="mdi-at"
:rules="[rules.required, rules.counter(email, 6, 'ów')]"
label="E-mail"
color="primary"
type="text"
class="my-2"
></v-text-field>
<v-text-field
outlined
v-model="password"
prepend-icon="mdi-lock"
:append-icon="showPass ? 'mdi-eye' : 'mdi-eye-off'"
@click:append="showPass = !showPass"
:rules="[rules.required, rules.counter(password, 6, 'ów')]"
label="Hasło"
color="primary"
:type="showPass ? 'text' : 'password'"
class="my-2"
></v-text-field>
</v-card-text>
<v-card-actions class="pt-0">
<v-spacer></v-spacer>
<v-btn :disabled="!inputValidated" color="primary" type="submit">
<span class="font-weight-bold">Zaloguj</span>
<v-icon right>mdi-key</v-icon>
</v-btn>
</v-card-actions>
</v-form>
</v-card>
</v-col>
</v-row>
</template>
<script lang='ts'>
import Vue from 'vue';
import { Component } from 'vue-property-decorator';
import Vue from "vue";
import { Component } from "vue-property-decorator";
@Component
export default class Login extends Vue {
private async loginUser() {
if (this.$data.inputValidated) {
this.$store.dispatch('loginUser', {
this.$store.dispatch("loginUser", {
email: this.$data.email,
pass: this.$data.password,
});
@@ -70,13 +61,13 @@ export default class Login extends Vue {
private data() {
return {
inputValidated: false,
email: '',
password: '',
email: "",
password: "",
showPass: false,
rules: {
required: (value: string) => !!value || 'Pole wymagane',
required: (value: string) => !!value || "Pole wymagane",
counter: (value: string, num: number, end: string) =>
value.length >= num || 'Minimum ' + num + ' znak' + end,
value.length >= num || "Minimum " + num + " znak" + end,
},
};
}