[WEB-1404] chore: auth ui / ux fixes (#4552)

* chore: update deactivated account alert message to show support email if available in env. * chore: clear error_info on email check. * chore: fix log-in / sign-up forms alignment and minor ux copy fix. * fix: auth redirection to `/sign-in` issue. * chore: update `back to sign in` url in forgot password screen.
2024-05-22 17:31:56 +05:30 · 2024-05-22 17:31:56 +05:30 · 63a6be2143
commit 63a6be2143
parent ca73a11868
10 changed files with 31 additions and 15 deletions
--- a/turbo.json
+++ b/turbo.json
@ -20,6 +20,7 @@
    "NEXT_PUBLIC_POSTHOG_KEY",
    "NEXT_PUBLIC_POSTHOG_HOST",
    "NEXT_PUBLIC_POSTHOG_DEBUG",
+    "NEXT_PUBLIC_SUPPORT_EMAIL",
    "SENTRY_AUTH_TOKEN"
  ],
  "pipeline": {
--- a/web/components/account/auth-forms/auth-header.tsx
+++ b/web/components/account/auth-forms/auth-header.tsx
@ -21,29 +21,29 @@ type TAuthHeader = {
 const Titles = {
  [EAuthModes.SIGN_IN]: {
    [EAuthSteps.EMAIL]: {
-      header: "Log in or sign up",
+      header: "Log in or Sign up",
      subHeader: "",
    },
    [EAuthSteps.PASSWORD]: {
-      header: "Log in or sign up",
+      header: "Log in or Sign up",
      subHeader: "Log in using your password.",
    },
    [EAuthSteps.UNIQUE_CODE]: {
-      header: "Log in or sign up",
+      header: "Log in or Sign up",
      subHeader: "Log in using your unique code.",
    },
  },
  [EAuthModes.SIGN_UP]: {
    [EAuthSteps.EMAIL]: {
-      header: "Sign up or log in",
+      header: "Sign up or Log in",
      subHeader: "",
    },
    [EAuthSteps.PASSWORD]: {
-      header: "Sign up or log in",
+      header: "Sign up or Log in",
      subHeader: "Sign up using your password",
    },
    [EAuthSteps.UNIQUE_CODE]: {
-      header: "Sign up or log in",
+      header: "Sign up or Log in",
      subHeader: "Sign up using your unique code",
    },
  },
--- a/web/components/account/auth-forms/auth-root.tsx
+++ b/web/components/account/auth-forms/auth-root.tsx
@ -97,6 +97,7 @@ export const AuthRoot: FC<TAuthRoot> = observer((props) => {
  // submit handler- email verification
  const handleEmailVerification = async (data: IEmailCheckData) => {
    setEmail(data.email);
+    setErrorInfo(undefined);
    await authService
      .emailCheck(data)
      .then(async (response) => {
--- a/web/helpers/authentication.helper.tsx
+++ b/web/helpers/authentication.helper.tsx
@ -1,5 +1,7 @@
 import { ReactNode } from "react";
 import Link from "next/link";
+// helpers
+import { SUPPORT_EMAIL } from "./common.helper";

 export enum EPageTypes {
  PUBLIC = "PUBLIC",
@ -126,7 +128,7 @@ const errorCodeMessages: {
  },
  [EAuthenticationErrorCodes.USER_ACCOUNT_DEACTIVATED]: {
    title: `User account deactivated`,
-    message: () => `User account deactivated. Please contact your administrator.`,
+    message: () => `User account deactivated. Please contact ${!!SUPPORT_EMAIL ? SUPPORT_EMAIL : "administrator"}.`,
  },
  [EAuthenticationErrorCodes.INVALID_PASSWORD]: {
    title: `Invalid password`,
--- a/web/helpers/common.helper.ts
+++ b/web/helpers/common.helper.ts
@ -9,6 +9,8 @@ export const ADMIN_BASE_PATH = process.env.NEXT_PUBLIC_ADMIN_BASE_PATH || "";
 export const SPACE_BASE_URL = process.env.NEXT_PUBLIC_SPACE_BASE_URL || "";
 export const SPACE_BASE_PATH = process.env.NEXT_PUBLIC_SPACE_BASE_PATH || "";

+export const SUPPORT_EMAIL = process.env.NEXT_PUBLIC_SUPPORT_EMAIL || "";
+
 export const GOD_MODE_URL = encodeURI(`${ADMIN_BASE_URL}${ADMIN_BASE_PATH}/`);

 export const debounce = (func: any, wait: number, immediate: boolean = false) => {
--- a/web/lib/wrappers/authentication-wrapper.tsx
+++ b/web/lib/wrappers/authentication-wrapper.tsx
@ -93,7 +93,7 @@ export const AuthenticationWrapper: FC<TAuthenticationWrapper> = observer((props

  if (pageType === EPageTypes.ONBOARDING) {
    if (!currentUser?.id) {
-      router.push("/sign-in");
+      router.push("/");
      return <></>;
    } else {
      if (currentUser && currentUserProfile?.id && isUserOnboard) {
@ -106,7 +106,7 @@ export const AuthenticationWrapper: FC<TAuthenticationWrapper> = observer((props

  if (pageType === EPageTypes.SET_PASSWORD) {
    if (!currentUser?.id) {
-      router.push("/sign-in");
+      router.push("/");
      return <></>;
    } else {
      if (currentUser && !currentUser?.is_password_autoset && currentUserProfile?.id && isUserOnboard) {
@ -125,7 +125,7 @@ export const AuthenticationWrapper: FC<TAuthenticationWrapper> = observer((props
        return <></>;
      }
    } else {
-      router.push("/sign-in");
+      router.push("/");
      return <></>;
    }
  }
--- a/web/next.config.js
+++ b/web/next.config.js
@ -41,6 +41,16 @@ const nextConfig = {
        source: "/sign-in",
        destination: "/",
        permanent: true
+      },
+      {
+        source: "/register",
+        destination: "/sign-up",
+        permanent: true
+      },
+      {
+        source: "/login",
+        destination: "/",
+        permanent: true
      }
    ]
  },
--- a/web/pages/accounts/forgot-password.tsx
+++ b/web/pages/accounts/forgot-password.tsx
@ -176,7 +176,7 @@ const ForgotPasswordPage: NextPageWithLayout = () => {
              >
                {resendTimerCode > 0 ? `Resend in ${resendTimerCode} seconds` : "Send reset link"}
              </Button>
-              <Link href="/sign-in" className={cn("w-full", getButtonStyling("link-neutral", "lg"))}>
+              <Link href="/" className={cn("w-full", getButtonStyling("link-neutral", "lg"))}>
                Back to sign in
              </Link>
            </form>
--- a/web/pages/index.tsx
+++ b/web/pages/index.tsx
@ -31,7 +31,7 @@ const HomePage: NextPageWithLayout = observer(() => {

  return (
    <div className="relative w-screen h-screen overflow-hidden">
-      <PageHead title="Log in to continue" />
+      <PageHead title="Log in or Sign up to continue" />
      <div className="absolute inset-0 z-0">
        <Image
          src={resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern}
@ -56,7 +56,7 @@ const HomePage: NextPageWithLayout = observer(() => {
            </Link>
          </div>
        </div>
-        <div className="flex-grow container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10 lg:pt-28 transition-all">
+        <div className="flex flex-col justify-center flex-grow container h-[100vh-60px] mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 transition-all">
          <AuthRoot authMode={EAuthModes.SIGN_IN} />
        </div>
      </div>
--- a/web/pages/sign-up.tsx
+++ b/web/pages/sign-up.tsx
@ -33,7 +33,7 @@ const SignInPage: NextPageWithLayout = observer(() => {

  return (
    <div className="relative w-screen h-screen overflow-hidden">
-      <PageHead title="Sign In" />
+      <PageHead title="Sign up or Log in to continue" />
      <div className="absolute inset-0 z-0">
        <Image
          src={resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern}
@ -58,7 +58,7 @@ const SignInPage: NextPageWithLayout = observer(() => {
            </Link>
          </div>
        </div>
-        <div className="flex-grow container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10 lg:pt-28 transition-all">
+        <div className="flex flex-col justify-center flex-grow container h-[100vh-60px] mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 transition-all">
          <AuthRoot authMode={EAuthModes.SIGN_UP} />
        </div>
      </div>