57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
import { Dispatch, FormEventHandler, SetStateAction } from "react";
|
|
import Button from "./Button";
|
|
import InputField from "./InputField";
|
|
|
|
/**
|
|
* A login field complete with input fields
|
|
* and a button for submitting the information
|
|
* @param props - Settings
|
|
* @returns {JSX.Element} A login component
|
|
* @example
|
|
* <Login
|
|
* handleSubmit={handleSubmit}
|
|
* setUsername={setUsername}
|
|
* setPassword={setPassword}
|
|
* username={username}
|
|
* password={password}
|
|
* />
|
|
*/
|
|
function Login(props: {
|
|
handleSubmit: FormEventHandler<HTMLFormElement>;
|
|
setUsername: Dispatch<SetStateAction<string>>;
|
|
setPassword: Dispatch<SetStateAction<string>>;
|
|
username: string;
|
|
password: string;
|
|
}): JSX.Element {
|
|
return (
|
|
<form className="flex flex-col items-center" onSubmit={props.handleSubmit}>
|
|
<div className="space-y-3">
|
|
<InputField
|
|
type="text"
|
|
label="Username"
|
|
onChange={(e) => {
|
|
props.setUsername(e.target.value);
|
|
}}
|
|
value={props.username}
|
|
/>
|
|
<InputField
|
|
type="password"
|
|
label="Password"
|
|
onChange={(e) => {
|
|
props.setPassword(e.target.value);
|
|
}}
|
|
value={props.password}
|
|
/>
|
|
</div>
|
|
<Button
|
|
text="Login"
|
|
onClick={(): void => {
|
|
return;
|
|
}}
|
|
type={"submit"}
|
|
/>
|
|
</form>
|
|
);
|
|
}
|
|
|
|
export default Login;
|