Revert "feat: Update UI of signup / login pages (#16710)"

This reverts commit b879aee.
calcom · Sep 24, 2024 · 0333a25 · 0333a25
1 parent 77af36e
commit 0333a25
Show file tree

Hide file tree

Showing 6 changed files with 230 additions and 329 deletions.
diff --git a/apps/web/modules/auth/login-view.tsx b/apps/web/modules/auth/login-view.tsx
@@ -39,7 +39,7 @@ interface LoginValues {
 }
 
 const GoogleIcon = () => (
- <img className="text-subtle mr-2 h-4 w-4 dark:invert" src="/google-icon-colored.svg" alt="" />
+ <img className="text-subtle mr-2 h-4 w-4 dark:invert" src="/google-icon.svg" alt="" />
 );
 export type PageProps = inferSSRProps<typeof getServerSideProps>;
 export default function Login({
@@ -95,6 +95,12 @@ 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
@@ -172,27 +178,6 @@ 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
@@ -210,42 +195,6 @@ PageProps & WithNonceProps<{}>) {
  : null
  }>
  <FormProvider {...methods}>
- {!twoFactorRequired && (
- <>
- <div className="space-y-3">
- {isGoogleLoginEnabled && (
- <Button
- color="primary"
- 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>
- )}
- </>
- )}
-
  <form onSubmit={methods.handleSubmit(onSubmit)} noValidate data-testid="login-form">
  <div>
  <input defaultValue={csrfToken || undefined} type="hidden" hidden {...register("csrfToken")} />
@@ -284,7 +233,7 @@ PageProps & WithNonceProps<{}>) {
  {errorMessage && <Alert severity="error" title={errorMessage} />}
  <Button
  type="submit"
- color="secondary"
+ color="primary"
  disabled={formState.isSubmitting}
  className="w-full justify-center">
  <span>{twoFactorRequired ? t("submit") : t("sign_in")}</span>
@@ -294,6 +243,38 @@ 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 />