mirror of
https://github.com/cssgunc/compass.git
synced 2025-04-06 20:50:17 -04:00
Merge branch 'admin-team-GEN-67-auth-app' into nick-admin-GEN-63-new-password
This commit is contained in:
Nicholas Sanaie
GitHub
commit
f02ee35861
72
compass/app/auth/forgot_password/page.tsx
Normal file
72
compass/app/auth/forgot_password/page.tsx
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
"use client"
|
||||
import Button from '@/components/Button';
|
||||
import Input from '@/components/Input'
|
||||
import InlineLink from '@/components/InlineLink';
|
||||
import Paper from '@/components/auth/Paper';
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
function isValidEmail(email: string) {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
|
||||
if (email.trim() === '') {
|
||||
return 'Email cannot be empty';
|
||||
} else if (!emailRegex.test(email)) {
|
||||
return 'Invalid email format';
|
||||
}
|
||||
else{
|
||||
return 'If your email exists in the database, you should receive a password reset in your inbox.'
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default function Page() {
|
||||
const [isButtonDisabled, setIsButtonDisabled] = useState(true);
|
||||
const [confirmEmail, setconfirmEmail] = useState('');
|
||||
const [emailError, setEmailError] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
const error = isValidEmail(confirmEmail);
|
||||
setEmailError(error);
|
||||
setIsButtonDisabled(error !== null && !error.includes('exists in the database'));
|
||||
}, [confirmEmail]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Paper>
|
||||
<form
|
||||
className="mb-0 mt-6 mb-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white">
|
||||
<h1 className="text-2xl font-bold text-purple-700 sm:text-3xl">Forgot password</h1>
|
||||
<div className="mb-4">
|
||||
<Input type='email'
|
||||
title="Enter your email address"
|
||||
placeholder="janedoe@gmail.com"
|
||||
value={confirmEmail}
|
||||
iconKey={'EmailInputIcon'}
|
||||
onChange={(e) => {
|
||||
setconfirmEmail(e.target.value);
|
||||
setEmailError(''); // Reset the error when the user types
|
||||
}}/>
|
||||
{emailError && (
|
||||
<p className={`mt-2 ${emailError.includes('exists in the database') ? 'text-green-500' : 'text-red-500'}`}>
|
||||
{emailError}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col items-left space-y-4">
|
||||
<InlineLink href="/login">
|
||||
Back to Sign In
|
||||
</InlineLink>
|
||||
<Button type="submit" disabled={isButtonDisabled}>
|
||||
Send
|
||||
</Button>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
<p className="text-center mt-6 text-gray-500 text-xs">
|
||||
© 2024 Compass Center
|
||||
</p>
|
||||
</Paper>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -16,10 +16,10 @@ export default function Page() {
|
|||
<Paper>
|
||||
<form 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="mb-4">
|
||||
<Input type='email' title="Email" placeholder="janedoe@gmail.com" />
|
||||
<Input type='email' title="Email" placeholder="janedoe@gmail.com" iconKey={'EmailInputIcon'} />
|
||||
</div>
|
||||
<div className="mb-6">
|
||||
<Input type='password' title="Password" />
|
||||
<Input type='password' title="Password" />
|
||||
</div>
|
||||
<div className="flex flex-col items-left space-y-4">
|
||||
<InlineLink>
|
||||
|
|
|
|||
|
|
@ -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-12 py-3 text-sm font-semibold`;
|
||||
|
||||
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}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ interface Link {
|
|||
|
||||
const InlineLink: React.FC<Link> = ({href = '#', children}) => {
|
||||
return (
|
||||
<a href={href} className='text-sm text-purple-600 hover:underline font-semibold italic'>
|
||||
<a href={href} className='text-sm text-purple-600 hover:underline font-semibold'>
|
||||
{children}
|
||||
</a>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,33 +1,41 @@
|
|||
import React, { FunctionComponent, InputHTMLAttributes, ReactNode, ChangeEvent } from 'react';
|
||||
import { Icons } from '@/utils/constants';
|
||||
import React, { FunctionComponent, InputHTMLAttributes, ReactElement, ReactNode } from 'react';
|
||||
|
||||
type InputProps = InputHTMLAttributes<HTMLInputElement> & {
|
||||
icon?: ReactNode;
|
||||
title?: ReactNode;
|
||||
type?:ReactNode;
|
||||
placeholder?:ReactNode
|
||||
valid?:boolean;
|
||||
onChange: (event: ChangeEvent<HTMLInputElement>) => void;
|
||||
iconKey?: keyof typeof Icons; // Use keyof typeof to ensure the key exists in Icons
|
||||
title?: string; // Assuming title is always a string
|
||||
type?: string;
|
||||
placeholder?: string;
|
||||
};
|
||||
|
||||
const Input: FunctionComponent<InputProps> = ({ icon, type, title, placeholder, onChange, valid, ...rest }) => {
|
||||
const Input: FunctionComponent<InputProps> = ({ iconKey, type, title, placeholder, ...rest }) => {
|
||||
const IconComponent = iconKey ? Icons[iconKey] : null;
|
||||
|
||||
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>
|
||||
<div className="mb-4">
|
||||
{title && (
|
||||
<div className="mb-1">
|
||||
<label htmlFor={title} className="text-sm font-semibold text-gray-700">
|
||||
{title}
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center border border-gray-300 rounded-md shadow-sm overflow-hidden">
|
||||
{IconComponent && (
|
||||
<span className="inline-flex items-center px-3 border-r border-gray-300 text-gray-500">
|
||||
<IconComponent className="h-5 w-5" />
|
||||
</span>
|
||||
)}
|
||||
<input
|
||||
{...rest}
|
||||
type={type}
|
||||
id={title}
|
||||
placeholder={placeholder}
|
||||
className="w-full border-none p-3 text-sm focus:ring-0"
|
||||
style={{ boxShadow: 'none' }} // This ensures that the input doesn't have an inner shadow
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
2
compass/package-lock.json
generated
2
compass/package-lock.json
generated
|
|
@ -9,7 +9,7 @@
|
|||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@heroicons/react": "^2.1.1",
|
||||
"next": "13.5.6",
|
||||
"next": "^13.5.6",
|
||||
"react": "^18",
|
||||
"react-dom": "^18"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@heroicons/react": "^2.1.1",
|
||||
"next": "13.5.6",
|
||||
"next": "^13.5.6",
|
||||
"react": "^18",
|
||||
"react-dom": "^18"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
|
|
|
|||
|
|
@ -47,8 +47,8 @@ export enum DATATYPE {
|
|||
SELECT
|
||||
}
|
||||
|
||||
export const COLLECTION_MAP: {[key in COLLECTION]: CollectionImpl} = {
|
||||
[COLLECTION.RESOURCE]: new CollectionImpl('Resources', Icons.ResourceIcon),
|
||||
[COLLECTION.SERVICE]: new CollectionImpl('Services', Icons.ServiceIcon),
|
||||
[COLLECTION.USER]: new CollectionImpl('Users', Icons.UserIcon)
|
||||
}
|
||||
// export const COLLECTION_MAP: {[key in COLLECTION]: CollectionImpl} = {
|
||||
// [COLLECTION.RESOURCE]: new CollectionImpl('Resources', Icons.ResourceIcon),
|
||||
// [COLLECTION.SERVICE]: new CollectionImpl('Services', Icons.ServiceIcon),
|
||||
// [COLLECTION.USER]: new CollectionImpl('Users', Icons.UserIcon)
|
||||
// }
|
||||
Loading…
Reference in New Issue
Block a user