From 5ca97c2f3010d19743aabb970bc81635ab88ec11 Mon Sep 17 00:00:00 2001
From: Kamil Klecha <urlikodd@gmail.com>
Date: Fri, 15 Oct 2021 00:18:44 +0200
Subject: [PATCH] Added firebase login

---
 src/store/index.ts  | 32 +++++++++++++++---
 src/views/Login.vue | 81 ++++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 105 insertions(+), 8 deletions(-)

diff --git a/src/store/index.ts b/src/store/index.ts
index 6621a42..d85cd4c 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,16 +1,40 @@
 import Vue from "vue";
 import Vuex from "vuex";
+import axios from "axios";
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
   state: {
-    token: "yes",
+    user: undefined,
+  },
+  mutations: {
+    storeUser(state, payload) {
+      state.user = payload;
+    },
+    cleanUserData(state) {
+      state.user = undefined;
+    },
+  },
+  actions: {
+    loginUser({ commit }, auth) {
+      axios.post(
+        "https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=" + process.env.VUE_APP_FIREBASE_API_KEY,
+        { 
+          email: auth.email,
+          password: auth.pass,
+          returnSecureToken: true,
+        }
+      ).then((res) => {
+        console.log(res);
+        commit('storeUser', res.data);
+      }).catch((e) => {
+        console.error(e);
+      })
+    },
   },
-  mutations: {},
-  actions: {},
   getters: {
-    auth: (state) => state.token !== undefined,
+    auth: (state) => state.user !== undefined,
   },
   modules: {},
 });
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 6e9fead..9f188ae 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -1,11 +1,84 @@
 <template>
-  <p>Login</p>
+  <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-col>
+  </v-row>
 </template>
 
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
+<script lang='ts'>
+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', {
+        email: this.$data.email,
+        pass: this.$data.password,
+      });
+    }
+  }
+
+  private data() {
+    return {
+      inputValidated: false,
+      email: '',
+      password: '',
+      showPass: false,
+      rules: {
+        required: (value: string) => !!value || 'Pole wymagane',
+        counter: (value: string, num: number, end: string) =>
+          value.length >= num || 'Minimum ' + num + ' znak' + end,
+      },
+    };
+  }
 }
-</script>
\ No newline at end of file
+</script>