@atharva/frontend

frontend/.env

@@ -1,3 +1,2 @@
 NEXTAUTH_SECRET=8ce5be9dcc4eb9b0314cc3fe296d231ba5e786439f8c4a6e272cad29f8dda8c3
-
 NODE_ENV = development

frontend/.gitignore

@@ -27,6 +27,7 @@ yarn-error.log*
 # local env files
 .env*.local
 
+
 # vercel
 .vercel
 

frontend/app/(auth)/login/page.tsx

@@ -4,53 +4,77 @@ import Button from "@/app/components/button/Button"
 import Input from "@/app/components/input/Input"
 import useLogin from "./useLogin"
 import Link from "next/link"
+import Modal from "@/app/components/Modal"
+import { useWallet } from "@/app/store/WalletStore"
+import ConnectToMetamaskModal from "@/app/components/ConnectToMetamaskModal"
+import { formatWalletAddress } from "@/app/utils/formatWalletAddress"
 
-export default function page() {
+export default function Login() {
   const { actions, states } = useLogin()
+  const { isConnected, walletAddress } = useWallet()
 
   return (
-    <section className="min-h-screen w-full flex items-center justify-center bg-gray-50">
-      <div className="flex flex-col items-center bg-white p-4 rounded-md shadow-md w-[95%] max-w-[550px]">
-        <h1 className="text-xl font-bold">Welcome to Meta market! 👋</h1>
-        <p className="mt-2 max-w-[80%] text-center">
-          Please login with email address and password to continue .
-        </p>
-
-        <form onSubmit={actions.handleSubmit} action="" className="mt-4 w-full">
-          <div className="mb-4">
-            <Input
-              placeholder="johndoe@gmail.com"
-              title="Email address"
-              type="email"
-              name="email"
-              onChange={actions.handleChange}
-              value={states.values.email}
-              error={states.errors.email}
-            />
-          </div>
+    <>
+      <section className="min-h-screen w-full flex items-center justify-center">
+        <div className="flex flex-col items-center bg-white p-4 rounded-md shadow-md w-[95%] max-w-[550px]">
+          <h1 className="text-xl font-bold">Welcome to Meta market! 👋</h1>
+          <p className="mt-2 max-w-[80%] text-center">
+            Please login with email address and password to continue .
+          </p>
 
-          <div className="mb-4">
-            <Input
-              placeholder="*********"
-              title="Password"
-              type="password"
-              name="password"
-              onChange={actions.handleChange}
-              value={states.values.password}
-              error={states.errors.password}
-            />
-          </div>
+          <form
+            onSubmit={actions.handleSubmit}
+            action=""
+            className="mt-4 w-full"
+          >
+            <div className="mb-4">
+              <Input
+                placeholder="johndoe@gmail.com"
+                title="Email address"
+                type="email"
+                name="email"
+                onChange={actions.handleChange}
+                value={states.values.email}
+                error={states.errors.email}
+              />
+            </div>
+
+            <div className="mb-4">
+              <Input
+                placeholder="*********"
+                title="Password"
+                type="password"
+                name="password"
+                onChange={actions.handleChange}
+                value={states.values.password}
+                error={states.errors.password}
+              />
+            </div>
 
-          <Button type="submit">Login</Button>
-        </form>
+            {walletAddress && (
+              <div className="mb-4 flex flex-col gap-1 p-2 rounded-md border w-fit">
+                <span>Connected wallet address</span>
+                <p>{formatWalletAddress(walletAddress)}</p>
+              </div>
+            )}
 
-        <div className="mt-4">
-          Dont have an account yet ?{" "}
-          <Link href="/register" className="text-primary">
-            Create an account
-          </Link>
+            <Button loading={states.isLoading} type="submit">
+              Login
+            </Button>
+          </form>
+
+          <div className="mt-4">
+            Dont have an account yet ?{" "}
+            <Link href="/register" className="text-primary">
+              Create an account
+            </Link>
+          </div>
         </div>
-      </div>
-    </section>
+      </section>
+
+      <Modal open={!isConnected}>
+        <ConnectToMetamaskModal />
+      </Modal>
+    </>
   )
 }

frontend/app/(auth)/login/useLogin.ts

@@ -1,6 +1,9 @@
+import { IUserSession } from "@/app/interfaces/IUser"
+import { AxiosError } from "axios"
 import { useFormik } from "formik"
-import { signIn } from "next-auth/react"
+import { signIn, useSession } from "next-auth/react"
 import { useRouter } from "next/navigation"
+import { useEffect, useState } from "react"
 import { toast } from "react-hot-toast"
 import * as y from "yup"
 
@@ -17,16 +20,46 @@ const loginSchema = y.object({
 
 export default function useLogin() {
   const navigate = useRouter()
+  const { data } = useSession()
+  const user = data?.user as IUserSession
+
+  useEffect(() => {
+    if (user) redirectToPage()
+  }, [user])
+
+  const [isLoading, setIsLoading] = useState(false)
 
   const initialValues = {
     email: "",
     password: "",
   }
 
+  // redirect to route
+  const redirectToPage = () => {
+    switch (user.data.role.name) {
+      case "Authenticated":
+        navigate.push("/")
+        break
+      case "Admin":
+        navigate.push("/admin")
+        break
+      case "Brand":
+        navigate.push("/brand")
+        break
+      case "Seller":
+        navigate.push("/seller")
+        break
+      default:
+        navigate.push("/")
+        break
+    }
+  }
+
   const { values, errors, handleChange, handleSubmit } = useFormik({
     initialValues,
     validationSchema: loginSchema,
     onSubmit: async (values) => {
+      setIsLoading(true)
       try {
         const res = await signIn("credentials", {
           ...values,
@@ -36,15 +69,21 @@ export default function useLogin() {
         if (res?.error) throw new Error(res.error)
 
         // base on user role navigate to particular page
-
-        console.log(res)
-
-        navigate.push("/")
+        redirectToPage()
       } catch (error: any) {
-        toast.error(error.message)
+        if (error instanceof AxiosError) {
+          toast.error(error.response?.data.error.message)
+        } else {
+          toast.error("Someting went wrong please try again!")
+        }
+      } finally {
+        setIsLoading(false)
       }
     },
   })
 
-  return { actions: { handleChange, handleSubmit }, states: { values, errors } }
+  return {
+    actions: { handleChange, handleSubmit },
+    states: { values, errors, isLoading },
+  }
 }

frontend/app/(auth)/register/page.tsx

@@ -1,71 +1,125 @@
 "use client"
-
 import Button from "@/app/components/button/Button"
-import React from "react"
+import React, { useState } from "react"
 import useRegister from "./useRegister"
 import Input from "@/app/components/input/Input"
 import Link from "next/link"
+import ConnectToMetamaskModal from "@/app/components/ConnectToMetamaskModal"
+import Modal from "@/app/components/Modal"
+import { useWallet } from "@/app/store/WalletStore"
+import { formatWalletAddress } from "@/app/utils/formatWalletAddress"
+import { useMutation, useQuery } from "react-query"
+import qs from "qs"
+import ReferralService from "@/app/services/referral.service"
+import { ISingleReferral } from "@/app/services/ISingleReferral"
 
-export default function page() {
+export default function Register() {
   const { actions, states } = useRegister()
+  const { isConnected, walletAddress } = useWallet()
 
   return (
-    <section className="min-h-screen w-full flex items-center justify-center bg-gray-50">
-      <div className="flex flex-col items-center bg-white p-4 rounded-md shadow-md w-[95%] max-w-[550px]">
-        <h1 className="text-xl font-bold">Hey new to Meta market! 👋</h1>
-        <p className="mt-2 max-w-[80%] text-center">
-          Create an account and start using now.
-        </p>
+    <>
+      <section className="min-h-screen w-full flex items-center justify-center ">
+        <div className="flex flex-col items-center bg-white p-4 rounded-md shadow-md w-[95%] max-w-[550px]">
+          <h1 className="text-xl font-bold">Hey new to Meta market! 👋</h1>
+          <p className="mt-2 max-w-[80%] text-center">
+            Create an account and start using now.
+          </p>
 
-        <form onSubmit={actions.handleSubmit} action="" className="mt-4 w-full">
-          <div className="mb-4">
-            <Input
-              placeholder="john doe"
-              title="Name"
-              type="text"
-              name="name"
-              onChange={actions.handleChange}
-              value={states.values.name}
-              error={states.errors.name}
-            />
-          </div>
+          <form
+            onSubmit={actions.handleSubmit}
+            action=""
+            className="mt-4 w-full"
+          >
+            <div className="mb-4">
+              <Input
+                placeholder="john doe"
+                title="Name"
+                type="text"
+                name="name"
+                onChange={actions.handleChange}
+                value={states.values.name}
+                error={states.errors.name}
+              />
+            </div>
 
-          <div className="mb-4">
-            <Input
-              placeholder="johndoe@gmail.com"
-              title="Email address"
-              type="email"
-              name="email"
-              onChange={actions.handleChange}
-              value={states.values.email}
-              error={states.errors.email}
-            />
-          </div>
+            <div className="mb-4">
+              <Input
+                placeholder="johndoe@gmail.com"
+                title="Email address"
+                type="email"
+                name="email"
+                onChange={actions.handleChange}
+                value={states.values.email}
+                error={states.errors.email}
+              />
+            </div>
 
-          <div className="mb-4">
-            <Input
-              placeholder="*********"
-              title="Password"
-              type="password"
-              name="password"
-              onChange={actions.handleChange}
-              value={states.values.password}
-              error={states.errors.password}
-            />
-          </div>
+            <div className="mb-4">
+              <Input
+                placeholder="*********"
+                title="Password"
+                type="password"
+                name="password"
+                onChange={actions.handleChange}
+                value={states.values.password}
+                error={states.errors.password}
+              />
+            </div>
+
+            {states.hasId && (
+              <div className="mb-4">
+                <Input
+                  placeholder="referral_code"
+                  title="Referral code"
+                  type="text"
+                  name="Referral"
+                  onChange={(e) => {
+                    actions.setUserReferralId(e.target.value)
+                  }}
+                  value={states.userReferralId}
+                  error={states.referralError}
+                />
+              </div>
+            )}
 
-          <Button loading={states.isLoading} type="submit">
-            Register
-          </Button>
-        </form>
+            <label className="relative inline-flex items-center cursor-pointer mb-4">
+              <input
+                onChange={() => actions.setHasId(!states.hasId)}
+                type="checkbox"
+                value=""
+                className="sr-only peer"
+              />
+              <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-transparent dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary"></div>
+              <span className="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">
+                Have an refferal code
+              </span>
+            </label>
 
-        <div className="mt-4">
-          Already have an account?{" "}
-          <Link href="/login" className="text-primary">
-            Sign Up
-          </Link>
+            {walletAddress && (
+              <div className="mb-4 flex flex-col gap-1 p-2 rounded-md border w-fit">
+                <span>Connected wallet address</span>
+                <p>{formatWalletAddress(walletAddress)}</p>
+              </div>
+            )}
+
+            <Button loading={states.isLoading} type="submit">
+              Register
+            </Button>
+          </form>
+
+          <div className="mt-4">
+            Already have an account?{" "}
+            <Link href="/login" className="text-primary">
+              Sign Up
+            </Link>
+          </div>
         </div>
-      </div>
-    </section>
+      </section>
+
+      <Modal open={!isConnected}>
+        <ConnectToMetamaskModal />
+      </Modal>
+    </>
   )
 }