From 7be2835d30946572ff963d84c3efc060a01b1e85 Mon Sep 17 00:00:00 2001 From: Gimleux Date: Mon, 19 Apr 2021 00:14:45 +0200 Subject: [PATCH 01/11] Redesigned Login Area --- .gitignore | 2 ++ src/components/basicElements/Login.css | 0 src/components/basicElements/Login.tsx | 46 ++++++++++++++++++-------- src/style/helpers.scss | 24 ++++++++++++++ 4 files changed, 58 insertions(+), 14 deletions(-) create mode 100644 src/components/basicElements/Login.css diff --git a/.gitignore b/.gitignore index 0f319d1a..38c3a417 100644 --- a/.gitignore +++ b/.gitignore @@ -84,6 +84,8 @@ local.properties */.idea/ +/.idea + # Sensitive or high-churn files */.idea/**/dataSources/ */.idea/**/dataSources.ids diff --git a/src/components/basicElements/Login.css b/src/components/basicElements/Login.css new file mode 100644 index 00000000..e69de29b diff --git a/src/components/basicElements/Login.tsx b/src/components/basicElements/Login.tsx index c0e94775..c9eccbe3 100644 --- a/src/components/basicElements/Login.tsx +++ b/src/components/basicElements/Login.tsx @@ -1,7 +1,9 @@ import React, {FormEvent, ReactElement, useState} from 'react'; -import {Button, Form, Container, Row,Col,Spinner} from "react-bootstrap"; +import {Button, Form, Container, Row,Col,Spinner, Image} from "react-bootstrap"; import {loginWithUsernameAndPassword} from "../../background/api/auth"; +import logo from "../../assets/images/logos/logoWithWhiteBorder.png"; + function Login(): ReactElement { const [userName, setUsername] = useState(""); const [password, setPassword] = useState(""); @@ -30,26 +32,36 @@ function Login(): ReactElement { return ( - - - + + + + + + + + +

Greetings Traveller!

+ + +

Be welcome at FileFighter

+ + + + +
- Username - setUsername(event.target.value)}/> + setUsername(event.target.value)}/> - Password setPassword(event.target.value)}/> - Contact your administrator if you have forgotten your password. + Contact your administrator if you have forgotten your login details. - - setStayLoggedIn(!stayLoggedIn)}/> - - - + + setStayLoggedIn(!stayLoggedIn)}/> + + *By clicking this, you accept the usage of cookies. + +

