From 7da992c8abeef25fb3a17c6000c2fef048e296ea Mon Sep 17 00:00:00 2001 From: Advik Arora Date: Mon, 26 Feb 2024 20:07:13 -0500 Subject: [PATCH 1/9] button disabling feature --- compass/app/auth/new_Password/page.tsx | 76 ++++++++++++++++++++++++++ compass/components/Button.tsx | 17 +++--- 2 files changed, 85 insertions(+), 8 deletions(-) create mode 100644 compass/app/auth/new_Password/page.tsx diff --git a/compass/app/auth/new_Password/page.tsx b/compass/app/auth/new_Password/page.tsx new file mode 100644 index 0000000..0ccee79 --- /dev/null +++ b/compass/app/auth/new_Password/page.tsx @@ -0,0 +1,76 @@ +// pages/index.tsx +"use client"; +import { useState, useEffect } from 'react'; +import Button from '@/components/Button'; +import Input from '@/components/Input'; +import Paper from '@/components/auth/Paper'; + + +function isStrongPassword(password: string): boolean { + const strongPasswordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*]).{8,}$/; + return strongPasswordRegex.test(password); +} + + +export default function Page() { + const [newPassword, setNewPassword] = useState(''); + const [confirmPassword, setConfirmPassword] = useState(''); + const [isButtonDisabled, setIsButtonDisabled] = useState(true); + + + useEffect(() => { + setIsButtonDisabled(newPassword === '' || confirmPassword === ''); + }, [newPassword, confirmPassword]); + + + return ( + <> + +
{ + e.preventDefault(); + if (newPassword === confirmPassword) { + console.log('Passwords match. Submitting form...'); + } else { + console.log('Passwords do not match. Please try again.'); + } + }} + className="mb-0 mt-6 mb-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white" + > +
+

New Password

+
+
+ { + setNewPassword(e.target.value); + }} + /> +
+
+ { + setConfirmPassword(e.target.value); + }} + /> +
+
+ +
+
+

© 2024 Compass Center

