forked from mosip/esignet-signup
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
ES-513: wiring signup UI with signup service endpoints (mosip#31)
* chore: change query hook from verb to noun * chore: adapt naming convention * chore: use tanstack query and dev tool * fix: fix registration type imports * fix: resolve validate dom nesting * feat: check account status * fix: remove duplicates * fix: control step with zustand and refactor structures * fix: remove sign up context * fix: fix ui of OTP step * fix: fix ui of Phone step * fix: fix deprecated css classes * feat: conditionally render font based on language * fix: show lang with corresponding font family * fix: redirect user back to callback url * fix: fix default input text * fix: fix phone status and account registration status steps * fix: fix ui of account setup status step * fix: translate setup account title and description * fix: adapt the layout of the design when scrolling * fix: add arrow to popover * fix: fix ul list disc breaking styling * feat: reset otp on resending otp * chore: add tailwindcss prettier * feat: add storybook * fix: fix styling and format * fix: fix button styles * feat: add stories for components * fix: remove pnpm lock * fix(AccountSetup): fix styles * fix(Phone): fix styles * fix(Phone): fix phone input * fix(Phone): fix phone input height * fix: use identifier prefix * fix(Phone): fix back icon margin * fix: change api env variable * chore(Readme): add storybook script * fix: add identifier prefix * fix(form): fix form validation msg design * fix(Step): fix alert in step * fix(Phone): fix challenge generation handler * fix(validation): add dynamic identifier prefix validation * fix(otp): add identifier prefix * fix(termpolicy): fix open term and policy modals * fix: handle account registration status in the next step * fix: fix otp step * fix(phone): use sitekey from api * fix: fix package duplication * fix: fix types * fix: pass locale and isRegenerate to api * fix: fix otp handler when phone already registered * fix: refactor resend delay * fix: add loading state to account setup submit * fix: refactor otp handler * fix: reset error msg before resend otp * fix: fix redirect to sign in or sign up * fix: fix otp error msg * fix: add popup timeout * fix: handle account registration status * fix: fix language dropdown layer * fix: remove deprecated env variables * fix: rename PUBLIC_URL to BASE_URL * fix: use 3-character locale * fix: switch language priority * fix: map error code to related translation * fix: empty error response template * fix: fix account registration status conditions * fix: fix popup timeout * fix: redirect users on invalid transaction and timeout * fix: fix label * fix: reset input upon passing global error * fix: fix i18n language * fix: remove text * fix: fix otp timeout flow * fix: fix language initialization * fix: fix conditions handler * fix: refactor active message * fix: fix transaction timeout error flow * fix: fix number of time status checked * fix: set error message for request limit * fix: use only invalid_transaction * chore: remove deprecated env variable * fix: fix no action taken by user * fix: ignore garbage-collect * fix: fix generate challenge key --------- Co-authored-by: Bunsy <[email protected]> Signed-off-by: Sreang Rathanak <[email protected]>
- Loading branch information
2 people
authored and
Sreang Rathanak
committed
Jan 15, 2024
1 parent
5a96c3b
commit 70a51b9
Showing
28 changed files
with
764 additions
and
377 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,3 @@ | ||
| REACT_APP_API_BASE_URL="http://localhost:3333" | ||
| REACT_APP_CAPTCHA_SITE_KEY="" | ||
| REACT_APP_API_BASE_URL="http://localhost:8088/v1/signup" | ||
| REACT_APP_REDIRECT_SIGN_IN_URL="https://esignet.camdgc-dev.mosip.net/authorize" | ||
| REACT_APP_REDIRECT_SIGN_UP_URL="http://localhost:3000/signup" |
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 |
|---|---|---|
| @@ -1,3 +1,3 @@ | ||
| window._env_ = { | ||
| DEFAULT_LANG: "en", | ||
| DEFAULT_LANG: "km", | ||
| }; |
This file was deleted.
Oops, something went wrong.
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,27 @@ | ||
| import * as React from "react"; | ||
|
|
||
| import { cn } from "~utils/cn"; | ||
|
|
||
| export interface ActiveMessageProps | ||
| extends React.HTMLAttributes<HTMLDivElement> {} | ||
|
|
||
| const ActiveMessage = React.forwardRef<HTMLDivElement, ActiveMessageProps>( | ||
| ({ className, hidden, children, ...props }, ref) => ( | ||
| <div | ||
| ref={ref} | ||
| className={cn( | ||
| "flex items-center justify-between bg-destructive/5 px-4 py-2", | ||
| { | ||
| hidden, | ||
| } | ||
| )} | ||
| {...props} | ||
| > | ||
| {children} | ||
| </div> | ||
| ) | ||
| ); | ||
|
|
||
| ActiveMessage.displayName = "ActiveMessage"; | ||
|
|
||
| export { ActiveMessage }; |
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
127 changes: 103 additions & 24 deletions
127
signup-ui/src/pages/SignUpPage/AccountRegistrationStatus/AccountRegistrationStatus.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 |
|---|---|---|
| @@ -1,33 +1,112 @@ | ||
| import { useMutationState, useQueryClient } from "@tanstack/react-query"; | ||
| import { useTranslation } from "react-i18next"; | ||
| import { useLocation } from "react-router-dom"; | ||
|
|
||
| import { ReactComponent as SuccessIconSvg } from "~assets/svg/success-icon.svg"; | ||
| import { Button } from "~components/ui/button"; | ||
| import { Step, StepContent } from "~components/ui/step"; | ||
| import { getSignInRedirectURL } from "~utils/link"; | ||
| import { keys as mutationKeys } from "~pages/SignUpPage/mutations"; | ||
| import { keys as queryKeys } from "~pages/SignUpPage/queries"; | ||
| import { | ||
| RegistrationResponseDto, | ||
| RegistrationStatus, | ||
| RegistrationStatusResponseDto, | ||
| RegistrationWithFailedStatus, | ||
| } from "~typings/types"; | ||
|
|
||
| import { AccountRegistrationStatusLayout } from "./components/AccountRegistrationStatusLayout"; | ||
|
|
||
| export const AccountRegistrationStatus = () => { | ||
| const { t } = useTranslation(); | ||
| const { hash: fromSignInHash } = useLocation(); | ||
|
|
||
| const handleAction = () => { | ||
| window.location.href = getSignInRedirectURL(fromSignInHash); | ||
| }; | ||
| const queryClient = useQueryClient(); | ||
|
|
||
| const [registration] = useMutationState<RegistrationResponseDto>({ | ||
| filters: { mutationKey: mutationKeys.registration, status: "success" }, | ||
| select: (mutation) => mutation.state.data as RegistrationResponseDto, | ||
| }); | ||
|
|
||
| const registrationStatus = | ||
| queryClient.getQueryData<RegistrationStatusResponseDto>( | ||
| queryKeys.registrationStatus | ||
| ); | ||
|
|
||
| const registrationStatusState = queryClient.getQueryState( | ||
| queryKeys.registrationStatus | ||
| ); | ||
|
|
||
| if (!registration) { | ||
| return ( | ||
| <AccountRegistrationStatusLayout | ||
| status="failed" | ||
| message={t("something_went_wrong")} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| if (registration && registration.errors.length > 0) { | ||
| return ( | ||
| <AccountRegistrationStatusLayout | ||
| status="failed" | ||
| message={t(`error_response.${registration.errors[0].errorCode}`)} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| if ( | ||
| registration.response?.status === RegistrationStatus.PENDING && | ||
| registrationStatusState?.error | ||
| ) { | ||
| return ( | ||
| <AccountRegistrationStatusLayout | ||
| status="failed" | ||
| message={t("error_response.request_limit")} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| if ( | ||
| registration.response?.status === RegistrationStatus.PENDING && | ||
| !registrationStatus | ||
| ) { | ||
| return ( | ||
| <AccountRegistrationStatusLayout | ||
| status="failed" | ||
| message={t(`error_response.${registration.errors[0].errorCode}`)} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| if ( | ||
| registration.response?.status === RegistrationStatus.PENDING && | ||
| registrationStatus | ||
| ) { | ||
| if (registrationStatus.errors.length > 0) { | ||
| return ( | ||
| <AccountRegistrationStatusLayout | ||
| status="failed" | ||
| message={t( | ||
| `error_response.${registrationStatus.errors[0].errorCode}` | ||
| )} | ||
| /> | ||
| ); | ||
| } | ||
| if ( | ||
| registrationStatus.response && | ||
| [ | ||
| RegistrationWithFailedStatus.FAILED, | ||
| RegistrationWithFailedStatus.PENDING, | ||
| ].includes(registrationStatus.response.status) | ||
| ) { | ||
| return ( | ||
| <AccountRegistrationStatusLayout | ||
| status="failed" | ||
| message={t("something_went_wrong")} | ||
| /> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
| <Step> | ||
| <StepContent> | ||
| <div className="flex flex-col items-center gap-4 py-4"> | ||
| <SuccessIconSvg /> | ||
| <div className="text-center text-lg font-semibold"> | ||
| <h1>{t("congratulations")}</h1> | ||
| <h2>{t("account_created_successfully")}</h2> | ||
| </div> | ||
| <p className="text-center text-gray-500">{t("login_to_proceed")}</p> | ||
| </div> | ||
| <Button className="my-4 h-16 w-full" onClick={handleAction}> | ||
| {fromSignInHash ? t("login") : t("okay")} | ||
| </Button> | ||
| </StepContent> | ||
| </Step> | ||
| <AccountRegistrationStatusLayout | ||
| status="success" | ||
| message={t("login_to_proceed")} | ||
| /> | ||
| ); | ||
| }; |
50 changes: 50 additions & 0 deletions
50
...pages/SignUpPage/AccountRegistrationStatus/components/AccountRegistrationStatusLayout.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,50 @@ | ||
| import { useTranslation } from "react-i18next"; | ||
| import { useLocation } from "react-router-dom"; | ||
|
|
||
| import { ReactComponent as FailedIconSvg } from "~assets/svg/failed-icon.svg"; | ||
| import { ReactComponent as SuccessIconSvg } from "~assets/svg/success-icon.svg"; | ||
| import { Button } from "~components/ui/button"; | ||
| import { Step, StepContent } from "~components/ui/step"; | ||
| import { getSignInRedirectURL } from "~utils/link"; | ||
|
|
||
| interface AccountRegistrationStatusLayoutProps { | ||
| status: "success" | "failed"; | ||
| message: string; | ||
| } | ||
|
|
||
| export const AccountRegistrationStatusLayout = ({ | ||
| status, | ||
| message, | ||
| }: AccountRegistrationStatusLayoutProps) => { | ||
| const { t } = useTranslation(); | ||
| const { hash: fromSignInHash } = useLocation(); | ||
|
|
||
| const handleAction = (e: any) => { | ||
| e.preventDefault(); | ||
| window.location.href = getSignInRedirectURL(fromSignInHash); | ||
| }; | ||
|
|
||
| return ( | ||
| <Step> | ||
| <StepContent> | ||
| <div className="flex flex-col items-center gap-4 py-4"> | ||
| {status === "success" ? <SuccessIconSvg /> : <FailedIconSvg />} | ||
| <div className="text-center text-lg font-semibold"> | ||
| {status === "success" ? ( | ||
| <> | ||
| <h1>{t("congratulations")}</h1> | ||
| <h2>{t("account_created_successfully")}</h2> | ||
| </> | ||
| ) : ( | ||
| <h1>{t("signup_failed")}</h1> | ||
| )} | ||
| </div> | ||
| <p className="break-all text-center text-gray-500">{message}</p> | ||
| </div> | ||
| <Button className="my-4 h-16 w-full" onClick={handleAction}> | ||
| {fromSignInHash ? t("login") : t("okay")} | ||
| </Button> | ||
| </StepContent> | ||
| </Step> | ||
| ); | ||
| }; |
Oops, something went wrong.