feat(ui): Confirm/Reset buttons under signing screen

src/locales/en/en.json

@@ -1194,7 +1194,7 @@
     "cancel": "Cancel",
     "confirm": "Confirm",
     "button": {
-      "forgot": "I've forgotten my password"
+      "forgot": "Forgotten your password?"
     },
     "error": {
       "hasNoMatch": "Password didn't match"
@@ -1204,9 +1204,10 @@
         "title": "Would you like to see your password hint or reset your password?"
       },
       "button": {
-        "seepasswordhint": "See my password hint",
-        "resetmypassword": "Reset my password",
-        "tryagain": "Great, I'll try again!"
+        "seepasswordhint": "View hint",
+        "resetmypassword": "Reset password",
+        "tryagain": "Try again",
+        "cancel": "Cancel"
       },
       "hint": {
         "title": "Your password hint is"

src/ui/components/Alert/Alert.scss

@@ -60,7 +60,7 @@
   }
 }
 
-button.alert-button {
+button.alert-button.default-btn {
   &.sc-ion-alert-ios,
   &.sc-ion-alert-md {
     margin: 0;
@@ -72,7 +72,7 @@ button.alert-button {
     border-radius: 1rem !important;
     border: none;
 
-    &:first-child {
+    &.confirm-btn {
       background: var(--ion-color-primary-700) !important;
       color: var(--ion-color-neutral-100);
       margin-bottom: 0.5rem;

src/ui/components/Alert/Alert.tsx

@@ -20,14 +20,16 @@ const Alert = ({
   actionSecondaryConfirm,
   actionCancel,
   actionDismiss,
+  customButtons,
 }: AlertProps) => {
-  const buttons: AlertButton[] = [];
+  const buttons: AlertButton[] = customButtons ? [...customButtons] : [];
 
   if (confirmButtonText && actionConfirm) {
     buttons.push({
       id: "confirm-alert-button",
       text: confirmButtonText,
       role: "confirm",
+      cssClass: "confirm-btn default-btn",
       htmlAttributes: {
         "data-testid": `${dataTestId}-confirm-button`,
       },
@@ -43,6 +45,7 @@ const Alert = ({
       id: "secondary-confirm-alert-button",
       text: secondaryConfirmButtonText,
       role: "confirm",
+      cssClass: "default-btn",
       htmlAttributes: {
         "data-testid": `${dataTestId}-secondary-confirm-button`,
       },
@@ -58,6 +61,7 @@ const Alert = ({
       id: "cancel-alert-button",
       text: cancelButtonText,
       role: "cancel",
+      cssClass: "default-btn",
       htmlAttributes: {
         "data-testid": `${dataTestId}-cancel-button`,
       },

src/ui/components/Alert/Alert.types.ts

@@ -1,3 +1,5 @@
+import { AlertButton } from "@ionic/react";
+
 interface AlertProps {
   isOpen: boolean;
   backdropDismiss?: boolean;
@@ -13,6 +15,7 @@ interface AlertProps {
   actionSecondaryConfirm?: () => void;
   actionCancel?: () => void;
   actionDismiss?: () => void;
+  customButtons?: AlertButton[];
 }
 
 export type { AlertProps };

src/ui/components/PageHeader/PageHeader.scss

@@ -62,6 +62,10 @@
         font-size: 1rem;
         font-weight: 700;
 
+        & > * {
+          color: var(--ion-color-neutral-700);
+        }
+
         &.md {
           font-size: 0.8rem;
         }

src/ui/components/PageHeader/PageHeader.tsx

@@ -217,7 +217,7 @@ const PageHeader = ({
           </div>
         )}
 
-        {(!!actionButton || !!additionalButtons) && (
+        {(!!actionButton || !!additionalButtons || hasAction) && (
           <IonButtons
             className={actionButtonClasses}
             slot="end"

src/ui/components/VerifyPassword/VerifyPassword.scss

@@ -8,8 +8,6 @@
       margin-bottom: 1.5rem;
 
       & ion-buttons.buttons-last-slot {
-        min-width: auto;
-
         .action-button-label {
           & > p {
             color: var(--ion-color-primary-700) !important;
@@ -19,34 +17,53 @@
     }
 
     .password-input-container {
-      margin-bottom: 1rem;
+      margin-bottom: 0.75rem;
     }
 
     .forgot-actions {
-      margin-bottom: 0;
+      margin-bottom: 1.25rem;
+
+      ion-button {
+        --color: var(--ion-color-primary-700);
+        margin-bottom: 0;
+      }
+    }
+
+    .page-footer ion-button {
+      margin: 0;
     }
   }
 
   ion-item {
     --min-height: auto;
   }
 
-  ion-item.custom-input .input-line {
-    border: none;
-    text-align: center;
-    font-size: 2rem;
-  }
-
-  ion-input {
-    margin-left: 2rem;
+  ion-item.custom-input {
+    .input-line {
+      border-width: 0.125rem;
+      overflow: hidden;
+      background: var(--ion-color-neutral-100);
 
-    &[type="password"] {
-      letter-spacing: 0.25em;
+      &:focus-within {
+        border-color: var(--ion-color-primary-700);
+      }
     }
-  }
 
-  .close-button-label {
-    color: var(--ion-color-neutral-800);
+    ion-input {
+      border-radius: 0.5rem;
+      --padding-top: 0.75rem;
+      --padding-bottom: 0.75rem;
+      font-weight: 400;
+      font-size: 1rem;
+
+      .input-wrapper {
+        --background: var(--ion-color-neutral-100);
+      }
+
+      &[type="password"] {
+        letter-spacing: 0.25em;
+      }
+    }
   }
 
   .error-message {
@@ -73,3 +90,20 @@
     }
   }
 }
+
+.alert-wrapper {
+  .show-hint {
+    margin-bottom: 0.5rem;
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 500 !important;
+    line-height: 1.375rem;
+    text-transform: none !important;
+    border-radius: 1rem !important;
+    border: 1px solid var(--ion-color-neutral-400) !important;
+
+    &.sc-ion-alert-md {
+      height: auto !important;
+    }
+  }
+}

src/ui/components/VerifyPassword/VerifyPassword.test.tsx

@@ -148,16 +148,12 @@ describe("Verify Password", () => {
 
     const passwordInput = await findByTestId("verify-password-value");
 
-    const confirmButton = await findByTestId("action-button");
+    const confirmButton = await findByTestId("primary-button");
 
     act(() => {
       ionFireEvent.ionInput(passwordInput, "1111");
     });
 
-    await waitFor(() => {
-      expect(confirmButton.getAttribute("disabled")).toBe("false");
-    });
-
     act(() => {
       ionFireEvent.click(confirmButton);
     });
@@ -204,16 +200,12 @@ describe("Verify Password", () => {
     });
 
     const passwordInput = getByTestId("verify-password-value");
-    const confirmButton = getByTestId("action-button");
+    const confirmButton = getByTestId("primary-button");
 
     act(() => {
       ionFireEvent.ionInput(passwordInput, "1111");
     });
 
-    await waitFor(() => {
-      expect(confirmButton.getAttribute("disabled")).toBe("false");
-    });
-
     act(() => {
       ionFireEvent.click(confirmButton);
     });

src/ui/components/VerifyPassword/VerifyPassword.tsx

@@ -12,6 +12,7 @@ import { ErrorMessage, MESSAGE_MILLISECONDS } from "../ErrorMessage";
 import { ForgotAuthInfo } from "../ForgotAuthInfo";
 import { ForgotType } from "../ForgotAuthInfo/ForgotAuthInfo.types";
 import { OptionModal } from "../OptionsModal";
+import { PageFooter } from "../PageFooter";
 import "./VerifyPassword.scss";
 import { VerifyPasswordProps } from "./VerifyPassword.types";
 
@@ -99,10 +100,6 @@ const VerifyPassword = ({
     closeButtonLabel: `${i18n.t("verifypassword.cancel")}`,
     closeButtonAction: () => setIsOpen(false, true),
     title: `${i18n.t("verifypassword.title")}`,
-    actionButton: true,
-    actionButtonDisabled: !verifyPasswordValue.length,
-    actionButtonAction: () => setAttempts(attempts - 1),
-    actionButtonLabel: `${i18n.t("verifypassword.confirm")}`,
   };
 
   const handleDissmissShowHint = () => {
@@ -130,10 +127,11 @@ const VerifyPassword = ({
         <form className="password-input-container">
           <CustomInput
             dataTestId="verify-password-value"
-            hiddenInput={true}
-            autofocus={true}
+            hiddenInput
+            autofocus
             onChangeInput={setVerifyPasswordValue}
             value={verifyPasswordValue}
+            error={showError}
           />
           {showError ? (
             <ErrorMessage
@@ -144,13 +142,14 @@ const VerifyPassword = ({
             <div className="error-placeholder" />
           )}
         </form>
+
         <div className="forgot-actions">
           {storedHint ? (
             <IonButton
               shape="round"
               expand="block"
-              fill="outline"
-              className="secondary-button"
+              fill="clear"
+              className="tertiary-button"
               onClick={() => setAlertChoiceIsOpen(true)}
               data-testid="forgot-hint-btn"
             >
@@ -160,29 +159,46 @@ const VerifyPassword = ({
             <IonButton
               shape="round"
               expand="block"
-              fill="outline"
-              className="secondary-button"
+              fill="clear"
+              className="tertiary-button"
               data-testid="reset-password"
               onClick={handleRecoveryPassword}
             >
               {i18n.t("verifypassword.alert.button.resetmypassword")}
             </IonButton>
           )}
         </div>
+        <PageFooter
+          primaryButtonAction={() => setAttempts(attempts - 1)}
+          primaryButtonText={`${i18n.t("verifypassword.confirm")}`}
+        />
       </OptionModal>
       <Alert
         isOpen={alertChoiceIsOpen}
         setIsOpen={setAlertChoiceIsOpen}
         dataTestId="alert-choice"
         headerText={i18n.t("verifypassword.alert.choice.title")}
         confirmButtonText={`${i18n.t(
-          "verifypassword.alert.button.seepasswordhint"
-        )}`}
-        secondaryConfirmButtonText={`${i18n.t(
           "verifypassword.alert.button.resetmypassword"
         )}`}
-        actionConfirm={handleShowHint}
-        actionSecondaryConfirm={handleRecoveryPassword}
+        cancelButtonText={`${i18n.t("verifypassword.alert.button.cancel")}`}
+        customButtons={[
+          {
+            id: "see-hint",
+            text: i18n.t("verifypassword.alert.button.seepasswordhint"),
+            role: "confirm",
+            cssClass: "secondary-button show-hint",
+            htmlAttributes: {
+              "data-testid": "see-hint-button",
+            },
+            handler: () => {
+              handleShowHint();
+              setAlertChoiceIsOpen(false);
+            },
+          },
+        ]}
+        actionConfirm={handleRecoveryPassword}
+        actionCancel={handleDissmissForgotPassword}
         actionDismiss={handleDissmissForgotPassword}
       />
       <Alert

src/ui/pages/Menu/components/Settings/components/ManagePassword/ManagePassword.test.tsx

@@ -303,7 +303,7 @@ describe("Manage password", () => {
       );
     });
 
-    fireEvent.click(getByTestId("action-button"));
+    fireEvent.click(getByTestId("primary-button"));
 
     await waitFor(() => {
       expect(deletePasswordMock).toBeCalled();
@@ -369,7 +369,7 @@ describe("Manage password", () => {
     });
 
     act(() => {
-      fireEvent.click(getByTestId("action-button"));
+      fireEvent.click(getByTestId("primary-button"));
     });
 
     await waitFor(() => {