victorAnumudu
261 lines
11 KiB
React
261 lines
11 KiB
React
/* eslint-disable no-unused-expressions */
|
|
|
|
import React, { useState } from "react";
|
|
import Icons from "../../Helpers/Icons";
|
|
// import PasswordSvg from "../PasswordSvg";
|
|
import LoadingSpinner from "../../Spinners/LoadingSpinner";
|
|
import usersService from "../../../services/UsersService";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
export default function ChangePasswordTab() {
|
|
const apiUrl = new usersService()
|
|
const navigate = useNavigate()
|
|
|
|
const [oldPass, setOldPass] = useState("hide-password");
|
|
const [newPass, setNewPass] = useState("hide-password");
|
|
const [confirmPass, setConfirmPass] = useState("hide-password");
|
|
|
|
const [requestStatus, setRequestStatus] = useState({loading: false, status: false, message: ''})
|
|
|
|
const [inputEmpty, setInputEmpty] = useState(false)
|
|
let [inputs, setInputs] = useState({
|
|
old_pwd: '',
|
|
new_pwd: '',
|
|
confirm_new_pwd: ''
|
|
})
|
|
|
|
const handleInputChange = ({target:{name, value}}) => { // FUNCTION TO HANDLE WHEN AN INPUT CHANGES
|
|
setInputs(prev => ({...prev, [name]:value}))
|
|
}
|
|
|
|
const handleCancel = () => { // FUNCTION TO CLEAR ALL TYPED INPUTS
|
|
setInputs({
|
|
old_pwd: '',
|
|
new_pwd: '',
|
|
confirm_new_pwd: ''
|
|
})
|
|
}
|
|
|
|
const showPassword = (value) => {
|
|
const password = document.getElementById(`${value}`);
|
|
if (value && value === "old_password") {
|
|
if (password.type === "password") {
|
|
password.type = "text";
|
|
setOldPass("show-password");
|
|
} else {
|
|
password.type = "password";
|
|
setOldPass("hide-password");
|
|
}
|
|
}
|
|
if (value && value === "new_password") {
|
|
if (password.type === "password") {
|
|
password.type = "text";
|
|
setNewPass("show-password");
|
|
} else {
|
|
password.type = "password";
|
|
setNewPass("hide-password");
|
|
}
|
|
}
|
|
if (value && value === "confirm_password") {
|
|
if (password.type === "password") {
|
|
password.type = "text";
|
|
setConfirmPass("show-password");
|
|
} else {
|
|
password.type = "password";
|
|
setConfirmPass("hide-password");
|
|
}
|
|
}
|
|
};
|
|
|
|
const handlePwdUpdate = () => {
|
|
setInputEmpty(false) // SETS THE STATE OF ANY INPUT IS EMPTY TO FALSE
|
|
if(!inputs.old_pwd || !inputs.new_pwd || !inputs.confirm_new_pwd){ // CHECKS IF ANY INPUT FIELD IS EMPTY AND SETS INPUT EMPTY TO TRUE
|
|
setInputEmpty(true)
|
|
return setTimeout(()=>{setInputEmpty(false)},3000)
|
|
}
|
|
|
|
if(inputs.new_pwd != inputs.confirm_new_pwd){ // CHECKS IF PASSWORD MATCHES CONFIRM PASSWORD
|
|
setRequestStatus({loading: false, status: false, message: 'new password must match confirm password'})
|
|
return setTimeout(()=>{setRequestStatus({loading: false, status: false, message: ''})},3000)
|
|
}
|
|
|
|
if(/^[a-zA-Z0-9]*$/.test(inputs.new_pwd) == false){ // CHECKS IF PASSWORD IS ALPHANUMERIC
|
|
setRequestStatus({loading: false, status: false, message: 'password must be alphanumeric'})
|
|
return setTimeout(()=>{setRequestStatus({loading: false, status: false, message: ''})},3000)
|
|
}
|
|
|
|
if(inputs.new_pwd.length < 6){ // CHECKS IF PASSWORD IS UPTO SIX CHARACTERS
|
|
setRequestStatus({loading: false, status: false, message: 'password must be upto six characters'})
|
|
return setTimeout(()=>{setRequestStatus({loading: false, status: false, message: ''})},3000)
|
|
}
|
|
|
|
|
|
let reqData = { // REQUEST PAYLOAD
|
|
current_pass: inputs.old_pwd,
|
|
new_pass: inputs.new_pwd
|
|
}
|
|
|
|
|
|
setRequestStatus({loading: true, status: false, message: ''})
|
|
|
|
apiUrl.profilePassChange(reqData).then(res => {
|
|
if(res.status != 200 || res.data.internal_return < 0){
|
|
setRequestStatus({loading: false, status: false, message: 'unable to complete request'})
|
|
return
|
|
}
|
|
setRequestStatus({loading: false, status: true, message: 'password update was successful'})
|
|
setTimeout(()=>{navigate('/settings', {replace: true})}, 5000)
|
|
}).catch(err => {
|
|
setRequestStatus({loading: false, status: false, message: 'unable to complete request'})
|
|
}).finally(()=>{
|
|
setTimeout(()=>{setRequestStatus({loading: false, status: false, message: ''})},4000)
|
|
})
|
|
}
|
|
return (
|
|
<div className="changePasswordTab w-full">
|
|
<div className="w-full">
|
|
<div className="content-heading w-full mb-8">
|
|
<h1 className="text-2xl font-extrabold text-black dark:text-white antialiased">
|
|
Reset Password
|
|
</h1>
|
|
</div>
|
|
<div className="w-full md:w-[calc(100%-100px)] md:ml-auto pb-10">
|
|
<div className="input-field mb-6">
|
|
<label
|
|
className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5"
|
|
htmlFor="old_password"
|
|
>
|
|
Current Password <span className="text-[10px] text-red-500 italic px-2">{(inputEmpty && !inputs.old_pwd) && 'required'}</span>
|
|
</label>
|
|
<div className="input-wrapper border border-light-purple dark:border-[#5356fb29] w-full rounded-[50px] h-[58px] overflow-hidden relative ">
|
|
<div className="absolute left-6 bottom-[17px] z-10">
|
|
<Icons name="password" />
|
|
</div>
|
|
<input
|
|
placeholder="● ● ● ● ● ●"
|
|
className="input-field placeholder:text-base text-bese px-12 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F] focus:ring-0 focus:outline-none"
|
|
type="password"
|
|
id="old_password"
|
|
value={inputs.old_pwd}
|
|
name='old_pwd'
|
|
onChange={handleInputChange}
|
|
autoComplete='false'
|
|
/>
|
|
<div
|
|
className="absolute right-6 bottom-[17px] z-10 cursor-pointer"
|
|
onClick={() => showPassword("old_password")}
|
|
>
|
|
<Icons name={oldPass} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="input-field mb-6">
|
|
<label
|
|
className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5"
|
|
htmlFor="new_password"
|
|
>
|
|
New Password <span className="text-[10px] text-red-500 italic px-2">{(inputEmpty && !inputs.new_pwd) && 'required'}</span>
|
|
</label>
|
|
<div className="input-wrapper border border-light-purple dark:border-[#5356fb29] w-full rounded-[50px] h-[58px] overflow-hidden relative ">
|
|
<div className="absolute left-6 bottom-[17px] z-10">
|
|
<Icons name="password" />
|
|
</div>
|
|
<input
|
|
placeholder="● ● ● ● ● ●"
|
|
className="input-field placeholder:text-base text-bese px-12 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F] focus:ring-0 focus:outline-none"
|
|
type="password"
|
|
id="new_password"
|
|
value={inputs.new_pwd}
|
|
name='new_pwd'
|
|
onChange={handleInputChange}
|
|
autoComplete='false'
|
|
/>
|
|
<div
|
|
className="absolute right-6 bottom-[17px] z-10 cursor-pointer"
|
|
onClick={() => showPassword("new_password")}
|
|
>
|
|
<Icons name={newPass} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="input-field mb-8">
|
|
<label
|
|
className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5"
|
|
htmlFor="confirm_password"
|
|
>
|
|
Confirm Password <span className="text-[10px] text-red-500 italic px-2">{(inputEmpty && !inputs.confirm_new_pwd) && 'required'}</span>
|
|
</label>
|
|
<div className="input-wrapper border border-light-purple dark:border-[#5356fb29] w-full rounded-[50px] h-[58px] overflow-hidden relative ">
|
|
<div className="absolute left-6 bottom-[17px] z-10">
|
|
<Icons name="password" />
|
|
</div>
|
|
<input
|
|
placeholder="● ● ● ● ● ●"
|
|
className="input-field placeholder:text-base text-bese px-12 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F] focus:ring-0 focus:outline-none"
|
|
type="password"
|
|
id="confirm_password"
|
|
value={inputs.confirm_new_pwd}
|
|
name='confirm_new_pwd'
|
|
onChange={handleInputChange}
|
|
autoComplete='false'
|
|
/>
|
|
<div
|
|
className="absolute right-6 bottom-[17px] z-10 cursor-pointer"
|
|
onClick={() => showPassword("confirm_password")}
|
|
>
|
|
<Icons name={confirmPass} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex w-full md:w-[calc(100%-128px)] md:ml-auto justify-between gap-4 items-center">
|
|
<button
|
|
type="button"
|
|
className="text-light-red text-18 tracking-wide border-b dark:border-[#5356fb29] border-light-red"
|
|
disabled={requestStatus.loading}
|
|
onClick={handleCancel}
|
|
>
|
|
Cancel
|
|
</button>
|
|
{requestStatus.loading ?
|
|
<LoadingSpinner size='8' color='sky-blue' />
|
|
:
|
|
<button
|
|
type="button"
|
|
className="btn-gradient tracking-wide rounded-full w-[173px] h-[46px] flex justify-center items-center"
|
|
disabled={requestStatus.loading}
|
|
onClick={handlePwdUpdate}
|
|
>
|
|
<span className="font-thin text-18 tracking-wide antialiased text-white">
|
|
Change Password
|
|
</span>
|
|
</button>
|
|
}
|
|
</div>
|
|
|
|
{/* error or success display */}
|
|
{requestStatus.message != "" &&
|
|
(!requestStatus.status ? (
|
|
<div
|
|
className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
|
|
>
|
|
{requestStatus.message}
|
|
</div>
|
|
) : (
|
|
requestStatus.status && (
|
|
<div
|
|
className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
|
|
>
|
|
{requestStatus.message}
|
|
</div>
|
|
)
|
|
))}
|
|
{/* End of error or success display */}
|
|
</div>
|
|
{/* <div className="w-[440px] sm:flex hidden justify-end">
|
|
<PasswordSvg />
|
|
</div> */}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|