UPDATE: Forgot Password in AuthModal
now uses AuthSwitch to switch between different forms by using MAP instead if if-elseif-else
This commit is contained in:
@@ -22,6 +22,27 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
|
|||||||
}, 3500);
|
}, 3500);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const authSwitch = () => {
|
||||||
|
|
||||||
|
const formMap: { [key: string]: JSX.Element} = {
|
||||||
|
Login: <LoginForm onSubmit={(handleSubmit)}/>,
|
||||||
|
Register: <RegisterForm onSubmit={(handleSubmit)}/>,
|
||||||
|
Forgot: <ForgotPasswordForm onSubmit={(handleSubmit)}/>
|
||||||
|
};
|
||||||
|
return formMap[selectedTab] || <div>Please select a valid option</div>;
|
||||||
|
{/*
|
||||||
|
if (selectedTab === "Login") {
|
||||||
|
return <LoginForm onSubmit={(handleSubmit)}/>
|
||||||
|
} else if (selectedTab === "Register") {
|
||||||
|
return <RegisterForm onSubmit={(handleSubmit)}/>
|
||||||
|
} else if (selectedTab === "Forgot") {
|
||||||
|
return <ForgotPasswordForm onSubmit={(handleSubmit)}/>
|
||||||
|
} else
|
||||||
|
return <div> Please select a valid icon</div>
|
||||||
|
*/}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/*Background Blur*/}
|
{/*Background Blur*/}
|
||||||
@@ -87,11 +108,12 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
|
|||||||
✕
|
✕
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
{selectedTab === "Login" ? (
|
<>
|
||||||
<LoginForm onSubmit={handleSubmit} />
|
{authSwitch()}
|
||||||
) : (
|
</>
|
||||||
<RegisterForm onSubmit={handleSubmit} />
|
|
||||||
)}
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -6,7 +6,11 @@ interface ForgotPasswordProps {
|
|||||||
email?: string;
|
email?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const ForgotPasswordForm: React.FC = () => {
|
interface SubmitProps {
|
||||||
|
onSubmit: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ForgotPasswordForm: React.FC<SubmitProps> = ( {onSubmit} ) => {
|
||||||
const [email, setEmail] = useState<string>("");
|
const [email, setEmail] = useState<string>("");
|
||||||
const [errors, setErrors] = useState<ForgotPasswordProps>({});
|
const [errors, setErrors] = useState<ForgotPasswordProps>({});
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user