refactor: rebrand update stronghold views (#1218)

Co-authored-by: Matthew Maxwell <[email protected]>
bloomwalletio · Oct 25, 2023 · 89e62a1 · 89e62a1
1 parent 162c1b2
commit 89e62a1
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 45 deletions.
diff --git a/packages/desktop/views/update-stronghold/views/ChangePasswordView.svelte b/packages/desktop/views/update-stronghold/views/ChangePasswordView.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { showNotification } from '@auxiliary/notification'
-    import { Alert } from '@bloomwalletio/ui'
+    import { Alert, Button, PasswordInput } from '@bloomwalletio/ui'
     import { onboardingProfile, updateOnboardingProfile } from '@contexts/onboarding'
     import { handleError } from '@core/error/handlers'
     import { localize } from '@core/i18n'
@@ -12,7 +12,7 @@
     import { unlockStronghold } from '@core/profile/actions'
     import { activeProfile, updateActiveProfile } from '@core/profile/stores'
     import { PASSWORD_REASON_MAP } from '@core/stronghold'
-    import { Button, PasswordInput } from '@ui'
+    import { StrengthMeter } from '@ui'
     import { HTMLButtonType } from '@ui/enums'
     import { OnboardingLayout } from '@views/components'
     import { onMount } from 'svelte'
@@ -117,7 +117,7 @@
 </script>
 
 <OnboardingLayout
-    title={localize('views.settings.changePassword.title')}
+    title={localize('views.updateStronghold.changePassword.title')}
     continueButton={{
         text: localize('actions.skip'),
         onClick: onSkipClick,
@@ -130,36 +130,30 @@
 >
     <div slot="content" class="space-y-4">
         <Alert variant="warning" text={localize('views.updateStronghold.changePassword.hint')} />
-        <form on:submit|preventDefault={onChangeClick} id="update-stronghold-form" class="space-y-4">
-            <PasswordInput
-                bind:value={newPassword}
-                showRevealToggle
-                strengthLevels={4}
-                showStrengthLevel
-                strength={passwordStrength.score}
-                placeholder={localize('general.password')}
-                label={localize('general.password')}
-                disabled={busy}
-                submitHandler={validatePassword}
-            />
-            <PasswordInput
-                bind:error={passwordError}
-                bind:value={confirmPassword}
-                showRevealToggle
-                placeholder={localize('general.confirmPassword')}
-                label={localize('general.confirmPassword')}
-                disabled={busy}
-                submitHandler={validatePassword}
-            />
+        <form on:submit|preventDefault={onChangeClick} id="update-stronghold-form" class="flex flex-col space-y-5">
+            <StrengthMeter strength={passwordStrength?.score ?? 0} />
+            <div class="flex flex-col gap-4">
+                <PasswordInput
+                    bind:value={newPassword}
+                    label={localize('general.password')}
+                    autofocus
+                    disabled={busy}
+                />
+                <PasswordInput
+                    bind:error={passwordError}
+                    bind:value={confirmPassword}
+                    label={localize('general.confirmPassword')}
+                    disabled={busy}
+                />
+            </div>
         </form>
         <Button
             form="update-stronghold-form"
             type={HTMLButtonType.Submit}
-            classes="w-full"
+            text={localize('views.settings.changePassword.title')}
+            width="full"
             disabled={!newPassword || !confirmPassword || busy}
-            isBusy={isChangeBusy}
-        >
-            {localize('views.settings.changePassword.title')}
-        </Button>
+            busy={isChangeBusy}
+        />
     </div>
 </OnboardingLayout>
diff --git a/packages/desktop/views/update-stronghold/views/UpdateBackupView.svelte b/packages/desktop/views/update-stronghold/views/UpdateBackupView.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
     import { showNotification } from '@auxiliary/notification'
-    import { Alert } from '@bloomwalletio/ui'
+    import { Alert, Button } from '@bloomwalletio/ui'
     import { updateOnboardingProfile } from '@contexts/onboarding/stores'
     import { exportStronghold } from '@contexts/settings/actions'
     import { localize } from '@core/i18n'
     import { login } from '@core/profile/actions'
-    import { Button } from '@ui'
     import { OnboardingLayout } from '@views/components'
     import { updateStrongholdRouter } from '../update-stronghold-router'
 
@@ -64,7 +63,7 @@
 </script>
 
 <OnboardingLayout
-    title={localize(`views.updateStronghold.updateBackup.${isRecovery ? 'recoveryTitle' : 'loginTitle'}`)}
+    title={localize('views.updateStronghold.updateBackup.title')}
     description={localize(`views.updateStronghold.updateBackup.${isRecovery ? 'recoveryBody' : 'loginBody'}`)}
     continueButton={{
         text: localize('actions.skip'),
@@ -78,8 +77,6 @@
 >
     <div slot="content" class="space-y-4">
         <Alert variant="warning" text={localize('views.updateStronghold.updateBackup.hint')} />
-        <Button classes="w-full" disabled={busy} isBusy={busy} onClick={onBackupClick}>
-            {localize('actions.saveBackup')}
-        </Button>
+        <Button text={localize('actions.saveBackup')} width="full" {busy} on:click={onBackupClick} />
     </div>
 </OnboardingLayout>
diff --git a/packages/desktop/views/update-stronghold/views/UpdateStrongholdView.svelte b/packages/desktop/views/update-stronghold/views/UpdateStrongholdView.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
+    import { PasswordInput } from '@bloomwalletio/ui'
     import { migrateStrongholdFromOnboardingProfile } from '@contexts/onboarding/actions'
     import { localize } from '@core/i18n'
     import { migrateStrongholdFromActiveProfile } from '@core/profile/actions/active-profile'
     import { isValidJson } from '@core/utils'
-    import { PasswordInput } from '@ui'
     import { OnboardingLayout } from '@views/components'
     import { updateStrongholdRouter } from '../update-stronghold-router'
 
@@ -48,9 +48,13 @@
     }}
     {busy}
 >
-    <div slot="content">
-        <form on:submit|preventDefault={onSubmit} id="update-stronghold-form">
-            <PasswordInput bind:value={password} bind:error={passwordError} autofocus showRevealToggle />
-        </form>
-    </div>
+    <PasswordInput
+        bind:value={password}
+        slot="content"
+        label={localize('general.password')}
+        bind:error={passwordError}
+        disabled={busy}
+        autofocus
+        on:submit={onSubmit}
+    />
 </OnboardingLayout>
diff --git a/packages/shared/src/locales/en.json b/packages/shared/src/locales/en.json
@@ -550,19 +550,19 @@
         },
         "updateStronghold": {
             "update": {
-                "title": "Update Stronghold",
+                "title": "Update your Stronghold",
                 "loginBody": "Your Stronghold's version is out of date. Provide your password to update Stronghold.",
                 "recoveryBody": "The imported Stronghold’s version is out of date, to continue we will need to update the stronghold to the latest version."
             },
             "updateBackup": {
-                "loginTitle": "Stronghold updated",
+                "title": "Stronghold updated",
                 "loginBody": "It's all good now - you're running the latest Stronghold version",
-                "recoveryTitle": "Stronghold is successfully recovered and updated",
                 "recoveryBody": "You can now continue setting up your wallet",
                 "hint": "We highly recommend to delete all previous Stronghold backup files and save a new one"
             },
             "changePassword": {
-                "hint": "Your Stronghold was out of date and has been updated. We recommend that you change your Stronghold password."
+                "title": "Change your password",
+                "hint": "Your Stronghold was out of date and has been updated. We recommend that you change your password."
             }
         }
     },