change password

Author: rockstarr-programmerr

src/api/account.ts

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import { endpoints, replacePk } from './endpoints'
 import {
+  ChangePasswordReq,
   LoginReq, LoginRes,
   MyInfoRes,
   RegisterTeacherReq, RegisterTeacherRes, TokenRefreshReq, TokenRefreshRes, UpdateProfileReq, UpdateProfileRes, UserDetailRes
@@ -55,5 +56,9 @@ export const account = {
       }
     })
     return res.data
+  },
+
+  async changePassword (payload: ChangePasswordReq): Promise<void> {
+    await Vue.axios.post(endpoints.account.users.changePassword, payload)
   }
 }

src/api/endpoints.ts

@@ -4,7 +4,8 @@ export const endpoints = {
       login: '/account/users/login/',
       tokenRefresh: '/account/users/token-refresh/',
       registerTeacher: '/account/users/register-teacher/',
-      detail: '/account/users/<pk>/'
+      detail: '/account/users/<pk>/',
+      changePassword: '/account/users/change-password/'
     },
     me: {
       myInfo: '/account/me/',

src/interfaces/api/account.ts

@@ -43,3 +43,8 @@ export declare interface UpdateProfileReq {
 }
 
 export declare interface UpdateProfileRes extends User {}
+
+export declare interface ChangePasswordReq {
+  current_password: string;
+  new_password: string;
+}

src/views/account/ChangePassword.vue

@@ -1,15 +1,103 @@
 <template>
   <v-container class="container-sm">
-    ChangePassword
+    <v-breadcrumbs :items="breadcrumbs"></v-breadcrumbs>
+
+    <h1>Change password</h1>
+    <v-divider></v-divider>
+
+    <v-card class="mt-5">
+      <v-card-text>
+        <v-form v-on:keyup.enter.native="changePassword">
+          <v-text-field
+            v-model="currentPassword"
+            label="Current password"
+            :type="showCurrentPassword ? 'text' : 'password'"
+            :append-icon="showCurrentPassword ? 'mdi-eye' : 'mdi-eye-off'"
+            @click:append="showCurrentPassword = !showCurrentPassword"
+            :error-messages="currentPasswordErrs"
+            :error-count="currentPasswordErrs.length"
+          ></v-text-field>
+
+          <v-text-field
+            v-model="newPassword"
+            label="New password"
+            :type="showNewPassword ? 'text' : 'password'"
+            :append-icon="showNewPassword ? 'mdi-eye' : 'mdi-eye-off'"
+            @click:append="showNewPassword = !showNewPassword"
+            :error-messages="newPasswordErrs"
+            :error-count="newPasswordErrs.length"
+          ></v-text-field>
+        </v-form>
+      </v-card-text>
+
+      <v-card-actions>
+        <v-btn
+          color="primary"
+          :loading="loading"
+          @click="changePassword"
+          min-width="110"
+        >
+          Save
+        </v-btn>
+      </v-card-actions>
+    </v-card>
   </v-container>
 </template>
 
 <script lang="ts">
+import { Api } from '@/api'
+import { VForm } from '@/interfaces/vuetify'
+import { snakeCaseToCamelCase } from '@/utils'
+import { assertErrCode, status } from '@/utils/status-codes'
 import { Vue, Component } from 'vue-property-decorator'
 
 @Component
 export default class ChangePassword extends Vue {
+  // eslint-disable-next-line no-undef
+  [key: string]: unknown
+
+  breadcrumbs = [
+    { text: 'Home', to: { name: 'Home' }, exact: true },
+    { text: 'Profile', to: { name: 'MyInfo' }, exact: true },
+    { text: 'Change password', to: { name: 'ChangePassword' }, exact: true }
+  ]
+
+  currentPassword = ''
+  newPassword = ''
+
+  currentPasswordErrs: string[] = []
+  newPasswordErrs: string[] = []
+
+  showCurrentPassword = false
+  showNewPassword = false
+  loading = false
+
+  changePassword (): void {
+    if (this.loading) return
+    this.loading = true
 
+    Api.account.changePassword({
+      current_password: this.currentPassword,
+      new_password: this.newPassword
+    })
+      .then(() => {
+        this.$router.push({ name: 'MyInfo' })
+      })
+      .catch(err => {
+        if (assertErrCode(err, status.HTTP_400_BAD_REQUEST)) {
+          const data = err.response.data
+          Object.entries(data).forEach(([field, errMsgs]) => {
+            const attr = `${snakeCaseToCamelCase(field)}Errs`
+            this[attr] = errMsgs
+          })
+        } else if (assertErrCode(err, status.HTTP_403_FORBIDDEN)) {
+          this.currentPasswordErrs = [err.response.data.detail]
+        }
+      })
+      .finally(() => {
+        this.loading = false
+      })
+  }
 }
 </script>