Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Update UI of signup / login pages #16710

Merged
merged 17 commits into from
Sep 23, 2024
+327 −227
Merged

feat: Update UI of signup / login pages #16710

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
9e970b1
update UI of signup, login pages
hbjORbj Sep 19, 2024
cade3ce
remove disabled state from google sign-in
hbjORbj Sep 19, 2024
c14d58f
Put isGoogleLoginEnabled to its place + fix displaySignupForm default…
hbjORbj Sep 19, 2024
6f90603
Rename Signup flow test -> Email Signup flow test
hbjORbj Sep 19, 2024
9f2df85
add data-testid to continue with email button
hbjORbj Sep 19, 2024
e678b33
completely decouble formMethods values from google sign in
hbjORbj Sep 19, 2024
7cbe9cb
fix
hbjORbj Sep 19, 2024
60a2a01
Merge origin/main
hbjORbj Sep 20, 2024
8cb1795
refactor
hbjORbj Sep 20, 2024
0fadb58
add signup page test
hbjORbj Sep 20, 2024
f7f0d1b
revert yarn.lock
hbjORbj Sep 20, 2024
d850f66
Merge branch 'main' into feature/new-signup-flow
hbjORbj Sep 20, 2024
7a60b18
fix e2e test
hbjORbj Sep 20, 2024
1174f86
add saml in signup
hbjORbj Sep 23, 2024
7197223
add saml in signin
hbjORbj Sep 23, 2024
2dd2ae4
revert
hbjORbj Sep 23, 2024
a3bfed8
remove space
hbjORbj Sep 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 59 additions & 40 deletions apps/web/modules/auth/login-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ interface LoginValues {
}

const GoogleIcon = () => (
<img className="text-subtle mr-2 h-4 w-4 dark:invert" src="/google-icon.svg" alt="" />
<img className="text-subtle mr-2 h-4 w-4 dark:invert" src="/google-icon-colored.svg" alt="" />
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I confirmed with Peer. No issues with icon licensing

);
export type PageProps = inferSSRProps<typeof getServerSideProps>;
export default function Login({
Expand Down Expand Up @@ -95,12 +95,6 @@ PageProps & WithNonceProps<{}>) {

callbackUrl = safeCallbackUrl || "";

const LoginFooter = (
<Link href={`${WEBSITE_URL}/signup`} className="text-brand-500 font-medium">
{t("dont_have_an_account")}
</Link>
);

const TwoFactorFooter = (
<>
<Button
Expand Down Expand Up @@ -178,6 +172,27 @@ PageProps & WithNonceProps<{}>) {
? true
: isSAMLLoginEnabled && !isPending && data?.connectionExists;

const LoginFooter = (
<div className="flex flex-col items-center gap-1">
<div className="flex items-center gap-1">
<p className="text-subtle">{t("dont_have_an_account")}</p>
<Link href={`${WEBSITE_URL}/signup`} className="text-brand-500 font-medium">
{t("sign_up")}
</Link>
</div>
{displaySSOLogin && (
<div className="flex items-center gap-1">
<p className="text-subtle">Have a SAML account?</p>
<SAMLLogin
samlTenantID={samlTenantID}
samlProductID={samlProductID}
setErrorMessage={setErrorMessage}
/>
</div>
)}
</div>
);

return (
<div className="dark:bg-brand dark:text-brand-contrast text-emphasis min-h-screen [--cal-brand-emphasis:#101010] [--cal-brand-subtle:#9CA3AF] [--cal-brand-text:white] [--cal-brand:#111827] dark:[--cal-brand-emphasis:#e1e1e1] dark:[--cal-brand-text:black] dark:[--cal-brand:white]">
<AuthContainer
Expand All @@ -195,6 +210,42 @@ PageProps & WithNonceProps<{}>) {
: null
}>
<FormProvider {...methods}>
{!twoFactorRequired && (
<>
<div className="space-y-3">
{isGoogleLoginEnabled && (
<Button
color="primary"
Copy link
Contributor Author

Choose a reason for hiding this comment

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

style change

className="w-full justify-center"
disabled={formState.isSubmitting}
data-testid="google"
CustomStartIcon={<GoogleIcon />}
onClick={async (e) => {
e.preventDefault();
setLastUsed("google");
await signIn("google", {
callbackUrl,
});
}}>
<span>{t("signin_with_google")}</span>
{lastUsed === "google" && <LastUsed />}
</Button>
)}
</div>
{isGoogleLoginEnabled && (
<div className="my-8">
<div className="relative flex items-center">
<div className="border-subtle flex-grow border-t" />
<span className="text-subtle mx-2 flex-shrink text-sm font-normal leading-none">
{t("or").toLocaleLowerCase()}
</span>
<div className="border-subtle flex-grow border-t" />
</div>
</div>
Comment on lines +236 to +244
Copy link
Contributor Author

Choose a reason for hiding this comment

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

new code added

)}
</>
)}

<form onSubmit={methods.handleSubmit(onSubmit)} noValidate data-testid="login-form">
<div>
<input defaultValue={csrfToken || undefined} type="hidden" hidden {...register("csrfToken")} />
Expand Down Expand Up @@ -233,7 +284,7 @@ PageProps & WithNonceProps<{}>) {
{errorMessage && <Alert severity="error" title={errorMessage} />}
<Button
type="submit"
color="primary"
color="secondary"
disabled={formState.isSubmitting}
className="w-full justify-center">
<span>{twoFactorRequired ? t("submit") : t("sign_in")}</span>
Expand All @@ -243,38 +294,6 @@ PageProps & WithNonceProps<{}>) {
</Button>
</div>
</form>
{!twoFactorRequired && (
<>
{(isGoogleLoginEnabled || displaySSOLogin) && <hr className="border-subtle my-8" />}
<div className="space-y-3">
{isGoogleLoginEnabled && (
<Button
color="secondary"
className="w-full justify-center"
disabled={formState.isSubmitting}
data-testid="google"
CustomStartIcon={<GoogleIcon />}
onClick={async (e) => {
e.preventDefault();
setLastUsed("google");
await signIn("google", {
callbackUrl,
});
}}>
<span>{t("signin_with_google")}</span>
{lastUsed === "google" && <LastUsed />}
</Button>
)}
{displaySSOLogin && (
<SAMLLogin
samlTenantID={samlTenantID}
samlProductID={samlProductID}
setErrorMessage={setErrorMessage}
/>
)}
</div>
</>
)}
</FormProvider>
</AuthContainer>
<AddToHomescreen />
Expand Down
Loading
Loading