From 472598e038814dc6a295559e648a331c666a4853 Mon Sep 17 00:00:00 2001
From: shuvadeepmondal <121492365+shuvadeepmondal@users.noreply.github.com>
Date: Sun, 14 Jul 2024 17:43:53 +0530
Subject: [PATCH] Register Page Added

---
 .../20240714113546_init/migration.sql         |   2 +
 apps/frontend/src/App.tsx                     |   2 +
 apps/frontend/src/components/Login.tsx        |  26 ++---
 apps/frontend/src/components/Register.tsx     | 103 ++++++++++++++++++
 4 files changed, 120 insertions(+), 13 deletions(-)
 create mode 100644 apps/backend/src/prisma/migrations/20240714113546_init/migration.sql
 create mode 100644 apps/frontend/src/components/Register.tsx

diff --git a/apps/backend/src/prisma/migrations/20240714113546_init/migration.sql b/apps/backend/src/prisma/migrations/20240714113546_init/migration.sql
new file mode 100644
index 0000000..fe39232
--- /dev/null
+++ b/apps/backend/src/prisma/migrations/20240714113546_init/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "OTP" ALTER COLUMN "expiresAt" SET DEFAULT CURRENT_TIMESTAMP + interval '10 minutes';
diff --git a/apps/frontend/src/App.tsx b/apps/frontend/src/App.tsx
index 197eaa2..a2c5c2b 100644
--- a/apps/frontend/src/App.tsx
+++ b/apps/frontend/src/App.tsx
@@ -3,6 +3,7 @@ import Home from "./components/Home";
 import Navbar from "./components/Navbar";
 import Login from "./components/Login";
 import ProfileSetup from "./components/ProfileSetup";
