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,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">
+      <form
-        <p className="text-3xl w-max mx-auto flex justify-center font-semibold text-bunker-100 mb-6">
+        onChange={() => setErrorLogin(false)} onSubmit={(e) => e.preventDefault()}
-          Log in to your account
+      >
-        </p>
+        <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">
-        <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">
+          <p className="text-3xl w-max mx-auto flex justify-center font-semibold text-bunker-100 mb-6">
-          <InputField
+            Log in to your account
-            label="Email"
+          </p>
-            onChangeHandler={setEmail}
+          <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">
-            type="email"
+            <InputField
-            value={email}
+              label="Email"
-            placeholder=""
+              onChangeHandler={setEmail}
-            isRequired
+              type="email"
-            autoComplete="username"
+              value={email}
-          />
+              placeholder=""
-        </div>
+              isRequired
-        <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">
+              autoComplete="username"
-          <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>
-        {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>
-        </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">
-        {/* <div className="flex items-center justify-center w-full md:p-2 rounded-lg 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>
+          {!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>
-      )}
+        {false && (
-      <div className="flex flex-row items-center justify-center md:pb-4 mt-4">
+          <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">
-        <p className="text-sm flex justify-center text-gray-400 w-max">
+            <FontAwesomeIcon icon={faWarning} className="ml-2 mr-6 text-6xl" />
-          Need an Infisical account?
+            We are experiencing minor technical difficulties. We are working on
-        </p>
+            solving it right now. Please come back in a few minutes.
-        <Link href="/signup">
+          </div>
-          <button className="text-primary-700 hover:text-primary duration-200 font-normal text-sm underline-offset-4 ml-1.5">
+        )}
-            Sign up here.
+        <div className="flex flex-row items-center justify-center md:pb-4 mt-4">
-          </button>
+          <p className="text-sm flex justify-center text-gray-400 w-max">
-        </Link>
+            Need an Infisical account?
-      </div>
+          </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>
   );
 }

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>
@@ -286,7 +286,7 @@ export default function SignUp() {
           autoComplete="username"
         />
       </div>
-      {/* <div className='flex flex-row justify-left mt-4 max-w-md mx-auto'>
+        {/* <div className='flex flex-row justify-left mt-4 max-w-md mx-auto'>
           <Checkbox className="mr-4"/>
           <p className='text-sm'>I do not want to receive emails about Infisical and its products.</p>
         </div> */}
@@ -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,35 +512,17 @@ 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
+        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"
-          text="Download PDF"
+        onClick={() => {
-          onButtonPressed={async () => {
+          if (localStorage.getItem("projectData.id")) {
-            await issueBackupKey({
+            router.push("/dashboard/" + localStorage.getItem("projectData.id"));
-              email,
+          } else {
-              password,
+            router.push("/noprojects")
-              personalName: firstName + ' ' + lastName,
+          }
-              setBackupKeyError,
+        }}
-              setBackupKeyIssued,
+      >
-            });
+        Later
-            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")) {
-							router.push("/dashboard/" + localStorage.getItem("projectData.id"));
-						} else {
-							router.push("/noprojects")
-						}
-					}}
-				>
-					Later
-				</div> */}
       </div>
     </div>
   );
@@ -571,7 +553,9 @@ export default function SignUp() {
             />
           </div>
         </Link>
-        {step == 1 ? step1 : step == 2 ? step2 : step == 3 ? step3 : step4}
+        <form onSubmit={(e) => e.preventDefault()}>
+          {step == 1 ? step1 : step == 2 ? step2 : step == 3 ? step3 : step4}
+        </form>
       </div>
     </div>
   );