Changed some design in Registration, Made some bugfixes in filesystem

Author: Gimleux

src/background/api/filesystemTypes.ts

@@ -19,7 +19,8 @@ export interface User {
 }
 
 export interface FsEntity {
-  createdByUser: User;
+  owner: User;
+  lastUpdatedBy: User;
   fileSystemId: number;
   lastUpdated: number;
   name: string;

src/components/pages/User/Registration.tsx

@@ -13,7 +13,6 @@ export default function Registration(): ReactElement {
     const [alertVariant, setAlertColor] = useState<"primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark">("success");
     const [alertVisibility, setAlertVisibility] = useState<boolean>(false);
 
-
     const registrationContainer = document.getElementById("registrationContainer")
     const logoSubmit = document.getElementById("logoSubmit")
 
@@ -44,7 +43,7 @@ export default function Registration(): ReactElement {
         } else if (newUser.password.match(/\d/) == null || newUser.password.match(/[a-z]/) == null || newUser.password.match(/[A-Z]/) == null || notMinStrLength(newUser.password, MIN_PASSWORD_LENGTH)) {
             handleAlertVisibility(DEFAULT_ALERT_DURATION, "danger", "Error: Please pay attention to the notes below the input fields.")
         } else {
-            await registerNewUser(newUser.username, newUser.password, newUser.passwordConfirmation)
+            registerNewUser(newUser.username, newUser.password, newUser.passwordConfirmation)
                 .then(res => {
                     handleAlertVisibility(DEFAULT_ALERT_DURATION, "success", "Worked: " + (res.outputMessage ? res.outputMessage : (res.httpStatus + " " + res.httpMessage)));
                     toggleSubmitLogo();
@@ -67,16 +66,16 @@ export default function Registration(): ReactElement {
     }
 
     return (
-        <Container className="h-100" style={{position: "relative"}} id="registrationContainer">
+        <Container id="registrationContainer">
             <Row>
-                <Col md={{span: 6, offset: 3}}>
+                <div className="px-3 w-100">
                     <h1>Create new account</h1>
                     <UserInformationInput triggerAlert={handleAlertVisibility} submitFunction={handleSubmit}/>
                     <Alert variant={alertVariant} onClose={() => setAlertVisibility(false)} show={alertVisibility}
                            dismissible>
                         <p>{alertMessage}</p>
                     </Alert>
-                </Col>
+                </div>
             </Row>
             <img className={"invisible m0 position-relative"} src={fileFighter} alt="logo"
                  id="logoSubmit"/>

src/components/pages/User/UserInformationInput.tsx

@@ -49,28 +49,31 @@ export default function UserInformationInput(props: UserInformationInputProps):
 
     const handlePasswordChange = (event: ChangeEvent<HTMLInputElement>) => {
         event.preventDefault();
-        let value: [string, boolean] | string = makePasswordInputFitRules(event.target.value);
-        if (!value[1]) {
-            value = password;
+        let newValue : string;
+
+        let [stringValue, isOK]: [string, boolean]  = makePasswordInputFitRules(event.target.value);
+        if (!isOK) {
+            newValue = password;
         } else {
-            value = value[0]
+            newValue = stringValue
         }
-        setPasswordInformationLength(!notMinStrLength(value, MIN_PASSWORD_LENGTH));
-        setPasswordInformationLowercase(value.match(/[a-z]/) !== null);
-        setPasswordInformationUppercase(value.match(/[A-Z]/) !== null);
-        setPasswordInformationNumber(value.match(/\d/) !== null);
-        setPassword(value)
+        setPasswordInformationLength(!notMinStrLength(newValue, MIN_PASSWORD_LENGTH));
+        setPasswordInformationLowercase(newValue.match(/[a-z]/) !== null);
+        setPasswordInformationUppercase(newValue.match(/[A-Z]/) !== null);
+        setPasswordInformationNumber(newValue.match(/\d/) !== null);
+        setPassword(newValue)
     }
 
     const handlePasswordConfirmationChange = async (event: ChangeEvent<HTMLInputElement>) => {
         event.preventDefault();
-        let value: [string, boolean] | string = makePasswordInputFitRules(event.target.value);
-        if (!value[1]) {
-            value = passwordConfirmation;
+        let newValue : string;
+        const [stringValue, isOK]: [string, boolean]   = makePasswordInputFitRules(event.target.value);
+        if (!isOK) {
+            newValue = passwordConfirmation;
         } else {
-            value = value[0]
+            newValue = stringValue
         }
-        setPasswordConfirmation(value);
+        setPasswordConfirmation(newValue);
     }
 
     const handleSubmit = async (event: FormEvent) => {

src/components/pages/filesytem/FileList.tsx

@@ -109,15 +109,15 @@ function FileList(props: Props): ReactElement {
           ? a.fileSystemId - b.fileSystemId
           : a[property].toLowerCase().localeCompare(b[property].toLowerCase())
       );
-    } else if (property === "createdByUser") {
+    } else if (property === "lastUpdatedBy") {
       toSort.sort((a, b) =>
-        a.createdByUser.username
+        a.lastUpdatedBy.username
           .toLowerCase()
-          .localeCompare(b.createdByUser.username.toLowerCase()) === 0
+          .localeCompare(b.lastUpdatedBy.username.toLowerCase()) === 0
           ? a.fileSystemId - b.fileSystemId
-          : a.createdByUser.username
+          : a.lastUpdatedBy.username
               .toLowerCase()
-              .localeCompare(b.createdByUser.username.toLowerCase())
+              .localeCompare(b.lastUpdatedBy.username.toLowerCase())
       );
     }
     setFilesAndFolders(sortIncreasing ? toSort.reverse() : toSort);
@@ -151,7 +151,7 @@ function FileList(props: Props): ReactElement {
         <Col xs={6} md={4} onClick={() => handleSortClick("name")}>
           {"Name"}
         </Col>
-        <Col xs={6} md={3} onClick={() => handleSortClick("createdByUser")}>
+        <Col xs={6} md={3} onClick={() => handleSortClick("lastUpdatedBy")}>
           {"Owner"}
         </Col>
         <Col xs={3} md={1} onClick={() => handleSortClick("lastUpdated")}>

src/components/pages/filesytem/FileListItem.tsx

@@ -145,7 +145,7 @@ function FileListItem(props: Props): ReactElement {
         </Link>
       </Col>
       <Col xs={6} md={3}>
-        {props.fileListItem.createdByUser.username}
+        {props.fileListItem.lastUpdatedBy.username}
       </Col>
       <Col xs={3} md={1}>
         {getDateAsStringFromTimestamp(props.fileListItem.lastUpdated)}