From 6ae44f5f3b2b9842251141e66a796559ed8686a4 Mon Sep 17 00:00:00 2001
From: Erwan Dano <erwan@Transmit-ErwanD-Remote-NEW-2.local>
Date: Mon, 25 Mar 2024 17:12:42 +0100
Subject: [PATCH] Format and lint, remove unecessary files

---
 src/App.vue                                   |  76 +++---
 src/assets/google-material.css                |   4 +-
 src/assets/main.css                           |   4 +-
 src/assets/style.css                          |   4 +-
 src/components/FooterSection.vue              |  15 +-
 src/components/NavbarSection.vue              |  35 ++-
 src/components/NotFoundPage.vue               |  18 +-
 src/components/account/AccountMenu.vue        |  30 ++-
 src/components/account/AccountMenuButton.vue  |  35 +--
 .../account/AccountSettingsView.vue           |  76 +++---
 src/components/account/ConfirmationDialog.vue |  29 ++-
 src/components/account/ProfileView.vue        | 190 ++++++++------
 .../account/VerifiableInformation.vue         |  31 ++-
 src/components/bank/BankHomeLoggedOut.vue     |  24 +-
 src/components/bank/BankTransferSelection.vue | 179 --------------
 .../bank/BankTransferValidation.vue           | 136 -----------
 .../bank/BeneficiarySelection copy.vue        |  44 ----
 src/components/icons/FaceIdIcon.vue           |   8 +-
 src/components/icons/TouchIdIcon.vue          |   8 +-
 src/components/logo/LogoOnBase.vue            |   2 +-
 src/components/logo/LogoOnPrimary.vue         |   2 +-
 src/composables/baseInput.ts                  | 105 ++++----
 src/e2e/vue.spec.ts                           |  10 +-
 src/experimental.d.ts                         |  38 +--
 src/helpers/account.ts                        |   8 +-
 src/helpers/errors.ts                         |  22 +-
 src/helpers/i18n.ts                           |  46 ++--
 src/helpers/mobile.ts                         |  14 +-
 src/helpers/risk.ts                           |  28 +--
 src/helpers/session.ts                        |  83 ++++---
 src/helpers/tsErrors.ts                       |  62 +++--
 src/helpers/tsSdk.ts                          |  50 ++--
 src/helpers/validationRules.ts                | 111 ++++++---
 src/main.ts                                   |  44 ++--
 src/plugins/themeManager/README.md            |  42 ++--
 src/plugins/themeManager/index.ts             | 183 +++++++-------
 src/plugins/themeManager/reactives.ts         |  20 +-
 src/router/account.ts                         |  56 ++---
 src/router/authentication.ts                  |  14 +-
 src/router/bank.ts                            |  14 +-
 src/router/home.ts                            |  20 +-
 src/router/index.ts                           |  62 ++---
 src/scripts/log-help.js                       |  65 ++---
 src/store/dto/UserSignupDto.ts                |  28 +--
 src/store/userPreferences.ts                  |  16 +-
 src/store/userSession.ts                      | 231 ++++++++++--------
 src/tsIdo.d.ts                                |  60 ++---
 src/tsPlatform.d.ts                           |  26 +-
 src/tsPlatform.errors.d.ts                    |  28 +--
 src/tsWebauthn.d.ts                           | 148 +++++------
 src/views/AccountView.vue                     |  28 +--
 src/views/HomeView.vue                        |  14 +-
 src/views/NotFoundView.vue                    |   6 +-
 src/views/SignupView.vue                      | 168 +++++++------
 src/views/ThemeView.vue                       | 183 ++++++++++----
 src/views/bank/BankTransferSelectionView.vue  | 119 +++++----
 src/views/bank/BankTransferValidationView.vue |  78 +++---
 src/views/webauthn/WebauthnRegistration.vue   | 116 +++++----
 .../webauthn/WebauthnRegistrationSuccess.vue  |  37 +--
 src/vite-env.d.ts                             |  50 ++--
 src/vitestSetup.ts                            |   2 +-
 61 files changed, 1719 insertions(+), 1666 deletions(-)
 delete mode 100644 src/components/bank/BankTransferSelection.vue
 delete mode 100644 src/components/bank/BankTransferValidation.vue
 delete mode 100644 src/components/bank/BeneficiarySelection copy.vue

diff --git a/src/App.vue b/src/App.vue
index 7581394..6d4f0b6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,62 +1,66 @@
 <script setup lang="ts">
-import NavbarSection from '@/components/NavbarSection.vue'
-import { onBeforeMount, onMounted } from 'vue'
-import { userPreferenceStore } from './store/userPreferences'
-import { useI18n } from 'vue-i18n'
-import { RouterView } from 'vue-router'
-import { type DaisyThemes, useThemeManager, daisyThemes } from '@/plugins/themeManager'
-import * as tsSdk from './helpers/tsSdk'
-import { ref } from 'vue'
-import { loadSession } from './helpers/session'
+import NavbarSection from "@/components/NavbarSection.vue";
+import { onBeforeMount, onMounted } from "vue";
+import { userPreferenceStore } from "./store/userPreferences";
+import { useI18n } from "vue-i18n";
+import { RouterView } from "vue-router";
+import {
+  type DaisyThemes,
+  useThemeManager,
+  daisyThemes,
+} from "@/plugins/themeManager";
+import * as tsSdk from "./helpers/tsSdk";
+import { ref } from "vue";
+import { loadSession } from "./helpers/session";
 
-const preference = userPreferenceStore()
-const i18n = useI18n()
-const $theme = useThemeManager()
-const platformLoading = ref(true)
-const sessionLoading = ref(true)
+const preference = userPreferenceStore();
+const i18n = useI18n();
+const $theme = useThemeManager();
+const platformLoading = ref(true);
+const sessionLoading = ref(true);
 
 onBeforeMount(() => {
   // Add a script tag to the page to download the ts-platform sdk
   // https://developer.transmitsecurity.com/guides/risk/quick_start_web/#step-2-load-sdk
-  const platformScript = document.createElement('script')
-  platformScript.src = import.meta.env.VITE_PLATFORM_SDK_URL
-  platformScript.defer = true
-  platformScript.id = 'ts-platform-script'
-  document.head.appendChild(platformScript)
+  const platformScript = document.createElement("script");
+  platformScript.src = import.meta.env.VITE_PLATFORM_SDK_URL;
+  platformScript.defer = true;
+  platformScript.id = "ts-platform-script";
+  document.head.appendChild(platformScript);
 
   // Then, initialize the ts-platform sdk
-  tsSdk.initWhenLoaded()
+  tsSdk.initWhenLoaded();
 
   // The ts platform SDK is not loaded yet, we need to wait
   // for it to be loaded and then initialize the app
   // this is necessary to perform a silent risk based user authentication
-  document.addEventListener('tsPlatformLoaded', async function (e) {
-    platformLoading.value = false
-    await loadSession()
+  document.addEventListener("tsPlatformLoaded", async function (e) {
+    platformLoading.value = false;
+    await loadSession();
 
     // Dispatch an event indicating that the session was loaded
     // when the session is loaded the app is displayed
-    const event = new CustomEvent('sessionLoaded')
-    document.dispatchEvent(event)
-    console.log('Session loading attempt done')
-  })
+    const event = new CustomEvent("sessionLoaded");
+    document.dispatchEvent(event);
+    console.log("Session loading attempt done");
+  });
 
   // The session is not loaded yet, we need to wait
   // this is necessary to perform a silent risk based user authentication
-  document.addEventListener('sessionLoaded', function (e) {
-    sessionLoading.value = false
-  })
-})
+  document.addEventListener("sessionLoaded", function (e) {
+    sessionLoading.value = false;
+  });
+});
 
 onMounted(() => {
   // Set the language based on saved preferences
-  if (preference.language !== '' && i18n.locale.value !== preference.language)
-    i18n.locale.value = preference.language
+  if (preference.language !== "" && i18n.locale.value !== preference.language)
+    i18n.locale.value = preference.language;
 
   // Set the theme based on the .env configuration or saved preferences
-  const theme = preference.theme || import.meta.env.VITE_THEME || 'breeze'
-  $theme.set(theme as DaisyThemes)
-})
+  const theme = preference.theme || import.meta.env.VITE_THEME || "breeze";
+  $theme.set(theme as DaisyThemes);
+});
 </script>
 
 <template>
diff --git a/src/assets/google-material.css b/src/assets/google-material.css
index 64ee2ef..3b21c8a 100644
--- a/src/assets/google-material.css
+++ b/src/assets/google-material.css
@@ -1,5 +1,5 @@
 .material-icons {
-  font-family: 'Material Icons';
+  font-family: "Material Icons";
   font-weight: normal;
   font-style: normal;
   font-size: 24px; /* Preferred icon size */
@@ -20,5 +20,5 @@
   -moz-osx-font-smoothing: grayscale;
 
   /* Support for IE. */
-  font-feature-settings: 'liga';
+  font-feature-settings: "liga";
 }
diff --git a/src/assets/main.css b/src/assets/main.css
index c50e063..784f8c5 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,5 +1,5 @@
-@import './base.css';
-@import './google-material.css';
+@import "./base.css";
+@import "./google-material.css";
 
 #app {
   max-width: 1280px;
diff --git a/src/assets/style.css b/src/assets/style.css
index d298df0..4ee2bd7 100644
--- a/src/assets/style.css
+++ b/src/assets/style.css
@@ -66,7 +66,7 @@ html {
 /* Lines - steps visited */
 .steps.shop-steps li.step.step-primary:before {
   /* Display first line */
-  content: ' ' !important;
+  content: " " !important;
   --tw-bg-opacity: 1;
   background-color: hsl(var(--p) / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
@@ -78,7 +78,7 @@ html {
 
 .steps.shop-steps li.step.step-primary:first-child:before {
   /* Display first line */
-  content: ' ' !important;
+  content: " " !important;
   --tw-bg-opacity: 1;
   background-color: hsl(var(--p) / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
diff --git a/src/components/FooterSection.vue b/src/components/FooterSection.vue
index 4f74081..a744073 100644
--- a/src/components/FooterSection.vue
+++ b/src/components/FooterSection.vue
@@ -1,17 +1,20 @@
 <script setup lang="ts">
-import LogoOnPrimary from '@/components/logo/LogoOnPrimary.vue'
+import LogoOnPrimary from "@/components/logo/LogoOnPrimary.vue";
 </script>
 <template>
   <footer class="bg-primary text-primary-content">
-    <div class="container px-6 py-8 mx-auto space-y-8 md:space-y-0 md:flex md:justify-between">
+    <div
+      class="container px-6 py-8 mx-auto space-y-8 md:space-y-0 md:flex md:justify-between"
+    >
       <div>
         <a class="flex flex-start" href="#">
           <logo-on-primary />
         </a>
 
         <p class="max-w-lg mt-6 leading-relaxed">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt voluptatum amet
-          molestiae consequatur quam velit sint modi aut illo dolorem.
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt
+          voluptatum amet molestiae consequatur quam velit sint modi aut illo
+          dolorem.
         </p>
       </div>
 
@@ -124,7 +127,9 @@ import LogoOnPrimary from '@/components/logo/LogoOnPrimary.vue'
       </div>
     </div>
 
-    <p class="w-full py-6 mx-auto text-primary-content text-center bg-primary-focus">
+    <p
+      class="w-full py-6 mx-auto text-primary-content text-center bg-primary-focus"
+    >
       &copy; 2023 Acme. All rights reserved.
     </p>
   </footer>
diff --git a/src/components/NavbarSection.vue b/src/components/NavbarSection.vue
index 20274b2..cce6d96 100644
--- a/src/components/NavbarSection.vue
+++ b/src/components/NavbarSection.vue
@@ -1,14 +1,18 @@
 <script setup lang="ts">
-import { MagnifyingGlassIcon, BellIcon, ArrowLeftOnRectangleIcon } from '@heroicons/vue/24/outline'
-import { UserCircleIcon } from '@heroicons/vue/24/solid'
-import { userSessionStore } from '@/store/userSession'
-import { logout } from '@/helpers/session'
-import LogoOnBase from './logo/LogoOnBase.vue'
-import { storeToRefs } from 'pinia'
+import {
+  MagnifyingGlassIcon,
+  BellIcon,
+  ArrowLeftOnRectangleIcon,
+} from "@heroicons/vue/24/outline";
+import { UserCircleIcon } from "@heroicons/vue/24/solid";
+import { userSessionStore } from "@/store/userSession";
+import { logout } from "@/helpers/session";
+import LogoOnBase from "./logo/LogoOnBase.vue";
+import { storeToRefs } from "pinia";
 
-const userSession = userSessionStore()
-const userSessionRefs = storeToRefs(userSession)
-const { fullName } = userSessionRefs
+const userSession = userSessionStore();
+const userSessionRefs = storeToRefs(userSession);
+const { fullName } = userSessionRefs;
 </script>
 <template>
   <div class="navbar bg-base-200 text-base-content">
@@ -36,7 +40,9 @@ const { fullName } = userSessionRefs
 
       <!-- Login button or profile dropdown -->
       <div v-if="!userSession.isAuthenticated" class="pr-4">
-        <router-link :to="{ name: 'login' }">{{ $t('authentication.login') }}</router-link>
+        <router-link :to="{ name: 'login' }">{{
+          $t("authentication.login")
+        }}</router-link>
       </div>
       <div class="dropdown dropdown-end min-w-max" v-else>
         <label tabindex="0" class="btn btn-ghost btn-circle avatar">
@@ -50,14 +56,17 @@ const { fullName } = userSessionRefs
             {{ fullName }}
           </li>
           <li>
-            <router-link :to="{ name: 'accountProfile' }" class="justify-between pr-24">
-              {{ $t('menu.profile') }}
+            <router-link
+              :to="{ name: 'accountProfile' }"
+              class="justify-between pr-24"
+            >
+              {{ $t("menu.profile") }}
             </router-link>
           </li>
           <li>
             <a @click="logout"
               ><arrow-left-on-rectangle-icon class="w-4 h-4" />
-              <span>{{ $t('authentication.logout') }}</span>
+              <span>{{ $t("authentication.logout") }}</span>
             </a>
           </li>
         </ul>
diff --git a/src/components/NotFoundPage.vue b/src/components/NotFoundPage.vue
index b1be8ec..fceb522 100644
--- a/src/components/NotFoundPage.vue
+++ b/src/components/NotFoundPage.vue
@@ -1,13 +1,21 @@
 <template>
-  <main class="min-h-screen w-full flex flex-col justify-center items-center bg-base-100 not-found">
-    <h1 class="text-9xl font-extrabold text-base-content tracking-widest">404</h1>
-    <div class="px-2 text-sm rounded rotate-12 absolute bg-error text-error-content">
+  <main
+    class="min-h-screen w-full flex flex-col justify-center items-center bg-base-100 not-found"
+  >
+    <h1 class="text-9xl font-extrabold text-base-content tracking-widest">
+      404
+    </h1>
+    <div
+      class="px-2 text-sm rounded rotate-12 absolute bg-error text-error-content"
+    >
       <slot>
-        {{ $t('global.pageNotFound') }}
+        {{ $t("global.pageNotFound") }}
       </slot>
     </div>
     <button class="mt-5 px-8 btn btn-primary">
-      <router-link :to="{ name: 'home' }">{{ $t('global.goHome') }}</router-link>
+      <router-link :to="{ name: 'home' }">{{
+        $t("global.goHome")
+      }}</router-link>
     </button>
   </main>
 </template>
diff --git a/src/components/account/AccountMenu.vue b/src/components/account/AccountMenu.vue
index eb4430f..c730c81 100644
--- a/src/components/account/AccountMenu.vue
+++ b/src/components/account/AccountMenu.vue
@@ -5,22 +5,30 @@
  *
  * Lists the different sub menus the user can access
  */
-import { UserCircleIcon, Cog8ToothIcon } from '@heroicons/vue/24/outline'
+import { UserCircleIcon, Cog8ToothIcon } from "@heroicons/vue/24/outline";
 
-import AccountMenuButton from '@/components/account/AccountMenuButton.vue'
-import { useRoute } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import { ref } from 'vue'
+import AccountMenuButton from "@/components/account/AccountMenuButton.vue";
+import { useRoute } from "vue-router";
+import { useI18n } from "vue-i18n";
+import { ref } from "vue";
 
-const { t } = useI18n()
-const route = useRoute()
+const { t } = useI18n();
+const route = useRoute();
 const menuRoutes = ref([
-  { title: t('menu.profile'), icon: UserCircleIcon, routeName: 'accountProfile' },
-  { title: t('menu.account'), icon: Cog8ToothIcon, routeName: 'accountSettings' },
-])
+  {
+    title: t("menu.profile"),
+    icon: UserCircleIcon,
+    routeName: "accountProfile",
+  },
+  {
+    title: t("menu.account"),
+    icon: Cog8ToothIcon,
+    routeName: "accountSettings",
+  },
+]);
 
 function accountRouteSelected(routeName: string) {
-  return route.name === routeName
+  return route.name === routeName;
 }
 </script>
 <template>
diff --git a/src/components/account/AccountMenuButton.vue b/src/components/account/AccountMenuButton.vue
index 6b6a35f..f5ba427 100644
--- a/src/components/account/AccountMenuButton.vue
+++ b/src/components/account/AccountMenuButton.vue
@@ -2,34 +2,35 @@
 /**
  * Link to a sub menu, used in the AccountMenu component
  */
-import { computed, toRefs } from 'vue'
-import type { FunctionalComponent, HTMLAttributes, VNodeProps } from 'vue'
+import { computed, toRefs } from "vue";
+import type { FunctionalComponent, HTMLAttributes, VNodeProps } from "vue";
 
 const props = withDefaults(
   defineProps<{
-    title: string
-    icon: FunctionalComponent<HTMLAttributes & VNodeProps, {}, any>
-    routeName: string
-    selected?: boolean
+    title: string;
+    icon: FunctionalComponent<HTMLAttributes & VNodeProps, {}, any>;
+    routeName: string;
+    selected?: boolean;
   }>(),
-  { selected: false },
-)
+  { selected: false }
+);
 
-const { title, icon, selected, routeName } = toRefs(props)
+const { title, icon, selected, routeName } = toRefs(props);
 
 const selectedLinkClass =
-  'bg-primary/5 border-primary-focus text-primary hover:bg-primary/10 hover:text-primary-focus'
-const normalLinkClass = 'text-base-content/50 hover:bg-base-200 hover:text-base-content/70'
-const selectedIconClass = 'group-hover:text-primary-focus'
-const normalIconClass = 'text-base-content/50 group-hover:text-base-content/70'
+  "bg-primary/5 border-primary-focus text-primary hover:bg-primary/10 hover:text-primary-focus";
+const normalLinkClass =
+  "text-base-content/50 hover:bg-base-200 hover:text-base-content/70";
+const selectedIconClass = "group-hover:text-primary-focus";
+const normalIconClass = "text-base-content/50 group-hover:text-base-content/70";
 
 const linkClass = computed(() => {
-  return selected.value ? selectedLinkClass : normalLinkClass
-})
+  return selected.value ? selectedLinkClass : normalLinkClass;
+});
 
 const iconClass = computed(() => {
-  return selected.value ? selectedIconClass : normalIconClass
-})
+  return selected.value ? selectedIconClass : normalIconClass;
+});
 </script>
 <template>
   <router-link
diff --git a/src/components/account/AccountSettingsView.vue b/src/components/account/AccountSettingsView.vue
index e6a944f..7e20f1f 100644
--- a/src/components/account/AccountSettingsView.vue
+++ b/src/components/account/AccountSettingsView.vue
@@ -1,43 +1,43 @@
 <script setup lang="ts">
-import '@vuepic/vue-datepicker/dist/main.css'
+import "@vuepic/vue-datepicker/dist/main.css";
 
-import { ref } from 'vue'
-import { userSessionStore } from '@/store/userSession'
-import { UserApi } from '@transmitsecurity-dev/ts-demo-client-lib'
+import { ref } from "vue";
+import { userSessionStore } from "@/store/userSession";
+import { UserApi } from "@transmitsecurity-dev/ts-demo-client-lib";
 
-import { storeToRefs } from 'pinia'
-import ConfirmationDialog from './ConfirmationDialog.vue'
-import router from '@/router'
-import { clearSession } from '@/helpers/session'
-import { handleError } from '@/helpers/errors'
+import { storeToRefs } from "pinia";
+import ConfirmationDialog from "./ConfirmationDialog.vue";
+import router from "@/router";
+import { clearSession } from "@/helpers/session";
+import { handleError } from "@/helpers/errors";
 
-const userApi = new UserApi(undefined, import.meta.env.VITE_BACKEND_URL)
+const userApi = new UserApi(undefined, import.meta.env.VITE_BACKEND_URL);
 
-const sessionStore = userSessionStore()
-const sessionStoreRefs = storeToRefs(sessionStore)
+const sessionStore = userSessionStore();
+const sessionStoreRefs = storeToRefs(sessionStore);
 
 // Personal information
-const { creationDate, firstName } = sessionStoreRefs
-const showConfirmationDialog = ref(false)
-const loading = ref(false)
+const { creationDate, firstName } = sessionStoreRefs;
+const showConfirmationDialog = ref(false);
+const loading = ref(false);
 async function deleteAccount() {
   try {
-    console.log('Deleting account')
-    loading.value = true
-    const result = await userApi.remove()
-    loading.value = false
-    console.log(result)
-    showConfirmationDialog.value = false
+    console.log("Deleting account");
+    loading.value = true;
+    const result = await userApi.remove();
+    loading.value = false;
+    console.log(result);
+    showConfirmationDialog.value = false;
     if (result.status == 204) {
-      clearSession()
-      const event = new CustomEvent('userLoggedOut')
-      document.dispatchEvent(event)
-      router.push({ name: 'home' })
+      clearSession();
+      const event = new CustomEvent("userLoggedOut");
+      document.dispatchEvent(event);
+      router.push({ name: "home" });
     }
   } catch (error) {
-    handleError(error)
+    handleError(error);
   } finally {
-    loading.value = false
+    loading.value = false;
   }
 }
 </script>