{errorMessage}

 + ); } diff --git a/src/style/helpers.scss b/src/style/helpers.scss index 3e759fd0..bb926a0c 100644 --- a/src/style/helpers.scss +++ b/src/style/helpers.scss @@ -1,3 +1,27 @@ .text-shadow-none{ text-shadow: none; } + +.center-items { + display: flex; + align-items: center; + justify-content: center; +} + + +.login-container { + + border-radius: 15px; + background-color: #333333; + @media (min-width: 992px) { + width: 50%; + left: 25%; + } + @media (max-height: 659px) { + margin-top: 15px; + } + @media (min-height: 660px) { + margin-top: 10%; + } + padding-top: 15px +} \ No newline at end of file From adba7bc01971d752934c93952141613dfc003128 Mon Sep 17 00:00:00 2001 From: Gimleux Date: Mon, 19 Apr 2021 00:19:32 +0200 Subject: [PATCH 02/11] Minor color change --- WebApp.iml | 8 ++++++++ src/style/helpers.scss | 8 ++++++-- 2 files changed, 14 insertions(+), 2 deletions(-) create mode 100644 WebApp.iml diff --git a/WebApp.iml b/WebApp.iml new file mode 100644 index 00000000..80cc7391 --- /dev/null +++ b/WebApp.iml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/src/style/helpers.scss b/src/style/helpers.scss index bb926a0c..b1009d81 100644 --- a/src/style/helpers.scss +++ b/src/style/helpers.scss @@ -1,4 +1,8 @@ -.text-shadow-none{ +root { + --highlight-area-gray: #333333; +} + +.text-shadow-none { text-shadow: none; } @@ -12,7 +16,7 @@ .login-container { border-radius: 15px; - background-color: #333333; + background-color: var(--highlight-area-gray); @media (min-width: 992px) { width: 50%; left: 25%; From 936aeccaece4c496bc871760228105b2bc5f464a Mon Sep 17 00:00:00 2001 From: Gimleux Date: Mon, 19 Apr 2021 00:53:47 +0200 Subject: [PATCH 03/11] Added background image --- .../images/background/parallax-mountain.png | Bin 0 -> 14251 bytes src/components/basicElements/Login.tsx | 103 +++++++++--------- src/style/helpers.scss | 21 +++- 3 files changed, 72 insertions(+), 52 deletions(-) create mode 100644 src/assets/images/background/parallax-mountain.png diff --git a/src/assets/images/background/parallax-mountain.png b/src/assets/images/background/parallax-mountain.png new file mode 100644 index 0000000000000000000000000000000000000000..870688c0a73959a649f6e4a50b997bc48eb504df GIT binary patch literal 14251 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 M67qKo#SEVOAGV}@qyPW_ literal 0 HcmV?d00001 diff --git a/src/components/basicElements/Login.tsx b/src/components/basicElements/Login.tsx index c9eccbe3..475ec460 100644 --- a/src/components/basicElements/Login.tsx +++ b/src/components/basicElements/Login.tsx @@ -1,5 +1,5 @@ import React, {FormEvent, ReactElement, useState} from 'react'; -import {Button, Form, Container, Row,Col,Spinner, Image} from "react-bootstrap"; +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"; @@ -9,13 +9,13 @@ function Login(): ReactElement { const [password, setPassword] = useState(""); const [stayLoggedIn, setStayLoggedIn] = useState(true); const [errorMessage, setErrorMessage] = useState(""); - const [loading,setLoading]=useState(false); + const [loading, setLoading] = useState(false); const handleSubmit = (event: FormEvent) => { event.preventDefault(); setLoading(true) - loginWithUsernameAndPassword(userName, password,stayLoggedIn) + loginWithUsernameAndPassword(userName, password, stayLoggedIn) .then(() => { //nothing to do here :) setErrorMessage(""); @@ -32,55 +32,58 @@ function Login(): ReactElement { return ( - - + + + + + + + +

Greetings Traveller!

+ + +

Be welcome at FileFighter

+ + + + + +
+ + setUsername(event.target.value)}/> + - - - - - -

Greetings Traveller!

- - -

Be welcome at FileFighter

- - - - - - - - setUsername(event.target.value)}/> - - - - setPassword(event.target.value)}/> - - Contact your administrator if you have forgotten your login details. - - + + setPassword(event.target.value)}/> + + Contact your administrator if you have forgotten your login details. + + - - - setStayLoggedIn(!stayLoggedIn)}/> - - *By clicking this, you accept the usage of cookies. - - -

{errorMessage}

- - -
+ + + setStayLoggedIn(!stayLoggedIn)}/> + + *By clicking this, you accept the usage of cookies. + + +

{errorMessage}

