Register and Sign up feature

components/Layouts/HomeSideBar.tsx

@@ -1,7 +1,7 @@
 const HomeSidebar = (props: Record<string, string>) => {
     return (
-        <div className="col-span-4 flex flex-col gap-y-4 bg-sideBarColor h-screen">
-            <p className="text-white font-[semi-bold] mt-24 text-center text-4xl">Smart SC</p>
+        <div className="hidden lg:col-span-4 flex flex-col gap-y-28 bg-sideBarColor h-screen">
+            <p className="text-white font-[semi-bold] mt-10 ml-10 text-4xl">S<span className="text-yellowColor">s</span>c</p>
 
             <svg width="338" height="237" viewBox="0 0 338 237" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <g clipPath="url(#clip0)">
@@ -49,7 +49,7 @@ const HomeSidebar = (props: Record<string, string>) => {
                     </clipPath>
                 </defs>
             </svg>
-            <p className="text-white mx-auto w-40">A powerful, yet easy -to-use application for managing students’ information anywhere</p>
+            <p className="text-white text-center text-sm w-100">A powerful, yet easy -to-use application for managing students’ information anywhere</p>
         </div>
     )
 }

components/Layouts/Input.tsx

@@ -1,19 +1,6 @@
 import React from 'react';
 
-interface Props {
-  className: string;
-  placeholder: string;
-  type: string;
-}
-
-const Input = ({ props, ref }: { props: Props; ref: React.RefObject<HTMLInputElement> }) => {
-  return (
-    <input
-      className={`border-b-2 w-full border-yellow-200 outline-none ${props.className}`}
-      ref={ref}
-      type={props.type}
-      placeholder={props.placeholder}
-    />
-  );
-};
+const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
+  return <input className={`col-span-12 w-full border md:border w-80 p-2 rounded-md border-gray-300 outline-none ${props.className}`} ref={ref} type={props.type} placeholder={props.placeholder}/>;
+})
 export default Input;

components/Layouts/TitleSsc.tsx

@@ -0,0 +1,6 @@
+const TiltleSsc = () => {
+    return (
+    <p className="font-bold text-5xl">S<span className="text-yellowColor">s</span>c</p>
+    )
+}
+export default TiltleSsc;

components/Login.tsx

@@ -1,67 +1,83 @@
-import Link from 'next/link';
+import Input from "../components/Layouts/Input";
+import React, { useContext, useState } from "react";
+import Link from "next/link";
+import {
+  IModalContext,
+  ModalContext,
+} from "./state-management/ContextProvider";
+import { useEffect } from "react";
+import SignUpPage from "../pages/auth/register";
 