@@ -48,18 +48,21 @@ async function deleteAccount() {
       @cancel="showConfirmationDialog = false"
       @confirm="deleteAccount"
     >
-      {{ $t('account.deletionConfirmationMessage') }}
+      {{ $t("account.deletionConfirmationMessage") }}
     </ConfirmationDialog>
     <div class="py-6 px-4 sm:p-6 lg:pb-8">
       <div>
         <h2 class="text-lg leading-6 font-medium text-base-content">
-          {{ $t('account.yourAccount') }}
+          {{ $t("account.yourAccount") }}
         </h2>
-        <p class="mt-1 text-sm text-base-content/60">{{ $t('account.reviewYourSettings') }}</p>
+        <p class="mt-1 text-sm text-base-content/60">
+          {{ $t("account.reviewYourSettings") }}
+        </p>
       </div>
 
       <div class="mt-8">
-        Hi {{ firstName }}, you have been with us since {{ creationDate.toDateString() }}!
+        Hi {{ firstName }}, you have been with us since
+        {{ creationDate.toDateString() }}!
       </div>
     </div>
 
@@ -67,16 +70,19 @@ async function deleteAccount() {
       <div class="px-4 sm:px-6">
         <div>
           <h2 class="text-lg leading-6 font-medium text-base-content">
-            {{ $t('account.deleteYourAccount') }}
+            {{ $t("account.deleteYourAccount") }}
           </h2>
           <p class="mt-1 text-sm text-base-content/60">
-            {{ $t('account.permanentlyDeleteYourAccount') }}
+            {{ $t("account.permanentlyDeleteYourAccount") }}
           </p>
         </div>
 
         <div class="flex justify-end mt-12">
-          <button class="btn btn-error btn-sm" @click="showConfirmationDialog = true">
-            {{ $t('account.deleteYourAccount') }}
+          <button
+            class="btn btn-error btn-sm"
+            @click="showConfirmationDialog = true"
+          >
+            {{ $t("account.deleteYourAccount") }}
           </button>
         </div>
       </div>
diff --git a/src/components/account/ConfirmationDialog.vue b/src/components/account/ConfirmationDialog.vue
index 911169f..6f293a9 100644
--- a/src/components/account/ConfirmationDialog.vue
+++ b/src/components/account/ConfirmationDialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { toRefs } from 'vue'
+import { toRefs } from "vue";
 import {
   TransitionRoot,
   TransitionChild,
@@ -7,14 +7,14 @@ import {
   DialogPanel,
   DialogTitle,
   DialogDescription,
-} from '@headlessui/vue'
+} from "@headlessui/vue";
 
 const props = defineProps<{
-  isOpen: boolean
-}>()
+  isOpen: boolean;
+}>();
 
-const { isOpen } = toRefs(props)
-const emits = defineEmits(['cancel', 'confirm'])
+const { isOpen } = toRefs(props);
+const emits = defineEmits(["cancel", "confirm"]);
 </script>
 <template>
   <TransitionRoot appear :show="isOpen" as="template">
@@ -32,7 +32,9 @@ const emits = defineEmits(['cancel', 'confirm'])
       </TransitionChild>
 
       <div class="fixed inset-0 overflow-y-auto">
-        <div class="flex min-h-full items-center justify-center p-4 text-center">
+        <div
+          class="flex min-h-full items-center justify-center p-4 text-center"
+        >
           <TransitionChild
             as="template"
             enter="duration-300 ease-out"
@@ -45,16 +47,21 @@ const emits = defineEmits(['cancel', 'confirm'])
             <DialogPanel
               class="w-full max-w-md transform overflow-hidden rounded-box bg-base-100 text-base-content p-6 text-left align-middle shadow-xl transition-all"
             >
-              <DialogTitle class="mb-8">{{ $t('global.areYouSure') }}</DialogTitle>
+              <DialogTitle class="mb-8">{{
+                $t("global.areYouSure")
+              }}</DialogTitle>
               <DialogDescription>
                 <slot> This operation cannot be undone. </slot>
               </DialogDescription>
               <div class="flex justify-around mt-8">
-                <button class="btn btn-ghost border-primary border-2" @click="$emit('cancel')">
-                  {{ $t('global.cancel') }}
+                <button
+                  class="btn btn-ghost border-primary border-2"
+                  @click="$emit('cancel')"
+                >
+                  {{ $t("global.cancel") }}
                 </button>
                 <button class="btn btn-primary" @click="$emit('confirm')">
-                  {{ $t('global.confirm') }}
+                  {{ $t("global.confirm") }}
                 </button>
               </div>
             </DialogPanel>
diff --git a/src/components/account/ProfileView.vue b/src/components/account/ProfileView.vue
index efa5957..a11765b 100644
--- a/src/components/account/ProfileView.vue
+++ b/src/components/account/ProfileView.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import UserInput from '../inputs/UserInput.vue'
-import VerifiableInformation from './VerifiableInformation.vue'
-import Datepicker from '@vuepic/vue-datepicker'
-import '@vuepic/vue-datepicker/dist/main.css'
+import UserInput from "../inputs/UserInput.vue";
+import VerifiableInformation from "./VerifiableInformation.vue";
+import Datepicker from "@vuepic/vue-datepicker";
+import "@vuepic/vue-datepicker/dist/main.css";
 
 import {
   firstNameRule,
@@ -11,84 +11,84 @@ import {
   streetRule,
   countryRule,
   zipCodeRule,
-} from '@/helpers/validationRules'
-import { ref } from 'vue'
-import useVuelidate from '@vuelidate/core'
-import { userSessionStore } from '@/store/userSession'
-import { useToast } from 'vue-toastification'
+} from "@/helpers/validationRules";
+import { ref } from "vue";
+import useVuelidate from "@vuelidate/core";
+import { userSessionStore } from "@/store/userSession";
+import { useToast } from "vue-toastification";
 
-const toast = useToast()
+const toast = useToast();
 
-const sessionStore = userSessionStore()
+const sessionStore = userSessionStore();
 
 // Loading indicators
-const updatePersonalInformationLoading = ref(false)
-const updateAddressLoading = ref(false)
+const updatePersonalInformationLoading = ref(false);
+const updateAddressLoading = ref(false);
 
 // Personal information
-const firstName = ref(sessionStore.firstName)
-const lastName = ref(sessionStore.lastName)
-const birthday = ref(sessionStore.birthday)
+const firstName = ref(sessionStore.firstName);
+const lastName = ref(sessionStore.lastName);
+const birthday = ref(sessionStore.birthday);
 
 // Contact information
-const email = ref(sessionStore.email)
-const phone = ref(sessionStore.phone)
-const emailVerified = ref(sessionStore.emailVerified)
-const phoneVerified = ref(sessionStore.phoneVerified)
+const email = ref(sessionStore.email);
+const phone = ref(sessionStore.phone);
+const emailVerified = ref(sessionStore.emailVerified);
+const phoneVerified = ref(sessionStore.phoneVerified);
 
 // Postal address
-const address = sessionStore.address
-const street = ref(address.street_address || '')
-const city = ref(address.city || '')
-const postalCode = ref(address.postal_code || '')
-const country = ref(address.country || '')
+const address = sessionStore.address;
+const street = ref(address.street_address || "");
+const city = ref(address.city || "");
+const postalCode = ref(address.postal_code || "");
+const country = ref(address.country || "");
 
 const personalInfoValidationRules = {
   firstName: firstNameRule(),
   lastName: lastNameRule(),
-}
+};
 
 const postalAddressValidationRules = {
   street: streetRule(),
   city: cityRule(),
   postalCode: zipCodeRule(),
   country: countryRule(),
-}
+};
 
 const vPersonalInfo$ = useVuelidate(personalInfoValidationRules, {
   firstName,
   lastName,
-})
+});
 
 const vPostalAddress$ = useVuelidate(postalAddressValidationRules, {
   street,
   city,
   postalCode,
   country,
-})
+});
 
 /**
  * Update the user first name, last name and birthday
  */
 async function updatePersonalInformation() {
-  const formattedDate = birthday.value ? birthday.value.toJSON() : null
-  const isFormCorrect = await vPersonalInfo$.value.$validate()
+  const formattedDate = birthday.value ? birthday.value.toJSON() : null;
+  const isFormCorrect = await vPersonalInfo$.value.$validate();
   if (isFormCorrect) {
-    updatePersonalInformationLoading.value = true
+    updatePersonalInformationLoading.value = true;
     try {
       const success = await sessionStore.setPersonalInfo(
         firstName.value,
         lastName.value,
-        formattedDate,
-      )
-      if (success) toast.success('Information updated')
+        formattedDate
+      );
+      if (success) toast.success("Information updated");
     } catch (e) {
-      toast.error('An error occurred')
+      toast.error("An error occurred");
     } finally {
-      updatePersonalInformationLoading.value = false
+      updatePersonalInformationLoading.value = false;
     }
   } else {
-    toast.error('Form is invalid')
+    toast.error("Form is invalid");
   }
 }
 
@@ -96,24 +96,24 @@ async function updatePersonalInformation() {
  * Update the user's postal address
  */
 async function updatePostalAddress() {
-  const isFormCorrect = await vPostalAddress$.value.$validate()
+  const isFormCorrect = await vPostalAddress$.value.$validate();
   if (isFormCorrect) {
     try {
-      updateAddressLoading.value = true
+      updateAddressLoading.value = true;
       const success = await sessionStore.setAddress(
         street.value,
         city.value,
         postalCode.value,
-        country.value,
-      )
-      if (success) toast.success('Information updated')
+        country.value
+      );
+      if (success) toast.success("Information updated");
     } catch (e) {
-      toast.error('An error occurred')
+      toast.error("An error occurred");
     } finally {
-      updateAddressLoading.value = false
+      updateAddressLoading.value = false;
     }
   } else {
-    toast.error('Form is invalid')
+    toast.error("Form is invalid");
   }
 }
 </script>
