feat: sign up page added (#1306)

apps/app/components/account/email-password-form.tsx

@@ -1,11 +1,10 @@
 import React, { useState } from "react";
 
+import { useRouter } from "next/router";
+import Link from "next/link";
+
 // react hook form
 import { useForm } from "react-hook-form";
-// services
-import authenticationService from "services/authentication.service";
-// hooks
-import useToast from "hooks/use-toast";
 // components
 import { EmailResetPasswordForm } from "components/account";
 // ui
@@ -17,15 +16,19 @@ type EmailPasswordFormValues = {
   medium?: string;
 };
 
-export const EmailPasswordForm = ({ handleSignIn }: any) => {
+type Props = {
+  onSubmit: (formData: EmailPasswordFormValues) => Promise<void>;
+};
+
+export const EmailPasswordForm: React.FC<Props> = ({ onSubmit }) => {
   const [isResettingPassword, setIsResettingPassword] = useState(false);
 
-  const { setToastAlert } = useToast();
+  const router = useRouter();
+  const isSignUpPage = router.pathname === "/sign-up";
 
   const {
     register,
     handleSubmit,
-    setError,
     formState: { errors, isSubmitting, isValid, isDirty },
   } = useForm<EmailPasswordFormValues>({
     defaultValues: {
@@ -37,31 +40,6 @@ export const EmailPasswordForm = ({ handleSignIn }: any) => {
     reValidateMode: "onChange",
   });
 
-  const onSubmit = (formData: EmailPasswordFormValues) => {
-    authenticationService
-      .emailLogin(formData)
-      .then((response) => {
-        if (handleSignIn) handleSignIn(response);
-      })
-      .catch((error) => {
-        console.log(error);
-        setToastAlert({
-          title: "Oops!",
-          type: "error",
-          message: "Enter the correct email address and password to sign in",
-        });
-        if (!error?.response?.data) return;
-        Object.keys(error.response.data).forEach((key) => {
-          const err = error.response.data[key];
-          console.log(err);
-          setError(key as keyof EmailPasswordFormValues, {
-            type: "manual",
-            message: Array.isArray(err) ? err.join(", ") : err,
-          });
-        });
-      });
-  };
-
   return (
     <>
       {isResettingPassword ? (
@@ -82,7 +60,7 @@ export const EmailPasswordForm = ({ handleSignIn }: any) => {
                   ) || "Email ID is not valid",
               }}
               error={errors.email}
-              placeholder="Enter your Email ID"
+              placeholder="Enter your email ID"
             />
           </div>
           <div className="mt-5">
@@ -100,13 +78,21 @@ export const EmailPasswordForm = ({ handleSignIn }: any) => {
           </div>
           <div className="mt-2 flex items-center justify-between">
             <div className="ml-auto text-sm">
-              <button
-                type="button"
-                onClick={() => setIsResettingPassword(true)}
-                className="font-medium text-brand-accent hover:text-brand-accent"
-              >
-                Forgot your password?
-              </button>
+              {isSignUpPage ? (
+                <Link href="/">
+                  <a className="font-medium text-brand-accent hover:text-brand-accent">
+                    Already have an account? Sign in.
+                  </a>
+                </Link>
+              ) : (
+                <button
+                  type="button"
+                  onClick={() => setIsResettingPassword(true)}
+                  className="font-medium text-brand-accent hover:text-brand-accent"
+                >
+                  Forgot your password?
+                </button>
+              )}
             </div>
           </div>
           <div className="mt-5">
@@ -116,8 +102,21 @@ export const EmailPasswordForm = ({ handleSignIn }: any) => {
               disabled={!isValid && isDirty}
               loading={isSubmitting}
             >
-              {isSubmitting ? "Signing in..." : "Sign In"}
+              {isSignUpPage
+                ? isSubmitting
+                  ? "Signing up..."
+                  : "Sign Up"
+                : isSubmitting
+                ? "Signing in..."
+                : "Sign In"}
             </SecondaryButton>
+            {!isSignUpPage && (
+              <Link href="/sign-up">
+                <a className="block font-medium text-brand-accent hover:text-brand-accent text-sm mt-1">
+                  Don{"'"}t have an account? Sign up.
+                </a>
+              </Link>
+            )}
           </div>
         </form>
       )}

apps/app/components/workspace/create-workspace-form.tsx

@@ -31,16 +31,16 @@ type Props = {
 
 const restrictedUrls = [
   "api",
+  "installations",
+  "404",
   "create-workspace",
   "error",
-  "installations",
   "invitations",
   "magic-sign-in",
   "onboarding",
   "reset-password",
-  "signin",
+  "sign-up",
   "workspace-member-invitation",
-  "404",
 ];
 
 export const CreateWorkspaceForm: React.FC<Props> = ({

apps/app/pages/index.tsx

@@ -21,6 +21,12 @@ import {
 import { Spinner } from "components/ui";
 // icons
 import Logo from "public/logo.png";
+// types
+type EmailPasswordFormValues = {
+  email: string;
+  password?: string;
+  medium?: string;
+};
 
 const HomePage: NextPage = () => {
   const { user, isLoading, mutateUser } = useUserAuth("sign-in");
@@ -66,7 +72,6 @@ const HomePage: NextPage = () => {
         throw Error("Cant find credentials");
       }
     } catch (error: any) {
-      console.log(error);
       setToastAlert({
         title: "Error signing in!",
         type: "error",
@@ -77,19 +82,30 @@ const HomePage: NextPage = () => {
     }
   };
 
-  const handleEmailPasswordSignIn = async (response: any) => {
-    try {
-      if (response) mutateUser();
-    } catch (error: any) {
-      console.log(error);
-      setToastAlert({
-        title: "Error signing in!",
-        type: "error",
-        message:
-          error?.error ||
-          "Something went wrong. Please try again later or contact the support team.",
-      });
-    }
+  const handlePasswordSignIn = async (formData: EmailPasswordFormValues) => {
+    await authenticationService
+      .emailLogin(formData)
+      .then((response) => {
+        try {
+          if (response) mutateUser();
+        } catch (error: any) {
+          console.log(error);
+          setToastAlert({
+            title: "Error signing in!",
+            type: "error",
+            message:
+              error?.error ||
+              "Something went wrong. Please try again later or contact the support team.",
+          });
+        }
+      })
+      .catch(() =>
+        setToastAlert({
+          title: "Oops!",
+          type: "error",
+          message: "Enter the correct email address and password to sign in",
+        })
+      );
   };
 
   const handleEmailCodeSignIn = async (response: any) => {
@@ -114,7 +130,6 @@ const HomePage: NextPage = () => {
           <div>
             <Spinner />
           </div>
-          {/* <div className="text-gray-500">Validating authentication</div> */}
         </div>
       ) : (
         <div className="flex h-screen w-full items-center justify-center overflow-auto">
@@ -137,7 +152,7 @@ const HomePage: NextPage = () => {
                     </div>
                   </>
                 ) : (
-                  <EmailPasswordForm handleSignIn={handleEmailPasswordSignIn} />
+                  <EmailPasswordForm onSubmit={handlePasswordSignIn} />
                 )}
               </div>
             </div>

apps/app/pages/sign-up.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+// services
+import authenticationService from "services/authentication.service";
+// hooks
+import useUserAuth from "hooks/use-user-auth";
+import useToast from "hooks/use-toast";
+// layouts
+import DefaultLayout from "layouts/default-layout";
+// components
+import { EmailPasswordForm } from "components/account";
+// images
+import Logo from "public/logo.png";
+// types
+import type { NextPage } from "next";
+type EmailPasswordFormValues = {
+  email: string;
+  password?: string;
+  medium?: string;
+};
+
+const SignUp: NextPage = () => {
+  const router = useRouter();
+
+  const { setToastAlert } = useToast();
+
+  const { mutateUser } = useUserAuth("sign-in");
+
+  const handleSignUp = async (formData: EmailPasswordFormValues) => {
+    const payload = {
+      email: formData.email,
+      password: formData.password ?? "",
+    };
+
+    await authenticationService
+      .emailSignUp(payload)
+      .then(async (response) => {
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Account created successfully.",
+        });
+
+        if (response) await mutateUser();
+        router.push("/");
+      })
+      .catch((err) => {
+        if (err.status === 400)
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "An user already exists with this Email ID.",
+          });
+        else
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "Something went wrong. Please try again later or contact the support team.",
+          });
+      });
+  };
+
+  return (
+    <DefaultLayout>
+      <div className="flex h-screen w-full items-center justify-center overflow-auto">
+        <div className="flex min-h-full w-full flex-col justify-center py-12 px-6 lg:px-8">
+          <div className="flex flex-col gap-10 sm:mx-auto sm:w-full sm:max-w-md">
+            <div className="flex flex-col items-center justify-center gap-10">
+              <Image src={Logo} height={80} width={80} alt="Plane Web Logo" />
+              <div className="text-center text-xl font-medium text-brand-base">
+                Create a new Plane Account
+              </div>
+            </div>
+
+            <div className="flex flex-col rounded-[10px] bg-brand-base shadow-md">
+              <EmailPasswordForm onSubmit={handleSignUp} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </DefaultLayout>
+  );
+};
+
+export default SignUp;

apps/app/services/api.service.ts

@@ -7,6 +7,7 @@ const nonValidatedRoutes = [
   "/magic-sign-in",
   "/reset-password",
   "/workspace-member-invitation",
+  "/sign-up",
 ];
 
 const validateRouteCheck = (route: string): boolean => {

apps/app/services/authentication.service.ts

@@ -20,6 +20,18 @@ class AuthService extends APIService {
       });
   }
 
+  async emailSignUp(data: { email: string; password: string }) {
+    return this.post("/api/sign-up/", data, { headers: {} })
+      .then((response) => {
+        this.setAccessToken(response?.data?.access_token);
+        this.setRefreshToken(response?.data?.refresh_token);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
   async socialAuth(data: any) {
     return this.post("/api/social-auth/", data, { headers: {} })
       .then((response) => {