diff --git a/public/hyperswitch/assets/Dark/hyperswitchLogoIconWithText.svg b/public/hyperswitch/assets/Dark/hyperswitchLogoIconWithText.svg index b72c19b7e..af84749b0 100644 --- a/public/hyperswitch/assets/Dark/hyperswitchLogoIconWithText.svg +++ b/public/hyperswitch/assets/Dark/hyperswitchLogoIconWithText.svg @@ -1,17 +1,18 @@ - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + diff --git a/public/hyperswitch/assets/key-password.svg b/public/hyperswitch/assets/key-password.svg new file mode 100644 index 000000000..f2bfca185 --- /dev/null +++ b/public/hyperswitch/assets/key-password.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/screens/HyperSwitch/HSwitchUtils.res b/src/screens/HyperSwitch/HSwitchUtils.res index 98e18e9a7..fcd548208 100644 --- a/src/screens/HyperSwitch/HSwitchUtils.res +++ b/src/screens/HyperSwitch/HSwitchUtils.res @@ -257,7 +257,11 @@ module BackgroundImageWrapper = { Belt.Option.isSome}>
+ style={ReactDOMStyle.make( + ~backgroundImage=`url(${backgroundImageUrl})`, + ~backgroundSize=`cover`, + (), + )}> {children->Belt.Option.getWithDefault(React.null)}
diff --git a/src/screens/login/HSwitchLoginFlow/HyperSwitchAuth.res b/src/screens/login/HSwitchLoginFlow/HyperSwitchAuth.res index ccbae97ba..04ecd6c63 100644 --- a/src/screens/login/HSwitchLoginFlow/HyperSwitchAuth.res +++ b/src/screens/login/HSwitchLoginFlow/HyperSwitchAuth.res @@ -35,21 +35,14 @@ let make = (~setAuthStatus: HyperSwitchAuthTypes.authStatus => unit, ~authType, } } - let getUserWithEmail = async (body, email) => { + let getUserWithEmail = async body => { try { let url = getURL(~entityName=USERS, ~userType=#SIGNIN, ~methodType=Post, ()) let res = await updateDetails(url, body, Post) - let valuesDict = res->getDictFromJsonObject - let token = valuesDict->LogicUtils.getString("token", "") let magicLinkSent = valuesDict->LogicUtils.getBool("is_email_sent", false) - // home - if !(token->HSwitchUtils.isEmptyString) { - let token = parseResponseJson(~json=res, ~email) - setAuthStatus(LoggedIn(HyperSwitchAuthTypes.getDummyAuthInfoForToken(token))) - } else if magicLinkSent { - // magic link + if magicLinkSent { setAuthType(_ => MagicLinkEmailSent) } else { showToast(~message="Failed to send an email, Try again", ~toastType=ToastError, ()) @@ -64,11 +57,13 @@ let make = (~setAuthStatus: HyperSwitchAuthTypes.authStatus => unit, ~authType, try { let url = getURL(~entityName=USERS, ~userType=#SIGNIN, ~methodType=Post, ()) let res = await updateDetails(url, body, Post) - let token = parseResponseJson(~json=res, ~email) + + // home if !(token->HSwitchUtils.isEmptyString) { setAuthStatus(LoggedIn(HyperSwitchAuthTypes.getDummyAuthInfoForToken(token))) } else { + showToast(~message="Failed to sign in, Try again", ~toastType=ToastError, ()) setAuthStatus(LoggedOut) } } catch { @@ -156,7 +151,7 @@ let make = (~setAuthStatus: HyperSwitchAuthTypes.authStatus => unit, ~authType, | (true, SignUP) | (true, LoginWithEmail) => { let body = getEmailBody(email, ~country, ()) - getUserWithEmail(body, email) + getUserWithEmail(body) } | (true, ForgetPassword) => let body = email->getEmailBody() @@ -194,7 +189,7 @@ let make = (~setAuthStatus: HyperSwitchAuthTypes.authStatus => unit, ~authType, let resendEmail = () => { let body = email->getEmailBody() switch authType { - | MagicLinkEmailSent => getUserWithEmail(body, email)->ignore + | MagicLinkEmailSent => getUserWithEmail(body)->ignore | ForgetPasswordEmailSent => setForgetPassword(body)->ignore | ResendVerifyEmailSent => resendVerifyEmail(body)->ignore | _ => () @@ -234,7 +229,6 @@ let make = (~setAuthStatus: HyperSwitchAuthTypes.authStatus => unit, ~authType, onSubmit render={({handleSubmit}) => { <> -
unit, ~authType, | _ => React.null }} -
- {"By continuing, you agree to our "->React.string} - - {"Terms of Service "->React.string} - - {" & "->React.string} - - {"Privacy Policy"->React.string} - -
+ {note(authType, setAuthType, isMagicLinkEnabled)}
}} diff --git a/src/screens/login/HSwitchLoginFlow/HyperSwitchAuthForm.res b/src/screens/login/HSwitchLoginFlow/HyperSwitchAuthForm.res index 4f3fb6301..ee11b82ac 100644 --- a/src/screens/login/HSwitchLoginFlow/HyperSwitchAuthForm.res +++ b/src/screens/login/HSwitchLoginFlow/HyperSwitchAuthForm.res @@ -4,7 +4,7 @@ let labelClass = "!text-black !font-medium" module EmailPasswordForm = { @react.component let make = (~setAuthType, ~isMagicLinkEnabled) => { -
+
diff --git a/src/screens/login/HSwitchLoginFlow/HyperSwitchAuthScreen.res b/src/screens/login/HSwitchLoginFlow/HyperSwitchAuthScreen.res index 7e6a2a338..ade1b4c48 100644 --- a/src/screens/login/HSwitchLoginFlow/HyperSwitchAuthScreen.res +++ b/src/screens/login/HSwitchLoginFlow/HyperSwitchAuthScreen.res @@ -5,7 +5,7 @@ module AuthPage = { open HyperSwitchAuth @react.component let make = (~authType, ~setAuthType, ~setAuthStatus, ~mode, ~setMode) => { - let {testLiveToggle, magicLink: isMagicLinkEnabled} = + let {testLiveToggle} = HyperswitchAtom.featureFlagAtom ->Recoil.useRecoilValueFromAtom ->LogicUtils.safeParse @@ -14,21 +14,22 @@ module AuthPage = {
-
- -
-
- +
+
+ +
+
+
+ +
- {note(authType, setAuthType, isMagicLinkEnabled)} +
diff --git a/src/screens/login/HSwitchLoginFlow/HyperSwitchAuthUtils.res b/src/screens/login/HSwitchLoginFlow/HyperSwitchAuthUtils.res index c84627b6b..37ca2bede 100644 --- a/src/screens/login/HSwitchLoginFlow/HyperSwitchAuthUtils.res +++ b/src/screens/login/HSwitchLoginFlow/HyperSwitchAuthUtils.res @@ -1,6 +1,28 @@ open HyperSwitchAuthTypes external formEventToStr: ReactEvent.Form.t => string = "%identity" +module TermsAndCondition = { + @react.component + let make = () => { +
+ {"By continuing, you agree to our "->React.string} + + {"Terms of Service "->React.string} + + {" & "->React.string} + + {"Privacy Policy"->React.string} + +
+ } +} + let emailField = FormRenderer.makeFieldInfo( ~label="Email", ~name="email", @@ -158,46 +180,55 @@ let validateForm = (values: Js.Json.t, keys: array) => { } let note = (authType, setAuthType, isMagicLinkEnabled) => { - let getFooterLinkComponent = (~prefix, ~authType, ~path, ~linkText, ~suffix) => { -
- {prefix->React.string} - { - setAuthType(_ => authType) - path->RescriptReactRouter.push - }} - className="font-semibold underline cursor-pointer"> - {linkText->React.string} - - {suffix->React.string} + let getFooterLinkComponent = (~btnText, ~authType, ~path) => { +
{ + setAuthType(_ => authType) + path->RescriptReactRouter.push + }} + className="text-sm text-center text-blue-900 cursor-pointer hover:underline underline-offset-2"> + {btnText->React.string}
} switch authType { | LoginWithEmail => getFooterLinkComponent( - ~prefix="We'll be emailing you a magic link for a password-free experience, you can choose to ", + ~btnText="or sign in using password", ~authType=LoginWithPassword, ~path="/login", - ~linkText="login with password", - ~suffix=" instead.", ) | LoginWithPassword => {getFooterLinkComponent( - ~prefix="Try a password-free experience with our ", + ~btnText="or sign in with an email", ~authType=LoginWithEmail, ~path="/login", - ~linkText="magic link", - ~suffix=" sent to your email address.", )} - | SignUP | _ => + | SignUP => -

+

{"We'll be emailing you a magic link for a password-free experience, you can always choose to setup a password later."->React.string}

+ | ForgetPassword | MagicLinkEmailSent | ForgetPasswordEmailSent | ResendVerifyEmailSent => +
+
{ + let backState = switch authType { + | MagicLinkEmailSent => SignUP + | ForgetPasswordEmailSent => ForgetPassword + | ResendVerifyEmailSent => ResendVerifyEmail + | ForgetPassword | _ => LoginWithPassword + } + setAuthType(_ => backState) + }} + className="text-sm text-center text-blue-900 hover:underline underline-offset-2 cursor-pointer w-fit"> + {"Cancel"->React.string} +
+
+ | _ => React.null } } @@ -258,9 +289,7 @@ module ToggleLiveTestMode = { setAuthType(_ => LoginWithEmail) Window.Location.replace(testButtonRedirectUrl) }}> - - {`${testLiveToggle ? "Integ" : "Test Mode"}`->React.string} - + {"Test Mode"->React.string}
LoginWithEmail) Window.Location.replace(liveButtonRedirectUrl) }}> - - {`${testLiveToggle ? "Sandbox" : "Live Mode"}`->React.string} - + {"Live Mode"->React.string}
@@ -342,18 +369,19 @@ module Header = { let headerStyle = switch authType { | MagicLinkEmailSent | ForgetPasswordEmailSent + | ForgetPassword | ResendVerifyEmailSent => "flex flex-col justify-center items-center" | _ => "flex flex-col" } let cardHeaderText = switch authType { - | LoginWithPassword | LoginWithEmail => "Welcome Back" + | LoginWithPassword | LoginWithEmail => "Hey there, Welcome back!" | SignUP => "Welcome to Hyperswitch" | MagicLinkEmailSent | ForgetPasswordEmailSent | ResendVerifyEmailSent => "Please check your inbox" | ResetPassword => "Reset Password" - | ForgetPassword => "Forgot Password? It's ok" + | ForgetPassword => "Forgot Password?" | ResendVerifyEmail => "Resend Verify Email" | _ => "" } @@ -383,7 +411,26 @@ module Header = {
} - + let showInfoIcon = switch authType { + | MagicLinkEmailSent + | ForgetPassword + | ForgetPasswordEmailSent + | ResendVerifyEmailSent + | ResendVerifyEmail => true + | _ => false + } + +
+ +
+ {switch authType { + | MagicLinkEmailSent | ForgetPasswordEmailSent | ResendVerifyEmailSent => + + | ForgetPassword => + | _ => React.null + }} +
+

{cardHeaderText->React.string}

{switch authType { | LoginWithPassword | LoginWithEmail => @@ -395,13 +442,13 @@ module Header = { ) | SignUP => getHeaderLink( - ~prefix="Already have an account?", + ~prefix="Already using Hyperswitch?", ~authType=isMagicLinkEnabled ? LoginWithEmail : LoginWithPassword, ~path="/login", ~sufix="Sign in", ) | ForgetPassword => -
+
{"Enter your email address associated with your account, and we'll send you a link to reset your password."->React.string}
| MagicLinkEmailSent => "A magic link has been sent to "->getNoteUI @@ -409,7 +456,7 @@ module Header = { | ResendVerifyEmailSent => "A verify email link has been sent to "->getNoteUI | _ => React.null }} - +
} } diff --git a/src/screens/login/ResendBtn.res b/src/screens/login/ResendBtn.res index 579b01487..646c4567a 100644 --- a/src/screens/login/ResendBtn.res +++ b/src/screens/login/ResendBtn.res @@ -18,7 +18,7 @@ let make = (~callBackFun) => { Some(cleanup) }) -
+
{"Didn't receive the mail?"->React.string}