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,14 +38,18 @@ 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,
       password,
       setErrorLogin,
       router,
       false,
-      true
+      true,
     ).then(() => {
       setTimeout(function () {
         setIsLoading(false);
@@ -75,68 +79,73 @@ export default function Login() {
           />
         </div>
       </Link>
-      <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
-        </p>
-        <div className="flex items-center justify-center w-full md:p-2 rounded-lg mt-4 md:mt-0 max-h-24 md:max-h-28">
-          <InputField
-            label="Email"
-            onChangeHandler={setEmail}
-            type="email"
-            value={email}
-            placeholder=""
-            isRequired
-            autoComplete="username"
-          />
-        </div>
-        <div className="relative flex items-center justify-center w-full md:p-2 rounded-lg md:mt-2 mt-6 max-h-24 md:max-h-28">
-          <InputField
-            label="Password"
-            onChangeHandler={setPassword}
-            type="password"
-            value={password}
-            placeholder=""
-            isRequired
-            autoComplete="current-password"
-            id="current-password"
-          />
-          <div className="absolute top-2 right-3 text-primary-700 hover:text-primary duration-200 cursor-pointer text-sm">
-            <Link href="/verify-email">Forgot password?</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
+          </p>
+          <div className="flex items-center justify-center w-full md:p-2 rounded-lg mt-4 md:mt-0 max-h-24 md:max-h-28">
+            <InputField
+              label="Email"
+              onChangeHandler={setEmail}
+              type="email"
+              value={email}
+              placeholder=""
+              isRequired
+              autoComplete="username"
+            />
           </div>
-        </div>
-        {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
-              text="Log In"
-              onButtonPressed={loginCheck}
-              loading={isLoading}
-              size="lg"
+          <div className="relative flex items-center justify-center w-full md:p-2 rounded-lg md:mt-2 mt-6 max-h-24 md:max-h-28">
+            <InputField
+              label="Password"
+              onChangeHandler={setPassword}
+              type="password"
+              value={password}
+              placeholder=""
+              isRequired
+              autoComplete="current-password"
+              id="current-password"
             />
+            <div className="absolute top-2 right-3 text-primary-700 hover:text-primary duration-200 cursor-pointer text-sm">
+              <Link href="/verify-email">Forgot password?</Link>
+            </div>
           </div>
-        </div>
-        {/* <div className="flex items-center justify-center w-full md:p-2 rounded-lg max-h-24 md:max-h-28">
+          {!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}
+                size="lg"
+              />
+            </div>
+          </div>
+          {/* <div className="flex items-center justify-center w-full md:p-2 rounded-lg max-h-24 md:max-h-28">
           <p className="text-gray-400">I may have <Link href="/login"><u className="text-sky-500 cursor-pointer">forgotten my password.</u></Link></p>
         </div> */}
-      </div>
-      {false && (
-        <div className="w-full p-2 flex flex-row items-center bg-white/10 text-gray-300 rounded-md max-w-md mx-auto mt-4">
-          <FontAwesomeIcon icon={faWarning} className="ml-2 mr-6 text-6xl" />
-          We are experiencing minor technical difficulties. We are working on
-          solving it right now. Please come back in a few minutes.
         </div>
-      )}
-      <div className="flex flex-row items-center justify-center md:pb-4 mt-4">
-        <p className="text-sm flex justify-center text-gray-400 w-max">
-          Need an Infisical account?
-        </p>
-        <Link href="/signup">
-          <button className="text-primary-700 hover:text-primary duration-200 font-normal text-sm underline-offset-4 ml-1.5">
-            Sign up here.
-          </button>
-        </Link>
-      </div>
+        {false && (
+          <div className="w-full p-2 flex flex-row items-center bg-white/10 text-gray-300 rounded-md max-w-md mx-auto mt-4">
+            <FontAwesomeIcon icon={faWarning} className="ml-2 mr-6 text-6xl" />
+            We are experiencing minor technical difficulties. We are working on
+            solving it right now. Please come back in a few minutes.
+          </div>
+        )}
+        <div className="flex flex-row items-center justify-center md:pb-4 mt-4">
+          <p className="text-sm flex justify-center text-gray-400 w-max">
+            Need an Infisical account?
+          </p>
+          <Link href="/signup">
+            <button className="text-primary-700 hover:text-primary duration-200 font-normal text-sm underline-offset-4 ml-1.5">
+              Sign up here.
+            </button>
+          </Link>
+        </div>
+      </form>
     </div>
   );
 }