show messages

Author: rockstarr-programmerr

src/App.vue

@@ -5,16 +5,34 @@
       v-else
       indeterminate
     ></v-progress-linear>
+
+    <v-snackbar
+      :value="messageShow"
+      @input="setMessage"
+    >
+      {{ messageText }}
+      <template #action="{ attrs }">
+        <v-btn
+          color="pink"
+          text
+          v-bind="attrs"
+          @click="hideMessage"
+        >
+          Close
+        </v-btn>
+      </template>
+    </v-snackbar>
   </v-app>
 </template>
 
 <script lang="ts">
 import { Vue, Component } from 'vue-property-decorator'
 import LayoutDefault from '@/layouts/LayoutDefault.vue'
-import { mapGetters } from 'vuex'
+import { mapGetters, mapMutations, mapState } from 'vuex'
 import { User } from './interfaces/user'
 import { unexpectedExc } from './utils'
 import { assertErrCode, status } from './utils/status-codes'
+import { noAuthenRoutes } from './router'
 
 @Component({
   components: {
@@ -23,28 +41,34 @@ import { assertErrCode, status } from './utils/status-codes'
   computed: {
     ...mapGetters('account', {
       user: 'loggedInUser'
+    }),
+    ...mapState('message', {
+      messageShow: 'show',
+      messageText: 'text'
+    })
+  },
+  methods: {
+    ...mapMutations('message', {
+      showMessage: 'SHOW_MESSAGE',
+      hideMessage: 'HIDE_MESSAGE'
     })
   }
 })
 export default class App extends Vue {
+  /**
+   * Init
+   */
   user!: User
   loading = false
   initDone = false
 
-  noAuthenRoutes = [
-    'Login',
-    'Register',
-    'ResetPassword',
-    'NewPassword'
-  ]
-
   created (): void {
     this.setUserInfo()
   }
 
   setUserInfo (): void {
     const routeName = this.$route.name
-    if (this.noAuthenRoutes.includes(routeName as string)) {
+    if (noAuthenRoutes.includes(routeName as string)) {
       this.initDone = true
       return
     }
@@ -64,6 +88,10 @@ export default class App extends Vue {
       })
   }
 
+  /**
+   * Layout
+   */
+
   get layout (): typeof Vue {
     const meta = this.$route.meta
 
@@ -89,6 +117,22 @@ export default class App extends Vue {
 
     return LayoutDefault
   }
+
+  /**
+   * Message
+   */
+  messageShow!: boolean
+  messageText!: string
+  showMessage!: CallableFunction
+  hideMessage!: CallableFunction
+
+  setMessage (show: boolean): void {
+    if (show) {
+      this.showMessage()
+    } else {
+      this.hideMessage()
+    }
+  }
 }
 </script>
 

src/layouts/LayoutClassroomTeacher.vue

@@ -138,6 +138,9 @@ import KLDialogConfirm from '@/components/KLDialogConfirm.vue'
   methods: {
     ...mapMutations('classroom', {
       setCurrentClassroom: 'SET_CURRENT_CLASSROOM'
+    }),
+    ...mapMutations('message', {
+      showMessage: 'SHOW_MESSAGE'
     })
   }
 })
