Add Profile Edit Page

Author: Bhanu Teja P

.eslintrc.js

@@ -11,7 +11,8 @@ module.exports = {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'import/extensions': 'off',
-    'import/no-cycle': 'off'
+    'import/no-cycle': 'off',
+    'consistent-return': 'off',
   },
   parserOptions: {
     parser: 'babel-eslint',

src/components/CustomForm.vue

@@ -0,0 +1,45 @@
+<template>
+  <v-row align="start" justify="center">
+    <v-col sm="7">
+      <card>
+        <template v-slot:title>{{ title }}</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 {
+  Card,
+  FormFields,
+  FormAlerts,
+  FormButtons,
+} from '.';
+
+export default {
+  name: 'CustomForm',
+  props: {
+    title: String,
+    alerts: Array,
+    fields: Array,
+    buttons: Array,
+  },
+  components: {
+    Card,
+    FormFields,
+    FormAlerts,
+    FormButtons,
+  },
+};
+</script>
+
+<style scoped>
+
+</style>

src/components/index.js

@@ -3,3 +3,4 @@ export { default as Card } from './Card';
 export { default as FormAlerts } from './FormAlerts';
 export { default as FormFields } from './FormFields';
 export { default as FormButtons } from './FormButtons';
+export { default as CustomForm } from './CustomForm';

src/components/layout/Header.vue

@@ -4,18 +4,30 @@
       <span @click="$router.push('/')">Open Rank</span>
     </v-toolbar-title>
     <v-spacer></v-spacer>
-    <v-btn text to="/login">
+    <v-btn text to="/login" v-if="!isLoggedIn">
       <span class="mr-2">Login</span>
     </v-btn>
-    <v-btn text to="/register">
+    <v-btn text to="/register" v-if="!isLoggedIn">
       <span class="mr-2">SignUp</span>
     </v-btn>
+    <v-btn text to="/profile" v-if="isLoggedIn">
+      <span class="mr-2">Profile</span>
+    </v-btn>
   </v-app-bar>
 </template>
 
 <script>
+import { createNamespacedHelpers } from 'vuex';
+
+const { mapGetters } = createNamespacedHelpers('authentication/user');
+
 export default {
   name: 'Header',
+  computed: {
+    ...mapGetters([
+      'isLoggedIn',
+    ]),
+  },
 };
 </script>
 

src/router/index.js

@@ -1,9 +1,12 @@
 import Vue from 'vue';
 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';
+import {
+  Home,
+  About,
+  Register,
+  Login,
+  Profile,
+} from '../views';
 
 Vue.use(Router);
 
@@ -31,5 +34,10 @@ export default new Router({
       name: 'login',
       component: Login,
     },
+    {
+      path: '/profile',
+      name: 'profile',
+      component: Profile,
+    },
   ],
 });

src/store/modules/authentication/index.js

@@ -1,5 +1,6 @@
 import register from './register';
 import login from './login';
