FileFighter · qvalentin · Dec 4, 2020 · Nov 24, 2020 · Nov 24, 2020 · Nov 24, 2020
diff --git a/README.md b/README.md
@@ -5,11 +5,10 @@ Frontend Web Application for FileFighter.
 ![CodeFactor](https://www.codefactor.io/repository/github/filefighter/webapp/badge)  
 ![Docker Release](https://img.shields.io/github/v/release/filefighter/webapp?color=dark-green&label=Stable%20Version&logo=docker&style=for-the-badge)
 ![Docker Pulls](https://img.shields.io/docker/pulls/filefighter/frontend?logo=docker&style=for-the-badge)  
-[![Quality Gate Status](http://filefighter.ddns.net:9000/api/project_badges/measure?project=de.filefighter.frontend&metric=alert_status)](http://filefighter.ddns.net:9000/dashboard?id=de.filefighter.frontend)
+[![Code Smells](http://filefighter.ddns.net:9000/api/project_badges/measure?project=de.filefighter.frontend&metric=code_smells)](http://filefighter.ddns.net:9000/dashboard?id=de.filefighter.frontend)
 [![Lines of Code](http://filefighter.ddns.net:9000/api/project_badges/measure?project=de.filefighter.frontend&metric=ncloc)](http://filefighter.ddns.net:9000/dashboard?id=de.filefighter.frontend)
 [![Security Rating](http://filefighter.ddns.net:9000/api/project_badges/measure?project=de.filefighter.frontend&metric=security_rating)](http://filefighter.ddns.net:9000/dashboard?id=de.filefighter.frontend)  
 [![Bugs](http://filefighter.ddns.net:9000/api/project_badges/measure?project=de.filefighter.frontend&metric=bugs)](http://filefighter.ddns.net:9000/dashboard?id=de.filefighter.frontend)
-[![Code Smells](http://filefighter.ddns.net:9000/api/project_badges/measure?project=de.filefighter.frontend&metric=code_smells)](http://filefighter.ddns.net:9000/dashboard?id=de.filefighter.frontend)
 [![Duplicated Lines Density](http://filefighter.ddns.net:9000/api/project_badges/measure?project=de.filefighter.frontend&metric=duplicated_lines_density)](http://filefighter.ddns.net:9000/dashboard?id=de.filefighter.frontend)
 
 ## Deployment

diff --git a/webapp_frontend/package-lock.json b/webapp_frontend/package-lock.json
diff --git a/webapp_frontend/package.json b/webapp_frontend/package.json
@@ -27,6 +27,7 @@
     "react-toastify": "^6.1.0",
     "redux": "^4.0.5",
     "redux-types": "^2.0.3",
+    "super-tiny-icons": "^0.4.0",
     "typescript": "^3.8.3"
   },
   "scripts": {

diff --git a/webapp_frontend/public/favicon.ico b/webapp_frontend/public/favicon.ico
diff --git a/webapp_frontend/public/index.html b/webapp_frontend/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="h-100">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
@@ -24,20 +24,25 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>FileFighter</title>
   </head>
-  <body>
+  <body class="h-100">
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+    <div id="root" class="d-flex flex-column h-100"></div>
+    <!--Black Lives Matter!-->
+    <!--Queer Lives Matter!-->
+    <!--  ################### -->
+    <!--  ._____..._..._.........._____..._..........._......._.................  -->
+    <!--  |..___|.(_).|.|...___..|..___|.(_)...____..|.|__...|.|_....___...____.  -->
+    <!--  |.|_....|.|.|.|../._.\.|.|_....|.|../._\`|.|.'_.\..|.__|../._.\.|.'__|  -->
+    <!--  |.._|...|.|.|.|.|..__/.|.._|...|.|.|.(_|.|.|.|.|.|.|.|_..|..__/.|.|...  -->
+    <!--  |_|.....|_|.|_|..\___|.|_|.....|_|..\__,.|.|_|.|_|..\__|..\___|.|_|...  -->
+    <!--  ------------------------------------|___/-----------------------------  -->
+    <!--  FileFighter's documentation & code: https://filefighter.github.io/-->
+    <!--  ###################  -->
+    <!--  Made with <3 by:  -->
+    <!--  https://github.com/Gimleux  -->
+    <!--  https://github.com/open-schnick  -->
+    <!--  https://github.com/qvalentin  -->
   </body>
 </html>
diff --git a/webapp_frontend/public/logo192.png b/webapp_frontend/public/logo192.png
diff --git a/webapp_frontend/public/logo512.png b/webapp_frontend/public/logo512.png
diff --git a/webapp_frontend/src/assets/images/logos/logo.png b/webapp_frontend/src/assets/images/logos/logo.png
diff --git a/webapp_frontend/src/background/constants.tsx → webapp_frontend/src/background/constants.ts b/webapp_frontend/src/background/constants.tsx → webapp_frontend/src/background/constants.ts
@@ -11,7 +11,8 @@ const prod: constants = {
 
 const dev: constants = {
     url: {
-       API_URL: 'http://filefighter.ddns.net:1081/http://filefighter.ddns.net:3001',
+        API_URL: 'http://filefighter.ddns.net:1081/http://filefighter.ddns.net:3001',
+       // API_URL: 'https://cors-anywhere.herokuapp.com/http://filefighter.ddns.net:3001',
        // API_URL: 'http://localhost:8080',
     }
 };

diff --git a/webapp_frontend/src/background/methods/redirect.ts b/webapp_frontend/src/background/methods/redirect.ts
@@ -1,15 +1,16 @@
-const internRedirect = (history: any, path: string, event?: { preventDefault: () => void; }): void => {
-    if (event) event.preventDefault();
-    if (path) {
-        const element = document.getElementById(path)
-        if (element) {
-            element.scrollIntoView()
-        }
+const scrollToElement = (history: { push: (path:string) => void; }, id: string, event?: { preventDefault: () => void; }): void => {
+    //Replaces anchor for React
+    console.log("Scrolled to " + id)
+    event?.preventDefault();
+    if (id) {
+        const element = document.getElementById(id)
+        element?.scrollIntoView()
     }
 };
-const externRedirect = (event: { preventDefault: () => void; }, history: any[], path: string): void => {
-    event.preventDefault();
-    history.push(path);
+const redirect = (history:{ push: (path:string) => void; } , path: string, event?: { preventDefault: () => void; }): void => {
+    console.log("Redirected to " + path)
+    event?.preventDefault();
+    if (path !== window.location.pathname) history.push(path);
 };
 
-export {externRedirect, internRedirect}
+export {redirect, scrollToElement}
diff --git a/webapp_frontend/src/background/methods/style.js b/webapp_frontend/src/background/methods/style.js
@@ -0,0 +1,13 @@
+export function getStyleValue(element, strCssRule) {
+    //https://stackoverflow.com/questions/5227909/how-to-get-an-elements-padding-value-using-javascript
+    let strValue = "";
+    if (document.defaultView && document.defaultView.getComputedStyle) {
+        strValue = document.defaultView.getComputedStyle(element, "").getPropertyValue(strCssRule);
+    } else if (element.currentStyle) {
+        strCssRule = strCssRule.replace(/(\w)/g, function (strMatch, p1) {
+            return p1.toUpperCase();
+        });
+        strValue = element.currentStyle[strCssRule];
+    }
+    return strValue;
+}
diff --git a/webapp_frontend/src/background/methods/windowSize.ts b/webapp_frontend/src/background/methods/windowSize.ts
@@ -0,0 +1,35 @@
+export interface getWindowSize_Interface {
+    viewportWidth: number,
+    viewportHeight: number
+}
+export function getWindowSize():getWindowSize_Interface {
+
+    let viewportwidth:number;
+    let viewportheight:number;
+
+// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
+
+    if (typeof window.innerWidth != 'undefined') {
+        viewportwidth = window.innerWidth
+        viewportheight = window.innerHeight
+    }
+
+// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
+
+    else if (typeof document.documentElement != 'undefined' &&
+             typeof document.documentElement.clientWidth != ('undefined' || 0)){
+        viewportwidth = document.documentElement.clientWidth
+        viewportheight = document.documentElement.clientHeight
+    }
+
+// older versions of IE
+
+    else {
+        viewportwidth = document.getElementsByTagName('body')[0].clientWidth
+        viewportheight = document.getElementsByTagName('body')[0].clientHeight
+    }
+    return {
+        viewportHeight: viewportheight,
+        viewportWidth: viewportwidth
+    }
+}
diff --git a/webapp_frontend/src/components/App.css b/webapp_frontend/src/components/App.css
@@ -1,10 +1,5 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+main > .container {
+  padding: 60px 15px 0;
 }
 
 @media (prefers-reduced-motion: no-preference) {
@@ -13,21 +8,6 @@
   }
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);

diff --git a/webapp_frontend/src/components/App.tsx b/webapp_frontend/src/components/App.tsx
@@ -13,11 +13,15 @@ import {SystemState} from "../background/redux/actions/sytemState";
 
 import Login from "./basicElements/Login";
 import {checkForCookie} from "../background/api/auth";
-
+import {TopBanner} from "./basicElements/TopBanner";
 
 // this takes the redux store and maps everything that is needed to the function props
 const mapState = (state: SystemState) => ({
-    tokens: {refreshToken: state.tokens.refreshToken, accessToken: state.tokens.accessToken, checkedCookies: state.tokens.checkedCookies},
+    tokens: {
+        refreshToken: state.tokens.refreshToken,
+        accessToken: state.tokens.accessToken,
+        checkedCookies: state.tokens.checkedCookies
+    },
     user: state.user
 })
 
@@ -40,17 +44,23 @@ function App(props: Props): ReactElement {
     console.log(props.tokens.refreshToken)
     console.log(props.tokens)
     console.log(props.user)
+    console.log("[App]---------------")
 
     if (props.tokens.checkedCookies) {
 
-        if (props.tokens.refreshToken && props.tokens.accessToken) {
+        if ((props.tokens.refreshToken && props.tokens.accessToken)) {
 
             return (
-                <div className="App">
+                <div className="App h-100 d-flex flex-column">
                     <BrowserRouter>
+                        <TopBanner/>
                         <Header/>
-                        <Router/>
-                        <Footer/>
+                        <main role='main' className={"flex-shrink-0 flex-grow-1"}>
+                            <Router/>
+                        </main>
+                        <footer className='footer mt-auto py-3 bg-dark text-white'>
+                            <Footer/>
+                        </footer>
                         <PermanentAssets/>
                     </BrowserRouter>
                 </div>

diff --git a/webapp_frontend/src/components/Constants.tsx b/webapp_frontend/src/components/Constants.tsx
@@ -10,7 +10,10 @@ function Constants(): ReactElement {
     // url + host of backend
 
 
-    return (<Provider store={store}><App/></Provider>);
+    return (
+        <Provider store={store}>
+            <App/>
+        </Provider>);
 
 
 }

diff --git a/webapp_frontend/src/components/Health.tsx b/webapp_frontend/src/components/Health.tsx
diff --git a/webapp_frontend/src/components/Router/Router.tsx b/webapp_frontend/src/components/Router/Router.tsx
@@ -11,14 +11,17 @@ export default function Router(): ReactElement {
 
     return (
         <Switch>
-            <Route path={"/health"} component={Health}/>
+            <Route exact path={"/"} component={Health}/>
             <Route path={"/login"} component={Login}/>
+            <Route path={"/start"}>
+                <Redirect to={"/"}/>
+            </Route>
             <Route path={filesBaseUrl} component={FileList}/>
-            <Route exact path={"/"}>
-                <Redirect to={"/health"}/>
+            <Route path={"/health"}>
+                <Redirect to={"/"}/>
             </Route>
             <Route path={"/registration"} component={Registration}/>
             <Route path={"*"} component={Error404}/>
         </Switch>
     )
-}
+}