username and password change

backend/app/Http/Controllers/UserController.php

@@ -3,6 +3,7 @@
   namespace App\Http\Controllers;
 
   use Illuminate\Contracts\Auth\Guard;
+  use Illuminate\Support\Facades\Auth;
   use Illuminate\Support\Facades\Input;
 
   class UserController {
@@ -36,6 +37,36 @@
       return response('Unauthorized', 401);
     }
 
+    /**
+     * Return user data for frontend. Currently only username is needed.
+     *
+     * @return array
+     */
+    public function userData()
+    {
+      return [
+        'username' => Auth::user()->username
+      ];
+    }
+
+    /**
+     * @param $type
+     *
+     * @return \Illuminate\Contracts\Routing\ResponseFactory|\Symfony\Component\HttpFoundation\Response
+     */
+    public function changeUser($type) {
+      $value = $type == 'username' ? Input::get('username') : bcrypt(Input::get('password'));
+
+      $user = Auth::user();
+      $user->{$type} = $value;
+
+      if($user->save()) {
+        return response('Success', 200);
+      }
+
+      return response('Server Error', 500);
+    }
+
     /**
      * Logout user and redirect to home.
      *

backend/routes/web.php

@@ -9,6 +9,9 @@
     Route::get('/search-items', 'ItemController@search');
 
     Route::group(['middleware' => 'auth'], function() {
+      Route::get('/userdata', 'UserController@userData');
+      Route::post('/change-{type}', 'UserController@changeUser');
+
       Route::get('/search-tmdb', 'TMDBController@search');
       Route::post('/add', 'ItemController@add');
       Route::patch('/change-rating/{itemID}', 'ItemController@changeRating');

client/app/components/Content/Settings.vue

@@ -1,7 +1,21 @@
 <template>
   <main>
     <div class="wrap-content" v-if=" ! loading">
-      <span class="nothing-found">Settings coming soon...</span>
+      <span class="nothing-found">Settings</span>
+      <div class="user-settings-box">
+        <form class="login-form" @submit.prevent="editUser('username')">
+          <input type="text" placeholder="Username" v-model="username">
+          <span class="userdata-changed"><span v-if="usernameSuccess">Username changed</span></span>
+          <input type="submit" value="Change username">
+        </form>
+      </div>
+      <div class="user-settings-box">
+        <form class="login-form" @submit.prevent="editUser('password')">
+          <input type="password" placeholder="Password" v-model="password" autocomplete="off">
+          <span class="userdata-changed"><span v-if="passwordSuccess">Password changed</span></span>
+          <input type="submit" value="Change password">
+        </form>
+      </div>
     </div>
 
     <span class="loader fullsize-loader" v-if="loading"><i></i></span>
@@ -17,15 +31,54 @@
     data() {
       return {
         loading: true,
-        username: ''
+        username: '',
+        password: '',
+        usernameSuccess: false,
+        passwordSuccess: false
       }
     },
 
     methods: {
       fetchUserData() {
-        setTimeout(() => {
+        this.$http.get(`${config.api}/userdata`).then(value => {
+          const data = value.body;
           this.loading = false;
-        }, 800);
+          this.username = data.username;
+        });
+      },
+
+      editUser(type) {
+        if((type == 'username' && this.username != '') || (type == 'password' && this.password != '')) {
+          const username = this.username;
+          const password = this.password;
+
+          this.$http.post(`${config.api}/change-${type}`, {username, password}).then(value => {
+            this.showSuccessMessage(type);
+            this.clearSuccessMessage(type);
+
+            console.log(value);
+          }, error => {
+            console.log(error);
+          });
+        }
+      },
+
+      showSuccessMessage(type) {
+        if(type == 'username') {
+          this.usernameSuccess = true;
+        } else {
+          this.passwordSuccess = true;
+        }
+      },
+
+      clearSuccessMessage(type) {
+        setTimeout(() => {
+          if(type == 'username') {
+            this.usernameSuccess = false;
+          } else {
+            this.passwordSuccess = false;
+          }
+        }, 2000);
       }
     }
   }

client/resources/sass/components/_content.scss

@@ -259,4 +259,31 @@ main {
   &:active {
     opacity: .8;
   }
+}
+
+.user-settings-box {
+  float: left;
+  width: 250px;
+  margin: 0 0 30px 0;
+  clear: both;
+
+  &:last-child {
+    margin: 0;
+  }
+
+  @include media(4) {
+    width: 100%;
+  }
+}
+
+.userdata-changed {
+  float: left;
+  width: 100%;
+
+  span {
+    float: left;
+    color: $rating1;
+    margin: 10px 0;
+    font-size: 14px;
+  }
 }

public/assets/app.css

@@ -1441,6 +1441,26 @@ main {
   .load-more:active {
     opacity: .8; }
 
+.user-settings-box {
+  float: left;
+  width: 250px;
+  margin: 0 0 30px 0;
+  clear: both; }
+  .user-settings-box:last-child {
+    margin: 0; }
+  @media (max-width: 740px) {
+    .user-settings-box {
+      width: 100%; } }
+
+.userdata-changed {
+  float: left;
+  width: 100%; }
+  .userdata-changed span {
+    float: left;
+    color: #6bb01a;
+    margin: 10px 0;
+    font-size: 14px; }
+
 .login-wrap {
   max-width: 320px;
   margin-left: auto;

public/assets/app.js

@@ -641,9 +641,9 @@ webpackJsonp([0],[
 	  if (!hotAPI.compatible) return
 	  module.hot.accept()
 	  if (!module.hot.data) {
-	    hotAPI.createRecord("data-v-3", __vue_options__)
+	    hotAPI.createRecord("data-v-2", __vue_options__)
 	  } else {
-	    hotAPI.reload("data-v-3", __vue_options__)
+	    hotAPI.reload("data-v-2", __vue_options__)
 	  }
 	})()}
 	if (__vue_options__.functional) {console.error("[vue-loader] Header.vue: functional components are not supported and should be defined in plain js files using render functions.")}
@@ -1482,7 +1482,7 @@ webpackJsonp([0],[
 	if (false) {
 	  module.hot.accept()
 	  if (module.hot.data) {
-	     require("vue-loader/node_modules/vue-hot-reload-api").rerender("data-v-3", module.exports)
+	     require("vue-loader/node_modules/vue-hot-reload-api").rerender("data-v-2", module.exports)
 	  }
 	}
 
@@ -1524,9 +1524,9 @@ webpackJsonp([0],[
 	  if (!hotAPI.compatible) return
 	  module.hot.accept()
 	  if (!module.hot.data) {
-	    hotAPI.createRecord("data-v-1", __vue_options__)
+	    hotAPI.createRecord("data-v-4", __vue_options__)
 	  } else {
-	    hotAPI.reload("data-v-1", __vue_options__)
+	    hotAPI.reload("data-v-4", __vue_options__)
 	  }
 	})()}
 	if (__vue_options__.functional) {console.error("[vue-loader] Search.vue: functional components are not supported and should be defined in plain js files using render functions.")}
@@ -1700,7 +1700,7 @@ webpackJsonp([0],[
 	if (false) {
 	  module.hot.accept()
 	  if (module.hot.data) {
-	     require("vue-loader/node_modules/vue-hot-reload-api").rerender("data-v-1", module.exports)
+	     require("vue-loader/node_modules/vue-hot-reload-api").rerender("data-v-4", module.exports)
 	  }
 	}
 
@@ -1736,9 +1736,9 @@ webpackJsonp([0],[
 	  if (!hotAPI.compatible) return
 	  module.hot.accept()
 	  if (!module.hot.data) {
-	    hotAPI.createRecord("data-v-4", __vue_options__)
+	    hotAPI.createRecord("data-v-3", __vue_options__)
 	  } else {
-	    hotAPI.reload("data-v-4", __vue_options__)
+	    hotAPI.reload("data-v-3", __vue_options__)
 	  }
 	})()}
 	if (__vue_options__.functional) {console.error("[vue-loader] Footer.vue: functional components are not supported and should be defined in plain js files using render functions.")}
@@ -1836,7 +1836,7 @@ webpackJsonp([0],[
 	if (false) {
 	  module.hot.accept()
 	  if (module.hot.data) {
-	     require("vue-loader/node_modules/vue-hot-reload-api").rerender("data-v-4", module.exports)
+	     require("vue-loader/node_modules/vue-hot-reload-api").rerender("data-v-3", module.exports)
 	  }
 	}
 
@@ -1872,9 +1872,9 @@ webpackJsonp([0],[
 	  if (!hotAPI.compatible) return
 	  module.hot.accept()
 	  if (!module.hot.data) {
-	    hotAPI.createRecord("data-v-2", __vue_options__)
+	    hotAPI.createRecord("data-v-1", __vue_options__)
 	  } else {
-	    hotAPI.reload("data-v-2", __vue_options__)
+	    hotAPI.reload("data-v-1", __vue_options__)
 	  }
 	})()}
 	if (__vue_options__.functional) {console.error("[vue-loader] Login.vue: functional components are not supported and should be defined in plain js files using render functions.")}
@@ -2008,7 +2008,7 @@ webpackJsonp([0],[
 	if (false) {
 	  module.hot.accept()
 	  if (module.hot.data) {
-	     require("vue-loader/node_modules/vue-hot-reload-api").rerender("data-v-2", module.exports)
+	     require("vue-loader/node_modules/vue-hot-reload-api").rerender("data-v-1", module.exports)
 	  }
 	}
 
@@ -3977,9 +3977,9 @@ webpackJsonp([0],[
 	  if (!hotAPI.compatible) return
 	  module.hot.accept()
 	  if (!module.hot.data) {
-	    hotAPI.createRecord("data-v-5", __vue_options__)
+	    hotAPI.createRecord("data-v-7", __vue_options__)
 	  } else {
-	    hotAPI.reload("data-v-5", __vue_options__)
+	    hotAPI.reload("data-v-7", __vue_options__)
 	  }
 	})()}
 	if (__vue_options__.functional) {console.error("[vue-loader] Content.vue: functional components are not supported and should be defined in plain js files using render functions.")}
@@ -4307,7 +4307,7 @@ webpackJsonp([0],[
 	if (false) {
 	  module.hot.accept()
 	  if (module.hot.data) {
-	     require("vue-loader/node_modules/vue-hot-reload-api").rerender("data-v-5", module.exports)
+	     require("vue-loader/node_modules/vue-hot-reload-api").rerender("data-v-7", module.exports)
 	  }
 	}
 
@@ -4343,9 +4343,9 @@ webpackJsonp([0],[
 	  if (!hotAPI.compatible) return
 	  module.hot.accept()
 	  if (!module.hot.data) {
-	    hotAPI.createRecord("data-v-6", __vue_options__)
+	    hotAPI.createRecord("data-v-5", __vue_options__)
 	  } else {
-	    hotAPI.reload("data-v-6", __vue_options__)
+	    hotAPI.reload("data-v-5", __vue_options__)
 	  }
 	})()}
 	if (__vue_options__.functional) {console.error("[vue-loader] SearchContent.vue: functional components are not supported and should be defined in plain js files using render functions.")}
@@ -6113,7 +6113,7 @@ webpackJsonp([0],[
 	if (false) {
 	  module.hot.accept()
 	  if (module.hot.data) {
-	     require("vue-loader/node_modules/vue-hot-reload-api").rerender("data-v-6", module.exports)
+	     require("vue-loader/node_modules/vue-hot-reload-api").rerender("data-v-5", module.exports)
 	  }
 	}
 
@@ -6149,9 +6149,9 @@ webpackJsonp([0],[
 	  if (!hotAPI.compatible) return
 	  module.hot.accept()
 	  if (!module.hot.data) {
-	    hotAPI.createRecord("data-v-7", __vue_options__)
+	    hotAPI.createRecord("data-v-6", __vue_options__)
 	  } else {
-	    hotAPI.reload("data-v-7", __vue_options__)
+	    hotAPI.reload("data-v-6", __vue_options__)
 	  }
 	})()}
 	if (__vue_options__.functional) {console.error("[vue-loader] Settings.vue: functional components are not supported and should be defined in plain js files using render functions.")}
@@ -6175,7 +6175,10 @@ webpackJsonp([0],[
 	  data: function data() {
 	    return {
 	      loading: true,
-	      username: ''
+	      username: '',
+	      password: '',
+	      usernameSuccess: false,
+	      passwordSuccess: false
 	    };
 	  },
 
@@ -6184,9 +6187,46 @@ webpackJsonp([0],[
 	    fetchUserData: function fetchUserData() {
 	      var _this = this;
 
-	      setTimeout(function () {
+	      this.$http.get(config.api + '/userdata').then(function (value) {
+	        var data = value.body;
 	        _this.loading = false;
-	      }, 800);
+	        _this.username = data.username;
+	      });
+	    },
+	    editUser: function editUser(type) {
+	      var _this2 = this;
+
+	      if (type == 'username' && this.username != '' || type == 'password' && this.password != '') {
+	        var username = this.username;
+	        var password = this.password;
+
+	        this.$http.post(config.api + '/change-' + type, { username: username, password: password }).then(function (value) {
+	          _this2.showSuccessMessage(type);
+	          _this2.clearSuccessMessage(type);
+
+	          console.log(value);
+	        }, function (error) {
+	          console.log(error);
+	        });
+	      }
+	    },
+	    showSuccessMessage: function showSuccessMessage(type) {
+	      if (type == 'username') {
+	        this.usernameSuccess = true;
+	      } else {
+	        this.passwordSuccess = true;
+	      }
+	    },
+	    clearSuccessMessage: function clearSuccessMessage(type) {
+	      var _this3 = this;
+
+	      setTimeout(function () {
+	        if (type == 'username') {
+	          _this3.usernameSuccess = false;
+	        } else {
+	          _this3.passwordSuccess = false;
+	        }
+	      }, 2000);
 	    }
 	  }
 	};
@@ -6198,20 +6238,97 @@ webpackJsonp([0],[
 	module.exports={render:function (){with(this) {
 	  return _h('main', [(!loading) ? _h('div', {
 	    staticClass: "wrap-content"
-	  }, [_m(0)]) : _e(), " ", (loading) ? _h('span', {
+	  }, [_m(0), " ", _h('div', {
+	    staticClass: "user-settings-box"
+	  }, [_h('form', {
+	    staticClass: "login-form",
+	    on: {
+	      "submit": function($event) {
+	        $event.preventDefault();
+	        editUser('username')
+	      }
+	    }
+	  }, [_h('input', {
+	    directives: [{
+	      name: "model",
+	      value: (username),
+	      expression: "username"
+	    }],
+	    attrs: {
+	      "type": "text",
+	      "placeholder": "Username"
+	    },
+	    domProps: {
+	      "value": _s(username)
+	    },
+	    on: {
+	      "input": function($event) {
+	        if ($event.target.composing) return;
+	        username = $event.target.value
+	      }
+	    }
+	  }), " ", _h('span', {
+	    staticClass: "userdata-changed"
+	  }, [(usernameSuccess) ? _h('span', ["Username changed"]) : _e()]), " ", _m(1)])]), " ", _h('div', {
+	    staticClass: "user-settings-box"
+	  }, [_h('form', {
+	    staticClass: "login-form",
+	    on: {
+	      "submit": function($event) {
+	        $event.preventDefault();
+	        editUser('password')
+	      }
+	    }
+	  }, [_h('input', {
+	    directives: [{
+	      name: "model",
+	      value: (password),
+	      expression: "password"
+	    }],
+	    attrs: {
+	      "type": "password",
+	      "placeholder": "Password",
+	      "autocomplete": "off"
+	    },
+	    domProps: {
+	      "value": _s(password)
+	    },
+	    on: {
+	      "input": function($event) {
+	        if ($event.target.composing) return;
+	        password = $event.target.value
+	      }
+	    }
+	  }), " ", _h('span', {
+	    staticClass: "userdata-changed"
+	  }, [(passwordSuccess) ? _h('span', ["Password changed"]) : _e()]), " ", _m(2)])])]) : _e(), " ", (loading) ? _h('span', {
 	    staticClass: "loader fullsize-loader"
-	  }, [_m(1)]) : _e()])
+	  }, [_m(3)]) : _e()])
 	}},staticRenderFns: [function (){with(this) {
 	  return _h('span', {
 	    staticClass: "nothing-found"
-	  }, ["Settings coming soon..."])
+	  }, ["Settings"])
+	}},function (){with(this) {
+	  return _h('input', {
+	    attrs: {
+	      "type": "submit",
+	      "value": "Change username"
+	    }
+	  })
+	}},function (){with(this) {
+	  return _h('input', {
+	    attrs: {
+	      "type": "submit",
+	      "value": "Change password"
+	    }
+	  })
 	}},function (){with(this) {
 	  return _h('i')
 	}}]}
 	if (false) {
 	  module.hot.accept()
 	  if (module.hot.data) {
-	     require("vue-loader/node_modules/vue-hot-reload-api").rerender("data-v-7", module.exports)
+	     require("vue-loader/node_modules/vue-hot-reload-api").rerender("data-v-6", module.exports)
 	  }
 	}