Feature/add user

webapp_frontend/src/assets/images/icons/material.io/license.txt

@@ -0,0 +1 @@
+https://www.apache.org/licenses/LICENSE-2.0.html

webapp_frontend/src/background/api/auth.ts

@@ -3,11 +3,11 @@ import Axios from "axios";
 
 import {hostname, userPath} from "./api";
 
-import {AddUser, UserState} from "../redux/actions/userTypes";
+import {UserState} from "../redux/actions/userTypes";
 import store from "../redux/store";
 import {addAccessToken, addRefreshToken, checkedCookies, removeTokens} from "../redux/actions/tokens";
 import {addUser} from "../redux/actions/user";
-import {AccessToken, AddAccessToken, AddRefreshToken, CheckedCookies, RemoveTokens, TokensState} from "../redux/actions/tokenTypes";
+import {AccessToken, RemoveTokens, TokensState} from "../redux/actions/tokenTypes";
 import {deleteCookie, getCookie, setCookie} from "../methods/cookies";
 
 
@@ -26,10 +26,10 @@ export interface BackendLoginData {
 export const checkForCookie=()=>{
     let refreshTokenCookieValue=getCookie(cookieName)
     if (refreshTokenCookieValue){
-        store.dispatch(addRefreshToken(refreshTokenCookieValue) as AddRefreshToken)
+        store.dispatch(addRefreshToken(refreshTokenCookieValue))
         getAccessTokenWithRefreshToken();
     }
-    store.dispatch(checkedCookies(true) as CheckedCookies)
+    store.dispatch(checkedCookies(true))
 
 
 }
@@ -48,8 +48,8 @@ console.log("[Auth] loginWithUsernameAndPassword")
         return Axios.get(hostname + userPath + '/login', config)
             .then((data) => {
                 console.log(data.data)
-                store.dispatch(addRefreshToken(data.data.tokenValue) as AddRefreshToken)
-                store.dispatch(addUser(data.data.user as UserState) as AddUser)
+                store.dispatch(addRefreshToken(data.data.tokenValue))
+                store.dispatch(addUser(data.data.user as UserState))
 
                 if (stayLoggedIn){
                     setCookie(cookieName,data.data.tokenValue,60)
@@ -67,7 +67,6 @@ console.log("[Auth] loginWithUsernameAndPassword")
     })
 }
 
-
 export const getAccessTokenWithRefreshToken = () => {
     console.log("getAccessTokenWithRefreshToken")
 
@@ -83,7 +82,7 @@ export const getAccessTokenWithRefreshToken = () => {
         .then((data) => {
             setAuthHeaderToAxios(data.data.tokenValue)
 
-            store.dispatch(addAccessToken({token: data.data.tokenValue, timestamp: data.data.validUntil}as AccessToken) as AddAccessToken);
+            store.dispatch(addAccessToken({token: data.data.tokenValue, timestamp: data.data.validUntil}as AccessToken));
 
         })
         .catch(((error) => {
@@ -96,13 +95,11 @@ export const getAccessTokenWithRefreshToken = () => {
 }
 
 export const logout=()=>{
-    store.dispatch(removeTokens()as RemoveTokens);
+    store.dispatch(removeTokens());
     deleteCookie(cookieName);
 }
 
 function setAuthHeaderToAxios(accessToken: string) {
     Axios.defaults.headers.common['Authorization'] =
         `Bearer ${accessToken}`;
-}
-
-
+}

webapp_frontend/src/background/api/registration.ts

@@ -1,7 +1,42 @@
+import Axios, {AxiosError, AxiosResponse} from "axios";
+import {hostname, userPath} from "./api";
 
-
-function test(){
-    return null
+export interface IRegisterServerResponse {
+    httpStatus: number,
+    httpMessage: string
+    outputMessage?: string
 }
 
-export default test;
+export const registerNewUser = (username: string, password: string, passwordConfirmation: string): Promise<IRegisterServerResponse> => {
+
+    return new Promise((resolve, reject) => {
+        const newUser = {
+            username: username,
+            password: password,
+            confirmationPassword: passwordConfirmation
+        }
+
+
+        return Axios.post(hostname + userPath + '/register', newUser)
+            .then((data: AxiosResponse<object>) => {
+                console.log(data)
+                const response: IRegisterServerResponse = {
+                    httpStatus: data.status,
+                    httpMessage: data.statusText
+                }
+                if (data.status === 201) {
+                    response.outputMessage = "User was successfully created."
+                }
+                resolve(response);
+            })
+            .catch((error: AxiosError) => {
+                console.log(error.response)
+                const response: IRegisterServerResponse = {
+                    httpStatus: error.response!.status,
+                    httpMessage: error.response!.statusText,
+                    outputMessage: error.response!.data.message
+                }
+                reject(response);
+            })
+    })
+}

webapp_frontend/src/background/methods/checkInput.ts

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

webapp_frontend/src/background/methods/strings.ts

@@ -1,16 +1,26 @@
-function reverseString(string:string):string {
+export 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 {
+export 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}
+export function deleteSpaces(string:string):string {
+    return string.replace(/\s/,"")
+}
+
+export function trimString(string:string, maxLength: number):string {
+    return string.length > maxLength ? string.substr(0, maxLength-1) : string;
+}
+
+export function trimStringWithDotsAtEnd(string:string, maxLength: number):string {
+    return trimString(string, maxLength) + '…';
+}

webapp_frontend/src/background/redux/actions/tokens.tsx

@@ -1,21 +1,28 @@
-import {ADD_REFRESH_TOKEN, ADD_ACCESS_TOKEN, AccessToken, CHECKED_COOKIES, REMOVE_TOKENS} from "./tokenTypes";
+import {
+    ADD_REFRESH_TOKEN,
+    ADD_ACCESS_TOKEN,
+    AccessToken,
+    CHECKED_COOKIES,
+    REMOVE_TOKENS,
+    AddRefreshToken, AddAccessToken, RemoveTokens, CheckedCookies
+} from "./tokenTypes";
 
 
-export const addRefreshToken = (content: string) => ({
+export const addRefreshToken = (content: string):AddRefreshToken => ({
     type: ADD_REFRESH_TOKEN,
     payload: content
 });
 
-export const addAccessToken = (content: AccessToken) => ({
+export const addAccessToken = (content: AccessToken):AddAccessToken => ({
     type: ADD_ACCESS_TOKEN,
     payload: content
 });
 
-export const removeTokens = ()=>({
+export const removeTokens = ():RemoveTokens=>({
     type: REMOVE_TOKENS
 })
 
-export const checkedCookies = (content: boolean) => ({
+export const checkedCookies = (content: boolean):CheckedCookies => ({
     type: CHECKED_COOKIES,
     payload: content
 });

webapp_frontend/src/background/redux/actions/user.tsx

@@ -1,6 +1,6 @@
-import {ADD_USER, UserState} from "./userTypes";
+import {ADD_USER, AddUser, UserState} from "./userTypes";
 
-export const addUser = (content: UserState) => ({
+export const addUser = (content: UserState):AddUser => ({
     type: ADD_USER,
     payload: content
 });

webapp_frontend/src/components/Router/Router.tsx

@@ -3,6 +3,7 @@ import {Redirect, Route, Switch} from "react-router-dom";
 import Health from "../pages/Health";
 import Error404 from "../pages/errors/Error404";
 import Login from "../basicElements/Login";
+import Registration from "../pages/Registration";
 
 export default function Router(): ReactElement {
 
@@ -13,6 +14,7 @@ export default function Router(): ReactElement {
             <Route exact path={"/"}>
                 <Redirect to={"/health"}/>
             </Route>
+            <Route path={"/registration"} component={Registration} />
             <Route path={"*"} component={Error404}/>
         </Switch>
     )

webapp_frontend/src/components/basicElements/Footer.tsx

@@ -1,9 +1,16 @@
 import React, {ReactElement} from 'react';
 
-export default function Footers():ReactElement {
-    return(
+export default function Footer(): ReactElement {
+    return (
         <div>
-            Footer
+            <table>
+                <tbody>
+                <tr>
+                    <td>Footer</td>
+                    <td>Footer</td>
+                </tr>
+                </tbody>
+            </table>
         </div>
     );
 }

webapp_frontend/src/components/basicElements/Header.tsx

@@ -1,7 +1,11 @@
 import React, {ReactElement} from 'react';
+import { useHistory } from "react-router-dom";
+import {Button} from "react-bootstrap";
 
 function Header():ReactElement {
-    return(<div></div>)
+    const history = useHistory();
+
+    return(<div><Button onClick={() => history.push("/registration")}>Registration</Button><Button onClick={() => history.push("/")}>Main</Button></div>)
 }
 
 export default Header;

webapp_frontend/src/components/pages/Registration.stories.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import {storiesOf} from "@storybook/react";
+import Registration from "./Registration";
+import {BrowserRouter} from "react-router-dom";
+import '../../style/custom.scss';
+
+storiesOf("Registration", module)
+    .add("default", () =>
+        <BrowserRouter>
+            <Registration/>
+        </BrowserRouter>
+    )