Implement password changing

src/components/Navbar.vue

@@ -576,7 +576,7 @@ export default {
     },
     logout() {
       localStorage.removeItem("token");
-      this.$store.commit("setToken", "");
+      this.$store.commit("issueLogout");
       Object.assign(axios.defaults, {
         headers: { Authorization: this.$store.state.user.token },
       });

src/locales/en.json

@@ -249,7 +249,14 @@
       "devMode": "Developer Mode"
     },
     "security": {
-      "title": "Security"
+      "title": "Security",
+      "password": {
+        "title": "Changing your password",
+        "oldPassword": "Please enter your old password",
+        "newPassword": "Please enter your new desired password",
+        "newPasswordConfirm": "Please re-enter your desired password",
+        "change": "Change password (You will be logged out)"
+      }
     },
     "privacy": {
       "title": "Privacy"

src/store/index.js

@@ -183,6 +183,12 @@ export default new Vuex.Store({
         setSecure(state, value) {
             state.client.secure = value;
         },
+        issueLogout(state) {
+            state.user.username = ''
+            state.user.token = ''
+            state.user.koins = 0
+            state.user.id = 0
+        },
     },
     actions: {},
     modules: {}

src/views/SettingsSecurity.vue

@@ -1,15 +1,76 @@
 <template>
-    <div id="settings-account">
-        <div class="box">
-          <div class="title">{{ $t("settings.security.title") }}</div>
-          <hr>
-          <p>We're still working on this mate.</p>
-        </div>
+  <div id="settings-account">
+    <div class="box">
+      <div class="title">{{ $t("settings.security.title") }}</div>
+      <hr>
+      <div class="subtitle">{{$t('settings.security.password.title')}}</div>
+      <b-field :label="$t('settings.security.password.oldPassword')">
+        <b-input v-model="password.oldPassword" :placeholder="$t('settings.security.password.oldPassword')"></b-input>
+      </b-field>
+      <b-field :label="$t('settings.security.password.newPassword')">
+        <b-input v-model="password.newPassword" :placeholder="$t('settings.security.password.newPassword')"></b-input>
+      </b-field>
+      <b-field :label="$t('settings.security.password.newPasswordConfirm')">
+        <b-input v-model="password.newPasswordConfirm" :placeholder="$t('settings.security.password.newPasswordConfirm')"></b-input>
+      </b-field>
+      <b-button :loading="password.loading" class="is-danger" @click="changePassword">{{$t('settings.security.password.change')}}</b-button>
     </div>
+  </div>
 </template>
 
 <script>
+import AjaxErrorHandler from "@/assets/js/errorHandler";
+import axios from "axios";
+
 export default {
-    name: "SettingsAccount"
+  name: "SettingsSecurity",
+  data() {
+    return {
+      password: {
+        oldPassword: '',
+        newPassword: '',
+        newPasswordConfirm: '',
+        loading: false
+      },
+      twoFactor: {
+        secret: '',
+        confirmCode: '',
+        enabled: false,
+        loading: false
+      }
+    }
+  },
+  methods: {
+    changePassword() {
+      this.password.loading = true
+      this.axios.put(
+          process.env.VUE_APP_API_ENDPOINT +
+          process.env.VUE_APP_API_VERSION +
+          "/users/preferences", {
+            oldPassword: this.password.oldPassword,
+            newPassword: this.password.newPassword,
+            newPasswordConfirm: this.password.newPasswordConfirm
+          })
+          .then(() => {
+            this.password.loading = false
+            this.logout()
+          })
+      .catch((e) => {
+        this.password.loading = false
+        AjaxErrorHandler(this.$store)(e);
+      })
+    },
+    logout() {
+      this.$store.commit('issueLogout');
+      Object.assign(axios.defaults, {
+        headers: { Authorization: this.$store.state.user.token },
+      });
+      localStorage.removeItem("token");
+      this.$buefy.snackbar.open({
+        message: this.$t("errors.logout"),
+        type: "is-info",
+      });
+    }
+  }
 }
 </script>