thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

update: UI for google auth button and loadin toggle in signin screen (#991)

Browse Source
This commit is contained in:
guru_sainath 2023-05-03 00:48:24 +05:30 committed by GitHub
parent 498d6d2b02
commit b26e8bd956
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/app/components/account/google-login.tsx
View File

@ -47,7 +47,7 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
return ( return (
<> <>
<Script src="https://accounts.google.com/gsi/client" async defer onLoad={loadScript} /> <Script src="https://accounts.google.com/gsi/client" async defer onLoad={loadScript} />
<div className="h-12" id="googleSignInButton" ref={googleSignInButton} /> <div className="overflow-hidden rounded" id="googleSignInButton" ref={googleSignInButton} />
</> </>
); );
}; };

55
apps/app/pages/signin.tsx
View File

@ -97,42 +97,43 @@ const SignInPage: NextPage = () => {
title: "Plane - Sign In", title: "Plane - Sign In",
}} }}
> >
{isLoading && ( {isLoading ? (
<div className="absolute top-0 left-0 z-50 flex h-full w-full flex-col items-center justify-center gap-y-3"> <div className="absolute top-0 left-0 z-50 flex h-full w-full flex-col items-center justify-center gap-y-3">
<h2 className="text-xl text-gray-900">Signing in. Please wait...</h2> <h2 className="text-xl text-brand-base">Signing in. Please wait...</h2>
<Spinner /> <Spinner />
</div> </div>
)} ) : (
<div className="flex h-screen w-full items-center justify-center overflow-auto"> <div className="flex h-screen w-full items-center justify-center overflow-auto">
<div className="flex min-h-full w-full flex-col justify-center py-12 px-6 lg:px-8"> <div className="flex min-h-full w-full flex-col justify-center py-12 px-6 lg:px-8">
<div className="flex flex-col gap-10 sm:mx-auto sm:w-full sm:max-w-md"> <div className="flex flex-col gap-10 sm:mx-auto sm:w-full sm:max-w-md">
<div className="flex flex-col items-center justify-center gap-10"> <div className="flex flex-col items-center justify-center gap-10">
<Image src={Logo} height={80} width={80} alt="Plane Web Logo" /> <Image src={Logo} height={80} width={80} alt="Plane Web Logo" />
<h2 className="text-center text-xl font-medium text-brand-base"> <h2 className="text-center text-xl font-medium text-brand-base">
Sign In to your Plane Account Sign In to your Plane Account
</h2> </h2>
</div> </div>
<div className="flex flex-col rounded-[10px] bg-brand-base shadow-md"> <div className="flex flex-col rounded-[10px] bg-brand-base shadow-md">
{parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? ( {parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
<> <>
<EmailSignInForm handleSuccess={onSignInSuccess} /> <EmailSignInForm handleSuccess={onSignInSuccess} />
<div className="flex flex-col items-center justify-center gap-3 border-t border-brand-base py-5 px-5 "> <div className="flex flex-col items-center justify-center gap-3 border-t border-brand-base py-5 px-5 ">
<GoogleLoginButton handleSignIn={handleGoogleSignIn} /> <GoogleLoginButton handleSignIn={handleGoogleSignIn} />
<GithubLoginButton handleSignIn={handleGithubSignIn} /> <GithubLoginButton handleSignIn={handleGithubSignIn} />
</div> </div>
</> </>
) : ( ) : (
<> <>
<EmailPasswordForm onSuccess={onSignInSuccess} /> <EmailPasswordForm onSuccess={onSignInSuccess} />
</> </>
)} )}
</div>
</div> </div>
</div> </div>
</div> </div>
</div> )}
</DefaultLayout> </DefaultLayout>
); );
}; };