base

plane-src/apps/space/components/account/auth-forms/auth-banner.tsx

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Info } from "lucide-react";
+import { CloseIcon } from "@plane/propel/icons";
+// helpers
+import type { TAuthErrorInfo } from "@/helpers/authentication.helper";
+
+type TAuthBanner = {
+  bannerData: TAuthErrorInfo | undefined;
+  handleBannerData?: (bannerData: TAuthErrorInfo | undefined) => void;
+};
+
+export function AuthBanner(props: TAuthBanner) {
+  const { bannerData, handleBannerData } = props;
+
+  if (!bannerData) return <></>;
+  return (
+    <div className="relative flex items-center gap-2 rounded-md border border-accent-strong/50 bg-accent-primary/10 p-2">
+      <div className="relative flex h-4 w-4 flex-shrink-0 items-center justify-center">
+        <Info size={16} className="text-accent-primary" />
+      </div>
+      <div className="w-full text-13 font-medium text-accent-primary">{bannerData?.message}</div>
+      <div
+        className="relative ml-auto flex h-6 w-6 cursor-pointer items-center justify-center rounded-xs text-accent-primary/80 transition-all hover:bg-accent-primary/20"
+        onClick={() => handleBannerData && handleBannerData(undefined)}
+      >
+        <CloseIcon className="h-4 w-4 flex-shrink-0" />
+      </div>
+    </div>
+  );
+}

plane-src/apps/space/components/account/auth-forms/auth-header.tsx

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// helpers
+import { EAuthModes } from "@/types/auth";
+
+type TAuthHeader = {
+  authMode: EAuthModes;
+};
+
+type TAuthHeaderContent = {
+  header: string;
+  subHeader: string;
+};
+
+type TAuthHeaderDetails = {
+  [mode in EAuthModes]: TAuthHeaderContent;
+};
+
+const Titles: TAuthHeaderDetails = {
+  [EAuthModes.SIGN_IN]: {
+    header: "Sign in to upvote or comment",
+    subHeader: "Contribute in nudging the features you want to get built.",
+  },
+  [EAuthModes.SIGN_UP]: {
+    header: "View, comment, and do more",
+    subHeader: "Sign up or log in to work with Plane work items and Pages.",
+  },
+};
+
+export function AuthHeader(props: TAuthHeader) {
+  const { authMode } = props;
+
+  const getHeaderSubHeader = (mode: EAuthModes | null): TAuthHeaderContent => {
+    if (mode) {
+      return Titles[mode];
+    }
+
+    return {
+      header: "Comment or react to work items",
+      subHeader: "Use plane to add your valuable inputs to features.",
+    };
+  };
+
+  const { header, subHeader } = getHeaderSubHeader(authMode);
+
+  return (
+    <>
+      <div className="flex flex-col gap-1">
+        <span className="text-20 leading-7 font-semibold text-primary">{header}</span>
+        <span className="text-20 leading-7 font-semibold text-placeholder">{subHeader}</span>
+      </div>
+    </>
+  );
+}

plane-src/apps/space/components/account/auth-forms/auth-root.tsx