+import Register from "./components/Register";
 
 
 function App() {
@@ -16,6 +17,7 @@ function App() {
         />
         <Route path="/login" element={<Login />} />
         <Route path="/profile" element={ <ProfileSetup/> }/>
+        <Route path="/register" element={ <Register/> }/>
       </Routes>
 
     </>
diff --git a/apps/frontend/src/components/Login.tsx b/apps/frontend/src/components/Login.tsx
index 29531a3..a56881c 100644
--- a/apps/frontend/src/components/Login.tsx
+++ b/apps/frontend/src/components/Login.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import log_img from "../assets/login-animate.svg";
-
+import { Link } from "react-router-dom";
 
 
 
@@ -22,44 +22,44 @@ export default function Login(): JSX.Element {
   };
   return (
     <main className="w-full h-screen flex ">
-      <div className="grid grid-cols-1  md:grid-cols-2 m-auto h-[450px] sm:max-w-[850px] rounded-2xl">
+      <div className="grid grid-cols-1  md:grid-cols-2 m-auto h-[400px] sm:max-w-[800px] rounded-2xl">
         <div className="w-full h-[300px] hidden md:block">
-          <img className="mt-14" src={log_img} alt="" />
+          <img className="mt-12" src={log_img} alt="" />
         </div>
         <div className="p-5 flex flex-col justify-around">
         <form onSubmit={handleClick}>
-        <h1 className="text-5xl ml-[110px] poppins-semibold text-slate-900 mb-3 ">Login</h1>
+        <h1 className="text-5xl ml-[110px] poppins-semibold text-slate-900 mb-8 ">Login</h1>
             <div>
               <label className="poppins-medium ml-1 text-slate-600">Email Address</label>
               <input
-                className="border px-3 py-2 w-[350px] rounded-xl bg-slate-100 mt-2"
+                className="border px-3 py-2 w-[350px] rounded-xl bg-slate-100 mt-3"
                 type="text"
                 placeholder="example@gmail.com"
                 value={email}
                 onChange={handleEmailChange}
               />
              </div>
-            <div>
-              <label className="poppins-medium ml-1 text-slate-600">Password</label>
+            <div className="mt-3">
+              <label className="poppins-medium ml-1 text-slate-600">Enter Password</label>
               <input
-                className="border px-3 py-2 w-[350px] rounded-xl bg-slate-100 mt-2"
+                className="border px-3 py-2 w-[350px] rounded-xl bg-slate-100 mt-3"
                 type="password"
                 placeholder="Your Password"
                 value={password}
                 onChange={handlePasswordChange}
               />
             </div>
-            <div className=" ml-44">
-                       <button className='ml-10 font-medium text-base text-blue-500'>Forgot Password?</button>
+            <div className=" ml-56 ">
+                       <button className='mt-3 font-normal text-base text-blue-500'>Forgot Password?</button>
                    </div>
             <button
-              className=" ml-14 w-[230px] active:scale-[.98] active:duration-75 hover:scale-[1.01] ease-in-out transition-all p-2.5 rounded-3xl bg-gradient-to-r from-violet-700 to-blue-500  text-white text-lg font-semibold poppins-extrabold"
+              className=" ml-14 mt-3 w-[230px] active:scale-[.98] active:duration-75 hover:scale-[1.01] ease-in-out transition-all p-2.5 rounded-3xl bg-gradient-to-r from-blue-700 to-blue-500  text-white text-lg font-semibold poppins-extrabold"
               key="1"
             ><p>Log in</p>
             </button>
-                <div className='mt-2 flex ml-[50px]'>
+                <div className='mt-6 flex ml-[50px]'>
                     <p className="font-medium text-base"> Did not have an Account ?</p>
-                    <button className="text-blue-500 text-base font-medium ml-2 ">Register</button>
+                    <button className="text-blue-500 text-base font-normal ml-2"><Link to ="/register">Register</Link></button>
                </div>
         </form>
    </div>
diff --git a/apps/frontend/src/components/Register.tsx b/apps/frontend/src/components/Register.tsx
new file mode 100644
index 0000000..d2a2eab
--- /dev/null
+++ b/apps/frontend/src/components/Register.tsx
@@ -0,0 +1,103 @@
+import { useState } from "react";
+import reg_img from "../assets/mobile-login-animate.svg";
+import { Link } from "react-router-dom";
+
+export default function Register(): JSX.Element {
+    const [email, setEmail] = useState<string>("");
+    const [password, setPassword] = useState<string>("");
+    const [username, setName] = useState<string>("");
+    const [phonenumber, setPhonenumber] = useState<string>("");
+  
+    const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      setName(event.target.value);
+    };
+    const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      setEmail(event.target.value);
+    };
+    const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      setPassword(event.target.value);
+    };
+    const handlePhonenumberChange = (
+      event: React.ChangeEvent<HTMLInputElement>) => {
+      setPhonenumber(event.target.value);
+    };
+  
+    const handleClick = async (event: React.FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+    };
+    return (
+      <main className="w-full h-screen flex">
+        <div className="grid grid-cols-1 md:grid-cols-2 m-auto h-[520px] sm:max-w-[900px] rounded-2xl">
+          <div className="w-full  h-[450px] hidden md:block ">
+            <img
+              className="w-full mt-[100px] ml-2 h-[380px]"
+              src={reg_img}
+              alt="/"
+            />
+          </div>
+          <div className="p-4 flex flex-col justify-around">
+            <form onSubmit={handleClick}>
+              <h2 className="text-4xl font-medium text-center mb-8 mr-10">
+                Create <span className="text-blue-600">Account</span>
+              </h2>
+              <div className="mt-3">
+              <label className="poppins-medium ml-1 text-slate-600">Enter Username</label>
+                <input
+                  className="border px-3 py-2 w-[350px] rounded-xl bg-slate-100 mt-3"
+                  type="username"
+                  placeholder="eg.John Doe"
+                  value={username}
+                  onChange={handleNameChange}
+                />
+              </div>
+              <div className="mt-3">
+              <label className="poppins-medium ml-1 text-slate-600">Email Address</label>
+                <input
+                  className="border px-3 py-2 w-[350px] rounded-xl bg-slate-100 mt-3 "
+                  type="email"
+                  placeholder="example@gmail.com"
+                  value={email}
+                  onChange={handleEmailChange}
+                />
+              </div>
+  
+              <div className="mt-3">
+              <label className="poppins-medium ml-1 text-slate-600">Phone Number</label>
+                <input
+                  className="border px-3 py-2 w-[350px] rounded-xl bg-slate-100 mt-3"
+                  type="phone"
+                  placeholder="+91 9876543210"
+                  value={phonenumber}
+                  onChange={handlePhonenumberChange}
+                />
+              </div>
+  
+              <div className='mt-3'>
+              <label className="poppins-medium ml-1 text-slate-600">Enter Password</label>
+                <input
+                  className="border px-3 py-2 w-[350px] rounded-xl bg-slate-100 mt-3"
+                  type="password"
+                  placeholder="Your Password"
+                  value={password}
+                  onChange={handlePasswordChange}
+                />
+              </div>
+              <button
+                className=" ml-[60px] mt-4 w-[230px] active:scale-[.98] active:duration-75 hover:scale-[1.01] ease-in-out transition-all p-2.5 rounded-3xl bg-gradient-to-r from-blue-700 to-blue-500  text-white text-lg font-semibold poppins-extrabold"
+                key="1"
+              >
+                Register
+              </button>
+  
+              <div className="mt-6 flex ml-[55px]">
+                <p className="font-medium text-base">Already have an account ?</p>
+                <button className="text-blue-500 text-base font-normal ml-2 ">
+                  <Link to="/login">Login</Link>
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </main>
+    );
+}
\ No newline at end of file