+ + + + ); } diff --git a/src/style/helpers.scss b/src/style/helpers.scss index b1009d81..856f93e2 100644 --- a/src/style/helpers.scss +++ b/src/style/helpers.scss @@ -12,15 +12,24 @@ root { justify-content: center; } +.login-page { + background-image: url("../assets/images/background/parallax-mountain.png"); +} .login-container { - + opacity: .95; + background-color: $body-bg; border-radius: 15px; - background-color: var(--highlight-area-gray); + @media (min-width: 992px) { width: 50%; left: 25%; } + + @media (min-width: 1150px) { + width: 40%; + left: 30%; + } @media (max-height: 659px) { margin-top: 15px; } @@ -28,4 +37,12 @@ root { margin-top: 10%; } padding-top: 15px +} + +.login-input .row:first-child { + justify-content: center; +} + +.login-input .row:first-child .col { + max-width: 450px; } \ No newline at end of file From 02b707983f216732b278c56d8993bc996ae46038 Mon Sep 17 00:00:00 2001 From: Gimleux Date: Mon, 19 Apr 2021 00:57:40 +0200 Subject: [PATCH 04/11] alignment changes --- src/components/basicElements/Login.tsx | 4 ++-- src/style/helpers.scss | 4 ++++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/basicElements/Login.tsx b/src/components/basicElements/Login.tsx index 475ec460..f927a4a0 100644 --- a/src/components/basicElements/Login.tsx +++ b/src/components/basicElements/Login.tsx @@ -33,8 +33,8 @@ function Login(): ReactElement { return ( - - + + diff --git a/src/style/helpers.scss b/src/style/helpers.scss index 856f93e2..bcf1fd47 100644 --- a/src/style/helpers.scss +++ b/src/style/helpers.scss @@ -39,6 +39,10 @@ root { padding-top: 15px } +.login-intro .row { + justify-content: center; +} + .login-input .row:first-child { justify-content: center; } From 7b6182996aea3be7634a1d76413cc4742d92630e Mon Sep 17 00:00:00 2001 From: Gimleux Date: Mon, 19 Apr 2021 17:41:10 +0200 Subject: [PATCH 05/11] Added stories --- .../basicElements/Login.stories.tsx | 54 +++++ src/components/basicElements/Login.tsx | 190 ++++++++++++------ 2 files changed, 187 insertions(+), 57 deletions(-) create mode 100644 src/components/basicElements/Login.stories.tsx diff --git a/src/components/basicElements/Login.stories.tsx b/src/components/basicElements/Login.stories.tsx new file mode 100644 index 00000000..df97bdd2 --- /dev/null +++ b/src/components/basicElements/Login.stories.tsx @@ -0,0 +1,54 @@ +import React from "react"; +import {storiesOf} from "@storybook/react"; +import {BrowserRouter} from "react-router-dom"; +import '../../style/custom.scss'; +import Login, {LoginHeader, LoginInput, LoginInteractionArea} from "./Login"; +import {action} from "@storybook/addon-actions"; + +storiesOf("Login", module) + .add("default", () => + + + + ) + + .add("onlyHeader", () => + + + + ) + + .add("onlyInput", () => ( + + console.log("Clicked on submit")} + username={""} + setUsername={action("changed username")} + password={""} + setPassword={action("changed password")} + isLoading={false} + setIsLoading={action("is loading")} + stayLoggedIn={false} + setStayLoggedIn={action("changed stay logged in")} + errorMessage={""} + /> + + ) + ) + + .add("interactionArea", () => + + console.log("Clicked on submit")} + username={""} + setUsername={action("changed username")} + password={""} + setPassword={action("changed password")} + isLoading={false} + setIsLoading={action("is loading")} + stayLoggedIn={false} + setStayLoggedIn={action("changed stay logged in")} + errorMessage={""} + /> + + ) \ No newline at end of file diff --git a/src/components/basicElements/Login.tsx b/src/components/basicElements/Login.tsx index f927a4a0..fbe7ef5d 100644 --- a/src/components/basicElements/Login.tsx +++ b/src/components/basicElements/Login.tsx @@ -1,91 +1,167 @@ -import React, {FormEvent, ReactElement, useState} from 'react'; +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>, + password: string|number|string[]|undefined, + setPassword: Dispatch>, + isLoading: boolean, + setIsLoading: Dispatch>, + stayLoggedIn: boolean, + setStayLoggedIn: Dispatch>, + errorMessage: string|null +} + function Login(): ReactElement { const [userName, setUsername] = useState(""); const [password, setPassword] = useState(""); const [stayLoggedIn, setStayLoggedIn] = useState(true); const [errorMessage, setErrorMessage] = useState(""); - const [loading, setLoading] = useState(false); + const [isLoading, setIsLoading] = useState(false); const handleSubmit = (event: FormEvent) => { event.preventDefault(); - setLoading(true) + setIsLoading(true) loginWithUsernameAndPassword(userName, password, stayLoggedIn) .then(() => { //nothing to do here :) setErrorMessage(""); - setLoading(false); + setIsLoading(false); }) .catch(((error) => { console.log(error); - setLoading(false) + setIsLoading(false) setErrorMessage(error.response?.data.message); })) }; - return ( - - - - - - -

Greetings Traveller!

- - -

Be welcome at FileFighter

- - - - - -
- - setUsername(event.target.value)}/> - + + ); +} - - setPassword(event.target.value)}/> - - Contact your administrator if you have forgotten your login details. - - +export function LoginInteractionArea(props: LoginInputInterface) { + const { + handleSubmit, + username, + setUsername, + password, + setPassword, + isLoading, + setIsLoading, + stayLoggedIn, + setStayLoggedIn, + errorMessage, + } = props + return ( + + + + + ) +} - - - setStayLoggedIn(!stayLoggedIn)}/> - - *By clicking this, you accept the usage of cookies. - - -

{errorMessage}

