Fix error messages on web

web/src/store/modules/athletes.ts

@@ -16,6 +16,7 @@ export default class Athletes extends VuexModule {
     private athlete = <AthleteInterface>{};
     private trainer = <UserInterface>{};
     private athletes = [<AthleteInterface>{}];
+    private err = <Error>{}
 
     get currentAthlete() {
         return this.athlete;
@@ -29,6 +30,10 @@ export default class Athletes extends VuexModule {
         return this.athletes;
     }
 
+    get getErrAthlete() {
+        return this.err
+    }
+
     @Mutation
     private save_athlete(athlete: AthleteInterface) {
         this.athlete = athlete;
@@ -50,6 +55,11 @@ export default class Athletes extends VuexModule {
         this.athletes = [<AthleteInterface>{}];
     }
 
+    @Mutation
+    private update_error(err: Error) {
+        this.err = err
+    }
+
     @Action
     private getAthletes() {
         return new Promise((resolve, reject) => {
@@ -77,6 +87,7 @@ export default class Athletes extends VuexModule {
             })
                 .then((resp: AxiosResponse) => {
                     this.context.commit('save_athlete', resp.data)
+                    resolve(resp)
                 })
                 .catch((err: Error) => {
                     reject(err)

web/src/store/modules/user.ts

@@ -15,6 +15,7 @@ export interface UserInterface {
 export default class User extends VuexModule {
     private user = <UserInterface>{};
     private userStatus = false;
+    private err = <Error>{};
 
     get currentUser() {
         return this.user;
@@ -24,6 +25,10 @@ export default class User extends VuexModule {
         return this.userStatus;
     }
 
+    get getErrUser() {
+        return this.err
+    }
+
     @Mutation
     private auth_success(user: UserInterface) {
         this.user = user;
@@ -31,8 +36,9 @@ export default class User extends VuexModule {
     }
 
     @Mutation
-    private auth_error() {
+    private auth_error(err: Error) {
         this.userStatus = false;
+        this.err = err
     }
 
     @Mutation
@@ -41,6 +47,11 @@ export default class User extends VuexModule {
         this.userStatus = false;
     }
 
+    @Mutation
+    private update_error(err: Error) {
+        this.err = err
+    }
+
     @Action
     private login(user: UserInterface) {
         return new Promise((resolve, reject) => {
@@ -54,7 +65,7 @@ export default class User extends VuexModule {
                     resolve(resp)
                 })
                 .catch((err: Error) => {
-                    this.context.commit('auth_error')
+                    this.context.commit('auth_error', err)
                     reject(err)
                 })
         })
@@ -95,7 +106,7 @@ export default class User extends VuexModule {
                 })
         })
     }
-    
+
     @Action
     private specificUser(id: string) {
         return new Promise((resolve, reject) => {
@@ -125,6 +136,7 @@ export default class User extends VuexModule {
                     resolve(resp)
                 })
                 .catch((err: Error) => {
+                    this.context.commit('update_error', err)
                     reject(err)
                 })
         })

web/src/views/Athlete.vue

@@ -8,7 +8,7 @@
           <div class="field">
             <label class="label">Name</label>
             <div class="control">
-              <input class="input" type="text" v-model="athlete.name">
+              <input v-model="athlete.name" class="input" type="text">
             </div>
           </div>
           <div class="field">
@@ -20,13 +20,13 @@
             <p v-if="athlete.socketID">Online</p>
             <p v-else>Offline</p>
           </div>
-          <div class="notification is-danger has-text-centered mt-5" v-if="msgError">
+          <div v-if="msgError" class="notification is-danger has-text-centered mt-5">
             <b>{{ msgError }}</b>
           </div>
-          <div class="notification is-success has-text-centered mt-5" v-else-if="msgSuccess">
+          <div v-else-if="msgSuccess" class="notification is-success has-text-centered mt-5">
             <b>{{ msgSuccess }}</b>
           </div>
-          <div class="notification is-info is-light mt-5" v-else>
+          <div v-else class="notification is-info is-light mt-5">
             <ul>
               <li>Client name is randomly generated on device connection. Change to athlete's name, so to be easily
                 identified.
@@ -50,7 +50,7 @@
     <div class="tile is-parent">
       <div class="tile is-child box">
         <p class="title">Trainer Status</p>
-        <div class="notification is-warning is-light mt-5" v-if="!athlete._trainer">
+        <div v-if="!athlete._trainer" class="notification is-warning is-light mt-5">
           <ul>
             <p>It seems that this athlete has no trainer attached to him!</p>
             <p>By adopting an athlete you can edit his personal details and view his performance stats.</p>
@@ -111,11 +111,11 @@ export default class Athlete extends Vue {
     Object.assign(this.athlete, user)
     this.$store.dispatch('updateAthlete', this.athlete)
         .then((res: any) => {
-          console.log('updated')
           this.msgSuccess = 'Athlete updated'
           this.athlete = res.data;
         })
-        .catch((err: any) => this.msgError = err.response.data.errors.message || err.message || 'Something went wrong!')
+        .catch(() => this.msgError = this.$store.getters.getErrAthlete.response.data.errors.message ||
+            'Something went wrong!')
   }
 }
 </script>

web/src/views/Login.vue

@@ -62,7 +62,7 @@ export default class Login extends Vue {
   private getCurrentUser() {
     this.$store.dispatch('getCurrentUser')
         .then((res: any) => this.$router.push({name: 'Dashboard', params: {username: res.data.username}}))
-        .catch((err: any) => {
+        .catch(() => {
           this.$router.push('/login')
         })
   }
@@ -72,9 +72,8 @@ export default class Login extends Vue {
 
     this.$store.dispatch('login', user)
         .then(() => this.$router.push({name: 'Dashboard', params: {username: this.username}}))
-        .catch((err: any) => {
+        .catch(() => {
-          this.msg = err.response.data.errors.message || err.message || 'Something went wrong!'
+          this.msg = this.$store.getters.getErr.response.data.errors.message || 'Something went wrong!'
-          this.$router.push('/login')
         })
   }
 }

web/src/views/Profile.vue

@@ -8,7 +8,7 @@
           <div class="field">
             <label class="label">Username</label>
             <div class="control">
-              <input class="input" type="text" v-model="user.username">
+              <input v-model="user.username" class="input" type="text">
             </div>
           </div>
           <div class="field">
@@ -21,7 +21,7 @@
           <div class="field">
             <label class="label">Email</label>
             <div class="control">
-              <input class="input" type="email" v-model="user.email">
+              <input v-model="user.email" class="input" type="email">
             </div>
           </div>
         </div>
@@ -31,26 +31,20 @@
           <p class="title">Change Password</p>
           <div class="field">
             <p class="control has-icons-left">
-              <input class="input" type="password" placeholder="Current Password" v-model="user.currentPassword">
+              <input v-model="user.currentPassword" class="input" placeholder="Current Password" type="password">
-              <span class="icon is-small is-left">
+              <span class="icon is-small is-left"><i class="fas fa-lock"></i></span>
-      <i class="fas fa-lock"></i>
-    </span>
             </p>
           </div>
           <div class="field">
             <p class="control has-icons-left">
-              <input class="input" type="password" placeholder="New Password" v-model="user.newPassword">
+              <input v-model="user.newPassword" class="input" placeholder="New Password" type="password">
-              <span class="icon is-small is-left">
+              <span class="icon is-small is-left"><i class="fas fa-lock"></i></span>
-      <i class="fas fa-lock"></i>
-    </span>
             </p>
           </div>
           <div class="field">
             <p class="control has-icons-left">
-              <input class="input" type="password" placeholder="Confirm Password" v-model="user.repeatNewPassword">
+              <input v-model="user.repeatNewPassword" class="input" placeholder="Confirm Password" type="password">
-              <span class="icon is-small is-left">
+              <span class="icon is-small is-left"><i class="fas fa-lock"></i></span>
-      <i class="fas fa-lock"></i>
-    </span>
             </p>
           </div>
           <div class="field">
@@ -60,13 +54,13 @@
               </button>
             </p>
           </div>
-          <div class="notification is-danger has-text-centered mt-5" v-if="msgError">
+          <div v-if="msgError" class="notification is-danger has-text-centered mt-5">
             <b>{{ msgError }}</b>
           </div>
-          <div class="notification is-success has-text-centered mt-5" v-else-if="msgSuccess">
+          <div v-else-if="msgSuccess" class="notification is-success has-text-centered mt-5">
             <b>{{ msgSuccess }}</b>
           </div>
-          <div class="notification is-primary is-light mt-5" v-else>
+          <div v-else class="notification is-primary is-light mt-5">
             <p>According to the traditional advice—which is still good—a strong password:</p>
             <ul>
               <li>Has 12 Characters, Minimum</li>
@@ -92,7 +86,7 @@ interface UpdatedUser extends UserInterface {
 
 export default class Profile extends Vue {
   private user = <UpdatedUser>{};
-  private date: string = '';
+  private date = '';
   private msgSuccess = '';
   private msgError = '';
 
@@ -117,21 +111,9 @@ export default class Profile extends Vue {
     }
 
     this.$store.dispatch('updateUser', user)
-        .then(() => {
+        .then(() => this.msgSuccess = 'User updated!')
-          this.msgSuccess = 'User updated!';
+        .catch(() => this.msgError = this.$store.getters.getErrUser.response.data.errors.message ||
-          this.$router.push({
+            'Something went wrong!')
-            name: 'Profile',
-            params: {username: this.user.username}
-          })
-        })
-        .catch((err: any) => {
-              this.msgError = err.data.errors.message || err.message || 'Something went wrong!';
-              this.$router.push({
-                name: 'Profile',
-                params: {username: this.user.username}
-              })
-            }
-        )
   }
 }