chore: password form fix

This commit is contained in:
Aaryan Khandelwal 2023-11-23 17:46:07 +05:30
parent 82665a35ee
commit 981ee12226
2 changed files with 49 additions and 43 deletions

View File

@ -35,7 +35,15 @@ export const EmailPasswordForm: React.FC<IEmailPasswordForm> = (props) => {
return ( return (
<> <>
<form className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto" onSubmit={handleSubmit(onSubmit)}> <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
Get on your flight deck!
</h1>
<div className="text-center text-sm text-onboarding-text-200 mt-3">
<p className="text-center text-sm text-onboarding-text-200 px-20 mt-3">
Sign in with the email you used to sign up for Plane
</p>
</div>
<form className="space-y-4 mt-5 sm:w-96 mx-auto" onSubmit={handleSubmit(onSubmit)}>
<div className="space-y-1"> <div className="space-y-1">
<Controller <Controller
control={control} control={control}
@ -109,7 +117,7 @@ export const EmailPasswordForm: React.FC<IEmailPasswordForm> = (props) => {
onClick={() => router.push("/accounts/sign-up")} onClick={() => router.push("/accounts/sign-up")}
className="text-custom-text-200 hover:text-custom-primary-100" className="text-custom-text-200 hover:text-custom-primary-100"
> >
{"Don't have an account? Sign Up"} Don{"'"}t have an account? Sign up
</button> </button>
</div> </div>
</form> </form>

View File

@ -149,9 +149,10 @@ export const SignInView = observer(() => {
} }
}; };
const handlePasswordSignIn = (formData: EmailPasswordFormValues) => { const handlePasswordSignIn = async (formData: EmailPasswordFormValues) => {
setLoading(true); setLoading(true);
return authService
return await authService
.emailLogin(formData) .emailLogin(formData)
.then(() => { .then(() => {
mutateUserInfo(); mutateUserInfo();
@ -231,48 +232,45 @@ export const SignInView = observer(() => {
</div> </div>
) : ( ) : (
<> <>
<> <div className="sm:w-96 mx-auto flex flex-col divide-y divide-custom-border-200">
{enableEmailPassword && <EmailPasswordForm onSubmit={handlePasswordSignIn} />} <div className="pb-2">
{envConfig?.magic_login && ( {envConfig.magic_login ? (
<div className="sm:w-96 mx-auto flex flex-col divide-y divide-custom-border-200"> <EmailCodeForm authType={authType} handleSignIn={handleEmailCodeSignIn} />
<div className="pb-2"> ) : (
<EmailCodeForm authType={authType} handleSignIn={handleEmailCodeSignIn} /> <EmailPasswordForm onSubmit={handlePasswordSignIn} />
</div>
</div>
)}
<div className="flex sm:w-96 items-center mt-4 mx-auto">
<hr className={`border-onboarding-border-100 w-full`} />
<p className="text-center text-sm text-onboarding-text-400 mx-3 flex-shrink-0">
Or continue with
</p>
<hr className={`border-onboarding-border-100 w-full`} />
</div>
<div className="flex flex-col items-center justify-center gap-4 pt-7 sm:flex-row sm:w-96 mx-auto overflow-hidden">
{envConfig?.google_client_id && (
<GoogleLoginButton clientId={envConfig?.google_client_id} handleSignIn={handleGoogleSignIn} />
)}
{envConfig?.github_client_id && (
<GithubLoginButton
authType={authType}
clientId={envConfig?.github_client_id}
handleSignIn={handleGitHubSignIn}
/>
)} )}
</div> </div>
{authType === "sign-up" && ( </div>
<div className="sm:w-96 text-center mx-auto mt-6 text-onboarding-text-400 text-sm"> <div className="flex sm:w-96 items-center mt-4 mx-auto">
Already using Plane?{" "} <hr className={`border-onboarding-border-100 w-full`} />
<span <p className="text-center text-sm text-onboarding-text-400 mx-3 flex-shrink-0">Or continue with</p>
className="text-custom-primary-80 hover text-sm font-medium underline hover:cursor-pointer" <hr className={`border-onboarding-border-100 w-full`} />
onClick={() => { </div>
setAuthType("sign-in"); <div className="flex flex-col items-center justify-center gap-4 pt-7 sm:flex-row sm:w-96 mx-auto overflow-hidden">
}} {envConfig?.google_client_id && (
> <GoogleLoginButton clientId={envConfig?.google_client_id} handleSignIn={handleGoogleSignIn} />
Sign in
</span>
</div>
)} )}
</> {envConfig?.github_client_id && (
<GithubLoginButton
authType={authType}
clientId={envConfig?.github_client_id}
handleSignIn={handleGitHubSignIn}
/>
)}
</div>
{authType === "sign-up" && (
<div className="sm:w-96 text-center mx-auto mt-6 text-onboarding-text-400 text-sm">
Already using Plane?{" "}
<span
className="text-custom-primary-80 hover text-sm font-medium underline hover:cursor-pointer"
onClick={() => {
setAuthType("sign-in");
}}
>
Sign in
</span>
</div>
)}
<div <div
className={`flex py-2 bg-onboarding-background-100 border border-onboarding-border-200 mx-auto rounded-[3.5px] sm:w-96 mt-16`} className={`flex py-2 bg-onboarding-background-100 border border-onboarding-border-200 mx-auto rounded-[3.5px] sm:w-96 mt-16`}
> >