@@ -0,0 +1,196 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import { useSearchParams } from "next/navigation";
+// plane imports
+import { SitesAuthService } from "@plane/services";
+import type { IEmailCheckData } from "@plane/types";
+import { OAuthOptions } from "@plane/ui";
+// helpers
+import type { TAuthErrorInfo } from "@/helpers/authentication.helper";
+import { EErrorAlertType, authErrorHandler, EAuthenticationErrorCodes } from "@/helpers/authentication.helper";
+// hooks
+import { useOAuthConfig } from "@/hooks/oauth";
+import { useInstance } from "@/hooks/store/use-instance";
+// types
+import { EAuthModes, EAuthSteps } from "@/types/auth";
+// local imports
+import { TermsAndConditions } from "../terms-and-conditions";
+import { AuthBanner } from "./auth-banner";
+import { AuthHeader } from "./auth-header";
+import { AuthEmailForm } from "./email";
+import { AuthPasswordForm } from "./password";
+import { AuthUniqueCodeForm } from "./unique-code";
+
+const authService = new SitesAuthService();
+
+export const AuthRoot = observer(function AuthRoot() {
+  // router params
+  const searchParams = useSearchParams();
+  const emailParam = searchParams.get("email") || undefined;
+  const error_code = searchParams.get("error_code") || undefined;
+  const nextPath = searchParams.get("next_path") || undefined;
+  // states
+  const [authMode, setAuthMode] = useState<EAuthModes>(EAuthModes.SIGN_UP);
+  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 { config } = useInstance();
+
+  useEffect(() => {
+    if (error_code) {
+      const errorhandler = authErrorHandler(error_code?.toString() as EAuthenticationErrorCodes);
+      if (errorhandler) {
+        if (errorhandler.code === EAuthenticationErrorCodes.AUTHENTICATION_FAILED_SIGN_IN) {
+          setAuthMode(EAuthModes.SIGN_IN);
+          setAuthStep(EAuthSteps.PASSWORD);
+        }
+        if (errorhandler.code === EAuthenticationErrorCodes.AUTHENTICATION_FAILED_SIGN_UP) {
+          setAuthMode(EAuthModes.SIGN_UP);
+          setAuthStep(EAuthSteps.PASSWORD);
+        }
+        if (errorhandler.code === EAuthenticationErrorCodes.PASSWORD_TOO_WEAK) {
+          setAuthMode(EAuthModes.SIGN_UP);
+          setAuthStep(EAuthSteps.PASSWORD);
+        }
+        if (
+          [
+            EAuthenticationErrorCodes.INVALID_MAGIC_CODE_SIGN_IN,
+            EAuthenticationErrorCodes.EXPIRED_MAGIC_CODE_SIGN_IN,
+            EAuthenticationErrorCodes.EMAIL_CODE_ATTEMPT_EXHAUSTED_SIGN_IN,
+          ].includes(errorhandler.code)
+        ) {
+          setAuthMode(EAuthModes.SIGN_IN);
+          setAuthStep(EAuthSteps.UNIQUE_CODE);
+        }
+        if (
+          [
+            EAuthenticationErrorCodes.INVALID_MAGIC_CODE_SIGN_UP,
+            EAuthenticationErrorCodes.EXPIRED_MAGIC_CODE_SIGN_UP,
+            EAuthenticationErrorCodes.EMAIL_CODE_ATTEMPT_EXHAUSTED_SIGN_UP,
+          ].includes(errorhandler.code)
+        ) {
+          setAuthMode(EAuthModes.SIGN_UP);
+          setAuthStep(EAuthSteps.UNIQUE_CODE);
+        }
+        setErrorInfo(errorhandler);
+      }
+    }
+  }, [error_code]);
+
+  const isSMTPConfigured = config?.is_smtp_configured || false;
+  const isMagicLoginEnabled = config?.is_magic_login_enabled || false;
+  const isEmailPasswordEnabled = config?.is_email_password_enabled || false;
+  const oAuthActionText = authMode === EAuthModes.SIGN_UP ? "Sign up" : "Sign in";
+  const { isOAuthEnabled, oAuthOptions } = useOAuthConfig(oAuthActionText);
+
+  // submit handler- email verification
+  const handleEmailVerification = async (data: IEmailCheckData) => {
+    setEmail(data.email);
+
+    await authService
+      .emailCheck(data)
+      .then(async (response) => {
+        let currentAuthMode: EAuthModes = response.existing ? EAuthModes.SIGN_IN : EAuthModes.SIGN_UP;
+        if (response.existing) {
+          currentAuthMode = EAuthModes.SIGN_IN;
+          setAuthMode(() => EAuthModes.SIGN_IN);
+        } else {
+          currentAuthMode = EAuthModes.SIGN_UP;
+          setAuthMode(() => EAuthModes.SIGN_UP);
+        }
+
+        if (currentAuthMode === EAuthModes.SIGN_IN) {
+          if (isSMTPConfigured && isMagicLoginEnabled && response.status === "MAGIC_CODE") {
+            setAuthStep(EAuthSteps.UNIQUE_CODE);
+            generateEmailUniqueCode(data.email);
+          } else if (isEmailPasswordEnabled) {
+            setIsPasswordAutoset(false);
+            setAuthStep(EAuthSteps.PASSWORD);
+          } else {
+            const errorhandler = authErrorHandler("5005" as EAuthenticationErrorCodes);
+            setErrorInfo(errorhandler);
+          }
+        } else {
+          if (isSMTPConfigured && isMagicLoginEnabled && response.status === "MAGIC_CODE") {
+            setAuthStep(EAuthSteps.UNIQUE_CODE);
+            generateEmailUniqueCode(data.email);
+          } else if (isEmailPasswordEnabled) {
+            setAuthStep(EAuthSteps.PASSWORD);
+          } else {
+            const errorhandler = authErrorHandler("5006" as EAuthenticationErrorCodes);
+            setErrorInfo(errorhandler);
+          }
+        }
+        return;
+      })
+      .catch((error) => {
+        const errorhandler = authErrorHandler(error?.error_code?.toString(), data?.email || undefined);
+        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;
+      });
+  };
+
+  return (
+    <div className="mt-10 flex w-full flex-grow flex-col items-center justify-center py-6">
+      <div className="relative flex w-full max-w-[22.5rem] flex-col gap-6">
+        {errorInfo && errorInfo?.type === EErrorAlertType.BANNER_ALERT && (
+          <AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />
+        )}
+        <AuthHeader authMode={authMode} />
+        {isOAuthEnabled && <OAuthOptions options={oAuthOptions} compact={authStep === EAuthSteps.PASSWORD} />}
+
+        {authStep === EAuthSteps.EMAIL && <AuthEmailForm defaultEmail={email} onSubmit={handleEmailVerification} />}
+        {authStep === EAuthSteps.UNIQUE_CODE && (
+          <AuthUniqueCodeForm
+            mode={authMode}
+            email={email}
+            nextPath={nextPath}
+            handleEmailClear={() => {
+              setEmail("");
+              setAuthStep(EAuthSteps.EMAIL);
+            }}
+            generateEmailUniqueCode={generateEmailUniqueCode}
+          />
+        )}
+        {authStep === EAuthSteps.PASSWORD && (
+          <AuthPasswordForm
+            mode={authMode}
+            isPasswordAutoset={isPasswordAutoset}
+            isSMTPConfigured={isSMTPConfigured}
+            email={email}
+            nextPath={nextPath}
+            handleEmailClear={() => {
+              setEmail("");
+              setAuthStep(EAuthSteps.EMAIL);
+            }}
+            handleAuthStep={(step: EAuthSteps) => {
+              if (step === EAuthSteps.UNIQUE_CODE) generateEmailUniqueCode(email);
+              setAuthStep(step);
+            }}
+          />
+        )}
+        <TermsAndConditions isSignUp={authMode === EAuthModes.SIGN_UP ? true : false} />
+      </div>
+    </div>
+  );
+});

