Skip to content

Commit

Permalink
update: UI for google auth button and loadin toggle in signin screen (#…
Browse files Browse the repository at this point in the history 
…991)
  • Loading branch information
@gurusainath
gurusainath authored May 2, 2023
1 parent 498d6d2 commit b26e8bd
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 28 deletions.
2 changes: 1 addition & 1 deletion apps/app/components/account/google-login.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
return (
<>
<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 changes: 28 additions & 27 deletions apps/app/pages/signin.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,42 +97,43 @@ const SignInPage: NextPage = () => {
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">
<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 />
</div>
)}
<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 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">
<Image src={Logo} height={80} width={80} alt="Plane Web Logo" />
<h2 className="text-center text-xl font-medium text-brand-base">
Sign In to your Plane Account
</h2>
</div>
) : (
<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 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">
<Image src={Logo} height={80} width={80} alt="Plane Web Logo" />
<h2 className="text-center text-xl font-medium text-brand-base">
Sign In to your Plane Account
</h2>
</div>

<div className="flex flex-col rounded-[10px] bg-brand-base shadow-md">
{parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
<>
<EmailSignInForm handleSuccess={onSignInSuccess} />
<div className="flex flex-col rounded-[10px] bg-brand-base shadow-md">
{parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
<>
<EmailSignInForm handleSuccess={onSignInSuccess} />

<div className="flex flex-col items-center justify-center gap-3 border-t border-brand-base py-5 px-5 ">
<GoogleLoginButton handleSignIn={handleGoogleSignIn} />
<div className="flex flex-col items-center justify-center gap-3 border-t border-brand-base py-5 px-5 ">
<GoogleLoginButton handleSignIn={handleGoogleSignIn} />

<GithubLoginButton handleSignIn={handleGithubSignIn} />
</div>
</>
) : (
<>
<EmailPasswordForm onSuccess={onSignInSuccess} />
</>
)}
<GithubLoginButton handleSignIn={handleGithubSignIn} />
</div>
</>
) : (
<>
<EmailPasswordForm onSuccess={onSignInSuccess} />
</>
)}
</div>
</div>
</div>
</div>
</div>
)}
</DefaultLayout>
);
};
Expand Down

1 comment on commit b26e8bd

@vercel
Copy link

@vercel vercel bot commented on b26e8bd May 2, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

plane-dev – ./apps/app

plane-dev-git-develop-plane.vercel.app
plane-dev-plane.vercel.app
plane-dev.vercel.app

Please sign in to comment.