Merge pull request #320 from mfts/chore/small-improvements

feat: focus on email input
mfts · Feb 29, 2024 · fd5bfc9 · fd5bfc9
2 parents 2c91a6d + 96549c4
commit fd5bfc9
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 1 deletion.
diff --git a/components/view/access-form/email-section.tsx b/components/view/access-form/email-section.tsx
@@ -39,12 +39,15 @@ export default function EmailSection({
           name="email"
           id="email"
           type="email"
+          autoCorrect="off"
           autoComplete="email"
+          autoFocus
           className="flex w-full rounded-md border-0 py-1.5 text-white bg-black shadow-sm ring-1 ring-inset ring-gray-600 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-300 sm:text-sm sm:leading-6"
           value={email || ""}
           placeholder="Enter email"
           onChange={handleEmailChange}
           aria-invalid="true"
+          data-1p-ignore
         />
         <p className="text-sm text-gray-600">
           This data will be shared with the sender.

diff --git a/components/view/access-form/index.tsx b/components/view/access-form/index.tsx
@@ -57,7 +57,15 @@ export default function AccessForm({
             ) : null}
 
             <div className="flex justify-center">
-              <Button type="submit" className="w-1/3" loading={isLoading}>
+              <Button
+                type="submit"
+                disabled={
+                  (requireEmail && !data.email) ||
+                  (requirePassword && !data.password)
+                }
+                className="w-1/3 bg-white text-gray-950 hover:bg-white/90"
+                loading={isLoading}
+              >
                 Continue
               </Button>
             </div>

diff --git a/components/view/access-form/password-section.tsx b/components/view/access-form/password-section.tsx
@@ -27,13 +27,16 @@ export default function PasswordSection({
             name="password"
             id="password"
             type={showPassword ? "text" : "password"}
+            autoCorrect="off"
+            autoComplete="off"
             className="flex w-full rounded-md border-0 py-1.5 text-white bg-black shadow-sm ring-1 ring-inset ring-gray-600 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-300 sm:text-sm sm:leading-6"
             value={password || ""}
             placeholder="Enter passcode"
             onChange={(e) => {
               setData({ ...data, password: e.target.value });
             }}
             aria-invalid="true"
+            data-1p-ignore
           />
           <button
             type="button"