From 0b2d6be6fd414facf7685380c6c7253efb04657d Mon Sep 17 00:00:00 2001
From: Kamil Klecha <urlikodd@gmail.com>
Date: Fri, 15 Oct 2021 00:27:00 +0200
Subject: [PATCH] Simplified login form

---
 src/views/Login.vue | 103 ++++++++++++++++++++------------------------
 1 file changed, 47 insertions(+), 56 deletions(-)

diff --git a/src/views/Login.vue b/src/views/Login.vue
index 9f188ae..3ada580 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -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,
       },
     };
   }