refactor: RestoreKey, feat: ButtonGroup

front-end/src/renderer/components/Approvers/ApproverModal.vue

@@ -58,9 +58,7 @@ const handleApproverUpdate = (newApprover: TransactionApproverDto) =>
 const handleSingleApproverUpdate = (newApprover: TransactionApproverDto[]) =>
   (currentSingleApprover.value = newApprover);
 
-const handleDoneClick = async (e: Event) => {
-  e.preventDefault();
-
+const handleDoneClick = async () => {
   if (currentApproverInvalid.value) {
     errorModalShow.value = true;
     return;
@@ -172,7 +170,7 @@ const modalContentContainerStyle = { padding: '0 10%', height: '80%' };
 <template>
   <AppModal :show="show" @update:show="emit('update:show', $event)" class="full-screen-modal">
     <div class="p-5 h-100">
-      <form @submit="handleDoneClick" class="flex-column-100 fill-remaining">
+      <form @submit.prevent="handleDoneClick" class="flex-column-100 fill-remaining">
         <div>
           <i class="bi bi-x-lg cursor-pointer" @click="$emit('update:show', false)"></i>
         </div>

front-end/src/renderer/components/ComplexKey/ComplexKeyModal.vue

@@ -51,9 +51,7 @@ const handleSaveComplexKeyButtonClick = () => {
   }
 };
 
-const handleSaveButtonClick = async (e: Event) => {
-  e.preventDefault();
-
+const handleSaveButtonClick = async () => {
   if (currentKeyInvalid.value) {
     errorModalShow.value = true;
     return;
@@ -77,7 +75,7 @@ const modalContentContainerStyle = { padding: '0 10%', height: '80%' };
 <template>
   <AppModal :show="show" @update:show="handleShowUpdate" class="full-screen-modal">
     <div class="p-5 h-100">
-      <form @submit="handleSaveButtonClick" class="h-100">
+      <form @submit.prevent="handleSaveButtonClick" class="h-100">
         <div>
           <i class="bi bi-x-lg cursor-pointer" @click="$emit('update:show', false)"></i>
         </div>

front-end/src/renderer/components/ComplexKey/ComplexKeySaveKeyModal.vue

@@ -39,8 +39,7 @@ const nickname = ref('');
 /* Handlers */
 const handleShowUpdate = (show: boolean) => emit('update:show', show);
 
-const handleSaveKeyList = async (e: Event) => {
-  e.preventDefault();
+const handleSaveKeyList = async () => {
   if (!isUserLoggedIn(user.personal)) {
     throw new Error('User is not logged in');
   }
@@ -65,7 +64,7 @@ const handleSaveKeyList = async (e: Event) => {
       <div>
         <i class="bi bi-x-lg cursor-pointer" @click="handleShowUpdate(false)"></i>
       </div>
-      <form class="mt-3" @submit="handleSaveKeyList">
+      <form class="mt-3" @submit.prevent="handleSaveKeyList">
         <h3 class="text-center text-title text-bold">Enter the nickname</h3>
         <div class="form-group mt-5 mb-4">
           <label class="form-label">Nickname</label>

front-end/src/renderer/components/ComplexKey/ComplexKeySelectAccountModal.vue

@@ -56,9 +56,7 @@ const accountIdsList = computed(() => {
 /* Handlers */
 const handleShowUpdate = (show: boolean) => emit('update:show', show);
 
-const handleInsert = async (e: Event) => {
-  e.preventDefault();
-
+const handleInsert = async () => {
   if (!isAccountId(selectedAccountData.accountId.value)) {
     throw new Error('Invalid Account ID');
   }
@@ -87,7 +85,7 @@ onMounted(async () => {
 <template>
   <AppModal :show="show" @update:show="handleShowUpdate" class="medium-modal">
     <div class="p-4">
-      <form @submit="handleInsert">
+      <form @submit.prevent="handleInsert">
         <div>
           <i class="bi bi-x-lg cursor-pointer" @click="$emit('update:show', false)"></i>
         </div>

front-end/src/renderer/components/ComplexKey/ComplexKeySelectSavedKey.vue

@@ -50,9 +50,7 @@ const handleTrashClick = (e: Event, id: string) => {
   deleteSavedKeyModalShown.value = true;
 };
 
-const handleDeleteSavedKey = async (e: Event) => {
-  e.preventDefault();
-
+const handleDeleteSavedKey = async () => {
   if (!isUserLoggedIn(user.personal)) {
     throw new Error('User is not logged in');
   }
@@ -65,9 +63,7 @@ const handleDeleteSavedKey = async (e: Event) => {
   complexKeyId.value = null;
 };
 
-const handleDone = (e: Event) => {
-  e.preventDefault();
-
+const handleDone = () => {
   if (complexKey.value) {
     props.onKeyListSelect(complexKey.value);
     handleShowUpdate(false);
@@ -86,7 +82,7 @@ onBeforeMount(async () => {
 <template>
   <AppModal :show="show" @update:show="handleShowUpdate" class="medium-modal">
     <div class="p-4">
-      <form @submit="handleDone">
+      <form @submit.prevent="handleDone">
         <div>
           <i class="bi bi-x-lg cursor-pointer" @click="$emit('update:show', false)"></i>
         </div>
@@ -173,7 +169,7 @@ onBeforeMount(async () => {
           <div class="text-center">
             <AppCustomIcon :name="'bin'" style="height: 160px" />
           </div>
-          <form @submit="handleDeleteSavedKey">
+          <form @submit.prevent="handleDeleteSavedKey">
             <h3 class="text-center text-title text-bold mt-3">Remove Key List</h3>
             <p class="text-center text-small text-secondary mt-4">
               Are you sure you want to remove this Key List from your Complex Keys List

front-end/src/renderer/components/DataMigration/DecryptMnemonicPhrase.vue

@@ -21,8 +21,7 @@ const password = ref<string>('');
 const error = ref<string | null>(null);
 
 /* Handlers */
-const handleSubmit = (event: Event) => {
-  event.preventDefault();
+const handleSubmit = () => {
   if (password.value.trim().length === 0) {
     error.value = 'Password cannot be empty';
     return;
@@ -50,7 +49,7 @@ const handleClose = () => {
       <div class="text-center mt-4">
         <i class="bi bi-key large-icon" style="line-height: 16px"></i>
       </div>
-      <form @submit="handleSubmit">
+      <form @submit.prevent="handleSubmit">
         <h3 class="text-center text-title text-bold mt-3">Enter Password</h3>
 
         <div class="form-group mt-4">

front-end/src/renderer/components/ForgotPasswordModal.vue

@@ -79,9 +79,7 @@ const isPrimaryButtonDisabled = computed(() => {
 });
 
 /* Handlers */
-const handleSubmit = async (e: Event) => {
-  e.preventDefault();
-
+const handleSubmit = async () => {
   if (!shouldEnterToken.value && !shouldSetNewPassword.value) {
     handleEmailEnter();
   } else if (!shouldSetNewPassword.value) {
@@ -228,7 +226,7 @@ watch(newPassword, pass => {
       <div class="text-center">
         <AppCustomIcon :name="'contact'" style="height: 160px" />
       </div>
-      <form class="mt-3" @submit="handleSubmit">
+      <form class="mt-3" @submit.prevent="handleSubmit">
         <h3 class="text-center text-title text-bold">
           {{ shouldSetNewPassword ? 'Set new password' : 'Forgot password' }}
         </h3>

front-end/src/renderer/components/KeyPair/ImportEncrypted/components/DecryptKeyModal.vue

@@ -65,8 +65,7 @@ const hashCode = computed(() =>
 /* Handlers */
 const handleSkipAll = () => emit('skip:all');
 const handleSkip = () => emit('skip:one');
-const handleSubmit = async (event: Event) => {
-  event.preventDefault();
+const handleSubmit = async () => {
   await decrypt();
 };
 
@@ -220,7 +219,7 @@ watch(
       <div class="text-center mt-4">
         <i class="bi bi-key large-icon" style="line-height: 16px"></i>
       </div>
-      <form @submit="handleSubmit">
+      <form @submit.prevent="handleSubmit">
         <h3 class="text-center text-title text-bold mt-3">Decrypt key</h3>
 
         <div class="form-group mt-4">

front-end/src/renderer/components/KeyPair/ImportEncrypted/components/SelectEncryptedKeysModal.vue

@@ -36,8 +36,7 @@ const fileNames = computed(() => {
 });
 
 /* Handlers */
-const handleSubmit = (event: Event) => {
-  event.preventDefault();
+const handleSubmit = () => {
   emit('update:keyPaths', selectedKeyPaths.value);
   emit('continue');
 };
@@ -111,7 +110,7 @@ watch(
       <div class="text-center mt-4">
         <i class="bi bi-key large-icon"></i>
       </div>
-      <form @submit="handleSubmit">
+      <form @submit.prevent="handleSubmit">
         <h3 class="text-center text-title text-bold mt-3">Import encrypted keys</h3>
 
         <p class="text-center mt-4">

front-end/src/renderer/components/Organization/AddOrSelectModal.vue

@@ -18,8 +18,6 @@ const emit = defineEmits<{
 
 /* Handlers */
 const handleChoose = (e: Event) => {
-  e.preventDefault();
-
   if (
     e instanceof SubmitEvent &&
     e.submitter instanceof HTMLButtonElement &&
@@ -43,7 +41,7 @@ function isChoice(value: string): value is Choice {
     :close-on-escape="false"
     class="common-modal"
   >
-    <form class="p-4" @submit="handleChoose">
+    <form class="p-4" @submit.prevent="handleChoose">
       <div class="text-start">
         <i class="bi bi-x-lg cursor-pointer" @click="$emit('update:show', false)"></i>
       </div>

front-end/src/renderer/components/Organization/AddOrganizationModal.vue

@@ -38,9 +38,7 @@ const nickname = ref('');
 const serverUrl = ref('');
 
 /* Handlers */
-const handleAdd = async (e: Event) => {
-  e.preventDefault();
-
+const handleAdd = async () => {
   try {
     const url = new URL(serverUrl.value);
     serverUrl.value = url.origin;
@@ -77,7 +75,7 @@ watch(
     :close-on-escape="false"
     class="common-modal"
   >
-    <form class="p-4" @submit="handleAdd">
+    <form class="p-4" @submit.prevent="handleAdd">
       <div class="text-start">
         <i class="bi bi-x-lg cursor-pointer" @click="$emit('update:show', false)"></i>
       </div>

front-end/src/renderer/components/Organization/OrganizationStatusModal.vue

@@ -16,9 +16,7 @@ const inactiveSelectedOrganizationModalShown = ref(false);
 
 /* Handlers */
 
-const handleSelectedOrganizationNotActiveSubmit = async (e: Event) => {
-  e.preventDefault();
-
+const handleSelectedOrganizationNotActiveSubmit = async () => {
   inactiveSelectedOrganizationModalShown.value = false;
 };
 
@@ -49,7 +47,7 @@ watch(
           @click="inactiveSelectedOrganizationModalShown = false"
         ></i>
       </div>
-      <form class="mt-3" @submit="handleSelectedOrganizationNotActiveSubmit">
+      <form class="mt-3" @submit.prevent="handleSelectedOrganizationNotActiveSubmit">
         <h3 class="text-center text-title text-bold">Organization status error</h3>
         <p
           class="text-center text-small text-secondary mt-4"

front-end/src/renderer/components/Organization/SelectOrganizationModal.vue

@@ -29,9 +29,7 @@ const organizations = ref<Organization[]>([]);
 /* Handlers */
 const handleShowUpdate = (show: boolean) => emit('update:show', show);
 
-const handleSelect = (e: Event) => {
-  e.preventDefault();
-
+const handleSelect = () => {
   if (selectedOrganization.value) {
     emit('onSelected', selectedOrganization.value);
     handleShowUpdate(false);
@@ -46,7 +44,7 @@ onBeforeMount(async () => {
 <template>
   <AppModal :show="show" @update:show="handleShowUpdate" class="medium-modal">
     <div class="p-4">
-      <form @submit="handleSelect">
+      <form @submit.prevent="handleSelect">
         <div>
           <i class="bi bi-x-lg cursor-pointer" @click="$emit('update:show', false)"></i>
         </div>

front-end/src/renderer/components/Organization/UserSelectModal.vue

@@ -45,9 +45,7 @@ const listedContacts = computed(() =>
 /* Handlers */
 const handleShowUpdate = (show: boolean) => emit('update:show', show);
 
-const handleInsert = (e: Event) => {
-  e.preventDefault();
-
+const handleInsert = () => {
   if (userIds.value.length === 0) return;
 
   emit('users-selected', userIds.value);
@@ -58,7 +56,7 @@ const handleInsert = (e: Event) => {
 <template>
   <AppModal :show="show" @update:show="handleShowUpdate" class="medium-modal">
     <div class="p-4">
-      <form @submit="handleInsert">
+      <form @submit.prevent="handleInsert">
         <div>
           <i class="bi bi-x-lg cursor-pointer" @click="$emit('update:show', false)"></i>
         </div>

front-end/src/renderer/components/UserPasswordModal.vue

@@ -23,8 +23,7 @@ const password = ref('');
 const callback = ref<((password: string) => void) | null>(null);
 
 /* Handlers */
-const handlePasswordEntered = async (e: Event) => {
-  e.preventDefault();
+const handlePasswordEntered = async () => {
   if (!isUserLoggedIn(user.personal)) {
     throw new Error('User is not logged in');
   }
@@ -89,7 +88,7 @@ defineExpose({
       <div class="text-center">
         <AppCustomIcon :name="'lock'" style="height: 160px" />
       </div>
-      <form class="mt-3" @submit="handlePasswordEntered">
+      <form class="mt-3" @submit.prevent="handlePasswordEntered">
         <h3 class="text-center text-title text-bold">{{ heading || 'Enter your password' }}</h3>
         <p class="text-center text-small text-secondary mt-4" v-if="subHeading">
           {{ subHeading }}

front-end/src/renderer/components/modals/UpdateNicknameModal.vue

@@ -35,9 +35,7 @@ const isUpdating = ref(false);
 /* Handlers */
 const handleShow = (show: boolean) => emit('update:show', show);
 
-const handleUpdate = async (e: Event) => {
-  e.preventDefault();
-
+const handleUpdate = async () => {
   const oldNickname = getNicknameById(props.keyPairId, user.keyPairs);
 
   if (nickname.value.trim() === (oldNickname || '')) {
@@ -95,7 +93,7 @@ watch(
       <div class="text-center mt-5">
         <i class="bi bi-pencil-fill large-icon" style="line-height: 16px"></i>
       </div>
-      <form @submit="handleUpdate">
+      <form @submit.prevent="handleUpdate">
         <h3 class="text-center text-title text-bold mt-5">Update key pair nickname</h3>
         <div class="form-group mt-4">
           <label class="form-label">Enter Nickname</label>

front-end/src/renderer/components/ui/ButtonGroup.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import AppButton from '@renderer/components/ui/AppButton.vue';
+
+/* Props */
+const props = defineProps<{
+  items: { label: string; value: string | number; active?: boolean; id: string }[];
+  activeValue: string | number;
+  color?: 'primary' | 'secondary' | 'borderless' | 'danger';
+}>();
+
+/* Emits */
+const emit = defineEmits<{
+  (event: 'change', value: string | number): void;
+}>();
+
+/* Handlers */
+const handleButtonClick = (value: string | number) => {
+  if (value !== props.activeValue) {
+    emit('change', value);
+  }
+};
+</script>
+
+<template>
+  <div class="btn-group-container" role="group">
+    <div class="btn-group gap-3 overflow-x-auto w-100">
+      <template v-for="item in items" :key="item.value">
+        <AppButton
+          class="rounded-3"
+          :class="{
+            active: activeValue === item.value,
+            'text-body': activeValue !== item.value,
+          }"
+          :color="activeValue === item.value ? color : undefined"
+          @click="handleButtonClick(item.value)"
+          :data-testid="item.id"
+        >
+          {{ item.label }}
+        </AppButton>
+      </template>
+    </div>
+  </div>
+</template>

front-end/src/renderer/pages/AccountSetup/components/NewPassword.vue

@@ -54,9 +54,7 @@ const isPrimaryButtonDisabled = computed(() => {
 });
 
 /* Handlers */
-const handleFormSubmit = async (event: Event) => {
-  event.preventDefault();
-
+const handleFormSubmit = async () => {
   await handleChangePassword();
 };
 
@@ -135,7 +133,7 @@ watch(newPassword, pass => {
   <div class="fill-remaining flex-start flex-column mt-4">
     <h1 class="text-display text-bold text-center">New Password</h1>
     <p class="text-main text-center mt-5">Please enter new password</p>
-    <form @submit="handleFormSubmit" class="row justify-content-center w-100 mt-5">
+    <form @submit.prevent="handleFormSubmit" class="row justify-content-center w-100 mt-5">
       <div class="col-12 col-md-8 col-lg-6">
         <AppPasswordInput
           v-model="currentPassword"