feat(auth): require user confirmation before clearing account

components/ui/ConfirmationModal/ConfirmationModal.vue

@@ -1,7 +1,11 @@
 <template>
   <transition name="modal">
     <UiModal v-if="showModal" @close="close">
-      <Confirmation @confirm="confirm" @close="close">
+      <Confirmation
+        :show-confirm-button="showConfirmButton"
+        @confirm="confirm"
+        @close="close"
+      >
         <template #title><slot name="title" /></template>
         <template #body><slot name="body" /></template>
       </Confirmation>

components/ui/Modal/Modal.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="modal-container">
   <div class="modal" :class="{small: small}" v-click-outside="close">
     <TypographyTitle v-if="title" :text="title" :size="6" />
     <slot />

components/ui/Modal/Modal.less

@@ -1,4 +1,4 @@
-.container {
+.modal-container {
   display: flex;
   align-items: center;
   justify-content: center;

components/views/ModalDialog/ModalDialog.less

@@ -4,6 +4,7 @@
   max-height: 88vh;
   background: @modal-gradient;
   overflow: auto;
+  &:extend(.round-corners);
 
   .content {
     display: flex;

components/views/confirmation/Confirmation.vue

@@ -78,6 +78,8 @@ export default Vue.extend({
   max-width: 500px;
   padding: 16px 32px 16px 16px;
   user-select: none;
+  background: @modal-gradient;
+  &:extend(.round-corners);
 
   .confirmation-main {
     display: flex;

components/views/consentScanConfirmation/ConsentScanConfirmation.vue

@@ -1,5 +1,5 @@
 <template>
-  <Confirmation :show-confirm-button="true" @confirm="confirm" @close="close">
+  <Confirmation show-confirm-button @confirm="confirm" @close="close">
     <template #title>{{ $t('pages.privacy.consentScan.title') }}</template>
     <template #body>{{ $t('pages.privacy.consentScan.subtitle') }}</template>
   </Confirmation>

locales/en-US.js

@@ -256,6 +256,9 @@ export default {
       generate_random_user: 'Generate a Random User (DEV)',
       browser_warning:
         'Satellite is optimized for Chromium browsers. You may experience UI and functional issues. We will optimize for more browsers in the future.',
+      confirm_clear_account: 'This will clear your account',
+      confirm_clear_account_description:
+        'Are you sure you want to clear your account and all data?',
     },
     loading: {
       loading: 'Linking Satellites...',

pages/auth/unlock/Unlock.html

@@ -25,22 +25,28 @@
         <chevron-right-icon size="1x" v-else />
       </InteractablesInput>
     </div>
+
     <InteractablesSwitch
       v-model="storePin"
       :label="$t('pages.unlock.store_pin')"
     />
+
     <br />
+
     <button
       v-if="step === 'login'"
       class="delete-link font-size-sm"
-      @click="clearAndReset"
+      @click="confirmClearAccountModalVisible = true"
     >
       {{ $t('pages.unlock.delete_account_label') }}
     </button>
+
     <!-- <InteractablesRealm /> -->
+
     <TypographyText v-if="!isChrome" color="danger" style="max-width: 600px">
       {{ $t('pages.unlock.browser_warning') }}
     </TypographyText>
+
     <div class="random-user-container" v-if="isDev">
       <InteractablesButton
         class="random-user-btn"
@@ -50,6 +56,20 @@
       /></InteractablesButton>
     </div>
   </div>
+
   <UiVersion name version @click="toggleChangelogVisibility" />
+
   <UiUpdateModal v-if="ui.modals.changelog" />
+
+  <UiConfirmationModal
+    :show-modal="confirmClearAccountModalVisible"
+    @close="() => confirmClearAccountModalVisible = false"
+    @confirm="clearAccount"
+    show-confirm-button
+  >
+    <template #title>{{ $t('pages.unlock.confirm_clear_account') }}</template>
+    <template #body
+      >{{ $t('pages.unlock.confirm_clear_account_description') }}</template
+    >
+  </UiConfirmationModal>
 </div>

pages/auth/unlock/Unlock.less

@@ -6,6 +6,7 @@
   flex-wrap: nowrap;
   flex-direction: column;
   gap: 40px;
+  user-select: none;
 
   .info-button {
     display: flex;
@@ -28,7 +29,8 @@
 
     .delete-link {
       color: #fff;
-      margin-top: @normal-spacing;
+      margin: @normal-spacing auto 0 auto;
+
       &:hover {
         opacity: 0.75;
       }

pages/auth/unlock/index.vue

@@ -24,6 +24,7 @@ export default Vue.extend({
       error: '',
       step: 'signup' as 'signup' | 'login',
       isChrome: false,
+      confirmClearAccountModalVisible: false,
     }
   },
   computed: {
@@ -151,7 +152,7 @@ ${this.$t('pages.unlock.choose_pin_description_2')}`
     async deleteAccount() {
       await this.$store.dispatch('settings/clearLocalStorage')
     },
-    async clearAndReset() {
+    async clearAccount() {
       await this.deleteAccount()
       location.reload()
     },