- - -
- - - ); +export function LoginHeader() { + return ( + + + + + +

Greetings Traveller!

+ + +

Be welcome at FileFighter

+ + + ) +} + +export function LoginInput(props: LoginInputInterface) { + const { + handleSubmit, + username, + setUsername, + password, + setPassword, + isLoading, + stayLoggedIn, + setStayLoggedIn, + errorMessage, + } = props + + return ( + + + +
+ + setUsername(event.target.value)}/> + + + + setPassword(event.target.value)}/> + + Contact your administrator if you have forgotten your login details. + + + + + + setStayLoggedIn(!stayLoggedIn)}/> + + *By clicking this, you accept the usage of cookies. + + +

{errorMessage}

+
+ + + + ) } export default Login; From ec918fe278434c436f14539b57afdf4e2366568b Mon Sep 17 00:00:00 2001 From: Gimleux Date: Mon, 19 Apr 2021 17:46:43 +0200 Subject: [PATCH 06/11] deleted own centering css --- src/components/basicElements/Login.tsx | 2 +- src/style/helpers.scss | 8 -------- 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/src/components/basicElements/Login.tsx b/src/components/basicElements/Login.tsx index fbe7ef5d..f904f449 100644 --- a/src/components/basicElements/Login.tsx +++ b/src/components/basicElements/Login.tsx @@ -123,7 +123,7 @@ export function LoginInput(props: LoginInputInterface) { return ( - +
diff --git a/src/style/helpers.scss b/src/style/helpers.scss index bcf1fd47..9b598ef6 100644 --- a/src/style/helpers.scss +++ b/src/style/helpers.scss @@ -39,14 +39,6 @@ root { padding-top: 15px } -.login-intro .row { - justify-content: center; -} - -.login-input .row:first-child { - justify-content: center; -} - .login-input .row:first-child .col { max-width: 450px; } \ No newline at end of file From 341f9de60e806b7808871294311ca3466d8ea4cc Mon Sep 17 00:00:00 2001 From: Gimleux Date: Mon, 19 Apr 2021 17:54:08 +0200 Subject: [PATCH 07/11] Deleted Nested Container --- src/components/basicElements/Login.tsx | 16 ++++++++-------- src/style/helpers.scss | 2 +- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/basicElements/Login.tsx b/src/components/basicElements/Login.tsx index f904f449..b95d3ff1 100644 --- a/src/components/basicElements/Login.tsx +++ b/src/components/basicElements/Login.tsx @@ -74,7 +74,7 @@ export function LoginInteractionArea(props: LoginInputInterface) { errorMessage, } = props return ( - +
- +
) } export function LoginHeader() { return ( - +
@@ -104,7 +104,7 @@ export function LoginHeader() {

Be welcome at FileFighter

 - +
) } @@ -122,10 +122,10 @@ export function LoginInput(props: LoginInputInterface) { } = props return ( - +
- - + + setUsername(event.target.value)}/> @@ -160,7 +160,7 @@ export function LoginInput(props: LoginInputInterface) { - +
) } diff --git a/src/style/helpers.scss b/src/style/helpers.scss index 9b598ef6..648c0599 100644 --- a/src/style/helpers.scss +++ b/src/style/helpers.scss @@ -39,6 +39,6 @@ root { padding-top: 15px } -.login-input .row:first-child .col { +.login-input { max-width: 450px; } \ No newline at end of file From bd0adb251072ceac2468ab43e39f852d38893716 Mon Sep 17 00:00:00 2001 From: Gimleux Date: Mon, 19 Apr 2021 17:55:40 +0200 Subject: [PATCH 08/11] Removed ide file --- .gitignore | 2 ++ WebApp.iml | 8 -------- 2 files changed, 2 insertions(+), 8 deletions(-) delete mode 100644 WebApp.iml diff --git a/.gitignore b/.gitignore index 38c3a417..91d44bea 100644 --- a/.gitignore +++ b/.gitignore @@ -86,6 +86,8 @@ local.properties /.idea +WebApp.iml + # Sensitive or high-churn files */.idea/**/dataSources/ */.idea/**/dataSources.ids diff --git a/WebApp.iml b/WebApp.iml deleted file mode 100644 index 80cc7391..00000000 --- a/WebApp.iml +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file From f8ef5ca43f0ca498f376eb61fc7c4ffb1d2a0394 Mon Sep 17 00:00:00 2001 From: Gimleux Date: Mon, 19 Apr 2021 18:00:54 +0200 Subject: [PATCH 09/11] Fixed bug in centering --- src/components/basicElements/Login.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/basicElements/Login.tsx b/src/components/basicElements/Login.tsx index b95d3ff1..821dfa41 100644 --- a/src/components/basicElements/Login.tsx +++ b/src/components/basicElements/Login.tsx @@ -95,13 +95,13 @@ export function LoginInteractionArea(props: LoginInputInterface) { export function LoginHeader() { return (
- + - +

Greetings Traveller!

 - +

Be welcome at FileFighter
@@ -123,7 +123,7 @@ export function LoginInput(props: LoginInputInterface) { return (
- +
From 573579362e2ea645369a03c9149fcdaab0f147fa Mon Sep 17 00:00:00 2001 From: Gimleux Date: Mon, 19 Apr 2021 18:07:25 +0200 Subject: [PATCH 10/11] snapshots --- .../__snapshots__/storybook.test.ts.snap | 390 ++++++++++++++++++ 1 file changed, 390 insertions(+) diff --git a/src/__tests__/__snapshots__/storybook.test.ts.snap b/src/__tests__/__snapshots__/storybook.test.ts.snap index 19fcf8f1..af6a5056 100644 --- a/src/__tests__/__snapshots__/storybook.test.ts.snap +++ b/src/__tests__/__snapshots__/storybook.test.ts.snap @@ -636,6 +636,396 @@ exports[`Storyshots Health default 1`] = `
`; +exports[`Storyshots Login default 1`] = ` +
+
+
+
+ +
+
+

+ Greetings Traveller! +

+
+
+

+ Be welcome at FileFighter +

+
+
+
+
+
+ +
+ +
+
+ + + Contact your administrator if you have forgotten your login details. + +
+ +
+
+ + +
+ + *By clicking this, you accept the usage of cookies. + +
+

+ +

+ +
+
+
+
+
+`; + +exports[`Storyshots Login interactionArea 1`] = ` +
+
+
+ +
+
+

+ Greetings Traveller! +

+
+
+

+ Be welcome at FileFighter +

+
+
+
+
+
+
+
+ +
+
+ + + Contact your administrator if you have forgotten your login details. + +
+ +
+
+ + +
+ + *By clicking this, you accept the usage of cookies. + +
+

+ +

+
+
+
+
+
+`; + +exports[`Storyshots Login onlyHeader 1`] = ` +
+
+ +
+
+

+ Greetings Traveller! +

+
+
+

+ Be welcome at FileFighter +

+
+
+`; + +exports[`Storyshots Login onlyInput 1`] = ` +
+
+
+
+
+ +
+
+ + + Contact your administrator if you have forgotten your login details. + +
+ +
+
+ + +
+ + *By clicking this, you accept the usage of cookies. + +
+

+ +

+
+
+
+
+`; + exports[`Storyshots Registration default 1`] = `
Date: Mon, 19 Apr 2021 19:12:11 +0200 Subject: [PATCH 11/11] use mixins for breakpoints, add logout to nav --- src/components/basicElements/Header.tsx | 8 ++++++++ src/style/helpers.scss | 7 ++++--- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/components/basicElements/Header.tsx b/src/components/basicElements/Header.tsx index 925529c0..4067a398 100644 --- a/src/components/basicElements/Header.tsx +++ b/src/components/basicElements/Header.tsx @@ -5,6 +5,7 @@ import logo from "../../assets/images/logos/logo.png"; import { Nav, Navbar, NavbarBrand, NavDropdown } from "react-bootstrap"; import { SystemState } from "../../background/redux/actions/sytemState"; import { connect, ConnectedProps } from "react-redux"; +import {logout} from "../../background/api/auth"; export interface navBarElement_Interface { name: string; @@ -98,6 +99,13 @@ function Header(props: PropsFromRedux): ReactElement { > Profile + { + logout() + }} + > + Logout + )} diff --git a/src/style/helpers.scss b/src/style/helpers.scss index 648c0599..72dceb60 100644 --- a/src/style/helpers.scss +++ b/src/style/helpers.scss @@ -21,15 +21,16 @@ root { background-color: $body-bg; border-radius: 15px; - @media (min-width: 992px) { + @include media-breakpoint-up(lg) { width: 50%; left: 25%; } - @media (min-width: 1150px) { + @include media-breakpoint-up(xl) { width: 40%; left: 30%; } + @media (max-height: 659px) { margin-top: 15px; } @@ -41,4 +42,4 @@ root { .login-input { max-width: 450px; -} \ No newline at end of file +}