Fixed #56: invalidate tokens on password change, also added change password form

front/src/components/auth/Profile.vue

@@ -17,6 +17,10 @@
           <i class="star icon"></i>
           Staff member
         </div>
+        <router-link class="ui tiny basic button" :to="{path: '/settings'}">
+          <i class="setting icon"> </i>Settings...
+        </router-link>
+
       </div>
     </template>
   </div>

front/src/components/auth/Settings.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="main pusher">
+    <div class="ui vertical stripe segment">
+      <div class="ui small text container">
+        <h2>Change my password</h2>
+        <form class="ui form" @submit.prevent="submit()">
+          <div v-if="error" class="ui negative message">
+            <div class="header">Cannot change your password</div>
+            <ul class="list">
+              <li v-if="error == 'invalid_credentials'">Please double-check your password is correct</li>
+            </ul>
+          </div>
+          <div class="field">
+            <label>Old password</label>
+            <input
+            required
+            type="password"
+            autofocus
+            placeholder="Enter your old password"
+            v-model="old_password">
+          </div>
+          <div class="field">
+            <label>New password</label>
+            <input
+            required
+            type="password"
+            autofocus
+            placeholder="Enter your new password"
+            v-model="new_password">
+          </div>
+          <button :class="['ui', {'loading': isLoading}, 'button']" type="submit">Change password</button>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import config from '@/config'
+import logger from '@/logging'
+
+export default {
+  data () {
+    return {
+      // We need to initialize the component with any
+      // properties that will be used in it
+      old_password: '',
+      new_password: '',
+      error: '',
+      isLoading: false
+    }
+  },
+  methods: {
+    submit () {
+      var self = this
+      self.isLoading = true
+      this.error = ''
+      var credentials = {
+        old_password: this.old_password,
+        new_password1: this.new_password,
+        new_password2: this.new_password
+      }
+      let resource = Vue.resource(config.BACKEND_URL + 'api/auth/registration/change-password/')
+      return resource.save({}, credentials).then(response => {
+        logger.default.info('Password successfully changed')
+        self.$router.push('/profile/me')
+      }, response => {
+        if (response.status === 400) {
+          self.error = 'invalid_credentials'
+        } else {
+          self.error = 'unknown_error'
+        }
+        self.isLoading = false
+      })
+    }
+  }
+
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>

front/src/main.js

@@ -31,6 +31,7 @@ Vue.http.interceptors.push(function (request, next) {
   next(function (response) {
     // redirect to login form when we get unauthorized response from server
     if (response.status === 401) {
+      store.commit('auth/authenticated', false)
       logger.default.warn('Received 401 response from API, redirecting to login form')
       router.push({name: 'login', query: {next: router.currentRoute.fullPath}})
     }

front/src/router/index.js

@@ -4,6 +4,7 @@ import PageNotFound from '@/components/PageNotFound'
 import Home from '@/components/Home'
 import Login from '@/components/auth/Login'
 import Profile from '@/components/auth/Profile'
+import Settings from '@/components/auth/Settings'
 import Logout from '@/components/auth/Logout'
 import Library from '@/components/library/Library'
 import LibraryHome from '@/components/library/Home'
@@ -39,6 +40,11 @@ export default new Router({
       name: 'logout',
       component: Logout
     },
+    {
+      path: '/settings',
+      name: 'settings',
+      component: Settings
+    },
     {
       path: '/@:username',
       name: 'profile',

front/src/store/auth.js

@@ -29,13 +29,24 @@ export default {
     },
     authenticated: (state, value) => {
       state.authenticated = value
+      if (value === false) {
+        state.username = null
+        state.token = null
+        state.tokenData = null
+        state.profile = null
+        state.availablePermissions = {}
+      }
     },
     username: (state, value) => {
       state.username = value
     },
     token: (state, value) => {
       state.token = value
-      state.tokenData = jwtDecode(value)
+      if (value) {
+        state.tokenData = jwtDecode(value)
+      } else {
+        state.tokenData = {}
+      }
     },
     permission: (state, {key, status}) => {
       state.availablePermissions[key] = status
@@ -60,7 +71,6 @@ export default {
     },
     logout ({commit}) {
       commit('authenticated', false)
-      commit('profile', null)
       logger.default.info('Log out, goodbye!')
       router.push({name: 'index'})
     },