use 400 error page also when not logged in, and allow redirects

Author: qvalentin

src/__tests__/__snapshots__/storybook.test.ts.snap

@@ -623,6 +623,7 @@ exports[`Storyshots Login default 1`] = `
               className="form-group"
             >
               <input
+                autoComplete="username"
                 autoFocus={true}
                 className="form-control"
                 id="formBasicUsername"
@@ -635,6 +636,7 @@ exports[`Storyshots Login default 1`] = `
               className="form-group"
             >
               <input
+                autoComplete="current-password"
                 className="form-control"
                 id="formBasicPassword"
                 onChange={[Function]}
@@ -754,6 +756,7 @@ exports[`Storyshots Login interactionArea 1`] = `
             className="form-group"
           >
             <input
+              autoComplete="username"
               autoFocus={true}
               className="form-control"
               id="formBasicUsername"
@@ -766,6 +769,7 @@ exports[`Storyshots Login interactionArea 1`] = `
             className="form-group"
           >
             <input
+              autoComplete="current-password"
               className="form-control"
               id="formBasicPassword"
               onChange={[Function]}
@@ -884,6 +888,7 @@ exports[`Storyshots Login onlyInput 1`] = `
           className="form-group"
         >
           <input
+            autoComplete="username"
             autoFocus={true}
             className="form-control"
             id="formBasicUsername"
@@ -896,6 +901,7 @@ exports[`Storyshots Login onlyInput 1`] = `
           className="form-group"
         >
           <input
+            autoComplete="current-password"
             className="form-control"
             id="formBasicPassword"
             onChange={[Function]}

src/components/App.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from "react";
 import "./App.css";
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter, Route, Switch } from "react-router-dom";
 import Router from "./Router/Router";
 import PermanentAssets from "./basicElements/PermanentAssets";
 
@@ -18,6 +18,7 @@ import { SystemState } from "../background/redux/actions/sytemState";
 import { checkForCookie } from "../background/api/auth";
 import { FFLoading } from "./basicElements/Loading";
 import { CookieStatus } from "../background/redux/actions/tokenTypes";
