feat: handle invalid email html state PE-5161

.github/workflows/deploy.yml

@@ -24,7 +24,6 @@ jobs:
         run: yarn build
 
       - name: Deploy gh-pages if on prod
-        if: ${{ github.ref == 'refs/heads/PE-5161_deploy' }}
         uses: JamesIves/[email protected]
         with:
           branch: gh-pages

src/GiftForm.css

@@ -42,6 +42,11 @@
   background-color: var(--dark-gray);
 }
 
+/* and not focused or user is in the text box */
+#recipient-email:not(:focus):not(:placeholder-shown):invalid {
+  border-color: var(--ardrive-red);
+}
+
 #usd-form-input {
   display: flex;
   width: 100%;
@@ -110,15 +115,51 @@ textarea {
   text-decoration: underline;
 }
 
+a {
+  color: var(--ardrive-red);
+  text-decoration: inherit;
+}
+a:hover {
+  text-decoration: underline;
+}
+
+input[type="checkbox"] {
+  width: 1.5rem;
+  height: 1.5rem;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: none;
+  border-radius: 0.25rem;
+  border: 0.1rem solid var(--gray);
+}
+input[type="checkbox"]:checked {
+  background-color: var(--ardrive-red);
+  border: none;
+}
+
+input[type="checkbox"]:hover {
+  cursor: pointer;
+}
+
+/* Custom check mark for checked state */
+input[type="checkbox"]:checked::before {
+  content: "\2713"; /* Unicode check mark character */
+  font-size: 1.35rem;
+  color: var(--white);
+  position: absolute;
+  transform: translate(20%, -5%);
+}
+
 #terms-and-conditions-checkbox {
   margin: 0 0.75rem;
 }
 
 #gift-form-submit-button {
   margin: 2rem;
-  padding: 1.5rem;
+  padding: 1rem 1.25rem;
   border: none;
-  border-radius: 1rem;
+  border-radius: 3rem;
   background-color: var(--ardrive-red);
   color: var(--white);
   font-size: 1.25rem;

src/GiftForm.tsx

@@ -1,5 +1,5 @@
 import { TurboFactory, USD, TopUpRawResponse } from "@ardrive/turbo-sdk";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import {
   defaultUSDAmount,
   paymentServiceUrl,
@@ -33,6 +33,8 @@ export function GiftForm({ errorCallback }: GiftFormProps) {
   const [recipientEmail, setRecipientEmail] = useState<string>("");
   const [termsAccepted, setTermsAccepted] = useState<boolean>(false);
 
+  const recipientEmailRef = useRef<HTMLInputElement>(null);
+
   const [usdAmount, setUsdAmount] = useState<number>(defaultUSDAmount);
   const debouncedUsdAmount = useDebounce(usdAmount, 500);
 
@@ -79,7 +81,11 @@ export function GiftForm({ errorCallback }: GiftFormProps) {
     TurboFactory;
   }, [debouncedUsdAmount, errorCallback]);
 
-  const canSubmitForm = !!credits && !!recipientEmail && !!termsAccepted;
+  const canSubmitForm =
+    !!credits &&
+    !!recipientEmail &&
+    !!termsAccepted &&
+    recipientEmailRef.current?.checkValidity();
 
   const handleSubmit = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     e.preventDefault();
@@ -137,9 +143,10 @@ export function GiftForm({ errorCallback }: GiftFormProps) {
         <input
           type="email"
           className="form-input"
-          id="recipientEmail"
+          id="recipient-email"
           placeholder="Enter the recipient's email address here"
           value={recipientEmail}
+          ref={recipientEmailRef}
           required={true}
           onChange={(e) => {
             setRecipientEmail(e.target.value);

src/index.css

@@ -28,42 +28,6 @@ input[type="number"] {
   appearance: textfield;
 }
 
-a {
-  color: var(--ardrive-red);
-  text-decoration: inherit;
-}
-a:hover {
-  text-decoration: underline;
-}
-
-input[type="checkbox"] {
-  width: 1.5rem;
-  height: 1.5rem;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  outline: none;
-  border-radius: 0.25rem;
-  border: 0.1rem solid var(--gray);
-}
-input[type="checkbox"]:checked {
-  background-color: var(--ardrive-red);
-  border: none;
-}
-
-input[type="checkbox"]:hover {
-  cursor: pointer;
-}
-
-/* Custom check mark for checked state */
-input[type="checkbox"]:checked::before {
-  content: "\2713"; /* Unicode check mark character */
-  font-size: 1.5rem;
-  color: var(--white);
-  position: absolute;
-  transform: translate(10%, -10%);
-}
-
 @media (prefers-color-scheme: light) {
   :root {
     color: var(--black);