button disabling feature

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 (
+   <>
+     <Paper>
+       <form
+         onSubmit={(e) => {
+           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"
+       >
+         <div className="text-center sm:text-left">
+           <h1 className="text-2xl font-bold text-blue-900 sm:text-3xl">New Password</h1>
+         </div>
+         <div className="mb-4">
+           <Input
+               type="password"
+               title="Enter New Password"
+               value={newPassword}
+               onChange={(e) => {
+               setNewPassword(e.target.value);
+               }}
+           />
+         </div>
+         <div className="mb-6">
+           <Input
+               type="password"
+               title="Confirm Password"
+               value={confirmPassword}
+               onChange={(e) => {
+               setConfirmPassword(e.target.value);
+               }}
+           />
+         </div>
+         <div className="flex flex-col items-left space-y-4">
+            <Button type="submit" disabled={isButtonDisabled} >
+             Send
+           </Button>
+         </div>
+       </form>
+       <p className="text-center mt-6 text-gray-500 text-xs">&copy; 2024 Compass Center</p>
+     </Paper>
+   </>
+ );
+}
+
+
+

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<ButtonProps> = ({ children, onClick }) => {
+const Button: FunctionComponent<ButtonProps> = ({ 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 (
         <button
-        // className="px-4 py-2 font-bold text-white bg-purple-600 rounded hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-opacity-var focus:ring-color-var"
+            className={buttonClassName}
-        className="inline-block rounded border border-purple-600 bg-purple-600 px-12 py-3 text-sm font-semibold text-white hover:bg-transparent hover:text-purple-600 focus:outline-none focus:ring active:text-purple-500"
+            onClick={onClick}
-        onClick={onClick}
+            type={type}
-        // style={{
+            disabled={disabled}
-        //   '--ring-opacity-var': `var(--ring-opacity)`,
-        //   '--ring-color-var': `rgba(var(--ring-color), var(--ring-opacity))`
-        // }}
         >
             {children}
         </button>
     );
 };
+
 export default Button;