Skip to content

Commit

Permalink
feat: self-review fixes&cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@porcellus
porcellus committed Oct 31, 2023
1 parent c62fd92 commit fa3d6d5
Show file tree
Hide file tree
Showing 15 changed files with 360 additions and 219 deletions.
42 changes: 19 additions & 23 deletions lib/build/passwordless-shared2.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

233 changes: 150 additions & 83 deletions lib/build/passwordless-shared3.js
View file

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion lib/build/passwordlessprebuiltui.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions lib/build/recipe/passwordless/components/themes/mfa/index.d.ts
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions lib/build/recipe/passwordless/components/themes/translations.d.ts
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

16 changes: 16 additions & 0 deletions lib/build/recipe/passwordless/recipe.d.ts
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions lib/build/recipe/thirdpartypasswordless/components/themes/translations.d.ts
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 3 additions & 2 deletions lib/build/thirdpartypasswordlessprebuiltui.js
View file

Large diffs are not rendered by default.

20 changes: 15 additions & 5 deletions lib/ts/recipe/passwordless/components/features/mfa/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -314,10 +314,10 @@ function useOnLoad(
[props.recipe, userContext]
);
const handleLoadError = React.useCallback(
// Test this, it may show an empty screen in many cases
() => dispatch({ type: "setError", error: "Getting mfaInfo failed!" }),
// TODO: Test this, it may show an empty screen in many cases
() => dispatch({ type: "setError", error: "SOMETHING_WENT_WRONG_ERROR" }),
[dispatch]
); // TODO: translation/proper error handling)
);
const onLoad = React.useCallback(
async (mfaInfo: { factors: MFAFactorInfo; email?: string; phoneNumber?: string }) => {
let error: string | undefined = undefined;
Expand Down Expand Up @@ -356,7 +356,12 @@ function useOnLoad(
userContext,
});
} else if (!mfaInfo.factors.isAllowedToSetup.includes("otp-email")) {
dispatch({ type: "setError", error: "Factor not enabled" }); // TODO: translation
dispatch({
type: "load",
loginAttemptInfo,
isAllowedToSetup: false,
error: "PWLESS_MFA_OTP_NOT_ALLOWED_TO_SETUP",
});
} else {
dispatch({ type: "load", loginAttemptInfo, error, isAllowedToSetup: true }); // since loginAttemptInfo is undefined, this will ask the user for the email
}
Expand All @@ -368,7 +373,12 @@ function useOnLoad(
userContext,
});
} else if (!mfaInfo.factors.isAllowedToSetup.includes("otp-phone")) {
dispatch({ type: "setError", error: "Factor not enabled" }); // TODO: translation
dispatch({
type: "load",
loginAttemptInfo,
isAllowedToSetup: false,
error: "PWLESS_MFA_OTP_NOT_ALLOWED_TO_SETUP",
});
} else {
dispatch({ type: "load", loginAttemptInfo, error, isAllowedToSetup: true }); // since loginAttemptInfo is undefined, this will ask the user for the phone number
}
Expand Down
143 changes: 78 additions & 65 deletions lib/ts/recipe/passwordless/components/themes/mfa/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,10 @@ import React from "react";

import { SuperTokensBranding } from "../../../../../components/SuperTokensBranding";
import { hasFontDefined } from "../../../../../styles/styles";
import { useTranslation } from "../../../../../translation/translationContext";
import UserContextWrapper from "../../../../../usercontext/userContextWrapper";
import GeneralError from "../../../../emailpassword/components/library/generalError";
import { AccessDeniedScreen } from "../../../../session/prebuiltui";
import { CloseTabScreen } from "../signInUp/closeTabScreen";
import { EmailForm } from "../signInUp/emailForm";
import { PhoneForm } from "../signInUp/phoneForm";
Expand All @@ -39,6 +41,7 @@ export enum MFAScreens {
EmailForm,
PhoneForm,
UserInputCodeForm,
AccessDenied,
}