+import user from './user';
 
 export default {
   namespaced: true,
@@ -15,5 +16,6 @@ export default {
   modules: {
     register,
     login,
+    user,
   },
 };

src/store/modules/authentication/login.js

@@ -30,7 +30,8 @@ export default {
       await HTTP().post('/login', {
         email,
         password,
-      }).then(({ data: { message } }) => {
+      }).then(({ data: { data: { token }, message } }) => {
+        commit('authentication/user/setToken', token, { root: true });
         commit('setSuccessMsg', message);
       });
     },

src/store/modules/authentication/register.js

@@ -4,11 +4,11 @@ export default {
   namespaced: true,
   strict: true,
   state: {
-    name: '',
-    email: '',
-    password: '',
-    passwordConfirmed: '',
-    successMsg: '',
+    name: null,
+    email: null,
+    password: null,
+    passwordConfirmed: null,
+    successMsg: null,
   },
   mutations: {
     setName(state, name) {

src/store/modules/authentication/user.js

@@ -0,0 +1,73 @@
+import HTTP from '../../../http';
+
+export default {
+  namespaced: true,
+  strict: true,
+  state: {
+    token: null,
+    id: null,
+    name: null,
+    email: null,
+    successMsg: null,
+  },
+  mutations: {
+    setToken(state, token) {
+      state.token = token;
+    },
+    setId(state, id) {
+      state.id = id;
+    },
+    setName(state, name) {
+      state.name = name;
+    },
+    setEmail(state, email) {
+      state.emeail = email;
+    },
+    setSuccessMsg(state, message) {
+      state.successMsg = message;
+    },
+  },
+  actions: {
+    async fetchUser({ state: { token }, commit }) {
+      await HTTP().get('/user', {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      }).then(({ data: { data: { id, name, email }, message } }) => {
+        commit('setId', id);
+        commit('setName', name);
+        commit('setEmail', email);
+        commit('setSuccessMsg', message);
+      });
+    },
+    async updateUser({
+      state: {
+        id,
+        name,
+        email,
+        token,
+      },
+      commit,
+    }) {
+      await HTTP().post(`/users/${id}`, {
+        id,
+        name,
+        email,
+      }, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      }).then(({ data: { user, message } }) => {
+        commit('setId', user.id);
+        commit('setName', user.name);
+        commit('setEmail', user.email);
+        commit('setSuccessMSg', message);
+      });
+    },
+  },
+  getters: {
+    isLoggedIn(state) {
+      return !!state.token;
+    },
+  },
+};

src/views/Login.vue

@@ -1,31 +1,13 @@
 <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>
+  <custom-form title="Login" :alerts="alerts" :fields="fields" :buttons="buttons"></custom-form>
 </template>
 
 <script>
 import { createNamespacedHelpers } from 'vuex';
-
-import {
-  Card,
-  FormFields,
-  FormAlerts,
-  FormButtons,
-} from '../components';
+import { CustomForm } from '../components';
 
 const { mapState, mapMutations, mapActions } = createNamespacedHelpers('authentication/login');
+const { mapGetters } = createNamespacedHelpers('authentication/user');
 
 export default {
   name: 'Login',
@@ -34,6 +16,9 @@ export default {
     };
   },
   computed: {
+    ...mapGetters([
+      'isLoggedIn',
+    ]),
     ...mapState([
       'email',
       'password',
@@ -86,11 +71,13 @@ export default {
       'login',
     ]),
   },
+  mounted() {
+    if (this.isLoggedIn) {
+      return this.$router.push('/profile');
+    }
+  },
   components: {
-    Card,
-    FormFields,
-    FormAlerts,
-    FormButtons,
+    CustomForm,
   },
 };
 </script>

src/views/Profile.vue

@@ -0,0 +1,94 @@
+<template>
+  <custom-form title="Profile" :alerts="alerts" :fields="fields" :buttons="buttons"></custom-form>
+</template>
+
+<script>
+import { createNamespacedHelpers } from 'vuex';
+import { CustomForm } from '../components';
+
+const {
+  mapState,
+  mapMutations,
+  mapActions,
+  mapGetters,
+} = createNamespacedHelpers('authentication/user');
+
+export default {
+  name: 'Profile',
+  data() {
+    return {
+    };
+  },
+  computed: {
+    ...mapState([
+      'id',
+      'name',
+      'email',
+      'successMsg',
+    ]),
+    ...mapGetters([
+      'isLoggedIn',
+    ]),
+    alerts() {
+      return [
+        {
+          type: 'success',
+          message: this.successMsg,
+        },
+      ];
+    },
+    fields() {
+      return [
+        {
+          label: 'Name',
+          placeholder: 'Enter your name',
+          type: 'text',
+          icon: 'mdi-rename-box',
+          value: this.name,
+          input: this.setName,
+        },
+        {
+          label: 'Email',
+          placeholder: 'Enter Email',
+          type: 'email',
+          icon: 'mdi-email',
+          value: this.email,
+          input: this.setEmail,
+        },
+      ];
+    },
+    buttons() {
+      return [
+        {
+          icon: 'mdi-account',
+          value: 'Update',
+          click: this.updateUser,
+        },
+      ];
+    },
+  },
+  methods: {
+    ...mapMutations([
+      'setName',
+      'setEmail',
+    ]),
+    ...mapActions([
+      'fetchUser',
+      'updateUser',
+    ]),
+  },
+  mounted() {
+    if (!this.isLoggedIn) {
+      return this.$router.push('/login');
+    }
+    this.$store.dispatch('authentication/fetchUser');
+  },
+  components: {
+    CustomForm,
+  },
+};
+</script>
+
+<style scoped>
+
+</style>