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

35
src/views/Login.vue
View File

@@ -1,13 +1,9 @@
<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"
>Zaloguj się</v-toolbar-title
>
</v-toolbar>
<v-form v-model="inputValidated" @submit.prevent="loginUser()"> <v-form v-model="inputValidated" @submit.prevent="loginUser()">
<v-card-text class="pb-0"> <v-card-text class="pb-0">
<v-text-field <v-text-field
@@ -36,31 +32,26 @@
</v-card-text> </v-card-text>
<v-card-actions class="pt-0"> <v-card-actions class="pt-0">
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn <v-btn :disabled="!inputValidated" color="primary" type="submit">
:disabled="!inputValidated"
color="primary"
type="submit"
>
<span class="font-weight-bold">Zaloguj</span> <span class="font-weight-bold">Zaloguj</span>
<v-icon right>mdi-key</v-icon> <v-icon right>mdi-key</v-icon>
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
</v-form> </v-form>
</v-card> </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,
}, },
}; };
} }