@@ -122,14 +122,17 @@ async function updatePostalAddress() {
     <div class="py-6 px-4 sm:p-6 lg:pb-8">
       <div>
         <h2 class="text-lg leading-6 font-medium text-base-content">
-          {{ $t('menu.profile') }}
+          {{ $t("menu.profile") }}
         </h2>
         <p class="mt-1 text-sm text-base-content/60">
-          {{ $t('account.profile.manageYourInformation') }}
+          {{ $t("account.profile.manageYourInformation") }}
         </p>
       </div>
 
-      <form class="mt-6 grid grid-cols-12 gap-6" @submit.prevent="updatePersonalInformation">
+      <form
+        class="mt-6 grid grid-cols-12 gap-6"
+        @submit.prevent="updatePersonalInformation"
+      >
         <div class="col-span-12 sm:col-span-6">
           <user-input
             :label="$t('userData.firstName')"
@@ -151,7 +154,9 @@ async function updatePostalAddress() {
         </div>
 
         <div class="col-span-12 md:col-span-6">
-          <label for="birthday" class="label label-text">{{ $t('userData.birthday') }}</label>
+          <label for="birthday" class="label label-text">{{
+            $t("userData.birthday")
+          }}</label>
           <Datepicker
             :enable-time-picker="false"
             format="dd/MM/yyyy"
@@ -164,9 +169,13 @@ async function updatePostalAddress() {
           <button
             type="submit"
             class="btn btn-primary btn-sm"
-            :class="updatePersonalInformationLoading ? 'loading loading-spinner btn-disabled' : ''"
+            :class="
+              updatePersonalInformationLoading
+                ? 'loading loading-spinner btn-disabled'
+                : ''
+            "
           >
-            {{ $t('account.profile.updatePersonalInformation') }}
+            {{ $t("account.profile.updatePersonalInformation") }}
           </button>
         </div>
       </form>
@@ -176,10 +185,10 @@ async function updatePostalAddress() {
       <div class="px-4 sm:px-6">
         <div>
           <h2 class="text-lg leading-6 font-medium text-base-content">
-            {{ $t('account.profile.contact') }}
+            {{ $t("account.profile.contact") }}
           </h2>
           <p class="mt-1 text-sm text-base-content/60">
-            {{ $t('account.profile.yourContactInformation') }}
+            {{ $t("account.profile.yourContactInformation") }}
           </p>
         </div>
 
@@ -203,9 +212,11 @@ async function updatePostalAddress() {
           </div>
         </div>
 
-        <router-link :to="{ name: 'accountProfile' }" class="link link-hover link-primary">{{
-          $t('account.profile.editYourContactInformation')
-        }}</router-link>
+        <router-link
+          :to="{ name: 'accountProfile' }"
+          class="link link-hover link-primary"
+          >{{ $t("account.profile.editYourContactInformation") }}</router-link
+        >
       </div>
     </div>
 
@@ -213,10 +224,10 @@ async function updatePostalAddress() {
       <form class="px-4 sm:px-6" @submit.prevent="updatePostalAddress">
         <div>
           <h2 class="text-lg leading-6 font-medium text-base-content">
-            {{ $t('userData.deliveryAddress') }}
+            {{ $t("userData.deliveryAddress") }}
           </h2>
           <p class="mt-1 text-sm text-base-content/60">
-            {{ $t('account.profile.yourPostalAddress') }}
+            {{ $t("account.profile.yourPostalAddress") }}
           </p>
         </div>
 
@@ -262,9 +273,11 @@ async function updatePostalAddress() {
           <button
             class="btn btn-primary btn-sm"
             type="submit"
-            :class="updateAddressLoading ? 'loading loading-spinner btn-disabled' : ''"
+            :class="
+              updateAddressLoading ? 'loading loading-spinner btn-disabled' : ''
+            "
           >
-            {{ $t('account.profile.updateHomeAddress') }}
+            {{ $t("account.profile.updateHomeAddress") }}
           </button>
         </div>
       </form>
@@ -274,19 +287,25 @@ async function updatePostalAddress() {
       <div class="px-4 sm:px-6">
         <div>
           <h2 class="text-lg leading-6 font-medium text-base-content">
-            {{ $t('account.profile.privacy') }}
+            {{ $t("account.profile.privacy") }}
           </h2>
           <p class="mt-1 text-sm text-base-content/60">
-            {{ $t('account.profile.managePrivacySettings') }}
+            {{ $t("account.profile.managePrivacySettings") }}
           </p>
         </div>
         <ul role="list" class="mt-2 divide-y divide-base-200/40">
           <li class="py-4 flex items-center justify-between">
             <div class="flex flex-col">
-              <p class="text-sm font-medium text-base-content" id="privacy-option-1-label">
+              <p
+                class="text-sm font-medium text-base-content"
+                id="privacy-option-1-label"
+              >
                 Available to hire
               </p>
-              <p class="text-sm text-base-content/60" id="privacy-option-1-description">
+              <p
+                class="text-sm text-base-content/60"
+                id="privacy-option-1-description"
+              >
                 Nulla amet tempus sit accumsan. Aliquet turpis sed sit lacinia.
               </p>
             </div>
@@ -295,11 +314,18 @@ async function updatePostalAddress() {
           </li>
           <li class="py-4 flex items-center justify-between">
             <div class="flex flex-col">
-              <p class="text-sm font-medium text-base-content" id="privacy-option-2-label">
+              <p
+                class="text-sm font-medium text-base-content"
+                id="privacy-option-2-label"
+              >
                 Make account private
               </p>
-              <p class="text-sm text-base-content/60" id="privacy-option-2-description">
-                Pharetra morbi dui mi mattis tellus sollicitudin cursus pharetra.
+              <p
+                class="text-sm text-base-content/60"
+                id="privacy-option-2-description"
+              >
+                Pharetra morbi dui mi mattis tellus sollicitudin cursus
+                pharetra.
               </p>
             </div>
 
@@ -307,10 +333,16 @@ async function updatePostalAddress() {
           </li>
           <li class="py-4 flex items-center justify-between">
             <div class="flex flex-col">
-              <p class="text-sm font-medium text-base-content" id="privacy-option-3-label">
+              <p
+                class="text-sm font-medium text-base-content"
+                id="privacy-option-3-label"
+              >
                 Allow commenting
               </p>
-              <p class="text-sm text-base-content/60" id="privacy-option-3-description">
+              <p
+                class="text-sm text-base-content/60"
+                id="privacy-option-3-description"
+              >
                 Integer amet, nunc hendrerit adipiscing nam. Elementum ame
               </p>
             </div>
@@ -319,10 +351,16 @@ async function updatePostalAddress() {
           </li>
           <li class="py-4 flex items-center justify-between">
             <div class="flex flex-col">
-              <p class="text-sm font-medium text-base-content" id="privacy-option-4-label">
+              <p
+                class="text-sm font-medium text-base-content"
+                id="privacy-option-4-label"
+              >
                 Allow mentions
               </p>
-              <p class="text-sm text-base-content/60" id="privacy-option-4-description">
+              <p
+                class="text-sm text-base-content/60"
+                id="privacy-option-4-description"
+              >
                 Adipiscing est venenatis enim molestie commodo eu gravid
               </p>
             </div>
@@ -332,8 +370,12 @@ async function updatePostalAddress() {
         </ul>
       </div>
       <div class="mt-4 py-4 px-4 flex justify-end sm:px-6">
-        <button type="button" class="btn btn-outline btn-sm">{{ $t('global.cancel') }}</button>
-        <button type="submit" class="btn btn-primary ml-5 btn-sm">{{ $t('global.save') }}</button>
+        <button type="button" class="btn btn-outline btn-sm">
+          {{ $t("global.cancel") }}
+        </button>
+        <button type="submit" class="btn btn-primary ml-5 btn-sm">
+          {{ $t("global.save") }}
+        </button>
       </div>
     </div>
   </div>
diff --git a/src/components/account/VerifiableInformation.vue b/src/components/account/VerifiableInformation.vue
index 9268c40..c14d292 100644
--- a/src/components/account/VerifiableInformation.vue
+++ b/src/components/account/VerifiableInformation.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import { toRefs } from 'vue'
+import { toRefs } from "vue";
 
-import { CheckIcon } from '@heroicons/vue/24/outline'
-import { ExclamationCircleIcon } from '@heroicons/vue/24/solid'
+import { CheckIcon } from "@heroicons/vue/24/outline";
+import { ExclamationCircleIcon } from "@heroicons/vue/24/solid";
 const props = withDefaults(
   defineProps<{
-    label: string
-    data: string
-    verified?: boolean
-    verifyRouteName: string
+    label: string;
+    data: string;
+    verified?: boolean;
+    verifyRouteName: string;
   }>(),
-  { verified: false },
-)
+  { verified: false }
+);
 
-const { label, data, verified } = toRefs(props)
+const { label, data, verified } = toRefs(props);
 </script>
 
 <template>
@@ -22,7 +22,7 @@ const { label, data, verified } = toRefs(props)
       <span class="label-text text-xs text-base-content">{{ label }}</span>
       <div v-if="verified" class="badge badge-info bg-info/20 text-xs gap-2">
         <CheckIcon class="h-4 w-4 text-info-content" />
-        {{ $t('userData.verified') }}
+        {{ $t("userData.verified") }}
       </div>
       <router-link
         :to="{ name: verifyRouteName }"
@@ -30,9 +30,14 @@ const { label, data, verified } = toRefs(props)
         class="text-warning pr-1 text-xs flex items-center w-max underline"
       >
         <ExclamationCircleIcon class="h-4 w-4 text-warning/70" />
-        <span>{{ $t('userData.notVerified') }}</span>
+        <span>{{ $t("userData.notVerified") }}</span>
       </router-link>
     </label>
-    <input type="text" disabled class="input input-bordered w-full" :value="data" />
+    <input
+      type="text"
+      disabled
+      class="input input-bordered w-full"
+      :value="data"
+    />
   </div>
 </template>
diff --git a/src/components/bank/BankHomeLoggedOut.vue b/src/components/bank/BankHomeLoggedOut.vue
index 1661df2..b5aa62b 100644
--- a/src/components/bank/BankHomeLoggedOut.vue
+++ b/src/components/bank/BankHomeLoggedOut.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { CheckIcon, HomeIcon } from '@heroicons/vue/24/outline'
-import ButtonCard from '@/components/bank/ButtonCard.vue'
+import { CheckIcon, HomeIcon } from "@heroicons/vue/24/outline";
+import ButtonCard from "@/components/bank/ButtonCard.vue";
 </script>
 
 <template>
@@ -20,7 +20,9 @@ import ButtonCard from '@/components/bank/ButtonCard.vue'
               </p>
             </div>
           </div>
-          <div class="absolute flex w-full flex-col bottom-1/4 text-xs md:text-base">
+          <div
+            class="absolute flex w-full flex-col bottom-1/4 text-xs md:text-base"
+          >
             <div class="flex flex-col items-center mt-10">
               <div class="card bg-primary shadow-xl w-10/12">
                 <div class="card-body text-primary-content">
@@ -56,13 +58,23 @@ import ButtonCard from '@/components/bank/ButtonCard.vue'
       <div class="col-span-1 flex justify-center pt-4">
         <div class="flex flex-col">
           <div class="pb-4 text-center">
-            <h2 class="font-bold text-xl">Insurance, mortgage, loan, moving out...</h2>
+            <h2 class="font-bold text-xl">
+              Insurance, mortgage, loan, moving out...
+            </h2>
             <p>What do you need?</p>
           </div>
           <div class="grid grid-cols-1 gap-12 p-4 md:w-96">
-            <button-card title="Simulator" description="Mortgage Loan Simulator" icon="Home" />
+            <button-card
+              title="Simulator"
+              description="Mortgage Loan Simulator"
+              icon="Home"
+            />
 
-            <button-card title="Cards" description="Select your credit card" icon="CreditCard" />
+            <button-card
+              title="Cards"
+              description="Select your credit card"
+              icon="CreditCard"
+            />
 
             <button-card
               title="Simulator"
diff --git a/src/components/bank/BankTransferSelection.vue b/src/components/bank/BankTransferSelection.vue
deleted file mode 100644
index 7eca009..0000000
--- a/src/components/bank/BankTransferSelection.vue
+++ /dev/null
@@ -1,179 +0,0 @@
-<script setup lang="ts">
-import AccountSelection from './AccountSelection.vue'
-import BeneficiarySelection from './BeneficiarySelection.vue'
-import FooterSection from '@/components/FooterSection.vue'
-import type { Account } from '@/helpers/account'
-import { PlusCircleIcon } from '@heroicons/vue/24/solid'
-import Datepicker from '@vuepic/vue-datepicker'
-import { ref } from 'vue'
-import { userSessionStore } from '@/store/userSession'
-
-import '@vuepic/vue-datepicker/dist/main.css'
-import { useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-
-const router = useRouter()
-const sessionStore = userSessionStore()
-const { t } = useI18n()
-
-const sendingAccounts: Account[] = [
-  {
-    holder: sessionStore.fullName || '',
-    balance: 6425.78,
-    name: t('bank.depositAccount'),
-    number: '40021194485',
-  },
-  {
-    holder: `${sessionStore.fullName}, Camille Dupont`,
-    balance: 381.59,
-    name: t('bank.depositAccount'),
-    number: '40021194490',
-  },
-]
-const transferDate = ref<Date>(new Date())
-const amount = ref(0)
-const beneficiaryAccounts = ['Aeklys', 'Martin', 'Jeremy Duwez', 'Nina']
-
-const selectedAccount = ref<Account | null>(null)
-function selectAccount(account: Account) {
-  selectedAccount.value = account
-}
-
-const selectedBeneficiary = ref('')
-function selectBeneficiary(beneficiary: string) {
-  selectedBeneficiary.value = beneficiary
-}
-
-function validateTransfer() {
-  if (selectedAccount.value !== null) {
-    sessionStore.bankData.transfer.selectedAccount = selectedAccount.value
-  }
-  sessionStore.bankData.transfer.amount = amount.value
-  sessionStore.bankData.transfer.date = transferDate.value
-
-  sessionStore.bankData.transfer.beneficiaryAccount = selectedBeneficiary.value
-  router.push({ name: 'BankTransferValidate' })
-}
-</script>
-<template>
-  <div class="min-h-screen">
-    <div class="grid grid-cols-1 md:grid-cols-2">
-      <div class="col-span-1 flex justify-center pt-4 md:order-last overflow-y-scroll max-h-screen">
-        <div class="flex flex-col flex-1 px-10">
-          <h2 class="font-bold text-3xl pb-4">{{ $t('bank.transfer.transferMoney') }}</h2>
-          <div class="mt-8">
-            <h3 class="font-medium mb-2">{{ $t('bank.transfer.accountToDebit') }}</h3>
-            <account-selection
-              id="accountSelection"
-              :accounts="sendingAccounts"
-              class="mt-4"
-              @account-selected="selectAccount"
-            />
-          </div>
-
-          <div class="mt-12">
-            <div class="flex justify-between">
-              <h3 class="font-medium mb-2 flex justify-between">
-                {{ $t('bank.transfer.accountToCredit') }}
-              </h3>
-              <div class="link flex items-center text-primary gap-x-2">
-                <plus-circle-icon class="w-8 h-8" /> {{ $t('bank.addABeneficiary') }}
-              </div>
-            </div>
-            <beneficiary-selection
-              id="selectBeneficiary"
-              :beneficiaries="beneficiaryAccounts"
-              @select-beneficiary="selectBeneficiary"
-              class="mt-4"
-            />
-          </div>
-
-          <form
-            id="transferForm"
-            @submit.prevent="validateTransfer"
-            class="grid grid-cols-1 mb-10 md:mb-0 md:grid-cols-2 md:gap-x-4 my-12"
-          >
-            <label class="form-control w-full">
-              <div class="label">
-                <span class="label-text">{{ $t('bank.amount') }}</span>
-              </div>
-              <input
-                id="transferAmount"
-                type="number"
-                min="0"
-                step="0.01"
-                :placeholder="$t('bank.transfer.transferAmount')"
-                v-model="amount"
-                class="input input-bordered w-full"
-              />
-            </label>
-            <label class="form-control w-full">
-              <div class="label">
-                <span class="label-text">{{ $t('bank.transfer.transferDate') }}</span>
-              </div>
-              <Datepicker
-                :enable-time-picker="false"
-                format="dd/MM/yyyy"
-                v-model="transferDate"
-                input-class-name="input input-bordered w-full"
-              />
-            </label>
-            <button id="validateForm" class="btn btn-primary md:col-span-2 mt-8" type="submit">
-              {{ $t('global.next') }}
-            </button>
-          </form>
-        </div>
-      </div>
-      <div class="col-span-1 flex flex-col">
-        <div class="relative">
-          <img
-            src="@/assets/family.jpg"
-            alt="hero"
-            class="h-[36rem] sm:h-[50rem] w-full object-cover"
-          />
-          <div class="absolute flex w-full flex-col top-0">
-            <div class="flex flex-col items-center mt-4">
-              <div class="card bg-base-100 shadow-xl w-10/12">
-                <div class="card-body">
-                  <h2 class="card-title">{{ $t('bank.transfer.immediateTransferAd.title') }}</h2>
-                  <p class="text-justify">
-                    {{ $t('bank.transfer.immediateTransferAd.content') }}
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="absolute flex w-full flex-col bottom-1/4 text-xs md:text-base">
-            <div class="flex flex-col items-center mt-10">
-              <div class="card bg-primary shadow-xl w-10/12">
-                <div class="card-body text-primary-content">
-                  <h2 class="card-title">{{ $t('bank.transfer.passkeysAd.title') }}</h2>
-                  <p class="text-justify">
-                    {{ $t('bank.transfer.passkeysAd.content1') }}
-                  </p>
-                  <p>{{ $t('bank.transfer.passkeysAd.content2') }}</p>
-                  <div class="card-actions">
-                    <button
-                      class="btn btn-outline bg-primary-content text-primary border-none text-xs md:text-base"
-                    >
-                      {{ $t('bank.transfer.passkeysAd.learnMore') }}
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="relative">
-          <img
-            src="@/assets/community.jpg"
-            alt="hero"
-            class="h-[12rem] sm:h-[20rem] w-full object-cover"
-          />
-        </div>
-      </div>
-    </div>
-
-    <footer-section />
-  </div>
-</template>
diff --git a/src/components/bank/BankTransferValidation.vue b/src/components/bank/BankTransferValidation.vue
deleted file mode 100644
index c1f47d7..0000000
--- a/src/components/bank/BankTransferValidation.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<script setup lang="ts">
-import SelectAccountSummary from './SelectAccountSummary.vue'
-import FooterSection from '@/components/FooterSection.vue'
-import { computed, ref } from 'vue'
-import { userSessionStore } from '@/store/userSession'
-import { useI18n } from 'vue-i18n'
-import '@vuepic/vue-datepicker/dist/main.css'
-import { useRouter } from 'vue-router'
-import { Action, reportAction } from '@/helpers/risk'
-
-const router = useRouter()
-const sessionStore = userSessionStore()
-const transfer = sessionStore.bankData.transfer
-const i18n = useI18n()
-console.log(transfer.amount)
-
-const amount = computed(() => {
-  return i18n.n(transfer.amount, 'currency')
-})
-
-function validateTransfer() {
-  reportAction(Action.TRANSACTION)
-  router.push({ name: 'home' })
-}
-</script>
-<template>
-  <div class="min-h-screen">
-    <div class="grid grid-cols-1 md:grid-cols-2">
-      <div class="col-span-1 flex justify-center pt-4 md:order-last overflow-y-scroll max-h-screen">
-        <div class="flex flex-col flex-1 px-10">
-          <h2 class="font-bold text-3xl pb-4">Summary</h2>
-          <div class="mt-8">
-            <h3 class="font-medium mb-2">Account to debit</h3>
-            <select-account-summary
-              class="px-4 py-2 rounded-box border box-border"
-              :account="transfer.selectedAccount"
-            />
-          </div>
-
-          <div class="mt-12">
-            <div class="flex justify-between">
-              <h3 class="font-medium mb-2 flex justify-between">Account to credit</h3>
-            </div>
-            <div class="px-4 py-2 rounded-box border box-border">
-              {{ transfer.beneficiaryAccount }}
-            </div>
-          </div>
-
-          <div class="mt-12">
-            <div class="flex justify-between">
-              <h3 class="font-medium mb-2 flex justify-between">Amount</h3>
-            </div>
-            <div class="px-4 py-2 rounded-box border box-border">
-              {{ amount }}
-            </div>
-          </div>
-
-          <div class="mt-12">
-            <div class="flex justify-between">
-              <h3 class="font-medium mb-2 flex justify-between">Transfer date</h3>
-            </div>
-            <div class="px-4 py-2 rounded-box border box-border">
-              {{ transfer.date.toDateString() }}
-            </div>
-          </div>
-
-          <div class="flex justify-between items-center mt-12">
-            <router-link to="/" class="link link-primary">Cancel</router-link>
-            <div class="flex gap-x-4">
-              <router-link
-                :to="{ name: 'BankTransferSelect' }"
-                class="btn btn-ghost border border-primary"
-              >
-                Edit
-              </router-link>
-              <button id="validateTransfer" @click="validateTransfer" class="btn btn-primary">
-                Confirm
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="col-span-1 flex flex-col">
-        <div class="relative">
-          <img
-            src="@/assets/family.jpg"
-            alt="hero"
-            class="h-[36rem] sm:h-[50rem] w-full object-cover"
-          />
-          <div class="absolute flex w-full flex-col top-0">
-            <div class="flex flex-col items-center mt-4">
-              <div class="card bg-base-100 shadow-xl w-10/12">
-                <div class="card-body">
-                  <h2 class="card-title">Your transfer in less than 10 seconds</h2>
-                  <p class="text-justify">
-                    Need to send money to friends or family quickly? Find in your beneficiaries who
-                    is eligible to instant payment and send them money in less than 10 seconds.
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="absolute flex w-full flex-col bottom-1/4 text-xs md:text-base">
-            <div class="flex flex-col items-center mt-10">
-              <div class="card bg-primary shadow-xl w-10/12">
-                <div class="card-body text-primary-content">
-                  <h2 class="card-title">More security with Passkeys</h2>
-                  <p class="text-justify">
-                    Passkeys offer the convenience of fast and easy authentication, and provides a
-                    <b>security stronger than a password</b> combined with an SMS code.
-                  </p>
-                  <p>Even better, with passkeys, <b>no application is required.</b></p>
-                  <div class="card-actions">
-                    <button
-                      class="btn btn-outline bg-primary-content text-primary border-none text-xs md:text-base"
-                    >
-                      Learn more about passkeys
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="relative">
-          <img
-            src="@/assets/community.jpg"
-            alt="hero"
-            class="h-[12rem] sm:h-[20rem] w-full object-cover"
-          />
-        </div>
-      </div>
-    </div>
-    <footer-section />
-  </div>
-</template>
diff --git a/src/components/bank/BeneficiarySelection copy.vue b/src/components/bank/BeneficiarySelection copy.vue
deleted file mode 100644
index c21c3ad..0000000
--- a/src/components/bank/BeneficiarySelection copy.vue	
+++ /dev/null
@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const props = defineProps<{
-  beneficiaries: string[]
-}>()
-
-const emits = defineEmits(['selectBeneficiary'])
-const open = ref(false)
-const selectedBeneficiary = ref<string | null>(null)
-function selectBeneficiary(beneficiary: string) {
-  selectedBeneficiary.value = beneficiary
-  open.value = false
-  emits('selectBeneficiary', beneficiary)
-}
-</script>
-
-<template>
-  <div
-    class="collapse collapse-arrow rounded-box border border-base-200 bg-base-100 shadow-md py-2 px-0"
-  >
-    <input type="checkbox" v-model="open" />
-    <div class="collapse-title font-medium">
-      <div v-if="selectedBeneficiary === null">
-        {{ $t('bank.transfer.selectReceivingAccount') }}
-      </div>
-      <div v-else class="text-primary">
-        {{ selectedBeneficiary }}
-      </div>
-    </div>
-    <div class="collapse-content px-0">
-      <hr />
-      <div v-for="beneficiary in props.beneficiaries" v-bind:key="beneficiary">
-        <div
-          :id="beneficiary"
-          class="px-4 hover:cursor-pointer hover:bg-base-200 text-primary py-4"
-          @click="selectBeneficiary(beneficiary)"
-        >
-          {{ beneficiary }}
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/src/components/icons/FaceIdIcon.vue b/src/components/icons/FaceIdIcon.vue
index 837a59b..d1339c1 100644
--- a/src/components/icons/FaceIdIcon.vue
+++ b/src/components/icons/FaceIdIcon.vue
@@ -1,5 +1,11 @@
 <template>
-  <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="64"
+    height="64"
+    viewBox="0 0 64 64"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
diff --git a/src/components/icons/TouchIdIcon.vue b/src/components/icons/TouchIdIcon.vue
index 11cae95..44b47c0 100644
--- a/src/components/icons/TouchIdIcon.vue
+++ b/src/components/icons/TouchIdIcon.vue
@@ -1,5 +1,11 @@
 <template>
-  <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="64"
+    height="64"
+    viewBox="0 0 64 64"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g clip-path="url(#clip0_1_28)">
       <path
         d="M38.6354 0.943398C34.1521 -0.174912 29.4346 -0.334713 24.8441 0.656273C24.4894 0.732859 24.2639 1.08253 24.3404 1.43729C24.417 1.79205 24.7667 2.01756 25.1215 1.94097C29.5176 0.991934 34.0461 1.14842 38.3536 2.22802C48.6547 4.80983 57.229 12.5548 60.4947 22.6718C61.7577 26.5843 62.2942 30.7505 62.4016 35.1167C62.4106 35.4795 62.7119 35.7664 63.0747 35.7575C63.4376 35.7485 63.7245 35.4472 63.7155 35.0843C63.6066 30.6582 63.0638 26.3849 61.7697 22.3432C58.3782 11.7515 49.4166 3.63265 38.6354 0.943398Z"
diff --git a/src/components/logo/LogoOnBase.vue b/src/components/logo/LogoOnBase.vue
index f83d6b0..fddbb3f 100644
--- a/src/components/logo/LogoOnBase.vue
+++ b/src/components/logo/LogoOnBase.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Logo from './acme/AcmePrimaryColor.vue'
+import Logo from "./acme/AcmePrimaryColor.vue";
 </script>
 <template>
   <logo />
diff --git a/src/components/logo/LogoOnPrimary.vue b/src/components/logo/LogoOnPrimary.vue
index 58d8160..29e1e6d 100644
--- a/src/components/logo/LogoOnPrimary.vue
+++ b/src/components/logo/LogoOnPrimary.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import logo from './acme/AcmeBaseColor.vue'
+import logo from "./acme/AcmeBaseColor.vue";
 </script>
 <template>
   <logo />
diff --git a/src/composables/baseInput.ts b/src/composables/baseInput.ts
index 834df63..11a796d 100644
--- a/src/composables/baseInput.ts
+++ b/src/composables/baseInput.ts
@@ -1,75 +1,90 @@
-import { ref, watchEffect, type Ref } from 'vue'
-import type { BaseValidation } from '@vuelidate/core'
+import { ref, watchEffect, type Ref } from "vue";
+import type { BaseValidation } from "@vuelidate/core";
 
 export const display = {
-  error: 'displayError',
-  valid: 'displayValid',
-  none: 'displayNone',
-} as const
+  error: "displayError",
+  valid: "displayValid",
+  none: "displayNone",
+} as const;
 
-type DisplayType = (typeof display)[keyof typeof display]
+type DisplayType = (typeof display)[keyof typeof display];
 
 const size = {
-  xs: 'xs',
-  sm: 'sm',
-  md: 'md',
-  lg: 'lg',
-} as const
+  xs: "xs",
+  sm: "sm",
+  md: "md",
+  lg: "lg",
+} as const;
 
-export type SizeType = (typeof size)[keyof typeof size]
+export type SizeType = (typeof size)[keyof typeof size];
 
 export type ValidationParams = {
-  validation: BaseValidation
-  displayValidMessage: boolean
-  displayInvalidMessage: boolean
-  validMessage: string
-}
+  validation: BaseValidation;
+  displayValidMessage: boolean;
+  displayInvalidMessage: boolean;
+  validMessage: string;
+};
 
 export function getInputId(labelValue: string) {
-  return labelValue.trim().replace(/\s/g, '_')
+  return labelValue.trim().replace(/\s/g, "_");
 }
 
 export function useInputValidation(params: ValidationParams) {
-  const { validation, displayValidMessage, displayInvalidMessage, validMessage } = params
+  const {
+    validation,
+    displayValidMessage,
+    displayInvalidMessage,
+    validMessage,
+  } = params;
 
-  const validationState = ref<DisplayType>(display.none)
-  const validationMessage = ref('')
-  const labelClass = ref('')
-  const inputClass = ref('')
-  const messageClass = ref('')
+  const validationState = ref<DisplayType>(display.none);
+  const validationMessage = ref("");
+  const labelClass = ref("");
+  const inputClass = ref("");
+  const messageClass = ref("");
 
   watchEffect(() => {
-    if (!validation.$errors[0] && validation.$dirty && displayValidMessage.valueOf()) {
-      validationState.value = display.valid
-    } else if (validation.$errors[0] && validation.$dirty && displayInvalidMessage.valueOf()) {
-      validationState.value = display.error
+    if (
+      !validation.$errors[0] &&
+      validation.$dirty &&
+      displayValidMessage.valueOf()
+    ) {
+      validationState.value = display.valid;
+    } else if (
+      validation.$errors[0] &&
+      validation.$dirty &&
+      displayInvalidMessage.valueOf()
+    ) {
+      validationState.value = display.error;
     } else {
-      validationState.value = display.none
+      validationState.value = display.none;
     }
 
     if (validation.$invalid && validation.$dirty) {
-      labelClass.value = 'text-error-content'
+      labelClass.value = "text-error-content";
     } else {
-      labelClass.value = ''
+      labelClass.value = "";
     }
 
     switch (validationState.value) {
       case display.valid:
-        validationMessage.value = validMessage.valueOf() ? validMessage.valueOf() : ''
-        inputClass.value = 'input-success'
-        messageClass.value = 'visible text-success-content'
-        break
+        validationMessage.value = validMessage.valueOf()
+          ? validMessage.valueOf()
+          : "";
+        inputClass.value = "input-success";
+        messageClass.value = "visible text-success-content";
+        break;
       case display.error:
-        validationMessage.value = validation.$errors[0].$message.toString()
-        inputClass.value = 'input-error'
-        messageClass.value = 'visible text-error-content'
-        break
+        validationMessage.value = validation.$errors[0].$message.toString();
+        inputClass.value = "input-error";
+        messageClass.value = "visible text-error-content";
+        break;
       default:
-        validationMessage.value = 'Placeholder'
-        inputClass.value = ''
-        messageClass.value = 'invisible '
+        validationMessage.value = "Placeholder";
+        inputClass.value = "";
+        messageClass.value = "invisible ";
     }
-  })
+  });
 
-  return { labelClass, inputClass, messageClass, validationMessage }
+  return { labelClass, inputClass, messageClass, validationMessage };
 }
diff --git a/src/e2e/vue.spec.ts b/src/e2e/vue.spec.ts
index 17c46fe..7237179 100644
--- a/src/e2e/vue.spec.ts
+++ b/src/e2e/vue.spec.ts
@@ -1,8 +1,8 @@
-import { test, expect } from '@playwright/test'
+import { test, expect } from "@playwright/test";
 
 // See here how to get started:
 // https://playwright.dev/docs/intro
-test('visits the app root url', async ({ page }) => {
-  await page.goto('/')
-  await expect(page.locator('div.greetings > h1')).toHaveText('You did it!')
-})
+test("visits the app root url", async ({ page }) => {
+  await page.goto("/");
+  await expect(page.locator("div.greetings > h1")).toHaveText("You did it!");
+});
diff --git a/src/experimental.d.ts b/src/experimental.d.ts
index 88d3f0c..50389f9 100644
--- a/src/experimental.d.ts
+++ b/src/experimental.d.ts
@@ -5,43 +5,43 @@ declare interface WorkerNavigator extends NavigatorUA {}
 
 // https://wicg.github.io/ua-client-hints/#navigatorua
 declare interface NavigatorUA {
-  readonly userAgentData?: NavigatorUAData
+  readonly userAgentData?: NavigatorUAData;
 }
 
 // https://wicg.github.io/ua-client-hints/#dictdef-navigatoruabrandversion
 interface NavigatorUABrandVersion {
-  readonly brand: string
-  readonly version: string
+  readonly brand: string;
+  readonly version: string;
 }
 
 // https://wicg.github.io/ua-client-hints/#dictdef-uadatavalues
 interface UADataValues {
-  readonly brands?: NavigatorUABrandVersion[]
-  readonly mobile?: boolean
-  readonly platform?: string
-  readonly architecture?: string
-  readonly bitness?: string
-  readonly model?: string
-  readonly platformVersion?: string
+  readonly brands?: NavigatorUABrandVersion[];
+  readonly mobile?: boolean;
+  readonly platform?: string;
+  readonly architecture?: string;
+  readonly bitness?: string;
+  readonly model?: string;
+  readonly platformVersion?: string;
   /** @deprecated in favour of fullVersionList */
-  readonly uaFullVersion?: string
-  readonly fullVersionList?: NavigatorUABrandVersion[]
-  readonly wow64?: boolean
+  readonly uaFullVersion?: string;
+  readonly fullVersionList?: NavigatorUABrandVersion[];
+  readonly wow64?: boolean;
 }
 
 // https://wicg.github.io/ua-client-hints/#dictdef-ualowentropyjson
 interface UALowEntropyJSON {
-  readonly brands: NavigatorUABrandVersion[]
-  readonly mobile: boolean
-  readonly platform: string
+  readonly brands: NavigatorUABrandVersion[];
+  readonly mobile: boolean;
+  readonly platform: string;
 }
 
 // https://wicg.github.io/ua-client-hints/#navigatoruadata
 interface NavigatorUAData extends UALowEntropyJSON {
-  getHighEntropyValues(hints: string[]): Promise<UADataValues>
-  toJSON(): UALowEntropyJSON
+  getHighEntropyValues(hints: string[]): Promise<UADataValues>;
+  toJSON(): UALowEntropyJSON;
 }
 
 interface Window {
-  tsPlatform: any
+  tsPlatform: any;
 }
diff --git a/src/helpers/account.ts b/src/helpers/account.ts
index fc63471..8ef9618 100644
--- a/src/helpers/account.ts
+++ b/src/helpers/account.ts
@@ -1,6 +1,6 @@
 export interface Account {
-  holder: string
-  name: string
-  balance: number
-  number: string
+  holder: string;
+  name: string;
+  balance: number;
+  number: string;
 }
diff --git a/src/helpers/errors.ts b/src/helpers/errors.ts
index 3580e97..b8f51af 100644
--- a/src/helpers/errors.ts
+++ b/src/helpers/errors.ts
@@ -1,18 +1,20 @@
-import axios, { AxiosError } from 'axios'
-import { useToast } from 'vue-toastification'
-const toast = useToast()
+import axios, { AxiosError } from "axios";
+import { useToast } from "vue-toastification";
+const toast = useToast();
 
 export function handleError(error: unknown) {
-  console.log(error)
+  console.log(error);
   if (axios.isAxiosError(error)) {
-    const axiosError = error as AxiosError
-    const data = axiosError.response?.data as { message: string }
+    const axiosError = error as AxiosError;
+    const data = axiosError.response?.data as { message: string };
     if (data.message) {
-      toast.error(data.message)
+      toast.error(data.message);
     }
   } else {
-    const errorObject = error as { message: string }
-    const message = errorObject.message ? errorObject.message : (error as string)
-    toast.error(message)
+    const errorObject = error as { message: string };
+    const message = errorObject.message
+      ? errorObject.message
+      : (error as string);
+    toast.error(message);
   }
 }
diff --git a/src/helpers/i18n.ts b/src/helpers/i18n.ts
index bbb1d78..3152d3c 100644
--- a/src/helpers/i18n.ts
+++ b/src/helpers/i18n.ts
@@ -1,10 +1,10 @@
-import { createI18n } from 'vue-i18n'
+import { createI18n } from "vue-i18n";
 
 /*
  * All i18n resources specified in the plugin `include` option can be loaded
  * at once using the import syntax
  */
-import messages from '@intlify/unplugin-vue-i18n/messages'
+import messages from "@intlify/unplugin-vue-i18n/messages";
 
 /**
  * Internationalization capabilities
@@ -12,7 +12,7 @@ import messages from '@intlify/unplugin-vue-i18n/messages'
  */
 const i18n = createI18n({
   locale: (navigator.languages && navigator.languages[0]) || navigator.language,
-  fallbackLocale: import.meta.env.VITE_FALLBACK_LOCALE || 'en-US',
+  fallbackLocale: import.meta.env.VITE_FALLBACK_LOCALE || "en-US",
   globalInjection: true,
   allowComposition: true,
   legacy: false,
@@ -22,56 +22,56 @@ const i18n = createI18n({
   // Currency options with https://tc39.es/ecma402/#numberformat-objects
   // See also https://vue-i18n.intlify.dev/guide/essentials/number.html
   numberFormats: {
-    'en-US': {
+    "en-US": {
       currency: {
-        style: 'currency',
-        currency: 'USD',
-        notation: 'standard',
+        style: "currency",
+        currency: "USD",
+        notation: "standard",
       },
       decimal: {
-        style: 'decimal',
+        style: "decimal",
         minimumFractionDigits: 2,
         maximumFractionDigits: 2,
       },
       percent: {
-        style: 'percent',
+        style: "percent",
         useGrouping: false,
       },
     },
-    'pt-PT': {
+    "pt-PT": {
       currency: {
-        style: 'currency',
-        currency: 'EUR',
-        currencyDisplay: 'symbol',
+        style: "currency",
+        currency: "EUR",
+        currencyDisplay: "symbol",
       },
       decimal: {
-        style: 'decimal',
+        style: "decimal",
         minimumSignificantDigits: 3,
         maximumSignificantDigits: 5,
       },
       percent: {
-        style: 'percent',
+        style: "percent",
         useGrouping: false,
       },
     },
-    'ja-JP': {
+    "ja-JP": {
       currency: {
-        style: 'currency',
-        currency: 'JPY',
+        style: "currency",
+        currency: "JPY",
         useGrouping: true,
-        currencyDisplay: 'symbol',
+        currencyDisplay: "symbol",
       },
       decimal: {
-        style: 'decimal',
+        style: "decimal",
         minimumSignificantDigits: 3,
         maximumSignificantDigits: 5,
       },
       percent: {
-        style: 'percent',
+        style: "percent",
         useGrouping: false,
       },
     },
   },
-})
+});
 
-export default i18n
+export default i18n;
diff --git a/src/helpers/mobile.ts b/src/helpers/mobile.ts
index 31eade1..2d92f10 100644
--- a/src/helpers/mobile.ts
+++ b/src/helpers/mobile.ts
@@ -2,17 +2,17 @@
 // @ts-nocheck
 export function detectMobile() {
   /* eslint-disable */
-  var check = false
-  ;(function (a) {
+  var check = false;
+  (function (a) {
     if (
       /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(
-        a,
+        a
       ) ||
       /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
-        a.substr(0, 4),
+        a.substr(0, 4)
       )
     )
-      check = true
-  })(navigator.userAgent || navigator.vendor || window.opera)
-  return check
+      check = true;
+  })(navigator.userAgent || navigator.vendor || window.opera);
+  return check;
 }
diff --git a/src/helpers/risk.ts b/src/helpers/risk.ts
index 0dba1a1..513c4fc 100644
--- a/src/helpers/risk.ts
+++ b/src/helpers/risk.ts
@@ -1,35 +1,35 @@
 // https://developer.transmitsecurity.com/guides/risk/recommendations/#action-types
 export enum Action {
-  LOGIN = 'login',
-  REGISTER = 'register',
-  TRANSACTION = 'transaction',
-  PASSWORD_RESET = 'password_reset',
-  LOGOUT = 'logout',
-  CHECKOUT = 'checkout',
-  ACCOUNT_DETAILS_CHANGE = 'account_details_change',
-  ACCOUNT_AUTH_CHANGE = 'account_auth_change',
-  CREDITS_CHANGE = 'credits_change',
+  LOGIN = "login",
+  REGISTER = "register",
+  TRANSACTION = "transaction",
+  PASSWORD_RESET = "password_reset",
+  LOGOUT = "logout",
+  CHECKOUT = "checkout",
+  ACCOUNT_DETAILS_CHANGE = "account_details_change",
+  ACCOUNT_AUTH_CHANGE = "account_auth_change",
+  CREDITS_CHANGE = "credits_change",
 }
 
 // WEBINAR ACTION - Add a helper to report actions
 // https://developer.transmitsecurity.com/guides/risk/quick_start_web/#step-4-report-actions
 export async function reportAction(actionType: Action) {
   try {
-    const result = await window.tsPlatform.drs.triggerActionEvent(actionType)
-    return result.actionToken
+    const result = await window.tsPlatform.drs.triggerActionEvent(actionType);
+    return result.actionToken;
   } catch (error) {
-    return ''
+    return "";
   }
 }
 
 // WEBINAR ACTION - Add a helper to set the user ID
 // https://developer.transmitsecurity.com/guides/risk/quick_start_web/#step-3-set-user
 export async function setUserId(userId: string) {
-  return await window.tsPlatform.drs.setAuthenticatedUser(userId)
+  return await window.tsPlatform.drs.setAuthenticatedUser(userId);
 }
 
 // WEBINAR ACTION - ADD a helper to clear the user ID
 // https://developer.transmitsecurity.com/guides/risk/quick_start_web/#step-6-clear-user
 export async function clearUser() {
-  return await window.tsPlatform.drs.clearUser()
+  return await window.tsPlatform.drs.clearUser();
 }
diff --git a/src/helpers/session.ts b/src/helpers/session.ts
index bea2158..8143418 100644
--- a/src/helpers/session.ts
+++ b/src/helpers/session.ts
@@ -1,32 +1,35 @@
-import router from '@/router'
-import { userSessionStore } from '@/store/userSession'
-import { UserApi, type UserDto } from '@transmitsecurity-dev/ts-demo-client-lib'
+import router from "@/router";
+import { userSessionStore } from "@/store/userSession";
+import {
+  UserApi,
+  type UserDto,
+} from "@transmitsecurity-dev/ts-demo-client-lib";
 // WEBINAR ACTION - import the methods and helpers linked to the Detection and Response SDK
-import { reportAction, Action, clearUser, setUserId } from './risk'
+import { reportAction, Action, clearUser, setUserId } from "./risk";
 
-const backendAPI = import.meta.env.VITE_BACKEND_URL
+const backendAPI = import.meta.env.VITE_BACKEND_URL;
 export async function logout() {
-  const sessionStore = userSessionStore()
+  const sessionStore = userSessionStore();
   if (!sessionStore.isAuthenticated) {
-    return
+    return;
   }
   // WEBINAR ACTION - Report the logout action
-  reportAction(Action.LOGOUT)
-  clearSession()
-  const userApi = new UserApi(undefined, backendAPI)
+  reportAction(Action.LOGOUT);
+  clearSession();
+  const userApi = new UserApi(undefined, backendAPI);
   // Dispatch an event other components can subscribe to
   // when the user logs out
-  const event = new CustomEvent('userLoggedOut')
-  document.dispatchEvent(event)
-  await userApi.logout()
-  router.push({ name: 'home' })
+  const event = new CustomEvent("userLoggedOut");
+  document.dispatchEvent(event);
+  await userApi.logout();
+  router.push({ name: "home" });
 }
 
 export async function clearSession() {
-  const sessionStore = userSessionStore()
-  sessionStore.clear()
+  const sessionStore = userSessionStore();
+  sessionStore.clear();
   // Clear user from risk SDK
-  clearUser()
+  clearUser();
 }
 
 export async function loadSession(): Promise<{ user: UserDto } | undefined> {
@@ -34,51 +37,53 @@ export async function loadSession(): Promise<{ user: UserDto } | undefined> {
   // automatically whenever a new request is made
   // To check if there is a valid session, we simply
   // try to get the user information
-  const userApi = new UserApi(undefined, backendAPI)
+  const userApi = new UserApi(undefined, backendAPI);
   try {
-    const sessionStore = userSessionStore()
+    const sessionStore = userSessionStore();
     if (sessionStore.tsPlatformLoaded) {
-      console.log('Looking for an existing user session')
+      console.log("Looking for an existing user session");
       // WEBINAR ACTION - Report a login action
       // Report a login action to the detection and response service
-      const actionToken = await reportAction(Action.LOGIN)
-      console.log('Action token', actionToken)
+      const actionToken = await reportAction(Action.LOGIN);
+      console.log("Action token", actionToken);
 
       // WEBINAR ACTION - Send the action token to the backend when getting the user data
       // Retrieve the current user (if there is one)
-      const userResponse = await userApi.getCurrentUser(actionToken)
+      const userResponse = await userApi.getCurrentUser(actionToken);
 
-      console.log(userResponse.data.userData)
-      console.log('riskRecommendation', userResponse.data.riskRecommendation)
+      console.log(userResponse.data.userData);
+      console.log("riskRecommendation", userResponse.data.riskRecommendation);
       if (userResponse.status !== 200) {
-        console.log('Session expired')
-        clearSession()
-        return
+        console.log("Session expired");
+        clearSession();
+        return;
       }
 
       // WEBINAR ACTION 2 - Set the user ID
       // The user is authenticated, set the user in the risk SDK
-      setUserId(userResponse.data.userData.user_id)
+      setUserId(userResponse.data.userData.user_id);
 
       // Save the user information locally
-      sessionStore.setUserData(userResponse.data.userData)
-      sessionStore.setAuthenticated(true)
+      sessionStore.setUserData(userResponse.data.userData);
+      sessionStore.setAuthenticated(true);
       // Dispatch an event indicating that the user logged in
       // this is helpful if other components need to populate
       // things at this stage (cart for example)
-      const event = new CustomEvent('userLoggedIn')
-      document.dispatchEvent(event)
-      return { user: userResponse.data.userData }
+      const event = new CustomEvent("userLoggedIn");
+      document.dispatchEvent(event);
+      return { user: userResponse.data.userData };
     } else {
-      console.log('Trying to load session while platform is not loaded - aborted')
-      return
+      console.log(
+        "Trying to load session while platform is not loaded - aborted"
+      );
+      return;
     }
   } catch (error) {
-    console.log(error)
-    return
+    console.log(error);
+    return;
   }
 }
 
 export async function deleteCookie(name: string) {
-  document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/;'
+  document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/;";
 }
diff --git a/src/helpers/tsErrors.ts b/src/helpers/tsErrors.ts
index fd27efe..f3f6af5 100644
--- a/src/helpers/tsErrors.ts
+++ b/src/helpers/tsErrors.ts
@@ -1,94 +1,106 @@
 export abstract class BaseSdkError extends Error implements SdkError {
-  errorCode = ErrorCode.NotInitialized
+  errorCode = ErrorCode.NotInitialized;
 
-  data?: any
+  data?: any;
 
   constructor(message?: string, additionalData?: any) {
-    super(message)
-    this.data = additionalData
+    super(message);
+    this.data = additionalData;
   }
 }
 
 export class NotInitializedError extends BaseSdkError {
-  errorCode = ErrorCode.NotInitialized
+  errorCode = ErrorCode.NotInitialized;
 
   constructor(message?: string, additionalData?: any) {
-    super(message ?? 'WebAuthnSdk is not initialized', additionalData)
+    super(message ?? "WebAuthnSdk is not initialized", additionalData);
   }
 }
 
 export class AuthenticationFailedError extends BaseSdkError {
-  errorCode = ErrorCode.AuthenticationFailed
+  errorCode = ErrorCode.AuthenticationFailed;
 
   constructor(message?: string, additionalData?: any) {
-    super(message ?? 'Authentication failed with an error', additionalData)
+    super(message ?? "Authentication failed with an error", additionalData);
   }
 }
 
 export class AuthenticationCanceledError extends BaseSdkError {
-  errorCode = ErrorCode.AuthenticationCanceled
+  errorCode = ErrorCode.AuthenticationCanceled;
 
   constructor(message?: string, additionalData?: any) {
-    super(message ?? 'Authentication was canceled by the user or got timeout', additionalData)
+    super(
+      message ?? "Authentication was canceled by the user or got timeout",
+      additionalData
+    );
   }
 }
 
 export class RegistrationFailedError extends BaseSdkError {
-  errorCode = ErrorCode.RegistrationFailed
+  errorCode = ErrorCode.RegistrationFailed;
 
   constructor(message?: string, additionalData?: any) {
-    super(message ?? 'Registration failed with an error', additionalData)
+    super(message ?? "Registration failed with an error", additionalData);
   }
 }
 
 export class RegistrationCanceledError extends BaseSdkError {
-  errorCode = ErrorCode.RegistrationCanceled
+  errorCode = ErrorCode.RegistrationCanceled;
 
   constructor(message?: string, additionalData?: any) {
-    super(message ?? 'Registration was canceled by the user or got timeout', additionalData)
+    super(
+      message ?? "Registration was canceled by the user or got timeout",
+      additionalData
+    );
   }
 }
 
 export class AutofillAuthenticationAbortedError extends BaseSdkError {
-  errorCode = ErrorCode.AutofillAuthenticationAborted
+  errorCode = ErrorCode.AutofillAuthenticationAborted;
 
   constructor(message?: string) {
-    super(message ?? 'Autofill flow was aborted')
+    super(message ?? "Autofill flow was aborted");
   }
 }
 
 export class AuthenticationProcessAlreadyActiveError extends BaseSdkError {
-  errorCode = ErrorCode.AuthenticationProcessAlreadyActive
+  errorCode = ErrorCode.AuthenticationProcessAlreadyActive;
 
   constructor(message?: string, additionalData?: any) {
-    super(message ?? 'Authentication process is already active', additionalData)
+    super(
+      message ?? "Authentication process is already active",
+      additionalData
+    );
   }
 }
 
 export class InvalidApprovalDataError extends BaseSdkError {
-  errorCode = ErrorCode.InvalidApprovalData
+  errorCode = ErrorCode.InvalidApprovalData;
 
   constructor(message?: string, additionalData?: any) {
-    super(message ?? 'Invalid approval data', additionalData)
+    super(message ?? "Invalid approval data", additionalData);
   }
 }
 
 export class FailedToInitCrossDeviceAuthenticationError extends BaseSdkError {
-  errorCode = ErrorCode.FailedToInitCrossDeviceSession
+  errorCode = ErrorCode.FailedToInitCrossDeviceSession;
 
   constructor(message?: string, additionalData?: any) {
-    super(message ?? 'Failed to init cross device authentication', additionalData)
+    super(
+      message ?? "Failed to init cross device authentication",
+      additionalData
+    );
   }
 }
 
 export class FailedToGetCrossDeviceStatusError extends BaseSdkError {
-  errorCode = ErrorCode.FailedToGetCrossDeviceStatus
+  errorCode = ErrorCode.FailedToGetCrossDeviceStatus;
 
   constructor(message?: string, additionalData?: any) {
-    super(message ?? 'Failed to get cross device status', additionalData)
+    super(message ?? "Failed to get cross device status", additionalData);
   }
 }
 
 export function isBaseSdkError(error: any): error is BaseSdkError {
-  return error.errorCode && Object.values(ErrorCode).includes(error.errorCode)
+  return error.errorCode && Object.values(ErrorCode).includes(error.errorCode);
 }
diff --git a/src/helpers/tsSdk.ts b/src/helpers/tsSdk.ts
index 614f332..d807118 100644
--- a/src/helpers/tsSdk.ts
+++ b/src/helpers/tsSdk.ts
@@ -1,48 +1,50 @@
-import { userSessionStore } from '@/store/userSession'
-import { ConfigApi } from '@transmitsecurity-dev/ts-demo-client-lib'
+import { userSessionStore } from "@/store/userSession";
+import { ConfigApi } from "@transmitsecurity-dev/ts-demo-client-lib";
 
-const backendAPI = import.meta.env.VITE_BACKEND_URL
-const configApi = new ConfigApi(undefined, backendAPI)
+const backendAPI = import.meta.env.VITE_BACKEND_URL;
+const configApi = new ConfigApi(undefined, backendAPI);
 
-export const sdkSourceUrl = import.meta.env.VITE_RISKID_SDK_SOURCE_URL
+export const sdkSourceUrl = import.meta.env.VITE_RISKID_SDK_SOURCE_URL;
 
 export function initWhenLoaded() {
-  console.log('Transmit Security platform SDK - adding initialization listener')
-  const platformScript = document.getElementById('ts-platform-script')
+  console.log(
+    "Transmit Security platform SDK - adding initialization listener"
+  );
+  const platformScript = document.getElementById("ts-platform-script");
   if (platformScript) {
-    platformScript.addEventListener('load', async function () {
+    platformScript.addEventListener("load", async function () {
       try {
-        const response = await configApi.getClientId()
+        const response = await configApi.getClientId();
 
-        console.log('Retrieved client id')
-        console.log(response)
+        console.log("Retrieved client id");
+        console.log(response);
         if (response.status == 200) {
-          console.log('TSPlatform -- Starting init')
+          console.log("TSPlatform -- Starting init");
           // https://developer.transmitsecurity.com/guides/risk/quick_start_web/#step-2-load-sdk
           await window.tsPlatform.initialize({
             clientId: response.data.clientId,
             webauthn: { serverPath: import.meta.env.VITE_TS_SERVER_PATH },
-          })
-          console.log('TSPlatform -- End init')
+          });
+          console.log("TSPlatform -- End init");
           // Dispatch an event indicating that the SDK was initialized
           // this is helpful whenever webauthn authentication needs to be used
           // and we need to wait for the SDK
-          const event = new CustomEvent('tsPlatformLoaded', {
+          const event = new CustomEvent("tsPlatformLoaded", {
             detail: {
-              message: 'TSPlatform loaded',
+              message: "TSPlatform loaded",
               time: new Date(),
             },
-          })
-          document.dispatchEvent(event)
-          const userSession = userSessionStore()
-          userSession.setTsPlatformLoaded(true)
+          });
+          document.dispatchEvent(event);
+          const userSession = userSessionStore();
+          userSession.setTsPlatformLoaded(true);
         }
       } catch (error) {
-        console.log('Error while retrieving the client ID')
-        console.log(error)
+        console.log("Error while retrieving the client ID");
+        console.log(error);
       }
-    })
+    });
   } else {
-    console.log('Platform element not found')
+    console.log("Platform element not found");
   }
 }
diff --git a/src/helpers/validationRules.ts b/src/helpers/validationRules.ts
index 4c11152..311a685 100644
--- a/src/helpers/validationRules.ts
+++ b/src/helpers/validationRules.ts
@@ -5,89 +5,128 @@ import {
   minLength,
   alpha,
   alphaNum,
-} from '@vuelidate/validators'
-import i18n from '@/helpers/i18n'
+} from "@vuelidate/validators";
+import i18n from "@/helpers/i18n";
 
 export function signupPasswordRule() {
-  const { t } = i18n.global
+  const { t } = i18n.global;
   return {
-    required: helpers.withMessage(t('validation.password.passwordRequired'), required),
-    minLength: helpers.withMessage(t('validation.password.EightCharacters'), minLength(8)),
+    required: helpers.withMessage(
+      t("validation.password.passwordRequired"),
+      required
+    ),
+    minLength: helpers.withMessage(
+      t("validation.password.EightCharacters"),
+      minLength(8)
+    ),
     $autoDirty: true,
-  }
+  };
 }
 
 export function loginPasswordRule() {
-  const { t } = i18n.global
+  const { t } = i18n.global;
   return {
-    required: helpers.withMessage(t('validation.password.passwordRequired'), required),
+    required: helpers.withMessage(
+      t("validation.password.passwordRequired"),
+      required
+    ),
     $autoDirty: false,
-  }
+  };
 }
 
 export function emailRule() {
-  const { t } = i18n.global
+  const { t } = i18n.global;
   return {
-    required: helpers.withMessage(t('validation.email.emailIsRequired'), required),
-    isEmail: helpers.withMessage(t('validation.email.validEmailRequired'), isEmail),
+    required: helpers.withMessage(
+      t("validation.email.emailIsRequired"),
+      required
+    ),
+    isEmail: helpers.withMessage(
+      t("validation.email.validEmailRequired"),
+      isEmail
+    ),
     $autoDirty: false,
-  }
+  };
 }
 
 export function firstNameRule() {
-  const { t } = i18n.global
+  const { t } = i18n.global;
   return {
-    required: helpers.withMessage(t('validation.firstName.nameRequired'), required),
-    alpha: helpers.withMessage(t('validation.firstName.validNameRequired'), alpha),
+    required: helpers.withMessage(
+      t("validation.firstName.nameRequired"),
+      required
+    ),
+    alpha: helpers.withMessage(
+      t("validation.firstName.validNameRequired"),
+      alpha
+    ),
     $autoDirty: false,
-  }
+  };
 }
 
 export function lastNameRule() {
-  const { t } = i18n.global
+  const { t } = i18n.global;
   return {
-    required: helpers.withMessage(t('validation.lastName.nameRequired'), required),
-    alpha: helpers.withMessage(t('validation.lastName.validNameRequired'), alpha),
+    required: helpers.withMessage(
+      t("validation.lastName.nameRequired"),
+      required
+    ),
+    alpha: helpers.withMessage(
+      t("validation.lastName.validNameRequired"),
+      alpha
+    ),
     $autoDirty: false,
-  }
+  };
 }
 
 export function cityRule() {
-  const { t } = i18n.global
+  const { t } = i18n.global;
   return {
-    required: helpers.withMessage(t('validation.city.cityRequired'), required),
+    required: helpers.withMessage(t("validation.city.cityRequired"), required),
     $autoDirty: false,
-  }
+  };
 }
 
 export function zipCodeRule() {
-  const { t } = i18n.global
+  const { t } = i18n.global;
   return {
-    required: helpers.withMessage(t('validation.zipCode.zipCodeRequired'), required),
+    required: helpers.withMessage(
+      t("validation.zipCode.zipCodeRequired"),
+      required
+    ),
     $autoDirty: false,
-  }
+  };
 }
 
 export function countryRule() {
-  const { t } = i18n.global
+  const { t } = i18n.global;
   return {
-    required: helpers.withMessage(t('validation.country.countryRequired'), required),
+    required: helpers.withMessage(
+      t("validation.country.countryRequired"),
+      required
+    ),
     $autoDirty: false,
-  }
+  };
 }
 
 export function streetRule() {
-  const { t } = i18n.global
+  const { t } = i18n.global;
   return {
-    required: helpers.withMessage(t('validation.street.streetRequired'), required),
+    required: helpers.withMessage(
+      t("validation.street.streetRequired"),
+      required
+    ),
     $autoDirty: false,
-  }
+  };
 }
 
 export function phoneRule() {
-  const { t } = i18n.global
+  const { t } = i18n.global;
   return {
-    required: helpers.withMessage(t('validation.phone.phoneRequired'), required),
+    required: helpers.withMessage(
+      t("validation.phone.phoneRequired"),
+      required
+    ),
     $autoDirty: false,
-  }
+  };
 }
