feat: sign up page added (#1306)

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;