cleanup code

src/Frontend/src/components/AuthenticatedAccount.vue

@@ -3,7 +3,9 @@ import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 
 import { tokenHelper } from '../helpers/tokenHelper'
+import { AuthenticationHelper } from '../helpers/authenticationHelper'
 
+const authenticationHelper = new AuthenticationHelper()
 const Router = useRouter()
 
 const tokenInfo = computed(() => {
@@ -17,7 +19,7 @@ const tokenInfo = computed(() => {
 })
 
 async function logout () {
-  tokenHelper.removeToken()
+  authenticationHelper.logout()
   await Router.push('/login')
 }
 

src/Frontend/src/components/MfaConfigurationBox.vue

@@ -2,32 +2,34 @@
 import { ref, onMounted } from 'vue'
 import { useQuasar, QStepper } from 'quasar'
 
-import { apiHelper } from '../helpers/apiHelper'
+import { MfaHelper } from '../helpers/mfaHelper'
 
 import { instanceOfMfaError } from 'src/models/MfaResponse'
 import { MfaError } from 'src/models/MfaError'
 import { MfaInformation } from 'src/models/MfaInformation'
 
 const $q = useQuasar()
 
+const mfaHelper = new MfaHelper()
+
 const step = ref(1)
 const stepper = ref<QStepper>()
 const mfa = ref<MfaInformation>()
 const token = ref('')
 const processing = ref(false)
 
 onMounted(async () => {
-  await getMfaStatus()
+  await getStatus()
 })
 
-async function getMfaStatus () {
-  mfa.value = await apiHelper.mfaInfo()
+async function getStatus () {
+  mfa.value = await mfaHelper.getStatus()
 }
 
 async function activate () {
   try {
     processing.value = true
-    const mfaResponse = await apiHelper.mfaActivate(token.value)
+    const mfaResponse = await mfaHelper.activate(token.value)
 
     if (instanceOfMfaError(mfaResponse)) {
       $q.notify({
@@ -40,7 +42,7 @@ async function activate () {
   } finally {
     processing.value = false
 
-    await getMfaStatus()
+    await getStatus()
 
     token.value = ''
     step.value = 1
@@ -50,7 +52,7 @@ async function activate () {
 async function deactivate () {
   try {
     processing.value = true
-    const mfaResponse = await apiHelper.mfaDeactivate(token.value)
+    const mfaResponse = await mfaHelper.deactivate(token.value)
 
     if (instanceOfMfaError(mfaResponse)) {
       $q.notify({
@@ -65,7 +67,7 @@ async function deactivate () {
   } finally {
     processing.value = false
   }
-  await getMfaStatus()
+  await getStatus()
 }
 
 async function stepperNext () {

src/Frontend/src/helpers/authenticationHelper.ts

@@ -25,7 +25,7 @@ export class AuthenticationHelper {
 
     if (response.status === 200) {
       const authenticationResponse = await response.json() as AuthenticationResponse
-      tokenHelper.setToken(authenticationResponse)
+      tokenHelper.setToken(authenticationResponse.token)
 
       this.mfaIdentifier = undefined
 
@@ -47,7 +47,7 @@ export class AuthenticationHelper {
 
     if (response.status === 200) {
       const authenticationResponse = await response.json() as AuthenticationResponse
-      tokenHelper.setToken(authenticationResponse)
+      tokenHelper.setToken(authenticationResponse.token)
 
       return LoginAction.Forward
     }
@@ -69,4 +69,8 @@ export class AuthenticationHelper {
 
     return LoginAction.ClearPassword
   }
+
+  logout () {
+    tokenHelper.removeToken()
+  }
 }

src/Frontend/src/helpers/mfaHelper.ts

@@ -0,0 +1,65 @@
+const apiBaseUrl = process.env.NODE_ENV === 'development' ? '/api/v1/' : '/auth/api/v1/'
+
+import { MfaError } from 'src/models/MfaError'
+import { MfaSuccess } from 'src/models/MfaSuccess'
+import { MfaResponse } from 'src/models/MfaResponse'
+import { MfaInformation } from 'src/models/MfaInformation'
+
+import { tokenHelper } from './tokenHelper'
+
+export class MfaHelper {
+  async getStatus () : Promise<MfaInformation> {
+    const token = tokenHelper.getToken()
+
+    const response = await fetch(`${apiBaseUrl}UserAccount/Mfa`, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+        'Content-Type': 'application/json'
+      }
+    })
+
+    return await response.json() as MfaInformation
+  }
+
+  async activate (mfaToken: string) : Promise<MfaResponse> {
+    const token = tokenHelper.getToken()
+
+    const response = await fetch(`${apiBaseUrl}UserAccount/Mfa/Activate`, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${token}`,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        token: mfaToken
+      })
+    })
+
+    if (response.status === 204) {
+      return { success: true } as MfaSuccess
+    }
+
+    return await response.json() as MfaError
+  }
+
+  async deactivate (mfaToken: string) : Promise<MfaResponse> {
+    const token = tokenHelper.getToken()
+
+    const response = await fetch(`${apiBaseUrl}UserAccount/Mfa/Deactivate`, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${token}`,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        token: mfaToken
+      })
+    })
+
+    if (response.status === 204) {
+      return { success: true } as MfaSuccess
+    }
+
+    return await response.json() as MfaError
+  }
+}

src/Frontend/src/helpers/tokenHelper.ts

@@ -1,6 +1,5 @@
 import { date, LocalStorage } from 'quasar'
 
-import { AuthenticationResponse } from 'src/models/AuthenticationResponse'
 import { TokenInfo } from 'src/models/TokenInfo'
 
 const authenticationTokenKey = 'authenticationToken'
@@ -9,8 +8,8 @@ function getToken () : string | null {
   return LocalStorage.getItem<string>(authenticationTokenKey)
 }
 
-function setToken (authenticationResponse : AuthenticationResponse) {
-  LocalStorage.set(authenticationTokenKey, authenticationResponse.token)
+function setToken (token : string) {
+  LocalStorage.set(authenticationTokenKey, token)
 }
 
 function removeToken () {

src/Frontend/src/pages/AccountPage.vue

@@ -7,7 +7,7 @@ import MfaConfigurationBox from '../components/MfaConfigurationBox.vue'
 
 <template>
   <q-page padding>
-    <h1>Account</h1>
+    <h1>My Account</h1>
 
     <div class="row q-col-gutter-xl">
       <div class="col-12 col-md-5 col-lg-4">

src/Frontend/src/pages/LoginPage.vue

@@ -13,10 +13,10 @@ const $q = useQuasar()
 const Router = useRouter()
 
 const loading = ref(false)
-const oneTimePasswordRequired = ref(false)
-const totpToken = ref<undefined | string>(undefined)
 const emailAddress = ref('')
 const password = ref('')
+const oneTimePasswordRequired = ref(false)
+const totpToken = ref<undefined | string>(undefined)
 
 async function login () {
   loading.value = true
@@ -96,7 +96,7 @@ async function tokenLogin () {
               class="q-pa-lg shadow-1"
             >
               <template v-if="oneTimePasswordRequired">
-                <q-form @submit.prevent="tokenLogin">
+                <q-form @submit.prevent="tokenLogin()">
                   <q-card-section class="q-gutter-md">
                     <q-input
                       v-model="totpToken"
@@ -120,7 +120,7 @@ async function tokenLogin () {
                 </q-form>
               </template>
               <template v-else>
-                <q-form @submit.prevent="login">
+                <q-form @submit.prevent="login()">
                   <q-card-section class="q-gutter-md">
                     <q-input
                       v-model="emailAddress"