diff --git a/src/main.ts b/src/main.ts
index b2b61e6..24f7cb4 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,29 +1,35 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import router from './router'
-import { createThemeManager } from './plugins/themeManager'
-import { createPinia } from 'pinia'
-import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
-import Toast from 'vue-toastification'
-import axios from 'axios'
-import CountryFlag from 'vue-country-flag-next'
-import i18n from '@/helpers/i18n'
+import { createApp } from "vue";
+import App from "./App.vue";
+import router from "./router";
+import { createThemeManager } from "./plugins/themeManager";
+import { createPinia } from "pinia";
+import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
+import Toast from "vue-toastification";
+import axios from "axios";
+import CountryFlag from "vue-country-flag-next";
+import i18n from "@/helpers/i18n";
 
-import 'vue-toastification/dist/index.css'
-import './assets/style.css'
-import '/node_modules/flag-icons/css/flag-icons.min.css'
+import "vue-toastification/dist/index.css";
+import "./assets/style.css";
+import "/node_modules/flag-icons/css/flag-icons.min.css";
 
-axios.defaults.withCredentials = true
+axios.defaults.withCredentials = true;
 
-const pinia = createPinia()
-pinia.use(piniaPluginPersistedstate)
+const pinia = createPinia();
+pinia.use(piniaPluginPersistedstate);
 
 const app = createApp(App)
   .use(pinia)
   .use(router)
-  .use(createThemeManager({ light: 'breeze', dark: 'storm', watchSystemTheme: true }))
+  .use(
+    createThemeManager({
+      light: "breeze",
+      dark: "storm",
+      watchSystemTheme: true,
+    })
+  )
   .use(i18n)
   .use(Toast)
-  .component('country-flag', CountryFlag)
+  .component("country-flag", CountryFlag);
 
-app.mount('#app')
+app.mount("#app");
diff --git a/src/plugins/themeManager/README.md b/src/plugins/themeManager/README.md
index 02faa65..b8a1e69 100644
--- a/src/plugins/themeManager/README.md
+++ b/src/plugins/themeManager/README.md
@@ -39,20 +39,20 @@ called. Or when "`setTheme('default')`" is being called.
 
 ```ts
 // main.ts
-import { createApp } from 'vue'
-import App from './App.vue'
-import { createThemeManager } from '@/plugins/themeManager'
+import { createApp } from "vue";
+import App from "./App.vue";
+import { createThemeManager } from "@/plugins/themeManager";
 
-const app = createApp(App)
+const app = createApp(App);
 app.use(
   createThemeManager({
-    light: 'breeze',
-    dark: 'storm',
+    light: "breeze",
+    dark: "storm",
     watchSystemTheme: true,
-  }),
-)
+  })
+);
 
-app.mount('#app')
+app.mount("#app");
 ```
 
 <hr />