+import Error400 from "./pages/errors/Error400";
 
 // this takes the redux store and maps everything that is needed to the function props
 const mapState = (state: SystemState) => ({
@@ -67,7 +68,17 @@ function App(props: Props): ReactElement {
             );
         } else {
             console.log("[APP] showing login");
-            return <Login />;
+            return (
+                <BrowserRouter>
+                    <Switch>
+                        <Route
+                            path={"/error"}
+                            component={() => <Error400 needsLogin />}
+                        />
+                        <Route path={"*"} component={Login} />
+                    </Switch>
+                </BrowserRouter>
+            );
         }
     } else {
         if (props.tokens.checkedCookies === CookieStatus.NOT_STARTED) {

src/components/Router/Router.tsx

@@ -6,21 +6,24 @@ import Login from "../basicElements/login/Login";
 import Registration from "../pages/User/Registration";
 import FileSystem, { filesBaseUrl } from "../pages/filesytem/Filesystem";
 import Profile from "../pages/User/Profile";
+import Error400 from "../pages/errors/Error400";
 
 export default function Router(): ReactElement {
     return (
         <Switch>
             <Route path={"/login"} component={Login} />
             <Route exact path={"/"}>
-                <Redirect to={filesBaseUrl}/>
+                <Redirect to={filesBaseUrl} />
             </Route>
             <Route path={"/start"}>
                 <Redirect to={"/"} />
             </Route>
-            <Route path={"/health"}  component={Health}/>
+            <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={"*"} component={Error404} />
         </Switch>
     );

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

@@ -4,50 +4,60 @@ import { BrowserRouter } from "react-router-dom";
 import "../../../style/custom.scss";
 import Login, { LoginHeader, LoginInput, LoginInteractionArea } from "./Login";
 import { action } from "@storybook/addon-actions";
+import store from "../../../background/redux/store";
+import { Provider } from "react-redux";
 
 storiesOf("Login", module)
     .add("default", () => (
-        <BrowserRouter>
-            <Login />
-        </BrowserRouter>
+        <Provider store={store}>
+            <BrowserRouter>
+                <Login />
+            </BrowserRouter>
+        </Provider>
     ))
 
     .add("onlyHeader", () => (
-        <BrowserRouter>
-            <LoginHeader />
-        </BrowserRouter>
+        <Provider store={store}>
+            <BrowserRouter>
+                <LoginHeader />
+            </BrowserRouter>
+        </Provider>
     ))
 
     .add("onlyInput", () => (
-        <BrowserRouter>
-            <LoginInput
-                handleSubmit={() => 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={""}
-            />
-        </BrowserRouter>
+        <Provider store={store}>
+            <BrowserRouter>
+                <LoginInput
+                    handleSubmit={() => 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={""}
+                />
+            </BrowserRouter>
+        </Provider>
     ))
 
     .add("interactionArea", () => (
-        <BrowserRouter>
-            <LoginInteractionArea
-                handleSubmit={() => 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={""}
-            />
-        </BrowserRouter>
+        <Provider store={store}>
+            <BrowserRouter>
+                <LoginInteractionArea
+                    handleSubmit={() => 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={""}
+                />
+            </BrowserRouter>
+        </Provider>
     ));

src/components/basicElements/login/Login.test.tsx

@@ -2,12 +2,16 @@ import { render } from "@testing-library/react";
 import React from "react";
 import Login from "./Login";
 import { RouterWrapper } from "../../../dev/testUtils/RouterWrapper";
+import store from "../../../background/redux/store";
+import { Provider } from "react-redux";
 
 test("renders Login page", () => {
     const breadcrumb = render(
-        <RouterWrapper>
-            <Login />
-        </RouterWrapper>
+        <Provider store={store}>
+            <RouterWrapper>
+                <Login />
+            </RouterWrapper>
+        </Provider>
     );
 
     expect(breadcrumb).toMatchSnapshot();

src/components/basicElements/login/Login.tsx

@@ -17,6 +17,9 @@ import {
 import { loginWithUsernameAndPassword } from "../../../background/api/auth";
 
 import logo from "../../../assets/images/logos/logoWithWhiteBorder.png";
+import { useHistory, useLocation } from "react-router-dom";
+import { useSelector } from "react-redux";
+import { RootState } from "../../../background/redux/store";
 
 export interface LoginInputInterface {
     handleSubmit: (event: FormEvent) => void;
@@ -38,6 +41,20 @@ function Login(): ReactElement {
     const [errorMessage, setErrorMessage] = useState<string>("");
     const [isLoading, setIsLoading] = useState<boolean>(false);
 
+    const location = useLocation();
+    const urlSearchParams = new URLSearchParams(location.search);
+    const dest = urlSearchParams.get("dest");
+    const history = useHistory();
+
+    const tokens = useSelector((state: RootState) => state.tokens);
+
+    if (tokens.refreshToken && tokens.accessToken?.token) {
+        if (dest) {
+            history.push(decodeURIComponent(dest));
+        } else {
+            history.push("/");
+        }
+    }
     const handleSubmit = (event: FormEvent) => {
         event.preventDefault();
         setIsLoading(true);
@@ -142,6 +159,7 @@ export function LoginInput(props: LoginInputInterface) {
                             <Form.Control
                                 autoFocus
                                 placeholder="Username"
+                                autoComplete="username"
                                 value={username}
                                 onChange={(event) =>
                                     setUsername(event.target.value)
@@ -154,6 +172,7 @@ export function LoginInput(props: LoginInputInterface) {
                                 type="password"
                                 placeholder="Password"
                                 value={password}
+                                autoComplete="current-password"
                                 onChange={(event) =>
                                     setPassword(event.target.value)
                                 }

src/components/basicElements/login/__snapshots__/Login.test.tsx.snap

@@ -54,6 +54,7 @@ Object {
                     class="form-group"
                   >
                     <input
+                      autocomplete="username"
                       class="form-control"
                       id="formBasicUsername"
                       placeholder="Username"
@@ -64,6 +65,7 @@ Object {
                     class="form-group"
                   >
                     <input
+                      autocomplete="current-password"
                       class="form-control"
                       id="formBasicPassword"
                       placeholder="Password"
@@ -181,6 +183,7 @@ Object {
                   class="form-group"
                 >
                   <input
+                    autocomplete="username"
                     class="form-control"
                     id="formBasicUsername"
                     placeholder="Username"
@@ -191,6 +194,7 @@ Object {
                   class="form-group"
                 >
                   <input
+                    autocomplete="current-password"
                     class="form-control"
                     id="formBasicPassword"
                     placeholder="Password"