Merge pull request #165 from naorpeled/feat/frontend/adjust-registration-styles

feat(frontend/signup+login): improve accessibility and UX

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

@@ -38,6 +38,10 @@ export default function Login() {
    * This function check if the user entered the correct credentials and should be allowed to log in.
    */
   const loginCheck = async () => {
+    if (!email || !password) {
+      return;
+    }
+
     setIsLoading(true);
     await attemptLogin(
       email,
@@ -45,7 +49,7 @@ export default function Login() {
       setErrorLogin,
       router,
       false,
-      true
+      true,
     ).then(() => {
       setTimeout(function () {
         setIsLoading(false);
@@ -75,6 +79,9 @@ export default function Login() {
           />
         </div>
       </Link>
+      <form
+        onChange={() => setErrorLogin(false)} 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
@@ -105,10 +112,11 @@ export default function Login() {
               <Link href="/verify-email">Forgot password?</Link>
             </div>
           </div>
-        {errorLogin && <Error text="Your email and/or password are wrong." />}
+          {!isLoading && errorLogin && <Error text="Your email and/or password are wrong." />}
           <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 +145,7 @@ export default function Login() {
             </button>
           </Link>
         </div>
+      </form>
     </div>
   );
 }

frontend/pages/signup.tsx

@@ -266,7 +266,7 @@ export default function SignUp() {
       </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">
-          <button className="w-max pb-3 hover:opacity-90 duration-200">
+          <button type="button" className="w-max pb-3 hover:opacity-90 duration-200">
             <u className="font-normal text-md text-sky-500">
               Have an account? Log in
             </u>
@@ -296,7 +296,7 @@ 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 loading={isLoading} text="Get Started" onButtonPressed={emailCheck} size="lg" />
+          <Button text="Get Started" type="submit" onButtonPressed={emailCheck} size="lg" />
         </div>
       </div>
     </div>
@@ -512,24 +512,7 @@ export default function SignUp() {
         It contains your Secret Key which we cannot access or recover for you if
         you lose it.
       </div>
-      <div className="flex flex-row items-center justify-center w-3/4 md:w-full md:p-2 max-h-28 max-w-max mx-auto mt-6 py-1 md:mt-4 text-lg text-center md:text-left">
+      <div
-        <Button
-          text="Download PDF"
-          onButtonPressed={async () => {
-            await issueBackupKey({
-              email,
-              password,
-              personalName: firstName + ' ' + lastName,
-              setBackupKeyError,
-              setBackupKeyIssued,
-            });
-            const userWorkspaces = await getWorkspaces();
-            const userWorkspace = userWorkspaces[0]._id;
-            router.push('/home/' + userWorkspace);
-          }}
-          size="lg"
-        />
-        {/* <div
         className="text-l mt-4 text-lg text-gray-400 hover:text-gray-300 duration-200 bg-white/5 px-8 hover:bg-white/10 py-3 rounded-md cursor-pointer"
         onClick={() => {
           if (localStorage.getItem("projectData.id")) {
@@ -540,7 +523,6 @@ export default function SignUp() {
         }}
       >
         Later
-				</div> */}
       </div>
     </div>
   );
@@ -571,7 +553,9 @@ export default function SignUp() {
             />
           </div>
         </Link>
+        <form onSubmit={(e) => e.preventDefault()}>
           {step == 1 ? step1 : step == 2 ? step2 : step == 3 ? step3 : step4}
+        </form>
       </div>
     </div>
   );