@@ -76,8 +76,8 @@ const themeManagerInstance = {
 ### Installation
 
 ```ts
-import { useThemeManager } from '@/plugins/themeManager'
-const $theme = useThemeManager()
+import { useThemeManager } from "@/plugins/themeManager";
+const $theme = useThemeManager();
 ```
 
 ### Methods
@@ -89,7 +89,7 @@ const $theme = useThemeManager()
   ```
   usage example:
   ```ts
-  $theme.set('light')
+  $theme.set("light");
   ```
 - `get` - Get the current active theme <br> Type definition:
   ```ts
@@ -97,7 +97,7 @@ const $theme = useThemeManager()
   ```
   Usage example:
   ```ts
-  $theme.get() // ie: 'coffee'
+  $theme.get(); // ie: 'coffee'
   ```
 - `toggleDark` - Toggle between the default light and dark themes that were defined in the plugin
   setup <br> Type definition:
@@ -106,7 +106,7 @@ const $theme = useThemeManager()
   ```
   Usage example:
   ```ts
-  $theme.toggleDark()
+  $theme.toggleDark();
   ```
 - `setDefaults` - Set the default light and dark themes after the plugin has been initiated. <br>
   Type definition:
@@ -115,7 +115,7 @@ const $theme = useThemeManager()
   ```
   Usage example:
   ```ts
-  $theme.setDefaults({ light: 'aqua', dark: 'business' })
+  $theme.setDefaults({ light: "aqua", dark: "business" });
   ```
 - `getDefaults` - Get the default light and dark themes <br> Type definition:
   ```ts
@@ -123,7 +123,7 @@ const $theme = useThemeManager()
   ```
   Usage example:
   ```ts
-  $theme.getDefaults() // ie: { light: 'aqua', dark: 'business' }
+  $theme.getDefaults(); // ie: { light: 'aqua', dark: 'business' }
   ```
 - `watchSystemTheme` - Watch for system theme changes, and set if you want it to update the theme
   `immediately` to the default theme that corresponds to the system mode (light/dark). `updateTheme`
@@ -134,18 +134,18 @@ const $theme = useThemeManager()
   Usage example:
   ```ts
   /* Returns if the theme manager watching the active system theme */
-  $theme.watchSystemTheme() // ie: true
+  $theme.watchSystemTheme(); // ie: true
   /*
     Theme will change to the default theme that corresponds
     to the system mode (light/dark)
   */
-  $theme.watchSystemTheme(true)
+  $theme.watchSystemTheme(true);
   /* theme will remain the same even if the system theme changes */
-  $theme.watchSystemTheme(false)
+  $theme.watchSystemTheme(false);
   /* theme will not change immidiatly to the default theme that corresponds to the system mode (light/dark)
      it will change if the theme of the system changes again
   */
-  $theme.watchSystemTheme(true, false)
+  $theme.watchSystemTheme(true, false);
   ```
 - `isDark` - Get the current system theme <br> Type definition:
   ```ts
@@ -153,5 +153,5 @@ const $theme = useThemeManager()
   ```
   Usage example:
   ```ts
-  $theme.isDark() // ie: true
+  $theme.isDark(); // ie: true
   ```
diff --git a/src/plugins/themeManager/index.ts b/src/plugins/themeManager/index.ts
index 98c00e9..240b796 100644
--- a/src/plugins/themeManager/index.ts
+++ b/src/plugins/themeManager/index.ts
@@ -1,111 +1,118 @@
-import type { App } from 'vue'
-import { defaults, pluginInitiated, currentTheme, isDark } from './reactives'
+import type { App } from "vue";
+import { defaults, pluginInitiated, currentTheme, isDark } from "./reactives";
 export const daisyThemes = [
   // Daisy UI default themes
-  'default',
-  'storm',
-  'breeze',
-  'light',
-  'dark',
-  'cupcake',
-  'bumblebee',
-  'emerald',
-  'corporate',
-  'synthwave',
-  'retro',
-  'cyberpunk',
-  'valentine',
-  'halloween',
-  'garden',
-  'forest',
-  'aqua',
-  'lofi',
-  'pastel',
-  'fantasy',
-  'wireframe',
-  'black',
-  'luxury',
-  'dracula',
-  'cmyk',
-  'autumn',
-  'business',
-  'acid',
-  'lemonade',
-  'night',
-  'coffee',
-  'winter',
+  "default",
+  "storm",
+  "breeze",
+  "light",
+  "dark",
+  "cupcake",
+  "bumblebee",
+  "emerald",
+  "corporate",
+  "synthwave",
+  "retro",
+  "cyberpunk",
+  "valentine",
+  "halloween",
+  "garden",
+  "forest",
+  "aqua",
+  "lofi",
+  "pastel",
+  "fantasy",
+  "wireframe",
+  "black",
+  "luxury",
+  "dracula",
+  "cmyk",
+  "autumn",
+  "business",
+  "acid",
+  "lemonade",
+  "night",
+  "coffee",
+  "winter",
   // Custom themes go here
-  'botanical',
-  'luxe-shop',
-] as const
-export type DaisyThemes = (typeof daisyThemes)[number]
+  "botanical",
+  "luxe-shop",
+] as const;
+export type DaisyThemes = (typeof daisyThemes)[number];
 export type ThemeOptions = {
-  light: DaisyThemes
-  dark: DaisyThemes
-  watchSystemTheme: boolean
-}
+  light: DaisyThemes;
+  dark: DaisyThemes;
+  watchSystemTheme: boolean;
+};
 
 export const useThemeManager = () => {
   const options: ThemeOptions = {
     light: defaults.light,
     dark: defaults.dark,
     watchSystemTheme: defaults.watchSystemTheme,
-  }
+  };
 
   if (!pluginInitiated) {
-    defaults.light = options?.light as DaisyThemes
-    defaults.dark = options?.dark as DaisyThemes
-    defaults.watchSystemTheme = options?.watchSystemTheme
-    currentTheme.value = isDark.value ? defaults.dark : defaults.light
+    defaults.light = options?.light as DaisyThemes;
+    defaults.dark = options?.dark as DaisyThemes;
+    defaults.watchSystemTheme = options?.watchSystemTheme;
+    currentTheme.value = isDark.value ? defaults.dark : defaults.light;
   }
   // Watch for system preferred theme changes
 
-  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
-    isDark.value = event.matches
-    const theme = event.matches ? (defaults.dark as DaisyThemes) : (defaults.light as DaisyThemes)
-    if (defaults.watchSystemTheme === true) setTheme(theme)
-  })
+  window
+    .matchMedia("(prefers-color-scheme: dark)")
+    .addEventListener("change", (event) => {
+      isDark.value = event.matches;
+      const theme = event.matches
+        ? (defaults.dark as DaisyThemes)
+        : (defaults.light as DaisyThemes);
+      if (defaults.watchSystemTheme === true) setTheme(theme);
+    });
 
   // Set theme
   const setTheme = (theme: DaisyThemes) => {
-    const _light = defaults.light as DaisyThemes
-    const _dark = defaults.dark as DaisyThemes
+    const _light = defaults.light as DaisyThemes;
+    const _dark = defaults.dark as DaisyThemes;
     // if default, set theme based on system preferred theme and the default light and dark themes
-    let newTheme: DaisyThemes = 'default'
-    if (theme === 'default') newTheme = isDark.value ? _dark : _light
-    else newTheme = theme
+    let newTheme: DaisyThemes = "default";
+    if (theme === "default") newTheme = isDark.value ? _dark : _light;
+    else newTheme = theme;
 
-    return document.documentElement.setAttribute('data-theme', (currentTheme.value = newTheme))
-  }
-  setTheme(currentTheme.value)
+    return document.documentElement.setAttribute(
+      "data-theme",
+      (currentTheme.value = newTheme)
+    );
+  };
+  setTheme(currentTheme.value);
   // Get theme
   const getTheme = () => {
-    return currentTheme.value
-  }
+    return currentTheme.value;
+  };
   // Toggle dark mode, using default light and dark themes
   const toggleDark = () => {
-    const _light = defaults.light as DaisyThemes
-    const _dark = defaults.dark as DaisyThemes
+    const _light = defaults.light as DaisyThemes;
+    const _dark = defaults.dark as DaisyThemes;
     return document.documentElement.setAttribute(
-      'data-theme',
-      (currentTheme.value = currentTheme.value === _light ? _dark : _light),
-    )
-  }
+      "data-theme",
+      (currentTheme.value = currentTheme.value === _light ? _dark : _light)
+    );
+  };
   // Set default light and dark themes
   const setDefaults = (themes: { light?: DaisyThemes; dark?: DaisyThemes }) => {
-    defaults.light = themes.light ?? defaults.light
-    defaults.dark = themes.dark ?? defaults.dark
-    setTheme('default')
-  }
+    defaults.light = themes.light ?? defaults.light;
+    defaults.dark = themes.dark ?? defaults.dark;
+    setTheme("default");
+  };
   // Get default light and dark themes
   const getDefaults = () => {
-    return { light: defaults.light, dark: defaults.dark }
-  }
+    return { light: defaults.light, dark: defaults.dark };
+  };
   const isWatchingSystemTheme = (bool?: boolean, updateTheme = true) => {
-    if (bool === undefined) return defaults.watchSystemTheme
-    if (bool && updateTheme) setTheme('default')
-    return (defaults.watchSystemTheme = bool)
-  }
+    if (bool === undefined) return defaults.watchSystemTheme;
+    if (bool && updateTheme) setTheme("default");
+    return (defaults.watchSystemTheme = bool);
+  };
 
   const themeManagerInstance = {
     set: setTheme,
@@ -115,16 +122,16 @@ export const useThemeManager = () => {
     getDefaults,
     watchSystemTheme: isWatchingSystemTheme,
     isDark,
-  }
-  pluginInitiated.value = true
-  return { ...themeManagerInstance }
-}
+  };
+  pluginInitiated.value = true;
+  return { ...themeManagerInstance };
+};
 
 export const createThemeManager = (options?: ThemeOptions) => {
   return (app: App) => {
-    defaults.light = options?.light as DaisyThemes
-    defaults.dark = options?.dark as DaisyThemes
-    defaults.watchSystemTheme = options?.watchSystemTheme ?? true
-    app.config.globalProperties.$theme = useThemeManager()
-  }
-}
+    defaults.light = options?.light as DaisyThemes;
+    defaults.dark = options?.dark as DaisyThemes;
+    defaults.watchSystemTheme = options?.watchSystemTheme ?? true;
+    app.config.globalProperties.$theme = useThemeManager();
+  };
+};
diff --git a/src/plugins/themeManager/reactives.ts b/src/plugins/themeManager/reactives.ts
index cf08ea4..a2f8c01 100644
--- a/src/plugins/themeManager/reactives.ts
+++ b/src/plugins/themeManager/reactives.ts
@@ -1,13 +1,13 @@
-import { reactive, ref } from 'vue'
-import type { DaisyThemes, ThemeOptions } from './index'
+import { reactive, ref } from "vue";
+import type { DaisyThemes, ThemeOptions } from "./index";
 const isDark = ref<boolean>(
-  window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches,
-)
+  window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+);
 const defaults = reactive<ThemeOptions>({
-  light: 'light',
-  dark: 'dark',
+  light: "light",
+  dark: "dark",
   watchSystemTheme: false,
-})
-const currentTheme = ref<DaisyThemes>('default')
-const pluginInitiated = ref<boolean>(false)
-export { defaults, currentTheme, pluginInitiated, isDark }
+});
+const currentTheme = ref<DaisyThemes>("default");
+const pluginInitiated = ref<boolean>(false);
+export { defaults, currentTheme, pluginInitiated, isDark };
diff --git a/src/router/account.ts b/src/router/account.ts
index 72242bf..eca7e56 100644
--- a/src/router/account.ts
+++ b/src/router/account.ts
@@ -1,74 +1,74 @@
 export default [
   {
-    path: '/account',
-    name: 'account',
-    component: () => import('@/views/AccountView.vue'),
+    path: "/account",
+    name: "account",
+    component: () => import("@/views/AccountView.vue"),
     meta: {
       requiresAuth: true,
     },
   },
   {
-    path: '/account/profile',
-    name: 'accountProfile',
-    component: () => import('@/views/AccountView.vue'),
+    path: "/account/profile",
+    name: "accountProfile",
+    component: () => import("@/views/AccountView.vue"),
     meta: {
       requiresAuth: true,
     },
   },
   {
-    path: '/account/settings',
-    name: 'accountSettings',
-    component: () => import('@/views/AccountView.vue'),
+    path: "/account/settings",
+    name: "accountSettings",
+    component: () => import("@/views/AccountView.vue"),
     meta: {
       requiresAuth: true,
     },
   },
   {
-    path: '/account/security',
-    name: 'accountSecurity',
-    component: () => import('@/views/AccountView.vue'),
+    path: "/account/security",
+    name: "accountSecurity",
+    component: () => import("@/views/AccountView.vue"),
     meta: {
       requiresAuth: true,
     },
   },
   {
-    path: '/account/cards',
-    name: 'accountCards',
-    component: () => import('@/views/AccountView.vue'),
+    path: "/account/cards",
+    name: "accountCards",
+    component: () => import("@/views/AccountView.vue"),
     meta: {
       requiresAuth: true,
     },
   },
   {
-    path: '/account/transfers',
-    name: 'accountTransfers',
-    component: () => import('@/views/AccountView.vue'),
+    path: "/account/transfers",
+    name: "accountTransfers",
+    component: () => import("@/views/AccountView.vue"),
     meta: {
       requiresAuth: true,
     },
   },
   {
-    path: '/account/notifications',
-    name: 'accountNotifications',
-    component: () => import('@/views/AccountView.vue'),
+    path: "/account/notifications",
+    name: "accountNotifications",
+    component: () => import("@/views/AccountView.vue"),
     meta: {
       requiresAuth: true,
     },
   },
   {
-    path: '/webauthn/register',
-    name: 'registerWebauthn',
-    component: () => import('@/views/webauthn/WebauthnRegistration.vue'),
+    path: "/webauthn/register",
+    name: "registerWebauthn",
+    component: () => import("@/views/webauthn/WebauthnRegistration.vue"),
     meta: {
       requiresAuth: true,
     },
   },
   {
-    path: '/webauthn/register/success',
-    name: 'webauthnRegistrationSuccess',
-    component: () => import('@/views/webauthn/WebauthnRegistrationSuccess.vue'),
+    path: "/webauthn/register/success",
+    name: "webauthnRegistrationSuccess",
+    component: () => import("@/views/webauthn/WebauthnRegistrationSuccess.vue"),
     meta: {
       requiresAuth: true,
     },
   },
-]
+];
diff --git a/src/router/authentication.ts b/src/router/authentication.ts
index c0ee477..7bfe170 100644
--- a/src/router/authentication.ts
+++ b/src/router/authentication.ts
@@ -1,18 +1,18 @@
 export default [
   {
-    path: '/login',
-    name: 'login',
-    component: () => import('@/views/LoginView.vue'),
+    path: "/login",
+    name: "login",
+    component: () => import("@/views/LoginView.vue"),
     meta: {
       requiresNotAuth: true,
     },
   },
   {
-    path: '/signup',
-    name: 'signup',
-    component: () => import('@/views/SignupView.vue'),
+    path: "/signup",
+    name: "signup",
+    component: () => import("@/views/SignupView.vue"),
     meta: {
       requiresNotAuth: true,
     },
   },
-]
+];
diff --git a/src/router/bank.ts b/src/router/bank.ts
index 2473658..26a2bd8 100644
--- a/src/router/bank.ts
+++ b/src/router/bank.ts
@@ -1,12 +1,12 @@
 export default [
   {
-    path: '/bank/transfer/select',
-    name: 'BankTransferSelect',
-    component: () => import('@/views/bank/BankTransferSelectionView.vue'),
+    path: "/bank/transfer/select",
+    name: "BankTransferSelect",
+    component: () => import("@/views/bank/BankTransferSelectionView.vue"),
   },
   {
-    path: '/bank/transfer/validate',
-    name: 'BankTransferValidate',
-    component: () => import('@/views/bank/BankTransferValidationView.vue'),
+    path: "/bank/transfer/validate",
+    name: "BankTransferValidate",
+    component: () => import("@/views/bank/BankTransferValidationView.vue"),
   },
-]
+];
diff --git a/src/router/home.ts b/src/router/home.ts
index fac2396..99e5c9c 100644
--- a/src/router/home.ts
+++ b/src/router/home.ts
@@ -1,20 +1,20 @@
 export default [
   {
-    path: '/',
-    name: 'home',
-    component: () => import('../views/HomeView.vue'),
+    path: "/",
+    name: "home",
+    component: () => import("../views/HomeView.vue"),
   },
   {
-    path: '/about',
-    name: 'about',
+    path: "/about",
+    name: "about",
     // route level code-splitting
     // this generates a separate chunk (About.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
-    component: () => import('../views/AboutView.vue'),
+    component: () => import("../views/AboutView.vue"),
   },
   {
-    path: '/theme-preview',
-    name: 'theme-preview',
-    component: () => import('../views/ThemeView.vue'),
+    path: "/theme-preview",
+    name: "theme-preview",
+    component: () => import("../views/ThemeView.vue"),
   },
-]
+];
diff --git a/src/router/index.ts b/src/router/index.ts
index 308d13d..a36ee22 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,11 +1,11 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import home from './home'
-import account from './account'
-import authentication from './authentication'
-import { loadSession } from '@/helpers/session'
-import { userSessionStore } from '@/store/userSession'
-import NotFoundView from '@/views/NotFoundView.vue'
-import bank from './bank'
+import { createRouter, createWebHistory } from "vue-router";
+import home from "./home";
+import account from "./account";
+import authentication from "./authentication";
+import { loadSession } from "@/helpers/session";
+import { userSessionStore } from "@/store/userSession";
+import NotFoundView from "@/views/NotFoundView.vue";
+import bank from "./bank";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -14,55 +14,55 @@ const router = createRouter({
     ...account,
     ...authentication,
     ...bank,
-    { path: '/:pathMatch(.*)*', name: 'notFound', component: NotFoundView },
+    { path: "/:pathMatch(.*)*", name: "notFound", component: NotFoundView },
   ],
   scrollBehavior(to, from, savedPosition) {
     if (to.hash) {
       return {
         el: to.hash,
-        behavior: 'smooth',
-      }
+        behavior: "smooth",
+      };
     } else {
-      return { top: 0, behavior: 'smooth' }
+      return { top: 0, behavior: "smooth" };
     }
   },
-})
+});
 
 router.beforeEach(async (to, from, next) => {
-  const sessionStore = userSessionStore()
-  console.log('path', to.path)
+  const sessionStore = userSessionStore();
+  console.log("path", to.path);
   // If the session is not loaded, and the page requires a session load
   if (
     !sessionStore.sessionLoaded &&
     sessionStore.tsPlatformLoaded &&
-    !to.matched.some(record => record.meta.noLoad)
+    !to.matched.some((record) => record.meta.noLoad)
   ) {
-    const result = await loadSession()
-    sessionStore.setSessionLoaded(true)
+    const result = await loadSession();
+    sessionStore.setSessionLoaded(true);
     if (result) {
-      sessionStore.setAuthenticated(true)
+      sessionStore.setAuthenticated(true);
       // Prevent logged in user to go to login pages
-      if (to.matched.some(record => record.meta.requiresNotAuth)) next('/')
-      else next()
+      if (to.matched.some((record) => record.meta.requiresNotAuth)) next("/");
+      else next();
     } else {
       // No session loaded
-      sessionStore.setAuthenticated(false)
-      if (to.matched.some(record => record.meta.requiresAuth)) next('/login')
-      else next()
+      sessionStore.setAuthenticated(false);
+      if (to.matched.some((record) => record.meta.requiresAuth)) next("/login");
+      else next();
     }
   } else if (
     sessionStore.isAuthenticated &&
-    to.matched.some(record => record.meta.requiresNotAuth)
+    to.matched.some((record) => record.meta.requiresNotAuth)
   ) {
     // If the user is authenticated but the page requires the user to be logged out
-    next('/')
+    next("/");
   } else if (!sessionStore.isAuthenticated) {
     // Prevent logged out user to go to pages requiring a session
-    if (to.matched.some(record => record.meta.requiresAuth)) next('/login')
-    else next()
+    if (to.matched.some((record) => record.meta.requiresAuth)) next("/login");
+    else next();
   } else {
-    next()
+    next();
   }
-})
+});
 
-export default router
+export default router;
diff --git a/src/scripts/log-help.js b/src/scripts/log-help.js
index 97bf73a..514be2b 100644
--- a/src/scripts/log-help.js
+++ b/src/scripts/log-help.js
@@ -1,30 +1,37 @@
-const fs = require('fs')
-const scripts = Object.keys(JSON.parse(fs.readFileSync('./package.json')).scripts || {})
+const fs = require("fs");
+const scripts = Object.keys(
+  JSON.parse(fs.readFileSync("./package.json")).scripts || {}
+);
 const scriptList = {
-  dev: '                 Start the development environment',
-  build: '               Type check and build the app',
-  'build-only': '          Build the app',
-  'build-test': '          Build the app and run the unit & e2e (headless) tests',
-  preview: '             Run the app on _preview_ mode',
-  test: '                Run the unit tests and e2e tests',
-  'test:headless': '       Run the unit tests and e2e tests (headless)',
-  'test:unit': '           Run only the unit tests',
-  'test:unit:watch': '     Watch the unit tests',
-  'test:e2e': '            Run only the e2e tests',
-  'test:e2e:headless': '   Run only the e2e tests (headless)',
-  'test:e2e:desktop': '    Run only the e2e tests on desktop',
-  'test:e2e:mobile': '     Run only the e2e tests on mobile',
-  'e2e:report': '          Show the e2e test report',
-  'e2e:report:mobile': '   Show the e2e headless test report for mobile',
-  'e2e:report:desktop': '  Show the e2e headless test report for desktop',
-  'vite:inspect': '        Inspect the vite build on the localhost (after build)',
-  'rollup:inspect': '      Inspect the rollup bundling on the localhost (after build)',
-  coverage: '            Run the unit tests and generate a coverage report (c8)',
-  'type-check': '          Type check the app',
-  lint: '                Lint the app with ESlint',
-  format: '              Format the app with prettier',
-}
-scripts.forEach(script => {
-  if (Object.keys(scriptList).includes(script)) console.log(`${script}   ${scriptList[script]}`)
-  else console.log(`${script}`)
-})
+  dev: "                 Start the development environment",
+  build: "               Type check and build the app",
+  "build-only": "          Build the app",
+  "build-test":
+    "          Build the app and run the unit & e2e (headless) tests",
+  preview: "             Run the app on _preview_ mode",
+  test: "                Run the unit tests and e2e tests",
+  "test:headless": "       Run the unit tests and e2e tests (headless)",
+  "test:unit": "           Run only the unit tests",
+  "test:unit:watch": "     Watch the unit tests",
+  "test:e2e": "            Run only the e2e tests",
+  "test:e2e:headless": "   Run only the e2e tests (headless)",
+  "test:e2e:desktop": "    Run only the e2e tests on desktop",
+  "test:e2e:mobile": "     Run only the e2e tests on mobile",
+  "e2e:report": "          Show the e2e test report",
+  "e2e:report:mobile": "   Show the e2e headless test report for mobile",
+  "e2e:report:desktop": "  Show the e2e headless test report for desktop",
+  "vite:inspect":
+    "        Inspect the vite build on the localhost (after build)",
+  "rollup:inspect":
+    "      Inspect the rollup bundling on the localhost (after build)",
+  coverage:
+    "            Run the unit tests and generate a coverage report (c8)",
+  "type-check": "          Type check the app",
+  lint: "                Lint the app with ESlint",
+  format: "              Format the app with prettier",
+};
+scripts.forEach((script) => {
+  if (Object.keys(scriptList).includes(script))
+    console.log(`${script}   ${scriptList[script]}`);
+  else console.log(`${script}`);
+});
diff --git a/src/store/dto/UserSignupDto.ts b/src/store/dto/UserSignupDto.ts
index d88e08f..f13d01c 100644
--- a/src/store/dto/UserSignupDto.ts
+++ b/src/store/dto/UserSignupDto.ts
@@ -1,16 +1,16 @@
 export default interface UserSignupDto {
-  email: string
-  secondaryEmails: Array<string>
-  phone: string
-  secondaryPhones: Array<string>
-  username: string
-  birthday: string
-  street: string
-  country: string
-  city: string
-  postalCode: string
-  firstName: string
-  lastName: string
-  title: string
-  password: string
+  email: string;
+  secondaryEmails: Array<string>;
+  phone: string;
+  secondaryPhones: Array<string>;
+  username: string;
+  birthday: string;
+  street: string;
+  country: string;
+  city: string;
+  postalCode: string;
+  firstName: string;
+  lastName: string;
+  title: string;
+  password: string;
 }
diff --git a/src/store/userPreferences.ts b/src/store/userPreferences.ts
index 7f84750..6b237c1 100644
--- a/src/store/userPreferences.ts
+++ b/src/store/userPreferences.ts
@@ -1,22 +1,22 @@
-import { defineStore } from 'pinia'
+import { defineStore } from "pinia";
 
-export const userPreferenceStore = defineStore('preferences', {
+export const userPreferenceStore = defineStore("preferences", {
   state: () => ({
-    language: '',
-    theme: '',
+    language: "",
+    theme: "",
     suggestWebauthn: true,
   }),
   actions: {
     async setLanguage(locale: string) {
-      this.language = locale
+      this.language = locale;
     },
     async setTheme(theme: string) {
-      this.theme = theme
+      this.theme = theme;
     },
     async setSuggestWebauthn(value: boolean) {
-      this.suggestWebauthn = value
+      this.suggestWebauthn = value;
     },
   },
   // Preferences are persisted in the local storage
   persist: true,
-})
+});
diff --git a/src/store/userSession.ts b/src/store/userSession.ts
index 88c0897..5b58ee9 100644
--- a/src/store/userSession.ts
+++ b/src/store/userSession.ts
@@ -1,47 +1,47 @@
-import { defineStore } from 'pinia'
+import { defineStore } from "pinia";
 import {
   UserApi,
   type UserAddressDto,
   type UserDto,
-} from '@transmitsecurity-dev/ts-demo-client-lib'
-import type UserSignupDto from '@/store/dto/UserSignupDto'
-import { deleteCookie } from '@/helpers/session'
+} from "@transmitsecurity-dev/ts-demo-client-lib";
+import type UserSignupDto from "@/store/dto/UserSignupDto";
+import { deleteCookie } from "@/helpers/session";
 
-const userApi = new UserApi(undefined, import.meta.env.VITE_BACKEND_URL)
+const userApi = new UserApi(undefined, import.meta.env.VITE_BACKEND_URL);
 const defaultSignupData = {
-  firstName: '',
-  lastName: '',
-  email: '',
-  phone: '',
+  firstName: "",
+  lastName: "",
+  email: "",
+  phone: "",
   secondaryEmails: [],
   secondaryPhones: [],
-  street: '',
-  city: '',
-  postalCode: '',
-  country: '',
-  birthday: '',
-  password: '',
-  title: '',
-  username: '',
-} as UserSignupDto
+  street: "",
+  city: "",
+  postalCode: "",
+  country: "",
+  birthday: "",
+  password: "",
+  title: "",
+  username: "",
+} as UserSignupDto;
 
-export const userSessionStore = defineStore('main', {
+export const userSessionStore = defineStore("main", {
   state: () => ({
     bankData: {
       transfer: {
         selectedAccount: {
-          holder: '',
-          name: '',
+          holder: "",
+          name: "",
           balance: 0,
-          number: '1',
+          number: "1",
         },
-        beneficiaryAccount: '',
+        beneficiaryAccount: "",
         amount: 0,
         date: new Date(),
       },
     },
     signupData: defaultSignupData,
-    idoSerializedState: '',
+    idoSerializedState: "",
     idoResponse: {} as any,
     userData: {} as UserDto,
     sessionLoaded: false,
@@ -49,148 +49,160 @@ export const userSessionStore = defineStore('main', {
     tsPlatformLoaded: false,
     webauthn: {
       supported: false,
-      sessionId: '',
-      deviceBindingToken: '',
+      sessionId: "",
+      deviceBindingToken: "",
     },
   }),
   getters: {
-    isAuthenticated: state => {
-      return state.authenticated
+    isAuthenticated: (state) => {
+      return state.authenticated;
     },
     webauthnSupported(state) {
-      return state.webauthn.supported
+      return state.webauthn.supported;
     },
     creationDate(state) {
-      return new Date(state.userData.created_at)
+      return new Date(state.userData.created_at);
     },
     firstName(state) {
-      let firstName = ''
+      let firstName = "";
       if (state.userData) {
         if (state.userData.name && state.userData.name.first_name) {
-          firstName = state.userData.name.first_name
+          firstName = state.userData.name.first_name;
         }
       }
-      return firstName
+      return firstName;
     },
     lastName(state) {
-      let lastName = ''
+      let lastName = "";
       if (state.userData) {
         if (state.userData.name && state.userData.name.last_name) {
-          lastName = state.userData.name.last_name
+          lastName = state.userData.name.last_name;
         }
       }
-      return lastName
+      return lastName;
     },
     birthday(state) {
-      let birthday
+      let birthday;
       if (state.userData) {
         if (state.userData && state.userData.birthday) {
-          const storedBirthday = state.userData.birthday
-          birthday = new Date(storedBirthday)
+          const storedBirthday = state.userData.birthday;
+          birthday = new Date(storedBirthday);
         }
       }
-      return birthday
+      return birthday;
     },
     formattedBirthday(state) {
-      let birthday = ''
+      let birthday = "";
       if (state.userData && state.userData.birthday) {
-        const storedBirthday = state.userData.birthday
-        birthday = new Date(storedBirthday).toLocaleDateString()
+        const storedBirthday = state.userData.birthday;
+        birthday = new Date(storedBirthday).toLocaleDateString();
       }
-      return birthday
+      return birthday;
     },
     fullName(state) {
-      let fullName
+      let fullName;
       if (state.userData) {
-        const emailAddress = state.userData.email?.value
-        if (state.userData.name && (this.firstName != '' || this.lastName != '')) {
-          const first = state.userData.name.first_name
-          const last = state.userData.name.last_name
-          if (this.firstName != '') {
-            fullName = first + ' ' + last
-          } else if (this.firstName == '' && this.lastName != '') {
-            fullName = last
+        const emailAddress = state.userData.email?.value;
+        if (
+          state.userData.name &&
+          (this.firstName != "" || this.lastName != "")
+        ) {
+          const first = state.userData.name.first_name;
+          const last = state.userData.name.last_name;
+          if (this.firstName != "") {
+            fullName = first + " " + last;
+          } else if (this.firstName == "" && this.lastName != "") {
+            fullName = last;
           } else {
-            fullName = ''
+            fullName = "";
           }
         } else if (state.userData.email) {
-          fullName = emailAddress
+          fullName = emailAddress;
         } else if (state.userData.phone_number) {
-          fullName = state.userData.phone_number.value
+          fullName = state.userData.phone_number.value;
         } else {
-          fullName = ''
+          fullName = "";
         }
       } else {
-        fullName = ''
+        fullName = "";
       }
-      return fullName
+      return fullName;
     },
     phone(state) {
-      const userData = state.userData
-      return userData.phone_number?.value || ''
+      const userData = state.userData;
+      return userData.phone_number?.value || "";
     },
     phoneVerified(state): boolean {
-      const userData = state.userData
-      return userData.phone_number?.phone_number_verified?.valueOf() || false
+      const userData = state.userData;
+      return userData.phone_number?.phone_number_verified?.valueOf() || false;
     },
     showPhoneNumberVerified(): boolean {
-      return this.phone !== ''
+      return this.phone !== "";
     },
     email(state) {
-      const userData = state.userData
-      return userData.email?.value || ''
+      const userData = state.userData;
+      return userData.email?.value || "";
     },
     emailVerified(state): boolean {
-      const userData = state.userData
-      return userData.email?.email_verified?.valueOf() || false
+      const userData = state.userData;
+      return userData.email?.email_verified?.valueOf() || false;
     },
     showEmailVerified(): boolean {
-      return this.email !== ''
+      return this.email !== "";
     },
     personalInfoMissing(): boolean {
-      return this.firstName == '' || this.lastName == ''
+      return this.firstName == "" || this.lastName == "";
     },
     customData(state) {
-      const userData = state.userData
-      let customData = null
+      const userData = state.userData;
+      let customData = null;
       if (userData && userData.custom_app_data) {
-        customData = userData.custom_app_data
+        customData = userData.custom_app_data;
       }
-      return customData
+      return customData;
     },
     address(state): UserAddressDto {
-      let address = {}
+      let address = {};
       if (state.userData && state.userData.address) {
-        address = state.userData.address
+        address = state.userData.address;
       }
-      return address
+      return address;
     },
   },
   actions: {
     async setTsPlatformLoaded(loaded: boolean) {
-      this.tsPlatformLoaded = loaded
+      this.tsPlatformLoaded = loaded;
     },
-    async setPersonalInfo(firstName: string, lastName: string, birthday: string | null) {
-      let update
+    async setPersonalInfo(
+      firstName: string,
+      lastName: string,
+      birthday: string | null
+    ) {
+      let update;
       if (birthday) {
         update = await userApi.update({
           name: { first_name: firstName, last_name: lastName },
           birthday: birthday,
-        })
+        });
       } else {
         update = await userApi.update({
           name: { first_name: firstName, last_name: lastName },
-        })
+        });
       }
 
       if (update.status == 200) {
-        console.log('Update user data', update.data)
-        this.setUserData(update.data)
-        return true
+        console.log("Update user data", update.data);
+        this.setUserData(update.data);
+        return true;
       }
-      return false
+      return false;
     },
-    async setAddress(street: string, city: string, postalCode: string, country: string) {
+    async setAddress(
+      street: string,
+      city: string,
+      postalCode: string,
+      country: string
+    ) {
       const update = await userApi.update({
         address: {
           city,
@@ -198,46 +210,49 @@ export const userSessionStore = defineStore('main', {
           postal_code: postalCode,
           country,
         },
-      })
+      });
 
       if (update.status == 200) {
-        console.log('Update user address', update.data)
-        this.setUserData(update.data)
-        return true
+        console.log("Update user address", update.data);
+        this.setUserData(update.data);
+        return true;
       }
-      return false
+      return false;
     },
     async refreshUserData() {
-      const refresh = await userApi.getCurrentUser()
+      const refresh = await userApi.getCurrentUser();
       if (refresh.status == 200) {
-        console.log('Refreshed user data')
-        console.log(refresh.data)
-        this.setUserData(refresh.data.userData)
+        console.log("Refreshed user data");
+        console.log(refresh.data);
+        this.setUserData(refresh.data.userData);
       }
     },
     setAuthenticated(authenticated: boolean) {
-      this.authenticated = authenticated
+      this.authenticated = authenticated;
     },
     setUserData(userData: UserDto) {
-      this.userData = userData
+      this.userData = userData;
     },
     setSessionLoaded(loaded: boolean) {
-      this.sessionLoaded = loaded
+      this.sessionLoaded = loaded;
     },
     setWebAuthnSupported(supported: boolean) {
-      this.webauthn.supported = supported
+      this.webauthn.supported = supported;
     },
-    setWebAuthnAuthenticationSession(sessionId: string, deviceBindingToken: string) {
-      this.webauthn.sessionId = sessionId
-      this.webauthn.deviceBindingToken = deviceBindingToken
+    setWebAuthnAuthenticationSession(
+      sessionId: string,
+      deviceBindingToken: string
+    ) {
+      this.webauthn.sessionId = sessionId;
+      this.webauthn.deviceBindingToken = deviceBindingToken;
     },
     clearSignupData() {
-      this.signupData = defaultSignupData
+      this.signupData = defaultSignupData;
     },
     clear() {
-      this.userData = {} as UserDto
-      this.setAuthenticated(false)
-      deleteCookie('connect.sid')
+      this.userData = {} as UserDto;
+      this.setAuthenticated(false);
+      deleteCookie("connect.sid");
     },
   },
-})
+});
diff --git a/src/tsIdo.d.ts b/src/tsIdo.d.ts
index 83bd30c..e70ef2e 100644
--- a/src/tsIdo.d.ts
+++ b/src/tsIdo.d.ts
@@ -1,20 +1,20 @@
 interface IdoServiceResponse {
-  type: IdoServiceResponseType
-  rejectionReason?: string
-  data?: any
-  journeyStepId?: string
-  clientResponseOptions?: Map<string, ClientResponseOption>
+  type: IdoServiceResponseType;
+  rejectionReason?: string;
+  data?: any;
+  journeyStepId?: string;
+  clientResponseOptions?: Map<string, ClientResponseOption>;
 }
 
 interface ClientResponseOption {
-  type: ClientResponseOptionType
-  id: string
-  label: string
+  type: ClientResponseOptionType;
+  id: string;
+  label: string;
 }
 
 interface StartJourneyOptions {
-  additionalParams?: object
-  flowId?: string
+  additionalParams?: object;
+  flowId?: string;
 }
 
 /**
@@ -36,31 +36,31 @@ enum ErrorCode {
   /**
    * @description The init options object is invalid.
    */
-  InvalidInitOptions = 'invalid_initialization_options',
+  InvalidInitOptions = "invalid_initialization_options",
   /**
    * @description The sdk is not initialized.
    */
-  NotInitialized = 'not_initialized',
+  NotInitialized = "not_initialized",
   /**
    * @description There is no active Journey.
    */
-  NoActiveJourney = 'no_active_journey',
+  NoActiveJourney = "no_active_journey",
   /**
    * @description Unable to receive response from the server.
    */
-  NetworkError = 'network_error',
+  NetworkError = "network_error",
   /**
    * @description The client response to the Journey is not valid.
    */
-  ClientResponseNotValid = 'client_response_not_valid',
+  ClientResponseNotValid = "client_response_not_valid",
   /**
    * @description The server returned an unexpected error.
    */
-  ServerError = 'server_error',
+  ServerError = "server_error",
   /**
    * @description The provided state is not valid for SDK state recovery.
    */
-  InvalidState = 'invalid_state',
+  InvalidState = "invalid_state",
 }
 
 /**
@@ -71,15 +71,15 @@ enum ClientResponseOptionType {
   /**
    * @description Client response option type for client input.
    */
-  ClientInput = 'client_input',
+  ClientInput = "client_input",
   /**
    * @description Client response option type for cancelation branch in the Journey, used for canceling the current step.
    */
-  Cancel = 'cancel',
+  Cancel = "cancel",
   /**
    * @description Client response option type for custom branch in the Journey, used for custom branching.
    */
-  Custom = 'custom',
+  Custom = "custom",
 }
 
 /**
@@ -90,19 +90,19 @@ enum IdoServiceResponseType {
   /**
    * @description The Journey ended successfully.
    */
-  JourneySuccess = 'journey_success',
+  JourneySuccess = "journey_success",
   /**
    * @description The Journey reached a step that requires client input.
    */
-  ClientInputRequired = 'client_input_required',
+  ClientInputRequired = "client_input_required",
   /**
    * @description The current Journey step updated the client data or provided an error message.
    */
-  ClientInputUpdateRequired = 'client_input_update_required',
+  ClientInputUpdateRequired = "client_input_update_required",
   /**
    * @description The Journey ended with explicit rejection.
    */
-  JourneyRejection = 'journey_rejection',
+  JourneyRejection = "journey_rejection",
 }
 
 /**
@@ -113,19 +113,19 @@ enum IdoJourneyActionType {
   /**
    * @description `journeyStepId` for a Rejection action.
    */
-  Rejection = 'action:rejection',
+  Rejection = "action:rejection",
   /**
    * @description `journeyStepId` for an Information action.
    */
-  Information = 'action:information',
+  Information = "action:information",
   /**
    * @description `journeyStepId` for a server side debugger breakpoint.
    */
-  DebugBreak = 'action:debug_break',
+  DebugBreak = "action:debug_break",
   /**
    * @description `journeyStepId` for a wait for Cross Session Message.
    */
-  WaitForAnotherDevice = 'action:wait_for_another_device',
+  WaitForAnotherDevice = "action:wait_for_another_device",
   /**
    * @description `journeyStepId` for device crypto binding action.
    * This action is presented to the client side when the journey has a form with the ID `"action:crypto_binding_registration"`.
@@ -139,10 +139,10 @@ enum IdoJourneyActionType {
    * ```
    * The server should store the key and the ID for future device identity validation.
    */
-  CryptoBindingRegistration = 'action:crypto_binding_registration',
+  CryptoBindingRegistration = "action:crypto_binding_registration",
   /**
    * @description `journeyStepId` for device crypto binding validation action.
    * This action is presented to the client side when the journey has a form with the ID `"action:crypto_binding_validation"`.
    */
-  CryptoBindingValidation = 'action:crypto_binding_validation',
+  CryptoBindingValidation = "action:crypto_binding_validation",
 }
