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

Commit 936aecc

Browse files
GimleuxGimleux
committed
Added background image
1 parent adba7bc commit 936aecc

File tree

3 files changed

+72
-52
lines changed

3 files changed

+72
-52
lines changed

‎src/assets/images/background/parallax-mountain.png‎

13.9 KB
Loading

‎src/components/basicElements/Login.tsx‎

Lines changed: 53 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, {FormEvent, ReactElement, useState} from 'react';
2-
import {Button, Form, Container, Row,Col,Spinner, Image} from "react-bootstrap";
2+
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";
@@ -9,13 +9,13 @@ function Login(): ReactElement {
99
const [password, setPassword] = useState<string>("");
1010
const [stayLoggedIn, setStayLoggedIn] = useState<boolean>(true);
1111
const [errorMessage, setErrorMessage] = useState<string>("");
12-
const [loading,setLoading]=useState<boolean>(false);
12+
const [loading, setLoading] = useState<boolean>(false);
1313

1414

1515
const handleSubmit = (event: FormEvent) => {
1616
event.preventDefault();
1717
setLoading(true)
18-
loginWithUsernameAndPassword(userName, password,stayLoggedIn)
18+
loginWithUsernameAndPassword(userName, password, stayLoggedIn)
1919
.then(() => {
2020
//nothing to do here :)
2121
setErrorMessage("");
@@ -32,55 +32,58 @@ function Login(): ReactElement {
3232

3333

3434
return (
35-
<Container className="h-100">
36-
<Container fluid className="login-container">
35+
<Container fluid className="h-100 ml-0 mr-0 login-page">
36+
<Container fluid className="login-container bg-body-bg">
37+
<Container>
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>
3756

38-
<Container>
39-
<Row className="justify-content-md-center">
40-
<Image rounded src={logo} height="200px" width="auto"/>
41-
</Row>
42-
<Row className="justify-content-md-center">
43-
<h1>Greetings Traveller!</h1>
44-
</Row>
45-
<Row className="justify-content-md-center">
46-
<h2>Be welcome at FileFighter</h2>
47-
</Row>
48-
</Container>
49-
50-
<Row className="mt-4">
51-
<Col>
52-
<Form onSubmit={handleSubmit}>
53-
<Form.Group controlId="formBasicUsername">
54-
<Form.Control placeholder="Username" value={userName} onChange={event => setUsername(event.target.value)}/>
55-
</Form.Group>
56-
57-
<Form.Group controlId="formBasicPassword">
58-
<Form.Control type="password" placeholder="Password" value={password} onChange={event => setPassword(event.target.value)}/>
59-
<Form.Text className="text-muted">
60-
Contact your administrator if you have forgotten your login details.
61-
</Form.Text>
62-
</Form.Group>
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>
6364

64-
<Button variant="primary" type="submit" block>
65-
<Spinner
66-
as="span"
67-
animation="grow"
68-
size="sm"
69-
role="status"
70-
aria-hidden="true"
71-
className={loading? "" :"d-none"}
72-
/> <span className={loading? "sr-only" :"d-none"}>Loading...</span>Sign in
73-
</Button>
74-
<Form.Group controlId="formBasicCheckbox" className="mt-3 justify-content-center">
75-
<Form.Check checked={stayLoggedIn} type="checkbox" label="Keep me signed in*" onChange={() => setStayLoggedIn(!stayLoggedIn)}/>
76-
<Form.Text className="text-muted">
77-
*By clicking this, you accept the usage of cookies.
78-
</Form.Text>
79-
</Form.Group>
80-
<p className="text-danger">{errorMessage}</p>
81-
</Form>
82-
</Col>
83-
</Row>
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>
8487
</Container>
8588
</Container>);
8689
}

‎src/style/helpers.scss‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,20 +12,37 @@ root {
1212
justify-content: center;
1313
}
1414

15+
.login-page {
16+
background-image: url("../assets/images/background/parallax-mountain.png");
17+
}
1518

1619
.login-container {
17-
20+
opacity: .95;
21+
background-color: $body-bg;
1822
border-radius: 15px;
19-
background-color: var(--highlight-area-gray);
23+
2024
@media (min-width: 992px) {
2125
width: 50%;
2226
left: 25%;
2327
}
28+
29+
@media (min-width: 1150px) {
30+
width: 40%;
31+
left: 30%;
32+
}
2433
@media (max-height: 659px) {
2534
margin-top: 15px;
2635
}
2736
@media (min-height: 660px) {
2837
margin-top: 10%;
2938
}
3039
padding-top: 15px
40+
}
41+
42+
.login-input .row:first-child {
43+
justify-content: center;
44+
}
45+
46+
.login-input .row:first-child .col {
47+
max-width: 450px;
3148
}

0 commit comments

Comments
 (0)