🔨 Fix update user

Unpredictable behavior sometimes. To be fixed.

server/index.js

@@ -10,6 +10,7 @@ require('./services/socket')(server);
 
 const dataRoute = require('./routes/data')
 const authRoute = require('./routes/auth')
+const userRoute = require('./routes/user')
 const athletesRoute = require('./routes/athletes')
 
 const passport = require('./services/passport');
@@ -42,6 +43,7 @@ app.use(passport.session(undefined));
 
 app.use(dataRoute)
 app.use(authRoute)
+app.use(userRoute)
 app.use(athletesRoute)
 
 const PORT = process.env.PORT || 8000;

server/routes/user.js

@@ -0,0 +1,33 @@
+const express = require('express')
+const router = express.Router();
+const mongoose = require('mongoose');
+const bcrypt = require('bcrypt');
+const {requireAuth} = require('../middlewares/middleware');
+
+const User = mongoose.model('User')
+
+router.put('/api/user/:id', requireAuth, async (req, res) => {
+    const {username, email, password, newPassword} = req.body
+
+    if (password && newPassword) {
+        bcrypt.compare(password, req.user.password, async (err, isMatch) => {
+            if (err)
+                return res.status(400).json({errors: 'Current password is wrong!'});
+
+            if (isMatch) {
+                const user = {username, email, newPassword}
+                await User.findByIdAndUpdate(req.params.id, user)
+
+                res.send(req.user);
+            }
+        });
+    } else if (username || email) {
+        const user = {username, email}
+        await User.findByIdAndUpdate(req.params.id, user)
+
+        res.send(req.user);
+    }
+
+});
+
+module.exports = router;

web/src/store/index.ts

@@ -80,12 +80,12 @@ export default createStore({
         updateUser({commit}, user) {
             return new Promise((resolve, reject) => {
                 axios({
-                    method: 'post',
-                    url: '/api/user',
+                    method: 'put',
+                    url: `/api/user/${user._id}`,
                     data: qs.stringify({...user})
                 })
                     .then((resp: AxiosResponse) => {
-                        commit("auth_success", resp.data.user);
+                        commit("auth_success", resp.data);
                         resolve(resp)
                     })
                     .catch((err: Error) => {

web/src/views/Profile.vue

@@ -1,6 +1,6 @@
 <template>
   <h1 class="title is-2">Profile</h1>
-  <form @submit.prevent="update">
+  <form @submit="update">
     <div class="tile is-ancestor">
       <div class="tile is-4 is-vertical is-parent">
         <div class="tile is-child box">
@@ -8,7 +8,7 @@
           <div class="field">
             <label class="label">Username</label>
             <div class="control">
-              <input class="input" type="text" :value="user.username">
+              <input class="input" type="text" v-model="user.username">
             </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" :value="user.email">
+              <input class="input" type="email" v-model="user.email">
             </div>
           </div>
         </div>
@@ -31,7 +31,7 @@
           <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="currentPassword">
+              <input class="input" type="password" placeholder="Current Password" v-model="user.currentPassword">
               <span class="icon is-small is-left">
       <i class="fas fa-lock"></i>
     </span>
@@ -39,7 +39,7 @@
           </div>
           <div class="field">
             <p class="control has-icons-left">
-              <input class="input" type="password" placeholder="New Password" v-model="newPassword">
+              <input class="input" type="password" placeholder="New Password" v-model="user.newPassword">
               <span class="icon is-small is-left">
       <i class="fas fa-lock"></i>
     </span>
@@ -47,7 +47,7 @@
           </div>
           <div class="field">
             <p class="control has-icons-left">
-              <input class="input" type="password" placeholder="Confirm Password" v-model="repeatNewPassword">
+              <input class="input" type="password" placeholder="Confirm Password" v-model="user.repeatNewPassword">
               <span class="icon is-small is-left">
       <i class="fas fa-lock"></i>
     </span>
@@ -55,13 +55,16 @@
           </div>
           <div class="field">
             <p class="control">
-              <button class="button is-primary" type="submit">
+              <button class="button is-primary is-rounded" type="submit">
                 Update
               </button>
             </p>
           </div>
-          <div class="notification is-danger has-text-centered mt-5" v-if="msg">
-            <b>{{ msg }}</b>
+          <div class="notification is-danger has-text-centered mt-5" v-if="msgError">
+            <b>{{ msgError }}</b>
+          </div>
+          <div class="notification is-success has-text-centered mt-5" v-else-if="msgSuccess">
+            <b>{{ msgSuccess }}</b>
           </div>
           <div class="notification is-primary is-light mt-5" v-else>
             <p>According to the traditional advice—which is still good—a strong password:</p>
@@ -82,38 +85,57 @@
 import {Vue} from "vue-class-component";
 
 interface User {
+  _id: string,
   username: string,
-  registered: string
+  email: string,
+  registered: string,
+  currentPassword: string,
+  newPassword: string,
+  repeatNewPassword: string,
 }
 
 export default class Profile extends Vue {
-  private msg = '';
+  private msgSuccess = '';
+  private msgError = '';
   private user!: User;
   private date!: string;
 
-  private username = ''
-  private email = ''
-  private currentPassword = ''
-  private newPassword = ''
-  private repeatNewPassword = ''
-
   created() {
     this.user = this.$store.getters.user
     this.date = new Date(this.user.registered).toLocaleString()
   }
 
   private update() {
+    if (this.user.newPassword != this.user.repeatNewPassword) {
+      this.msgError = 'Passwords do not match!'
+      return
+    }
+
     let user = {
-      username: this.username,
-      email: this.email,
-      password: this.currentPassword,
-      newPassword: this.newPassword,
-      repeatNewPassword: this.repeatNewPassword
+      _id: this.user._id,
+      username: this.user.username,
+      email: this.user.email,
+      password: this.user.currentPassword,
+      newPassword: this.user.newPassword,
+      repeatNewPassword: this.user.repeatNewPassword
     }
 
     this.$store.dispatch('updateUser', user)
-        .then(() => this.$router.push({name: 'Profile', params: {username: this.username}}))
-        .catch((err: any) => this.msg = err.response.data.errors.message || err.message || 'Something went wrong!')
+        .then(() => {
+          this.msgSuccess = 'User updated!';
+          this.$router.push({
+            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}
+              })
+            }
+        )
   }
 }