Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Reset password page enhancement #280 #308

Merged
merged 2 commits into from
Oct 30, 2021
Merged

feat: Reset password page enhancement #280 #308

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a48fa06
feat: added reset password page #280
codejijo Oct 27, 2021
cabe681
fix: remove unwanted code
codejijo Oct 28, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
224 changes: 133 additions & 91 deletions pages/reset-password.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
import React, { useState, useEffect } from "react";
import { useState } from "react";
import { useRouter } from "next/router";
import Head from "next/head";
import AuthService from "../services/AuthService";
import validatePassword from "../lib/validatePassword";
import { useRouter } from "next/router";
import notify from "../lib/notify";
import Loginstyles from "../styles/Login.module.css";
import SideLogin from "../component/login/side/SideLogin";
import Link from "next/link";
import Fade from "react-reveal/Fade";

export async function getServerSideProps(context) {
return {
Expand All @@ -30,25 +34,21 @@ export default function resetPassword({ query }) {
const passwordCheck = (name, value) => {
if (name === "newPassword") {
const validType = validatePassword(value);
// console.log("newPassword validType -", validType);
if (validType) {
setValidNewPassword(validType);
}
}

if (name === "confirmPassword") {
const validType = validatePassword(value);
// console.log("confirmPassword validType -", validType);
if (validType) {
setValidConfirmPassword(validType);
}
}
};

const handleInputChange = (e) => {
// console.log(e.target);
const { name, value } = e.target;
// console.log(name, value);
if (validNewPassword !== "" && name === "newPassword") {
passwordCheck(name, value);
}
Expand All @@ -65,10 +65,6 @@ export default function resetPassword({ query }) {
});
};

useEffect(() => {
// console.log(query);
}, []);

const resetPassword = async (newPass) => {
try {
const response = await AuthService.resetPassword(newPass, query.token);
Expand All @@ -80,13 +76,11 @@ export default function resetPassword({ query }) {
notify(err?.response?.data?.message ?? err?.message, 'error');
}
};

const handleSubmit = (e) => {
e.preventDefault();
// console.log(e.target.newPassword.value);
// console.log(e.target.confirmPassword.value);
const newPass = e.target.newPassword.value;
const confirmPass = e.target.confirmPassword.value;
// console.log({ password });
passwordCheck(e.target.newPassword.name, newPass);
passwordCheck(e.target.confirmPassword.name, confirmPass);
if (
Expand All @@ -97,89 +91,137 @@ export default function resetPassword({ query }) {
resetPassword(confirmPass);
}
};

const proceed = password.newPassword &&
validNewPassword === "valid" &&
password.confirmPassword &&
validConfirmPassword === "valid" &&
password.newPassword === password.confirmPassword ? true : false

return (
<div className="h-screen flex flex-col items-center justify-center">
<div>
<Head>
<title>Reset Password</title>
<title>Reset Password | Nullcast</title>
</Head>
<div className="h-1/2 w-2/3">
<form
onSubmit={handleSubmit}
className="flex flex-col items-center justify-center"
>
<label
htmlFor="newPassword"
className="font-semibold text-xl w-2/3 m-4 text-purple-600"
<Link href="/">
<img
src="/images/nullcast.svg"
alt="logo"
className="fixed left-5 lg:left-10 top-5 lg:top-10 z-50 cursor-pointer"
></img>
</Link>
<div
className={`w-full h-screen flex ${Loginstyles.bg_yellow_710} loginSection`}
>
<SideLogin />
<div className="flex justify-end w-full items-center">
<div
className={`${Loginstyles.bg_yellow_710} h-full flex flex-col items-center lg:items-end justify-center overflow-x-hidden greenLoginDiv`}
>
Enter new password
</label>
<input
id="newPassword"
name="newPassword"
type="text"
className="border border-purple-600 py-3 h-11 w-2/3"
onChange={handleInputChange}
onBlur={handleOnBlur}
value={password.newPassword}
/>
{validNewPassword === "empty" && (
<p className="text-sm text-red-400 text-left w-2/3">
Please enter a password
</p>
)}
{(validNewPassword === "length" ||
validNewPassword === "characters") && (
<p className="text-sm text-red-400 text-left w-2/3">
Your password must contain minimum of 8 characters and at least
one uppercase letter, one lowercase letter, one number and one
special character
</p>
)}
<div
className={`rounded-xl w-full py-5 sm:py-10 px-5 sm:px-10 md:px-5 lg:px-20 max-w-xl flex items-start justify-center flex-col greenLogin relative overflow-y-auto ${Loginstyles.formCard}`}
>
<Fade duration={2000}>
<h1 className="text-white font-bold text-2xl leading-10">
Reset Password
</h1>
<div className="container py-2 px-0-imp">
<form onSubmit={handleSubmit}>
<div className="mb-4 flex flex-col">
<label
htmlFor="newPassword"
className={`text-white mt-2 mb-1 font-semibold text-sm`}
>
Enter new password
</label>
<div className="relative w-full">
<input
placeholder="Enter new password"
maxLength="50"
className={`inputStyle placeholder-gray-600 w-full pr-10 ${Loginstyles.inputGreen}`}
id="newPassword"
name="newPassword"
type="text"
onChange={handleInputChange}
onBlur={handleOnBlur}
value={password.newPassword}
/>
</div>
{validNewPassword === "empty" && (
<p className="flex items-center font-bold tracking-wide text-red-danger text-xs mt-1 ml-0">
Please enter a password
</p>
)}
{(validNewPassword === "length" ||
validNewPassword === "characters") && (
<p className="flex items-center font-bold tracking-wide text-red-danger text-xs mt-1 ml-0">
Your password must contain minimum of 8 characters and at least
one uppercase letter, one lowercase letter, one number and one
special character
</p>
)}
</div>
<div className="mb-4 flex flex-col">
<label
htmlFor="confirmPassword"
className={`text-white mt-2 mb-1 font-semibold text-sm`}
>
Confirm new password
</label>
<div className="relative w-full">
<input
placeholder="Confirm new password"
maxLength="50"
className={`inputStyle placeholder-gray-600 w-full pr-10 ${Loginstyles.inputGreen}`}
id="confirmPassword"
name="confirmPassword"
type="text"
onBlur={handleOnBlur}
onChange={handleInputChange}
value={password.confirmPassword}
/>
</div>
{validConfirmPassword === "empty" && (
<p className="flex items-center font-bold tracking-wide text-red-danger text-xs mt-1 ml-0">
Please enter a password
</p>
)}
{(validConfirmPassword === "length" ||
validConfirmPassword === "characters") && (
<p className="flex items-center font-bold tracking-wide text-red-danger text-xs mt-1 ml-0">
Your password must contain minimum of 8 characters and at least
one uppercase letter, one lowercase letter, one number and one
special character
</p>
)}
{password.newPassword &&
validNewPassword === "valid" &&
password.confirmPassword &&
validConfirmPassword === "valid" &&
password.newPassword !== password.confirmPassword && (
<p className="flex items-center font-bold tracking-wide text-red-danger text-xs mt-1 ml-0 py-2">
Passwords are not equal
</p>
)}
</div>

<label
htmlFor="confirmPassword"
className="font-semibold text-xl w-2/3 m-4 text-purple-600"
>
Confirm new password
</label>
<input
id="confirmPassword"
name="confirmPassword"
type="text"
className="border border-purple-600 py-3 h-11 w-2/3"
onBlur={handleOnBlur}
onChange={handleInputChange}
value={password.confirmPassword}
/>
{validConfirmPassword === "empty" && (
<p className="text-sm text-red-400 text-left w-2/3">
Please enter a password
</p>
)}
{(validConfirmPassword === "length" ||
validConfirmPassword === "characters") && (
<p className="text-sm text-red-400 text-left w-2/3">
Your password must contain minimum of 8 characters and at least
one uppercase letter, one lowercase letter, one number and one
special character
</p>
)}
{password.newPassword &&
validNewPassword === "valid" &&
password.confirmPassword &&
validConfirmPassword === "valid" &&
password.newPassword !== password.confirmPassword && (
<p className="text-sm text-red-400 text-left w-2/3 py-2">
Passwords are not equal
</p>
)}
<button
type="submit"
className="bg-purple-600 text-white font-bold text-xl w-2/3 h-11 m-4"
>
Submit
</button>
</form>
<button
type="submit"
disabled={proceed ? false : true}
className={`submitButtons w-full flex items-center justify-center hover:bg-transparent ${
!proceed
? "opacity-50 cursor-not-allowed"
: "hover:bg-transparent hover-text-pink-710"
}`}
>
Submit
</button>
</form>
</div>
</Fade>
</div>
</div>
</div>
</div>
</div>
);
Expand Down