Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions src/locales/en/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand Down
4 changes: 2 additions & 2 deletions src/ui/components/Alert/Alert.scss
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
}
}

button.alert-button {
button.alert-button.default-btn {
&.sc-ion-alert-ios,
&.sc-ion-alert-md {
margin: 0;
Expand All @@ -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;
Expand Down
6 changes: 5 additions & 1 deletion src/ui/components/Alert/Alert.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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`,
},
Expand All @@ -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`,
},
Expand All @@ -58,6 +61,7 @@ const Alert = ({
id: "cancel-alert-button",
text: cancelButtonText,
role: "cancel",
cssClass: "default-btn",
htmlAttributes: {
"data-testid": `${dataTestId}-cancel-button`,
},
Expand Down
3 changes: 3 additions & 0 deletions src/ui/components/Alert/Alert.types.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { AlertButton } from "@ionic/react";

interface AlertProps {
isOpen: boolean;
backdropDismiss?: boolean;
Expand All @@ -13,6 +15,7 @@ interface AlertProps {
actionSecondaryConfirm?: () => void;
actionCancel?: () => void;
actionDismiss?: () => void;
customButtons?: AlertButton[];
}

export type { AlertProps };
4 changes: 4 additions & 0 deletions src/ui/components/PageHeader/PageHeader.scss
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,10 @@
font-size: 1rem;
font-weight: 700;

& > * {
color: var(--ion-color-neutral-700);
}

&.md {
font-size: 0.8rem;
}
Expand Down
2 changes: 1 addition & 1 deletion src/ui/components/PageHeader/PageHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,7 @@ const PageHeader = ({
</div>
)}

{(!!actionButton || !!additionalButtons) && (
{(!!actionButton || !!additionalButtons || hasAction) && (
<IonButtons
className={actionButtonClasses}
slot="end"
Expand Down
68 changes: 51 additions & 17 deletions src/ui/components/VerifyPassword/VerifyPassword.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 {
Expand All @@ -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;
}
}
}
12 changes: 2 additions & 10 deletions src/ui/components/VerifyPassword/VerifyPassword.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
Expand Down Expand Up @@ -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);
});
Expand Down
46 changes: 31 additions & 15 deletions src/ui/components/VerifyPassword/VerifyPassword.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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 = () => {
Expand Down Expand Up @@ -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
Expand All @@ -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"
>
Expand All @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -303,7 +303,7 @@ describe("Manage password", () => {
);
});

fireEvent.click(getByTestId("action-button"));
fireEvent.click(getByTestId("primary-button"));

await waitFor(() => {
expect(deletePasswordMock).toBeCalled();
Expand Down Expand Up @@ -369,7 +369,7 @@ describe("Manage password", () => {
});

act(() => {
fireEvent.click(getByTestId("action-button"));
fireEvent.click(getByTestId("primary-button"));
});

await waitFor(() => {
Expand Down
Loading