+ + + ); +} + + + diff --git a/compass/components/Button.tsx b/compass/components/Button.tsx index 72c47f9..bf6dd55 100644 --- a/compass/components/Button.tsx +++ b/compass/components/Button.tsx @@ -3,21 +3,22 @@ import { FunctionComponent, ReactNode } from 'react'; type ButtonProps = { children: ReactNode; onClick?: () => void; // make the onClick handler optional + type?: "button" | "submit" | "reset"; // specify possible values for type + disabled?: boolean; }; -const Button: FunctionComponent = ({ children, onClick }) => { +const Button: FunctionComponent = ({ children, type, disabled, onClick }) => { + const buttonClassName = `inline-block rounded border ${disabled ? 'bg-gray-400 text-gray-600 cursor-not-allowed' : 'border-purple-600 bg-purple-600 text-white hover:bg-transparent hover:text-purple-600 focus:outline-none focus:ring active:text-purple-500'} px-12 py-3 text-sm font-semibold`; return ( ); }; + export default Button; From c510c590576460a1e2bb53355f0d6aa70b9d49af Mon Sep 17 00:00:00 2001 From: Advik Arora Date: Tue, 27 Feb 2024 14:53:03 -0500 Subject: [PATCH 2/9] debug disabled prop --- compass/app/auth/{new_Password => newPassword}/page.tsx | 5 ++++- compass/components/Input.tsx | 6 ++++-- 2 files changed, 8 insertions(+), 3 deletions(-) rename compass/app/auth/{new_Password => newPassword}/page.tsx (91%) diff --git a/compass/app/auth/new_Password/page.tsx b/compass/app/auth/newPassword/page.tsx similarity index 91% rename from compass/app/auth/new_Password/page.tsx rename to compass/app/auth/newPassword/page.tsx index 0ccee79..a49f566 100644 --- a/compass/app/auth/new_Password/page.tsx +++ b/compass/app/auth/newPassword/page.tsx @@ -19,7 +19,10 @@ export default function Page() { useEffect(() => { - setIsButtonDisabled(newPassword === '' || confirmPassword === ''); + console.log('newPassword',newPassword) + console.log('confirmPassword',confirmPassword) + setIsButtonDisabled(newPassword === '' || confirmPassword === '' || newPassword !== confirmPassword); + console.log('newPasswordDisabledTest',isButtonDisabled) }, [newPassword, confirmPassword]); diff --git a/compass/components/Input.tsx b/compass/components/Input.tsx index 618295b..d5a4348 100644 --- a/compass/components/Input.tsx +++ b/compass/components/Input.tsx @@ -1,13 +1,14 @@ -import React, { FunctionComponent, InputHTMLAttributes, ReactNode } from 'react'; +import React, { FunctionComponent, InputHTMLAttributes, ReactNode, ChangeEvent } from 'react'; type InputProps = InputHTMLAttributes & { icon?: ReactNode; title?: ReactNode; type?:ReactNode; placeholder?:ReactNode + onChange: (event: ChangeEvent) => void; }; -const Input: FunctionComponent = ({ icon, type, title, placeholder, ...rest }) => { +const Input: FunctionComponent = ({ icon, type, title, placeholder, onChange, ...rest }) => { return (
From 6dcb0eb5ccc784a204d0879b9fe025038ac0d19b Mon Sep 17 00:00:00 2001 From: Nicholas Date: Thu, 29 Feb 2024 19:20:58 -0500 Subject: [PATCH 3/9] added validation for strong passwords. --- compass/app/auth/newPassword/page.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/compass/app/auth/newPassword/page.tsx b/compass/app/auth/newPassword/page.tsx index a49f566..cdf55d8 100644 --- a/compass/app/auth/newPassword/page.tsx +++ b/compass/app/auth/newPassword/page.tsx @@ -15,15 +15,21 @@ function isStrongPassword(password: string): boolean { export default function Page() { const [newPassword, setNewPassword] = useState(''); const [confirmPassword, setConfirmPassword] = useState(''); + const [valid, setValid] = useState(false); + const [matching, setMatching] = useState(false); const [isButtonDisabled, setIsButtonDisabled] = useState(true); + useEffect(() => { + setValid(isStrongPassword(newPassword)) + setMatching(newPassword === confirmPassword) + }, [newPassword, confirmPassword]) useEffect(() => { - console.log('newPassword',newPassword) - console.log('confirmPassword',confirmPassword) - setIsButtonDisabled(newPassword === '' || confirmPassword === '' || newPassword !== confirmPassword); + setIsButtonDisabled(newPassword === '' || confirmPassword === '' || !matching || !valid); + console.log(matching) + console.log(valid) console.log('newPasswordDisabledTest',isButtonDisabled) - }, [newPassword, confirmPassword]); + }, [matching, valid]); return ( From 21c4717bc8de5b8ce4b781e400fedd43be16cc13 Mon Sep 17 00:00:00 2001 From: Nicholas Date: Thu, 29 Feb 2024 22:51:58 -0500 Subject: [PATCH 4/9] Added error messages with tips when invalid or not matching. --- compass/app/auth/newPassword/page.tsx | 30 ++++++++++++++++++++------- 1 file changed, 23 insertions(+), 7 deletions(-) diff --git a/compass/app/auth/newPassword/page.tsx b/compass/app/auth/newPassword/page.tsx index cdf55d8..d230894 100644 --- a/compass/app/auth/newPassword/page.tsx +++ b/compass/app/auth/newPassword/page.tsx @@ -15,20 +15,24 @@ function isStrongPassword(password: string): boolean { export default function Page() { const [newPassword, setNewPassword] = useState(''); const [confirmPassword, setConfirmPassword] = useState(''); - const [valid, setValid] = useState(false); - const [matching, setMatching] = useState(false); + const [valid, setValid] = useState(true); + const [matching, setMatching] = useState(true); const [isButtonDisabled, setIsButtonDisabled] = useState(true); useEffect(() => { - setValid(isStrongPassword(newPassword)) + if (newPassword !== ''){ + setValid(isStrongPassword(newPassword)) + } + }, [newPassword]) + + useEffect(() => { + if (confirmPassword !== ''){ setMatching(newPassword === confirmPassword) - }, [newPassword, confirmPassword]) + } +}, [newPassword, confirmPassword]) useEffect(() => { setIsButtonDisabled(newPassword === '' || confirmPassword === '' || !matching || !valid); - console.log(matching) - console.log(valid) - console.log('newPasswordDisabledTest',isButtonDisabled) }, [matching, valid]); @@ -59,6 +63,12 @@ export default function Page() { }} />
+ {valid ? null :
+ Password is not strong enough. +

+ Tip: Use a mix of letters, numbers, and symbols for a strong password. Aim for at least 8 characters! +

+
}
+ {matching ? null :
+ Passwords do not match. +

+ Please make sure both passwords are the exact same! +

+
}
- {valid ? null :
+ {isStrongPassword(newPassword) || newPassword === '' ? null :
Password is not strong enough.

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() { }} />

- {matching ? null :
+ {newPassword === confirmPassword || confirmPassword === '' ? null :
Passwords do not match.

Please make sure both passwords are the exact same! diff --git a/compass/components/Input.tsx b/compass/components/Input.tsx index d5a4348..07c4d16 100644 --- a/compass/components/Input.tsx +++ b/compass/components/Input.tsx @@ -5,15 +5,16 @@ type InputProps = InputHTMLAttributes & { title?: ReactNode; type?:ReactNode; placeholder?:ReactNode + valid?:boolean; onChange: (event: ChangeEvent) => void; }; -const Input: FunctionComponent = ({ icon, type, title, placeholder, onChange, ...rest }) => { +const Input: FunctionComponent = ({ icon, type, title, placeholder, onChange, valid, ...rest }) => { return (

{newPassword === confirmPassword || confirmPassword === '' ? null :
- Passwords do not match. -

+ Passwords do not match. +

Please make sure both passwords are the exact same!

} diff --git a/compass/components/Input.tsx b/compass/components/Input.tsx index 3eced0a..0517a01 100644 --- a/compass/components/Input.tsx +++ b/compass/components/Input.tsx @@ -14,6 +14,7 @@ const Input: FunctionComponent = ({ icon, type, title, placeholder,