Add nav to signup

frontend/src/components/authentication/SignUpPage.jsx

@@ -1,24 +1,9 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import axiosapi from "../../api/AuthenticationApi";
 import { FcGoogle } from "react-icons/fc";
 import { useGoogleLogin } from "@react-oauth/google";
-
+import { NavPreLogin } from "../navigations/NavPreLogin";
-function Copyright(props) {
-  return (
-    <div className="text-center text-sm text-gray-500" {...props}>
-      {"Copyright © "}
-      <a
-        href="https://github.com/TurTaskProject/TurTaskWeb"
-        className="text-blue-500 hover:underline"
-      >
-        TurTask
-      </a>{" "}
-      {new Date().getFullYear()}
-      {"."}
-    </div>
-  );
-}
 
 export default function SignUp() {
   const Navigate = useNavigate();
@@ -50,10 +35,7 @@ export default function SignUp() {
   const handleChange = (e) => {
     const { name, value } = e.target;
     setFormData({ ...formData, [name]: value });
-    console.log(formData);
   };
-  {
-  }
 
   const googleLoginImplicit = useGoogleLogin({
     flow: "auth-code",
@@ -78,83 +60,73 @@ export default function SignUp() {
   });
 
   return (
-    <div className="h-screen flex items-center justify-center bg-gradient-to-r from-zinc-100 via-gray-200 to-zinc-100">
+    <div>
-      <div
+      <NavPreLogin text="Already have account?" btn_text="Log In" link="/login" />
-        aria-hidden="true"
+      <div className="h-screen flex items-center justify-center bg-gradient-to-r from-zinc-100 via-gray-200 to-zinc-100">
-        className="absolute inset-0 grid grid-cols-2 -space-x-52 opacity-40"
+        <div aria-hidden="true" className="absolute inset-0 grid grid-cols-2 -space-x-52 opacity-40">
-      >
+          <div className="blur-[106px] h-56 bg-gradient-to-br from-primary to-purple-400"></div>
-        <div className="blur-[106px] h-56 bg-gradient-to-br from-primary to-purple-400"></div>
+          <div className="blur-[106px] h-32 bg-gradient-to-r from-cyan-400 to-sky-300"></div>
-        <div className="blur-[106px] h-32 bg-gradient-to-r from-cyan-400 to-sky-300"></div>
+        </div>
-      </div>
+        <div className="w-1/4 h-1 flex items-center justify-center z-10">
-      <div className="w-1/4 h-1 flex items-center justify-center z-10">
+          <div className="w-96 bg-white rounded-lg p-8 space-y-4 z-10">
-        <div className="w-96 bg-white rounded-lg p-8 space-y-4 z-10">
+            {/* Register Form */}
-          {/* Register Form */}
+            <h2 className="text-3xl font-bold text-center">Signup</h2>
-          <h2 className="text-3xl font-bold text-center">Signup</h2>
+            {/* Email Input */}
-          {/* Email Input */}
+            <div className="form-control ">
-          <div className="form-control ">
+              <label className="label" htmlFor="email">
-            <label className="label" htmlFor="email">
+                <p className="text-bold">
-              <p className="text-bold">
+                  Email<span className="text-red-500 text-bold">*</span>
-                Email<span className="text-red-500 text-bold">*</span>
+                </p>
-              </p>
+              </label>
-            </label>
+              <input className="input" type="email" id="email" placeholder="Enter your email" onChange={handleChange} />
-            <input
+            </div>
-              className="input"
+            {/* Username Input */}
-              type="email"
+            <div className="form-control">
-              id="email"
+              <label className="label" htmlFor="Username">
-              placeholder="Enter your email"
+                <p className="text-bold">
-              onChange={handleChange}
+                  Username<span className="text-red-500 text-bold">*</span>
-            />
+                </p>
-          </div>
+              </label>
-          {/* Username Input */}
+              <input
-          <div className="form-control">
+                className="input"
-            <label className="label" htmlFor="Username">
+                type="text"
-              <p className="text-bold">
+                id="Username"
-                Username<span className="text-red-500 text-bold">*</span>
+                placeholder="Enter your username"
-              </p>
+                onChange={handleChange}
-            </label>
+              />
-            <input
+            </div>
-              className="input"
+            {/* Password Input */}
-              type="text"
+            <div className="form-control">
-              id="Username"
+              <label className="label" htmlFor="password">
-              placeholder="Enter your username"
+                <p className="text-bold">
-              onChange={handleChange}
+                  Password<span className="text-red-500 text-bold">*</span>
-            />
+                </p>
-          </div>
+              </label>
-          {/* Password Input */}
+              <input
-          <div className="form-control">
+                className="input"
-            <label className="label" htmlFor="password">
+                type="password"
-              <p className="text-bold">
+                id="password"
-                Password<span className="text-red-500 text-bold">*</span>
+                placeholder="Enter your password"
-              </p>
+                onChange={handleChange}
-            </label>
+              />
-            <input
+            </div>
-              className="input"
+            <br></br>
-              type="password"
-              id="password"
-              placeholder="Enter your password"
-              onChange={handleChange}
-            />
-          </div>
-          <br></br>
 
-          {/* Signups Button */}
+            {/* Signups Button */}
-          <button className="btn btn-success w-full " onClick={handleSubmit}>
+            <button className="btn btn-success w-full " onClick={handleSubmit}>
-            Signup
+              Signup
-          </button>
+            </button>
-          <div className="divider">OR</div>
+            <div className="divider">OR</div>
-          {/* Login with Google Button */}
+            {/* Login with Google Button */}
-          <button
+            <button className="btn btn-outline btn-secondary w-full " onClick={() => googleLoginImplicit()}>
-            className="btn btn-outline btn-secondary w-full "
+              <FcGoogle className="rounded-full bg-white" />
-            onClick={() => googleLoginImplicit()}
+              Login with Google
-          >
+            </button>
-            <FcGoogle className="rounded-full bg-white" />
+            {/* Already have an account? */}
-            Login with Google
+            <div className="text-blue-500 flex justify-center text-sm">
-          </button>
+              <a href="login">Already have an account?</a>
-          {/* Already have an account? */}
+            </div>
-          <div className="text-blue-500 flex justify-center text-sm">
-            <a href="login">Already have an account?</a>
           </div>
-          <Copyright />
         </div>
       </div>
     </div>