diff --git a/src/tsPlatform.d.ts b/src/tsPlatform.d.ts
index 01e91ef..86aad51 100644
--- a/src/tsPlatform.d.ts
+++ b/src/tsPlatform.d.ts
@@ -1,17 +1,23 @@
 interface tsPlatform {
-  drs: tsPlatformDrs
-  ido: tsPlatformIdo
-  webauthn: any
+  drs: tsPlatformDrs;
+  ido: tsPlatformIdo;
+  webauthn: any;
 }
 interface tsPlatformDrs {
-  setAuthenticatedUser(userId: string): Promise
-  triggerActionEvent(actionType: string): Promise
-  init(): void
+  setAuthenticatedUser(userId: string): Promise;
+  triggerActionEvent(actionType: string): Promise;
+  init(): void;
 }
 
 interface tsPlatformIdo {
-  startJourney(journeyId: string, options: StartJourneyOptions): Promise<IdoServiceResponse>
-  submitClientResponse(clientResponseOptionId: string, data?: object): Promise<IdoServiceResponse>
-  serializeState(): string
-  restoreFromSerializedState(state: string): IdoServiceResponse
+  startJourney(
+    journeyId: string,
+    options: StartJourneyOptions
+  ): Promise<IdoServiceResponse>;
+  submitClientResponse(
+    clientResponseOptionId: string,
+    data?: object
+  ): Promise<IdoServiceResponse>;
+  serializeState(): string;
+  restoreFromSerializedState(state: string): IdoServiceResponse;
 }
diff --git a/src/tsPlatform.errors.d.ts b/src/tsPlatform.errors.d.ts
index c8fca4b..ec8d53c 100644
--- a/src/tsPlatform.errors.d.ts
+++ b/src/tsPlatform.errors.d.ts
@@ -6,15 +6,15 @@ interface SdkError {
   /**
    * Error code from {@link ErrorCode}
    */
-  readonly errorCode: ErrorCode
+  readonly errorCode: ErrorCode;
   /**
    * Error message
    */
-  readonly message: string
+  readonly message: string;
   /**
    * Additional data
    */
-  readonly data?: any
+  readonly data?: any;
 }
 
 /**
@@ -24,44 +24,44 @@ enum ErrorCode {
   /**
    * Either the SDK init call failed or another function was called before initializing the SDK
    */
-  NotInitialized = 'not_initialized',
+  NotInitialized = "not_initialized",
   /**
    * When the call to {@link WebauthnApis.startAuthentication} failed
    */
-  AuthenticationFailed = 'authentication_failed',
+  AuthenticationFailed = "authentication_failed",
   /**
    * When {@link  WebauthnAuthenticationFlows.modal authenticate.modal} or {@link  AutofillHandlers.activate authenticate.autofill.activate} is called and the modal is closed by the user
    */
-  AuthenticationCanceled = 'webauthn_authentication_canceled',
+  AuthenticationCanceled = "webauthn_authentication_canceled",
   /**
    * When the call to {@link WebauthnApis.startRegistration} failed
    */
-  RegistrationFailed = 'registration_failed',
+  RegistrationFailed = "registration_failed",
   /**
    * When {@link register} is called and the modal is closed by the user
    */
-  RegistrationCanceled = 'webauthn_registration_canceled',
+  RegistrationCanceled = "webauthn_registration_canceled",
   /**
    * Passkey autofill authentication was aborted by {@link AutofillHandlers.abort}
    */
-  AutofillAuthenticationAborted = 'autofill_authentication_aborted',
+  AutofillAuthenticationAborted = "autofill_authentication_aborted",
   /**
    * Passkey authentication is already active. To start a new authentication, abort the current one first by calling {@link AutofillHandlers.abort}
    */
-  AuthenticationProcessAlreadyActive = 'authentication_process_already_active',
+  AuthenticationProcessAlreadyActive = "authentication_process_already_active",
   /**
    * The {@link ApprovalData} parameter was sent in the wrong format
    * @ignore
    */
-  InvalidApprovalData = 'invalid_approval_data',
+  InvalidApprovalData = "invalid_approval_data",
   /**
    * When the call to {@link WebauthnApis.initCrossDeviceAuthentication}  failed   */
-  FailedToInitCrossDeviceSession = 'cross_device_init_failed',
+  FailedToInitCrossDeviceSession = "cross_device_init_failed",
   /**
    * When the call to {@link WebauthnApis.getCrossDeviceTicketStatus}  failed   */
-  FailedToGetCrossDeviceStatus = 'cross_device_status_failed',
+  FailedToGetCrossDeviceStatus = "cross_device_status_failed",
   /**
    * When the SDK operation fails on an unhandled error
    */
-  Unknown = 'unknown',
+  Unknown = "unknown",
 }
diff --git a/src/tsWebauthn.d.ts b/src/tsWebauthn.d.ts
index a3e2b84..47b251e 100644
--- a/src/tsWebauthn.d.ts
+++ b/src/tsWebauthn.d.ts
@@ -2,50 +2,50 @@
  * WebAuthn registration response interfaces
  */
 interface ApiStartRegistrationResponse {
-  webauthn_session_id: string
-  credential_creation_options: any
+  webauthn_session_id: string;
+  credential_creation_options: any;
 }
 
 /**
  * WebAuthn authentication response interfaces
  */
 interface ApiStartAuthenticationResponse {
-  webauthn_session_id: string
-  credential_request_options: any
+  webauthn_session_id: string;
+  credential_request_options: any;
 }
 
 enum AuthenticationMediationType {
-  InputAutofill = 'input-autofill',
-  Modal = 'modal',
+  InputAutofill = "input-autofill",
+  Modal = "modal",
 }
 /**
  * WebAuthn cross device interfaces
  */
 enum WebauthnCrossDeviceStatus {
-  Pending = 'pending',
-  Scanned = 'scanned',
-  Success = 'success',
-  Error = 'error',
-  Timeout = 'timeout',
-  Aborted = 'aborted',
+  Pending = "pending",
+  Scanned = "scanned",
+  Success = "success",
+  Error = "error",
+  Timeout = "timeout",
+  Aborted = "aborted",
 }
 
 interface CrossDeviceController {
   /**
    * Ticket ID for this cross-device flow.
    */
-  crossDeviceTicketId: string
+  crossDeviceTicketId: string;
   /**
    * Stops listening for events from devices in cross-device flows
    */
-  stop: () => void
+  stop: () => void;
 }
 
 /**
  * WebAuthn cross device init response interfaces
  */
 interface ApiCrossDeviceInitResponse {
-  cross_device_ticket_id: string
+  cross_device_ticket_id: string;
 }
 
 /**
@@ -55,12 +55,12 @@ interface ApiCrossDeviceStatusResponse {
   /**
    * cross device status
    */
-  status: WebauthnCrossDeviceStatus
+  status: WebauthnCrossDeviceStatus;
 
   /**
    * authentication session id
    */
-  session_id?: string
+  session_id?: string;
 }
 
 interface AutofillHandlers {
@@ -72,12 +72,15 @@ interface AutofillHandlers {
    * @param handlers Handlers that will be invoked once the authentication is completed (success or failure)
    * @param username Name of user account, as used in the WebAuthn registration. If not provided, the authentication will start without the context of a user and it will be inferred by the chosen passkey
    */
-  activate(handlers: AuthenticationAutofillActivateHandlers, username?: string): void
+  activate(
+    handlers: AuthenticationAutofillActivateHandlers,
+    username?: string
+  ): void;
 
   /**
    * Aborts a WebAuthn authentication. This method should be called after the passkey autofill is dismissed in order to be able to query existing passkeys once again. This will end the browser's  `navigator.credentials.get()` operation.
    */
-  abort(): void
+  abort(): void;
 }
 /**
  * Alternate paths used by the SDK to route API calls to your proxy server.
@@ -86,37 +89,37 @@ interface WebauthnApis {
   /**
    * @defaultValue `/v1/auth/webauthn/authenticate/start`
    */
-  startAuthentication: string
+  startAuthentication: string;
 
   /**
    * @defaultValue `/v1/auth/webauthn/register/start`
    */
-  startRegistration: string
+  startRegistration: string;
 
   /**
    * @defaultValue `/v1/auth/webauthn/cross-device/register/start`
    */
-  startCrossDeviceRegistration: string
+  startCrossDeviceRegistration: string;
 
   /**
    * @defaultValue `/v1/auth/webauthn/cross-device/authenticate/init`
    */
-  initCrossDeviceAuthentication: string
+  initCrossDeviceAuthentication: string;
 
   /**
    * @defaultValue `/v1/auth/webauthn/cross-device/authenticate/start`
    */
-  startCrossDeviceAuthentication: string
+  startCrossDeviceAuthentication: string;
 
   /**
    * @defaultValue `/v1/auth/webauthn/cross-device/status`
    */
-  getCrossDeviceTicketStatus: string
+  getCrossDeviceTicketStatus: string;
 
   /**
    * @defaultValue `/v1/auth/webauthn/cross-device/attach-device`
    */
-  attachDeviceToCrossDeviceSession: string
+  attachDeviceToCrossDeviceSession: string;
 }
 
 /**
@@ -127,42 +130,42 @@ interface WebAuthnInitOptions {
    * Base path for sending API requests. This would be either a Transmit Security API deployment URL
    * such as documented for sandbox, or if you are proxying API requests from your backend - then the base path to your proxy.
    */
-  serverPath: string
+  serverPath: string;
 
   /**
    * Override endpoints when using a proxy server in case the proxy server implements its own paths.
    */
-  webauthnApiPaths?: WebauthnApis
+  webauthnApiPaths?: WebauthnApis;
 }
 
 /**
  * @private
  */
 interface PublicKeyCredentialRegistrationData {
-  id: string
-  rawId: string
+  id: string;
+  rawId: string;
   response: {
-    attestationObject: string
-    clientDataJSON: string
-  }
-  authenticatorAttachment: string | null
-  type: string
+    attestationObject: string;
+    clientDataJSON: string;
+  };
+  authenticatorAttachment: string | null;
+  type: string;
 }
 
 /**
  * @private
  */
 interface PublicKeyCredentialAuthenticationData {
-  id: string
-  rawId: string
+  id: string;
+  rawId: string;
   response: {
-    authenticatorData: string
-    clientDataJSON: string
-    signature: string
-    userHandle: string
-  }
-  authenticatorAttachment?: string | null
-  type: string
+    authenticatorData: string;
+    clientDataJSON: string;
+    signature: string;
+    userHandle: string;
+  };
+  authenticatorAttachment?: string | null;
+  type: string;
 }
 
 /**
@@ -172,15 +175,17 @@ interface CredentialResult {
   /**
    * The session ID of the operation
    */
-  webauthnSessionId: string
+  webauthnSessionId: string;
   /**
    * The encoded result of webauthn operation
    */
-  publicKeyCredential: PublicKeyCredentialRegistrationData | PublicKeyCredentialAuthenticationData
+  publicKeyCredential:
+    | PublicKeyCredentialRegistrationData
+    | PublicKeyCredentialAuthenticationData;
   /**
    * The user agent of the browser
    */
-  userAgent: string
+  userAgent: string;
 }
 
 interface AuthenticationAutofillActivateHandlers {
@@ -188,23 +193,23 @@ interface AuthenticationAutofillActivateHandlers {
    * A Callback function that will be triggered once biometrics signing is completed successfully.
    * @param webauthn_encoded_result
    */
-  onSuccess: (webauthn_encoded_result: string) => Promise<void>
+  onSuccess: (webauthn_encoded_result: string) => Promise<void>;
   /**
    * A Callback function that will be triggered if authentication fails with an SdkError.
    * @param err
    */
-  onError?: (err: SdkError) => Promise<void>
+  onError?: (err: SdkError) => Promise<void>;
 }
 
 interface BaseCrossDeviceHandlers {
   /**
    * Called when the user has successfully attached a device to the cross-device flow using the {@link WebauthnCrossDeviceFlows.attachDevice} method.
    */
-  onDeviceAttach: () => Promise<void>
+  onDeviceAttach: () => Promise<void>;
   /**
    * Called when there was an error in the cross-device flow with status response {@link ApiCrossDeviceStatusResponse}.
    */
-  onFailure: (error: ApiCrossDeviceStatusResponse) => Promise<void>
+  onFailure: (error: ApiCrossDeviceStatusResponse) => Promise<void>;
 }
 
 interface CrossDeviceAuthenticationHandlers extends BaseCrossDeviceHandlers {
@@ -212,14 +217,14 @@ interface CrossDeviceAuthenticationHandlers extends BaseCrossDeviceHandlers {
    * Called upon successful webauthn authentication.
    * @param sessionId Session ID that will be exchanged for the user's access and ID tokens using the /v1/auth/session/authenticate API
    */
-  onCredentialAuthenticate: (sessionId: string) => Promise<void>
+  onCredentialAuthenticate: (sessionId: string) => Promise<void>;
 }
 
 interface CrossDeviceRegistrationHandlers extends BaseCrossDeviceHandlers {
   /**
    * Called upon successful webauthn registration.
    */
-  onCredentialRegister: () => Promise<void>
+  onCredentialRegister: () => Promise<void>;
 }
 
 interface WebauthnAuthenticationFlows {
@@ -235,12 +240,12 @@ interface WebauthnAuthenticationFlows {
        * @throws {@link ErrorCode.AuthenticationProcessAlreadyActive}
        * @returns Base64-encoded object, which contains the credential result. This encoded result will be used to fetch user tokens via the [backend authentication endpoint](/openapi/user/backend-webauthn/#operation/authenticateWebauthnCredential).
        */
-  modal(username?: string): Promise<string>
+  modal(username?: string): Promise<string>;
 
   /**
    * Property used to implement credential selection via autofill UI.
    */
-  autofill: AutofillHandlers
+  autofill: AutofillHandlers;
 }
 
 interface WebauthnCrossDeviceFlows {
@@ -258,9 +263,9 @@ interface WebauthnCrossDeviceFlows {
      * @returns {@link CrossDeviceController} - Object that allows you to stop the event loop, and obtain the cross-device ticket ID.
      */
     registration: (params: {
-      crossDeviceTicketId: string
-      handlers: CrossDeviceRegistrationHandlers
-    }) => Promise<CrossDeviceController>
+      crossDeviceTicketId: string;
+      handlers: CrossDeviceRegistrationHandlers;
+    }) => Promise<CrossDeviceController>;
     /**
      * Start a cross device authentication flow
      * This call receives an optional username (if already known), and a {@link CrossDeviceAuthenticationHandlers} instance that contains your handlers for cross device events.
@@ -272,10 +277,10 @@ interface WebauthnCrossDeviceFlows {
      * @returns {@link CrossDeviceController} - Object that allows you to stop the event loop, and obtain the cross-device ticket ID.
      */
     authentication: (params: {
-      username?: string
-      handlers: CrossDeviceAuthenticationHandlers
-    }) => Promise<CrossDeviceController>
-  }
+      username?: string;
+      handlers: CrossDeviceAuthenticationHandlers;
+    }) => Promise<CrossDeviceController>;
+  };
 
   authenticate: {
     /**
@@ -288,8 +293,8 @@ interface WebauthnCrossDeviceFlows {
      * @throws {@link ErrorCode.AuthenticationCanceled}
      * @returns Base64-encoded object, which contains the credential result. This encoded result will be used to fetch user tokens via the [backend authentication endpoint](/openapi/user/backend-webauthn/#operation/authenticateWebauthnCredential).
      */
-    modal: (crossDeviceTicketId: string) => Promise<string>
-  }
+    modal: (crossDeviceTicketId: string) => Promise<string>;
+  };
   /**
    * Invokes a WebAuthn credential registration for the user used in the cross device session init, including prompting the user for biometrics.
    * If registration is completed successfully, this call will return a promise that resolves to the credential result, which is an object encoded as a base64 string. This encoded result should then be passed to the relevant backend registration endpoint to complete the registration for either a [logged-in user](/openapi/user/backend-webauthn/#operation/webauthn-registration) or [logged-out user](/openapi/user/backend-webauthn/#operation/webauthn-registration-external).
@@ -303,8 +308,8 @@ interface WebauthnCrossDeviceFlows {
    */
   register: (
     crossDeviceTicketId: string,
-    options?: WebauthnCrossDeviceRegistrationOptions,
-  ) => Promise<string>
+    options?: WebauthnCrossDeviceRegistrationOptions
+  ) => Promise<string>;
 
   /**
    * Indicates when a session is accepted on another device in cross-device flows.
@@ -312,24 +317,25 @@ interface WebauthnCrossDeviceFlows {
    * If successful,{@link CrossDeviceRegistrationHandlers.onDeviceAttach} will be called in registration flow and {@link CrossDeviceAuthenticationHandlers.onDeviceAttach} for authentication.
    * @param crossDeviceTicketId Ticket ID of the cross-device flow. retrieved from the {@link CrossDeviceController} object.
    */
-  attachDevice: (crossDeviceTicketId: string) => Promise<void>
+  attachDevice: (crossDeviceTicketId: string) => Promise<void>;
 }
 
 interface WebauthnCrossDeviceRegistrationOptions {
   /**
    * Allow registration using cross-platform authenticators, such as a USB security key or a different device. If enabled, cross-device authentication flows can be performed using the native browser experience (via QR code). default: True
    */
-  allowCrossPlatformAuthenticators?: boolean
+  allowCrossPlatformAuthenticators?: boolean;
 
   /**
    * Must be set to true to register credentials as passkeys when supported (except for Apple devices, which always register credentials as passkeys). default: True
    */
-  registerAsDiscoverable?: boolean
+  registerAsDiscoverable?: boolean;
 }
 
