Skip to content

Commit

Permalink
Merge pull request #81 from Asadaaaaa/dev/zkaa
Browse files Browse the repository at this point in the history 
fix responsive
  • Loading branch information
@zkazharan
zkazharan authored Nov 4, 2023
2 parents a61677b + 60e921a commit 7ea5dd6
Show file tree
Hide file tree
Showing 16 changed files with 564 additions and 168 deletions.
69 changes: 66 additions & 3 deletions src/app/email-verification/Form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,8 @@ export default function Form () {
}, [timer]);

return (
<form className="bg-[rgba(2,6,23,0.5)] px-28 py-24 border-solid border-2 border-slate-700 rounded-[50px] backdrop-blur-[2px]">
<div className="flex flex-col gap-4 items-center">
<form className="bg-[rgba(2,6,23,0.5)] px-6 sm:px-16 md:px-28 py-8 md:py-12 border-solid border-2 border-slate-700 rounded-[20px] sm:rounded-[50px] backdrop-blur-[2px]">
<div className="flex flex-col gap-5 md:gap-4 items-center">
<h1 className={`${font.Satoshi_h3bold} text-white`}>Email Verification</h1>
<h6 className={`${font.Satoshi_b2regular} text-white`}>Open your email and find the verification code</h6>
<Input
Expand Down Expand Up @@ -168,7 +168,70 @@ export default function Form () {
<button
type="submit"
disabled={loading}
className={`${font.Satoshi_b2medium} w-full px-6 py-3 text-center text-white rounded-xl bg-gradient-to-b from-cyan-500 to-blue-500 hover:drop-shadow-[0px_0px_4px_rgba(34,211,238,0.4)] transition-all`}
className={`${font.Satoshi_b2medium} hidden md:block w-full px-6 py-3 text-center text-white rounded-xl bg-gradient-to-b from-cyan-500 to-blue-500 hover:drop-shadow-[0px_0px_4px_rgba(34,211,238,0.4)] transition-all`}
onClick={async(e) => {
e.preventDefault();

setLoading(true);

if (code.length < 6) {
setCodeError(true);
setWarningText("Your verification code is invalid");

setLoading(false);

return;
}

const res = await validCode(getCookie("regAuth"), code);

if (res.status === "200") {
setCookie("auth", res.data.token);
setCookie("refreshAuth", res.data.refreshToken);
deleteCookie("regAuth");

router.push("home");
} else if (res.status === "token") {
toast.error("Request Unauthorized", {
position: "top-center",
autoClose: 3000,
hideProgressBar: true,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "colored",
});

router.push("register");
} else if (res.status === "validator") {
toast.error("Something Wrong With Your Input", {
position: "top-center",
autoClose: 3000,
hideProgressBar: true,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "colored",
});
} else if (res.status === "-1") {
setCodeError(true);
setWarningText("Your verification code is invalid");
} else if (res.status === "-2") {
setCodeError(true);
setWarningText("Your verification code has expired");
}

setLoading(false);
}}
>
{loading ? <Loading type="points-opacity" size="lg" color="white" /> : "Verify Email"}
</button>
<button
type="submit"
disabled={loading}
className={`${font.Satoshi_b1medium} block md:hidden w-full px-6 py-3 text-center text-white rounded-xl bg-gradient-to-b from-cyan-500 to-blue-500 hover:drop-shadow-[0px_0px_4px_rgba(34,211,238,0.4)] transition-all`}
onClick={async(e) => {
e.preventDefault();

Expand Down
10 changes: 5 additions & 5 deletions src/app/email-verification/ProgressTwo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,20 @@ import font from '../font.module.css';

export default function ProgressTwo() {
return (
<div className="flex justify-center relative gap-56">
<div className="flex justify-center relative gap-24 md:gap-56">
<div className="flex flex-col items-center gap-2 relative z-[3]">
<div className="flex justify-center items-center w-20 h-20 bg-cyan-400 rounded-full shadow-[0px_0px_16px_rgba(34,211,238,0.4)]">
<FaCheck className="text-slate-900 text-3xl" />
<div className="flex justify-center items-center w-12 h-12 md:w-20 md:h-20 bg-cyan-400 rounded-full shadow-[0px_0px_16px_rgba(34,211,238,0.4)]">
<FaCheck className="text-slate-900 text-xl md:text-3xl" />
</div>
<div>
<h5 className={`${font.Clash_display_h5medium} text-cyan-400 text-center`}>Step 1</h5>
<h6 className={`${font.Satoshi_c2medium} text-cyan-400 text-center`}>Account Creation</h6>
</div>
</div>
<div className="w-64 h-[42px] border-b-4 border-b-solid border-b-cyan-400 border-box absolute z-[2]">
<div className="w-52 md:w-64 h-[26px] md:h-[42px] border-b-4 border-b-solid border-b-cyan-400 border-box absolute z-[2]">
</div>
<div className="flex flex-col items-center gap-2 relative z-[3]">
<div className="flex justify-center items-center w-20 h-20 bg-cyan-400 rounded-full">
<div className="flex justify-center items-center w-12 h-12 md:w-20 md:h-20 bg-cyan-400 rounded-full">
<h2 className={`${font.Clash_display_h2medium} text-slate-700`}>2</h2>
</div>
<div>
Expand Down
4 changes: 2 additions & 2 deletions src/app/email-verification/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,9 @@ export default function EmailVerification() {
) : (
<main>
<Header register={false} login={true} />
<div className="bg-slate-950 relative overflow-hidden py-16 min-h-[calc(100vh-145.39px)]">
<div className="bg-slate-950 relative overflow-hidden py-12 md:py-16 min-h-[calc(100vh-100.19px)] md:min-h-[calc(100vh-105.39px)]">
<BgGradient />
<div className="flex flex-col gap-16 items-center relative z-[2]">
<div className="flex flex-col gap-12 md:gap-16 items-center relative z-[2]">
<ProgressTwo />
<Form />
</div>
Expand Down
67 changes: 64 additions & 3 deletions src/app/forgot-password/Form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,10 @@ export default function Form () {
const emailPattern = /^[A-Za-z0-9._%+-]+@(upi\.edu|gmail\.com)$/

return (
<form className="bg-[rgba(2,6,23,0.5)] px-28 py-12 border-solid border-2 border-slate-700 rounded-[50px] backdrop-blur-[2px]">
<form className="bg-[rgba(2,6,23,0.5)] px-6 sm:px-16 md:px-28 py-8 md:py-12 border-solid border-2 border-slate-700 rounded-[20px] sm:rounded-[50px] backdrop-blur-[2px]">
<div className="flex flex-col gap-12 items-center">
<h1 className={`${font.Satoshi_h3bold} text-white`}>Forgot your password ?</h1>
<h1 className={`${font.Satoshi_h3bold} text-white hidden md:block`}>Forgot your password ?</h1>
<h1 className={`${font.Satoshi_h4bold} text-white block md:hidden`}>Forgot your password ?</h1>
<div className="flex flex-col gap-4 items-center w-[350px]">
<h6 className={`${font.Satoshi_b2regular} text-white text-center`}>Enter your email and we'll send you a link to get back into your account</h6>
<Input
Expand Down Expand Up @@ -60,7 +61,67 @@ export default function Form () {
<button
type="submit"
disabled={loading}
className={`${font.Satoshi_b2medium} w-full px-6 py-3 text-center text-white rounded-xl bg-gradient-to-b from-cyan-500 to-blue-500 hover:drop-shadow-[0px_0px_4px_rgba(34,211,238,0.4)] transition-all`}
className={`${font.Satoshi_b2medium} hidden md:block w-full px-6 py-3 text-center text-white rounded-xl bg-gradient-to-b from-cyan-500 to-blue-500 hover:drop-shadow-[0px_0px_4px_rgba(34,211,238,0.4)] transition-all`}
onClick={async(e) => {
e.preventDefault();

setLoading(true);

if (email === "") {
setEmailError(true);
setWarningText("Please enter your email");

setLoading(false);

return;
}

if (!emailPattern.test(email)) {
setEmailError(true);
setWarningText("Please enter a valid email");

setLoading(false);

return;
}

const res = await reqForgotPassword(email);

if (res.status === "200") {
toast.success("Email sent", {
position: "top-center",
autoClose: 3000,
hideProgressBar: true,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "colored",
});

setSuccess(true);
} else if (res.status === "validator") {
toast.error("Something Wrong With Your Input", {
position: "top-center",
autoClose: 3000,
hideProgressBar: true,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "colored",
});
}

setLoading(false);
}}
>
{loading ? <Loading type="points-opacity" size="lg" color="white" /> : "Get Link"}
</button>
<button
type="submit"
disabled={loading}
className={`${font.Satoshi_b1medium} block md:hidden w-full px-6 py-3 text-center text-white rounded-xl bg-gradient-to-b from-cyan-500 to-blue-500 hover:drop-shadow-[0px_0px_4px_rgba(34,211,238,0.4)] transition-all`}
onClick={async(e) => {
e.preventDefault();

Expand Down
2 changes: 1 addition & 1 deletion src/app/forgot-password/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export default function ForgotPassword() {
return (
<main>
<Header register={true} login={false} />
<div className="bg-slate-950 relative overflow-hidden py-28 min-h-[calc(100vh-145.39px)]">
<div className="bg-slate-950 relative overflow-hidden py-28 min-h-[calc(100vh-98.19px)] md:min-h-[calc(100vh-103.39px)]">
<BgGradient />
<div className="flex flex-col gap-16 items-center relative z-[2]">
<Form />
Expand Down
50 changes: 48 additions & 2 deletions src/app/login/Form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export default function Form () {
}, [])

return (
<form className="bg-[rgba(2,6,23,0.5)] px-28 py-12 border-solid border-2 border-slate-700 rounded-[50px] backdrop-blur-[2px]">
<form className="bg-[rgba(2,6,23,0.5)] px-6 sm:px-16 md:px-28 py-8 md:py-12 border-solid border-2 border-slate-700 rounded-[20px] sm:rounded-[50px] backdrop-blur-[2px]">
<div className="flex flex-col gap-4 items-center">
<h1 className={`${font.Satoshi_h3bold} text-white`}>Login</h1>
<Input
Expand Down Expand Up @@ -100,7 +100,53 @@ export default function Form () {
<button
type="submit"
disabled={loading}
className={`${font.Satoshi_b2medium} w-full px-6 py-3 text-center text-white rounded-xl bg-gradient-to-b from-cyan-500 to-blue-500 hover:drop-shadow-[0px_0px_4px_rgba(34,211,238,0.4)] transition-all`}
className={`${font.Satoshi_b2medium} hidden md:block w-full px-6 py-3 text-center text-white rounded-xl bg-gradient-to-b from-cyan-500 to-blue-500 hover:drop-shadow-[0px_0px_4px_rgba(34,211,238,0.4)] transition-all`}
onClick={async(e) => {
e.preventDefault();

setLoading(true);

if (data.identity === "" || data.password === "" || data.password.length < 6) {
setDataError({ ...dataError, identity: true, password: true});
setWarningText("Username or password is wrong");

setLoading(false);

return;
}

const res = await login(data.identity, data.password);

if (res.status === "200") {
setCookie("auth", res.data.token);
setCookie("refreshAuth", res.data.refreshToken);

router.push("home");
} else if (res.status === "validator") {
toast.error("Something Wrong With Your Input", {
position: "top-center",
autoClose: 3000,
hideProgressBar: true,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "colored",
});
} else if (res.status === "-1") {
setDataError({ ...dataError, identity: true, password: true});
setWarningText("Username or password is wrong");
}

setLoading(false);
}}
>
{loading ? <Loading type="points-opacity" size="lg" color="white" /> : "Login"}
</button>
<button
type="submit"
disabled={loading}
className={`${font.Satoshi_b1medium} block md:hidden w-full px-6 py-3 text-center text-white rounded-xl bg-gradient-to-b from-cyan-500 to-blue-500 hover:drop-shadow-[0px_0px_4px_rgba(34,211,238,0.4)] transition-all`}
onClick={async(e) => {
e.preventDefault();

Expand Down
2 changes: 1 addition & 1 deletion src/app/login/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export default function Login() {
return (
<main>
<Header register={true} login={false} />
<div className="bg-slate-950 relative overflow-hidden py-28 min-h-[calc(100vh-145.39px)]">
<div className="bg-slate-950 relative overflow-hidden py-28 min-h-[calc(100vh-98.19px)] md:min-h-[calc(100vh-103.39px)]">
<BgGradient />
<div className="flex flex-col gap-16 items-center relative z-[2]">
<Form />
Expand Down
95 changes: 93 additions & 2 deletions src/app/new-password/Form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export default function Form () {
const passwordPattern = /^\S+$/;

return (
<form className="bg-[rgba(2,6,23,0.5)] px-28 py-12 border-solid border-2 border-slate-700 rounded-[50px] backdrop-blur-[2px]">
<form className="bg-[rgba(2,6,23,0.5)] px-6 sm:px-16 md:px-28 py-8 md:py-12 border-solid border-2 border-slate-700 rounded-[20px] sm:rounded-[50px] backdrop-blur-[2px]">
<div className="flex flex-col gap-12 items-center">
<h1 className={`${font.Satoshi_h3bold} text-white`}>Set a new password</h1>
<div className="flex flex-col gap-4 items-center w-[350px]">
Expand Down Expand Up @@ -110,7 +110,98 @@ export default function Form () {
<button
type="submit"
disabled={loading}
className={`${font.Satoshi_b3bold} w-full px-6 py-3 text-center text-white rounded-xl bg-gradient-to-b from-cyan-500 to-blue-500 hover:drop-shadow-[0px_0px_4px_rgba(34,211,238,0.4)] transition-all`}
className={`${font.Satoshi_b2medium} hidden md:block w-full px-6 py-3 text-center text-white rounded-xl bg-gradient-to-b from-cyan-500 to-blue-500 hover:drop-shadow-[0px_0px_4px_rgba(34,211,238,0.4)] transition-all`}
onClick={async(e) => {
e.preventDefault();

setLoading(true)

if (data.password === "") {
setDataError({ ...dataError, password: true});
setWarningText("Password can't be empty");

setLoading(false);

return;
}

if (data.password.length < 6) {
setDataError({ ...dataError, password: true});
setWarningText("Minimum length for password is 6 characters");

setLoading(false);

return;
}

if (!passwordPattern.test(data.password)) {
setDataError({ ...dataError, password: true, confirmPassword: true});
setWarningText("Input should consist of a single sequence of non-whitespace characters.");

setLoading(false);

return;
}

if (data.password !== data.confirmPassword) {
setDataError({ ...dataError, password: true, confirmPassword: true});
setWarningText("Passwords can't be different");

setLoading(false);

return;
}

const res = await newForgotPassword(token, data.password);

if (res.status === "200") {
toast.success("Password successfully changed", {
position: "top-center",
autoClose: 3000,
hideProgressBar: true,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "colored",
});

router.push("login");
} else if (res.status === "validator") {
toast.error("Something Wrong With Your Input", {
position: "top-center",
autoClose: 3000,
hideProgressBar: true,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "colored",
});
} else if (res.status === "-1") {
toast.error("Your link is invalid", {
position: "top-center",
autoClose: 3000,
hideProgressBar: true,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "colored",
});

router.push("forgot-password");
}

setLoading(false);
}}
>
{loading ? <Loading type="points-opacity" size="lg" color="white" /> : "Reset Password"}
</button>
<button
type="submit"
disabled={loading}
className={`${font.Satoshi_b1medium} block md:hidden w-full px-6 py-3 text-center text-white rounded-xl bg-gradient-to-b from-cyan-500 to-blue-500 hover:drop-shadow-[0px_0px_4px_rgba(34,211,238,0.4)] transition-all`}
onClick={async(e) => {
e.preventDefault();

Expand Down
Loading

0 comments on commit 7ea5dd6

Please sign in to comment.