chore: new sign-in, sign-up and forgot password workflows (#3415)

* chore: sign up workflow updated

* chore: sign in workflow updated

* refactor: folder structure

* chore: forgot password workflow

* refactor: form component props

* chore: forgot password popover for instances with smtp unconfigured

* chore: updated UX copy

* chore: update reset password link

* chore: update email placeholder

apiserver/plane/bgtasks/forgot_password_task.py

@@ -21,7 +21,7 @@ from plane.license.utils.instance_value import get_email_configuration
 def forgot_password(first_name, email, uidb64, token, current_site):
     try:
         relative_link = (
-            f"/accounts/password/?uidb64={uidb64}&token={token}&email={email}"
+            f"/accounts/reset-password/?uidb64={uidb64}&token={token}&email={email}"
         )
         abs_url = str(current_site) + relative_link
 

packages/types/src/app.d.ts

@@ -1,14 +1,14 @@
 export interface IAppConfig {
   email_password_login: boolean;
   file_size_limit: number;
-  google_client_id: string | null;
   github_app_name: string | null;
   github_client_id: string | null;
-  magic_login: boolean;
+  google_client_id: string | null;
-  slack_client_id: string | null;
-  posthog_api_key: string | null;
-  posthog_host: string | null;
   has_openai_configured: boolean;
   has_unsplash_configured: boolean;
   is_smtp_configured: boolean;
+  magic_login: boolean;
+  posthog_api_key: string | null;
+  posthog_host: string | null;
+  slack_client_id: string | null;
 }

space/components/accounts/sign-in-forms/create-password.tsx

@@ -101,7 +101,7 @@ export const CreatePasswordForm: React.FC<Props> = (props) => {
               onChange={onChange}
               ref={ref}
               hasError={Boolean(errors.email)}
-              placeholder="orville.wright@frstflt.com"
+              placeholder="name@company.com"
               className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 text-onboarding-text-400"
               disabled
             />

space/components/accounts/sign-in-forms/email-form.tsx

@@ -100,7 +100,7 @@ export const EmailForm: React.FC<Props> = (props) => {
                   onChange={onChange}
                   ref={ref}
                   hasError={Boolean(errors.email)}
-                  placeholder="orville.wright@frstflt.com"
+                  placeholder="name@company.com"
                   className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
                 />
                 {value.length > 0 && (

space/components/accounts/sign-in-forms/optional-set-password.tsx

@@ -61,7 +61,7 @@ export const OptionalSetPasswordForm: React.FC<Props> = (props) => {
               onChange={onChange}
               ref={ref}
               hasError={Boolean(errors.email)}
-              placeholder="orville.wright@frstflt.com"
+              placeholder="name@company.com"
               className="h-[46px] w-full border border-onboarding-border-100 pr-12 text-onboarding-text-400"
               disabled
             />

space/components/accounts/sign-in-forms/password.tsx

@@ -155,7 +155,7 @@ export const PasswordForm: React.FC<Props> = (props) => {
                   value={value}
                   onChange={onChange}
                   hasError={Boolean(errors.email)}
-                  placeholder="orville.wright@frstflt.com"
+                  placeholder="name@company.com"
                   className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
                 />
                 {value.length > 0 && (

space/components/accounts/sign-in-forms/self-hosted-sign-in.tsx

@@ -97,7 +97,7 @@ export const SelfHostedSignInForm: React.FC<Props> = (props) => {
                   value={value}
                   onChange={onChange}
                   hasError={Boolean(errors.email)}
-                  placeholder="orville.wright@frstflt.com"
+                  placeholder="name@company.com"
                   className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
                 />
                 {value.length > 0 && (

space/components/accounts/sign-in-forms/set-password-link.tsx

@@ -87,7 +87,7 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
                 value={value}
                 onChange={onChange}
                 hasError={Boolean(errors.email)}
-                placeholder="orville.wright@frstflt.com"
+                placeholder="name@company.com"
                 className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 text-onboarding-text-400"
                 disabled
               />

space/components/accounts/sign-in-forms/unique-code.tsx

@@ -182,7 +182,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
                   }}
                   ref={ref}
                   hasError={Boolean(errors.email)}
-                  placeholder="orville.wright@frstflt.com"
+                  placeholder="name@company.com"
                   className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
                 />
                 {value.length > 0 && (

space/pages/accounts/password.tsx

@@ -104,7 +104,7 @@ const HomePage: NextPage = () => {
                     onChange={onChange}
                     ref={ref}
                     hasError={Boolean(errors.email)}
-                    placeholder="orville.wright@frstflt.com"
+                    placeholder="name@company.com"
                     className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 text-onboarding-text-400"
                     disabled
                   />

web/components/account/email-signup-form.tsx

@@ -1,137 +0,0 @@
-import React from "react";
-import Link from "next/link";
-import { Controller, useForm } from "react-hook-form";
-// ui
-import { Button, Input } from "@plane/ui";
-// types
-type EmailPasswordFormValues = {
-  email: string;
-  password?: string;
-  confirm_password: string;
-  medium?: string;
-};
-
-type Props = {
-  onSubmit: (formData: EmailPasswordFormValues) => Promise<void>;
-};
-
-export const EmailSignUpForm: React.FC<Props> = (props) => {
-  const { onSubmit } = props;
-
-  const {
-    handleSubmit,
-    control,
-    watch,
-    formState: { errors, isSubmitting, isValid, isDirty },
-  } = useForm<EmailPasswordFormValues>({
-    defaultValues: {
-      email: "",
-      password: "",
-      confirm_password: "",
-      medium: "email",
-    },
-    mode: "onChange",
-    reValidateMode: "onChange",
-  });
-
-  return (
-    <>
-      <form className="mx-auto mt-10 w-full space-y-4 sm:w-[360px]" onSubmit={handleSubmit(onSubmit)}>
-        <div className="space-y-1">
-          <Controller
-            control={control}
-            name="email"
-            rules={{
-              required: "Email address is required",
-              validate: (value) =>
-                /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
-                  value
-                ) || "Email address is not valid",
-            }}
-            render={({ field: { value, onChange, ref } }) => (
-              <Input
-                id="email"
-                name="email"
-                type="email"
-                value={value}
-                onChange={onChange}
-                ref={ref}
-                hasError={Boolean(errors.email)}
-                placeholder="Enter your email address..."
-                className="h-[46px] w-full border-custom-border-300"
-              />
-            )}
-          />
-        </div>
-        <div className="space-y-1">
-          <Controller
-            control={control}
-            name="password"
-            rules={{
-              required: "Password is required",
-            }}
-            render={({ field: { value, onChange, ref } }) => (
-              <Input
-                id="password"
-                name="password"
-                type="password"
-                value={value ?? ""}
-                onChange={onChange}
-                ref={ref}
-                hasError={Boolean(errors.password)}
-                placeholder="Enter your password..."
-                className="h-[46px] w-full border-custom-border-300"
-              />
-            )}
-          />
-        </div>
-        <div className="space-y-1">
-          <Controller
-            control={control}
-            name="confirm_password"
-            rules={{
-              required: "Password is required",
-              validate: (val: string) => {
-                if (watch("password") != val) {
-                  return "Your passwords do no match";
-                }
-              },
-            }}
-            render={({ field: { value, onChange, ref } }) => (
-              <Input
-                id="confirm_password"
-                name="confirm_password"
-                type="password"
-                value={value}
-                onChange={onChange}
-                ref={ref}
-                hasError={Boolean(errors.confirm_password)}
-                placeholder="Confirm your password..."
-                className="h-[46px] w-full border-custom-border-300"
-              />
-            )}
-          />
-        </div>
-        <div className="text-right text-xs">
-          <Link href="/">
-            <span className="text-custom-text-200 hover:text-custom-primary-100">
-              Already have an account? Sign in.
-            </span>
-          </Link>
-        </div>
-        <div>
-          <Button
-            variant="primary"
-            type="submit"
-            className="w-full"
-            size="xl"
-            disabled={!isValid && isDirty}
-            loading={isSubmitting}
-          >
-            {isSubmitting ? "Signing up..." : "Sign up"}
-          </Button>
-        </div>
-      </form>
-    </>
-  );
-};

web/components/account/index.ts

@@ -1,5 +1,4 @@
+export * from "./o-auth";
 export * from "./sign-in-forms";
+export * from "./sign-up-forms";
 export * from "./deactivate-account-modal";
-export * from "./github-sign-in";
-export * from "./google-sign-in";
-export * from "./email-signup-form";

web/components/account/o-auth/github-sign-in.tsx

@@ -12,10 +12,11 @@ import githubDarkModeImage from "/public/logos/github-dark.svg";
 type Props = {
   handleSignIn: React.Dispatch<string>;
   clientId: string;
+  type: "sign_in" | "sign_up";
 };
 
 export const GitHubSignInButton: FC<Props> = (props) => {
-  const { handleSignIn, clientId } = props;
+  const { handleSignIn, clientId, type } = props;
   // states
   const [loginCallBackURL, setLoginCallBackURL] = useState(undefined);
   const [gitCode, setGitCode] = useState<null | string>(null);
@@ -53,7 +54,7 @@ export const GitHubSignInButton: FC<Props> = (props) => {
             width={20}
             alt="GitHub Logo"
           />
-          <span className="text-onboarding-text-200">Sign-in with GitHub</span>
+          <span className="text-onboarding-text-200">{type === "sign_in" ? "Sign-in" : "Sign-up"} with GitHub</span>
         </button>
       </Link>
     </div>

web/components/account/o-auth/google-sign-in.tsx

@@ -4,10 +4,11 @@ import Script from "next/script";
 type Props = {
   handleSignIn: React.Dispatch<any>;
   clientId: string;
+  type: "sign_in" | "sign_up";
 };
 
 export const GoogleSignInButton: FC<Props> = (props) => {
-  const { handleSignIn, clientId } = props;
+  const { handleSignIn, clientId, type } = props;
   // refs
   const googleSignInButton = useRef<HTMLDivElement>(null);
   // states
@@ -29,7 +30,7 @@ export const GoogleSignInButton: FC<Props> = (props) => {
           theme: "outline",
           size: "large",
           logo_alignment: "center",
-          text: "signin_with",
+          text: type === "sign_in" ? "signin_with" : "signup_with",
           width: 384,
         } as GsiButtonConfiguration // customization attributes
       );
@@ -40,7 +41,7 @@ export const GoogleSignInButton: FC<Props> = (props) => {
     window?.google?.accounts.id.prompt(); // also display the One Tap dialog
 
     setGsiScriptLoaded(true);
-  }, [handleSignIn, gsiScriptLoaded, clientId]);
+  }, [handleSignIn, gsiScriptLoaded, clientId, type]);
 
   useEffect(() => {
     if (window?.google?.accounts?.id) {

web/components/account/o-auth/index.ts

@@ -0,0 +1,3 @@
+export * from "./github-sign-in";
+export * from "./google-sign-in";
+export * from "./o-auth-options";

web/components/account/o-auth/o-auth-options.tsx

@@ -9,13 +9,14 @@ import { GitHubSignInButton, GoogleSignInButton } from "components/account";
 
 type Props = {
   handleSignInRedirection: () => Promise<void>;
+  type: "sign_in" | "sign_up";
 };
 
 // services
 const authService = new AuthService();
 
 export const OAuthOptions: React.FC<Props> = observer((props) => {
-  const { handleSignInRedirection } = props;
+  const { handleSignInRedirection, type } = props;
   // toast alert
   const { setToastAlert } = useToast();
   // mobx store
@@ -72,12 +73,14 @@ export const OAuthOptions: React.FC<Props> = observer((props) => {
         <p className="mx-3 flex-shrink-0 text-center text-sm text-onboarding-text-400">Or continue with</p>
         <hr className="w-full border-onboarding-border-100" />
       </div>
-      <div className="mx-auto mt-7 space-y-4 overflow-hidden sm:w-96">
+      <div className="mx-auto mt-7 grid grid-cols-2 gap-4 overflow-hidden sm:w-96">
         {envConfig?.google_client_id && (
-          <GoogleSignInButton clientId={envConfig?.google_client_id} handleSignIn={handleGoogleSignIn} />
+          <div className="h-[42px] flex items-center !overflow-hidden">
+            <GoogleSignInButton clientId={envConfig?.google_client_id} handleSignIn={handleGoogleSignIn} type={type} />
+          </div>
         )}
         {envConfig?.github_client_id && (
-          <GitHubSignInButton clientId={envConfig?.github_client_id} handleSignIn={handleGitHubSignIn} />
+          <GitHubSignInButton clientId={envConfig?.github_client_id} handleSignIn={handleGitHubSignIn} type={type} />
         )}
       </div>
     </>

web/components/account/sign-in-forms/email.tsx

@@ -0,0 +1,110 @@
+import React from "react";
+import { Controller, useForm } from "react-hook-form";
+import { XCircle } from "lucide-react";
+import { observer } from "mobx-react-lite";
+// services
+import { AuthService } from "services/auth.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Button, Input } from "@plane/ui";
+// helpers
+import { checkEmailValidity } from "helpers/string.helper";
+// types
+import { IEmailCheckData } from "@plane/types";
+
+type Props = {
+  onSubmit: (isPasswordAutoset: boolean) => void;
+  updateEmail: (email: string) => void;
+};
+
+type TEmailFormValues = {
+  email: string;
+};
+
+const authService = new AuthService();
+
+export const SignInEmailForm: React.FC<Props> = observer((props) => {
+  const { onSubmit, updateEmail } = props;
+  // hooks
+  const { setToastAlert } = useToast();
+  const {
+    control,
+    formState: { errors, isSubmitting, isValid },
+    handleSubmit,
+  } = useForm<TEmailFormValues>({
+    defaultValues: {
+      email: "",
+    },
+    mode: "onChange",
+    reValidateMode: "onChange",
+  });
+
+  const handleFormSubmit = async (data: TEmailFormValues) => {
+    const payload: IEmailCheckData = {
+      email: data.email,
+    };
+
+    // update the global email state
+    updateEmail(data.email);
+
+    await authService
+      .emailCheck(payload)
+      .then((res) => onSubmit(res.is_password_autoset))
+      .catch((err) =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: err?.error ?? "Something went wrong. Please try again.",
+        })
+      );
+  };
+
+  return (
+    <>
+      <h1 className="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">
+        Welcome back, let{"'"}s get you on board
+      </h1>
+      <p className="mt-2.5 text-center text-sm text-onboarding-text-200">
+        Get back to your issues, projects and workspaces.
+      </p>
+
+      <form onSubmit={handleSubmit(handleFormSubmit)} className="mx-auto mt-8 space-y-4 sm:w-96">
+        <div className="space-y-1">
+          <Controller
+            control={control}
+            name="email"
+            rules={{
+              required: "Email is required",
+              validate: (value) => checkEmailValidity(value) || "Email is invalid",
+            }}
+            render={({ field: { value, onChange } }) => (
+              <div className="relative flex items-center rounded-md bg-onboarding-background-200">
+                <Input
+                  id="email"
+                  name="email"
+                  type="email"
+                  value={value}
+                  onChange={onChange}
+                  hasError={Boolean(errors.email)}
+                  placeholder="name@company.com"
+                  className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
+                  autoFocus
+                />
+                {value.length > 0 && (
+                  <XCircle
+                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    onClick={() => onChange("")}
+                  />
+                )}
+              </div>
+            )}
+          />
+        </div>
+        <Button type="submit" variant="primary" className="w-full" size="xl" disabled={!isValid} loading={isSubmitting}>
+          Continue
+        </Button>
+      </form>
+    </>
+  );
+});

web/components/account/sign-in-forms/forgot-password-popover.tsx

@@ -0,0 +1,54 @@
+import { Fragment, useState } from "react";
+import { usePopper } from "react-popper";
+import { Popover } from "@headlessui/react";
+import { X } from "lucide-react";
+
+export const ForgotPasswordPopover = () => {
+  // popper-js refs
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  // popper-js init
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "right-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  return (
+    <Popover className="relative">
+      <Popover.Button as={Fragment}>
+        <button
+          type="button"
+          ref={setReferenceElement}
+          className="text-xs font-medium text-custom-primary-100 outline-none"
+        >
+          Forgot your password?
+        </button>
+      </Popover.Button>
+      <Popover.Panel className="fixed z-10">
+        {({ close }) => (
+          <div
+            className="border border-onboarding-border-300 bg-onboarding-background-100 rounded z-10 py-1 px-2 w-64 break-words flex items-start gap-3 text-left ml-3"
+            ref={setPopperElement}
+            style={styles.popper}
+            {...attributes.popper}
+          >
+            <span className="flex-shrink-0">🤥</span>
+            <p className="text-xs">
+              We see that your god hasn{"'"}t enabled SMTP, we will not be able to send a password reset link
+            </p>
+            <button type="button" className="flex-shrink-0" onClick={() => close()}>
+              <X className="h-3 w-3 text-onboarding-text-200" />
+            </button>
+          </div>
+        )}
+      </Popover.Panel>
+    </Popover>
+  );
+};

web/components/account/sign-in-forms/index.ts

@@ -1,9 +1,6 @@
-export * from "./create-password";
+export * from "./email";
-export * from "./email-form";
+export * from "./forgot-password-popover";
-export * from "./o-auth-options";
 export * from "./optional-set-password";
 export * from "./password";
 export * from "./root";
-export * from "./self-hosted-sign-in";
-export * from "./set-password-link";
 export * from "./unique-code";

web/components/account/sign-in-forms/optional-set-password.tsx

@@ -1,36 +1,76 @@
 import React, { useState } from "react";
-import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
+// services
+import { AuthService } from "services/auth.service";
+// hooks
+import useToast from "hooks/use-toast";
 // ui
 import { Button, Input } from "@plane/ui";
 // helpers
 import { checkEmailValidity } from "helpers/string.helper";
-// constants
-import { ESignInSteps } from "components/account";
 
 type Props = {
   email: string;
-  handleStepChange: (step: ESignInSteps) => void;
   handleSignInRedirection: () => Promise<void>;
-  isOnboarded: boolean;
 };
 
-export const OptionalSetPasswordForm: React.FC<Props> = (props) => {
+type TCreatePasswordFormValues = {
-  const { email, handleStepChange, handleSignInRedirection, isOnboarded } = props;
+  email: string;
+  password: string;
+};
+
+const defaultValues: TCreatePasswordFormValues = {
+  email: "",
+  password: "",
+};
+
+// services
+const authService = new AuthService();
+
+export const SignInOptionalSetPasswordForm: React.FC<Props> = (props) => {
+  const { email, handleSignInRedirection } = props;
   // states
   const [isGoingToWorkspace, setIsGoingToWorkspace] = useState(false);
+  // toast alert
+  const { setToastAlert } = useToast();
   // form info
   const {
     control,
-    formState: { errors, isValid },
+    formState: { errors, isSubmitting, isValid },
-  } = useForm({
+    handleSubmit,
+  } = useForm<TCreatePasswordFormValues>({
     defaultValues: {
+      ...defaultValues,
       email,
     },
     mode: "onChange",
     reValidateMode: "onChange",
   });
 
+  const handleCreatePassword = async (formData: TCreatePasswordFormValues) => {
+    const payload = {
+      password: formData.password,
+    };
+
+    await authService
+      .setPassword(payload)
+      .then(async () => {
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Password created successfully.",
+        });
+        await handleSignInRedirection();
+      })
+      .catch((err) =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: err?.error ?? "Something went wrong. Please try again.",
+        })
+      );
+  };
+
   const handleGoToWorkspace = async () => {
     setIsGoingToWorkspace(true);
 
@@ -39,12 +79,11 @@ export const OptionalSetPasswordForm: React.FC<Props> = (props) => {
 
   return (
     <>
-      <h1 className="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">Set a password</h1>
+      <h1 className="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">Set your password</h1>
-      <p className="mt-2.5 px-20 text-center text-sm text-onboarding-text-200">
+      <p className="mt-2.5 text-center text-sm text-onboarding-text-200">
         If you{"'"}d like to do away with codes, set a password here.
       </p>
-
+      <form onSubmit={handleSubmit(handleCreatePassword)} className="mx-auto mt-5 space-y-4 sm:w-96">
-      <form className="mx-auto mt-5 space-y-4 sm:w-96">
         <Controller
           control={control}
           name="email"
@@ -61,22 +100,47 @@ export const OptionalSetPasswordForm: React.FC<Props> = (props) => {
               onChange={onChange}
               ref={ref}
               hasError={Boolean(errors.email)}
-              placeholder="orville.wright@frstflt.com"
+              placeholder="name@company.com"
-              className="h-[46px] w-full border border-onboarding-border-100 pr-12 text-onboarding-text-400"
+              className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 text-onboarding-text-400"
               disabled
             />
           )}
         />
-        <div className="grid grid-cols-2 gap-2.5">
+        <div>
+          <Controller
+            control={control}
+            name="password"
+            rules={{
+              required: "Password is required",
+            }}
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                type="password"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.password)}
+                placeholder="Enter password"
+                className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+                minLength={8}
+                autoFocus
+              />
+            )}
+          />
+          <p className="text-onboarding-text-200 text-xs mt-2 pb-3">
+            Whatever you choose now will be your account{"'"}s password until you change it.
+          </p>
+        </div>
+        <div className="space-y-2.5">
           <Button
-            type="button"
+            type="submit"
             variant="primary"
-            onClick={() => handleStepChange(ESignInSteps.CREATE_PASSWORD)}
             className="w-full"
             size="xl"
             disabled={!isValid}
+            loading={isSubmitting}
           >
-            Create password
+            Set password
           </Button>
           <Button
             type="button"
@@ -84,20 +148,11 @@ export const OptionalSetPasswordForm: React.FC<Props> = (props) => {
             className="w-full"
             size="xl"
             onClick={handleGoToWorkspace}
-            disabled={!isValid}
             loading={isGoingToWorkspace}
           >
-            {isOnboarded ? "Go to workspace" : "Set up workspace"}
+            Skip to workspace
           </Button>
         </div>
-        <p className="text-xs text-onboarding-text-200">
-          When you click{" "}
-          <span className="text-custom-primary-100">{isOnboarded ? "Go to workspace" : "Set up workspace"}</span> above,
-          you agree with our{" "}
-          <Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
-            <span className="font-semibold underline">terms and conditions of service.</span>
-          </Link>
-        </p>
       </form>
     </>
   );

web/components/account/sign-in-forms/password.tsx

@@ -1,5 +1,6 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import Link from "next/link";
+import { observer } from "mobx-react-lite";
 import { Controller, useForm } from "react-hook-form";
 import { XCircle } from "lucide-react";
 // services
@@ -7,22 +8,20 @@ import { AuthService } from "services/auth.service";
 // hooks
 import useToast from "hooks/use-toast";
 import { useApplication } from "hooks/store";
+// components
+import { ESignInSteps, ForgotPasswordPopover } from "components/account";
 // ui
 import { Button, Input } from "@plane/ui";
 // helpers
 import { checkEmailValidity } from "helpers/string.helper";
 // types
 import { IPasswordSignInData } from "@plane/types";
-// constants
-import { ESignInSteps } from "components/account";
-import { observer } from "mobx-react-lite";
 
 type Props = {
   email: string;
-  updateEmail: (email: string) => void;
   handleStepChange: (step: ESignInSteps) => void;
-  handleSignInRedirection: () => Promise<void>;
   handleEmailClear: () => void;
+  onSubmit: () => Promise<void>;
 };
 
 type TPasswordFormValues = {
@@ -37,24 +36,24 @@ const defaultValues: TPasswordFormValues = {
 
 const authService = new AuthService();
 
-export const PasswordForm: React.FC<Props> = observer((props) => {
+export const SignInPasswordForm: React.FC<Props> = observer((props) => {
-  const { email, updateEmail, handleStepChange, handleSignInRedirection, handleEmailClear } = props;
+  const { email, handleStepChange, handleEmailClear, onSubmit } = props;
   // states
   const [isSendingUniqueCode, setIsSendingUniqueCode] = useState(false);
-  const [isSendingResetPasswordLink, setIsSendingResetPasswordLink] = useState(false);
   // toast alert
   const { setToastAlert } = useToast();
   const {
     config: { envConfig },
   } = useApplication();
+  // derived values
+  const isSmtpConfigured = envConfig?.is_smtp_configured;
   // form info
   const {
     control,
-    formState: { dirtyFields, errors, isSubmitting, isValid },
+    formState: { errors, isSubmitting, isValid },
     getValues,
     handleSubmit,
     setError,
-    setFocus,
   } = useForm<TPasswordFormValues>({
     defaultValues: {
       ...defaultValues,
@@ -65,8 +64,6 @@ export const PasswordForm: React.FC<Props> = observer((props) => {
   });
 
   const handleFormSubmit = async (formData: TPasswordFormValues) => {
-    updateEmail(formData.email);
-
     const payload: IPasswordSignInData = {
       email: formData.email,
       password: formData.password,
@@ -74,7 +71,7 @@ export const PasswordForm: React.FC<Props> = observer((props) => {
 
     await authService
       .passwordSignIn(payload)
-      .then(async () => await handleSignInRedirection())
+      .then(async () => await onSubmit())
       .catch((err) =>
         setToastAlert({
           type: "error",
@@ -84,31 +81,6 @@ export const PasswordForm: React.FC<Props> = observer((props) => {
       );
   };
 
-  const handleForgotPassword = async () => {
-    const emailFormValue = getValues("email");
-
-    const isEmailValid = checkEmailValidity(emailFormValue);
-
-    if (!isEmailValid) {
-      setError("email", { message: "Email is invalid" });
-      return;
-    }
-
-    setIsSendingResetPasswordLink(true);
-
-    authService
-      .sendResetPasswordLink({ email: emailFormValue })
-      .then(() => handleStepChange(ESignInSteps.SET_PASSWORD_LINK))
-      .catch((err) =>
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: err?.error ?? "Something went wrong. Please try again.",
-        })
-      )
-      .finally(() => setIsSendingResetPasswordLink(false));
-  };
-
   const handleSendUniqueCode = async () => {
     const emailFormValue = getValues("email");
 
@@ -134,16 +106,15 @@ export const PasswordForm: React.FC<Props> = observer((props) => {
       .finally(() => setIsSendingUniqueCode(false));
   };
 
-  useEffect(() => {
-    setFocus("password");
-  }, [setFocus]);
-
   return (
     <>
-      <h1 className="sm:text-2.5xl text-center text-2xl font-semibold text-onboarding-text-100">
+      <h1 className="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">
-        Get on your flight deck
+        Welcome back, let{"'"}s get you on board
       </h1>
-      <form onSubmit={handleSubmit(handleFormSubmit)} className="mx-auto mt-11 space-y-4 sm:w-96">
+      <p className="mt-2.5 text-center text-sm text-onboarding-text-200">
+        Get back to your issues, projects and workspaces.
+      </p>
+      <form onSubmit={handleSubmit(handleFormSubmit)} className="mx-auto mt-5 space-y-4 sm:w-96">
         <div>
           <Controller
             control={control}
@@ -161,14 +132,17 @@ export const PasswordForm: React.FC<Props> = observer((props) => {
                   value={value}
                   onChange={onChange}
                   hasError={Boolean(errors.email)}
-                  placeholder="orville.wright@frstflt.com"
+                  placeholder="name@company.com"
                   className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
-                  disabled
+                  disabled={isSmtpConfigured}
                 />
                 {value.length > 0 && (
                   <XCircle
                     className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
-                    onClick={handleEmailClear}
+                    onClick={() => {
+                      if (isSmtpConfigured) handleEmailClear();
+                      else onChange("");
+                    }}
                   />
                 )}
               </div>
@@ -180,7 +154,7 @@ export const PasswordForm: React.FC<Props> = observer((props) => {
             control={control}
             name="password"
             rules={{
-              required: dirtyFields.email ? false : "Password is required",
+              required: "Password is required",
             }}
             render={({ field: { value, onChange } }) => (
               <Input
@@ -190,23 +164,34 @@ export const PasswordForm: React.FC<Props> = observer((props) => {
                 hasError={Boolean(errors.password)}
                 placeholder="Enter password"
                 className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+                autoFocus
               />
             )}
           />
-          <div className="w-full text-right">
+          <div className="w-full text-right mt-2 pb-3">
-            <button
+            {isSmtpConfigured ? (
-              type="button"
+              <Link
-              onClick={handleForgotPassword}
+                href={`/accounts/forgot-password?email=${email}`}
-              className={`text-xs font-medium ${
+                className="text-xs font-medium text-custom-primary-100"
-                isSendingResetPasswordLink ? "text-onboarding-text-300" : "text-custom-primary-100"
+              >
-              }`}
+                Forgot your password?
-              disabled={isSendingResetPasswordLink}
+              </Link>
-            >
+            ) : (
-              {isSendingResetPasswordLink ? "Sending link" : "Forgot your password?"}
+              <ForgotPasswordPopover />
-            </button>
+            )}
           </div>
         </div>
-        <div className="flex gap-4">
+        <div className="space-y-2.5">
+          <Button
+            type="submit"
+            variant="primary"
+            className="w-full"
+            size="xl"
+            disabled={!isValid}
+            loading={isSubmitting}
+          >
+            {envConfig?.is_smtp_configured ? "Continue" : "Go to workspace"}
+          </Button>
           {envConfig && envConfig.is_smtp_configured && (
             <Button
               type="button"
@@ -216,26 +201,10 @@ export const PasswordForm: React.FC<Props> = observer((props) => {
               size="xl"
               loading={isSendingUniqueCode}
             >
-              {isSendingUniqueCode ? "Sending code" : "Use unique code"}
+              {isSendingUniqueCode ? "Sending code" : "Sign in with unique code"}
             </Button>
           )}
-          <Button
-            type="submit"
-            variant="primary"
-            className="w-full"
-            size="xl"
-            disabled={!isValid}
-            loading={isSubmitting}
-          >
-            Continue
-          </Button>
         </div>
-        <p className="text-xs text-onboarding-text-200">
-          When you click <span className="text-custom-primary-100">Go to workspace</span> above, you agree with our{" "}
-          <Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
-            <span className="font-semibold underline">terms and conditions of service.</span>
-          </Link>
-        </p>
       </form>
     </>
   );

web/components/account/sign-in-forms/root.tsx

@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
+import Link from "next/link";
 import { observer } from "mobx-react-lite";
 // hooks
 import { useApplication } from "hooks/store";
@@ -6,115 +7,115 @@ import useSignInRedirection from "hooks/use-sign-in-redirection";
 // components
 import { LatestFeatureBlock } from "components/common";
 import {
-  EmailForm,
+  SignInEmailForm,
-  UniqueCodeForm,
+  SignInUniqueCodeForm,
-  PasswordForm,
+  SignInPasswordForm,
-  SetPasswordLink,
   OAuthOptions,
-  OptionalSetPasswordForm,
+  SignInOptionalSetPasswordForm,
-  CreatePasswordForm,
 } from "components/account";
 
 export enum ESignInSteps {
   EMAIL = "EMAIL",
   PASSWORD = "PASSWORD",
-  SET_PASSWORD_LINK = "SET_PASSWORD_LINK",
   UNIQUE_CODE = "UNIQUE_CODE",
   OPTIONAL_SET_PASSWORD = "OPTIONAL_SET_PASSWORD",
-  CREATE_PASSWORD = "CREATE_PASSWORD",
   USE_UNIQUE_CODE_FROM_PASSWORD = "USE_UNIQUE_CODE_FROM_PASSWORD",
 }
 
-const OAUTH_HIDDEN_STEPS = [ESignInSteps.OPTIONAL_SET_PASSWORD, ESignInSteps.CREATE_PASSWORD];
-
 export const SignInRoot = observer(() => {
   // states
-  const [signInStep, setSignInStep] = useState<ESignInSteps>(ESignInSteps.EMAIL);
+  const [signInStep, setSignInStep] = useState<ESignInSteps | null>(null);
   const [email, setEmail] = useState("");
-  const [isOnboarded, setIsOnboarded] = useState(false);
   // sign in redirection hook
   const { handleRedirection } = useSignInRedirection();
   // mobx store
   const {
     config: { envConfig },
   } = useApplication();
+  // derived values
+  const isSmtpConfigured = envConfig?.is_smtp_configured;
+
+  // step 1 submit handler- email verification
+  const handleEmailVerification = (isPasswordAutoset: boolean) => {
+    if (isSmtpConfigured && isPasswordAutoset) setSignInStep(ESignInSteps.UNIQUE_CODE);
+    else setSignInStep(ESignInSteps.PASSWORD);
+  };
+
+  // step 2 submit handler- unique code sign in
+  const handleUniqueCodeSignIn = async (isPasswordAutoset: boolean) => {
+    if (isPasswordAutoset) setSignInStep(ESignInSteps.OPTIONAL_SET_PASSWORD);
+    else await handleRedirection();
+  };
+
+  // step 3 submit handler- password sign in
+  const handlePasswordSignIn = async () => {
+    await handleRedirection();
+  };
 
   const isOAuthEnabled = envConfig && (envConfig.google_client_id || envConfig.github_client_id);
 
+  useEffect(() => {
+    if (isSmtpConfigured) setSignInStep(ESignInSteps.EMAIL);
+    else setSignInStep(ESignInSteps.PASSWORD);
+  }, [isSmtpConfigured]);
+
   return (
     <>
       <div className="mx-auto flex flex-col">
         <>
           {signInStep === ESignInSteps.EMAIL && (
-            <EmailForm
+            <SignInEmailForm onSubmit={handleEmailVerification} updateEmail={(newEmail) => setEmail(newEmail)} />
-              handleStepChange={(step) => setSignInStep(step)}
+          )}
-              updateEmail={(newEmail) => setEmail(newEmail)}
+          {signInStep === ESignInSteps.UNIQUE_CODE && (
+            <SignInUniqueCodeForm
+              email={email}
+              handleEmailClear={() => {
+                setEmail("");
+                setSignInStep(ESignInSteps.EMAIL);
+              }}
+              onSubmit={handleUniqueCodeSignIn}
+              submitButtonText="Continue"
             />
           )}
           {signInStep === ESignInSteps.PASSWORD && (
-            <PasswordForm
+            <SignInPasswordForm
               email={email}
-              updateEmail={(newEmail) => setEmail(newEmail)}
-              handleStepChange={(step) => setSignInStep(step)}
               handleEmailClear={() => {
                 setEmail("");
                 setSignInStep(ESignInSteps.EMAIL);
               }}
-              handleSignInRedirection={handleRedirection}
+              onSubmit={handlePasswordSignIn}
+              handleStepChange={(step) => setSignInStep(step)}
             />
           )}
-          {signInStep === ESignInSteps.SET_PASSWORD_LINK && (
-            <SetPasswordLink email={email} updateEmail={(newEmail) => setEmail(newEmail)} />
-          )}
           {signInStep === ESignInSteps.USE_UNIQUE_CODE_FROM_PASSWORD && (
-            <UniqueCodeForm
+            <SignInUniqueCodeForm
               email={email}
-              updateEmail={(newEmail) => setEmail(newEmail)}
-              handleStepChange={(step) => setSignInStep(step)}
-              handleSignInRedirection={handleRedirection}
-              submitButtonLabel="Go to workspace"
-              showTermsAndConditions
-              updateUserOnboardingStatus={(value) => setIsOnboarded(value)}
-              handleEmailClear={() => {
-                setEmail("");
-                setSignInStep(ESignInSteps.EMAIL);
-              }}
-            />
-          )}
-          {signInStep === ESignInSteps.UNIQUE_CODE && (
-            <UniqueCodeForm
-              email={email}
-              updateEmail={(newEmail) => setEmail(newEmail)}
-              handleStepChange={(step) => setSignInStep(step)}
-              handleSignInRedirection={handleRedirection}
-              updateUserOnboardingStatus={(value) => setIsOnboarded(value)}
               handleEmailClear={() => {
                 setEmail("");
                 setSignInStep(ESignInSteps.EMAIL);
               }}
+              onSubmit={handleUniqueCodeSignIn}
+              submitButtonText="Go to workspace"
             />
           )}
           {signInStep === ESignInSteps.OPTIONAL_SET_PASSWORD && (
-            <OptionalSetPasswordForm
+            <SignInOptionalSetPasswordForm email={email} handleSignInRedirection={handleRedirection} />
-              email={email}
-              handleStepChange={(step) => setSignInStep(step)}
-              handleSignInRedirection={handleRedirection}
-              isOnboarded={isOnboarded}
-            />
-          )}
-          {signInStep === ESignInSteps.CREATE_PASSWORD && (
-            <CreatePasswordForm
-              email={email}
-              handleStepChange={(step) => setSignInStep(step)}
-              handleSignInRedirection={handleRedirection}
-              isOnboarded={isOnboarded}
-            />
           )}
         </>
       </div>
-      {isOAuthEnabled && !OAUTH_HIDDEN_STEPS.includes(signInStep) && (
+      {isOAuthEnabled &&
-        <OAuthOptions handleSignInRedirection={handleRedirection} />
+        (signInStep === ESignInSteps.EMAIL || (!isSmtpConfigured && signInStep === ESignInSteps.PASSWORD)) && (
-      )}
+          <>
+            <OAuthOptions handleSignInRedirection={handleRedirection} type="sign_in" />
+            <p className="text-xs text-onboarding-text-300 text-center mt-6">
+              Don{"'"}t have an account?{" "}
+              <Link href="/accounts/sign-up" className="text-custom-primary-100 font-medium underline">
+                Sign up
+              </Link>
+            </p>
+          </>
+        )}
       <LatestFeatureBlock />
     </>
   );

web/components/account/sign-in-forms/set-password-link.tsx

@@ -1,103 +0,0 @@
-import React from "react";
-import { Controller, useForm } from "react-hook-form";
-// services
-import { AuthService } from "services/auth.service";
-// hooks
-import useToast from "hooks/use-toast";
-// ui
-import { Button, Input } from "@plane/ui";
-// helpers
-import { checkEmailValidity } from "helpers/string.helper";
-// types
-import { IEmailCheckData } from "@plane/types";
-
-type Props = {
-  email: string;
-  updateEmail: (email: string) => void;
-};
-
-const authService = new AuthService();
-
-export const SetPasswordLink: React.FC<Props> = (props) => {
-  const { email, updateEmail } = props;
-
-  const { setToastAlert } = useToast();
-
-  const {
-    control,
-    formState: { errors, isSubmitting, isValid },
-    handleSubmit,
-  } = useForm({
-    defaultValues: {
-      email,
-    },
-    mode: "onChange",
-    reValidateMode: "onChange",
-  });
-
-  const handleSendNewLink = async (formData: { email: string }) => {
-    updateEmail(formData.email);
-
-    const payload: IEmailCheckData = {
-      email: formData.email,
-    };
-
-    await authService
-      .sendResetPasswordLink(payload)
-      .then(() =>
-        setToastAlert({
-          type: "success",
-          title: "Success!",
-          message: "We have sent a new link to your email.",
-        })
-      )
-      .catch((err) =>
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: err?.error ?? "Something went wrong. Please try again.",
-        })
-      );
-  };
-
-  return (
-    <>
-      <h1 className="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">
-        Get on your flight deck
-      </h1>
-      <p className="mt-2.5 px-20 text-center text-sm text-onboarding-text-200">
-        We have sent a link to <span className="font-semibold text-custom-primary-100">{email},</span> so you can set a
-        password
-      </p>
-
-      <form onSubmit={handleSubmit(handleSendNewLink)} className="mx-auto mt-5 space-y-4 sm:w-96">
-        <div className="space-y-1">
-          <Controller
-            control={control}
-            name="email"
-            rules={{
-              required: "Email is required",
-              validate: (value) => checkEmailValidity(value) || "Email is invalid",
-            }}
-            render={({ field: { value, onChange } }) => (
-              <Input
-                id="email"
-                name="email"
-                type="email"
-                value={value}
-                onChange={onChange}
-                hasError={Boolean(errors.email)}
-                placeholder="orville.wright@frstflt.com"
-                className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 text-onboarding-text-400"
-                disabled
-              />
-            )}
-          />
-        </div>
-        <Button type="submit" variant="primary" className="w-full" size="xl" disabled={!isValid} loading={isSubmitting}>
-          {isSubmitting ? "Sending new link" : "Get link again"}
-        </Button>
-      </form>
-    </>
-  );
-};

web/components/account/sign-in-forms/unique-code.tsx

@@ -1,7 +1,6 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
-import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
-import { CornerDownLeft, XCircle } from "lucide-react";
+import { XCircle } from "lucide-react";
 // services
 import { AuthService } from "services/auth.service";
 import { UserService } from "services/user.service";
@@ -14,18 +13,12 @@ import { Button, Input } from "@plane/ui";
 import { checkEmailValidity } from "helpers/string.helper";
 // types
 import { IEmailCheckData, IMagicSignInData } from "@plane/types";
-// constants
-import { ESignInSteps } from "components/account";
 
 type Props = {
   email: string;
-  updateEmail: (email: string) => void;
+  onSubmit: (isPasswordAutoset: boolean) => Promise<void>;
-  handleStepChange: (step: ESignInSteps) => void;
-  handleSignInRedirection: () => Promise<void>;
-  submitButtonLabel?: string;
-  showTermsAndConditions?: boolean;
-  updateUserOnboardingStatus: (value: boolean) => void;
   handleEmailClear: () => void;
+  submitButtonText: string;
 };
 
 type TUniqueCodeFormValues = {
@@ -42,17 +35,8 @@ const defaultValues: TUniqueCodeFormValues = {
 const authService = new AuthService();
 const userService = new UserService();
 
-export const UniqueCodeForm: React.FC<Props> = (props) => {
+export const SignInUniqueCodeForm: React.FC<Props> = (props) => {
-  const {
+  const { email, onSubmit, handleEmailClear, submitButtonText } = props;
-    email,
-    updateEmail,
-    handleStepChange,
-    handleSignInRedirection,
-    submitButtonLabel = "Continue",
-    showTermsAndConditions = false,
-    updateUserOnboardingStatus,
-    handleEmailClear,
-  } = props;
   // states
   const [isRequestingNewCode, setIsRequestingNewCode] = useState(false);
   // toast alert
@@ -62,11 +46,10 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
   // form info
   const {
     control,
-    formState: { dirtyFields, errors, isSubmitting, isValid },
+    formState: { errors, isSubmitting, isValid },
     getValues,
     handleSubmit,
     reset,
-    setFocus,
   } = useForm<TUniqueCodeFormValues>({
     defaultValues: {
       ...defaultValues,
@@ -88,10 +71,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
       .then(async () => {
         const currentUser = await userService.currentUser();
 
-        updateUserOnboardingStatus(currentUser.is_onboarded);
+        await onSubmit(currentUser.is_password_autoset);
-
-        if (currentUser.is_password_autoset) handleStepChange(ESignInSteps.OPTIONAL_SET_PASSWORD);
-        else await handleSignInRedirection();
       })
       .catch((err) =>
         setToastAlert({
@@ -131,13 +111,6 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
       );
   };
 
-  const handleFormSubmit = async (formData: TUniqueCodeFormValues) => {
-    updateEmail(formData.email);
-
-    if (dirtyFields.email) await handleSendNewCode(formData);
-    else await handleUniqueCodeSignIn(formData);
-  };
-
   const handleRequestNewCode = async () => {
     setIsRequestingNewCode(true);
 
@@ -147,21 +120,16 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
   };
 
   const isRequestNewCodeDisabled = isRequestingNewCode || resendTimerCode > 0;
-  const hasEmailChanged = dirtyFields.email;
 
-  useEffect(() => {
-    setFocus("token");
-  }, [setFocus]);
   return (
     <>
-      <h1 className="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">
+      <h1 className="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">Moving to the runway</h1>
-        Get on your flight deck
-      </h1>
       <p className="mt-2.5 text-center text-sm text-onboarding-text-200">
-        Paste the code you got at <span className="font-semibold text-custom-primary-100">{email}</span> below.
+        Paste the code you got at
+        <br />
+        <span className="font-semibold text-custom-primary-100">{email}</span> below.
       </p>
-
+      <form onSubmit={handleSubmit(handleUniqueCodeSignIn)} className="mx-auto mt-5 space-y-4 sm:w-96">
-      <form onSubmit={handleSubmit(handleFormSubmit)} className="mx-auto mt-5 space-y-4 sm:w-96">
         <div>
           <Controller
             control={control}
@@ -178,12 +146,9 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
                   type="email"
                   value={value}
                   onChange={onChange}
-                  onBlur={() => {
-                    if (hasEmailChanged) handleSendNewCode(getValues());
-                  }}
                   ref={ref}
                   hasError={Boolean(errors.email)}
-                  placeholder="orville.wright@frstflt.com"
+                  placeholder="name@company.com"
                   className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
                   disabled
                 />
@@ -196,21 +161,13 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
               </div>
             )}
           />
-          {hasEmailChanged && (
-            <button
-              type="submit"
-              className="mt-1.5 flex items-center gap-1 border-none bg-transparent text-xs text-onboarding-text-300 outline-none"
-            >
-              Hit <CornerDownLeft className="h-2.5 w-2.5" /> or <span className="italic">Tab</span> to get a new code
-            </button>
-          )}
         </div>
         <div>
           <Controller
             control={control}
             name="token"
             rules={{
-              required: hasEmailChanged ? false : "Code is required",
+              required: "Code is required",
             }}
             render={({ field: { value, onChange } }) => (
               <Input
@@ -219,6 +176,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
                 hasError={Boolean(errors.token)}
                 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"
+                autoFocus
               />
             )}
           />
@@ -241,24 +199,9 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
             </button>
           </div>
         </div>
-        <Button
+        <Button type="submit" variant="primary" className="w-full" size="xl" disabled={!isValid} loading={isSubmitting}>
-          type="submit"
+          {submitButtonText}
-          variant="primary"
-          className="w-full"
-          size="xl"
-          disabled={!isValid || hasEmailChanged}
-          loading={isSubmitting}
-        >
-          {submitButtonLabel}
         </Button>
-        {showTermsAndConditions && (
-          <p className="text-xs text-onboarding-text-200">
-            When you click the button above, you agree with our{" "}
-            <Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
-              <span className="font-semibold underline">terms and conditions of service.</span>
-            </Link>
-          </p>
-        )}
       </form>
     </>
   );

web/components/account/sign-up-forms/email.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { Controller, useForm } from "react-hook-form";
 import { XCircle } from "lucide-react";
 import { observer } from "mobx-react-lite";
@@ -6,18 +6,15 @@ import { observer } from "mobx-react-lite";
 import { AuthService } from "services/auth.service";
 // hooks
 import useToast from "hooks/use-toast";
-import { useApplication } from "hooks/store";
 // ui
 import { Button, Input } from "@plane/ui";
 // helpers
 import { checkEmailValidity } from "helpers/string.helper";
 // types
 import { IEmailCheckData } from "@plane/types";
-// constants
-import { ESignInSteps } from "components/account";
 
 type Props = {
-  handleStepChange: (step: ESignInSteps) => void;
+  onSubmit: () => void;
   updateEmail: (email: string) => void;
 };
 
@@ -27,18 +24,14 @@ type TEmailFormValues = {
 
 const authService = new AuthService();
 
-export const EmailForm: React.FC<Props> = observer((props) => {
+export const SignUpEmailForm: React.FC<Props> = observer((props) => {
-  const { handleStepChange, updateEmail } = props;
+  const { onSubmit, updateEmail } = props;
   // hooks
   const { setToastAlert } = useToast();
-  const {
-    config: { envConfig },
-  } = useApplication();
   const {
     control,
     formState: { errors, isSubmitting, isValid },
     handleSubmit,
-    setFocus,
   } = useForm<TEmailFormValues>({
     defaultValues: {
       email: "",
@@ -57,14 +50,7 @@ export const EmailForm: React.FC<Props> = observer((props) => {
 
     await authService
       .emailCheck(payload)
-      .then((res) => {
+      .then(() => onSubmit())
-        // if the password has been auto set, send the user to magic sign-in
-        if (res.is_password_autoset && envConfig?.is_smtp_configured) {
-          handleStepChange(ESignInSteps.UNIQUE_CODE);
-        }
-        // if the password has not been auto set, send them to password sign-in
-        else handleStepChange(ESignInSteps.PASSWORD);
-      })
       .catch((err) =>
         setToastAlert({
           type: "error",
@@ -74,10 +60,6 @@ export const EmailForm: React.FC<Props> = observer((props) => {
       );
   };
 
-  useEffect(() => {
-    setFocus("email");
-  }, [setFocus]);
-
   return (
     <>
       <h1 className="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">
@@ -96,7 +78,7 @@ export const EmailForm: React.FC<Props> = observer((props) => {
               required: "Email is required",
               validate: (value) => checkEmailValidity(value) || "Email is invalid",
             }}
-            render={({ field: { value, onChange, ref } }) => (
+            render={({ field: { value, onChange } }) => (
               <div className="relative flex items-center rounded-md bg-onboarding-background-200">
                 <Input
                   id="email"
@@ -104,10 +86,10 @@ export const EmailForm: React.FC<Props> = observer((props) => {
                   type="email"
                   value={value}
                   onChange={onChange}
-                  ref={ref}
                   hasError={Boolean(errors.email)}
-                  placeholder="orville.wright@frstflt.com"
+                  placeholder="name@company.com"
                   className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
+                  autoFocus
                 />
                 {value.length > 0 && (
                   <XCircle
@@ -120,7 +102,7 @@ export const EmailForm: React.FC<Props> = observer((props) => {
           />
         </div>
         <Button type="submit" variant="primary" className="w-full" size="xl" disabled={!isValid} loading={isSubmitting}>
-          Continue
+          Verify
         </Button>
       </form>
     </>

web/components/account/sign-up-forms/index.ts

@@ -0,0 +1,5 @@
+export * from "./email";
+export * from "./optional-set-password";
+export * from "./password";
+export * from "./root";
+export * from "./unique-code";

web/components/account/sign-up-forms/optional-set-password.tsx

@@ -1,5 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useState } from "react";
-import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
 // services
 import { AuthService } from "services/auth.service";
@@ -10,13 +9,12 @@ import { Button, Input } from "@plane/ui";
 // helpers
 import { checkEmailValidity } from "helpers/string.helper";
 // constants
-import { ESignInSteps } from "components/account";
+import { ESignUpSteps } from "components/account";
 
 type Props = {
   email: string;
-  handleStepChange: (step: ESignInSteps) => void;
+  handleStepChange: (step: ESignUpSteps) => void;
   handleSignInRedirection: () => Promise<void>;
-  isOnboarded: boolean;
 };
 
 type TCreatePasswordFormValues = {
@@ -32,8 +30,10 @@ const defaultValues: TCreatePasswordFormValues = {
 // services
 const authService = new AuthService();
 
-export const CreatePasswordForm: React.FC<Props> = (props) => {
+export const SignUpOptionalSetPasswordForm: React.FC<Props> = (props) => {
-  const { email, handleSignInRedirection, isOnboarded } = props;
+  const { email, handleSignInRedirection } = props;
+  // states
+  const [isGoingToWorkspace, setIsGoingToWorkspace] = useState(false);
   // toast alert
   const { setToastAlert } = useToast();
   // form info
@@ -41,7 +41,6 @@ export const CreatePasswordForm: React.FC<Props> = (props) => {
     control,
     formState: { errors, isSubmitting, isValid },
     handleSubmit,
-    setFocus,
   } = useForm<TCreatePasswordFormValues>({
     defaultValues: {
       ...defaultValues,
@@ -75,16 +74,21 @@ export const CreatePasswordForm: React.FC<Props> = (props) => {
       );
   };
 
-  useEffect(() => {
+  const handleGoToWorkspace = async () => {
-    setFocus("password");
+    setIsGoingToWorkspace(true);
-  }, [setFocus]);
+
+    await handleSignInRedirection().finally(() => setIsGoingToWorkspace(false));
+  };
 
   return (
     <>
-      <h1 className="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">
+      <h1 className="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">Moving to the runway</h1>
-        Get on your flight deck
+      <p className="mt-2.5 text-center text-sm text-onboarding-text-200">
-      </h1>
+        Let{"'"}s set a password so
-      <form onSubmit={handleSubmit(handleCreatePassword)} className="mx-auto mt-11 space-y-4 sm:w-96">
+        <br />
+        you can do away with codes.
+      </p>
+      <form onSubmit={handleSubmit(handleCreatePassword)} className="mx-auto mt-5 space-y-4 sm:w-96">
         <Controller
           control={control}
           name="email"
@@ -101,40 +105,58 @@ export const CreatePasswordForm: React.FC<Props> = (props) => {
               onChange={onChange}
               ref={ref}
               hasError={Boolean(errors.email)}
-              placeholder="orville.wright@frstflt.com"
+              placeholder="name@company.com"
               className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 text-onboarding-text-400"
               disabled
             />
           )}
         />
-        <Controller
+        <div>
-          control={control}
+          <Controller
-          name="password"
+            control={control}
-          rules={{
+            name="password"
-            required: "Password is required",
+            rules={{
-          }}
+              required: "Password is required",
-          render={({ field: { value, onChange, ref } }) => (
+            }}
-            <Input
+            render={({ field: { value, onChange } }) => (
-              type="password"
+              <Input
-              value={value}
+                type="password"
-              onChange={onChange}
+                value={value}
-              ref={ref}
+                onChange={onChange}
-              hasError={Boolean(errors.password)}
+                hasError={Boolean(errors.password)}
-              placeholder="Choose password"
+                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="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
-              minLength={8}
+                minLength={8}
-            />
+                autoFocus
-          )}
+              />
-        />
+            )}
-        <Button type="submit" variant="primary" className="w-full" size="xl" disabled={!isValid} loading={isSubmitting}>
+          />
-          {isOnboarded ? "Go to workspace" : "Set up workspace"}
+          <p className="text-onboarding-text-200 text-xs mt-2 pb-3">
-        </Button>
+            This password will continue to be your account{"'"}s password.
-        <p className="text-xs text-onboarding-text-200">
+          </p>
-          When you click the button above, you agree with our{" "}
+        </div>
-          <Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
+        <div className="space-y-2.5">
-            <span className="font-semibold underline">terms and conditions of service.</span>
+          <Button
-          </Link>
+            type="submit"
-        </p>
+            variant="primary"
+            className="w-full"
+            size="xl"
+            disabled={!isValid}
+            loading={isSubmitting}
+          >
+            Set password
+          </Button>
+          <Button
+            type="button"
+            variant="outline-primary"
+            className="w-full"
+            size="xl"
+            onClick={handleGoToWorkspace}
+            loading={isGoingToWorkspace}
+          >
+            Skip to setup
+          </Button>
+        </div>
       </form>
     </>
   );

web/components/account/sign-up-forms/password.tsx

@@ -1,5 +1,6 @@
-import React, { useEffect } from "react";
+import React from "react";
 import Link from "next/link";
+import { observer } from "mobx-react-lite";
 import { Controller, useForm } from "react-hook-form";
 import { XCircle } from "lucide-react";
 // services
@@ -14,9 +15,7 @@ import { checkEmailValidity } from "helpers/string.helper";
 import { IPasswordSignInData } from "@plane/types";
 
 type Props = {
-  email: string;
+  onSubmit: () => Promise<void>;
-  updateEmail: (email: string) => void;
-  handleSignInRedirection: () => Promise<void>;
 };
 
 type TPasswordFormValues = {
@@ -31,20 +30,18 @@ const defaultValues: TPasswordFormValues = {
 
 const authService = new AuthService();
 
-export const SelfHostedSignInForm: React.FC<Props> = (props) => {
+export const SignUpPasswordForm: React.FC<Props> = observer((props) => {
-  const { email, updateEmail, handleSignInRedirection } = props;
+  const { onSubmit } = props;
   // toast alert
   const { setToastAlert } = useToast();
   // form info
   const {
     control,
-    formState: { dirtyFields, errors, isSubmitting },
+    formState: { errors, isSubmitting, isValid },
     handleSubmit,
-    setFocus,
   } = useForm<TPasswordFormValues>({
     defaultValues: {
       ...defaultValues,
-      email,
     },
     mode: "onChange",
     reValidateMode: "onChange",
@@ -56,11 +53,9 @@ export const SelfHostedSignInForm: React.FC<Props> = (props) => {
       password: formData.password,
     };
 
-    updateEmail(formData.email);
-
     await authService
       .passwordSignIn(payload)
-      .then(async () => await handleSignInRedirection())
+      .then(async () => await onSubmit())
       .catch((err) =>
         setToastAlert({
           type: "error",
@@ -70,16 +65,15 @@ export const SelfHostedSignInForm: React.FC<Props> = (props) => {
       );
   };
 
-  useEffect(() => {
-    setFocus("email");
-  }, [setFocus]);
-
   return (
     <>
-      <h1 className="sm:text-2.5xl text-center text-2xl font-semibold text-onboarding-text-100">
+      <h1 className="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">
         Get on your flight deck
       </h1>
-      <form onSubmit={handleSubmit(handleFormSubmit)} className="mx-auto mt-11 space-y-4 sm:w-96">
+      <p className="mt-2.5 text-center text-sm text-onboarding-text-200">
+        Create or join a workspace. Start with your e-mail.
+      </p>
+      <form onSubmit={handleSubmit(handleFormSubmit)} className="mx-auto mt-5 space-y-4 sm:w-96">
         <div>
           <Controller
             control={control}
@@ -97,7 +91,7 @@ export const SelfHostedSignInForm: React.FC<Props> = (props) => {
                   value={value}
                   onChange={onChange}
                   hasError={Boolean(errors.email)}
-                  placeholder="orville.wright@frstflt.com"
+                  placeholder="name@company.com"
                   className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
                 />
                 {value.length > 0 && (
@@ -115,7 +109,7 @@ export const SelfHostedSignInForm: React.FC<Props> = (props) => {
             control={control}
             name="password"
             rules={{
-              required: dirtyFields.email ? false : "Password is required",
+              required: "Password is required",
             }}
             render={({ field: { value, onChange } }) => (
               <Input
@@ -125,12 +119,16 @@ export const SelfHostedSignInForm: React.FC<Props> = (props) => {
                 hasError={Boolean(errors.password)}
                 placeholder="Enter password"
                 className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+                autoFocus
               />
             )}
           />
+          <p className="text-onboarding-text-200 text-xs mt-2 pb-3">
+            This password will continue to be your account{"'"}s password.
+          </p>
         </div>
-        <Button type="submit" variant="primary" className="w-full" size="xl" loading={isSubmitting}>
+        <Button type="submit" variant="primary" className="w-full" size="xl" disabled={!isValid} loading={isSubmitting}>
-          Continue
+          Create account
         </Button>
         <p className="text-xs text-onboarding-text-200">
           When you click the button above, you agree with our{" "}
@@ -141,4 +139,4 @@ export const SelfHostedSignInForm: React.FC<Props> = (props) => {
       </form>
     </>
   );
-};
+});

web/components/account/sign-up-forms/root.tsx

@@ -0,0 +1,97 @@
+import React, { useEffect, useState } from "react";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useApplication } from "hooks/store";
+import useSignInRedirection from "hooks/use-sign-in-redirection";
+// components
+import {
+  OAuthOptions,
+  SignUpEmailForm,
+  SignUpOptionalSetPasswordForm,
+  SignUpPasswordForm,
+  SignUpUniqueCodeForm,
+} from "components/account";
+import Link from "next/link";
+
+export enum ESignUpSteps {
+  EMAIL = "EMAIL",
+  UNIQUE_CODE = "UNIQUE_CODE",
+  PASSWORD = "PASSWORD",
+  OPTIONAL_SET_PASSWORD = "OPTIONAL_SET_PASSWORD",
+}
+
+const OAUTH_ENABLED_STEPS = [ESignUpSteps.EMAIL];
+
+export const SignUpRoot = observer(() => {
+  // states
+  const [signInStep, setSignInStep] = useState<ESignUpSteps | null>(null);
+  const [email, setEmail] = useState("");
+  // sign in redirection hook
+  const { handleRedirection } = useSignInRedirection();
+  // mobx store
+  const {
+    config: { envConfig },
+  } = useApplication();
+
+  // step 1 submit handler- email verification
+  const handleEmailVerification = () => setSignInStep(ESignUpSteps.UNIQUE_CODE);
+
+  // step 2 submit handler- unique code sign in
+  const handleUniqueCodeSignIn = async (isPasswordAutoset: boolean) => {
+    if (isPasswordAutoset) setSignInStep(ESignUpSteps.OPTIONAL_SET_PASSWORD);
+    else await handleRedirection();
+  };
+
+  // step 3 submit handler- password sign in
+  const handlePasswordSignIn = async () => {
+    await handleRedirection();
+  };
+
+  const isOAuthEnabled = envConfig && (envConfig.google_client_id || envConfig.github_client_id);
+
+  useEffect(() => {
+    if (envConfig?.is_smtp_configured) setSignInStep(ESignUpSteps.EMAIL);
+    else setSignInStep(ESignUpSteps.PASSWORD);
+  }, [envConfig?.is_smtp_configured]);
+
+  return (
+    <>
+      <div className="mx-auto flex flex-col">
+        <>
+          {signInStep === ESignUpSteps.EMAIL && (
+            <SignUpEmailForm onSubmit={handleEmailVerification} updateEmail={(newEmail) => setEmail(newEmail)} />
+          )}
+          {signInStep === ESignUpSteps.UNIQUE_CODE && (
+            <SignUpUniqueCodeForm
+              email={email}
+              handleEmailClear={() => {
+                setEmail("");
+                setSignInStep(ESignUpSteps.EMAIL);
+              }}
+              onSubmit={handleUniqueCodeSignIn}
+            />
+          )}
+          {signInStep === ESignUpSteps.PASSWORD && <SignUpPasswordForm onSubmit={handlePasswordSignIn} />}
+          {signInStep === ESignUpSteps.OPTIONAL_SET_PASSWORD && (
+            <SignUpOptionalSetPasswordForm
+              email={email}
+              handleSignInRedirection={handleRedirection}
+              handleStepChange={(step) => setSignInStep(step)}
+            />
+          )}
+        </>
+      </div>
+      {isOAuthEnabled && signInStep && OAUTH_ENABLED_STEPS.includes(signInStep) && (
+        <>
+          <OAuthOptions handleSignInRedirection={handleRedirection} type="sign_up" />
+          <p className="text-xs text-onboarding-text-300 text-center mt-6">
+            Already using Plane?{" "}
+            <Link href="/" className="text-custom-primary-100 font-medium underline">
+              Sign in
+            </Link>
+          </p>
+        </>
+      )}
+    </>
+  );
+});

web/components/account/sign-up-forms/unique-code.tsx

@@ -0,0 +1,215 @@
+import React, { useState } from "react";
+import Link from "next/link";
+import { Controller, useForm } from "react-hook-form";
+import { XCircle } from "lucide-react";
+// services
+import { AuthService } from "services/auth.service";
+import { UserService } from "services/user.service";
+// hooks
+import useToast from "hooks/use-toast";
+import useTimer from "hooks/use-timer";
+// ui
+import { Button, Input } from "@plane/ui";
+// helpers
+import { checkEmailValidity } from "helpers/string.helper";
+// types
+import { IEmailCheckData, IMagicSignInData } from "@plane/types";
+
+type Props = {
+  email: string;
+  handleEmailClear: () => void;
+  onSubmit: (isPasswordAutoset: boolean) => Promise<void>;
+};
+
+type TUniqueCodeFormValues = {
+  email: string;
+  token: string;
+};
+
+const defaultValues: TUniqueCodeFormValues = {
+  email: "",
+  token: "",
+};
+
+// services
+const authService = new AuthService();
+const userService = new UserService();
+
+export const SignUpUniqueCodeForm: React.FC<Props> = (props) => {
+  const { email, handleEmailClear, onSubmit } = props;
+  // states
+  const [isRequestingNewCode, setIsRequestingNewCode] = useState(false);
+  // toast alert
+  const { setToastAlert } = useToast();
+  // timer
+  const { timer: resendTimerCode, setTimer: setResendCodeTimer } = useTimer(30);
+  // form info
+  const {
+    control,
+    formState: { errors, isSubmitting, isValid },
+    getValues,
+    handleSubmit,
+    reset,
+  } = useForm<TUniqueCodeFormValues>({
+    defaultValues: {
+      ...defaultValues,
+      email,
+    },
+    mode: "onChange",
+    reValidateMode: "onChange",
+  });
+
+  const handleUniqueCodeSignIn = async (formData: TUniqueCodeFormValues) => {
+    const payload: IMagicSignInData = {
+      email: formData.email,
+      key: `magic_${formData.email}`,
+      token: formData.token,
+    };
+
+    await authService
+      .magicSignIn(payload)
+      .then(async () => {
+        const currentUser = await userService.currentUser();
+
+        await onSubmit(currentUser.is_password_autoset);
+      })
+      .catch((err) =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: err?.error ?? "Something went wrong. Please try again.",
+        })
+      );
+  };
+
+  const handleSendNewCode = async (formData: TUniqueCodeFormValues) => {
+    const payload: IEmailCheckData = {
+      email: formData.email,
+    };
+
+    await authService
+      .generateUniqueCode(payload)
+      .then(() => {
+        setResendCodeTimer(30);
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "A new unique code has been sent to your email.",
+        });
+
+        reset({
+          email: formData.email,
+          token: "",
+        });
+      })
+      .catch((err) =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: err?.error ?? "Something went wrong. Please try again.",
+        })
+      );
+  };
+
+  const handleRequestNewCode = async () => {
+    setIsRequestingNewCode(true);
+
+    await handleSendNewCode(getValues())
+      .then(() => setResendCodeTimer(30))
+      .finally(() => setIsRequestingNewCode(false));
+  };
+
+  const isRequestNewCodeDisabled = isRequestingNewCode || resendTimerCode > 0;
+
+  return (
+    <>
+      <h1 className="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">Moving to the runway</h1>
+      <p className="mt-2.5 text-center text-sm text-onboarding-text-200">
+        Paste the code you got at
+        <br />
+        <span className="font-semibold text-custom-primary-100">{email}</span> below.
+      </p>
+
+      <form onSubmit={handleSubmit(handleUniqueCodeSignIn)} className="mx-auto mt-5 space-y-4 sm:w-96">
+        <div>
+          <Controller
+            control={control}
+            name="email"
+            rules={{
+              required: "Email is required",
+              validate: (value) => checkEmailValidity(value) || "Email is invalid",
+            }}
+            render={({ field: { value, onChange, ref } }) => (
+              <div className="relative flex items-center rounded-md bg-onboarding-background-200">
+                <Input
+                  id="email"
+                  name="email"
+                  type="email"
+                  value={value}
+                  onChange={onChange}
+                  ref={ref}
+                  hasError={Boolean(errors.email)}
+                  placeholder="name@company.com"
+                  className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
+                  disabled
+                />
+                {value.length > 0 && (
+                  <XCircle
+                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    onClick={handleEmailClear}
+                  />
+                )}
+              </div>
+            )}
+          />
+        </div>
+        <div>
+          <Controller
+            control={control}
+            name="token"
+            rules={{
+              required: "Code is required",
+            }}
+            render={({ field: { value, onChange } }) => (
+              <Input
+                value={value}
+                onChange={onChange}
+                hasError={Boolean(errors.token)}
+                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"
+                autoFocus
+              />
+            )}
+          />
+          <div className="w-full text-right">
+            <button
+              type="button"
+              onClick={handleRequestNewCode}
+              className={`text-xs ${
+                isRequestNewCodeDisabled
+                  ? "text-onboarding-text-300"
+                  : "text-onboarding-text-200 hover:text-custom-primary-100"
+              }`}
+              disabled={isRequestNewCodeDisabled}
+            >
+              {resendTimerCode > 0
+                ? `Request new code in ${resendTimerCode}s`
+                : isRequestingNewCode
+                ? "Requesting new code"
+                : "Request new code"}
+            </button>
+          </div>
+        </div>
+        <Button type="submit" variant="primary" className="w-full" size="xl" disabled={!isValid} loading={isSubmitting}>
+          Create account
+        </Button>
+        <p className="text-xs text-onboarding-text-200">
+          When you click the button above, you agree with our{" "}
+          <Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
+            <span className="font-semibold underline">terms and conditions of service.</span>
+          </Link>
+        </p>
+      </form>
+    </>
+  );
+};

web/components/instance/setup-form/sign-in-form.tsx

@@ -88,7 +88,7 @@ export const InstanceSetupSignInForm: FC<IInstanceSetupEmailForm> = (props) => {
                 type="email"
                 value={value}
                 onChange={onChange}
-                placeholder="orville.wright@frstflt.com"
+                placeholder="name@company.com"
                 className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
               />
               {value.length > 0 && (

web/components/page-views/signin.tsx

@@ -7,7 +7,7 @@ import useSignInRedirection from "hooks/use-sign-in-redirection";
 // components
 import { SignInRoot } from "components/account";
 // ui
-import { Loader, Spinner } from "@plane/ui";
+import { Spinner } from "@plane/ui";
 // images
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 
@@ -26,7 +26,7 @@ export const SignInView = observer(() => {
     handleRedirection();
   }, [handleRedirection]);
 
-  if (isRedirecting || currentUser)
+  if (isRedirecting || currentUser || !envConfig)
     return (
       <div className="grid h-screen place-items-center">
         <Spinner />
@@ -35,32 +35,16 @@ export const SignInView = observer(() => {
 
   return (
     <div className="h-full w-full bg-onboarding-gradient-100">
-      <div className="flex items-center justify-between px-8 pb-4 sm:px-16 sm:py-5 lg:px-28 ">
+      <div className="flex items-center justify-between px-8 pb-4 sm:px-16 sm:py-5 lg:px-28">
         <div className="flex items-center gap-x-2 py-10">
           <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="mr-2" />
           <span className="text-2xl font-semibold sm:text-3xl">Plane</span>
         </div>
       </div>
 
-      <div className="mx-auto h-full rounded-t-md border-x border-t border-custom-border-200 bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 md:w-2/3 ">
+      <div className="mx-auto h-full rounded-t-md border-x border-t border-custom-border-200 bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 md:w-2/3">
         <div className="h-full overflow-auto rounded-t-md bg-onboarding-gradient-200 px-7 pb-56 pt-24 sm:px-0">
-          {!envConfig ? (
+          <SignInRoot />
-            <div className="mx-auto flex justify-center pt-10">
-              <div>
-                <Loader className="mx-auto w-full space-y-4 pb-4">
-                  <Loader.Item height="46px" width="360px" />
-                  <Loader.Item height="46px" width="360px" />
-                </Loader>
-
-                <Loader className="mx-auto w-full space-y-4 pt-4">
-                  <Loader.Item height="46px" width="360px" />
-                  <Loader.Item height="46px" width="360px" />
-                </Loader>
-              </div>
-            </div>
-          ) : (
-            <SignInRoot />
-          )}
         </div>
       </div>
     </div>

web/pages/accounts/forgot-password.tsx

@@ -0,0 +1,138 @@
+import { ReactElement } from "react";
+import Image from "next/image";
+import { useRouter } from "next/router";
+import { Controller, useForm } from "react-hook-form";
+// services
+import { AuthService } from "services/auth.service";
+// hooks
+import useToast from "hooks/use-toast";
+import useTimer from "hooks/use-timer";
+// layouts
+import DefaultLayout from "layouts/default-layout";
+// components
+import { LatestFeatureBlock } from "components/common";
+// ui
+import { Button, Input } from "@plane/ui";
+// images
+import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
+// helpers
+import { checkEmailValidity } from "helpers/string.helper";
+// type
+import { NextPageWithLayout } from "lib/types";
+
+type TForgotPasswordFormValues = {
+  email: string;
+};
+
+const defaultValues: TForgotPasswordFormValues = {
+  email: "",
+};
+
+// services
+const authService = new AuthService();
+
+const ForgotPasswordPage: NextPageWithLayout = () => {
+  // router
+  const router = useRouter();
+  const { email } = router.query;
+  // toast
+  const { setToastAlert } = useToast();
+  // timer
+  const { timer: resendTimerCode, setTimer: setResendCodeTimer } = useTimer(0);
+  // form info
+  const {
+    control,
+    formState: { errors, isSubmitting, isValid },
+    handleSubmit,
+  } = useForm<TForgotPasswordFormValues>({
+    defaultValues: {
+      ...defaultValues,
+      email: email?.toString() ?? "",
+    },
+  });
+
+  const handleForgotPassword = async (formData: TForgotPasswordFormValues) => {
+    await authService
+      .sendResetPasswordLink({
+        email: formData.email,
+      })
+      .then(() => {
+        setToastAlert({
+          type: "success",
+          title: "Email sent",
+          message:
+            "Check your inbox for a link to reset your password. If it doesn't appear within a few minutes, check your spam folder.",
+        });
+        setResendCodeTimer(30);
+      })
+      .catch((err) =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: err?.error ?? "Something went wrong. Please try again.",
+        })
+      );
+  };
+
+  return (
+    <div className="h-full w-full bg-onboarding-gradient-100">
+      <div className="flex items-center justify-between px-8 pb-4 sm:px-16 sm:py-5 lg:px-28 ">
+        <div className="flex items-center gap-x-2 py-10">
+          <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="mr-2" />
+          <span className="text-2xl font-semibold sm:text-3xl">Plane</span>
+        </div>
+      </div>
+
+      <div className="mx-auto h-full rounded-t-md border-x border-t border-custom-border-200 bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 md:w-2/3 ">
+        <div className="h-full overflow-auto rounded-t-md bg-onboarding-gradient-200 px-7 pb-56 pt-24 sm:px-0">
+          <div className="mx-auto flex flex-col divide-y divide-custom-border-200 sm:w-96">
+            <h1 className="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">
+              Get on your flight deck
+            </h1>
+            <p className="mt-2.5 text-center text-sm text-onboarding-text-200">Get a link to reset your password</p>
+            <form onSubmit={handleSubmit(handleForgotPassword)} className="mx-auto mt-5 space-y-4 sm:w-96">
+              <Controller
+                control={control}
+                name="email"
+                rules={{
+                  required: "Email is required",
+                  validate: (value) => checkEmailValidity(value) || "Email is invalid",
+                }}
+                render={({ field: { value, onChange, ref } }) => (
+                  <Input
+                    id="email"
+                    name="email"
+                    type="email"
+                    value={value}
+                    onChange={onChange}
+                    ref={ref}
+                    hasError={Boolean(errors.email)}
+                    placeholder="name@company.com"
+                    className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+                  />
+                )}
+              />
+              <Button
+                type="submit"
+                variant="primary"
+                className="w-full"
+                size="xl"
+                disabled={!isValid}
+                loading={isSubmitting || resendTimerCode > 0}
+              >
+                {resendTimerCode > 0 ? `Request new link in ${resendTimerCode}s` : "Get link"}
+              </Button>
+            </form>
+          </div>
+          <LatestFeatureBlock />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+ForgotPasswordPage.getLayout = function getLayout(page: ReactElement) {
+  return <DefaultLayout>{page}</DefaultLayout>;
+};
+
+export default ForgotPasswordPage;

web/pages/accounts/reset-password.tsx

@@ -1,9 +1,6 @@
 import { ReactElement } from "react";
 import Image from "next/image";
-import Link from "next/link";
 import { useRouter } from "next/router";
-import { useTheme } from "next-themes";
-import { Lightbulb } from "lucide-react";
 import { Controller, useForm } from "react-hook-form";
 // services
 import { AuthService } from "services/auth.service";
@@ -12,11 +9,12 @@ import useToast from "hooks/use-toast";
 import useSignInRedirection from "hooks/use-sign-in-redirection";
 // layouts
 import DefaultLayout from "layouts/default-layout";
+// components
+import { LatestFeatureBlock } from "components/common";
 // ui
 import { Button, Input } from "@plane/ui";
 // images
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
-import latestFeatures from "public/onboarding/onboarding-pages.svg";
 // helpers
 import { checkEmailValidity } from "helpers/string.helper";
 // type
@@ -35,12 +33,10 @@ const defaultValues: TResetPasswordFormValues = {
 // services
 const authService = new AuthService();
 
-const HomePage: NextPageWithLayout = () => {
+const ResetPasswordPage: NextPageWithLayout = () => {
   // router
   const router = useRouter();
   const { uidb64, token, email } = router.query;
-  // next-themes
-  const { resolvedTheme } = useTheme();
   // toast
   const { setToastAlert } = useToast();
   // sign in redirection hook
@@ -108,35 +104,30 @@ const HomePage: NextPageWithLayout = () => {
                     onChange={onChange}
                     ref={ref}
                     hasError={Boolean(errors.email)}
-                    placeholder="orville.wright@frstflt.com"
+                    placeholder="name@company.com"
                     className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 text-onboarding-text-400"
                     disabled
                   />
                 )}
               />
-              <div>
+              <Controller
-                <Controller
+                control={control}
-                  control={control}
+                name="password"
-                  name="password"
+                rules={{
-                  rules={{
+                  required: "Password is required",
-                    required: "Password is required",
+                }}
-                  }}
+                render={({ field: { value, onChange } }) => (
-                  render={({ field: { value, onChange } }) => (
+                  <Input
-                    <Input
+                    type="password"
-                      type="password"
+                    value={value}
-                      value={value}
+                    onChange={onChange}
-                      onChange={onChange}
+                    hasError={Boolean(errors.password)}
-                      hasError={Boolean(errors.password)}
+                    placeholder="Enter password"
-                      placeholder="Choose password"
+                    className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
-                      className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+                    minLength={8}
-                      minLength={8}
+                  />
-                    />
+                )}
-                  )}
+              />
-                />
-                <p className="mt-3 text-xs text-onboarding-text-200">
-                  Whatever you choose now will be your account{"'"}s password until you change it.
-                </p>
-              </div>
               <Button
                 type="submit"
                 variant="primary"
@@ -145,44 +136,19 @@ const HomePage: NextPageWithLayout = () => {
                 disabled={!isValid}
                 loading={isSubmitting}
               >
-                {isSubmitting ? "Signing in..." : "Go to workspace"}
+                Set password
               </Button>
-              <p className="text-xs text-onboarding-text-200">
-                When you click the button above, you agree with our{" "}
-                <Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
-                  <span className="font-semibold underline">terms and conditions of service.</span>
-                </Link>
-              </p>
             </form>
           </div>
-          <div className="mx-auto mt-16 flex rounded-[3.5px] border border-onboarding-border-200 bg-onboarding-background-100 py-2 sm:w-96">
+          <LatestFeatureBlock />
-            <Lightbulb className="mx-3 mr-2 h-7 w-7" />
-            <p className="text-left text-sm text-onboarding-text-100">
-              Try the latest features, like Tiptap editor, to write compelling responses.{" "}
-              <Link href="https://plane.so/changelog" target="_blank" rel="noopener noreferrer">
-                <span className="text-sm font-medium underline hover:cursor-pointer">See new features</span>
-              </Link>
-            </p>
-          </div>
-          <div className="mx-auto mt-8 overflow-hidden rounded-md border border-onboarding-border-200 bg-onboarding-background-100 object-cover sm:h-52 sm:w-96">
-            <div className="h-[90%]">
-              <Image
-                src={latestFeatures}
-                alt="Plane Issues"
-                className={`-mt-2 ml-8 h-full rounded-md ${
-                  resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
-                } `}
-              />
-            </div>
-          </div>
         </div>
       </div>
     </div>
   );
 };
 
-HomePage.getLayout = function getLayout(page: ReactElement) {
+ResetPasswordPage.getLayout = function getLayout(page: ReactElement) {
   return <DefaultLayout>{page}</DefaultLayout>;
 };
 
-export default HomePage;
+export default ResetPasswordPage;

web/pages/accounts/sign-up.tsx

@@ -1,97 +1,52 @@
-import React, { useEffect, ReactElement } from "react";
+import React from "react";
 import Image from "next/image";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-// next-themes
-import { useTheme } from "next-themes";
-// services
-import { AuthService } from "services/auth.service";
 // hooks
-import { useUser } from "hooks/store";
+import { useApplication, useUser } from "hooks/store";
-import useUserAuth from "hooks/use-user-auth";
-import useToast from "hooks/use-toast";
 // layouts
 import DefaultLayout from "layouts/default-layout";
 // components
-import { EmailSignUpForm } from "components/account";
+import { SignUpRoot } from "components/account";
-// images
+// ui
+import { Spinner } from "@plane/ui";
+// assets
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 // types
 import { NextPageWithLayout } from "lib/types";
 
-type EmailPasswordFormValues = {
-  email: string;
-  password?: string;
-  medium?: string;
-};
-
-// services
-const authService = new AuthService();
-
 const SignUpPage: NextPageWithLayout = observer(() => {
-  // router
-  const router = useRouter();
-  // toast alert
-  const { setToastAlert } = useToast();
-  // next-themes
-  const { setTheme } = useTheme();
   // store hooks
-  const { currentUser, fetchCurrentUser, currentUserLoader } = useUser();
+  const {
-  // custom hooks
+    config: { envConfig },
-  const {} = useUserAuth({ routeAuth: "sign-in", user: currentUser, isLoading: currentUserLoader });
+  } = useApplication();
+  const { currentUser } = useUser();
 
-  const handleSignUp = async (formData: EmailPasswordFormValues) => {
+  if (currentUser || !envConfig)
-    const payload = {
+    return (
-      email: formData.email,
+      <div className="grid h-screen place-items-center">
-      password: formData.password ?? "",
+        <Spinner />
-    };
+      </div>
-
+    );
-    await authService
-      .emailSignUp(payload)
-      .then(async (response) => {
-        setToastAlert({
-          type: "success",
-          title: "Success!",
-          message: "Account created successfully.",
-        });
-
-        if (response) await fetchCurrentUser();
-        router.push("/onboarding");
-      })
-      .catch((err) =>
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: err?.error || "Something went wrong. Please try again later or contact the support team.",
-        })
-      );
-  };
-
-  useEffect(() => {
-    setTheme("system");
-  }, [setTheme]);
 
   return (
-    <>
+    <div className="h-full w-full bg-onboarding-gradient-100">
-      <div className="left-20 top-0 hidden h-screen w-[0.5px] border-r-[0.5px] border-custom-border-200 sm:fixed sm:block lg:left-32" />
+      <div className="flex items-center justify-between px-8 pb-4 sm:px-16 sm:py-5 lg:px-28">
-      <div className="fixed left-7 top-11 grid place-items-center bg-custom-background-100 sm:left-16 sm:top-12 sm:py-5 lg:left-28">
+        <div className="flex items-center gap-x-2 py-10">
-        <div className="grid place-items-center bg-custom-background-100">
+          <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="mr-2" />
-          <div className="h-[30px] w-[30px]">
+          <span className="text-2xl font-semibold sm:text-3xl">Plane</span>
-            <Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
-          </div>
         </div>
       </div>
-      <div className="grid h-full w-full place-items-center overflow-y-auto px-7 py-5">
+
-        <div>
+      <div className="mx-auto h-full rounded-t-md border-x border-t border-custom-border-200 bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 md:w-2/3">
-          <h1 className="font- text-center text-2xl">SignUp on Plane</h1>
+        <div className="h-full overflow-auto rounded-t-md bg-onboarding-gradient-200 px-7 pb-56 pt-24 sm:px-0">
-          <EmailSignUpForm onSubmit={handleSignUp} />
+          <SignUpRoot />
         </div>
       </div>
-    </>
+    </div>
   );
 });
 
-SignUpPage.getLayout = function getLayout(page: ReactElement) {
+SignUpPage.getLayout = function getLayout(page: React.ReactElement) {
   return <DefaultLayout>{page}</DefaultLayout>;
 };
 

web/store/application/app-config.store.ts

@@ -5,8 +5,9 @@ import { IAppConfig } from "@plane/types";
 import { AppConfigService } from "services/app_config.service";
 
 export interface IAppConfigStore {
+  // observables
   envConfig: IAppConfig | null;
-  // action
+  // actions
   fetchAppConfig: () => Promise<any>;
 }