Skip to content

Commit

Permalink
resolved conflicts
Browse files Browse the repository at this point in the history
  • Loading branch information
@RB-Isiaq
RB-Isiaq committed Oct 23, 2023
2 parents 0e7cfb6 + 6270ffb commit ab3a71f
Show file tree
Hide file tree
Showing 19 changed files with 1,098 additions and 531 deletions.
5 changes: 3 additions & 2 deletions app/(mentee)/(dashboard-route)/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import MobileSideBar from "@/components/MobileSideBar";
import LoadingSpinner from "@/components/loaders/LoadingSpinner";
import { NavbarMentee } from "@/components/menteeTopNav/NavbarMentee";
import useAuth from "@/context/useAuth";
import ProtectedRoute from "@/context/ProtectedRoute";

const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
const pathParams = useSearchParams().get("path");
Expand All @@ -22,7 +23,7 @@ const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
userName || email
}`;
return (
<>
<ProtectedRoute>
<MenteeSideBar
path={pathParams}
userName={userName}
Expand All @@ -43,7 +44,7 @@ const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
<MobileSideBar path={pathParams} action={actionParams} />
<Suspense fallback={<LoadingSpinner />}>{children}</Suspense>
</main>
</>
</ProtectedRoute>
);
};

Expand Down
100 changes: 53 additions & 47 deletions app/(mentee)/mentee-auth/forget-password/ForgetPassword.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,13 @@ import Input from "@/components/inputs/input";
import { Button } from "@/components/buttons/button";

import Modal from "@/components/modal/Modal";
import LoadingSpinner from "@/components/loaders/LoadingSpinner";
import { BackwardIcon } from "@/public/SVGs";

const ResetPassword = () => {
const [email, setEmail] = useState<string>("");
const [isOpen, setIsOpen] = useState<boolean>(false);
const [imgLoading, setImgLoading] = React.useState(false);

const closeModal = (): void => {
setIsOpen(false);
Expand Down Expand Up @@ -59,64 +62,67 @@ const ResetPassword = () => {

return (
<div>
<div className="w-full h-[100vh] grid grid-cols-1 lg:grid-cols-6 overflow-hidden">
<div className="w-9/10 max-w-[700px] lg:w-4/5 lg:max-xl:w-4/5 xl:w-4/5 lg:max-w-[1350px] mx-auto mt-[4rem] grid grid-cols-1 lg:grid-cols-6 overflow-hidden shadow-xl shadow-gray-100 rounded-[20px]">
<div className="lg:col-span-3 ">
<div style={{ position: "relative", width: "100%", height: "100%" }}>
{imgLoading && (
<div className="flex w-full min-h-screen justify-center items-center relative scale-150">
<LoadingSpinner />
</div>
)}
<div className="w-full h-full relative">
<Image
src={auth}
alt="Authentication Image"
layout="fill"
objectFit="cover"
loading="lazy"
onLoadingComplete={() => setImgLoading(false)}
className="hidden lg:block"
/>
</div>
</div>
<div className="col-span-3 px-4 lg:px-6 xl:px-16 md:mt-7">
<Link href="/">
<h2 className="text-[#2A2A2A] font-Gladiora text-3xl mt-5">
Mentor Me
</h2>
</Link>
<Link href="/mentee-auth/login">
<div className="flex items-center gap-2 my-5">
<Image src={back} width={20} height={20} alt="back-icon" />
<h5 className="font-Hanken text-[18px]">Back</h5>
</div>
</Link>

<div className="flex justify-center flex-col">
<h4 className="font-Inter font-medium text-[#121212] text-xl mt-6">
Forgot Password
</h4>
<p className="font-Hanken text-[#808080] flex justify-end text-sm my-3">
No worries, we will send your reset instructions to your
registered email address
</p>
<div className="flex flex-col gap-5 mb-5">
<Input
id="password"
label="Email Address"
required
type="email"
name="mentor-email"
value={email}
onChange={handleChange}
<div className="col-span-3 px-4 lg:px-6 xl:px-16">
<div className="flex w-9/10 xl:w-full mx-auto xl:mx-auto lg:mx-0 lg:max-xl:relative lg:max-xl:left-[8%] flex-col py-[3rem] xl:pb-[12rem]">
<a href="/welcome/login" className="flex">
{" "}
<BackwardIcon />
</a>

<div className="flex justify-center flex-col">
<h4 className="font-Inter font-medium text-[#121212] text-xl mt-6">
Forgot Password
</h4>
<p className="font-Hanken text-[#808080] flex justify-end text-sm my-5">
No worries, we will send your reset instructions to your
registered email address
</p>
<div className="flex flex-col gap-5 my-[1rem]">
<Input
id="password"
label="Email Address"
required
type="email"
name="mentor-email"
value={email}
onChange={handleChange}
/>
</div>

<Button
variant="primary"
paddingLess
className="w-full py-[1.1rem]"
onClick={handleSubmit}
>
Reset Password
</Button>
<Modal
isOpen={isOpen}
closeModal={closeModal}
content="A resent link has been sent to your email address. Please follow the instructions to reset your password"
buttontext="Check Inbox"
/>
</div>

<Button
variant="primary"
paddingLess
className="w-full h-[48px] mt-4"
onClick={handleSubmit}
>
Reset Password
</Button>
<Modal
isOpen={isOpen}
closeModal={closeModal}
content="A resent link has been sent to your email address. Please follow the instructions to reset your password"
buttontext="Check Inbox"
/>
</div>
</div>
</div>
Expand Down
78 changes: 61 additions & 17 deletions app/(mentee)/mentee-auth/login/LoginForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-unsafe-optional-chaining */

"use client";
Expand All @@ -21,21 +22,31 @@ import Input from "@/components/inputs/input";
import { BackwardIcon } from "@/public/SVGs";
import LoadingSpinner from "@/components/loaders/LoadingSpinner";
import Button from "../../(dashboard-route)/mentee-sessions/(ui)/VxrcelBtn";
import EmailValidator from "@/components/inputs/email-validator";
import NonEmptyValidator from "@/components/inputs/non-empty-validator";
import { useAuthCtx } from "@/context/AuthContext";

export default function LoginForm() {
const router = useRouter();
const { setUserData } = useAuthCtx();
const [isLoading, setIsLoading] = useState(false);
const [imgLoading, setImgLoading] = React.useState(false);
const [user, setUser] = React.useState<any>();
const [isValid, setIsValid] = React.useState(true);
const [isEmailValid, setisEmailValid] = useState(false);
const [isPasswordValid, setIsPasswordValid] = useState(true);
const [inputChanged, setInputChanged] = useState(false);
const [formData, setFormData] = React.useState({
email: "",
password: "",
});

const isDisabled = !formData.email.match(
/^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]{2,}$/
);

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setInputChanged(true);
setFormData((prev) => ({
...prev,
[name]: value,
Expand All @@ -48,9 +59,11 @@ export default function LoginForm() {
const form = e.currentTarget as HTMLFormElement;

if (form.checkValidity() === false) {
setIsValid(false);
setisEmailValid(false);
setIsPasswordValid(false);
} else {
setIsValid(true);
setisEmailValid(true);
setIsPasswordValid(true);

axios
.post("https://mentormee-api.onrender.com/auth/login", {
Expand Down Expand Up @@ -85,52 +98,78 @@ export default function LoginForm() {
};
return (
<div>
<div className="w-full h-[100vh] grid grid-cols-1 lg:grid-cols-6 overflow-hidden">
<div className="w-9/10 max-w-[700px] lg:w-4/5 lg:max-xl:w-4/5 xl:w-4/5 lg:max-w-[1350px] mt-[4rem] mx-auto grid grid-cols-1 lg:grid-cols-6 overflow-hidden shadow-xl shadow-gray-100 rounded-[20px]">
<div className="lg:col-span-3 ">
<div style={{ position: "relative", width: "100%", height: "100%" }}>
{imgLoading && (
<div className="flex w-full min-h-screen justify-center items-center relative scale-150">
<LoadingSpinner />
</div>
)}
<div className="w-full h-full relative">
<Image
src={auth}
alt="Authentication Image"
layout="fill"
objectFit="cover"
loading="lazy"
onLoadingComplete={() => setImgLoading(false)}
className="hidden lg:block"
/>
</div>
</div>
<div className="col-span-3 px-4 lg:px-6 xl:px-16 md:mt-7">
<div className="col-span-3 px-4 lg:px-6 xl:px-16 ">
<div className="flex justify-between items-center">
<h2 className="text-[#2A2A2A] font-Gladiora text-3xl mt-5">
{/* <h2 className="text-[#2A2A2A] font-Gladiora text-3xl mt-5">
<a href="/"> Mentor Me</a>
</h2>

</h2> */}
</div>
<div className="flex w-9/10 xl:w-full mx-auto xl:mx-auto lg:mx-0 lg:max-xl:relative lg:max-xl:left-[8%] flex-col py-[3rem]">
<a href="/welcome/login" className="flex">
{" "}
<BackwardIcon /> <span className="ms-2">Go back</span>
<BackwardIcon />
</a>
</div>
<div className="flex justify-center flex-col">
<h4 className="font-Inter font-medium text-[#121212] text-xl mt-6">
Welcome Back
Log in As Mentee
</h4>
<h5 className="text-[#808080] text-base font-Hanken mt-2 mb-5">
Login into your account
</h5>
<form className="flex flex-col gap-5" onSubmit={handleSumbit}>
<Input
id="email"
label="Email Address"
required
type="email"
name="email"
isValid={
inputChanged && !isEmailValid
? "border-red-500"
: "border-[#CCC]"
}
onChange={handleInputChange}
/>
<EmailValidator
email={formData.email}
setIsValid={setisEmailValid}
onValidEmail={() => setisEmailValid(true)}
inputChanged={inputChanged}
/>
<Input
id="password"
label="Password"
required
type="password"
name="password"
isValid={
inputChanged && !isPasswordValid
? "border-red-500"
: "border-[#CCC]"
}
onChange={handleInputChange}
/>
<NonEmptyValidator
text={formData.password}
setIsValid={setIsPasswordValid}
onValidText={() => setIsPasswordValid(true)}
inputChanged={inputChanged}
/>

<Link href="/mentee-auth/forget-password">
{" "}
Expand All @@ -148,7 +187,12 @@ export default function LoginForm() {
title="Log in"
type="submit"
variant="primary"
className="w-full h-[48px]"
disabled={!isEmailValid || !isPasswordValid}
className={`w-full py-[1.1rem] ${
!isEmailValid || !isPasswordValid
? "opacity-60 hover:bg-gray-400 cursor-not-allowed"
: ""
}`}
fullWidth
loading={isLoading}
/>
Expand Down
35 changes: 28 additions & 7 deletions app/(mentee)/mentee-auth/otp/VerifyOTP.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
"use client";

import { useEffect, useState } from "react";
import React, { useEffect, useState } from "react";
import Image from "next/image";
import { useRouter } from "next/navigation";
import { toast } from "react-toastify";
Expand All @@ -9,9 +9,14 @@ import OTPInput from "@/components/Otp";
import auth from "../../../../public/assets/images/auth.jpeg";
import Modal from "@/components/modal/Modal";

import { BackwardIcon } from "@/public/SVGs";
import LoadingSpinner from "@/components/loaders/LoadingSpinner";

function VerifyOTP() {
const [otpValue, setOTPValue] = useState("");
const router = useRouter();

const [imgLoading, setImgLoading] = React.useState<boolean>(false);
const [useremail, setUserEmail] = useState("");
const [userid, setUserId] = useState("");
const [user, setUser] = useState<any>();
Expand Down Expand Up @@ -78,23 +83,39 @@ function VerifyOTP() {
};
return (
<div>
<div className="w-full h-[100vh] grid sm:grid-cols-6 overflow-hidden">
<div className="sm:col-span-3 ">
<div style={{ position: "relative", width: "100%", height: "100%" }}>
<div className="w-9/10 max-w-[600px] lg:w-4/5 lg:max-xl:w-4/5 xl:w-4/5 md:max-lg:max-w-[] lg:max-w-[1350px] mx-auto mt-[4rem] grid grid-cols-1 lg:grid-cols-6 overflow-hidden shadow-xl shadow-gray-100 rounded-[20px]">
<div className="lg:col-span-3 ">
{imgLoading && (
<div className="flex w-full min-h-screen justify-center items-center relative scale-150">
<LoadingSpinner />
</div>
)}
<div className="w-full h-full relative">
<Image
src={auth}
alt="Authentication Image"
layout="fill"
objectFit="cover"
loading="lazy"
onLoadingComplete={() => setImgLoading(false)}
className="hidden lg:block"
/>
</div>
</div>
<div className="col-span-3 px-6 sm:px-16">
<div className="mt-6">
<a href="/" className="text-[#2A2A2A] font-Gladiora text-3xl">
<div className="flex w-9/10 xl:w-full mx-auto xl:mx-auto lg:mx-0 lg:max-xl:relative lg:max-xl:left-[8%] flex-col py-[3rem] xl:pb-[15rem]">
<a href="/welcome/login" className="flex">
{" "}
<BackwardIcon />
</a>
<a
href="/"
className="text-[#2A2A2A] block font-Gladiora text-3xl my-[1rem]"
>
Mentor Me
</a>
<h4 className="font-Inter font-medium text-[#121212] text-xl mt-10">

<h4 className="font-Inter font-medium text-[#121212] text-xl">
OTP Verification
</h4>
<h5 className="text-[#808080] text-sm font-Hanken mt-2 mb-10">
Expand Down
Loading

0 comments on commit ab3a71f

Please sign in to comment.