diff --git a/.gitignore b/.gitignore index 0f319d1a..91d44bea 100644 --- a/.gitignore +++ b/.gitignore @@ -84,6 +84,10 @@ local.properties */.idea/ +/.idea + +WebApp.iml + # Sensitive or high-churn files */.idea/**/dataSources/ */.idea/**/dataSources.ids 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`] = `
Profile + { + logout() + }} + > + Logout + )} 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.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 c0e94775..821dfa41 100644 --- a/src/components/basicElements/Login.tsx +++ b/src/components/basicElements/Login.tsx @@ -1,70 +1,167 @@ -import React, {FormEvent, ReactElement, useState} from 'react'; -import {Button, Form, Container, Row,Col,Spinner} from "react-bootstrap"; +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) - loginWithUsernameAndPassword(userName, password,stayLoggedIn) + 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 ( + + + ); +} + +export function LoginInteractionArea(props: LoginInputInterface) { + const { + handleSubmit, + username, + setUsername, + password, + setPassword, + isLoading, + setIsLoading, + stayLoggedIn, + setStayLoggedIn, + errorMessage, + } = props + return ( +
+ + +
+ ) +} +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 ( +
+ + + - Username - setUsername(event.target.value)}/> + setUsername(event.target.value)}/> - Password - setPassword(event.target.value)}/> + 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}

 - ); +
+ ) } export default Login; diff --git a/src/style/helpers.scss b/src/style/helpers.scss index 3e759fd0..72dceb60 100644 --- a/src/style/helpers.scss +++ b/src/style/helpers.scss @@ -1,3 +1,45 @@ -.text-shadow-none{ +root { + --highlight-area-gray: #333333; +} + +.text-shadow-none { text-shadow: none; } + +.center-items { + display: flex; + align-items: center; + 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; + + @include media-breakpoint-up(lg) { + width: 50%; + left: 25%; + } + + @include media-breakpoint-up(xl) { + width: 40%; + left: 30%; + } + + @media (max-height: 659px) { + margin-top: 15px; + } + @media (min-height: 660px) { + margin-top: 10%; + } + padding-top: 15px +} + +.login-input { + max-width: 450px; +}