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

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
-                  control={control}
-                  name="password"
-                  rules={{
-                    required: "Password is required",
-                  }}
-                  render={({ field: { value, onChange } }) => (
-                    <Input
-                      type="password"
-                      value={value}
-                      onChange={onChange}
-                      hasError={Boolean(errors.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"
-                      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>
+              <Controller
+                control={control}
+                name="password"
+                rules={{
+                  required: "Password is required",
+                }}
+                render={({ field: { value, onChange } }) => (
+                  <Input
+                    type="password"
+                    value={value}
+                    onChange={onChange}
+                    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}
+                  />
+                )}
+              />
               <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">
-            <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>
+          <LatestFeatureBlock />
         </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 useUserAuth from "hooks/use-user-auth";
-import useToast from "hooks/use-toast";
+import { useApplication, useUser } from "hooks/store";
 // layouts
 import DefaultLayout from "layouts/default-layout";
 // components
-import { EmailSignUpForm } from "components/account";
-// images
+import { SignUpRoot } from "components/account";
+// 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();
-  // custom hooks
-  const {} = useUserAuth({ routeAuth: "sign-in", user: currentUser, isLoading: currentUserLoader });
+  const {
+    config: { envConfig },
+  } = useApplication();
+  const { currentUser } = useUser();
 
-  const handleSignUp = async (formData: EmailPasswordFormValues) => {
-    const payload = {
-      email: formData.email,
-      password: formData.password ?? "",
-    };
-
-    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]);
+  if (currentUser || !envConfig)
+    return (
+      <div className="grid h-screen place-items-center">
+        <Spinner />
+      </div>
+    );
 
   return (
-    <>
-      <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="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="grid place-items-center bg-custom-background-100">
-          <div className="h-[30px] w-[30px]">
-            <Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
-          </div>
+    <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="grid h-full w-full place-items-center overflow-y-auto px-7 py-5">
-        <div>
-          <h1 className="font- text-center text-2xl">SignUp on Plane</h1>
-          <EmailSignUpForm onSubmit={handleSignUp} />
+
+      <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">
+          <SignUpRoot />
         </div>
       </div>
-    </>
+    </div>
   );
 });
 
-SignUpPage.getLayout = function getLayout(page: ReactElement) {
+SignUpPage.getLayout = function getLayout(page: React.ReactElement) {
   return <DefaultLayout>{page}</DefaultLayout>;
 };