Add Login Page

Author: Bhanu Teja P

src/components/FormButtons.vue

@@ -0,0 +1,27 @@
+<template>
+  <fragment>
+    <v-btn
+      v-for="({ icon, value, click }, index) in buttons"
+      color="deep-purple accent-4"
+      text
+      @click="click"
+      :key="index"
+    >
+      <v-icon left>{{ icon }}</v-icon>
+      {{ value }}
+    </v-btn>
+  </fragment>
+</template>
+
+<script>
+export default {
+  name: 'FormButtons',
+  props: {
+    buttons: Array,
+  },
+};
+</script>
+
+<style scoped>
+
+</style>

src/components/TextFields.vue renamed to src/components/FormFields.vue

@@ -16,7 +16,7 @@
 
 <script>
 export default {
-  name: 'TestFields',
+  name: 'FormFields',
   props: {
     fields: Array,
   },

src/components/index.js

@@ -1,4 +1,5 @@
 export { default as HelloWorld } from './HelloWorld';
-export { default as TextFields } from './TextFields';
 export { default as Card } from './Card';
 export { default as FormAlerts } from './FormAlerts';
+export { default as FormFields } from './FormFields';
+export { default as FormButtons } from './FormButtons';

src/components/layout/Header.vue

@@ -4,7 +4,7 @@
       <span @click="$router.push('/')">Open Rank</span>
     </v-toolbar-title>
     <v-spacer></v-spacer>
-    <v-btn text>
+    <v-btn text to="/login">
       <span class="mr-2">Login</span>
     </v-btn>
     <v-btn text to="/register">

src/router/index.js

@@ -3,6 +3,7 @@ import Router from 'vue-router';
 import Home from '../views/Home';
 import About from '../views/About';
 import Register from '../views/Register';
+import Login from '../views/Login';
 
 Vue.use(Router);
 
@@ -25,5 +26,10 @@ export default new Router({
       name: 'register',
       component: Register,
     },
+    {
+      path: '/login',
+      name: 'login',
+      component: Login,
+    },
   ],
 });

src/store/modules/authentication/index.js

@@ -1,4 +1,5 @@
 import register from './register';
+import login from './login';
 
 export default {
   namespaced: true,
@@ -13,5 +14,6 @@ export default {
   },
   modules: {
     register,
+    login,
   },
 };

src/store/modules/authentication/login.js

@@ -0,0 +1,38 @@
+import HTTP from '../../../http';
+
+export default {
+  namespaced: true,
+  strict: true,
+  state: {
+    email: '',
+    password: '',
+    successMsg: '',
+  },
+  mutations: {
+    setEmail(state, email) {
+      state.email = email;
+    },
+    setPassword(state, password) {
+      state.password = password;
+    },
+    setSuccessMsg(state, message) {
+      state.successMsg = message;
+    },
+  },
+  actions: {
+    async login({
+      commit,
+      state: {
+        email,
+        password,
+      },
+    }) {
+      await HTTP().post('/login', {
+        email,
+        password,
+      }).then(({ data: { message } }) => {
+        commit('setSuccessMsg', message);
+      });
+    },
+  },
+};

src/views/Login.vue

@@ -0,0 +1,100 @@
+<template>
+  <v-row align="start" justify="center">
+    <v-col sm="7">
+      <card>
+        <template v-slot:title>Login</template>
+        <v-form>
+          <form-alerts :alerts="alerts"></form-alerts>
+          <form-fields :fields="fields"></form-fields>
+        </v-form>
+        <template v-slot:actions>
+          <form-buttons :buttons="buttons"></form-buttons>
+        </template>
+      </card>
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+import { createNamespacedHelpers } from 'vuex';
+
+import {
+  Card,
+  FormFields,
+  FormAlerts,
+  FormButtons,
+} from '../components';
+
+const { mapState, mapMutations, mapActions } = createNamespacedHelpers('authentication/login');
+
+export default {
+  name: 'Login',
+  data() {
+    return {
+    };
+  },
+  computed: {
+    ...mapState([
+      'email',
+      'password',
+      'successMsg',
+    ]),
+    alerts() {
+      return [
+        {
+          type: 'success',
+          message: this.successMsg,
+        },
+      ];
+    },
+    fields() {
+      return [
+        {
+          label: 'Email',
+          placeholder: 'Enter Email',
+          type: 'email',
+          icon: 'mdi-email',
+          value: this.email,
+          input: this.setEmail,
+        },
+        {
+          label: 'Password',
+          placeholder: 'Enter Password',
+          type: 'password',
+          icon: 'mdi-lock',
+          value: this.password,
+          input: this.setPassword,
+        },
+      ];
+    },
+    buttons() {
+      return [
+        {
+          icon: 'mdi-fingerprint',
+          value: 'Login',
+          click: this.login,
+        },
+      ];
+    },
+  },
+  methods: {
+    ...mapMutations([
+      'setEmail',
+      'setPassword',
+    ]),
+    ...mapActions([
+      'login',
+    ]),
+  },
+  components: {
+    Card,
+    FormFields,
+    FormAlerts,
+    FormButtons,
+  },
+};
+</script>
+
+<style scoped>
+
+</style>

src/views/Register.vue

@@ -5,17 +5,10 @@
         <template v-slot:title>Register</template>
         <v-form>
           <form-alerts :alerts="alerts"></form-alerts>
-          <text-fields :fields="fields"></text-fields>
+          <form-fields :fields="fields"></form-fields>
         </v-form>
         <template v-slot:actions>
-          <v-btn
-            color="deep-purple accent-4"
-            text
-            @click="register"
-          >
-            <v-icon left>mdi-account</v-icon>
-            Register
-          </v-btn>
+          <form-buttons :buttons="buttons"></form-buttons>
         </template>
       </card>
     </v-col>
@@ -25,7 +18,12 @@
 <script>
 import { createNamespacedHelpers } from 'vuex';
 
-import { Card, TextFields, FormAlerts } from '../components';
+import {
+  Card,
+  FormFields,
+  FormAlerts,
+  FormButtons,
+} from '../components';
 
 const { mapState, mapMutations, mapActions } = createNamespacedHelpers('authentication/register');
 
@@ -63,7 +61,7 @@ export default {
         },
         {
           label: 'Email',
-          placeholder: 'Enter your email address',
+          placeholder: 'Enter Email',
           type: 'email',
           icon: 'mdi-email',
           value: this.email,
@@ -87,6 +85,15 @@ export default {
         },
       ];
     },
+    buttons() {
+      return [
+        {
+          icon: 'mdi-account',
+          value: 'Register',
+          click: this.register,
+        },
+      ];
+    },
   },
   methods: {
     ...mapMutations([
@@ -101,8 +108,9 @@ export default {
   },
   components: {
     Card,
-    TextFields,
+    FormFields,
     FormAlerts,
+    FormButtons,
   },
 };
 </script>