[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.

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": {

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",
     },
   },

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) => {

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`,

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) => {

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 <></>;
     }
   }

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
       }
     ]
   },

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>

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>

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>