Merge pull request #1869 from oasisprotocol/lw/profile-delete-text

Update profile deletion text

.changelog/1869.internal.md

@@ -0,0 +1 @@
+Show better description in Delete Profile dialog if user forgot their password

playwright/tests/persist.spec.ts

@@ -225,12 +225,8 @@ test.describe('Persist', () => {
     })
 
     async function testDeletingAndCreatingNew(page: Page) {
-      await page.getByRole('button', { name: 'Delete profile' }).click()
-      await page
-        .getByLabel(
-          "Are you sure you want to delete this profile? This action cannot be undone and will erase your private keys.To continue please enter 'delete' below.",
-        )
-        .fill('delete')
+      await page.getByRole('button', { name: 'Forgot password?' }).click()
+      await page.getByLabel(/To confirm and proceed/).fill('delete')
       await page.getByRole('button', { name: 'Yes, delete' }).click()
 
       await page.getByRole('button', { name: /Open wallet/ }).click()

playwright/tests/toolbar.spec.ts

@@ -24,7 +24,7 @@ test.describe('Profile tab', () => {
     await page.getByTestId('account-selector').click()
     await page.getByTestId('toolbar-profile-tab').click()
     await page.getByRole('button', { name: 'Delete profile' }).click()
-    await page.getByLabel(/Are you sure you want/).fill('delete')
+    await page.getByLabel(/To confirm and proceed/).fill('delete')
     await page.getByRole('button', { name: 'Yes, delete' }).click()
     await expect(page).not.toHaveURL(new RegExp(`/account/${privateKeyAddress}`))
   })

src/app/components/FatalErrorHandler/index.tsx

@@ -61,7 +61,7 @@ export function FatalErrorHandler({ children }: Props) {
   return (
     <ResponsiveLayer modal background="background-front">
       <Box align="end" margin={{ horizontal: 'large', top: 'medium' }}>
-        <img src={logotype} alt={t('appTitle')} width="45" height="45" />
+        <img src={logotype} alt={t('appTitle', 'Oasis Wallet')} width="45" height="45" />
       </Box>
       <Box margin={{ horizontal: 'large', bottom: 'large' }}>
         <Box direction="row" align="center" gap="small">

src/app/components/Persist/DeleteProfileButton.tsx

@@ -12,9 +12,10 @@ import { Header } from 'app/components/Header'
 
 interface DeleteProfileButtonProps {
   prominent?: boolean
+  variant: 'voluntary' | 'forgot-password'
 }
 
-export function DeleteProfileButton({ prominent }: DeleteProfileButtonProps) {
+export function DeleteProfileButton({ prominent, variant }: DeleteProfileButtonProps) {
   const { t } = useTranslation()
   const dispatch = useDispatch()
   const navigate = useNavigate()
@@ -33,7 +34,11 @@ export function DeleteProfileButton({ prominent }: DeleteProfileButtonProps) {
     <>
       <Button
         color="status-error"
-        label={t('persist.loginToProfile.deleteProfile.button', 'Delete profile')}
+        label={
+          variant === 'forgot-password'
+            ? t('persist.loginToProfile.deleteProfile.forgotPasswordButton', 'Forgot password?')
+            : t('persist.loginToProfile.deleteProfile.button', 'Delete profile')
+        }
         onClick={() => setLayerVisibility(true)}
         primary={prominent}
         plain={!prominent}
@@ -47,10 +52,21 @@ export function DeleteProfileButton({ prominent }: DeleteProfileButtonProps) {
           <DeleteInputForm onCancel={onCancel} onConfirm={onConfirm}>
             <Paragraph>
               <label htmlFor="type_delete">
+                {variant === 'forgot-password' && (
+                  <span>
+                    {t(
+                      'persist.loginToProfile.deleteProfile.forgotPasswordDescription',
+                      'Oasis Wallet does not store your password and cannot help you retrieve it. If you forgot your password, you can delete your locked profile here. After that, you can create a new one using your mnemonic phrase or private keys, and use your ROSE tokens again.',
+                    )}
+                    <br />
+                    <br />
+                  </span>
+                )}
+
                 <Trans
                   t={t}
                   i18nKey="persist.loginToProfile.deleteProfile.description"
-                  defaults="Are you sure you want to delete this profile? This action cannot be undone and will <strong>erase your private keys</strong>.<br/><br/>To continue please enter '{{confirmationKeyword}}' below."
+                  defaults="This will <strong>permanently remove your private keys from this device.</strong><br/><br/>To confirm and proceed, please type '{{confirmationKeyword}}' below."
                   values={{
                     confirmationKeyword: t('deleteForm.confirmationKeyword', 'delete'),
                   }}

src/app/components/Persist/UnlockForm.tsx

@@ -62,7 +62,7 @@ export function UnlockForm() {
       </Form>
       <Box direction="row" margin={{ top: 'large' }}>
         {/* Must be outside the Form otherwise submit button in DeleteProfileButton submits parent Form too */}
-        <DeleteProfileButton />
+        <DeleteProfileButton variant="forgot-password" />
       </Box>
     </LoginModalLayout>
   )

src/app/components/Toolbar/Features/Profile/index.tsx

@@ -75,7 +75,7 @@ export const Profile = ({ closeHandler }: ProfileProps) => {
             <UpdatePassword />
             <Box gap="small" margin={{ top: 'medium' }} alignSelf="start">
               <Text>{t('toolbar.profile.deletion', 'Deletion')}</Text>
-              <DeleteProfileButton prominent />
+              <DeleteProfileButton prominent variant="voluntary" />
             </Box>
           </>
         )}

src/locales/en/translation.json

@@ -1,5 +1,4 @@
 {
-  "appTitle": "Oasis Wallet",
   "account": {
     "addEscrow": {
       "confirmDelegatingToInactive": {
@@ -94,6 +93,7 @@
       "showingStale": "Showing validator list as of {{staleTimestamp}}."
     }
   },
+  "appTitle": "Oasis Wallet",
   "backends": {
     "oasismonitor": "Oasis Monitor API",
     "oasisscan": "Oasis Scan API"
@@ -169,7 +169,7 @@
     "description": "The error that has occurred triggers the wallet to stop. <strong>Your funds are safe.</strong><br/><br/>Please try refreshing the page and reopening your wallet to see if the issue persists. You can check the current status of the network below.",
     "heading": "An error occurred.",
     "instruction": "If the issue is not resolved after refreshing, please email our support team at  <Email/> and attached the error report.",
-    "reload": "Reload extension"
+    "reloadExtension": "Reload extension"
   },
   "fiatOnramp": {
     "astarFootnote": "It is hereby noted that AStar Technologies, a Cayman Islands exempted company is acting on behalf and for the purposes of Oasis, and is also the provider of the Oasis Wallet.",
@@ -396,7 +396,9 @@
     "loginToProfile": {
       "deleteProfile": {
         "button": "Delete profile",
-        "description": "Are you sure you want to delete this profile? This action cannot be undone and will <strong>erase your private keys</strong>.<br/><br/>To continue please enter '{{confirmationKeyword}}' below.",
+        "description": "This will <strong>permanently remove your private keys from this device.</strong><br/><br/>To confirm and proceed, please type '{{confirmationKeyword}}' below.",
+        "forgotPasswordButton": "Forgot password?",
+        "forgotPasswordDescription": "Oasis Wallet does not store your password and cannot help you retrieve it. If you forgot your password, you can delete your locked profile here. After that, you can create a new one using your mnemonic phrase or private keys, and use your ROSE tokens again.",
         "title": "Delete Profile"
       },
       "description": "Log into your existing user profile on this computer to access the wallets you already added.",