/*
Expand All @@ -50,6 +53,7 @@ const MFATheme: React.FC<MFAProps & { activeScreen: MFAScreens }> = ({
onBackButtonClicked,
...props
}) => {
const t = useTranslation();
const commonProps = {
recipeImplementation: props.recipeImplementation,
config: props.config,
Expand All @@ -60,73 +64,73 @@ const MFATheme: React.FC<MFAProps & { activeScreen: MFAScreens }> = ({

return activeScreen === MFAScreens.CloseTab ? (
<CloseTabScreen {...commonProps} />
) : activeScreen === MFAScreens.AccessDenied ? (
<AccessDeniedScreen useShadowDom={props.config.useShadowDom} error={t(featureState.error!)} />
) : (
<div data-supertokens="container">
<div data-supertokens="row">
{featureState.loaded &&
/* TODO: this doesn't feel great */ (featureState.isSetupAllowed === true ||
featureState.loginAttemptInfo !== undefined) && (
<React.Fragment>
{activeScreen === MFAScreens.UserInputCodeForm ? (
<MFAOTPHeader
{...commonProps}
loginAttemptInfo={featureState.loginAttemptInfo!}
isSetupAllowed={featureState.isSetupAllowed}
onBackButtonClicked={() =>
props.recipeImplementation.clearLoginAttemptInfo({
userContext: props.userContext,
})
}
/>
) : (
<MFAHeader
onBackButtonClicked={onBackButtonClicked}
contactMethod={activeScreen === MFAScreens.EmailForm ? "EMAIL" : "PHONE"}
/>
)}
{featureState.error !== undefined && <GeneralError error={featureState.error} />}
{activeScreen === MFAScreens.EmailForm ? (
<EmailForm
{...commonProps}
footer={
<MFAFooter
{...commonProps}
onFactorChooserButtonClicked={props.onFactorChooserButtonClicked}
onSignOutClicked={props.onSignOutClicked}
isSetupAllowed={featureState.isSetupAllowed}
/>
}
/>
) : activeScreen === MFAScreens.PhoneForm ? (
<PhoneForm
{...commonProps}
footer={
<MFAFooter
{...commonProps}
onFactorChooserButtonClicked={props.onFactorChooserButtonClicked}
onSignOutClicked={props.onSignOutClicked}
isSetupAllowed={featureState.isSetupAllowed}
/>
}
/>
) : activeScreen === MFAScreens.UserInputCodeForm ? (
<UserInputCodeForm
{...commonProps}
loginAttemptInfo={featureState.loginAttemptInfo!}
onSuccess={props.onSuccess}
footer={
<MFAOTPFooter
{...commonProps}
onFactorChooserButtonClicked={props.onFactorChooserButtonClicked}
onSignOutClicked={props.onSignOutClicked}
isSetupAllowed={featureState.isSetupAllowed}
loginAttemptInfo={featureState.loginAttemptInfo!}
/>
}
/>
) : null}
</React.Fragment>
)}
{featureState.loaded && (
<React.Fragment>
{activeScreen === MFAScreens.UserInputCodeForm ? (
<MFAOTPHeader
{...commonProps}
loginAttemptInfo={featureState.loginAttemptInfo!}
isSetupAllowed={featureState.isSetupAllowed}
onBackButtonClicked={() =>
props.recipeImplementation.clearLoginAttemptInfo({
userContext: props.userContext,
})
}
/>
) : (
<MFAHeader
onBackButtonClicked={onBackButtonClicked}
contactMethod={activeScreen === MFAScreens.EmailForm ? "EMAIL" : "PHONE"}
/>
)}
{featureState.error !== undefined && <GeneralError error={featureState.error} />}
{activeScreen === MFAScreens.EmailForm ? (
<EmailForm
{...commonProps}
footer={
<MFAFooter
{...commonProps}
onFactorChooserButtonClicked={props.onFactorChooserButtonClicked}
onSignOutClicked={props.onSignOutClicked}
isSetupAllowed={featureState.isSetupAllowed}
/>
}
/>
) : activeScreen === MFAScreens.PhoneForm ? (
<PhoneForm
{...commonProps}
footer={
<MFAFooter
{...commonProps}
onFactorChooserButtonClicked={props.onFactorChooserButtonClicked}
onSignOutClicked={props.onSignOutClicked}
isSetupAllowed={featureState.isSetupAllowed}
/>
}
/>
) : activeScreen === MFAScreens.UserInputCodeForm ? (
<UserInputCodeForm
{...commonProps}
loginAttemptInfo={featureState.loginAttemptInfo!}
onSuccess={props.onSuccess}
footer={
<MFAOTPFooter
{...commonProps}
onFactorChooserButtonClicked={props.onFactorChooserButtonClicked}
onSignOutClicked={props.onSignOutClicked}
isSetupAllowed={featureState.isSetupAllowed}
loginAttemptInfo={featureState.loginAttemptInfo!}
/>
}
/>
) : null}
</React.Fragment>
)}
</div>
<SuperTokensBranding />
</div>
Expand All @@ -147,6 +151,9 @@ function MFAThemeWrapper(props: MFAProps): JSX.Element {
activeStyle = props.config.signInUpFeature.emailOrPhoneFormStyle;
} else if (activeScreen === MFAScreens.PhoneForm) {
activeStyle = props.config.signInUpFeature.emailOrPhoneFormStyle;
} else {
// TODO: test
activeStyle = ""; // styling the access denied screen is handled through the session recipe
}

return (
Expand All @@ -163,7 +170,13 @@ export default MFAThemeWrapper;
export function getActiveScreen(props: Pick<MFAProps, "featureState" | "contactMethod">) {
if (props.featureState.successInAnotherTab) {
return MFAScreens.CloseTab;
} else if (props.featureState.loginAttemptInfo) {
} else if (
props.featureState.error === "PWLESS_MFA_OTP_NOT_ALLOWED_TO_SETUP" ||
(props.featureState.isSetupAllowed === false && props.featureState.loginAttemptInfo === undefined)
// The first condition should always be true if the second one is true, this is here as a "fallback"
) {
return MFAScreens.AccessDenied;
} else if (props.featureState.isSetupAllowed !== true && props.featureState.loginAttemptInfo) {
return MFAScreens.UserInputCodeForm;
} else if (props.contactMethod === "EMAIL") {
return MFAScreens.EmailForm;
Expand Down
4 changes: 2 additions & 2 deletions lib/ts/recipe/passwordless/components/themes/mfa/mfaFooter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export const MFAFooter = withOverride(
const claim = useClaimValue(MultiFactorAuthClaim);

return (
<>
<div data-supertokens="footerLinkGroup pwlessMFAFooter">
{claim.loading === false && (claim.value?.n.length ?? 0) > 1 && (
<div
data-supertokens="secondaryText secondaryLinkWithLeftArrow"
Expand All @@ -40,7 +40,7 @@ export const MFAFooter = withOverride(
<ArrowLeftIcon color="rgb(var(--palette-textPrimary))" />
{t("PWLESS_MFA_FOOTER_LOGOUT")}
</div>
</>
</div>
);
}
);
Loading

0 comments on commit fa3d6d5

Please sign in to comment.