Skip to content
This repository was archived by the owner on Apr 5, 2024. It is now read-only.

Commit 7b61829

Browse files
GimleuxGimleux
committed
Added stories
1 parent 02b7079 commit 7b61829

File tree

2 files changed

+187
-57
lines changed

2 files changed

+187
-57
lines changed

‎src/components/basicElements/Login.stories.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import React from "react";
2+
import {storiesOf} from "@storybook/react";
3+
import {BrowserRouter} from "react-router-dom";
4+
import '../../style/custom.scss';
5+
import Login, {LoginHeader, LoginInput, LoginInteractionArea} from "./Login";
6+
import {action} from "@storybook/addon-actions";
7+
8+
storiesOf("Login", module)
9+
.add("default", () =>
10+
<BrowserRouter>
11+
<Login/>
12+
</BrowserRouter>
13+
)
14+
15+
.add("onlyHeader", () =>
16+
<BrowserRouter>
17+
<LoginHeader/>
18+
</BrowserRouter>
19+
)
20+
21+
.add("onlyInput", () => (
22+
<BrowserRouter>
23+
<LoginInput
24+
handleSubmit={() => console.log("Clicked on submit")}
25+
username={""}
26+
setUsername={action("changed username")}
27+
password={""}
28+
setPassword={action("changed password")}
29+
isLoading={false}
30+
setIsLoading={action("is loading")}
31+
stayLoggedIn={false}
32+
setStayLoggedIn={action("changed stay logged in")}
33+
errorMessage={""}
34+
/>
35+
</BrowserRouter>
36+
)
37+
)
38+
39+
.add("interactionArea", () =>
40+
<BrowserRouter>
41+
<LoginInteractionArea
42+
handleSubmit={() => console.log("Clicked on submit")}
43+
username={""}
44+
setUsername={action("changed username")}
45+
password={""}
46+
setPassword={action("changed password")}
47+
isLoading={false}
48+
setIsLoading={action("is loading")}
49+
stayLoggedIn={false}
50+
setStayLoggedIn={action("changed stay logged in")}
51+
errorMessage={""}
52+
/>
53+
</BrowserRouter>
54+
)

‎src/components/basicElements/Login.tsx‎

Lines changed: 133 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,167 @@
1-
import React, {FormEvent, ReactElement, useState} from 'react';
1+
import React, {Dispatch, FormEvent, ReactElement, SetStateAction, useState} from 'react';
22
import {Button, Col, Container, Form, Image, Row, Spinner} from "react-bootstrap";
33
import {loginWithUsernameAndPassword} from "../../background/api/auth";
44

55
import logo from "../../assets/images/logos/logoWithWhiteBorder.png";
66

7+
export interface LoginInputInterface {
8+
handleSubmit: (event: FormEvent) => void,
9+
username: string|number|string[]|undefined,
10+
setUsername: Dispatch<SetStateAction<string>>,
11+
password: string|number|string[]|undefined,
12+
setPassword: Dispatch<SetStateAction<string>>,
13+
isLoading: boolean,
14+
setIsLoading: Dispatch<SetStateAction<boolean>>,
15+
stayLoggedIn: boolean,
16+
setStayLoggedIn: Dispatch<SetStateAction<boolean>>,
17+
errorMessage: string|null
18+
}
19+
720
function Login(): ReactElement {
821
const [userName, setUsername] = useState<string>("");
922
const [password, setPassword] = useState<string>("");
1023
const [stayLoggedIn, setStayLoggedIn] = useState<boolean>(true);
1124
const [errorMessage, setErrorMessage] = useState<string>("");
12-
const [loading, setLoading] = useState<boolean>(false);
25+
const [isLoading, setIsLoading] = useState<boolean>(false);
1326

1427

1528
const handleSubmit = (event: FormEvent) => {
1629
event.preventDefault();
17-
setLoading(true)
30+
setIsLoading(true)
1831
loginWithUsernameAndPassword(userName, password, stayLoggedIn)
1932
.then(() => {
2033
//nothing to do here :)
2134
setErrorMessage("");
22-
setLoading(false);
35+
setIsLoading(false);
2336
})
2437
.catch(((error) => {
2538
console.log(error);
26-
setLoading(false)
39+
setIsLoading(false)
2740
setErrorMessage(error.response?.data.message);
2841
}))
2942

3043

3144
};
3245

33-
3446
return (
3547
<Container fluid className="h-100 ml-0 mr-0 login-page">
36-
<Container fluid className="login-container">
37-
<Container className="login-intro">
38-
<Row className="justify-content-md-center">
39-
<Image rounded src={logo} height="200px" width="auto"/>
40-
</Row>
41-
<Row className="justify-content-md-center">
42-
<h1>Greetings Traveller!</h1>
43-
</Row>
44-
<Row className="justify-content-md-center">
45-
<h2>Be welcome at FileFighter</h2>
46-
</Row>
47-
</Container>
48-
<Container className="login-input">
49-
<Row className="mt-4">
50-
<Col>
51-
<Form onSubmit={handleSubmit}>
52-
<Form.Group controlId="formBasicUsername">
53-
<Form.Control placeholder="Username" value={userName}
54-
onChange={event => setUsername(event.target.value)}/>
55-
</Form.Group>
48+
<LoginInteractionArea
49+
handleSubmit={handleSubmit}
50+
username={userName}
51+
setUsername={setUsername}
52+
password={password}
53+
setPassword={setPassword}
54+
isLoading={isLoading}
55+
setIsLoading={setIsLoading}
56+
stayLoggedIn={stayLoggedIn}
57+
setStayLoggedIn={setStayLoggedIn}
58+
errorMessage={errorMessage}
59+
/>
60+
</Container>);
61+
}
5662

