feat: add password protection on Welcome card actions (#2946)

ArkEcosystem · Oct 8, 2020 · 4531ad3 · 4531ad3
1 parent 86a4c88
commit 4531ad3
Show file tree

Hide file tree

Showing 3 changed files with 327 additions and 148 deletions.
diff --git a/src/domains/profile/pages/Welcome/Welcome.test.tsx b/src/domains/profile/pages/Welcome/Welcome.test.tsx
@@ -103,6 +103,56 @@ describe("Welcome", () => {
 		expect(asFragment()).toMatchSnapshot();
 	});
 
+	it("should navigate to profile settings with correct password", async () => {
+		const {
+			asFragment,
+			container,
+			findByTestId,
+			getByTestId,
+			getByText,
+			history,
+			getAllByTestId,
+		} = renderWithRouter(<Welcome />);
+
+		expect(container).toBeTruthy();
+
+		const profile = env.profiles().findById("cba050f1-880f-45f0-9af9-cfe48f406052");
+
+		expect(getByText(translations.PAGE_WELCOME.HAS_PROFILES)).toBeInTheDocument();
+
+		expect(() => getByTestId("modal__inner")).toThrow(/Unable to find an element by/);
+
+		const profileCardMenu = getAllByTestId("dropdown__toggle")[1];
+
+		act(() => {
+			fireEvent.click(profileCardMenu);
+		});
+
+		const settingsOption = getByTestId("dropdown__option--0");
+		expect(settingsOption).toBeTruthy();
+		expect(settingsOption).toHaveTextContent(commonTranslations.SETTINGS);
+
+		act(() => {
+			fireEvent.click(settingsOption);
+		});
+
+		await waitFor(() => expect(getByTestId("modal__inner")).toBeInTheDocument());
+
+		await act(async () => {
+			fireEvent.input(getByTestId("SignIn__input--password"), { target: { value: "password" } });
+		});
+
+		// wait for formState.isValid to be updated
+		await findByTestId("SignIn__submit-button");
+
+		await act(async () => {
+			fireEvent.click(getByTestId("SignIn__submit-button"));
+		});
+
+		expect(history.location.pathname).toEqual(`/profiles/${profile.id()}/settings`);
+		expect(asFragment()).toMatchSnapshot();
+	});
+
 	it("should navigate to profile settings from profile card menu", () => {
 		const { container, getByText, asFragment, history, getByTestId, getAllByTestId } = renderWithRouter(
 			<Welcome />,

diff --git a/src/domains/profile/pages/Welcome/Welcome.tsx b/src/domains/profile/pages/Welcome/Welcome.tsx
@@ -25,6 +25,7 @@ export const Welcome = () => {
 
 	const [deletingProfileId, setDeletingProfileId] = useState<string | undefined>();
 	const [selectedProfile, setSelectedProfile] = useState<Profile | undefined>();
+	const [requestedAction, setRequestedAction] = useState<any>();
 
 	const profileCardActions = [
 		{ label: t("COMMON.SETTINGS"), value: "setting" },
@@ -43,25 +44,41 @@ export const Welcome = () => {
 
 	const closeSignInModal = () => {
 		setSelectedProfile(undefined);
+		setRequestedAction(undefined);
 	};
 
-	const handleProfileCardAction = (profile: Profile, action: any) => {
+	const handleClick = (profile: Profile) => {
+		if (profile.usesPassword()) {
+			setSelectedProfile(profile);
+			setRequestedAction({ label: "Homepage", value: "home" });
+		} else {
+			navigateToProfile(profile.id());
+		}
+	};
+
+	const handleProfileAction = (profile: Profile, action: any) => {
+		if (profile.usesPassword()) {
+			setRequestedAction(action);
+			setSelectedProfile(profile);
+		} else {
+			handleRequestedAction(profile, action);
+		}
+	};
+
+	const handleRequestedAction = (profile: Profile, action: any) => {
 		switch (action?.value) {
+			case "home":
+				navigateToProfile(profile.id());
+				break;
 			case "setting":
 				navigateToProfile(profile.id(), "settings");
 				break;
 			case "delete":
 				setDeletingProfileId(profile.id());
 				break;
 		}
-	};
 
-	const handleClick = (profile: Profile) => {
-		if (profile.usesPassword()) {
-			setSelectedProfile(profile);
-		} else {
-			navigateToProfile(profile.id());
-		}
+		closeSignInModal();
 	};
 
 	return (
@@ -96,7 +113,7 @@ export const Welcome = () => {
 											key={index}
 											profile={profile}
 											actions={profileCardActions}
-											onSelect={(action: any) => handleProfileCardAction(profile, action)}
+											onSelect={(action: any) => handleProfileAction(profile, action)}
 										/>
 									))}
 								</div>
@@ -137,13 +154,13 @@ export const Welcome = () => {
 				onDelete={closeDeleteProfileModal}
 			/>
 
-			{selectedProfile && (
+			{selectedProfile && requestedAction && (
 				<SignIn
 					isOpen={!!selectedProfile}
 					profile={selectedProfile}
 					onCancel={closeSignInModal}
 					onClose={closeSignInModal}
-					onSuccess={() => navigateToProfile(selectedProfile.id())}
+					onSuccess={() => handleRequestedAction(selectedProfile, requestedAction)}
 				/>
 			)}
 		</>