From bb848db15c62e62481070109ad3e517bf071d7f8 Mon Sep 17 00:00:00 2001
From: Haris Razis <dev@xrazis.com>
Date: Mon, 11 Jan 2021 13:19:59 +0200
Subject: [PATCH] Make vue router changes

---
 web/src/components/Sidebar.vue | 87 ++++++----------------------------
 web/src/store/modules/user.ts  |  8 +++-
 web/src/views/Login.vue        |  2 +-
 web/src/views/Profile.vue      | 30 +++++-------
 4 files changed, 36 insertions(+), 91 deletions(-)

diff --git a/web/src/components/Sidebar.vue b/web/src/components/Sidebar.vue
index 684bafe..8bb128f 100644
--- a/web/src/components/Sidebar.vue
+++ b/web/src/components/Sidebar.vue
@@ -6,9 +6,10 @@
       </p>
       <ul class="menu-list">
         <li>
-          <router-link :to="{ name: 'DashboardHome', params: { username: $route.params.username }}" :class="{
+          <router-link :class="{
             'has-background-white':
-           $route.name==='DashboardHome' }">
+           $route.name==='DashboardHome' }"
+                       :to="{ name: 'DashboardHome', params: { username: $route.params.username }}">
             <a>
           <span class=" icon-text
           ">
@@ -21,9 +22,9 @@
           </router-link>
         </li>
         <li>
-          <router-link :to="{ name: 'Profile', params: { username: $route.params.username }}" :class="{
+          <router-link :class="{
             'has-background-white':
-           $route.name==='Profile' }">
+           $route.name==='Profile' }" :to="{ name: 'Profile', params: { username: $route.params.username }}">
             <a>
           <span class="icon-text">
             <span class="icon">
@@ -35,10 +36,10 @@
           </router-link>
         </li>
         <li>
-          <router-link :to="{ name: 'Athletes', params: { username: $route.params.username }}"
-                       :class="{
+          <router-link :class="{
             'has-background-white':
-           $route.name==='Athletes' }">
+           $route.name==='Athletes' }"
+                       :to="{ name: 'Athletes', params: { username: $route.params.username }}">
             <a>
           <span class="icon-text">
             <span class="icon">
@@ -50,72 +51,14 @@
           </router-link>
         </li>
       </ul>
-      <p class="menu-label">
-        Athlete Data
-      </p>
-      <ul class="menu-list">
-        <li>
-          <router-link v-if="$store.getters.currentAthlete._id === ''" :to="{ name: 'Table', params: { id:
-          $store.getters.currentAthlete._id }}" :class="{
-            'has-background-white':
-           $route.name==='Table' }">
-            <a>
-          <span class="icon-text">
-            <span class="icon">
-               <i class="fas fa-table"/>
-            </span>
-              <span>&nbsp;Table</span>
-          </span>
-            </a>
-          </router-link>
-          <router-link v-else :to="{ name: 'Athletes', params: { id:
-          $route.params.username }}" :class="{
-            'disabled':
-           $store.getters.currentAthlete === '' }">
-            <a>
-          <span class="icon-text">
-            <span class="icon">
-               <i class="fas fa-table"/>
-            </span>
-              <span>&nbsp;Table</span>
-          </span>
-            </a>
-          </router-link>
-        </li>
-        <li>
-          <router-link v-if="$store.getters.currentAthlete === ''" :to="{ name: 'Chart', params: { id:
-          $store.getters.currentAthlete._id }}" :class="{
-            'has-background-white':
-           $route.name==='Chart' }">
-            <a>
-          <span class="icon-text">
-            <span class="icon">
-               <i class="fas fa-chart-area"/>
-            </span>
-              <span>&nbsp;Chart</span>
-          </span>
-            </a>
-          </router-link>
-          <router-link v-else :to="{ name: 'Athletes', params: { id:  $route.params.username }}">
-            <a>
-          <span class="icon-text">
-            <span class="icon">
-               <i class="fas fa-chart-area"/>
-            </span>
-              <span>&nbsp;Charts</span>
-          </span>
-            </a>
-          </router-link>
-        </li>
-      </ul>
       <p class="menu-label">
         Help
       </p>
-      <ul class="menu-list">
+      <ul id="help" class="menu-list">
         <li>
-          <router-link :to="{ name: 'Guide'}" :class="{
+          <router-link :class="{
             'has-background-white':
-           $route.name==='Guide' }">
+           $route.name==='Guide' }" :to="{ name: 'Guide'}">
             <a>
           <span class="icon-text">
             <span class="icon">
@@ -127,9 +70,9 @@
           </router-link>
         </li>
         <li>
-          <router-link :to="{ name: 'Ticket'}" :class="{
+          <router-link :class="{
             'has-background-white':
-           $route.name==='Ticket' }">
+           $route.name==='Ticket' }" :to="{ name: 'Ticket'}">
             <a>
           <span class="icon-text">
             <span class="icon">
@@ -141,9 +84,9 @@
           </router-link>
         </li>
         <li>
-          <router-link :to="{ name: 'Docs'}" :class="{
+          <router-link :class="{
             'has-background-white':