@@ -147,6 +150,7 @@ export default class LayoutClassroomTeacher extends Vue {
 
   classroom!: Classroom
   setCurrentClassroom!: CallableFunction
+  showMessage!: CallableFunction
 
   get breadcrumbs (): unknown[] {
     if (this.classroom === undefined) return []
@@ -199,6 +203,7 @@ export default class LayoutClassroomTeacher extends Vue {
     this.$store.dispatch('classroom/delete', this.classroom.pk)
       .then(() => {
         this.$router.push({ name: 'ClassroomList' })
+        this.showMessage('Classroom deleted.')
       })
       .catch(unexpectedExc)
       .finally(() => {

src/layouts/LayoutDefault.vue

@@ -45,23 +45,6 @@
       </slot>
     </v-main>
 
-    <v-snackbar
-      :value="messageShow"
-      @input="setMessage"
-    >
-      {{ messageText }}
-      <template #action="{ attrs }">
-        <v-btn
-          color="pink"
-          text
-          v-bind="attrs"
-          @click="hideMessage"
-        >
-          Close
-        </v-btn>
-      </template>
-    </v-snackbar>
-
     <!--  TODO: is this needed?
     <v-bottom-navigation
       app
@@ -88,16 +71,6 @@ import KLAvatar from '@/components/KLAvatar.vue'
   computed: {
     ...mapGetters({
       user: 'account/loggedInUser'
-    }),
-    ...mapState('message', {
-      messageShow: 'show',
-      messageText: 'text'
-    })
-  },
-  methods: {
-    ...mapMutations('message', {
-      showMessage: 'SHOW_MESSAGE',
-      hideMessage: 'HIDE_MESSAGE'
     })
   },
   components: {
@@ -106,19 +79,6 @@ import KLAvatar from '@/components/KLAvatar.vue'
 })
 export default class LayoutDefault extends Vue {
   user!: User
-
-  messageShow!: boolean
-  messageText!: string
-  showMessage!: CallableFunction
-  hideMessage!: CallableFunction
-
-  setMessage (show: boolean): void {
-    if (show) {
-      this.showMessage()
-    } else {
-      this.hideMessage()
-    }
-  }
 }
 </script>
 

src/plugins/axios.js

@@ -68,9 +68,9 @@ Vue.use(Plugin)
 export default Plugin
 
 function setAuthenticationHeader (headers) {
-  const accessToken = Store.getters['account/accessToken']
+  const accessToken = getAuthorizationHeaderValue()
   if (accessToken !== '') {
-    headers.Authorization = getAuthorizationHeaderValue(accessToken)
+    headers.Authorization = accessToken
   } else {
     delete headers.Authorization
   }

src/router/index.ts

@@ -213,3 +213,10 @@ const router = new VueRouter({
 })
 
 export default router
+
+export const noAuthenRoutes = [
+  'Login',
+  'Register',
+  'ResetPassword',
+  'NewPassword'
+]

src/utils/auth.ts

@@ -18,10 +18,11 @@ export function loadRefreshToken (): string {
 }
 
 export function getAuthorizationHeaderValue (accessToken?: string): string {
-  if (accessToken !== undefined) {
-    return `Bearer ${accessToken}`
+  const token = accessToken || loadAccessToken()
+  if (token === undefined || token === null || token === '') {
+    return ''
   } else {
-    return `Bearer ${loadAccessToken()}`
+    return `Bearer ${token}`
   }
 }
 

src/views/account/ChangePassword.vue

@@ -46,11 +46,18 @@
 
 <script lang="ts">
 import { Api } from '@/api'
-import { snakeCaseToCamelCase } from '@/utils'
+import { snakeCaseToCamelCase, unexpectedExc } from '@/utils'
 import { assertErrCode, status } from '@/utils/status-codes'
 import { Vue, Component } from 'vue-property-decorator'
+import { mapMutations } from 'vuex'
 
-@Component
+@Component({
+  methods: {
+    ...mapMutations('message', {
+      showMessage: 'SHOW_MESSAGE'
+    })
+  }
+})
 export default class ChangePassword extends Vue {
   // eslint-disable-next-line no-undef
   [key: string]: unknown
@@ -70,6 +77,7 @@ export default class ChangePassword extends Vue {
   showCurrentPassword = false
   showNewPassword = false
   loading = false
+  showMessage!: CallableFunction
 
   changePassword (): void {
     if (this.loading) return
@@ -80,6 +88,7 @@ export default class ChangePassword extends Vue {
       new_password: this.newPassword
     })
       .then(() => {
+        this.showMessage('Password changed.')
         this.$router.push({ name: 'MyInfo' })
       })
       .catch(err => {
@@ -91,6 +100,8 @@ export default class ChangePassword extends Vue {
           })
         } else if (assertErrCode(err, status.HTTP_403_FORBIDDEN)) {
           this.currentPasswordErrs = [err.response.data.detail]
+        } else {
+          unexpectedExc(err)
         }
       })
       .finally(() => {

src/views/auth/NewPassword.vue

@@ -45,14 +45,22 @@ import { Api } from '@/api'
 import { snakeCaseToCamelCase } from '@/utils'
 import { assertErrCode, status } from '@/utils/status-codes'
 import { Vue, Component } from 'vue-property-decorator'
+import { mapMutations } from 'vuex'
 
-@Component
+@Component({
+  methods: {
+    ...mapMutations('message', {
+      showMessage: 'SHOW_MESSAGE'
+    })
+  }
+})
 export default class NewPassword extends Vue {
   // eslint-disable-next-line no-undef
   [index: string]: unknown
 
   token = ''
   uid = ''
+  showMessage!: CallableFunction
 
   created (): void {
     this.token = (this.$route.query.token as string) || ''
@@ -74,6 +82,7 @@ export default class NewPassword extends Vue {
       password: this.password
     })
       .then(() => {
+        this.showMessage('Password reset completed. You can login with your new password.')
         this.$router.push({ name: 'Login' })
       })
       .catch(err => {

src/views/classroom/ClassroomExercisesReadingTeacher.vue

@@ -105,7 +105,7 @@ import { ReadingExercise } from '@/interfaces/reading-exercise'
 import { unexpectedExc } from '@/utils'
 import { PAGE_SIZE } from '@/utils/constants'
 import { Vue, Component } from 'vue-property-decorator'
-import { mapState } from 'vuex'
+import { mapMutations, mapState } from 'vuex'
 
 declare interface _Exercise extends ReadingExercise {
   isChosen: boolean
@@ -120,6 +120,11 @@ declare interface _Exercise extends ReadingExercise {
     ...mapState('classroom', {
       classroom: 'currentClassroom'
     })
+  },
+  methods: {
+    ...mapMutations('message', {
+      showMessage: 'SHOW_MESSAGE'
+    })
   }
 })
 export default class ClassroomExercisesReadingTeacher extends Vue {
@@ -133,6 +138,7 @@ export default class ClassroomExercisesReadingTeacher extends Vue {
   pagination!: PaginatedRes
   classroom!: Classroom
   page = 1
+  showMessage!: CallableFunction
 
   created (): void {
     this.setExercises()
@@ -180,6 +186,9 @@ export default class ClassroomExercisesReadingTeacher extends Vue {
     promises = promises.filter(promise => promise !== null)
 
     Promise.all(promises)
+      .then(() => {
+        this.showMessage('Exercises saved.')
+      })
       .catch(unexpectedExc)
       .finally(() => {
         this.saving = false

src/views/reading-exercise/ReadingExerciseDetail.vue

@@ -45,7 +45,10 @@
             </v-icon>
             Edit exercise
           </v-btn>
-          <div v-html="exercise.content"></div>
+          <div
+            v-html="exercise.content"
+            class="mt-1"
+          ></div>
         </v-col>
         <v-col
           cols="6"
@@ -147,8 +150,14 @@ import { Mixins, Component } from 'vue-property-decorator'
 import { ReadingExerciseMixin } from '@/mixins/reading-exercise-mixin'
 import { unexpectedExc } from '@/utils'
 import KLDialogConfirm from '@/components/KLDialogConfirm.vue'
+import { mapMutations } from 'vuex'
 
 @Component({
+  methods: {
+    ...mapMutations('message', {
+      showMessage: 'SHOW_MESSAGE'
+    })
+  },
   components: {
     KLDialogConfirm
   }
@@ -184,13 +193,15 @@ export default class ReadingExerciseDetail extends Mixins(ReadingExerciseMixin)
    */
   confirmDelete = false
   deleting = false
+  showMessage!: CallableFunction
 
   deleteExercise (): void {
     if (this.deleting) return
     this.deleting = true
 
     this.$store.dispatch('readingExercise/delete', this.exercise.pk)
       .then(() => {
+        this.showMessage('Exercise deleted.')
         this.$router.push({ name: 'ReadingExerciseList' })
       })
       .catch(unexpectedExc)