-export function Login() {
-  return (
-    <section className="flex flex-col justify-center px-12 py-10 shadow-md font-poppins">
-      <div className="flex justify-center">
-        <svg width="52" height="23" viewBox="0 0 52 23" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M8.8052 22.21C7.2652 22.21 5.8852 21.96 4.6652 21.46C3.4452 20.96 2.4652 20.22 1.7252 19.24C1.0052 18.26 0.625195 17.08 0.585195 15.7H6.0452C6.1252 16.48 6.3952 17.08 6.8552 17.5C7.3152 17.9 7.9152 18.1 8.6552 18.1C9.4152 18.1 10.0152 17.93 10.4552 17.59C10.8952 17.23 11.1152 16.74 11.1152 16.12C11.1152 15.6 10.9352 15.17 10.5752 14.83C10.2352 14.49 9.8052 14.21 9.2852 13.99C8.7852 13.77 8.0652 13.52 7.1252 13.24C5.7652 12.82 4.6552 12.4 3.7952 11.98C2.9352 11.56 2.1952 10.94 1.5752 10.12C0.955195 9.3 0.645195 8.23 0.645195 6.91C0.645195 4.95 1.3552 3.42 2.7752 2.32C4.1952 1.2 6.0452 0.64 8.3252 0.64C10.6452 0.64 12.5152 1.2 13.9352 2.32C15.3552 3.42 16.1152 4.96 16.2152 6.94H10.6652C10.6252 6.26 10.3752 5.73 9.9152 5.35C9.4552 4.95 8.8652 4.75 8.1452 4.75C7.5252 4.75 7.0252 4.92 6.6452 5.26C6.2652 5.58 6.0752 6.05 6.0752 6.67C6.0752 7.35 6.3952 7.88 7.0352 8.26C7.6752 8.64 8.6752 9.05 10.0352 9.49C11.3952 9.95 12.4952 10.39 13.3352 10.81C14.1952 11.23 14.9352 11.84 15.5552 12.64C16.1752 13.44 16.4852 14.47 16.4852 15.73C16.4852 16.93 16.1752 18.02 15.5552 19C14.9552 19.98 14.0752 20.76 12.9152 21.34C11.7552 21.92 10.3852 22.21 8.8052 22.21ZM35.3507 13.63C35.3507 11.89 35.7007 10.37 36.4007 9.07C37.1207 7.77 38.1107 6.77 39.3707 6.07C40.6507 5.37 42.1107 5.02 43.7507 5.02C45.8507 5.02 47.6007 5.57 49.0007 6.67C50.4207 7.77 51.3507 9.32 51.7907 11.32H46.3307C45.8707 10.04 44.9807 9.4 43.6607 9.4C42.7207 9.4 41.9707 9.77 41.4107 10.51C40.8507 11.23 40.5707 12.27 40.5707 13.63C40.5707 14.99 40.8507 16.04 41.4107 16.78C41.9707 17.5 42.7207 17.86 43.6607 17.86C44.9807 17.86 45.8707 17.22 46.3307 15.94H51.7907C51.3507 17.9 50.4207 19.44 49.0007 20.56C47.5807 21.68 45.8307 22.24 43.7507 22.24C42.1107 22.24 40.6507 21.89 39.3707 21.19C38.1107 20.49 37.1207 19.49 36.4007 18.19C35.7007 16.89 35.3507 15.37 35.3507 13.63Z"
-            fill="black"
-          />
-          <path
-            d="M26.4522 22.24C24.9922 22.24 23.6922 21.99 22.5522 21.49C21.4122 20.99 20.5122 20.31 19.8522 19.45C19.1922 18.57 18.8222 17.59 18.7422 16.51H23.8122C23.8722 17.09 24.1422 17.56 24.6222 17.92C25.1022 18.28 25.6922 18.46 26.3922 18.46C27.0322 18.46 27.5222 18.34 27.8622 18.1C28.2222 17.84 28.4022 17.51 28.4022 17.11C28.4022 16.63 28.1522 16.28 27.6522 16.06C27.1522 15.82 26.3422 15.56 25.2222 15.28C24.0222 15 23.0222 14.71 22.2222 14.41C21.4222 14.09 20.7322 13.6 20.1522 12.94C19.5722 12.26 19.2822 11.35 19.2822 10.21C19.2822 9.25 19.5422 8.38 20.0622 7.6C20.6022 6.8 21.3822 6.17 22.4022 5.71C23.4422 5.25 24.6722 5.02 26.0922 5.02C28.1922 5.02 29.8422 5.54 31.0422 6.58C32.2622 7.62 32.9622 9 33.1422 10.72H28.4022C28.3222 10.14 28.0622 9.68 27.6222 9.34C27.2022 9 26.6422 8.83 25.9422 8.83C25.3422 8.83 24.8822 8.95 24.5622 9.19C24.2422 9.41 24.0822 9.72 24.0822 10.12C24.0822 10.6 24.3322 10.96 24.8322 11.2C25.3522 11.44 26.1522 11.68 27.2322 11.92C28.4722 12.24 29.4822 12.56 30.2622 12.88C31.0422 13.18 31.7222 13.68 32.3022 14.38C32.9022 15.06 33.2122 15.98 33.2322 17.14C33.2322 18.12 32.9522 19 32.3922 19.78C31.8522 20.54 31.0622 21.14 30.0222 21.58C29.0022 22.02 27.8122 22.24 26.4522 22.24Z"
-            fill="#FFC700"
-          />
-        </svg>
-      </div>
-
-      <div className="py-12 text-center">
-        <h3 className="font-extrabold">Welcome back!</h3>
-        <p className="font-light text-light">Enter your login details here below</p>
-      </div>
+const LoginPage = () => {
+  const {
+    showSignIn,
+    setShowSignIn,
+    showSignUp,
+    setShowSignUp,
+  }: IModalContext = useContext(ModalContext);
 
-      <form>
-        <div className="flex flex-col mb-4 font-bold space-y-2">
-          <label htmlFor="emailInput" className="text-secondary">
-            {' '}
-            username or password{' '}
-          </label>
-          <input
-            type="email"
-            id="emailInput"
-            placeholder="Enter your email here"
-            className="border border-gray-200 p-2 rounded-md"
-          />
-        </div>
-        <div className="flex flex-col mb-4 font-bold  w-full">
-          <label htmlFor="passwordInput" className="text-secondary">
-            Password{' '}
-          </label>
-          <input
-            type="password"
-            id="passwordInput"
-            placeholder="Enter your password here"
-            className="border border-gray-200 p-2 rounded-md"
-          />
-        </div>
-        <div className="text-right py-4 font-extrabold">
-          <Link href="/forgotpassword">
-            <a className="text-base"> Forgot Password?</a>
-          </Link>
+  return (
+    <>
+      {showSignIn ? (
+        <div className="container grid grid-cols-12 font-sm font-poppins">
+          <div className="col-span-12 md:col-span-12 md:col-span-8 lg:col-span-12 flex justify-items-center justify-center">
+            <div className="m-0 w-full flex flex-col col-span-12 lg:w-4/5 mt-0 animated fadeIn faster p-4 items-center">
+              <p className="text-l mt-3 font-bold mb-3">Welcome back !</p>
+              <p className="text-sm mt-3">
+                Enter your account details here below
+              </p>
+              <div className="flex-row md:flex gap-x-12 flex-row mt-4 text-sm w-full flex-start">
+                <div className="w-full space-y-2 md:flex flex-col gap-y-2 w-3/4">
+                  <p className="text-yellowColor font-bold">
+                    User name or email
+                  </p>
+                  <div className="flex">
+                    <Input
+                      type={"text"}
+                      placeholder={"Enter your username or email"}
+                    />
+                  </div>
+                  <p className="text-yellowColor font-bold">Password</p>
+                  <div className="flex gap-x-2">
+                    <Input type={"text"} placeholder={"Enter your password"} />
+                  </div>
+                  <div className="grid justify-items-end">
+                    <p className="font-bold">Forgot your password?</p>
+                  </div>
+                  <div>
+                    <label className="inline-flex items-center">
+                      <input
+                        type="checkbox"
+                        className="h-4 w-4 checked:bg-yellow-600 "
+                      />
+                      <span className="ml-2">Remember me</span>
+                    </label>
+                  </div>
+                </div>
+              </div>
+              <button className="w-full bg-sideBarColor md:bg-sideBarColor mt-4 h-10 w-100 text-sm shadow-lg text-white font-bold">
+                Sign in
+              </button>
+              <p className="text-sm text-center mt-6">
+                New to Ssc?&emsp;
+                <span
+                  onClick={() => {
+                    setShowSignIn && setShowSignIn(false);
+                    setShowSignUp && setShowSignUp(true);
+                  }}
+                  className="text-sm text-yellowColor font-bold"
+                >
+                  <Link href={"#"}>SignUp</Link>
+                </span>
+                &emsp;
+              </p>
+            </div>
+          </div>
         </div>
-        <input
-          type="submit"
-          value="Login"
-          className="bg-primary text-secondary  py-2 cursor-pointer w-full text-white rounded-md"
-        />
-      </form>
-      <div className="text-center py-4 font-poppins">
-        New to Scs? {'  '}
-        <Link href="Register">
-          <a className="text-secondary">Register</a>
-        </Link>
-      </div>
-    </section>
+      ) : showSignUp ? (
+        <SignUpPage></SignUpPage>
+      ) : null}
+    </>
   );
-}
+};
+export default LoginPage;

components/Modal.tsx

@@ -0,0 +1,53 @@
+import React, { useState, ReactNode, useContext } from "react";
+import TitleSsc from "./Layouts/TitleSsc";
+import {
+  IModalContext,
+  ModalContext,
+} from "./state-management/ContextProvider";
+import Image from "next/image";
+
+type Props = {
+  children?: ReactNode;
+  modalSize?: string;
+};
+
+export default function Modal(props: Props) {
+  const { modalState, setModalState, setShowSignIn }: IModalContext =
+    useContext(ModalContext);
+  return (
+    <>
+      {modalState ? (
+        <>
+          <div className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none">
+            <div className="w-5/5 my-6 mx-auto max-w-3xl md:w-2/5">
+              {/*content*/}
+              <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
+                <div
+                  className="absolute -top-3 -right-3 cursor-pointer"
+                  onClick={() => {
+                    setModalState && setModalState(false),
+                      setShowSignIn && setShowSignIn(true);
+                  }}
+                >
+                  <Image
+                    src="/assets/images/close-image.svg"
+                    width={30}
+                    height={30}
+                    alt="about us component"
+                  />
+                </div>
+                {/*header*/}
+                <div className="flex items-center mt-5 mb-0 justify-center">
+                  <TitleSsc />
+                </div>
+                {/*body*/}
+                <div className="relative flex-auto">{props.children}</div>
+              </div>
+            </div>
+          </div>
+          <div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
+        </>
+      ) : null}
+    </>
+  );
+}