rushilwiz/compass
1
0
Fork 0
mirror of https://github.com/cssgunc/compass.git synced 2025-04-06 20:50: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() {
const [newPassword, setNewPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [valid, setValid] = useState(true);
const [matching, setMatching] = useState(true);
const [isButtonDisabled, setIsButtonDisabled] = useState(true);
useEffect(() => {
if (newPassword !== ''){
setValid(isStrongPassword(newPassword))
}
}, [newPassword])
useEffect(() => {
if (confirmPassword !== ''){
setMatching(newPassword === confirmPassword)
}
}, [newPassword, confirmPassword])
useEffect(() => {
setIsButtonDisabled(newPassword === '' || confirmPassword === '' || !matching || !valid);
}, [matching, valid]);
setIsButtonDisabled(newPassword === '' || confirmPassword === '' || newPassword !== confirmPassword|| !isStrongPassword(newPassword));
}, [newPassword, confirmPassword]);
return (
@ -58,12 +44,13 @@ export default function Page() {
type="password"
title="Enter New Password"
value={newPassword}
valid={isButtonDisabled}
onChange={(e) => {
setNewPassword(e.target.value);
}}
/>
</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>
<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!
@ -79,7 +66,7 @@ export default function Page() {
}}
/>
</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>
<p className="mt-2 text-sm text-red-700">
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;
type?:ReactNode;
placeholder?:ReactNode
valid?:boolean;
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 (
<div>
<label
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>