-interface WebauthnRegistrationOptions extends WebauthnCrossDeviceRegistrationOptions {
+interface WebauthnRegistrationOptions
+  extends WebauthnCrossDeviceRegistrationOptions {
   /**
    * Human-palatable name for the user account, only for display (max 64 characters). If not set, the username parameter will also act as the display name
    */
-  displayName?: string
+  displayName?: string;
 }
diff --git a/src/views/AccountView.vue b/src/views/AccountView.vue
index 3b6ce1b..8202711 100644
--- a/src/views/AccountView.vue
+++ b/src/views/AccountView.vue
@@ -1,31 +1,31 @@
 <script setup lang="ts">
-import AccountMenu from '@/components/account/AccountMenu.vue'
-import ProfileView from '@/components/account/ProfileView.vue'
-import AccountSettingsView from '@/components/account/AccountSettingsView.vue'
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
-import FooterSection from '@/components/FooterSection.vue'
+import AccountMenu from "@/components/account/AccountMenu.vue";
+import ProfileView from "@/components/account/ProfileView.vue";
+import AccountSettingsView from "@/components/account/AccountSettingsView.vue";
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+import FooterSection from "@/components/FooterSection.vue";
 
-const route = useRoute()
+const route = useRoute();
 
 const routeViews = [
-  { routeName: 'accountProfile', accountComponent: ProfileView },
-  { routeName: 'accountSettings', accountComponent: AccountSettingsView },
-]
+  { routeName: "accountProfile", accountComponent: ProfileView },
+  { routeName: "accountSettings", accountComponent: AccountSettingsView },
+];
 
 /**
  * Looks the path name as defined in /src/routes/index.ts
  * to determine which view and forms to load
  */
 const componentToLoad = computed(() => {
-  let result = ProfileView
+  let result = ProfileView;
   for (const routeView of routeViews) {
     if (route.name === routeView.routeName) {
-      result = routeView.accountComponent
+      result = routeView.accountComponent;
     }
   }
-  return result
-})
+  return result;
+});
 </script>
 <template>
   <div class="bg-base-100 account flex flex-grow flex-col items-center">
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 922acf3..d53d714 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import BankHomeLoggedIn from '@/components/bank/BankHomeLoggedIn.vue'
-import BankHomeLoggedOut from '@/components/bank/BankHomeLoggedOut.vue'
-import { userSessionStore } from '@/store/userSession'
+import BankHomeLoggedIn from "@/components/bank/BankHomeLoggedIn.vue";
+import BankHomeLoggedOut from "@/components/bank/BankHomeLoggedOut.vue";
+import { userSessionStore } from "@/store/userSession";
 
-import { storeToRefs } from 'pinia'
-import FooterSection from '@/components/FooterSection.vue'
+import { storeToRefs } from "pinia";
+import FooterSection from "@/components/FooterSection.vue";
 
-const userSession = userSessionStore()
-const userSessionRefs = storeToRefs(userSession)
+const userSession = userSessionStore();
+const userSessionRefs = storeToRefs(userSession);
 </script>
 
 <template>
diff --git a/src/views/NotFoundView.vue b/src/views/NotFoundView.vue
index 249a5db..ff13fa5 100644
--- a/src/views/NotFoundView.vue
+++ b/src/views/NotFoundView.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import NotFoundPage from '@/components/NotFoundPage.vue'
-import FooterSection from '@/components/FooterSection.vue'
+import NotFoundPage from "@/components/NotFoundPage.vue";
+import FooterSection from "@/components/FooterSection.vue";
 </script>
 <template>
   <not-found-page>
-    {{ $t('global.pageNotFound') }}
+    {{ $t("global.pageNotFound") }}
   </not-found-page>
   <footer-section />
 </template>
diff --git a/src/views/SignupView.vue b/src/views/SignupView.vue
index 98ae986..222be32 100644
--- a/src/views/SignupView.vue
+++ b/src/views/SignupView.vue
@@ -4,115 +4,126 @@
  * and a password input providing a way for a user
  * to either login or signup with a password.
  */
-import { type Ref, ref, toRefs, computed, onMounted } from 'vue'
-import useVuelidate from '@vuelidate/core'
-import UserInput from '@/components/inputs/UserInput.vue'
-import { useToast } from 'vue-toastification'
-import PasswordInput from '@/components/inputs/PasswordInput.vue'
-import { useI18n } from 'vue-i18n'
+import { type Ref, ref, toRefs, computed, onMounted } from "vue";
+import useVuelidate from "@vuelidate/core";
+import UserInput from "@/components/inputs/UserInput.vue";
+import { useToast } from "vue-toastification";
+import PasswordInput from "@/components/inputs/PasswordInput.vue";
+import { useI18n } from "vue-i18n";
 import {
   emailRule,
   firstNameRule,
   lastNameRule,
   phoneRule,
   signupPasswordRule,
-} from '@/helpers/validationRules'
-import { useRouter } from 'vue-router'
-import { RegistrationApi, AuthenticationApi } from '@transmitsecurity-dev/ts-demo-client-lib'
-import { loadSession } from '@/helpers/session'
-import { userSessionStore } from '@/store/userSession'
-import { handleError } from '@/helpers/errors'
-import { helpers, required, sameAs } from '@vuelidate/validators'
-import { Action, reportAction } from '@/helpers/risk'
+} from "@/helpers/validationRules";
+import { useRouter } from "vue-router";
+import {
+  RegistrationApi,
+  AuthenticationApi,
+} from "@transmitsecurity-dev/ts-demo-client-lib";
+import { loadSession } from "@/helpers/session";
+import { userSessionStore } from "@/store/userSession";
+import { handleError } from "@/helpers/errors";
+import { helpers, required, sameAs } from "@vuelidate/validators";
+import { Action, reportAction } from "@/helpers/risk";
 
-const { t } = useI18n()
-const firstName: Ref<string> = ref('')
-const lastName = ref('')
-const phone = ref('')
-const email = ref('')
-const password = ref('')
-const passwordConfirmation = ref('')
-const toast = useToast()
-const loading = ref(false)
+const { t } = useI18n();
+const firstName: Ref<string> = ref("");
+const lastName = ref("");
+const phone = ref("");
+const email = ref("");
+const password = ref("");
+const passwordConfirmation = ref("");
+const toast = useToast();
+const loading = ref(false);
 
-const router = useRouter()
-defineEmits(['resetPassword', 'onLoginSuccess', 'onLoginError'])
-const userSession = userSessionStore()
+const router = useRouter();
+defineEmits(["resetPassword", "onLoginSuccess", "onLoginError"]);
+const userSession = userSessionStore();
 
-type Screen = 'userInfo' | 'passwordCreation'
-const screenToShow: Ref<Screen> = ref('userInfo')
+type Screen = "userInfo" | "passwordCreation";
+const screenToShow: Ref<Screen> = ref("userInfo");
 /**
  * Server APIs
  */
-const authApi = new AuthenticationApi(undefined, import.meta.env.VITE_BACKEND_URL)
-const registerApi = new RegistrationApi(undefined, import.meta.env.VITE_BACKEND_URL)
+const authApi = new AuthenticationApi(
+  undefined,
+  import.meta.env.VITE_BACKEND_URL
+);
+const registerApi = new RegistrationApi(
+  undefined,
+  import.meta.env.VITE_BACKEND_URL
+);
 
 onMounted(() => {
   if (userSession.tsPlatformLoaded) {
-    checkWebauthnSupport()
+    checkWebauthnSupport();
   } else {
     // The ts platform SDK is not loaded yet, we need to wait
     // for it to be loaded and then initialize webauthn
-    document.addEventListener('tsPlatformLoaded', function (e) {
-      checkWebauthnSupport()
-    })
+    document.addEventListener("tsPlatformLoaded", function (e) {
+      checkWebauthnSupport();
+    });
   }
-})
+});
 
 async function checkWebauthnSupport() {
-  console.log('Verifying if webauthn is supported')
-  window.tsPlatform.webauthn.isPlatformAuthenticatorSupported().then((supported: boolean) => {
-    userSession.setWebAuthnSupported(supported)
-    console.log(`Webauthn is ${supported ? '' : 'not'} supported`)
-  })
+  console.log("Verifying if webauthn is supported");
+  window.tsPlatform.webauthn
+    .isPlatformAuthenticatorSupported()
+    .then((supported: boolean) => {
+      userSession.setWebAuthnSupported(supported);
+      console.log(`Webauthn is ${supported ? "" : "not"} supported`);
+    });
 }
 
 async function continueSignup() {
-  const isFormCorrect = await dataValidation$.value.$validate()
-  console.log(`formCorrect ${isFormCorrect}`)
+  const isFormCorrect = await dataValidation$.value.$validate();
+  console.log(`formCorrect ${isFormCorrect}`);
   if (isFormCorrect) {
-    screenToShow.value = 'passwordCreation'
+    screenToShow.value = "passwordCreation";
   }
 }
 
 async function signupPassword() {
-  const isFormCorrect = await passwordValidation$.value.$validate()
-  console.log(`formCorrect ${isFormCorrect}`)
+  const isFormCorrect = await passwordValidation$.value.$validate();
+  console.log(`formCorrect ${isFormCorrect}`);
   if (isFormCorrect) {
     // Register a new account with a password
-    loading.value = true
+    loading.value = true;
     try {
       // WEBINAR ACTION - Report the registration action
-      reportAction(Action.REGISTER)
+      reportAction(Action.REGISTER);
       const response = await registerApi.registerWithPassword({
         email: email.value,
         password: password.value,
         firstName: firstName.value,
         lastName: lastName.value,
         phone: phone.value,
-      })
-      loading.value = false
+      });
+      loading.value = false;
       if (response.status == 201) {
         // Retrieve user information and
         // indicate that the user is now authenticated
-        console.log(response)
-        await loadSession()
+        console.log(response);
+        await loadSession();
         // Suggest registering webauthn, if it is supported
         if (userSession.webauthnSupported) {
-          router.push({ name: 'registerWebauthn' })
+          router.push({ name: "registerWebauthn" });
         } else {
-          router.push({ name: 'home' })
+          router.push({ name: "home" });
         }
       } else {
-        toast.error(response.statusText)
+        toast.error(response.statusText);
       }
     } catch (error) {
-      handleError(error)
+      handleError(error);
     } finally {
-      loading.value = false
+      loading.value = false;
     }
   } else {
-    toast.error(t('toast.error.invalidForm'))
+    toast.error(t("toast.error.invalidForm"));
   }
 }
 
@@ -121,47 +132,54 @@ const dataValidationRules = {
   lastName: lastNameRule(),
   phone: phoneRule(),
   email: emailRule(),
-}
+};
 
 const dataValidation$ = useVuelidate(dataValidationRules, {
   firstName,
   lastName,
   phone,
   email,
-})
+});
 
 const passwordValidationRules = {
   password: signupPasswordRule(),
   passwordConfirmation: {
-    required: helpers.withMessage(t('password.confirmNewPassword'), required),
-    sameAsPassword: helpers.withMessage(t('password.passwordsDontMatch'), sameAs(password)),
+    required: helpers.withMessage(t("password.confirmNewPassword"), required),
+    sameAsPassword: helpers.withMessage(
+      t("password.passwordsDontMatch"),
+      sameAs(password)
+    ),
     $autoDirty: true,
   },
-}
+};
 
 const passwordValidation$ = useVuelidate(passwordValidationRules, {
   password,
   passwordConfirmation,
-})
+});
 
 const errorFound = computed(() => {
-  return dataValidation$.value.$errors && dataValidation$.value.$errors.length > 0
-})
+  return (
+    dataValidation$.value.$errors && dataValidation$.value.$errors.length > 0
+  );
+});
 
 const errorMessage = computed(() => {
   if (errorFound.value) {
-    return dataValidation$.value.$errors[0].$message.toString()
+    return dataValidation$.value.$errors[0].$message.toString();
   } else {
-    return 'Hidden error message'
+    return "Hidden error message";
   }
-})
+});
 </script>
 
 <template>
   <div class="flex flex-grow flex-col px-6 py-12 lg:px-8 bg-base-200">
     <div class="flex flex-col items-center sm:mx-auto sm:w-full sm:max-w-sm">
-      <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-base-content">
-        {{ $t('registration.createYourAccount') }}
+      <h2
+        class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-base-content"
+      >
+        {{ $t("registration.createYourAccount") }}
       </h2>
     </div>
 