plane-src/apps/space/components/account/auth-forms/email.tsx

@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { FormEvent } from "react";
+import { useMemo, useRef, useState } from "react";
+import { observer } from "mobx-react";
+// icons
+import { CircleAlert, XCircle } from "lucide-react";
+// types
+import { Button } from "@plane/propel/button";
+import type { IEmailCheckData } from "@plane/types";
+// ui
+import { Input, Spinner } from "@plane/ui";
+// helpers
+import { cn } from "@plane/utils";
+import { checkEmailValidity } from "@/helpers/string.helper";
+
+type TAuthEmailForm = {
+  defaultEmail: string;
+  onSubmit: (data: IEmailCheckData) => Promise<void>;
+};
+
+export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailForm) {
+  const { onSubmit, defaultEmail } = props;
+  // states
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [email, setEmail] = useState(defaultEmail);
+
+  const emailError = useMemo(
+    () => (email && !checkEmailValidity(email) ? { email: "Email is invalid" } : undefined),
+    [email]
+  );
+
+  const handleFormSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setIsSubmitting(true);
+    const payload: IEmailCheckData = {
+      email: email,
+    };
+    await onSubmit(payload);
+    setIsSubmitting(false);
+  };
+
+  const isButtonDisabled = email.length === 0 || Boolean(emailError?.email) || isSubmitting;
+
+  const [isFocused, setIsFocused] = useState(true);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <form onSubmit={handleFormSubmit} className="mt-5 space-y-4">
+      <div className="space-y-1">
+        <label className="text-13 font-medium text-tertiary" htmlFor="email">
+          Email
+        </label>
+        <div
+          className={cn(
+            `relative flex items-center rounded-md border bg-surface-1`,
+            !isFocused && Boolean(emailError?.email) ? `border-danger-strong` : `border-subtle`
+          )}
+          onFocus={() => {
+            setIsFocused(true);
+          }}
+          onBlur={() => {
+            setIsFocused(false);
+          }}
+        >
+          <Input
+            id="email"
+            name="email"
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="name@company.com"
+            className={`h-10 w-full border-0 disable-autofill-style placeholder:text-placeholder autofill:bg-danger-subtle focus:bg-none active:bg-transparent`}
+            autoComplete="off"
+            autoFocus
+            ref={inputRef}
+          />
+          {email.length > 0 && (
+            <button
+              type="button"
+              aria-label="Clear email"
+              onClick={() => {
+                setEmail("");
+                inputRef.current?.focus();
+              }}
+              tabIndex={-1}
+            >
+              <XCircle className="h-10 w-11 stroke-placeholder px-3 text-11 hover:cursor-pointer" />
+            </button>
+          )}
+        </div>
+        {emailError?.email && !isFocused && (
+          <p className="flex items-center gap-1 px-0.5 text-11 text-danger-primary">
+            <CircleAlert height={12} width={12} />
+            {emailError.email}
+          </p>
+        )}
+      </div>
+      <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
+        {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
+      </Button>
+    </form>
+  );
+});

