Merge pull request #711 from afrieirham/form-ux-enhancement

fix: enable users to press `Enter` in forms

frontend/src/components/login/InitialLoginStep.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { FormEvent, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -31,7 +31,8 @@ export default function InitialLoginStep({
     const [isLoading, setIsLoading] = useState(false);
     const [loginError, setLoginError] = useState(false);
 
-    const handleLogin = async () => {
+    const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
+        e.preventDefault()
         try {
             if (!email || !password) {
                 return;
@@ -98,7 +99,7 @@ export default function InitialLoginStep({
         setIsLoading(false);
     }
     
-    return <div className='flex flex-col mx-auto w-full justify-center items-center'>
+    return <form onSubmit={handleLogin} className='flex flex-col mx-auto w-full justify-center items-center'>
         <h1 className='text-xl font-medium text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200 text-center mb-8' >Login to Infisical</h1>
         {/* <div className='lg:w-1/6 w-1/4 min-w-[20rem] rounded-md'>
             <Button
@@ -143,7 +144,7 @@ export default function InitialLoginStep({
         {!isLoading && loginError && <Error text={t("login.error-login") ?? ""} />}
         <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-4'>
             <Button
-                onClick={async () => handleLogin()}
+                type="submit"
                 size="sm"
                 isFullWidth
                 className='h-12'
@@ -180,5 +181,5 @@ export default function InitialLoginStep({
                 <span className='hover:underline hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer'>Recover your account</span>
             </Link>
         </div>
-    </div>
+    </form>
 }

frontend/src/components/signup/CodeInputStep.tsx

@@ -114,6 +114,7 @@ export default function CodeInputStep({
       <div className="flex flex-col items-center justify-center lg:w-[19%] w-1/4 min-w-[20rem] mt-2 max-w-xs md:max-w-md mx-auto text-sm text-center md:text-left">
         <div className="text-l py-1 text-lg w-full">
           <Button
+            type="submit"
             onClick={incrementStep}
             size="sm"
             isFullWidth

frontend/src/components/signup/EnterEmailStep.tsx

@@ -70,6 +70,7 @@ export default function EnterEmailStep({
         <div className="flex flex-col items-center justify-center lg:w-1/6 w-1/4 min-w-[20rem] mt-2 max-w-xs md:max-w-md mx-auto text-sm text-center md:text-left">
           <div className="text-l py-1 text-lg w-full">
             <Button
+              type="submit"
               onClick={emailCheck}
               size="sm"
               isFullWidth

frontend/src/components/signup/UserInfoStep.tsx

@@ -248,7 +248,6 @@ export default function UserInfoStep({
             placeholder=""
             onChange={(e) => setAttributionSource(e.target.value)}
             value={attributionSource}
-            isRequired
             className="h-12"
           />
         </div>
@@ -301,6 +300,7 @@ export default function UserInfoStep({
         <div className="flex flex-col items-center justify-center lg:w-[19%] w-1/4 min-w-[20rem] mt-2 max-w-xs md:max-w-md mx-auto text-sm text-center md:text-left">
           <div className="text-l py-1 text-lg w-full">
             <Button
+              type="submit"
               onClick={signupErrorCheck}
               size="sm"
               isFullWidth

frontend/src/pages/password-reset.tsx

@@ -1,6 +1,6 @@
 import crypto from "crypto";
 
-import { useState } from "react";
+import { FormEvent, useState } from "react";
 import Image from "next/image";
 import { useRouter } from "next/router";
 import { faCheck, faX } from "@fortawesome/free-solid-svg-icons";
@@ -24,6 +24,7 @@ const client = new jsrp.client();
 export default function PasswordReset() {
   const [verificationToken, setVerificationToken] = useState("");
   const [step, setStep] = useState(1);
+  const [loading, setLoading] = useState(false);
   const [backupKey, setBackupKey] = useState("");
   const [privateKey, setPrivateKey] = useState("");
   const [newPassword, setNewPassword] = useState("");
@@ -38,7 +39,8 @@ export default function PasswordReset() {
   const email = (parsedUrl.to as string)?.replace(" ", "+").trim();
 
   // Unencrypt the private key with a backup key
-  const getEncryptedKeyHandler = async () => {
+  const getEncryptedKeyHandler = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
     try {
       const result = await getBackupEncryptedPrivateKey({ verificationToken });
 
@@ -57,7 +59,8 @@ export default function PasswordReset() {
   };
 
   // If everything is correct, reset the password
-  const resetPasswordHandler = async () => {
+  const resetPasswordHandler = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
     const errorCheck = passwordCheck({
       password: newPassword,
       setPasswordErrorLength,
@@ -125,6 +128,7 @@ export default function PasswordReset() {
             if (response?.status === 200) {
               router.push("/login");
             }
+            setLoading(false)
           });
         }
       );
@@ -162,7 +166,7 @@ export default function PasswordReset() {
 
   // Input backup key
   const stepInputBackupKey = (
-    <div className="my-32 mx-1 flex w-full max-w-xs flex-col items-center rounded-xl bg-bunker px-4 pt-6 pb-3 drop-shadow-xl md:max-w-lg md:px-6">
+    <form onSubmit={getEncryptedKeyHandler} className="my-32 mx-1 flex w-full max-w-xs flex-col items-center rounded-xl bg-bunker px-4 pt-6 pb-3 drop-shadow-xl md:max-w-lg md:px-6">
       <p className="mx-auto mb-4 flex w-max justify-center text-2xl font-semibold text-bunker-100 md:text-3xl">
         Enter your backup key
       </p>
@@ -186,18 +190,19 @@ export default function PasswordReset() {
       <div className="mx-auto mt-4 flex max-h-20 w-full max-w-md flex-col items-center justify-center text-sm md:p-2">
         <div className="text-l m-8 mt-6 px-8 py-3 text-lg">
           <Button
+            type="submit"
             text="Submit Backup Key"
-            onButtonPressed={() => getEncryptedKeyHandler()}
+            onButtonPressed={() => {}}
             size="lg"
           />
         </div>
       </div>
-    </div>
+    </form>
   );
 
   // Enter new password
   const stepEnterNewPassword = (
-    <div className="my-32 mx-1 flex w-full max-w-xs flex-col items-center rounded-xl bg-bunker px-4 pt-6 pb-3 drop-shadow-xl md:max-w-lg md:px-6">
+    <form onSubmit={resetPasswordHandler} className="my-32 mx-1 flex w-full max-w-xs flex-col items-center rounded-xl bg-bunker px-4 pt-6 pb-3 drop-shadow-xl md:max-w-lg md:px-6">
       <p className="mx-auto flex w-max justify-center text-2xl font-semibold text-bunker-100 md:text-3xl">
         Enter new password
       </p>
@@ -269,13 +274,15 @@ export default function PasswordReset() {
       <div className="mx-auto mt-4 flex max-h-20 w-full max-w-md flex-col items-center justify-center text-sm md:p-2">
         <div className="text-l m-8 mt-6 px-8 py-3 text-lg">
           <Button
+            type="submit"
             text="Submit New Password"
-            onButtonPressed={() => resetPasswordHandler()}
+            onButtonPressed={() => setLoading(true)}
             size="lg"
+            loading={loading}
           />
         </div>
       </div>
-    </div>
+    </form>
   );
 
   return (

frontend/src/pages/verify-email.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { FormEvent, useState } from "react";
 import Head from "next/head";
 import Image from "next/image";
 import Link from "next/link";
@@ -12,6 +12,7 @@ import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
 import SendEmailOnPasswordReset from "./api/auth/SendEmailOnPasswordReset";
 
 export default function VerifyEmail() {
+  const [loading, setLoading] = useState(false);
   const [email, setEmail] = useState("");
   const [step, setStep] = useState(1);
   const { data: serverDetails } = useFetchServerStatus();
@@ -27,6 +28,18 @@ export default function VerifyEmail() {
     }
   };
 
+  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setLoading(true);
+
+    if (serverDetails?.emailConfigured) {
+      sendVerificationEmail();
+    } else {
+      handlePopUpOpen("setUpEmail");
+      setLoading(false);
+    }
+  };
+
   return (
     <div className="flex h-screen flex-col justify-start bg-bunker-800 px-6">
       <Head>
@@ -45,7 +58,7 @@ export default function VerifyEmail() {
         </div>
       </Link>
       {step === 1 && (
-        <div className="h-7/12 mx-auto w-full max-w-md rounded-xl bg-bunker py-4 px-6 pt-8 drop-shadow-xl">
+        <form onSubmit={onSubmit} className="h-7/12 mx-auto w-full max-w-md rounded-xl bg-bunker px-6 py-4 pt-8 drop-shadow-xl">
           <p className="mx-auto mb-6 flex w-max justify-center text-2xl font-semibold text-bunker-100 md:text-3xl">
             Forgot your password?
           </p>
@@ -67,20 +80,10 @@ export default function VerifyEmail() {
           </div>
           <div className="mx-auto mt-4 flex max-h-20 w-full max-w-md flex-col items-center justify-center text-sm md:p-2">
             <div className="text-l m-8 mt-6 px-8 py-3 text-lg">
-              <Button
+              <Button type="submit" text="Continue" size="lg" onButtonPressed={() => {}} loading={loading} />
-                text="Continue"
-                onButtonPressed={() => {
-                  if (serverDetails?.emailConfigured) {
-                    sendVerificationEmail();
-                  } else {
-                    handlePopUpOpen("setUpEmail");
-                  }
-                }}
-                size="lg"
-              />
             </div>
           </div>
-        </div>
+        </form>
       )}
       {step === 2 && (
         <div className="h-7/12 mx-auto w-full max-w-md rounded-xl bg-bunker py-4 px-6 pt-8 drop-shadow-xl">