@@ -213,7 +231,7 @@ const errorMessage = computed(() => {
             class="btn btn-block btn-primary"
             :class="loading ? 'loading loading-spinner btn-disabled' : ''"
           >
-            {{ $t('authentication.signup') }}
+            {{ $t("authentication.signup") }}
           </button>
         </div>
       </form>
@@ -250,10 +268,10 @@ const errorMessage = computed(() => {
             class="btn btn-block btn-primary"
             :class="loading ? 'loading loading-spinner btn-disabled' : ''"
           >
-            {{ $t('global.continue') }}
+            {{ $t("global.continue") }}
           </button>
           <button @click="screenToShow = 'userInfo'" class="btn btn-ghost">
-            {{ $t('global.back') }}
+            {{ $t("global.back") }}
           </button>
         </div>
       </form>
@@ -261,9 +279,9 @@ const errorMessage = computed(() => {
 
     <div class="mt-5 text-center">
       <p class="text-sm">
-        {{ $t('authentication.alreadyHaveAccount') }}
+        {{ $t("authentication.alreadyHaveAccount") }}
         <router-link :to="{ name: 'login' }" class="link text-accent">
-          {{ $t('authentication.login') }}
+          {{ $t("authentication.login") }}
         </router-link>
       </p>
     </div>
diff --git a/src/views/ThemeView.vue b/src/views/ThemeView.vue
index f86bbf3..8dffa18 100644
--- a/src/views/ThemeView.vue
+++ b/src/views/ThemeView.vue
@@ -1,30 +1,34 @@
 <script setup lang="ts">
-import { RouterView } from 'vue-router'
-import { type DaisyThemes, useThemeManager, daisyThemes } from '@/plugins/themeManager'
-import { ref, computed } from 'vue'
-import { userPreferenceStore } from '@/store/userPreferences'
+import { RouterView } from "vue-router";
+import {
+  type DaisyThemes,
+  useThemeManager,
+  daisyThemes,
+} from "@/plugins/themeManager";
+import { ref, computed } from "vue";
+import { userPreferenceStore } from "@/store/userPreferences";
 
-const preference = userPreferenceStore()
-const $theme = useThemeManager()
+const preference = userPreferenceStore();
+const $theme = useThemeManager();
 const changeTheme = (e: any) => {
-  $theme.set(e.target.value as DaisyThemes)
+  $theme.set(e.target.value as DaisyThemes);
   // Persist theme in local storage
-  preference.setTheme(e.target.value)
-}
-const selected = computed(() => $theme.get())
-const useSystem = ref<boolean>($theme.watchSystemTheme())
-const toggleWatchSystem = () => $theme.watchSystemTheme(useSystem.value)
-const darkToggle = ref<HTMLInputElement>()
+  preference.setTheme(e.target.value);
+};
+const selected = computed(() => $theme.get());
+const useSystem = ref<boolean>($theme.watchSystemTheme());
+const toggleWatchSystem = () => $theme.watchSystemTheme(useSystem.value);
+const darkToggle = ref<HTMLInputElement>();
 const isDarkMode = computed(() => {
-  const { dark, light } = $theme.getDefaults()
-  if ($theme.get() === dark) return 0
-  else if ($theme.get() === light) return 1
+  const { dark, light } = $theme.getDefaults();
+  if ($theme.get() === dark) return 0;
+  else if ($theme.get() === light) return 1;
   else {
     // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-    if (darkToggle.value) darkToggle.value.indeterminate = true
+    if (darkToggle.value) darkToggle.value.indeterminate = true;
   }
-  return 2
-})
+  return 2;
+});
 </script>
 
 <template>
@@ -33,14 +37,18 @@ const isDarkMode = computed(() => {
       <div class="flexCol">
         <select
           v-model="selected"
-          @change="e => changeTheme(e)"
+          @change="(e) => changeTheme(e)"
           class="select select-primary w-full max-w-xs"
         >
           <optgroup label="DaisyUI default themes">
-            <option v-for="theme in daisyThemes.slice(0, 31)" :key="theme">{{ theme }}</option>
+            <option v-for="theme in daisyThemes.slice(0, 31)" :key="theme">
+              {{ theme }}
+            </option>
           </optgroup>
           <optgroup label="Custom themes">
-            <option v-for="theme in daisyThemes.slice(32)" :key="theme">{{ theme }}</option>
+            <option v-for="theme in daisyThemes.slice(32)" :key="theme">
+              {{ theme }}
+            </option>
           </optgroup>
         </select>
       </div>
@@ -63,32 +71,55 @@ const isDarkMode = computed(() => {
           class="swap swap-rotate"
           :class="{ 'swap-active': isDarkMode !== 2 && isDarkMode === 0 }"
         >
-          <span v-show="isDarkMode !== 2" class="swap-on material-icons-outlined text-3xl"
+          <span
+            v-show="isDarkMode !== 2"
+            class="swap-on material-icons-outlined text-3xl"
             >light_mode</span
           >
-          <span v-show="isDarkMode !== 2" class="swap-off material-icons-outlined text-3xl"
+          <span
+            v-show="isDarkMode !== 2"
+            class="swap-off material-icons-outlined text-3xl"
             >dark_mode</span
           >
         </label>
-        <span v-if="isDarkMode === 2" class="swap-off material-symbols-outlined text-3xl"
+        <span
+          v-if="isDarkMode === 2"
+          class="swap-off material-symbols-outlined text-3xl"
           >circle</span
         >
-        <input @change="$theme.toggleDark()" ref="darkToggle" type="checkbox" class="toggle" />
+        <input
+          @change="$theme.toggleDark()"
+          ref="darkToggle"
+          type="checkbox"
+          class="toggle"
+        />
       </div>
     </section>
     <section class="flex gap-x-4 justify-start">
       <span>Demo links:</span>
       <div class="flex flex-col">
-        <router-link :to="{ name: 'accountProfile' }" class="link link-hover link-primary">
+        <router-link
+          :to="{ name: 'accountProfile' }"
+          class="link link-hover link-primary"
+        >
           Account
         </router-link>
-        <router-link :to="{ name: 'home' }" class="link link-hover link-primary">
+        <router-link
+          :to="{ name: 'home' }"
+          class="link link-hover link-primary"
+        >
           Home
         </router-link>
-        <router-link :to="{ name: 'login' }" class="link link-hover link-primary">
+        <router-link
+          :to="{ name: 'login' }"
+          class="link link-hover link-primary"
+        >
           Login
         </router-link>
-        <router-link :to="{ name: 'signup' }" class="link link-hover link-primary">
+        <router-link
+          :to="{ name: 'signup' }"
+          class="link link-hover link-primary"
+        >
           Signup
         </router-link>
       </div>
@@ -104,11 +135,14 @@ const isDarkMode = computed(() => {
       <button class="btn btn-error">Error</button>
     </div>
     <div class="grid grid-cols-2 place-items-center gap-2 md:grid-cols-4">
-      <span class="badge">Default</span> <span class="badge badge-primary">Primary</span>
+      <span class="badge">Default</span>
+      <span class="badge badge-primary">Primary</span>
       <span class="badge badge-secondary">Secondary</span>
-      <span class="badge badge-accent">Accent</span> <span class="badge badge-info">Info</span>
+      <span class="badge badge-accent">Accent</span>
+      <span class="badge badge-info">Info</span>
       <span class="badge badge-success">Success</span>
-      <span class="badge badge-warning">Warning</span> <span class="badge badge-error">Error</span>
+      <span class="badge badge-warning">Warning</span>
+      <span class="badge badge-error">Error</span>
     </div>
     <div class="flex flex-col gap-3">
       <div class="flex flex-col gap-3 md:flex-row">
@@ -127,13 +161,27 @@ const isDarkMode = computed(() => {
         </div>
         <div class="flex flex-col gap-3 md:w-1/2">
           <progress value="20" max="100" class="progress">Default</progress>
-          <progress value="25" max="100" class="progress progress-primary">Primary</progress>
-          <progress value="30" max="100" class="progress progress-secondary">Secondary</progress>
-          <progress value="40" max="100" class="progress progress-accent">Accent</progress>
-          <progress value="45" max="100" class="progress progress-info">Info</progress>
-          <progress value="55" max="100" class="progress progress-success">Success</progress>
-          <progress value="70" max="100" class="progress progress-warning">Warning</progress>
-          <progress value="90" max="100" class="progress progress-error">Error</progress>
+          <progress value="25" max="100" class="progress progress-primary">
+            Primary
+          </progress>
+          <progress value="30" max="100" class="progress progress-secondary">
+            Secondary
+          </progress>
+          <progress value="40" max="100" class="progress progress-accent">
+            Accent
+          </progress>
+          <progress value="45" max="100" class="progress progress-info">
+            Info
+          </progress>
+          <progress value="55" max="100" class="progress progress-success">
+            Success
+          </progress>
+          <progress value="70" max="100" class="progress progress-warning">
+            Warning
+          </progress>
+          <progress value="90" max="100" class="progress progress-error">
+            Error
+          </progress>
         </div>
       </div>
       <div class="flex flex-col gap-3 md:flex-row">
@@ -145,9 +193,15 @@ const isDarkMode = computed(() => {
           </div>
         </div>
         <div class="flex flex-wrap items-center justify-center gap-3 md:w-1/2">
-          <div class="radial-progress" style="--value: 60; --size: 3.5rem">60%</div>
-          <div class="radial-progress" style="--value: 75; --size: 3.5rem">75%</div>
-          <div class="radial-progress" style="--value: 90; --size: 3.5rem">90%</div>
+          <div class="radial-progress" style="--value: 60; --size: 3.5rem">
+            60%
+          </div>
+          <div class="radial-progress" style="--value: 75; --size: 3.5rem">
+            75%
+          </div>
+          <div class="radial-progress" style="--value: 90; --size: 3.5rem">
+            90%
+          </div>
         </div>
       </div>
     </div>
@@ -175,14 +229,33 @@ const isDarkMode = computed(() => {
         </div>
         <div class="md:w-1/2">
           <input type="range" min="0" max="100" class="range range-xs" />
-          <input type="range" min="0" max="100" class="range range-xs range-primary" />
-          <input type="range" min="0" max="100" class="range range-xs range-secondary" />
-          <input type="range" min="0" max="100" class="range range-xs range-accent" />
+          <input
+            type="range"
+            min="0"
+            max="100"
+            class="range range-xs range-primary"
+          />
+          <input
+            type="range"
+            min="0"
+            max="100"
+            class="range range-xs range-secondary"
+          />
+          <input
+            type="range"
+            min="0"
+            max="100"
+            class="range range-xs range-accent"
+          />
         </div>
       </div>
       <div class="flex flex-col gap-3 md:flex-row">
         <div class="flex flex-col gap-3 md:w-1/2">
-          <input type="text" placeholder="Default" class="input input-bordered w-full" />
+          <input
+            type="text"
+            placeholder="Default"
+            class="input input-bordered w-full"
+          />
           <input
             type="text"
             placeholder="Primary"
@@ -200,7 +273,11 @@ const isDarkMode = computed(() => {
           />
         </div>
         <div class="flex flex-col gap-3 md:w-1/2">
-          <input type="text" placeholder="Info" class="input input-info input-bordered w-full" />
+          <input
+            type="text"
+            placeholder="Info"
+            class="input input-info input-bordered w-full"
+          />
           <input
             type="text"
             placeholder="Success"
@@ -211,7 +288,11 @@ const isDarkMode = computed(() => {
             placeholder="Warning"
             class="input input-warning input-bordered w-full"
           />
-          <input type="text" placeholder="Error" class="input input-error input-bordered w-full" />
+          <input
+            type="text"
+            placeholder="Error"
+            class="input input-error input-bordered w-full"
+          />
         </div>
       </div>
       <div class="navbar bg-neutral text-neutral-content rounded-box">
@@ -232,7 +313,9 @@ const isDarkMode = computed(() => {
             </svg>
           </button>
         </div>
-        <div class="flex-1"><button class="btn btn-ghost text-xl normal-case">daisyUI</button></div>
+        <div class="flex-1">
+          <button class="btn btn-ghost text-xl normal-case">daisyUI</button>
+        </div>
       </div>
       <div class="flex gap-3">
         <div class="flex flex-grow flex-col gap-3">
diff --git a/src/views/bank/BankTransferSelectionView.vue b/src/views/bank/BankTransferSelectionView.vue
index 4095941..4a65073 100644
--- a/src/views/bank/BankTransferSelectionView.vue
+++ b/src/views/bank/BankTransferSelectionView.vue
@@ -1,69 +1,76 @@
 <script setup lang="ts">
-import AccountSelection from '@/components/bank/AccountSelection.vue'
-import BeneficiarySelection from '@/components/bank/BeneficiarySelection.vue'
-import FooterSection from '@/components/FooterSection.vue'
-import type { Account } from '@/helpers/account'
-import { PlusCircleIcon } from '@heroicons/vue/24/solid'
-import Datepicker from '@vuepic/vue-datepicker'
-import { ref } from 'vue'
-import { userSessionStore } from '@/store/userSession'
+import AccountSelection from "@/components/bank/AccountSelection.vue";
+import BeneficiarySelection from "@/components/bank/BeneficiarySelection.vue";
+import FooterSection from "@/components/FooterSection.vue";
+import type { Account } from "@/helpers/account";
+import { PlusCircleIcon } from "@heroicons/vue/24/solid";
+import Datepicker from "@vuepic/vue-datepicker";
+import { ref } from "vue";
+import { userSessionStore } from "@/store/userSession";
 
-import '@vuepic/vue-datepicker/dist/main.css'
-import { useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
+import "@vuepic/vue-datepicker/dist/main.css";
+import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
 
-const router = useRouter()
-const sessionStore = userSessionStore()
-const { t } = useI18n()
+const router = useRouter();
+const sessionStore = userSessionStore();
+const { t } = useI18n();
 
 const sendingAccounts: Account[] = [
   {
-    holder: sessionStore.fullName || '',
+    holder: sessionStore.fullName || "",
     balance: 6425.78,
-    name: t('bank.depositAccount'),
-    number: '40021194485',
+    name: t("bank.depositAccount"),
+    number: "40021194485",
   },
   {
     holder: `${sessionStore.fullName}, Camille Dupont`,
     balance: 381.59,
-    name: t('bank.depositAccount'),
-    number: '40021194490',
+    name: t("bank.depositAccount"),
+    number: "40021194490",
   },
-]
-const transferDate = ref<Date>(new Date())
-const amount = ref(0)
-const beneficiaryAccounts = ['Aeklys', 'Martin', 'Jeremy Duwez', 'Nina']
+];
+const transferDate = ref<Date>(new Date());
+const amount = ref(0);
+const beneficiaryAccounts = ["Aeklys", "Martin", "Jeremy Duwez", "Nina"];
 
-const selectedAccount = ref<Account | null>(null)
+const selectedAccount = ref<Account | null>(null);
 function selectAccount(account: Account) {
-  selectedAccount.value = account
+  selectedAccount.value = account;
 }
 
-const selectedBeneficiary = ref('')
+const selectedBeneficiary = ref("");
 function selectBeneficiary(beneficiary: string) {
-  selectedBeneficiary.value = beneficiary
+  selectedBeneficiary.value = beneficiary;
 }
 
 function validateTransfer() {
   if (selectedAccount.value !== null) {
-    sessionStore.bankData.transfer.selectedAccount = selectedAccount.value
+    sessionStore.bankData.transfer.selectedAccount = selectedAccount.value;
   }
-  sessionStore.bankData.transfer.amount = amount.value
-  sessionStore.bankData.transfer.date = transferDate.value
+  sessionStore.bankData.transfer.amount = amount.value;
+  sessionStore.bankData.transfer.date = transferDate.value;
 
-  sessionStore.bankData.transfer.beneficiaryAccount = selectedBeneficiary.value
-  router.push({ name: 'BankTransferValidate' })
+  sessionStore.bankData.transfer.beneficiaryAccount = selectedBeneficiary.value;
+  router.push({ name: "BankTransferValidate" });
 }
 </script>
 <template>
   <div class="min-h-screen">
     <div class="grid grid-cols-1 md:grid-cols-2">
-      <div class="col-span-1 flex justify-center pt-4 md:order-last overflow-y-scroll max-h-screen">
+      <div
+        class="col-span-1 flex justify-center pt-4 md:order-last overflow-y-scroll max-h-screen"
+      >
         <div class="flex flex-col flex-1 px-10">
-          <h2 class="font-bold text-3xl pb-4">{{ $t('bank.transfer.transferMoney') }}</h2>
+          <h2 class="font-bold text-3xl pb-4">
+            {{ $t("bank.transfer.transferMoney") }}
+          </h2>
           <div class="mt-8">
-            <h3 class="font-medium mb-2">{{ $t('bank.transfer.accountToDebit') }}</h3>
+            <h3 class="font-medium mb-2">
+              {{ $t("bank.transfer.accountToDebit") }}
+            </h3>
             <account-selection
+              id="accountSelection"
               :accounts="sendingAccounts"
               class="mt-4"
               @account-selected="selectAccount"
@@ -73,13 +80,15 @@ function validateTransfer() {
           <div class="mt-12">
             <div class="flex justify-between">
               <h3 class="font-medium mb-2 flex justify-between">
-                {{ $t('bank.transfer.accountToCredit') }}
+                {{ $t("bank.transfer.accountToCredit") }}
               </h3>
               <div class="link flex items-center text-primary gap-x-2">
-                <plus-circle-icon class="w-8 h-8" /> {{ $t('bank.addABeneficiary') }}
+                <plus-circle-icon class="w-8 h-8" />
+                {{ $t("bank.addABeneficiary") }}
               </div>
             </div>
             <beneficiary-selection
+              id="selectBeneficiary"
               :beneficiaries="beneficiaryAccounts"
               @select-beneficiary="selectBeneficiary"
               class="mt-4"
@@ -87,14 +96,16 @@ function validateTransfer() {
           </div>
 
           <form
+            id="transferForm"
             @submit.prevent="validateTransfer"
             class="grid grid-cols-1 mb-10 md:mb-0 md:grid-cols-2 md:gap-x-4 my-12"
           >
             <label class="form-control w-full">
               <div class="label">
-                <span class="label-text">{{ $t('bank.amount') }}</span>
+                <span class="label-text">{{ $t("bank.amount") }}</span>
               </div>
               <input
+                id="transferAmount"
                 type="number"
                 min="0"
                 step="0.01"
@@ -105,7 +116,9 @@ function validateTransfer() {
             </label>
             <label class="form-control w-full">
               <div class="label">
-                <span class="label-text">{{ $t('bank.transfer.transferDate') }}</span>
+                <span class="label-text">{{
+                  $t("bank.transfer.transferDate")
+                }}</span>
               </div>
               <Datepicker
                 :enable-time-picker="false"
@@ -114,8 +127,12 @@ function validateTransfer() {
                 input-class-name="input input-bordered w-full"
               />
             </label>
-            <button class="btn btn-primary md:col-span-2 mt-8" type="submit">
-              {{ $t('global.next') }}
+            <button
+              id="validateForm"
+              class="btn btn-primary md:col-span-2 mt-8"
+              type="submit"
+            >
+              {{ $t("global.next") }}
             </button>
           </form>
         </div>
@@ -131,28 +148,34 @@ function validateTransfer() {
             <div class="flex flex-col items-center mt-4">
               <div class="card bg-base-100 shadow-xl w-10/12">
                 <div class="card-body">
-                  <h2 class="card-title">{{ $t('bank.transfer.immediateTransferAd.title') }}</h2>
+                  <h2 class="card-title">
+                    {{ $t("bank.transfer.immediateTransferAd.title") }}
+                  </h2>
                   <p class="text-justify">
-                    {{ $t('bank.transfer.immediateTransferAd.content') }}
+                    {{ $t("bank.transfer.immediateTransferAd.content") }}
                   </p>
                 </div>
               </div>
             </div>
           </div>
-          <div class="absolute flex w-full flex-col bottom-1/4 text-xs md:text-base">
+          <div
+            class="absolute flex w-full flex-col bottom-1/4 text-xs md:text-base"
+          >
             <div class="flex flex-col items-center mt-10">
               <div class="card bg-primary shadow-xl w-10/12">
                 <div class="card-body text-primary-content">
-                  <h2 class="card-title">{{ $t('bank.transfer.passkeysAd.title') }}</h2>
+                  <h2 class="card-title">
+                    {{ $t("bank.transfer.passkeysAd.title") }}
+                  </h2>
                   <p class="text-justify">
-                    {{ $t('bank.transfer.passkeysAd.content1') }}
+                    {{ $t("bank.transfer.passkeysAd.content1") }}
                   </p>
-                  <p>{{ $t('bank.transfer.passkeysAd.content2') }}</p>
+                  <p>{{ $t("bank.transfer.passkeysAd.content2") }}</p>
                   <div class="card-actions">
                     <button
                       class="btn btn-outline bg-primary-content text-primary border-none text-xs md:text-base"
                     >
-                      {{ $t('bank.transfer.passkeysAd.learnMore') }}
+                      {{ $t("bank.transfer.passkeysAd.learnMore") }}
                     </button>
                   </div>
                 </div>
diff --git a/src/views/bank/BankTransferValidationView.vue b/src/views/bank/BankTransferValidationView.vue
index 6d94362..64fad3a 100644
--- a/src/views/bank/BankTransferValidationView.vue
+++ b/src/views/bank/BankTransferValidationView.vue
@@ -1,33 +1,35 @@
 <script setup lang="ts">
-import SelectAccountSummary from '@/components/bank/SelectAccountSummary.vue'
-import FooterSection from '@/components/FooterSection.vue'
-import { computed, ref } from 'vue'
-import { userSessionStore } from '@/store/userSession'
-import { useI18n } from 'vue-i18n'
-import '@vuepic/vue-datepicker/dist/main.css'
-import { useRouter } from 'vue-router'
-import { Action, reportAction } from '@/helpers/risk'
+import SelectAccountSummary from "@/components/bank/SelectAccountSummary.vue";
+import FooterSection from "@/components/FooterSection.vue";
+import { computed, ref } from "vue";
+import { userSessionStore } from "@/store/userSession";
+import { useI18n } from "vue-i18n";
+import "@vuepic/vue-datepicker/dist/main.css";
+import { useRouter } from "vue-router";
+import { Action, reportAction } from "@/helpers/risk";
 
-const router = useRouter()
-const sessionStore = userSessionStore()
-const transfer = sessionStore.bankData.transfer
-const i18n = useI18n()
-console.log(transfer.amount)
+const router = useRouter();
+const sessionStore = userSessionStore();
+const transfer = sessionStore.bankData.transfer;
+const i18n = useI18n();
+console.log(transfer.amount);
 
 const amount = computed(() => {
-  return i18n.n(transfer.amount, 'currency')
-})
+  return i18n.n(transfer.amount, "currency");
+});
 
 function validateTransfer() {
   // WEBINAR ACTION - Report the transaction action
-  reportAction(Action.TRANSACTION)
-  router.push({ name: 'home' })
+  reportAction(Action.TRANSACTION);
+  router.push({ name: "home" });
 }
 </script>
 <template>
   <div class="min-h-screen">
     <div class="grid grid-cols-1 md:grid-cols-2">
-      <div class="col-span-1 flex justify-center pt-4 md:order-last overflow-y-scroll max-h-screen">
+      <div
+        class="col-span-1 flex justify-center pt-4 md:order-last overflow-y-scroll max-h-screen"
+      >
         <div class="flex flex-col flex-1 px-10">
           <h2 class="font-bold text-3xl pb-4">Summary</h2>
           <div class="mt-8">
@@ -40,7 +42,9 @@ function validateTransfer() {
 
           <div class="mt-12">
             <div class="flex justify-between">
-              <h3 class="font-medium mb-2 flex justify-between">Account to credit</h3>
+              <h3 class="font-medium mb-2 flex justify-between">
+                Account to credit
+              </h3>
             </div>
             <div class="px-4 py-2 rounded-box border box-border">
               {{ transfer.beneficiaryAccount }}
@@ -58,7 +62,9 @@ function validateTransfer() {
 
           <div class="mt-12">
             <div class="flex justify-between">
-              <h3 class="font-medium mb-2 flex justify-between">Transfer date</h3>
+              <h3 class="font-medium mb-2 flex justify-between">
+                Transfer date
+              </h3>
             </div>
             <div class="px-4 py-2 rounded-box border box-border">
               {{ transfer.date.toDateString() }}
@@ -74,7 +80,13 @@ function validateTransfer() {
               >
                 Edit
               </router-link>
-              <button @click="validateTransfer" class="btn btn-primary">Confirm</button>
+              <button
+                id="validateTransfer"
+                @click="validateTransfer"
+                class="btn btn-primary"
+              >
+                Confirm
+              </button>
             </div>
           </div>
         </div>
@@ -90,25 +102,35 @@ function validateTransfer() {
             <div class="flex flex-col items-center mt-4">
               <div class="card bg-base-100 shadow-xl w-10/12">
                 <div class="card-body">
-                  <h2 class="card-title">Your transfer in less than 10 seconds</h2>
+                  <h2 class="card-title">
+                    Your transfer in less than 10 seconds
+                  </h2>
                   <p class="text-justify">
-                    Need to send money to friends or family quickly? Find in your beneficiaries who
-                    is eligible to instant payment and send them money in less than 10 seconds.
+                    Need to send money to friends or family quickly? Find in
+                    your beneficiaries who is eligible to instant payment and
+                    send them money in less than 10 seconds.
                   </p>
                 </div>
               </div>
             </div>
           </div>
-          <div class="absolute flex w-full flex-col bottom-1/4 text-xs md:text-base">
+          <div
+            class="absolute flex w-full flex-col bottom-1/4 text-xs md:text-base"
+          >
             <div class="flex flex-col items-center mt-10">
               <div class="card bg-primary shadow-xl w-10/12">
                 <div class="card-body text-primary-content">
                   <h2 class="card-title">More security with Passkeys</h2>
                   <p class="text-justify">
-                    Passkeys offer the convenience of fast and easy authentication, and provides a
-                    <b>security stronger than a password</b> combined with an SMS code.
+                    Passkeys offer the convenience of fast and easy
+                    authentication, and provides a
+                    <b>security stronger than a password</b> combined with an
+                    SMS code.
+                  </p>
+                  <p>
+                    Even better, with passkeys,
+                    <b>no application is required.</b>
                   </p>
-                  <p>Even better, with passkeys, <b>no application is required.</b></p>
                   <div class="card-actions">
                     <button
                       class="btn btn-outline bg-primary-content text-primary border-none text-xs md:text-base"
diff --git a/src/views/webauthn/WebauthnRegistration.vue b/src/views/webauthn/WebauthnRegistration.vue
index fb66509..7616f00 100644
--- a/src/views/webauthn/WebauthnRegistration.vue
+++ b/src/views/webauthn/WebauthnRegistration.vue
@@ -4,114 +4,128 @@
  * for an authenticated user. We assume that the webauthn compatibility
  * was checked before bringing the user to this page
  */
-import BiometricIcon from '@/components/icons/BiometricIcon.vue'
-import { onBeforeMount, ref } from 'vue'
+import BiometricIcon from "@/components/icons/BiometricIcon.vue";
+import { onBeforeMount, ref } from "vue";
 
-import { userSessionStore } from '@/store/userSession'
-import { RegistrationApi } from '@transmitsecurity-dev/ts-demo-client-lib'
-import { userPreferenceStore } from '@/store/userPreferences'
-import { handleError } from '@/helpers/errors'
-import { useToast } from 'vue-toastification'
-import { useRoute, useRouter } from 'vue-router'
-import { Action, reportAction } from '@/helpers/risk'
-import FooterSection from '@/components/FooterSection.vue'
+import { userSessionStore } from "@/store/userSession";
+import { RegistrationApi } from "@transmitsecurity-dev/ts-demo-client-lib";
+import { userPreferenceStore } from "@/store/userPreferences";
+import { handleError } from "@/helpers/errors";
+import { useToast } from "vue-toastification";
+import { useRoute, useRouter } from "vue-router";
+import { Action, reportAction } from "@/helpers/risk";
+import FooterSection from "@/components/FooterSection.vue";
 const props = withDefaults(
   defineProps<{
-    redirectRouteName?: string
+    redirectRouteName?: string;
   }>(),
-  { redirectRouteName: 'home' },
-)
+  { redirectRouteName: "home" }
+);
 
-const loading = ref(true)
+const loading = ref(true);
 
-const route = useRoute()
-const router = useRouter()
-const userSession = userSessionStore()
-const preference = userPreferenceStore()
-const toast = useToast()
-const registerApi = new RegistrationApi(undefined, import.meta.env.VITE_BACKEND_URL)
-const redirectRoute = ref((route.query.redirect as string) || props.redirectRouteName)
+const route = useRoute();
+const router = useRouter();
+const userSession = userSessionStore();
+const preference = userPreferenceStore();
+const toast = useToast();
+const registerApi = new RegistrationApi(
+  undefined,
+  import.meta.env.VITE_BACKEND_URL
+);
+const redirectRoute = ref(
+  (route.query.redirect as string) || props.redirectRouteName
+);
 
 onBeforeMount(async () => {
   try {
-    console.log('Verifying if webauthn is supported')
-    window.tsPlatform.webauthn.isPlatformAuthenticatorSupported().then((supported: boolean) => {
-      userSession.setWebAuthnSupported(supported)
-      console.log(`Webauthn is ${supported ? '' : 'not'} supported`)
-      if (!supported) {
-        router.push({ name: redirectRoute.value })
-      }
-    })
+    console.log("Verifying if webauthn is supported");
+    window.tsPlatform.webauthn
+      .isPlatformAuthenticatorSupported()
+      .then((supported: boolean) => {
+        userSession.setWebAuthnSupported(supported);
+        console.log(`Webauthn is ${supported ? "" : "not"} supported`);
+        if (!supported) {
+          router.push({ name: redirectRoute.value });
+        }
+      });
   } catch (error) {
-    handleError(error)
+    handleError(error);
   }
-})
+});
 
 async function registerWebauthn() {
   try {
-    const webauthnEncodedResult = await window.tsPlatform.webauthn.register(userSession.email)
+    const webauthnEncodedResult = await window.tsPlatform.webauthn.register(
+      userSession.email
+    );
     // WEBINAR ACTION - Report the account authentication update action
-    reportAction(Action.ACCOUNT_AUTH_CHANGE)
+    reportAction(Action.ACCOUNT_AUTH_CHANGE);
     const response = await registerApi.registerWebauthn({
       webauthnEncodedResult,
-    })
-    loading.value = false
-    console.log(response)
+    });
+    loading.value = false;
+    console.log(response);
     if (response.status == 200) {
       router.push({
-        name: 'webauthnRegistrationSuccess',
+        name: "webauthnRegistrationSuccess",
         query: { redirect: redirectRoute.value },
-      })
+      });
     } else {
-      toast.error(response.statusText)
+      toast.error(response.statusText);
     }
   } catch (error) {
-    handleError(error)
+    handleError(error);
   } finally {
-    loading.value = false
+    loading.value = false;
   }
 }
 
 function skip() {
-  router.push({ name: 'home' })
+  router.push({ name: "home" });
 }
 
 function doNotSuggestWebauthn() {
-  preference.setSuggestWebauthn(false)
+  preference.setSuggestWebauthn(false);
 }
 </script>
 
 <template>
-  <div class="flex flex-grow flex-col px-6 py-12 lg:px-8 bg-base-100 signup-view">
+  <div
+    class="flex flex-grow flex-col px-6 py-12 lg:px-8 bg-base-100 signup-view"
+  >
     <div class="container max-w-2xl self-center">
       <!-- Header-->
       <div class="mb-3 flex flex-col items-center justify-center space-x-3">
         <BiometricIcon />
         <p class="text-xl md:text-4xl font-semibold">
-          {{ $t('webauthn.registration.tiredOfPasswords') }}
+          {{ $t("webauthn.registration.tiredOfPasswords") }}
         </p>
       </div>
       <!-- Registration choice -->
       <div class="space-y-8 flex flex-col">
         <div class="text-center">
-          {{ $t('webauthn.registration.weDetectedCompatibility') }}<br />
-          {{ $t('webauthn.registration.dependingOnYourDevice') }}
+          {{ $t("webauthn.registration.weDetectedCompatibility") }}<br />
+          {{ $t("webauthn.registration.dependingOnYourDevice") }}
         </div>
         <!-- later or enable -->
         <div class="flex justify-center">
           <div class="flex-grow flex flex-col gap-y-4 max-w-sm">
             <button @click="skip" class="btn btn-ghost w-full py-3">
-              {{ $t('webauthn.registration.later') }}
+              {{ $t("webauthn.registration.later") }}
             </button>
-            <button @click="registerWebauthn" class="btn btn-primary w-full py-3">
-              {{ $t('webauthn.registration.enable') }}
+            <button
+              @click="registerWebauthn"
+              class="btn btn-primary w-full py-3"
+            >
+              {{ $t("webauthn.registration.enable") }}
             </button>
           </div>
         </div>
         <!-- always skip -->
         <div class="flex justify-center">
           <button @click="doNotSuggestWebauthn" class="btn btn-ghost btn-xs">
-            {{ $t('webauthn.registration.dontAskAgain') }}
+            {{ $t("webauthn.registration.dontAskAgain") }}
           </button>
         </div>
       </div>
diff --git a/src/views/webauthn/WebauthnRegistrationSuccess.vue b/src/views/webauthn/WebauthnRegistrationSuccess.vue
index e4c548f..e78876f 100644
--- a/src/views/webauthn/WebauthnRegistrationSuccess.vue
+++ b/src/views/webauthn/WebauthnRegistrationSuccess.vue
@@ -3,10 +3,10 @@
  * This component informs the user that the
  * webauthn registration was successful
  */
-import BiometricIcon from '@/components/icons/BiometricIcon.vue'
-import { ref } from 'vue'
-import { useRoute } from 'vue-router'
-import FooterSection from '@/components/FooterSection.vue'
+import BiometricIcon from "@/components/icons/BiometricIcon.vue";
+import { ref } from "vue";
+import { useRoute } from "vue-router";
+import FooterSection from "@/components/FooterSection.vue";
 
 const props = withDefaults(
   defineProps<{
@@ -14,36 +14,43 @@ const props = withDefaults(
      * Name of the route where the user
      * is taken when clicking "Continue"
      */
-    redirectRouteName?: string
+    redirectRouteName?: string;
   }>(),
   // Default values
-  { redirectRouteName: 'home' },
-)
+  { redirectRouteName: "home" }
+);
 
-const route = useRoute()
-const redirectRoute = ref((route.query.redirect as string) || props.redirectRouteName)
+const route = useRoute();
+const redirectRoute = ref(
+  (route.query.redirect as string) || props.redirectRouteName
+);
 </script>
 
 <template>
-  <div class="flex flex-col flex-grow px-6 py-12 lg:px-8 bg-base-100 signup-view">
+  <div
+    class="flex flex-col flex-grow px-6 py-12 lg:px-8 bg-base-100 signup-view"
+  >
     <!-- Header-->
     <div class="mb-3 flex flex-col items-center justify-center space-x-3">
       <BiometricIcon />
       <p class="text-xl md:text-4xl font-semibold">
-        {{ $t('webauthn.registration.successful') }}
+        {{ $t("webauthn.registration.successful") }}
       </p>
     </div>
     <!-- Registration choice -->
     <div class="space-y-8 flex flex-col">
       <div class="text-center">
-        {{ $t('webauthn.registration.youCanNowLoginWithYourDevice') }}<br />
-        {{ $t('webauthn.registration.thisMethodIsSimplerAndMoreSecure') }}
+        {{ $t("webauthn.registration.youCanNowLoginWithYourDevice") }}<br />
+        {{ $t("webauthn.registration.thisMethodIsSimplerAndMoreSecure") }}
       </div>
       <!-- continue -->
       <div class="flex justify-center">
         <div class="flex-grow flex flex-col gap-y-4 max-w-sm">
-          <router-link :to="{ name: redirectRoute }" class="btn btn-primary w-full py-3">
-            {{ $t('global.continue') }}
+          <router-link
+            :to="{ name: redirectRoute }"
+            class="btn btn-primary w-full py-3"
+          >
+            {{ $t("global.continue") }}
           </router-link>
         </div>
       </div>
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 206eb02..6e375bb 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1,30 +1,34 @@
 /// <reference types="vite/client" />
 
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>
-  export default component
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<
+    Record<string, unknown>,
+    Record<string, unknown>,
+    unknown
+  >;
+  export default component;
 }
 interface ImportMetaEnv {
-  readonly VITE_HOST: string
-  readonly VITE_PORT: string
-  readonly VITE_PLATFORM_SDK_URL: string
-  readonly VITE_BACKEND_URL: string
-  readonly VITE_TS_SERVER_PATH: string
-  readonly VITE_TS_REDIRECT_URL: string
-  readonly VITE_TS_IDO_SERVER_PATH: string
-  readonly VITE_TS_IDO_APP_ID: string
-  readonly VITE_FALLBACK_LOCALE: string
-  readonly VITE_THEME: string
-  readonly VITE_DEMO_PHONE: string
-  readonly VITE_DEMO_FIRST_NAME: string
-  readonly VITE_DEMO_LAST_NAME: string
-  readonly VITE_DEMO_STREET: string
-  readonly VITE_DEMO_CITY: string
-  readonly VITE_DEMO_COUNTRY: string
-  readonly VITE_DEMO_POSTAL_CODE: string
-  readonly VITE_DEMO_PASSWORD: string
+  readonly VITE_HOST: string;
+  readonly VITE_PORT: string;
+  readonly VITE_PLATFORM_SDK_URL: string;
+  readonly VITE_BACKEND_URL: string;
+  readonly VITE_TS_SERVER_PATH: string;
+  readonly VITE_TS_REDIRECT_URL: string;
+  readonly VITE_TS_IDO_SERVER_PATH: string;
+  readonly VITE_TS_IDO_APP_ID: string;
+  readonly VITE_FALLBACK_LOCALE: string;
+  readonly VITE_THEME: string;
+  readonly VITE_DEMO_PHONE: string;
+  readonly VITE_DEMO_FIRST_NAME: string;
+  readonly VITE_DEMO_LAST_NAME: string;
+  readonly VITE_DEMO_STREET: string;
+  readonly VITE_DEMO_CITY: string;
+  readonly VITE_DEMO_COUNTRY: string;
+  readonly VITE_DEMO_POSTAL_CODE: string;
+  readonly VITE_DEMO_PASSWORD: string;
 }
 interface ImportMeta {
-  readonly env: ImportMetaEnv
+  readonly env: ImportMetaEnv;
 }
diff --git a/src/vitestSetup.ts b/src/vitestSetup.ts
index a757fb6..708f9d3 100644
--- a/src/vitestSetup.ts
+++ b/src/vitestSetup.ts
@@ -1,2 +1,2 @@
 //global.WebSocket = require('ws')
-export {}
+export {};