Merge pull request #122 from Web3Auth/fix/add-disabled-button

Disable email submit button when email invalid

Author: chaitanyapotti

packages/ui/css/web3auth.css

@@ -369,6 +369,11 @@
     background: #6f717a;
 }
 
+#w3a-modal button.w3a-button:disabled {
+    background: #27282D;
+    color: #6F717A;
+}
+
 #w3a-modal button.w3a-button:focus-visible {
     outline: 1px solid #daf0ff;
     outline-offset: -1px;
@@ -815,6 +820,10 @@
     background-color: #ffffff;
     border: 1px solid #f3f3f4;
     box-shadow: none;
+    color: #595857;
+}
+
+#w3a-modal.w3a-modal--light button.w3a-button:disabled {
     color: #b7b8bd;
 }
 

packages/ui/src/components/SocialLoginEmail.tsx

@@ -1,22 +1,29 @@
-import { FormEvent } from "react";
+import { ChangeEvent, FormEvent, useState } from "react";
 
 interface SocialLoginEmailProps {
   adapter: string;
   handleSocialLoginClick: (params: { adapter: string; loginParams: { loginProvider: string; login_hint?: string } }) => void;
 }
 export default function SocialLoginEmail(props: SocialLoginEmailProps) {
   const { handleSocialLoginClick, adapter } = props;
+  const [isValidEmail, setIsValidEmail] = useState(false);
+
   const handleEmailSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const email = ((e.target as HTMLFormElement)[0] as HTMLInputElement).value;
     if (email) handleSocialLoginClick({ adapter, loginParams: { loginProvider: "email_passwordless", login_hint: email } });
   };
+  const handleEmailChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const email = e.target.value;
+    const emailValid = email.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i);
+    setIsValidEmail(!!emailValid);
+  };
   return (
     <div className="w3ajs-email-passwordless w3a-group w3a-group--email">
       <div className="w3a-group__title">EMAIL</div>
       <form className="w3ajs-email-passwordless-form" onSubmit={(e) => handleEmailSubmit(e)}>
-        <input className="w3a-text-field" type="email" name="email" required placeholder="Email" />
-        <button className="w3a-button" type="submit">
+        <input className="w3a-text-field" type="email" name="email" required placeholder="Email" onChange={(e) => handleEmailChange(e)} />
+        <button disabled={!isValidEmail} className="w3a-button" type="submit">
           Continue with Email
         </button>
       </form>