plane-src/apps/space/components/account/auth-forms/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./auth-root";

plane-src/apps/space/components/account/auth-forms/password.tsx

@@ -0,0 +1,247 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { Eye, EyeOff, XCircle } from "lucide-react";
+// plane imports
+import { API_BASE_URL, E_PASSWORD_STRENGTH } from "@plane/constants";
+import { Button } from "@plane/propel/button";
+import { AuthService } from "@plane/services";
+import { Input, Spinner, PasswordStrengthIndicator } from "@plane/ui";
+import { getPasswordStrength } from "@plane/utils";
+// types
+import { EAuthModes, EAuthSteps } from "@/types/auth";
+
+type Props = {
+  email: string;
+  isPasswordAutoset: boolean;
+  isSMTPConfigured: boolean;
+  mode: EAuthModes;
+  nextPath: string | undefined;
+  handleEmailClear: () => void;
+  handleAuthStep: (step: EAuthSteps) => void;
+};
+
+type TPasswordFormValues = {
+  email: string;
+  password: string;
+  confirm_password?: string;
+};
+
+const defaultValues: TPasswordFormValues = {
+  email: "",
+  password: "",
+};
+
+const authService = new AuthService();
+
+export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props) {
+  const { email, nextPath, isSMTPConfigured, handleAuthStep, handleEmailClear, mode } = props;
+  // ref
+  const formRef = useRef<HTMLFormElement>(null);
+  // states
+  const [csrfPromise, setCsrfPromise] = useState<Promise<{ csrf_token: string }> | undefined>(undefined);
+  const [passwordFormData, setPasswordFormData] = useState<TPasswordFormValues>({ ...defaultValues, email });
+  const [showPassword, setShowPassword] = useState({
+    password: false,
+    retypePassword: false,
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
+  const [isRetryPasswordInputFocused, setIsRetryPasswordInputFocused] = useState(false);
+
+  const handleShowPassword = (key: keyof typeof showPassword) =>
+    setShowPassword((prev) => ({ ...prev, [key]: !prev[key] }));
+
+  const handleFormChange = (key: keyof TPasswordFormValues, value: string) =>
+    setPasswordFormData((prev) => ({ ...prev, [key]: value }));
+
+  useEffect(() => {
+    if (csrfPromise === undefined) {
+      const promise = authService.requestCSRFToken();
+      setCsrfPromise(promise);
+    }
+  }, [csrfPromise]);
+
+  const redirectToUniqueCodeSignIn = async () => {
+    handleAuthStep(EAuthSteps.UNIQUE_CODE);
+  };
+
+  const passwordSupport = passwordFormData.password.length > 0 &&
+    mode === EAuthModes.SIGN_UP &&
+    getPasswordStrength(passwordFormData.password) != E_PASSWORD_STRENGTH.STRENGTH_VALID && (
+      <PasswordStrengthIndicator password={passwordFormData.password} isFocused={isPasswordInputFocused} />
+    );
+
+  const isButtonDisabled = useMemo(
+    () =>
+      !isSubmitting &&
+      !!passwordFormData.password &&
+      (mode === EAuthModes.SIGN_UP
+        ? getPasswordStrength(passwordFormData.password) === E_PASSWORD_STRENGTH.STRENGTH_VALID &&
+          passwordFormData.password === passwordFormData.confirm_password
+        : true)
+        ? false
+        : true,
+    [isSubmitting, mode, passwordFormData.confirm_password, passwordFormData.password]
+  );
+
+  const password = passwordFormData.password ?? "";
+  const confirmPassword = passwordFormData.confirm_password ?? "";
+  const renderPasswordMatchError = !isRetryPasswordInputFocused || confirmPassword.length >= password.length;
+
+  const handleCSRFToken = async () => {
+    if (!formRef || !formRef.current) return;
+    const token = await csrfPromise;
+    if (!token?.csrf_token) return;
+    const csrfElement = formRef.current.querySelector("input[name=csrfmiddlewaretoken]");
+    csrfElement?.setAttribute("value", token?.csrf_token);
+  };
+
+  return (
+    <form
+      ref={formRef}
+      className="mt-5 space-y-4"
+      method="POST"
+      action={`${API_BASE_URL}/auth/spaces/${mode === EAuthModes.SIGN_IN ? "sign-in" : "sign-up"}/`}
+      onSubmit={async (event) => {
+        event.preventDefault();
+        await handleCSRFToken();
+        if (formRef.current) {
+          formRef.current.submit();
+        }
+        setIsSubmitting(true);
+      }}
+      onError={() => setIsSubmitting(false)}
+    >
+      <input type="hidden" name="csrfmiddlewaretoken" />
+      <input type="hidden" value={passwordFormData.email} name="email" />
+      <input type="hidden" value={nextPath} name="next_path" />
+      <div className="space-y-1">
+        <label className="text-13 font-medium text-tertiary" htmlFor="email">
+          Email
+        </label>
+        <div className={`relative flex items-center rounded-md border border-subtle bg-surface-1`}>
+          <Input
+            id="email"
+            name="email"
+            type="email"
+            value={passwordFormData.email}
+            onChange={(e) => handleFormChange("email", e.target.value)}
+            placeholder="name@company.com"
+            className={`h-10 w-full border-0 disable-autofill-style placeholder:text-placeholder`}
+            disabled
+          />
+          {passwordFormData.email.length > 0 && (
+            <XCircle
+              className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
+              onClick={handleEmailClear}
+            />
+          )}
+        </div>
+      </div>
+
+      <div className="space-y-1">
+        <label className="text-13 font-medium text-tertiary" htmlFor="password">
+          {mode === EAuthModes.SIGN_IN ? "Password" : "Set a password"}
+        </label>
+        <div className="relative flex items-center rounded-md bg-surface-1">
+          <Input
+            type={showPassword?.password ? "text" : "password"}
+            name="password"
+            value={passwordFormData.password}
+            onChange={(e) => handleFormChange("password", e.target.value)}
+            placeholder="Enter password"
+            className="h-10 w-full border border-subtle !bg-surface-1 pr-12 disable-autofill-style placeholder:text-placeholder"
+            onFocus={() => setIsPasswordInputFocused(true)}
+            onBlur={() => setIsPasswordInputFocused(false)}
+            autoComplete="off"
+            autoFocus
+          />
+          {showPassword?.password ? (
+            <EyeOff
+              className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
+              onClick={() => handleShowPassword("password")}
+            />
+          ) : (
+            <Eye
+              className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
+              onClick={() => handleShowPassword("password")}
+            />
+          )}
+        </div>
+        {passwordSupport}
+      </div>
+
+      {mode === EAuthModes.SIGN_UP && (
+        <div className="space-y-1">
+          <label className="text-13 font-medium text-tertiary" htmlFor="confirm_password">
+            Confirm password
+          </label>
+          <div className="relative flex items-center rounded-md bg-surface-1">
+            <Input
+              type={showPassword?.retypePassword ? "text" : "password"}
+              name="confirm_password"
+              value={passwordFormData.confirm_password}
+              onChange={(e) => handleFormChange("confirm_password", e.target.value)}
+              placeholder="Confirm password"
+              className="h-10 w-full border border-subtle !bg-surface-1 pr-12 disable-autofill-style placeholder:text-placeholder"
+              onFocus={() => setIsRetryPasswordInputFocused(true)}
+              onBlur={() => setIsRetryPasswordInputFocused(false)}
+              autoComplete="off"
+            />
+            {showPassword?.retypePassword ? (
+              <EyeOff
+                className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
+                onClick={() => handleShowPassword("retypePassword")}
+              />
+            ) : (
+              <Eye
+                className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
+                onClick={() => handleShowPassword("retypePassword")}
+              />
+            )}
+          </div>
+          {!!passwordFormData.confirm_password &&
+            passwordFormData.password !== passwordFormData.confirm_password &&
+            renderPasswordMatchError && <span className="text-13 text-danger-primary">Passwords don{"'"}t match</span>}
+        </div>
+      )}
+
+      <div className="space-y-2.5">
+        {mode === EAuthModes.SIGN_IN ? (
+          <>
+            <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
+              {isSubmitting ? (
+                <Spinner height="20px" width="20px" />
+              ) : isSMTPConfigured ? (
+                "Continue"
+              ) : (
+                "Go to workspace"
+              )}
+            </Button>
+            {isSMTPConfigured && (
+              <Button
+                type="button"
+                onClick={redirectToUniqueCodeSignIn}
+                variant="secondary"
+                className="w-full"
+                size="xl"
+              >
+                Sign in with unique code
+              </Button>
+            )}
+          </>
+        ) : (
+          <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
+            {isSubmitting ? <Spinner height="20px" width="20px" /> : "Create account"}
+          </Button>
+        )}
+      </div>
+    </form>
+  );
+});

plane-src/apps/space/components/account/auth-forms/unique-code.tsx

@@ -0,0 +1,157 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useEffect, useState } from "react";
+import { CircleCheck, XCircle } from "lucide-react";
+// plane imports
+import { API_BASE_URL } from "@plane/constants";
+import { Button } from "@plane/propel/button";
+import { AuthService } from "@plane/services";
+import { Input, Spinner } from "@plane/ui";
+// hooks
+import useTimer from "@/hooks/use-timer";
+// types
+import { EAuthModes } from "@/types/auth";
+
+// services
+const authService = new AuthService();
+
+type TAuthUniqueCodeForm = {
+  mode: EAuthModes;
+  email: string;
+  nextPath: string | undefined;
+  handleEmailClear: () => void;
+  generateEmailUniqueCode: (email: string) => Promise<{ code: string } | undefined>;
+};
+
+type TUniqueCodeFormValues = {
+  email: string;
+  code: string;
+};
+
+const defaultValues: TUniqueCodeFormValues = {
+  email: "",
+  code: "",
+};
+
+export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
+  const { mode, email, nextPath, handleEmailClear, generateEmailUniqueCode } = props;
+  // 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);
+  // timer
+  const { timer: resendTimerCode, setTimer: setResendCodeTimer } = useTimer(0);
+
+  const handleFormChange = (key: keyof TUniqueCodeFormValues, value: string) =>
+    setUniqueCodeFormData((prev) => ({ ...prev, [key]: value }));
+
+  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(() => {
+    if (csrfToken === undefined)
+      authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
+  }, [csrfToken]);
+
+  const isRequestNewCodeDisabled = isRequestingNewCode || resendTimerCode > 0;
+  const isButtonDisabled = isRequestingNewCode || !uniqueCodeFormData.code || isSubmitting;
+
+  return (
+    <form
+      className="mt-5 space-y-4"
+      method="POST"
+      action={`${API_BASE_URL}/auth/spaces/${mode === EAuthModes.SIGN_IN ? "magic-sign-in" : "magic-sign-up"}/`}
+      onSubmit={() => setIsSubmitting(true)}
+      onError={() => setIsSubmitting(false)}
+    >
+      <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
+      <input type="hidden" value={uniqueCodeFormData.email} name="email" />
+      <input type="hidden" value={nextPath} name="next_path" />
+      <div className="space-y-1">
+        <label className="text-13 font-medium text-tertiary" htmlFor="email">
+          Email
+        </label>
+        <div className={`relative flex items-center rounded-md border border-subtle bg-surface-1`}>
+          <Input
+            id="email"
+            name="email"
+            type="email"
+            value={uniqueCodeFormData.email}
+            onChange={(e) => handleFormChange("email", e.target.value)}
+            placeholder="name@company.com"
+            className={`h-10 w-full border-0 disable-autofill-style placeholder:text-placeholder`}
+            autoComplete="off"
+            disabled
+          />
+          {uniqueCodeFormData.email.length > 0 && (
+            <XCircle
+              className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
+              onClick={handleEmailClear}
+            />
+          )}
+        </div>
+      </div>
+
+      <div className="space-y-1">
+        <label className="text-13 font-medium text-tertiary" htmlFor="code">
+          Unique code
+        </label>
+        <Input
+          name="code"
+          value={uniqueCodeFormData.code}
+          onChange={(e) => handleFormChange("code", e.target.value)}
+          placeholder="123456"
+          className="h-10 w-full border border-subtle !bg-surface-1 pr-12 disable-autofill-style placeholder:text-placeholder"
+          autoComplete="off"
+          autoFocus
+        />
+        <div className="flex w-full items-center justify-between px-1 pt-1 text-11">
+          <p className="flex items-center gap-1 font-medium text-success-primary">
+            <CircleCheck height={12} width={12} />
+            Paste the code sent to your email
+          </p>
+          <button
+            type="button"
+            onClick={() => generateNewCode(uniqueCodeFormData.email)}
+            className={`${
+              isRequestNewCodeDisabled
+                ? "text-placeholder"
+                : "font-medium text-accent-secondary hover:text-accent-secondary"
+            }`}
+            disabled={isRequestNewCodeDisabled}
+          >
+            {resendTimerCode > 0
+              ? `Resend in ${resendTimerCode}s`
+              : isRequestingNewCode
+                ? "Requesting new code"
+                : "Resend"}
+          </button>
+        </div>
+      </div>
+
+      <div className="space-y-2.5">
+        <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
+          {isRequestingNewCode ? "Sending code" : isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
+        </Button>
+      </div>
+    </form>
+  );
+}