Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 | 2x 2x 2x 2x 2x 2x 2x 3x 3x 4x 4x 4x | import React, {Dispatch, FormEvent, ReactElement, SetStateAction, useState} from 'react';
import {Button, Col, Container, Form, Image, Row, Spinner} from "react-bootstrap";
import {loginWithUsernameAndPassword} from "../../background/api/auth";
import logo from "../../assets/images/logos/logoWithWhiteBorder.png";
export interface LoginInputInterface {
handleSubmit: (event: FormEvent) => void,
username: string | number | string[] | undefined,
setUsername: Dispatch<SetStateAction<string>>,
password: string | number | string[] | undefined,
setPassword: Dispatch<SetStateAction<string>>,
isLoading: boolean,
setIsLoading: Dispatch<SetStateAction<boolean>>,
stayLoggedIn: boolean,
setStayLoggedIn: Dispatch<SetStateAction<boolean>>,
errorMessage: string | null
}
function Login(): ReactElement {
const [userName, setUsername] = useState<string>("");
const [password, setPassword] = useState<string>("");
const [stayLoggedIn, setStayLoggedIn] = useState<boolean>(true);
const [errorMessage, setErrorMessage] = useState<string>("");
const [isLoading, setIsLoading] = useState<boolean>(false);
const handleSubmit = (event: FormEvent) => {
event.preventDefault();
setIsLoading(true)
loginWithUsernameAndPassword(userName, password, stayLoggedIn)
.then(() => {
//nothing to do here :)
setErrorMessage("");
setIsLoading(false);
})
.catch(((error) => {
console.log(error);
setIsLoading(false)
setErrorMessage(error.response?.data.message);
}))
};
return (
<Container fluid className="h-100 ml-0 mr-0 login-page">
<LoginInteractionArea
handleSubmit={handleSubmit}
username={userName}
setUsername={setUsername}
password={password}
setPassword={setPassword}
isLoading={isLoading}
setIsLoading={setIsLoading}
stayLoggedIn={stayLoggedIn}
setStayLoggedIn={setStayLoggedIn}
errorMessage={errorMessage}
/>
</Container>);
}
export function LoginInteractionArea(props: LoginInputInterface) {
const {
handleSubmit,
username,
setUsername,
password,
setPassword,
isLoading,
setIsLoading,
stayLoggedIn,
setStayLoggedIn,
errorMessage,
} = props
return (
<div className="login-container pr-1 pl-1 mr-auto ml-auto">
<LoginHeader/>
<LoginInput
handleSubmit={handleSubmit}
username={username}
setUsername={setUsername}
password={password}
setPassword={setPassword}
isLoading={isLoading}
setIsLoading={setIsLoading}
stayLoggedIn={stayLoggedIn}
setStayLoggedIn={setStayLoggedIn}
errorMessage={errorMessage}
/>
</div>
)
}
export function LoginHeader() {
return (
<div className="login-intro">
<Row className="justify-content-center">
<Image rounded src={logo} height="200px" width="auto"/>
</Row>
<Row className="justify-content-center">
<h1>Greetings Traveller!</h1>
</Row>
<Row className="justify-content-center">
<h2>Be welcome at FileFighter</h2>
</Row>
</div>
)
}
export function LoginInput(props: LoginInputInterface) {
const {
handleSubmit,
username,
setUsername,
password,
setPassword,
isLoading,
stayLoggedIn,
setStayLoggedIn,
errorMessage,
} = props
return (
<div>
<Row className="mt-4 justify-content-center">
<Col className="login-input">
<Form onSubmit={handleSubmit}>
<Form.Group controlId="formBasicUsername">
<Form.Control placeholder="Username" value={username}
onChange={event => setUsername(event.target.value)}/>
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Control type="password" placeholder="Password" value={password}
onChange={event => setPassword(event.target.value)}/>
<Form.Text className="text-muted">
Contact your administrator if you have forgotten your login details.
</Form.Text>
</Form.Group>
<Button variant="primary" type="submit" block>
<Spinner
as="span"
animation="grow"
size="sm"
role="status"
aria-hidden="true"
className={isLoading ? "" : "d-none"}
/> <span className={isLoading ? "sr-only" : "d-none"}>isLoading...</span>Sign in
</Button>
<Form.Group controlId="formBasicCheckbox" className="mt-3 justify-content-center">
<Form.Check checked={stayLoggedIn} type="checkbox" label="Keep me signed in*"
onChange={() => setStayLoggedIn(!stayLoggedIn)}/>
<Form.Text className="text-muted">
*By clicking this, you accept the usage of cookies.
</Form.Text>
</Form.Group>
<p className="text-danger">{errorMessage}</p>
</Form>
</Col>
</Row>
</div>
)
}
export default Login;
|