Merge branch 'admin-team-GEN-67-auth-app' into andy-admin-GEN-49-login

.vscode/settings.json

@@ -0,0 +1 @@
+{}

compass/app/auth/newPassword/page.tsx

@@ -0,0 +1,89 @@
+// pages/index.tsx
+"use client";
+import { useState, useEffect } from 'react'; 
+import Button from '@/components/Button1';
+import Input from '@/components/Input1';
+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|| !isStrongPassword(newPassword));
+  }, [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}
+               valid={!isButtonDisabled || isStrongPassword(newPassword)}
+               onChange={(e) => {
+               setNewPassword(e.target.value);
+               }}
+           />
+         </div>
+         {isStrongPassword(newPassword) || newPassword === '' ? null : <div role="alert" className="rounded border-s-4 border-red-500 bg-red-50 p-4">
+                            <strong className="block text-sm font-semibold text-red-800"> Password is not strong enough. </strong>
+                              <p className="mt-2 text-xs font-thin text-red-700">
+                              Tip: Use a mix of letters, numbers, and symbols for a strong password. Aim for at least 8 characters!
+                              </p>
+                            </div>}
+         <div className="mb-6">
+           <Input
+               type="password"
+               title="Confirm Password"
+               value={confirmPassword}
+               valid={!isButtonDisabled || (newPassword === confirmPassword && confirmPassword !== '')}
+               onChange={(e) => {
+               setConfirmPassword(e.target.value);
+               }}
+           />
+         </div>
+         {newPassword === confirmPassword || confirmPassword === '' ? null : <div role="alert" className="rounded border-s-4 border-red-500 bg-red-50 p-4">
+                            <strong className="block text-sm font-semibold text-red-800"> Passwords do not match. </strong>
+                              <p className="mt-2 text-xs font-thin text-red-700">
+                              Please make sure both passwords are the exact same!
+                              </p>
+                            </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/app/page.tsx

@@ -2,6 +2,7 @@
 "use client";
 
 import Button from '@/components/Button49';
+import Button from '@/components/Button1';
 import Input from '@/components/Input'
 import InlineLink from '@/components/InlineLink';
 import Paper from '@/components/auth/Paper';

compass/components/Button.tsx

@@ -7,8 +7,10 @@ type ButtonProps = {
     disabled?: boolean;
 };
 
+
 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-4 py-1 text-md font-semibold w-20 h-10 text-center`;
+
     return (
         <button
             className={buttonClassName}
@@ -20,4 +22,5 @@ const Button: FunctionComponent<ButtonProps> = ({ children, type, disabled, onCl
         </button>
     );
 };
+
 export default Button;

compass/components/Button1.tsx

@@ -0,0 +1,24 @@
+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, 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={buttonClassName}
+            onClick={onClick}
+            type={type}
+            disabled={disabled}
+        >
+            {children}
+        </button>
+    );
+};
+
+export default Button;

compass/components/Input1.tsx

@@ -0,0 +1,34 @@
+import React, { FunctionComponent, InputHTMLAttributes, ReactNode, ChangeEvent } from 'react';
+
+type InputProps = InputHTMLAttributes<HTMLInputElement> & {
+  icon?: ReactNode;
+  title?: ReactNode;
+  type?:ReactNode;
+  placeholder?:ReactNode
+  valid?:boolean;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void; 
+};
+
+const Input: FunctionComponent<InputProps> = ({ icon, type, title, placeholder, onChange, valid, ...rest }) => {
+  return (
+    <div>
+      <label
+  htmlFor={title}
+  // this class name should be simplified, was just having problems with it
+  className={valid ? "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" : "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>
+
+  <input
+    type={type}
+    id={title}
+    placeholder={placeholder}
+    onChange={onChange}
+    className="mt-1 w-full border-none p-0 focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm"
+  />
+</label>
+</div>
+  );
+};
+
+export default Input;