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