Füge Validierung für E-Mail und benutzerdefinierte Eingaben hinzu; aktualisiere Firebase-Konfigurationsdateien

src/App.js

@@ -3,7 +3,7 @@ import './App.css';
 
 function App() {
   const formSectionRef = useRef(null);
-  const [customNumber, setCustomNumber] = useState();
+  const [customNumber, setCustomNumber] = useState(false);
   const [email, setEmail] = useState("");
 
 
@@ -24,11 +24,24 @@ function App() {
     setCustomNumber(e.target.value === 'custom' ? '' : e.target.value);
   };
 
+  const emailIsValid = (email1) => {
+    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email1)
+  }
+  
   const submit = (e) => {
     e.preventDefault(); // Verhindert das Standardverhalten des Formulars
-    if (email === ""){
-      
+    if (!emailIsValid(email)){
+      alert("Bitte eine gültige E-Mailadresse eintrgen");
+      return;
     }
+    if(!customNumber){
+      alert("Bitte angeben wie viele Personen mitkommen");
+      return;
+    }
+    // send data
+    alert("Anmeldung gesendet.")
+    setEmail("")
+    setCustomNumber(false)
   }
 
   return (
@@ -54,7 +67,7 @@ function App() {
       <div id="form-section" ref={formSectionRef}>
         <form>
           <label>E-Mail:</label>
-          <input type="email" name="email" placeholder="Deine E-Mail-Adresse" onChange={(e => setEmail(e.target.value))} />
+          <input type="email" name="email" placeholder="Deine E-Mail-Adresse" onChange={(e => setEmail(e.target.value))} value={email}/>
           <br />
           <label>Anzahl der Personen</label>
           <div className="radio-group">