Feature/add user

webapp_frontend/package.json

@@ -13,15 +13,19 @@
     "@types/react-bootstrap": "^0.32.24",
     "@types/react-dom": "^16.9.8",
     "@types/react-redux": "^7.1.11",
+    "@types/react-router-dom": "^5.1.6",
     "axios": "^0.20.0",
     "bootstrap": "^4.5.3",
     "node-sass": "^4.14.1",
     "react": "^16.13.1",
     "react-bootstrap": "^1.4.0",
     "react-dom": "^16.13.1",
     "react-redux": "^7.2.2",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",
+    "react-toastify": "^6.1.0",
     "redux": "^4.0.5",
+    "redux-types": "^2.0.3",
     "typescript": "^3.8.3"
   },
   "scripts": {

webapp_frontend/public/assets/audio/2017-04-01_-_Viking_Ship_-_David_Fesliyan.txt

@@ -0,0 +1 @@
+https://www.fesliyanstudios.com/royalty-free-music/download/viking-ship-visual-novel-corruption-and-divide/175

webapp_frontend/src/background/api/api.ts

@@ -1,7 +1,7 @@
 import Axios, {} from "axios";
 import {constants} from "../constants";
 
-const hostname:string =constants.url.API_URL+'/api';
+export const hostname:string =constants.url.API_URL+'/api';
 
 
 interface BackendHealthData {

webapp_frontend/src/background/api/registration.ts

@@ -0,0 +1,7 @@
+
+
+function test(){
+    return null
+}
+
+export default test;

webapp_frontend/src/background/methods/checkInput.ts

@@ -0,0 +1,20 @@
+import {toast} from "react-toastify";
+
+function notMinStrLength(text:string, minAnz:number):boolean {
+    return text.length < minAnz;
+}
+
+function notMinStrLengthAlert(minAnz:number|string, where:number|string):void {
+    toast.error(
+        "Mindestzeichenanzahl bei " +
+        where +
+        ": " +
+        minAnz
+    );
+}
+
+function passwordsDoNotMatchAlert():void {
+    toast.error("Passwörter stimmen nicht überein");
+}
+
+export {notMinStrLength, notMinStrLengthAlert, passwordsDoNotMatchAlert};

webapp_frontend/src/background/methods/grammar/germanGrammar.ts

@@ -0,0 +1,14 @@
+function genitiveOfWord(name:string):string {
+    // checks if "s" can be used for name's plural or if an apostrophe has to be used
+    let lastLetter = name[name.length - 1];
+    let lastTwoLetters = name.substr(name.length - 2, 2).toLowerCase();
+    return (
+        lastLetter === 's'
+        || lastLetter === 'ß'
+        || lastLetter === 'z'
+        || lastLetter === 'x'
+        || lastTwoLetters === "ce"
+    ) ? (name + "'") : (name + "s");
+}
+
+export {genitiveOfWord}

webapp_frontend/src/background/methods/objects/compareObjects.ts

@@ -0,0 +1,17 @@
+function objectEquals(object1:object|any, object2:object|any):boolean {
+    let areEqual = true;
+
+    //keylength
+    if (Object.keys(object1).length === Object.keys(object2).length) return false;
+
+    //compare keys
+    Object.keys(object1).forEach((key) => {
+        if (object1[key] !== object2[key]) {
+            areEqual = false;
+        }
+    });
+
+    return areEqual;
+}
+
+export default objectEquals;

webapp_frontend/src/background/methods/redirect.ts

@@ -0,0 +1,15 @@
+const internRedirect = (event: { preventDefault: () => void; }, history: any, path: string): void => {
+    event.preventDefault();
+    if (path) {
+        const element = document.getElementById(path)
+        if (element) {
+            element.scrollIntoView()
+        }
+    }
+};
+const externRedirect = (event: { preventDefault: () => void; }, history: any[], path: string): void => {
+    event.preventDefault();
+    history.push(path);
+};
+
+export {externRedirect, internRedirect}

webapp_frontend/src/background/methods/sound.js

@@ -0,0 +1,22 @@
+function playAudioByID(audioID) {
+    document.getElementById(audioID).play();
+}
+
+function pauseAudioByID(audioID) {
+    document.getElementById(audioID).pause();
+}
+
+function setAudioVolumeByID(audioID, volume) {
+    //0.0 - 1.0
+    document.getElementById(audioID).volume = volume;
+}
+
+function audioOnOff(audioID) {
+    if (document.getElementById(audioID).paused) {
+        playAudioByID(audioID);
+    } else {
+        pauseAudioByID(audioID);
+    }
+}
+
+export { pauseAudioByID, playAudioByID, setAudioVolumeByID, audioOnOff };

webapp_frontend/src/background/methods/strings.ts

@@ -0,0 +1,16 @@
+function reverseString(string:string):string {
+    if (string === "")
+        return "";
+    else
+        return reverseString(string.substr(1)) + string.charAt(0);
+}
+
+function stringReplaceSubstringOneTimeFromBeginningAndEnd(string:string, substring:string, replaceWith:string):string {
+    string = string.replace(substring, replaceWith);
+    string = reverseString(string);
+    string = string.replace(substring, replaceWith);
+    string = reverseString(string);
+    return string;
+}
+
+export {reverseString, stringReplaceSubstringOneTimeFromBeginningAndEnd}

webapp_frontend/src/background/methods/time.ts

@@ -0,0 +1,17 @@
+function getTimeStamp(): number {
+    return Math.round(new Date().getTime() / 1000);
+}
+
+function getTimeStampFromDate(date: Date): number {
+    return Math.round(new Date(date).getTime() / 1000);
+}
+
+function getDateAsStringFromTimestamp(ts: number): string {
+    let dateFromTs = new Date(ts * 1000);
+    let year = dateFromTs.getFullYear();
+    let month = dateFromTs.getMonth() + 1;
+    let date = dateFromTs.getDate();
+    return date + "." + month + "." + year;
+}
+
+export {getTimeStamp, getDateAsStringFromTimestamp, getTimeStampFromDate};

webapp_frontend/src/components/App.tsx

@@ -1,8 +1,16 @@
-import React, {ReactElement, useEffect, useState} from 'react';
+import React, {ReactElement} from 'react';
+import './App.css';
+import {Container} from 'react-bootstrap';
+import Header from "./basicElements/Header";
+import Footer from "./basicElements/Footer";
+import {BrowserRouter} from "react-router-dom";
+import Router from "./Router/Router";
+import PermanentAssets from "./basicElements/PermanentAssets";
+
+
 import {connect, ConnectedProps} from 'react-redux'
 import {addAccessToken, addRefreshToken} from "../background/redux/actions/tokens";
 import {SystemState} from "../background/redux/actions/sytemState";
-import {Button} from "react-bootstrap";
 
 
 // this takes the redux store and maps everything that is needed to the function props
@@ -25,14 +33,21 @@ type Props = PropsFromRedux & {}
 function App(props: Props): ReactElement {
 
 
+    console.log("[App] props.tokens: ")
     console.log(props.tokens.refreshToken)
     console.log(props.tokens)
 
 
     return (
         <div className="App">
-            <Button onClick={() => props.addAccessToken({token:"bva",timestamp:1243})}>test (look in the console)</Button>
-            <Button onClick={() => props.addRefreshToken("bgsgfhz")}>Refreshtoken (look in the console)</Button>
+            <BrowserRouter>
+                <Header/>
+                <Container>
+                    <Router/>
+                </Container>
+                <Footer/>
+                <PermanentAssets/>
+            </BrowserRouter>
         </div>
     );
 }

webapp_frontend/src/components/Router/Router.tsx

@@ -0,0 +1,19 @@
+import React, {ReactElement} from "react";
+import {Redirect, Route, Switch} from "react-router-dom";
+import Health from "../pages/Health";
+import Error404 from "../pages/errors/Error404";
+import Login from "../basicElements/Login";
+
+export default function Router(): ReactElement {
+
+    return (
+        <Switch>
+            <Route path={"/health"} component={Health}/>
+            <Route path={"/login"} component={Login}/>
+            <Route exact path={"/"}>
+                <Redirect to={"/health"}/>
+            </Route>
+            <Route path={"*"} component={Error404}/>
+        </Switch>
+    )
+}

webapp_frontend/src/components/basicElements/Footer.tsx

@@ -1,8 +1,10 @@
 import React, {ReactElement} from 'react';
 
-function Footers():ReactElement {
-    return(<div>hallo</div>);
+export default function Footers():ReactElement {
+    return(
+        <div>
+            Footer
+        </div>
+    );
 }
 
-export default Footers;
-

webapp_frontend/src/components/basicElements/Login.tsx

@@ -1,8 +1,6 @@
 import React, {ReactElement} from 'react';
 
-function Login():ReactElement {
+export default function Login():ReactElement {
     return(<div>hallo</div>);
 }
 
-export default Login;
-

webapp_frontend/src/components/basicElements/PermanentAssets.tsx

@@ -0,0 +1,11 @@
+import React, {ReactElement} from "react";
+
+export default function PermanentAssets(): ReactElement {
+    return (
+        <div>
+            <audio id={"audio_viking"} preload={"metadata"}>
+                <source src="/assets/audio/2017-04-01_-_Viking_Ship_-_David_Fesliyan.mp3"/>
+            </audio>
+        </div>
+    )
+}

webapp_frontend/src/components/pages/Health.tsx

@@ -0,0 +1,63 @@
+import React, {useEffect, useState} from "react";
+import logo from "../../assets/images/logos/logo.png";
+import {Button, Table} from "react-bootstrap";
+import {callBackendHealth} from "../../background/api/api";
+import {audioOnOff, setAudioVolumeByID} from "../../background/methods/sound"
+
+export default function Health() {
+
+    const [backendLiveTime, setBackendLiveTime] = useState<number | string>("not reachable");
+    const [backendUserCount, setBackendUserCount] = useState<number | string>("not reachable");
+
+    useEffect(() => {
+        updateVariables()
+    },[]);
+
+    function updateVariables(): void {
+        Promise.all([callBackendHealth()])
+            .then(([backendHealthData]) => {
+                setBackendLiveTime(backendHealthData.uptimeInSeconds);
+                setBackendUserCount(backendHealthData.userCount)
+            })
+    }
+
+    return (
+        <>
+            <h1>
+                FileFighter
+            </h1>
+
+            <img
+                src={logo}
+                alt="Logo FileFighter"
+                onClick={() => {
+                    setAudioVolumeByID("audio_viking", 0.5)
+                    audioOnOff("audio_viking")
+                }}
+            />
+
+
+            <div>
+                <Button className={"mt-3 mb-2 float-right"} onClick={() => updateVariables()}>Refresh</Button>
+                <Table striped bordered hover variant="dark">
+                    <thead>
+                    <tr>
+                        <th>Backend information</th>
+
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr>
+                        <td>Uptime</td>
+                        <td>{backendLiveTime}</td>
+                    </tr>
+                    <tr>
+                        <td>Usercount</td>
+                        <td>{backendUserCount}</td>
+                    </tr>
+                    </tbody>
+                </Table>
+            </div>
+        </>
+    )
+}

webapp_frontend/src/components/pages/errors/Error404.stories.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import {storiesOf} from "@storybook/react";
+import Error404 from "./Error404";
+import {BrowserRouter} from "react-router-dom";
+
+storiesOf("Error404", module)
+    .add("default", () =>
+        <BrowserRouter>
+            <Error404/>
+        </BrowserRouter>
+    )

webapp_frontend/src/components/pages/errors/Error404.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+export default function Error404() {
+    return <div>
+        <p className={"text-center"}>
+            <Link to="/">Go to Home </Link>
+        </p>
+    </div>;
+}

webapp_frontend/src/stories/button.css → webapp_frontend/src/dev/storybook-basics/button.css

@@ -14,7 +14,7 @@
 .storybook-button--secondary {
   color: #333;
   background-color: transparent;
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+  box-shadow: rgba(0, 0, 0, 0.15) 0 0 0 1px inset;
 }
 .storybook-button--small {
   font-size: 12px;

webapp_frontend/src/index.tsx

@@ -6,7 +6,7 @@ import Constants from "./components/Constants";
 
 ReactDOM.render(
   <React.StrictMode>
-   <Constants></Constants>
+   <Constants/>
   </React.StrictMode>,
   document.getElementById('root')
 );