-           $route.name==='Docs' }">
+           $route.name==='Docs' }" :to="{ name: 'Docs'}">
             <a href="" target="_blank">
           <span class="icon-text">
           <span class="icon mr-1">
diff --git a/web/src/store/modules/user.ts b/web/src/store/modules/user.ts
index 5ae8bab..fe5a2ba 100644
--- a/web/src/store/modules/user.ts
+++ b/web/src/store/modules/user.ts
@@ -52,6 +52,11 @@ export default class User extends VuexModule {
         this.err = err
     }
 
+    @Mutation
+    private update_user(user: UserInterface) {
+        this.user = user
+    }
+
     @Action
     private login(user: UserInterface) {
         return new Promise((resolve, reject) => {
@@ -132,7 +137,8 @@ export default class User extends VuexModule {
                 data: {...user}
             })
                 .then((resp: AxiosResponse) => {
-                    this.context.commit('auth_success', resp.data);
+                    console.log(resp.data)
+                    this.context.commit('update_user', resp.data);
                     resolve(resp)
                 })
                 .catch((err: Error) => {
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index bfe8ba0..1befeda 100644
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@@ -73,7 +73,7 @@ export default class Login extends Vue {
     this.$store.dispatch('login', user)
         .then(() => this.$router.push({name: 'Dashboard', params: {username: this.username}}))
         .catch(() => {
-          this.msg = this.$store.getters.getErr.response.data.errors.message || 'Something went wrong!'
+          this.msg = this.$store.getters.getErrUser.response.data.errors.message || 'Something went wrong!'
         })
   }
 }
diff --git a/web/src/views/Profile.vue b/web/src/views/Profile.vue
index e4a05ed..27d4511 100644
--- a/web/src/views/Profile.vue
+++ b/web/src/views/Profile.vue
@@ -1,6 +1,6 @@
 <template>
   <h1 class="title is-2">/profile</h1>
-  <form @submit="update">
+  <form @submit.prevent="update">
     <div class="tile is-ancestor">
       <div class="tile is-4 is-vertical is-parent">
         <div class="tile is-child box">
@@ -31,25 +31,25 @@
           <p class="title">Change Password</p>
           <div class="field">
             <p class="control has-icons-left">
-              <input v-model="user.currentPassword" class="input" placeholder="Current Password" type="password">
+              <input v-model="currentPassword" class="input" placeholder="Current Password" type="password">
               <span class="icon is-small is-left"><i class="fas fa-lock"></i></span>
             </p>
           </div>
           <div class="field">
             <p class="control has-icons-left">
-              <input v-model="user.newPassword" class="input" placeholder="New Password" type="password">
+              <input v-model="newPassword" class="input" placeholder="New Password" type="password">
               <span class="icon is-small is-left"><i class="fas fa-lock"></i></span>
             </p>
           </div>
           <div class="field">
             <p class="control has-icons-left">
-              <input v-model="user.repeatNewPassword" class="input" placeholder="Confirm Password" type="password">
+              <input v-model="repeatNewPassword" class="input" placeholder="Confirm Password" type="password">
               <span class="icon is-small is-left"><i class="fas fa-lock"></i></span>
             </p>
           </div>
           <div class="field">
             <p class="control">
-              <button class="button is-primary is-rounded" type="submit">
+              <button class="button is-primary is-rounded">
                 Update
               </button>
             </p>
@@ -66,7 +66,7 @@
               <li>Has 12 Characters, Minimum</li>
               <li>Includes Numbers, Symbols, Capital Letters, and Lower-Case Letters</li>
               <li>Isn’t a Dictionary Word or Combination of Dictionary Words</li>
-              <li>Doesn’t Rely on Obvious Substitutions</li>
+              <li>Doesn't Rely on Obvious Substitutions</li>
             </ul>
           </div>
         </div>
@@ -87,30 +87,26 @@ interface UpdatedUser extends UserInterface {
 export default class Profile extends Vue {
   private user = <UpdatedUser>{};
   private date = '';
+  private currentPassword = '';
+  private newPassword = '';
+  private repeatNewPassword = '';
   private msgSuccess = '';
   private msgError = '';
 
-  created() {
+  mounted() {
     this.user = this.$store.getters.currentUser
     this.date = new Date(this.user.registered).toLocaleString()
   }
 
   private update() {
-    if (this.user.newPassword != this.user.repeatNewPassword) {
+    if (this.newPassword != this.repeatNewPassword) {
       this.msgError = 'Passwords do not match!'
       return
     }
 
-    let user = {
-      _id: this.user._id,
-      username: this.user.username,
-      email: this.user.email,
-      password: this.user.password,
-      newPassword: this.user.newPassword,
-      repeatNewPassword: this.user.repeatNewPassword
-    }
+    Object.assign(this.user, {password: this.currentPassword, newPassword: this.newPassword})
 
-    this.$store.dispatch('updateUser', user)
+    this.$store.dispatch('updateUser', this.user)
         .then(() => this.msgSuccess = 'User updated!')
         .catch(() => this.msgError = this.$store.getters.getErrUser.response.data.errors.message ||
             'Something went wrong!')