fix: authentication redirection and UI (#4432)

* dev: update python version * dev: handle magic code attempt exhausted * dev: update app, space and god mode redirection paths * fix: handled signup and signin workflow * chore: auth input error indication and autofill styling improvement * dev: add app redirection urls * dev: update redirections * chore: onboarding improvement * chore: onboarding improvement * chore: redirection issue in space resolved * chore: instance empty state added * dev: fix app, space, admin redirection in docker setitngs --------- Co-authored-by: guru_sainath <gurusainath007@gmail.com> Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
2026-02-23 19:50:27 +01:00 · 2024-05-10 17:30:38 +05:30
parent 2d1201cc92
commit 88ebda42ff
49 changed files with 1336 additions and 541 deletions
--- a/web/Dockerfile.web
+++ b/web/Dockerfile.web
@@ -74,7 +74,7 @@ ENV NEXT_PUBLIC_ADMIN_BASE_URL=$NEXT_PUBLIC_ADMIN_BASE_URL
 ARG NEXT_PUBLIC_ADMIN_BASE_PATH="/god-mode"
 ENV NEXT_PUBLIC_ADMIN_BASE_PATH=$NEXT_PUBLIC_ADMIN_BASE_PATH

-ARG NEXT_PUBLIC_SPACE_BASE_URL=""
+ARG NEXT_PUBLIC_SPACE_BASE_URL="/spaces"
 ENV NEXT_PUBLIC_SPACE_BASE_URL=$NEXT_PUBLIC_SPACE_BASE_URL

 ARG NEXT_PUBLIC_SPACE_BASE_PATH="/spaces"
--- a/web/components/account/auth-forms/auth-root.tsx
+++ b/web/components/account/auth-forms/auth-root.tsx
@@ -2,7 +2,6 @@ import React, { FC, useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 import { IEmailCheckData } from "@plane/types";
-import { TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import {
  AuthHeader,
@@ -43,6 +42,7 @@ export const AuthRoot: FC<TAuthRoot> = observer((props) => {
  const [authStep, setAuthStep] = useState<EAuthSteps>(EAuthSteps.EMAIL);
  const [email, setEmail] = useState(emailParam ? emailParam.toString() : "");
  const [errorInfo, setErrorInfo] = useState<TAuthErrorInfo | undefined>(undefined);
+  const [isPasswordAutoset, setIsPasswordAutoset] = useState(true);
  // hooks
  const { instance } = useInstance();

@@ -63,52 +63,57 @@ export const AuthRoot: FC<TAuthRoot> = observer((props) => {
          )
        )
          setAuthStep(EAuthSteps.UNIQUE_CODE);
-
-        // validating weather to show alert to banner
-        if (errorhandler?.type === EErrorAlertType.TOAST_ALERT) {
-          setToast({
-            type: TOAST_TYPE.ERROR,
-            title: errorhandler?.title,
-            message: errorhandler?.message as string,
-          });
-        } else setErrorInfo(errorhandler);
+        setErrorInfo(errorhandler);
      }
    }
  }, [error_code, authMode]);

-  // step 1 submit handler- email verification
+  // submit handler- email verification
  const handleEmailVerification = async (data: IEmailCheckData) => {
    setEmail(data.email);
-
    const emailCheckRequest =
      authMode === EAuthModes.SIGN_IN ? authService.signInEmailCheck(data) : authService.signUpEmailCheck(data);

    await emailCheckRequest
-      .then((response) => {
+      .then(async (response) => {
        if (authMode === EAuthModes.SIGN_IN) {
-          if (response.is_password_autoset) setAuthStep(EAuthSteps.UNIQUE_CODE);
-          else setAuthStep(EAuthSteps.PASSWORD);
+          if (response.is_password_autoset) {
+            setAuthStep(EAuthSteps.UNIQUE_CODE);
+            generateEmailUniqueCode(data.email);
+          } else {
+            setIsPasswordAutoset(false);
+            setAuthStep(EAuthSteps.PASSWORD);
+          }
        } else {
-          if (instance && instance?.config?.is_smtp_configured) setAuthStep(EAuthSteps.UNIQUE_CODE);
-          else setAuthStep(EAuthSteps.PASSWORD);
+          if (instance && instance?.config?.is_smtp_configured) {
+            setAuthStep(EAuthSteps.UNIQUE_CODE);
+            generateEmailUniqueCode(data.email);
+          } else setAuthStep(EAuthSteps.PASSWORD);
        }
      })
      .catch((error) => {
        const errorhandler = authErrorHandler(error?.error_code.toString(), data?.email || undefined);
-        if (errorhandler?.type === EErrorAlertType.BANNER_ALERT) {
-          setErrorInfo(errorhandler);
-          return;
-        } else if (errorhandler?.type === EErrorAlertType.TOAST_ALERT)
-          setToast({
-            type: TOAST_TYPE.ERROR,
-            title: errorhandler?.title,
-            message: (errorhandler?.message as string) || "Something went wrong. Please try again.",
-          });
+        if (errorhandler?.type) setErrorInfo(errorhandler);
+      });
+  };
+
+  // generating the unique code
+  const generateEmailUniqueCode = async (email: string): Promise<{ code: string } | undefined> => {
+    const payload = { email: email };
+    return await authService
+      .generateUniqueCode(payload)
+      .then(() => ({ code: "" }))
+      .catch((error) => {
+        const errorhandler = authErrorHandler(error?.error_code.toString());
+        if (errorhandler?.type) setErrorInfo(errorhandler);
+        throw error;
      });
  };

  const isOAuthEnabled =
-    instance?.config && (instance?.config?.is_google_enabled || instance?.config?.is_github_enabled);
+    (instance?.config && (instance?.config?.is_google_enabled || instance?.config?.is_github_enabled)) || false;
+
+  const isSMTPConfigured = (instance?.config && instance?.config?.is_smtp_configured) || false;

  return (
    <div className="relative flex flex-col space-y-6">
@@ -125,24 +130,29 @@ export const AuthRoot: FC<TAuthRoot> = observer((props) => {
        {authStep === EAuthSteps.EMAIL && <AuthEmailForm defaultEmail={email} onSubmit={handleEmailVerification} />}
        {authStep === EAuthSteps.UNIQUE_CODE && (
          <AuthUniqueCodeForm
+            mode={authMode}
            email={email}
            handleEmailClear={() => {
              setEmail("");
              setAuthStep(EAuthSteps.EMAIL);
            }}
-            submitButtonText="Continue"
-            mode={authMode}
+            generateEmailUniqueCode={generateEmailUniqueCode}
          />
        )}
        {authStep === EAuthSteps.PASSWORD && (
          <AuthPasswordForm
+            mode={authMode}
+            isPasswordAutoset={isPasswordAutoset}
+            isSMTPConfigured={isSMTPConfigured}
            email={email}
            handleEmailClear={() => {
              setEmail("");
              setAuthStep(EAuthSteps.EMAIL);
            }}
-            handleStepChange={(step) => setAuthStep(step)}
-            mode={authMode}
+            handleAuthStep={(step: EAuthSteps) => {
+              if (step === EAuthSteps.UNIQUE_CODE) generateEmailUniqueCode(email);
+              setAuthStep(step);
+            }}
          />
        )}
        {isOAuthEnabled && <OAuthOptions />}
--- a/web/components/account/auth-forms/email.tsx
+++ b/web/components/account/auth-forms/email.tsx
@@ -7,6 +7,7 @@ import { IEmailCheckData } from "@plane/types";
 // ui
 import { Button, Input, Spinner } from "@plane/ui";
 // helpers
+import { cn } from "@/helpers/common.helper";
 import { checkEmailValidity } from "@/helpers/string.helper";

 type TAuthEmailForm = {
@@ -19,6 +20,7 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
  // states
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [email, setEmail] = useState(defaultEmail);
+  const [isFocused, setFocused] = useState(false);

  const emailError = useMemo(
    () => (email && !checkEmailValidity(email) ? { email: "Email is invalid" } : undefined),
@@ -38,31 +40,36 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
  const isButtonDisabled = email.length === 0 || Boolean(emailError?.email) || isSubmitting;

  return (
-    <form onSubmit={handleFormSubmit} className="mt-8 space-y-4">
+    <form onSubmit={handleFormSubmit} className="mt-5 space-y-4">
      <div className="space-y-1">
        <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="email">
          Email
        </label>
-        <div className="relative flex items-center rounded-md bg-onboarding-background-200">
+        <div
+          className={cn(
+            `relative flex items-center rounded-md bg-onboarding-background-200 border`,
+            !isFocused && Boolean(emailError?.email) ? `border-red-500` : `border-onboarding-border-100`
+          )}
+        >
          <Input
            id="email"
            name="email"
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
-            hasError={Boolean(emailError?.email)}
            placeholder="name@company.com"
-            className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
+            className={`disable-autofill-style h-[46px] w-full placeholder:text-onboarding-text-400 autofill:bg-red-500 border-0 focus:bg-none active:bg-transparent`}
+            onFocus={() => setFocused(true)}
+            onBlur={() => setFocused(false)}
            autoFocus
          />
          {email.length > 0 && (
-            <XCircle
-              className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
-              onClick={() => setEmail("")}
-            />
+            <div className="flex-shrink-0 h-5 w-5 mr-2 bg-onboarding-background-200 hover:cursor-pointer">
+              <XCircle className="h-5 w-5 stroke-custom-text-400" onClick={() => setEmail("")} />
+            </div>
          )}
        </div>
-        {emailError?.email && (
+        {emailError?.email && !isFocused && (
          <p className="flex items-center gap-1 text-xs text-red-600 px-0.5">
            <CircleAlert height={12} width={12} />
            {emailError.email}
--- a/web/components/account/auth-forms/password.tsx
+++ b/web/components/account/auth-forms/password.tsx
@@ -14,15 +14,17 @@ import { EAuthModes, EAuthSteps } from "@/helpers/authentication.helper";
 import { API_BASE_URL } from "@/helpers/common.helper";
 import { getPasswordStrength } from "@/helpers/password.helper";
 // hooks
-import { useEventTracker, useInstance } from "@/hooks/store";
+import { useEventTracker } from "@/hooks/store";
 // services
 import { AuthService } from "@/services/auth.service";

 type Props = {
  email: string;
+  isPasswordAutoset: boolean;
+  isSMTPConfigured: boolean;
  mode: EAuthModes;
-  handleStepChange: (step: EAuthSteps) => void;
  handleEmailClear: () => void;
+  handleAuthStep: (step: EAuthSteps) => void;
 };

 type TPasswordFormValues = {
@@ -39,9 +41,8 @@ const defaultValues: TPasswordFormValues = {
 const authService = new AuthService();

 export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
-  const { email, handleStepChange, handleEmailClear, mode } = props;
+  const { email, isSMTPConfigured, handleAuthStep, handleEmailClear, mode } = props;
  // hooks
-  const { instance } = useInstance();
  const { captureEvent } = useEventTracker();
  // states
  const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
@@ -56,9 +57,6 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
  const handleShowPassword = (key: keyof typeof showPassword) =>
    setShowPassword((prev) => ({ ...prev, [key]: !prev[key] }));

-  // derived values
-  const isSmtpConfigured = instance?.config?.is_smtp_configured;
-
  const handleFormChange = (key: keyof TPasswordFormValues, value: string) =>
    setPasswordFormData((prev) => ({ ...prev, [key]: value }));

@@ -68,13 +66,13 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
  }, [csrfToken]);

  const redirectToUniqueCodeSignIn = async () => {
-    handleStepChange(EAuthSteps.UNIQUE_CODE);
+    handleAuthStep(EAuthSteps.UNIQUE_CODE);
  };

  const passwordSupport =
    mode === EAuthModes.SIGN_IN ? (
-      <div className="mt-2 w-full pb-3">
-        {isSmtpConfigured ? (
+      <div className="w-full">
+        {isSMTPConfigured ? (
          <Link
            onClick={() => captureEvent(FORGOT_PASSWORD)}
            href={`/accounts/forgot-password?email=${email}`}
@@ -87,7 +85,10 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
        )}
      </div>
    ) : (
-      isPasswordInputFocused && <PasswordStrengthMeter password={passwordFormData.password} />
+      passwordFormData.password.length > 0 &&
+      (getPasswordStrength(passwordFormData.password) < 3 || isPasswordInputFocused) && (
+        <PasswordStrengthMeter password={passwordFormData.password} />
+      )
    );

  const isButtonDisabled = useMemo(
@@ -112,11 +113,14 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
      onError={() => setIsSubmitting(false)}
    >
      <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
+      <input type="hidden" value={passwordFormData.email} name="email" />
      <div className="space-y-1">
-        <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="email">
+        <label className="text-sm font-medium text-onboarding-text-300" htmlFor="email">
          Email
        </label>
-        <div className="relative flex items-center rounded-md bg-onboarding-background-200">
+        <div
+          className={`relative flex items-center rounded-md bg-onboarding-background-200 border border-onboarding-border-100`}
+        >
          <Input
            id="email"
            name="email"
@@ -124,18 +128,17 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
            value={passwordFormData.email}
            onChange={(e) => handleFormChange("email", e.target.value)}
            placeholder="name@company.com"
-            className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
+            className={`disable-autofill-style h-[46px] w-full placeholder:text-onboarding-text-400 border-0`}
            disabled
          />
          {passwordFormData.email.length > 0 && (
-            <XCircle
-              className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
-              onClick={handleEmailClear}
-            />
+            <div className="flex-shrink-0 h-5 w-5 mr-2 bg-onboarding-background-200 hover:cursor-pointer">
+              <XCircle className="h-5 w-5 stroke-custom-text-400" onClick={handleEmailClear} />
+            </div>
          )}
        </div>
-        <input type="hidden" value={passwordFormData.email} name="email" />
      </div>
+
      <div className="space-y-1">
        <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="password">
          {mode === EAuthModes.SIGN_IN ? "Password" : "Set a password"}
@@ -147,7 +150,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
            value={passwordFormData.password}
            onChange={(e) => handleFormChange("password", e.target.value)}
            placeholder="Enter password"
-            className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+            className="disable-autofill-style h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
            onFocus={() => setIsPasswordInputFocused(true)}
            onBlur={() => setIsPasswordInputFocused(false)}
            autoFocus
@@ -166,6 +169,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
        </div>
        {passwordSupport}
      </div>
+
      {mode === EAuthModes.SIGN_UP && (
        <div className="space-y-1">
          <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
@@ -178,7 +182,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
              value={passwordFormData.confirm_password}
              onChange={(e) => handleFormChange("confirm_password", e.target.value)}
              placeholder="Confirm password"
-              className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+              className="disable-autofill-style h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
            />
            {showPassword?.retypePassword ? (
              <EyeOff
@@ -197,19 +201,20 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
          )}
        </div>
      )}
+
      <div className="space-y-2.5">
        {mode === EAuthModes.SIGN_IN ? (
          <>
            <Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
              {isSubmitting ? (
                <Spinner height="20px" width="20px" />
-              ) : isSmtpConfigured ? (
+              ) : isSMTPConfigured ? (
                "Continue"
              ) : (
                "Go to workspace"
              )}
            </Button>
-            {instance && isSmtpConfigured && (
+            {isSMTPConfigured && (
              <Button
                type="button"
                onClick={redirectToUniqueCodeSignIn}
--- a/web/components/account/auth-forms/unique-code.tsx
+++ b/web/components/account/auth-forms/unique-code.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { CircleCheck, XCircle } from "lucide-react";
-import { IEmailCheckData } from "@plane/types";
-import { Button, Input, Spinner, TOAST_TYPE, setToast } from "@plane/ui";
+import { Button, Input, Spinner } from "@plane/ui";
 // helpers
 import { EAuthModes } from "@/helpers/authentication.helper";
 import { API_BASE_URL } from "@/helpers/common.helper";
@@ -10,11 +9,14 @@ import useTimer from "@/hooks/use-timer";
 // services
 import { AuthService } from "@/services/auth.service";

-type Props = {
+// services
+const authService = new AuthService();
+
+type TAuthUniqueCodeForm = {
+  mode: EAuthModes;
  email: string;
  handleEmailClear: () => void;
-  submitButtonText: string;
-  mode: EAuthModes;
+  generateEmailUniqueCode: (email: string) => Promise<{ code: string } | undefined>;
 };

 type TUniqueCodeFormValues = {
@@ -27,55 +29,35 @@ const defaultValues: TUniqueCodeFormValues = {
  code: "",
 };

-// services
-const authService = new AuthService();
-
-export const AuthUniqueCodeForm: React.FC<Props> = (props) => {
-  const { email, handleEmailClear, submitButtonText, mode } = props;
+export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
+  const { mode, email, handleEmailClear, generateEmailUniqueCode } = props;
+  // hooks
+  // const { captureEvent } = useEventTracker();
+  // derived values
+  const defaultResetTimerValue = 5;
  // states
  const [uniqueCodeFormData, setUniqueCodeFormData] = useState<TUniqueCodeFormValues>({ ...defaultValues, email });
  const [isRequestingNewCode, setIsRequestingNewCode] = useState(false);
  const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
  const [isSubmitting, setIsSubmitting] = useState(false);
-  // store hooks
-  // const { captureEvent } = useEventTracker();
  // timer
-  const { timer: resendTimerCode, setTimer: setResendCodeTimer } = useTimer(30);
+  const { timer: resendTimerCode, setTimer: setResendCodeTimer } = useTimer(0);

  const handleFormChange = (key: keyof TUniqueCodeFormValues, value: string) =>
    setUniqueCodeFormData((prev) => ({ ...prev, [key]: value }));

-  const handleSendNewCode = async (email: string) => {
-    const payload: IEmailCheckData = {
-      email,
-    };
-
-    await authService
-      .generateUniqueCode(payload)
-      .then(() => {
-        setResendCodeTimer(30);
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Success!",
-          message: "A new unique code has been sent to your email.",
-        });
-        handleFormChange("code", "");
-      })
-      .catch((err) =>
-        setToast({
-          type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: err?.error ?? "Something went wrong while generating unique code. Please try again.",
-        })
-      );
-  };
-
-  const handleRequestNewCode = async (email: string) => {
-    setIsRequestingNewCode(true);
-
-    await handleSendNewCode(email)
-      .then(() => setResendCodeTimer(30))
-      .finally(() => setIsRequestingNewCode(false));
+  const generateNewCode = async (email: string) => {
+    try {
+      setIsRequestingNewCode(true);
+      const uniqueCode = await generateEmailUniqueCode(email);
+      setResendCodeTimer(defaultResetTimerValue);
+      handleFormChange("code", uniqueCode?.code || "");
+      setIsRequestingNewCode(false);
+    } catch {
+      setResendCodeTimer(0);
+      console.error("Error while requesting new code");
+      setIsRequestingNewCode(false);
+    }
  };

  useEffect(() => {
@@ -83,11 +65,6 @@ export const AuthUniqueCodeForm: React.FC<Props> = (props) => {
      authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
  }, [csrfToken]);

-  useEffect(() => {
-    handleRequestNewCode(email);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
  const isRequestNewCodeDisabled = isRequestingNewCode || resendTimerCode > 0;
  const isButtonDisabled = isRequestingNewCode || !uniqueCodeFormData.code || isSubmitting;

@@ -100,11 +77,14 @@ export const AuthUniqueCodeForm: React.FC<Props> = (props) => {
      onError={() => setIsSubmitting(false)}
    >
      <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
+      <input type="hidden" value={uniqueCodeFormData.email} name="email" />
      <div className="space-y-1">
        <label className="text-sm font-medium text-onboarding-text-300" htmlFor="email">
          Email
        </label>
-        <div className="relative flex items-center rounded-md bg-onboarding-background-200">
+        <div
+          className={`relative flex items-center rounded-md bg-onboarding-background-200 border border-onboarding-border-100`}
+        >
          <Input
            id="email"
            name="email"
@@ -112,18 +92,17 @@ export const AuthUniqueCodeForm: React.FC<Props> = (props) => {
            value={uniqueCodeFormData.email}
            onChange={(e) => handleFormChange("email", e.target.value)}
            placeholder="name@company.com"
-            className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
+            className={`disable-autofill-style h-[46px] w-full placeholder:text-onboarding-text-400 border-0`}
            disabled
          />
          {uniqueCodeFormData.email.length > 0 && (
-            <XCircle
-              className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
-              onClick={handleEmailClear}
-            />
+            <div className="flex-shrink-0 h-5 w-5 mr-2 bg-onboarding-background-200 hover:cursor-pointer">
+              <XCircle className="h-5 w-5 stroke-custom-text-400" onClick={handleEmailClear} />
+            </div>
          )}
-          <input type="hidden" value={uniqueCodeFormData.email} name="email" />
        </div>
      </div>
+
      <div className="space-y-1">
        <label className="text-sm font-medium text-onboarding-text-300" htmlFor="code">
          Unique code
@@ -132,22 +111,18 @@ export const AuthUniqueCodeForm: React.FC<Props> = (props) => {
          name="code"
          value={uniqueCodeFormData.code}
          onChange={(e) => handleFormChange("code", e.target.value)}
-          // FIXME:
-          // hasError={Boolean(errors.code)}
          placeholder="gets-sets-flys"
-          className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+          className="disable-autofill-style h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
          autoFocus
        />
-        {/* )}
-          /> */}
-        <div className="flex w-full items-center justify-between px-1 text-xs">
+        <div className="flex w-full items-center justify-between px-1 text-xs pt-1">
          <p className="flex items-center gap-1 font-medium text-green-700">
            <CircleCheck height={12} width={12} />
            Paste the code sent to your email
          </p>
          <button
            type="button"
-            onClick={() => handleRequestNewCode(uniqueCodeFormData.email)}
+            onClick={() => generateNewCode(uniqueCodeFormData.email)}
            className={`${
              isRequestNewCodeDisabled
                ? "text-onboarding-text-400"
@@ -163,15 +138,12 @@ export const AuthUniqueCodeForm: React.FC<Props> = (props) => {
          </button>
        </div>
      </div>
-      <Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
-        {isRequestingNewCode ? (
-          "Sending code"
-        ) : isSubmitting ? (
-          <Spinner height="20px" width="20px" />
-        ) : (
-          submitButtonText
-        )}
-      </Button>
+
+      <div className="space-y-2.5">
+        <Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
+          {isRequestingNewCode ? "Sending code" : isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
+        </Button>
+      </div>
    </form>
  );
 };
--- a/web/components/account/password-strength-meter.tsx
+++ b/web/components/account/password-strength-meter.tsx
@@ -24,9 +24,9 @@ export const PasswordStrengthMeter: React.FC<Props> = (props: Props) => {
    text = "Password is too short";
    textColor = `text-[#DC3E42]`;
  } else if (strength < 3) {
-    bars = [`bg-[#FFBA18]`, `bg-[#FFBA18]`, `bg-[#F0F0F3]`];
+    bars = [`bg-[#DC3E42]`, `bg-[#F0F0F3]`, `bg-[#F0F0F3]`];
    text = "Password is weak";
-    textColor = `text-[#FFBA18]`;
+    textColor = `text-[#F0F0F3]`;
  } else {
    bars = [`bg-[#3E9B4F]`, `bg-[#3E9B4F]`, `bg-[#3E9B4F]`];
    text = "Password is strong";
--- a/web/components/onboarding/create-workspace.tsx
+++ b/web/components/onboarding/create-workspace.tsx
@@ -148,7 +148,10 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
      </div>
      <form className="w-full mx-auto mt-2 space-y-4" onSubmit={handleSubmit(handleCreateWorkspace)}>
        <div className="space-y-1">
-          <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="name">
+          <label
+            className="text-sm text-onboarding-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+            htmlFor="name"
+          >
            Workspace name
          </label>
          <Controller
@@ -187,7 +190,10 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
          {errors.name && <span className="text-sm text-red-500">{errors.name.message}</span>}
        </div>
        <div className="space-y-1">
-          <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="slug">
+          <label
+            className="text-sm text-onboarding-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+            htmlFor="slug"
+          >
            Workspace URL
          </label>
          <Controller
@@ -224,7 +230,10 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
        </div>
        <hr className="w-full border-onboarding-border-100" />
        <div className="space-y-1">
-          <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="organization_size">
+          <label
+            className="text-sm text-onboarding-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+            htmlFor="organization_size"
+          >
            Company size
          </label>
          <div className="w-full">
--- a/web/components/onboarding/invite-members.tsx
+++ b/web/components/onboarding/invite-members.tsx
@@ -157,6 +157,7 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = (props) => {
                hasError={Boolean(errors.emails?.[index]?.email)}
                placeholder={placeholderEmails[index % placeholderEmails.length]}
                className="w-full border-onboarding-border-100 text-xs placeholder:text-onboarding-text-400 sm:text-sm"
+                autoComplete="off"
              />
            )}
          />
--- a/web/components/onboarding/profile-setup.tsx
+++ b/web/components/onboarding/profile-setup.tsx
@@ -333,7 +333,10 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
                </div>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <div className="space-y-1">
-                    <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="first_name">
+                    <label
+                      className="text-sm text-onboarding-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+                      htmlFor="first_name"
+                    >
                      First name
                    </label>
                    <Controller
@@ -364,7 +367,10 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
                    {errors.first_name && <span className="text-sm text-red-500">{errors.first_name.message}</span>}
                  </div>
                  <div className="space-y-1">
-                    <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="last_name">
+                    <label
+                      className="text-sm text-onboarding-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+                      htmlFor="last_name"
+                    >
                      Last name
                    </label>
                    <Controller
@@ -485,7 +491,10 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
            {profileSetupStep !== EProfileSetupSteps.USER_DETAILS && (
              <>
                <div className="space-y-1">
-                  <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="role">
+                  <label
+                    className="text-sm text-onboarding-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+                    htmlFor="role"
+                  >
                    What role are you working on? Choose one.
                  </label>
                  <Controller
@@ -513,7 +522,10 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
                  {errors.role && <span className="text-sm text-red-500">{errors.role.message}</span>}
                </div>
                <div className="space-y-1">
-                  <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="use_case">
+                  <label
+                    className="text-sm text-onboarding-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+                    htmlFor="use_case"
+                  >
                    What is your domain expertise? Choose one.
                  </label>
                  <Controller
--- a/web/helpers/authentication.helper.tsx
+++ b/web/helpers/authentication.helper.tsx
@@ -22,7 +22,6 @@ export enum EAuthSteps {

 export enum EErrorAlertType {
  BANNER_ALERT = "BANNER_ALERT",
-  TOAST_ALERT = "TOAST_ALERT",
  INLINE_FIRST_NAME = "INLINE_FIRST_NAME",
  INLINE_EMAIL = "INLINE_EMAIL",
  INLINE_PASSWORD = "INLINE_PASSWORD",
@@ -32,42 +31,52 @@ export enum EErrorAlertType {
 export enum EAuthenticationErrorCodes {
  // Global
  INSTANCE_NOT_CONFIGURED = "5000",
-  SIGNUP_DISABLED = "5001",
-  INVALID_PASSWORD = "5002", // Password strength validation
-  SMTP_NOT_CONFIGURED = "5007",
-  // email check
-  INVALID_EMAIL = "5012",
-  EMAIL_REQUIRED = "5013",
+  INVALID_EMAIL = "5005",
+  EMAIL_REQUIRED = "5010",
+  SIGNUP_DISABLED = "5015",
+  // Password strength
+  INVALID_PASSWORD = "5020",
+  SMTP_NOT_CONFIGURED = "5025",
  // Sign Up
-  USER_ALREADY_EXIST = "5003",
-  REQUIRED_EMAIL_PASSWORD_SIGN_UP = "5015",
-  AUTHENTICATION_FAILED_SIGN_UP = "5006",
-  INVALID_EMAIL_SIGN_UP = "5017",
-  MAGIC_SIGN_UP_EMAIL_CODE_REQUIRED = "5023",
-  INVALID_EMAIL_MAGIC_SIGN_UP = "5019",
+  USER_ALREADY_EXIST = "5030",
+  AUTHENTICATION_FAILED_SIGN_UP = "5035",
+  REQUIRED_EMAIL_PASSWORD_SIGN_UP = "5040",
+  INVALID_EMAIL_SIGN_UP = "5045",
+  INVALID_EMAIL_MAGIC_SIGN_UP = "5050",
+  MAGIC_SIGN_UP_EMAIL_CODE_REQUIRED = "5055",
  // Sign In
-  USER_DOES_NOT_EXIST = "5004",
-  REQUIRED_EMAIL_PASSWORD_SIGN_IN = "5014",
-  AUTHENTICATION_FAILED_SIGN_IN = "5005",
-  INVALID_EMAIL_SIGN_IN = "5016",
-  MAGIC_SIGN_IN_EMAIL_CODE_REQUIRED = "5022",
-  INVALID_EMAIL_MAGIC_SIGN_IN = "5018",
-  // Both Sign in and Sign up
-  INVALID_MAGIC_CODE = "5008",
-  EXPIRED_MAGIC_CODE = "5009",
+  USER_DOES_NOT_EXIST = "5060",
+  AUTHENTICATION_FAILED_SIGN_IN = "5065",
+  REQUIRED_EMAIL_PASSWORD_SIGN_IN = "5070",
+  INVALID_EMAIL_SIGN_IN = "5075",
+  INVALID_EMAIL_MAGIC_SIGN_IN = "5080",
+  MAGIC_SIGN_IN_EMAIL_CODE_REQUIRED = "5085",
+  // Both Sign in and Sign up for magic
+  INVALID_MAGIC_CODE = "5090",
+  EXPIRED_MAGIC_CODE = "5095",
+  EMAIL_CODE_ATTEMPT_EXHAUSTED = "5100",
  // Oauth
-  GOOGLE_NOT_CONFIGURED = "5010",
-  GITHUB_NOT_CONFIGURED = "5011",
-  GOOGLE_OAUTH_PROVIDER_ERROR = "5021",
-  GITHUB_OAUTH_PROVIDER_ERROR = "5020",
+  GOOGLE_NOT_CONFIGURED = "5105",
+  GITHUB_NOT_CONFIGURED = "5110",
+  GOOGLE_OAUTH_PROVIDER_ERROR = "5115",
+  GITHUB_OAUTH_PROVIDER_ERROR = "5120",
  // Reset Password
-  INVALID_PASSWORD_TOKEN = "5024",
-  EXPIRED_PASSWORD_TOKEN = "5025",
+  INVALID_PASSWORD_TOKEN = "5125",
+  EXPIRED_PASSWORD_TOKEN = "5130",
  // Change password
-  INCORRECT_OLD_PASSWORD = "5026",
-  INVALID_NEW_PASSWORD = "5027",
-  // set password
-  PASSWORD_ALREADY_SET = "5028", // used in the onboarding and set password page
+  INCORRECT_OLD_PASSWORD = "5135",
+  INVALID_NEW_PASSWORD = "5140",
+  // set passowrd
+  PASSWORD_ALREADY_SET = "5145",
+  // Admin
+  ADMIN_ALREADY_EXIST = "5150",
+  REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME = "5155",
+  INVALID_ADMIN_EMAIL = "5160",
+  INVALID_ADMIN_PASSWORD = "5165",
+  REQUIRED_ADMIN_EMAIL_PASSWORD = "5170",
+  ADMIN_AUTHENTICATION_FAILED = "5175",
+  ADMIN_USER_ALREADY_EXIST = "5180",
+  ADMIN_USER_DOES_NOT_EXIST = "5185",
 }

 export type TAuthErrorInfo = {
@@ -116,7 +125,7 @@ const errorCodeMessages: {
        Your account is already registered.&nbsp;
        <Link
          className="underline underline-offset-4 font-medium hover:font-bold transition-all"
-          href={`/accounts/sign-in${email ? `?email=${email}` : ``}`}
+          href={`/sign-in${email ? `?email=${email}` : ``}`}
        >
          Sign In
        </Link>
@@ -191,6 +200,10 @@ const errorCodeMessages: {
    title: `Expired magic code`,
    message: () => `Expired magic code. Please try again.`,
  },
+  [EAuthenticationErrorCodes.EMAIL_CODE_ATTEMPT_EXHAUSTED]: {
+    title: `Expired magic code`,
+    message: () => `Expired magic code. Please try again.`,
+  },

  // Oauth
  [EAuthenticationErrorCodes.GOOGLE_NOT_CONFIGURED]: {
@@ -235,27 +248,84 @@ const errorCodeMessages: {
    title: `Password already set`,
    message: () => `Password already set. Please try again.`,
  },
+
+  // admin
+  [EAuthenticationErrorCodes.ADMIN_ALREADY_EXIST]: {
+    title: `Admin already exists`,
+    message: () => `Admin already exists. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME]: {
+    title: `Email, password and first name required`,
+    message: () => `Email, password and first name required. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.INVALID_ADMIN_EMAIL]: {
+    title: `Invalid admin email`,
+    message: () => `Invalid admin email. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.INVALID_ADMIN_PASSWORD]: {
+    title: `Invalid admin password`,
+    message: () => `Invalid admin password. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD]: {
+    title: `Email and password required`,
+    message: () => `Email and password required. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.ADMIN_AUTHENTICATION_FAILED]: {
+    title: `Authentication failed`,
+    message: () => `Authentication failed. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.ADMIN_USER_ALREADY_EXIST]: {
+    title: `Admin user already exists`,
+    message: () => (
+      <div>
+        Admin user already exists.&nbsp;
+        <Link className="underline underline-offset-4 font-medium hover:font-bold transition-all" href={`/admin`}>
+          Sign In
+        </Link>
+        &nbsp;now.
+      </div>
+    ),
+  },
+  [EAuthenticationErrorCodes.ADMIN_USER_DOES_NOT_EXIST]: {
+    title: `Admin user does not exist`,
+    message: () => (
+      <div>
+        Admin user does not exist.&nbsp;
+        <Link className="underline underline-offset-4 font-medium hover:font-bold transition-all" href={`/admin`}>
+          Sign In
+        </Link>
+        &nbsp;now.
+      </div>
+    ),
+  },
 };

 export const authErrorHandler = (
  errorCode: EAuthenticationErrorCodes,
  email?: string | undefined
 ): TAuthErrorInfo | undefined => {
-  const toastAlertErrorCodes = [
+  const bannerAlertErrorCodes = [
+    EAuthenticationErrorCodes.INSTANCE_NOT_CONFIGURED,
+    EAuthenticationErrorCodes.INVALID_EMAIL,
+    EAuthenticationErrorCodes.EMAIL_REQUIRED,
    EAuthenticationErrorCodes.SIGNUP_DISABLED,
    EAuthenticationErrorCodes.INVALID_PASSWORD,
    EAuthenticationErrorCodes.SMTP_NOT_CONFIGURED,
-    EAuthenticationErrorCodes.INVALID_EMAIL,
-    EAuthenticationErrorCodes.EMAIL_REQUIRED,
+    EAuthenticationErrorCodes.USER_ALREADY_EXIST,
    EAuthenticationErrorCodes.AUTHENTICATION_FAILED_SIGN_UP,
+    EAuthenticationErrorCodes.REQUIRED_EMAIL_PASSWORD_SIGN_UP,
    EAuthenticationErrorCodes.INVALID_EMAIL_SIGN_UP,
-    EAuthenticationErrorCodes.MAGIC_SIGN_UP_EMAIL_CODE_REQUIRED,
    EAuthenticationErrorCodes.INVALID_EMAIL_MAGIC_SIGN_UP,
+    EAuthenticationErrorCodes.MAGIC_SIGN_UP_EMAIL_CODE_REQUIRED,
+    EAuthenticationErrorCodes.USER_DOES_NOT_EXIST,
    EAuthenticationErrorCodes.AUTHENTICATION_FAILED_SIGN_IN,
+    EAuthenticationErrorCodes.REQUIRED_EMAIL_PASSWORD_SIGN_IN,
    EAuthenticationErrorCodes.INVALID_EMAIL_SIGN_IN,
    EAuthenticationErrorCodes.INVALID_EMAIL_MAGIC_SIGN_IN,
+    EAuthenticationErrorCodes.MAGIC_SIGN_IN_EMAIL_CODE_REQUIRED,
    EAuthenticationErrorCodes.INVALID_MAGIC_CODE,
    EAuthenticationErrorCodes.EXPIRED_MAGIC_CODE,
+    EAuthenticationErrorCodes.EMAIL_CODE_ATTEMPT_EXHAUSTED,
    EAuthenticationErrorCodes.GOOGLE_NOT_CONFIGURED,
    EAuthenticationErrorCodes.GITHUB_NOT_CONFIGURED,
    EAuthenticationErrorCodes.GOOGLE_OAUTH_PROVIDER_ERROR,
@@ -265,23 +335,15 @@ export const authErrorHandler = (
    EAuthenticationErrorCodes.INCORRECT_OLD_PASSWORD,
    EAuthenticationErrorCodes.INVALID_NEW_PASSWORD,
    EAuthenticationErrorCodes.PASSWORD_ALREADY_SET,
+    EAuthenticationErrorCodes.ADMIN_ALREADY_EXIST,
+    EAuthenticationErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME,
+    EAuthenticationErrorCodes.INVALID_ADMIN_EMAIL,
+    EAuthenticationErrorCodes.INVALID_ADMIN_PASSWORD,
+    EAuthenticationErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD,
+    EAuthenticationErrorCodes.ADMIN_AUTHENTICATION_FAILED,
+    EAuthenticationErrorCodes.ADMIN_USER_ALREADY_EXIST,
+    EAuthenticationErrorCodes.ADMIN_USER_DOES_NOT_EXIST,
  ];
-  const bannerAlertErrorCodes = [
-    EAuthenticationErrorCodes.INSTANCE_NOT_CONFIGURED,
-    EAuthenticationErrorCodes.USER_ALREADY_EXIST,
-    EAuthenticationErrorCodes.USER_DOES_NOT_EXIST,
-    EAuthenticationErrorCodes.REQUIRED_EMAIL_PASSWORD_SIGN_UP,
-    EAuthenticationErrorCodes.REQUIRED_EMAIL_PASSWORD_SIGN_IN,
-    EAuthenticationErrorCodes.MAGIC_SIGN_IN_EMAIL_CODE_REQUIRED,
-  ];
-
-  if (toastAlertErrorCodes.includes(errorCode))
-    return {
-      type: EErrorAlertType.TOAST_ALERT,
-      code: errorCode,
-      title: errorCodeMessages[errorCode]?.title || "Error",
-      message: errorCodeMessages[errorCode]?.message(email) || "Something went wrong. Please try again.",
-    };

  if (bannerAlertErrorCodes.includes(errorCode))
    return {
--- a/web/layouts/auth-layout/workspace-wrapper.tsx
+++ b/web/layouts/auth-layout/workspace-wrapper.tsx
@@ -95,7 +95,7 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
    membership.hasPermissionToCurrentWorkspace === undefined
  ) {
    return (
-      <div className="relative flex h-full w-full flex-col items-center justify-center bg-custom-background-90">
+      <div className="relative flex h-screen w-full flex-col items-center justify-center bg-custom-background-90 ">
        <div className="container relative mx-auto flex h-full w-full flex-col overflow-hidden overflow-y-auto px-5 py-14 md:px-0">
          <div className="relative flex flex-shrink-0 items-center justify-between gap-4">
            <div className="z-10 flex-shrink-0 bg-custom-background-90 py-4">
--- a/web/lib/wrappers/authentication-wrapper.tsx
+++ b/web/lib/wrappers/authentication-wrapper.tsx
@@ -84,7 +84,7 @@ export const AuthenticationWrapper: FC<TAuthenticationWrapper> = observer((props

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

  if (pageType === EPageTypes.SET_PASSWORD) {
    if (!currentUser?.id) {
-      router.push("/accounts/sign-in");
+      router.push("/sign-in");
      return <></>;
    } else {
      if (
@@ -121,7 +121,7 @@ export const AuthenticationWrapper: FC<TAuthenticationWrapper> = observer((props
        return <></>;
      }
    } else {
-      router.push("/accounts/sign-in");
+      router.push("/sign-in");
      return <></>;
    }
  }
--- 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="/accounts/sign-in" className={cn("w-full", getButtonStyling("link-neutral", "lg"))}>
+              <Link href="/sign-in" className={cn("w-full", getButtonStyling("link-neutral", "lg"))}>
                Back to sign in
              </Link>
            </form>
--- a/web/pages/index.tsx
+++ b/web/pages/index.tsx
@@ -48,7 +48,7 @@ const HomePage: NextPageWithLayout = observer(() => {
          <div className="text-center text-sm font-medium text-onboarding-text-300">
            Already have an account?{" "}
            <Link
-              href="/accounts/sign-in"
+              href="/sign-in"
              onClick={() => captureEvent(NAVIGATE_TO_SIGNIN, {})}
              className="font-semibold text-custom-primary-100 hover:underline"
            >
--- a/web/pages/accounts/sign-in.tsx
+++ b/web/pages/accounts/sign-in.tsx
--- a/web/styles/globals.css
+++ b/web/styles/globals.css
@@ -640,4 +640,13 @@ div.web-view-spinner div.bar12 {
 .highlight-with-line {
  border-left: 5px solid rgb(var(--color-primary-100)) !important;
  background: rgb(var(--color-background-80));
-}
+}
+
+/* By applying below class, the autofilled text in form fields will not have the default autofill background color and styles applied by WebKit browsers  */
+
+.disable-autofill-style:-webkit-autofill,
+.disable-autofill-style:-webkit-autofill:hover,
+.disable-autofill-style:-webkit-autofill:focus,
+.disable-autofill-style:-webkit-autofill:active {
+  -webkit-background-clip: text;
+}