From 2946bb41110d4e304141df8d60e69f0eb7bbcd62 Mon Sep 17 00:00:00 2001
From: Gimleux <theo-2008@t-online.de>
Date: Tue, 24 Nov 2020 11:39:37 +0100
Subject: [PATCH 1/2] fixed error which prevented user from cleaning password
 field

---
 .../src/components/pages/Registration.tsx      | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/webapp_frontend/src/components/pages/Registration.tsx b/webapp_frontend/src/components/pages/Registration.tsx
index cffca77a..bb86ced7 100644
--- a/webapp_frontend/src/components/pages/Registration.tsx
+++ b/webapp_frontend/src/components/pages/Registration.tsx
@@ -69,19 +69,21 @@ export default function Registration(): ReactElement {
         }
     }
 
-    const makePasswordInputFitRules = (input:string):string|null => {
+    const makePasswordInputFitRules = (input:string):[string,boolean] => {
         input = deleteSpaces(input);
         if (biggerMaxStrLength(input, MAX_PASSWORD_LENGTH)){
-            return null
+            return [input,false];
         }
-        return input;
+        return [input,true];
     }
 
     const handlePasswordChange = (event: ChangeEvent<HTMLInputElement>) => {
         event.preventDefault();
-        let value:string|null = makePasswordInputFitRules(event.target.value);
-        if (!value){
+        let value:[string,boolean]|string = makePasswordInputFitRules(event.target.value);
+        if (!value[1]){
             value = password;
+        } else {
+            value = value[0]
         }
         setPasswordInformationLength(!notMinStrLength(value, MIN_PASSWORD_LENGTH));
         setPasswordInformationLowercase(value.match(/[a-z]/) !== null);
@@ -92,9 +94,11 @@ export default function Registration(): ReactElement {
 
     const handlePasswordConfirmationChange = async (event: ChangeEvent<HTMLInputElement>) => {
         event.preventDefault();
-        let value:string|null = makePasswordInputFitRules(event.target.value);
-        if (!value){
+        let value:[string,boolean]|string = makePasswordInputFitRules(event.target.value);
+        if (!value[1]){
             value = passwordConfirmation;
+        } else {
+            value = value[0]
         }
         setPasswordConfirmation(value);
     }

From 7340ce188b14041308a01c941d05d908038ac6c1 Mon Sep 17 00:00:00 2001
From: Gimleux <theo-2008@t-online.de>
Date: Tue, 24 Nov 2020 11:56:03 +0100
Subject: [PATCH 2/2] Specified number of characters in password

---
 webapp_frontend/src/components/pages/Registration.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp_frontend/src/components/pages/Registration.tsx b/webapp_frontend/src/components/pages/Registration.tsx
index bb86ced7..387db29a 100644
--- a/webapp_frontend/src/components/pages/Registration.tsx
+++ b/webapp_frontend/src/components/pages/Registration.tsx
@@ -128,7 +128,7 @@ export default function Registration(): ReactElement {
                                 <img alt={"status icon password length"}
                                      src={passwordInformationLength ? check_svg : info_svg}/>
                                 <span className={"sr-only"}>{passwordInformationLength ? "Done: " : "Missing: "}</span>
-                                <span className={passwordInformationLength ? "text-success" : "text-muted"}>Passwords must be at least 8 characters.</span>
+                                <span className={passwordInformationLength ? "text-success" : "text-muted"}>Passwords must be between 8 and 20 characters.</span>
                             </div>
                             <div>
                                 <img alt={"status icon password contains uppercase character"}