57-
<Form.Group controlId="formBasicPassword">
58-
<Form.Control type="password" placeholder="Password" value={password}
59-
onChange={event => setPassword(event.target.value)}/>
60-
<Form.Text className="text-muted">
61-
Contact your administrator if you have forgotten your login details.
62-
</Form.Text>
63-
</Form.Group>
63+
export function LoginInteractionArea(props: LoginInputInterface) {
64+
const {
65+
handleSubmit,
66+
username,
67+
setUsername,
68+
password,
69+
setPassword,
70+
isLoading,
71+
setIsLoading,
72+
stayLoggedIn,
73+
setStayLoggedIn,
74+
errorMessage,
75+
} = props
76+
return (
77+
<Container fluid className="login-container">
78+
<LoginHeader/>
79+
<LoginInput
80+
handleSubmit={handleSubmit}
81+
username={username}
82+
setUsername={setUsername}
83+
password={password}
84+
setPassword={setPassword}
85+
isLoading={isLoading}
86+
setIsLoading={setIsLoading}
87+
stayLoggedIn={stayLoggedIn}
88+
setStayLoggedIn={setStayLoggedIn}
89+
errorMessage={errorMessage}
90+
/>
91+
</Container>
92+
)
93+
}
6494

65-
<Button variant="primary" type="submit" block>
66-
<Spinner
67-
as="span"
68-
animation="grow"
69-
size="sm"
70-
role="status"
71-
aria-hidden="true"
72-
className={loading ? "" : "d-none"}
73-
/> <span className={loading ? "sr-only" : "d-none"}>Loading...</span>Sign in
74-
</Button>
75-
<Form.Group controlId="formBasicCheckbox" className="mt-3 justify-content-center">
76-
<Form.Check checked={stayLoggedIn} type="checkbox" label="Keep me signed in*"
77-
onChange={() => setStayLoggedIn(!stayLoggedIn)}/>
78-
<Form.Text className="text-muted">
79-
*By clicking this, you accept the usage of cookies.
80-
</Form.Text>
81-
</Form.Group>
82-
<p className="text-danger">{errorMessage}</p>
83-
</Form>
84-
</Col>
85-
</Row>
86-
</Container>
87-
</Container>
88-
</Container>);
95+
export function LoginHeader() {
96+
return (
97+
<Container className="login-intro">
98+
<Row className="justify-content-md-center">
99+
<Image rounded src={logo} height="200px" width="auto"/>
100+
</Row>
101+
<Row className="justify-content-md-center">
102+
<h1>Greetings Traveller!</h1>
103+
</Row>
104+
<Row className="justify-content-md-center">
105+
<h2>Be welcome at FileFighter</h2>
106+
</Row>
107+
</Container>
108+
)
109+
}
110+
111+
export function LoginInput(props: LoginInputInterface) {
112+
const {
113+
handleSubmit,
114+
username,
115+
setUsername,
116+
password,
117+
setPassword,
118+
isLoading,
119+
stayLoggedIn,
120+
setStayLoggedIn,
121+
errorMessage,
122+
} = props
123+
124+
return (
125+
<Container className="login-input">
126+
<Row className="mt-4">
127+
<Col>
128+
<Form onSubmit={handleSubmit}>
129+
<Form.Group controlId="formBasicUsername">
130+
<Form.Control placeholder="Username" value={username}
131+
onChange={event => setUsername(event.target.value)}/>
132+
</Form.Group>
133+
134+
<Form.Group controlId="formBasicPassword">
135+
<Form.Control type="password" placeholder="Password" value={password}
136+
onChange={event => setPassword(event.target.value)}/>
137+
<Form.Text className="text-muted">
138+
Contact your administrator if you have forgotten your login details.
139+
</Form.Text>
140+
</Form.Group>
141+
142+
<Button variant="primary" type="submit" block>
143+
<Spinner
144+
as="span"
145+
animation="grow"
146+
size="sm"
147+
role="status"
148+
aria-hidden="true"
149+
className={isLoading ? "" : "d-none"}
150+
/> <span className={isLoading ? "sr-only" : "d-none"}>isLoading...</span>Sign in
151+
</Button>
152+
<Form.Group controlId="formBasicCheckbox" className="mt-3 justify-content-center">
153+
<Form.Check checked={stayLoggedIn} type="checkbox" label="Keep me signed in*"
154+
onChange={() => setStayLoggedIn(!stayLoggedIn)}/>
155+
<Form.Text className="text-muted">
156+
*By clicking this, you accept the usage of cookies.
157+
</Form.Text>
158+
</Form.Group>
159+
<p className="text-danger">{errorMessage}</p>
160+
</Form>
161+
</Col>
162+
</Row>
163+
</Container>
164+
)
89165
}
90166

91167
export default Login;

0 commit comments

Comments
 (0)