change design of error page when not loggeed in

Author: qvalentin

src/components/App.tsx

@@ -4,7 +4,7 @@ import { BrowserRouter, Route, Switch } from "react-router-dom";
 import Router from "./Router/Router";
 import PermanentAssets from "./basicElements/PermanentAssets";
 
-import Login from "./basicElements/login/Login";
+import Login, { LoginHeader } from "./basicElements/login/Login";
 import HeadArea from "./basicElements/topArea/TopArea";
 import BottomArea from "./basicElements/bottomArea/BottomArea";
 
@@ -19,6 +19,7 @@ import { checkForCookie } from "../background/api/auth";
 import { FFLoading } from "./basicElements/Loading";
 import { CookieStatus } from "../background/redux/actions/tokenTypes";
 import Error400 from "./pages/errors/Error400";
+import { Container } from "react-bootstrap";
 
 // this takes the redux store and maps everything that is needed to the function props
 const mapState = (state: SystemState) => ({
@@ -69,15 +70,20 @@ function App(props: Props): ReactElement {
         } else {
             console.log("[APP] showing login");
             return (
-                <BrowserRouter>
-                    <Switch>
-                        <Route
-                            path={"/error"}
-                            component={() => <Error400 needsLogin />}
-                        />
-                        <Route path={"*"} component={Login} />
-                    </Switch>
-                </BrowserRouter>
+                <Container fluid className="h-100 ml-0 mr-0 login-page">
+                    <div className="login-container pr-1 pl-1 mr-auto ml-auto">
+                        <LoginHeader />
+                        <BrowserRouter>
+                            <Switch>
+                                <Route
+                                    path={"/error"}
+                                    component={() => <Error400 needsLogin />}
+                                />
+                                <Route path={"*"} component={Login} />
+                            </Switch>
+                        </BrowserRouter>
+                    </div>
+                </Container>
             );
         }
     } else {

src/components/Router/Router.tsx

@@ -21,9 +21,16 @@ export default function Router(): ReactElement {
             <Route path={"/health"} component={Health} />
             <Route path={filesBaseUrl} component={FileSystem} />
             <Route path={"/registration"} component={Registration} />
-            {<Route path={"/profile"} component={Profile} />}
-            {<Route path={"/profile"} component={Profile} />}
-            {<Route path={"/error"} component={Error400} />}
+            <Route path={"/profile"} component={Profile} />
+            <Route path={"/profile"} component={Profile} />
+            <Route path={"/error"} component={Error400} />
+            <Route
+                path={["/data", "/api"]}
+                component={() => {
+                    window.location.reload(); // leave the spa, to access the apis. This could cause a endless loop if the nginx is not present
+                    return null;
+                }}
+            />
             <Route path={"*"} component={Error404} />
         </Switch>
     );

src/components/basicElements/login/Login.tsx

@@ -5,15 +5,7 @@ import React, {
     SetStateAction,
     useState
 } from "react";
-import {
-    Button,
-    Col,
-    Container,
-    Form,
-    Image,
-    Row,
-    Spinner
-} from "react-bootstrap";
+import { Button, Col, Form, Image, Row, Spinner } from "react-bootstrap";
 import { loginWithUsernameAndPassword } from "../../../background/api/auth";
 
 import logo from "../../../assets/images/logos/logoWithWhiteBorder.png";
@@ -51,7 +43,6 @@ function Login(): ReactElement {
     if (tokens.refreshToken && tokens.accessToken?.token) {
         if (dest) {
             history.push(decodeURIComponent(dest));
-            window.location.reload(); // reload because we are leaving the spa
         } else {
             history.push("/");
         }
@@ -73,20 +64,18 @@ function Login(): ReactElement {
     };
 
     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>
+        <LoginInteractionArea
+            handleSubmit={handleSubmit}
+            username={userName}
+            setUsername={setUsername}
+            password={password}
+            setPassword={setPassword}
+            isLoading={isLoading}
+            setIsLoading={setIsLoading}
+            stayLoggedIn={stayLoggedIn}
+            setStayLoggedIn={setStayLoggedIn}
+            errorMessage={errorMessage}
+        />
     );
 }
 
@@ -104,21 +93,18 @@ export function LoginInteractionArea(props: LoginInputInterface) {
         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>
+        <LoginInput
+            handleSubmit={handleSubmit}
+            username={username}
+            setUsername={setUsername}
+            password={password}
+            setPassword={setPassword}
+            isLoading={isLoading}
+            setIsLoading={setIsLoading}
+            stayLoggedIn={stayLoggedIn}
+            setStayLoggedIn={setStayLoggedIn}
+            errorMessage={errorMessage}
+        />
     );
 }
 

src/components/pages/errors/Error400.tsx

@@ -20,12 +20,13 @@ export default function Error400({ needsLogin }: Props) {
 
     return (
         <Container className={"text-center"}>
-            <h2>Something went wrong!</h2>
-            <h3>The file could not be loaded</h3>
+            <h2 className={"text-danger"}>Something went wrong!</h2>
+            <h3 className="text-danger"> The file could not be loaded</h3>
             {message && <h4>{message}</h4>}
-            {tryAgainUrl && <p></p>}
-            <Link to="/">Go to Home</Link>
-            {tryAgainUrl}
+            {dest && tryAgainUrl}
+            <p>
+                <Link to="/">Go to Home</Link>
+            </p>
         </Container>
     );
 }

src/style/helpers.scss

@@ -121,6 +121,7 @@
 
 .login-page {
   background-image: url("../assets/images/background/parallax-mountain.png");
+  background-size: 100% auto;
 }
 
 .login-container {