-
Notifications
You must be signed in to change notification settings - Fork 106
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: [IOPID-966] L2 Locked Access (#5148)
## Short description In this PR, the screen that is shown to a user who tries to log into IO but has blocked access has been realised. (access is blocked via the web portal). The change includes adding within the dev server (and BE) the error 1002 received after logging in with the IDP (spid or cie) The change within the dev-server is in [this PR](pagopa/io-dev-api-server#311) https://github.com/pagopa/io-app/assets/83651704/583bbacc-bca0-436e-a51a-1d4f6168a618 ## List of changes proposed in this pull request - Realization of the UnlockAccessScreen.tsx screen ([Figma](https://www.figma.com/file/2BZhyc0qxN31sF6npvbeTh/IO-Esco?type=design&node-id=21-12453&mode=design&t=mZBnBsYJw7xmO7WA-0)) - Realization of the UnlockAccessScreen.test.tsx - Business logic - Integration of texts and translations ## How to test In the .env file, set CIE_LOGIN_WITH_DEV_SERVER_ENABLED as YES and run the project. Log in with CIE or SPID and select the error "Utente con identità bloccata da ioapp.it" --------- Co-authored-by: Fabio Bombardi <[email protected]>
- Loading branch information
1 parent
c5a8e47
commit 6142a46
Showing
7 changed files
with
296 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,152 @@ | ||
| import React from "react"; | ||
| import { | ||
| Body, | ||
| ButtonLink, | ||
| ButtonSolid, | ||
| ContentWrapper, | ||
| FeatureInfo, | ||
| GradientScrollView, | ||
| H3, | ||
| IOColors, | ||
| IOStyles, | ||
| LabelSmall, | ||
| Pictogram, | ||
| VSpacer | ||
| } from "@pagopa/io-app-design-system"; | ||
| import { SafeAreaView } from "react-native-safe-area-context"; | ||
| import { Text, View } from "react-native"; | ||
| import { useNavigation } from "@react-navigation/native"; | ||
| import BaseScreenComponent from "../../components/screens/BaseScreenComponent"; | ||
| import I18n from "../../i18n"; | ||
| import { useIOBottomSheetAutoresizableModal } from "../../utils/hooks/bottomSheet"; | ||
| import { openWebUrl } from "../../utils/url"; | ||
| import ROUTES from "../../navigation/routes"; | ||
| type Props = { | ||
| identifier: "SPID" | "CIE"; | ||
| }; | ||
| const UnlockAccessScreen = (props: Props) => { | ||
| const { identifier } = props; | ||
| const navigation = useNavigation(); | ||
| const ModalContent = () => ( | ||
| <View testID="modal-view-test"> | ||
| <Body weight="Regular" color="grey-700"> | ||
| {I18n.t("authentication.unlockmodal.description1_1")} | ||
| {"\n"} | ||
| {I18n.t("authentication.unlockmodal.description1_2")}{" "} | ||
| <Text style={{ color: IOColors["grey-700"], fontWeight: "bold" }}> | ||
| {I18n.t("authentication.unlockmodal.description1_3")}{" "} | ||
| </Text> | ||
| {I18n.t("authentication.unlockmodal.description1_4")}{" "} | ||
| </Body> | ||
| <VSpacer size={24} /> | ||
| <H3 weight="SemiBold">{I18n.t("authentication.unlockmodal.title2")}</H3> | ||
| <VSpacer size={24} /> | ||
| <FeatureInfo | ||
| iconName="security" | ||
| body={I18n.t("authentication.unlockmodal.listitem1")} | ||
| /> | ||
| <VSpacer size={16} /> | ||
| <FeatureInfo | ||
| iconName="security" | ||
| body={I18n.t("authentication.unlockmodal.listitem2_1")} | ||
| actionLabel={I18n.t("authentication.unlockmodal.listitem2_2")} | ||
| actionOnPress={() => openWebUrl("https://ioapp.it/")} | ||
| /> | ||
| <VSpacer size={16} /> | ||
| <FeatureInfo | ||
| iconName="security" | ||
| body={ | ||
| <LabelSmall weight="Regular" color="grey-700"> | ||
| {I18n.t("authentication.unlockmodal.listitem3_1")}{" "} | ||
| <Text style={{ fontStyle: "italic" }}> | ||
| {I18n.t("authentication.unlockmodal.listitem3_2")}{" "} | ||
| </Text> | ||
| {I18n.t("authentication.unlockmodal.listitem3_3")}{" "} | ||
| <Text style={{ fontWeight: "bold" }}> | ||
| {I18n.t("authentication.unlockmodal.listitem3_4")}{" "} | ||
| </Text> | ||
| {I18n.t("authentication.unlockmodal.listitem3_5")} | ||
| </LabelSmall> | ||
| } | ||
| /> | ||
| </View> | ||
| ); | ||
|
|
||
| const { | ||
| present: presentVeryLongAutoresizableBottomSheetWithFooter, | ||
| bottomSheet: veryLongAutoResizableBottomSheetWithFooter | ||
| } = useIOBottomSheetAutoresizableModal( | ||
| { | ||
| title: I18n.t("authentication.unlockmodal.title"), | ||
| component: <ModalContent />, | ||
| fullScreen: true | ||
| }, | ||
| 100 | ||
| ); | ||
|
|
||
| return ( | ||
| <BaseScreenComponent | ||
| goBack={false} | ||
| accessibilityEvents={{ avoidNavigationEventsUsage: true }} | ||
| > | ||
| <GradientScrollView | ||
| testID="container-test" | ||
| primaryAction={ | ||
| <ButtonSolid | ||
| fullWidth | ||
| testID="button-solid-test" | ||
| label={I18n.t("authentication.unlock.title")} | ||
| accessibilityLabel="Click here to unlock your profile" | ||
| onPress={() => openWebUrl("https://ioapp.it/")} | ||
| /> | ||
| } | ||
| secondaryAction={ | ||
| <ButtonLink | ||
| testID="button-link-test" | ||
| label={I18n.t("authentication.unlock.loginIO")} | ||
| accessibilityLabel="Click here to redirect to the landing screen" | ||
| onPress={() => navigation.navigate(ROUTES.AUTHENTICATION_LANDING)} | ||
| /> | ||
| } | ||
| > | ||
| <SafeAreaView> | ||
| <ContentWrapper> | ||
| <View style={IOStyles.selfCenter}> | ||
| <Pictogram name="accessDenied" size={120} color="aqua" /> | ||
| </View> | ||
| <VSpacer size={16} /> | ||
| <View style={IOStyles.alignCenter}> | ||
| <H3 testID="title-test" weight="SemiBold"> | ||
| {I18n.t("authentication.unlock.title")} | ||
| </H3> | ||
| </View> | ||
| <VSpacer size={16} /> | ||
| <View> | ||
| <Body | ||
| weight="Regular" | ||
| style={{ textAlign: "center" }} | ||
| testID="subtitle-test" | ||
| color="grey-650" | ||
| > | ||
| {identifier === "SPID" | ||
| ? I18n.t("authentication.unlock.subtitlel2") | ||
| : I18n.t("authentication.unlock.subtitlel3")} | ||
| </Body> | ||
| </View> | ||
| <VSpacer size={16} /> | ||
| <View style={IOStyles.selfCenter}> | ||
| <ButtonLink | ||
| label={I18n.t("authentication.unlock.learnmore")} | ||
| onPress={presentVeryLongAutoresizableBottomSheetWithFooter} | ||
| testID="learn-more-link-test" | ||
| /> | ||
| </View> | ||
| </ContentWrapper> | ||
| {veryLongAutoResizableBottomSheetWithFooter} | ||
| </SafeAreaView> | ||
| </GradientScrollView> | ||
| </BaseScreenComponent> | ||
| ); | ||
| }; | ||
|
|
||
| export default UnlockAccessScreen; |
63 changes: 63 additions & 0 deletions
63
ts/screens/onboarding/__tests__/UnlockAccessScreen.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| import { fireEvent } from "@testing-library/react-native"; | ||
| import { createStore } from "redux"; | ||
| import { applicationChangeState } from "../../../store/actions/application"; | ||
| import { appReducer } from "../../../store/reducers"; | ||
| import { renderScreenWithNavigationStoreContext } from "../../../utils/testWrapper"; | ||
| import UnlockAccessScreen from "../UnlockAccessScreen"; | ||
|
|
||
| const mockOpenWebUrl = jest.fn(); | ||
|
|
||
| jest.mock("../../../utils/url", () => ({ | ||
| openWebUrl: (_: string) => { | ||
| mockOpenWebUrl(); | ||
| } | ||
| })); | ||
|
|
||
| describe("UnlockAccessScreen", async () => { | ||
| it("the components into the page should be render correctly", () => { | ||
| const component = renderComponent(); | ||
| expect(component).toBeDefined(); | ||
| expect(component.getByTestId("container-test")).not.toBeNull(); | ||
| expect(component.getByTestId("title-test")).toBeDefined(); | ||
| expect(component.getByTestId("subtitle-test")).toBeDefined(); | ||
| const learnMoreButton = component.getByTestId("learn-more-link-test"); | ||
| expect(learnMoreButton).toBeDefined(); | ||
|
|
||
| const unlockProfileButton = component.getByTestId("button-solid-test"); | ||
| expect(unlockProfileButton).toBeDefined(); | ||
| const closeButton = component.getByTestId("button-link-test"); | ||
| expect(closeButton).toBeDefined(); | ||
| }); | ||
| it("click on button to unlock profile", () => { | ||
| const component = renderComponent(); | ||
| expect(component).toBeDefined(); | ||
| const unlockProfileButton = component.getByTestId("button-solid-test"); | ||
|
|
||
| if (unlockProfileButton) { | ||
| fireEvent.press(unlockProfileButton); | ||
| expect(mockOpenWebUrl).toHaveBeenCalled(); | ||
| } | ||
| }); | ||
| it("click on button to go back to landing page", () => { | ||
| const component = renderComponent(); | ||
| expect(component).toBeDefined(); | ||
| const closeButton = component.getByTestId("button-link-test"); | ||
|
|
||
| if (closeButton) { | ||
| fireEvent.press(closeButton); | ||
| expect(mockOpenWebUrl).toHaveBeenCalled(); | ||
| } | ||
| }); | ||
| }); | ||
|
|
||
| const renderComponent = () => { | ||
| const globalState = appReducer(undefined, applicationChangeState("active")); | ||
| const store = createStore(appReducer, globalState as any); | ||
|
|
||
| return renderScreenWithNavigationStoreContext( | ||
| UnlockAccessScreen, | ||
| "DUMMY", | ||
| {}, | ||
| store | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters