Added max Password

Author: Gimleux

webapp_frontend/src/background/api/registration.ts

@@ -18,6 +18,7 @@ export const registerNewUser = (username: string, password: string, passwordConf
 
         return Axios.post(hostname + userPath + '/register', newUser)
             .then((data: AxiosResponse<object>) => {
+                console.log(data)
                 const response: IRegisterServerResponse = {
                     httpStatus: data.status,
                     httpMessage: data.statusText
@@ -28,12 +29,11 @@ export const registerNewUser = (username: string, password: string, passwordConf
                 resolve(response);
             })
             .catch((error: AxiosError) => {
+                console.log(error.response)
                 const response: IRegisterServerResponse = {
                     httpStatus: error.response!.status,
-                    httpMessage: error.response!.statusText
-                }
-                if (error.response!.status === 409) {
-                    response.outputMessage = "Username is already taken."
+                    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

@@ -15,4 +15,12 @@ export function stringReplaceSubstringOneTimeFromBeginningAndEnd(string:string,
 
 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/components/pages/Registration.tsx

@@ -1,14 +1,15 @@
 import React, {ChangeEvent, FormEvent, ReactElement, useEffect, useState} from "react";
 import {Container, Row, Col, Form, FormGroup, Button, Alert} from "react-bootstrap";
 import {deleteSpaces} from "../../background/methods/strings";
-import {notMinStrLength} from "../../background/methods/checkInput";
+import {biggerMaxStrLength, notMinStrLength} from "../../background/methods/checkInput";
 import info_svg from "../../assets/images/icons/material.io/info-24px.svg";
 import check_svg from "../../assets/images/icons/material.io/check_circle-24px.svg";
 import error_svg from "../../assets/images/icons/material.io/error-24px.svg";
 import {registerNewUser} from "../../background/api/registration";
 
 export default function Registration(): ReactElement {
     const MIN_PASSWORD_LENGTH = 8;
+    const MAX_PASSWORD_LENGTH = 20;
 
     const [username, setUsername] = useState<string>("");
     const [password, setPassword] = useState<string>("");
@@ -68,10 +69,20 @@ export default function Registration(): ReactElement {
         }
     }
 
+    const makePasswordInputFitRules = (input:string):string|null => {
+        input = deleteSpaces(input);
+        if (biggerMaxStrLength(input, MAX_PASSWORD_LENGTH)){
+            return null
+        }
+        return input;
+    }
+
     const handlePasswordChange = (event: ChangeEvent<HTMLInputElement>) => {
         event.preventDefault();
-        let value = event.target.value;
-        value = deleteSpaces(value);
+        let value:string|null = makePasswordInputFitRules(event.target.value);
+        if (!value){
+            value = password;
+        }
         setPasswordInformationLength(!notMinStrLength(value, MIN_PASSWORD_LENGTH));
         setPasswordInformationLowercase(value.match(/[a-z]/) !== null);
         setPasswordInformationUppercase(value.match(/[A-Z]/) !== null);
@@ -81,8 +92,10 @@ export default function Registration(): ReactElement {
 
     const handlePasswordConfirmationChange = async (event: ChangeEvent<HTMLInputElement>) => {
         event.preventDefault();
-        let value = event.target.value;
-        value = deleteSpaces(value);
+        let value:string|null = makePasswordInputFitRules(event.target.value);
+        if (!value){
+            value = passwordConfirmation;
+        }
         setPasswordConfirmation(value);
     }