initial commit

frontend/components/basic/InputField.tsx

@@ -96,6 +96,7 @@ const InputField = (
           />
           {props.label?.includes('Password') && (
             <button
+              type="button"
               onClick={() => {
                 setPasswordVisible(!passwordVisible);
               }}

frontend/components/basic/buttons/Button.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ButtonHTMLAttributes } from "react";
 import Image from "next/image";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import {
@@ -18,6 +18,7 @@ type ButtonProps = {
   active?: boolean;
   iconDisabled?: string;
   textDisabled?: string;
+  type?: ButtonHTMLAttributes<any>['type'];
 };
 
 /**
@@ -91,6 +92,7 @@ export default function Button(props: ButtonProps): JSX.Element {
   const button = (
     <button
       disabled={!activityStatus}
+      type={props.type}
       onClick={props.onButtonPressed}
       className={styleButton}
     >

frontend/pages/login.tsx

@@ -45,7 +45,7 @@ export default function Login() {
       setErrorLogin,
       router,
       false,
-      true
+      true,
     ).then(() => {
       setTimeout(function () {
         setIsLoading(false);
@@ -75,6 +75,9 @@ export default function Login() {
           />
         </div>
       </Link>
+      <form onSubmit={(e)=>{
+        e.preventDefault()
+      }}>
         <div className="bg-bunker w-full max-w-md mx-auto h-7/12 py-4 pt-8 px-6 rounded-xl drop-shadow-xl">
           <p className="text-3xl w-max mx-auto flex justify-center font-semibold text-bunker-100 mb-6">
             Log in to your account
@@ -109,6 +112,7 @@ export default function Login() {
           <div className="flex flex-col items-center justify-center w-full md:p-2 max-h-20 max-w-md mt-4 mx-auto text-sm">
             <div className="text-l mt-6 m-8 px-8 py-3 text-lg">
               <Button
+                type="submit"
                 text="Log In"
                 onButtonPressed={loginCheck}
                 loading={isLoading}
@@ -137,6 +141,7 @@ export default function Login() {
             </button>
           </Link>
         </div>
+      </form>
     </div>
   );
 }

frontend/pages/signup.tsx

@@ -40,8 +40,8 @@ const props = {
     backgroundColor: '#0d1117',
     color: 'white',
     border: '1px solid gray',
-    textAlign: 'center'
-  }
+    textAlign: 'center',
+  },
 } as const;
 const propsPhone = {
   inputStyle: {
@@ -56,8 +56,8 @@ const propsPhone = {
     backgroundColor: '#0d1117',
     color: 'white',
     border: '1px solid gray',
-    textAlign: 'center'
-  }
+    textAlign: 'center',
+  },
 } as const;
 
 export default function SignUp() {
@@ -148,7 +148,8 @@ export default function SignUp() {
     }
   };
 
-  // Verifies if the imformation that the users entered (name, workspace) is there, and if the password matched the criteria.
+  // Verifies if the imformation that the users entered (name, workspace) is there, and if the password matched the
+  // criteria.
   const signupErrorCheck = async () => {
     setIsLoading(true);
     let errorCheck = false;
@@ -169,7 +170,7 @@ export default function SignUp() {
       setPasswordErrorLength,
       setPasswordErrorNumber,
       setPasswordErrorLowerCase,
-      currentErrorCheck: errorCheck
+      currentErrorCheck: errorCheck,
     });
 
     if (!errorCheck) {
@@ -186,8 +187,8 @@ export default function SignUp() {
           .slice(0, 32)
           .padStart(
             32 + (password.slice(0, 32).length - new Blob([password]).size),
-            '0'
-          )
+            '0',
+          ),
       }) as { ciphertext: string; iv: string; tag: string };
 
       localStorage.setItem('PRIVATE_KEY', PRIVATE_KEY);
@@ -195,7 +196,7 @@ export default function SignUp() {
       client.init(
         {
           username: email,
-          password: password
+          password: password,
         },
         async () => {
           client.createVerifier(
@@ -204,14 +205,14 @@ export default function SignUp() {
                 email,
                 firstName,
                 lastName,
-                organizationName: firstName + "'s organization",
+                organizationName: firstName + '\'s organization',
                 publicKey: PUBLIC_KEY,
                 ciphertext,
                 iv,
                 tag,
                 salt: result.salt,
                 verifier: result.verifier,
-                token: verificationToken
+                token: verificationToken,
               });
 
               // if everything works, go the main dashboard page.
@@ -230,16 +231,16 @@ export default function SignUp() {
                     setErrorLogin,
                     router,
                     true,
-                    false
+                    false,
                   );
                   incrementStep();
                 } catch (error) {
                   setIsLoading(false);
                 }
               }
-            }
+            },
           );
-        }
+        },
       );
     } else {
       setIsLoading(false);
@@ -250,7 +251,7 @@ export default function SignUp() {
   const step1 = (
     <div className="bg-bunker w-full max-w-md mx-auto h-7/12 py-8 md:px-6 mx-1 mb-48 md:mb-16 rounded-xl drop-shadow-xl">
       <p className="text-4xl font-semibold flex justify-center text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-primary">
-        {"Let'"}s get started
+        {'Let\''}s get started
       </p>
       <div className="flex flex-col items-center justify-center w-full md:pb-2 max-h-24 max-w-md mx-auto pt-2">
         <Link href="/login">
@@ -261,6 +262,7 @@ export default function SignUp() {
           </button>
         </Link>
       </div>
+      <form onSubmit={(e) => {e.preventDefault();}}>
         <div className="flex items-center justify-center w-5/6 md:w-full m-auto md:p-2 rounded-lg max-h-24 mt-4">
           <InputField
             label="Email"
@@ -284,17 +286,19 @@ export default function SignUp() {
             acknowledged the Privacy Policy.
           </p>
           <div className="text-l mt-6 m-2 md:m-8 px-8 py-1 text-lg">
-          <Button text="Get Started" onButtonPressed={emailCheck} size="lg" />
+            <Button text="Get Started" type="submit" onButtonPressed={emailCheck} size="lg" />
           </div>
         </div>
+      </form>
     </div>
   );
 
   // Step 2 of the signup process (enter the email verification code)
   const step2 = (
+    <form onSubmit={(e) => {e.preventDefault();}}>
       <div className="bg-bunker w-max mx-auto h-7/12 pt-10 pb-4 px-8 rounded-xl drop-shadow-xl mb-64 md:mb-16">
         <p className="text-l flex justify-center text-gray-400">
-        {"We've"} sent a verification email to{' '}
+          {'We\'ve'} sent a verification email to{' '}
         </p>
         <p className="text-l flex justify-center font-semibold my-2 text-gray-400">
           {email}{' '}
@@ -340,10 +344,12 @@ export default function SignUp() {
           </p>
         </div>
       </div>
+    </form>
   );
 
   // Step 3 of the signup process (enter the rest of the impformation)
   const step3 = (
+    <form onSubmit={(e) => {e.preventDefault();}}>
       <div className="bg-bunker w-max mx-auto h-7/12 py-10 px-8 rounded-xl drop-shadow-xl mb-36 md:mb-16">
         <p className="text-4xl font-bold flex justify-center mb-6 text-gray-400 mx-8 md:mx-16 text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-primary">
           Almost there!
@@ -382,7 +388,7 @@ export default function SignUp() {
                 setPasswordErrorLength,
                 setPasswordErrorNumber,
                 setPasswordErrorLowerCase,
-              currentErrorCheck: false
+                currentErrorCheck: false,
               });
             }}
             type="password"
@@ -475,10 +481,12 @@ export default function SignUp() {
           />
         </div>
       </div>
+    </form>
   );
 
   // Step 4 of the sign up process (download the emergency kit pdf)
   const step4 = (
+    <form onSubmit={(e) => {e.preventDefault();}}>
       <div className="bg-bunker flex flex-col items-center w-full max-w-xs md:max-w-lg mx-auto h-7/12 py-8 px-4 md:px-6 mx-1 mb-36 md:mb-16 rounded-xl drop-shadow-xl">
         <p className="text-4xl text-center font-semibold flex justify-center text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-primary">
           Save your Emergency Kit
@@ -506,7 +514,7 @@ export default function SignUp() {
                 password,
                 personalName: firstName + ' ' + lastName,
                 setBackupKeyError,
-              setBackupKeyIssued
+                setBackupKeyIssued,
               });
               const userWorkspaces = await getWorkspaces();
               const userWorkspace = userWorkspaces[0]._id;
@@ -528,6 +536,7 @@ export default function SignUp() {
 				</div> */}
         </div>
       </div>
+    </form>
   );
 
   return (