rushilwiz/compass
1
0
Fork 0
mirror of https://github.com/cssgunc/compass.git synced 2025-04-10 06:10:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

simplified code by removing multiple useEffects()

Browse Source
This commit is contained in:
Nicholas 2024-03-02 01:40:02 -05:00
parent 21c4717bc8
commit fb15863b2f
3 changed files with 9 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1 @@
{}

23
compass/app/auth/newPassword/page.tsx
View File

@ -15,25 +15,11 @@ function isStrongPassword(password: string): boolean {
export default function Page() { export default function Page() {
const [newPassword, setNewPassword] = useState(''); const [newPassword, setNewPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState(''); const [confirmPassword, setConfirmPassword] = useState('');
const [valid, setValid] = useState(true);
const [matching, setMatching] = useState(true);
const [isButtonDisabled, setIsButtonDisabled] = useState(true); const [isButtonDisabled, setIsButtonDisabled] = useState(true);
useEffect(() => { useEffect(() => {
if (newPassword !== ''){ setIsButtonDisabled(newPassword === '' || confirmPassword === '' || newPassword !== confirmPassword|| !isStrongPassword(newPassword));
setValid(isStrongPassword(newPassword)) }, [newPassword, confirmPassword]);
}
}, [newPassword])
useEffect(() => {
if (confirmPassword !== ''){
setMatching(newPassword === confirmPassword)
}
}, [newPassword, confirmPassword])
useEffect(() => {
setIsButtonDisabled(newPassword === '' || confirmPassword === '' || !matching || !valid);
}, [matching, valid]);
return ( return (
@ -58,12 +44,13 @@ export default function Page() {
type="password" type="password"
title="Enter New Password" title="Enter New Password"
value={newPassword} value={newPassword}
valid={isButtonDisabled}
onChange={(e) => { onChange={(e) => {
setNewPassword(e.target.value); setNewPassword(e.target.value);
}} }}
/> />
</div> </div>
{valid ? null : <div role="alert" className="rounded border-s-4 border-red-500 bg-red-50 p-4"> {isStrongPassword(newPassword) || newPassword === '' ? null : <div role="alert" className="rounded border-s-4 border-red-500 bg-red-50 p-4">
<strong className="block font-medium text-red-800"> Password is not strong enough. </strong> <strong className="block font-medium text-red-800"> Password is not strong enough. </strong>
<p className="mt-2 text-sm text-red-700"> <p className="mt-2 text-sm text-red-700">
Tip: Use a mix of letters, numbers, and symbols for a strong password. Aim for at least 8 characters! Tip: Use a mix of letters, numbers, and symbols for a strong password. Aim for at least 8 characters!
@ -79,7 +66,7 @@ export default function Page() {
}} }}
/> />
</div> </div>
{matching ? null : <div role="alert" className="rounded border-s-4 border-red-500 bg-red-50 p-4"> {newPassword === confirmPassword || confirmPassword === '' ? null : <div role="alert" className="rounded border-s-4 border-red-500 bg-red-50 p-4">
<strong className="block font-medium text-red-800"> Passwords do not match. </strong> <strong className="block font-medium text-red-800"> Passwords do not match. </strong>
<p className="mt-2 text-sm text-red-700"> <p className="mt-2 text-sm text-red-700">
Please make sure both passwords are the exact same! Please make sure both passwords are the exact same!

5
compass/components/Input.tsx
View File

@ -5,15 +5,16 @@ type InputProps = InputHTMLAttributes<HTMLInputElement> & {
title?: ReactNode; title?: ReactNode;
type?:ReactNode; type?:ReactNode;
placeholder?:ReactNode placeholder?:ReactNode
valid?:boolean;
onChange: (event: ChangeEvent<HTMLInputElement>) => void; onChange: (event: ChangeEvent<HTMLInputElement>) => void;
}; };
const Input: FunctionComponent<InputProps> = ({ icon, type, title, placeholder, onChange, ...rest }) => { const Input: FunctionComponent<InputProps> = ({ icon, type, title, placeholder, onChange, valid, ...rest }) => {
return ( return (
<div> <div>
<label <label
htmlFor={title} htmlFor={title}
className="block overflow-hidden rounded-md border border-gray-200 px-3 py-2 shadow-sm focus-within:border-purple-600 focus-within:ring-1 focus-within:ring-purple-600" className="block overflow-hidden rounded-md border border-gray-200 px-3 py-2 shadow-sm focus-within:border-red-600 focus-within:ring-1 focus-within:ring-red-600"
> >
<span className="text-xs font-semibold text-gray-700"> {title} </span> <span className="text-xs font-semibold text-gray-700"> {title} </span>