Refactor login form and improve error handling (#37)

* Refactor login form and error handling; update icons and snackbar messages; Add lazy loading

* Add vote.css import to Login component

* Updating lazy loading

src/Vote.jsx

@@ -121,17 +121,41 @@ export default function Vote() {
       .catch((error) => {
         setSending(false);
         if (error.code === "permission-denied") {
-          alert(
-            "Da hat etwas nicht geklappt. Sie sind nicht (mehr) berechtigt, Ihre Daten abzugeben. Bitte wenden Sie sich an den zuständigen Lehrer."
-          );
+          snackbar({
+            message:
+              "Es ist ein Berechtigungsfehler aufgetreten.",
+              action:"Details",
+              onActionClick: () => {
+                console.error(error);
+                alert(
+                  "Es scheint, als sei die Wahl nicht mehr verfügbar. Bitte versuchen Sie es später erneut.\n"+error
+                )
+              }
+          });
         } else if (error.message === "Network Error") {
-          alert(
-            "Netzwerkprobleme. Bitte überprüfen Sie Ihre Internetverbindung und versuchen Sie es erneut."
-          );
+            snackbar({
+              message:
+                "Es ist ein Netzwerkfehler aufgetreten.",
+              action:"Details",
+              onActionClick: () => {
+                console.error(error);
+                alert(
+                  "Es scheint, als gäbe es ein Problem mit Ihrer Internetverbindung. Bitte überprüfen Sie diese und versuchen Sie es erneut.\n"+error
+                )
+              }
+          });
         } else {
-          alert(
-            "Ein unbekannter Fehler ist aufgetreten. Bitte versuchen Sie es später erneut."
-          );
+          snackbar({
+            message:
+              "Es ist ein Fehler aufgetreten.",
+            action:"Details",
+            onActionClick: () => {
+              console.error(error);
+              alert(
+                "Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.\n"+error
+              )
+            }
+          });
         }
       });
   }

src/admin/Overview.jsx

@@ -28,7 +28,7 @@ export default function Overview() {
             }}
           >
             <h2>SchülerInnen</h2>
-            <mdui-icon name="people"></mdui-icon>
+            <mdui-icon name="groups"></mdui-icon>
           </div>
           Verwalten Sie die Datenbank der SchülerInnen, fügen Sie neue
           SchülerInnen hinzu und bearbeiten Sie bestehende Klassenlisten.

src/admin/auth/Login.tsx

@@ -5,18 +5,43 @@ import {
 import { alert, prompt, snackbar } from "mdui";
 import React from "react";
 import { auth } from "../../firebase";
+import "../../vote.css";
 
 export default function Login() {
-  const [email, setEmail] = React.useState("");
-  const [password, setPassword] = React.useState("");
+  const [loading, setLoading] = React.useState(false);
+  interface LoginFormElements extends HTMLFormControlsCollection {
+    email: HTMLInputElement;
+    password: HTMLInputElement;
+  }
+
+  interface LoginForm extends HTMLFormElement {
+    readonly elements: LoginFormElements;
+  }
+
+  const handleLogin = (e: React.FormEvent<LoginForm>) => {
+    e.preventDefault();
+
+    const formData = new FormData(e.currentTarget);
+    const email = formData.get("email") as string;
+    const password = formData.get("password") as string;
+
+    setLoading(true);
 
-  const handleLogin = () => {
     signInWithEmailAndPassword(auth, email, password)
-      .then((userCredential) => {})
+      .then((userCredential) => {
+        const user = userCredential.user;
+        snackbar({
+          message: `Willkommen, ${user.email}`,
+          closeable: true,
+        });
+        setLoading(false);
+      })
       .catch((error) => {
+        console.error(error);
         snackbar({
           message: error.message,
         });
+        setLoading(false);
       });
   };
 
@@ -33,47 +58,80 @@ export default function Login() {
         label: "Email",
       },
       onConfirm: (email) => {
+        setLoading(true);
         sendPasswordResetEmail(auth, email)
           .then(() => {
             alert({
               headline: "Email gesendet",
               description: "Bitte überprüfen Sie Ihren Posteingang.",
             });
+            setLoading(false);
           })
           .catch((error) => {
             console.error(error);
+            alert({
+              headline: "Fehler",
+              description: error.message,
+            });
+            setLoading(false);
           });
       },
     });
   };
 
   return (
-    <mdui-card variant="filled" class="card">
+    <mdui-card variant="filled" class="card" style={{ position: "absolute" }}>
+      {loading && (
+        <mdui-linear-progress
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            zIndex: 100,
+          }}
+        />
+      )}
       <div className="mdui-prose">
         <h1>Administratoren-Bereich</h1>
-        <mdui-text-field
-          value={email}
-          onInput={(e) => setEmail(e.target.value)}
-          type="email"
-          placeholder="user@example.com"
-          label="Email"
-        ></mdui-text-field>
-        <p />
-        <mdui-text-field
-          value={password}
-          onInput={(e) => setPassword(e.target.value)}
-          type="password"
-          label="Passwort"
-          toggle-password
-        />
-        <p />
-        <br />
-        <div className="button-container">
-          <mdui-button variant="text" onClick={handlePasswordReset}>
-            Passwort zurücksetzen
-          </mdui-button>
-          <mdui-button onClick={handleLogin}>Login</mdui-button>
-        </div>
+        <form onSubmit={handleLogin}>
+          <mdui-text-field
+            type="email"
+            placeholder="user@example.com"
+            label="Email"
+            name="email"
+            required
+          ></mdui-text-field>
+          <p />
+          <mdui-text-field
+            type="password"
+            label="Passwort"
+            toggle-password
+            name="password"
+            required
+          />
+          <p />
+          <br />
+          <div className="button-container">
+            {loading ? (
+              <>
+                <mdui-button variant="text" disabled>
+                  Passwort zurücksetzen
+                </mdui-button>
+
+                <mdui-button disabled>Login</mdui-button>
+              </>
+            ) : (
+              <>
+                <mdui-button variant="text" onClick={handlePasswordReset}>
+                  Passwort zurücksetzen
+                </mdui-button>
+
+                <mdui-button type="submit">Login</mdui-button>
+              </>
+            )}
+          </div>
+        </form>
       </div>
     </mdui-card>
   );

src/admin/index.jsx

@@ -113,7 +113,10 @@ export default function Admin(props) {
                 confirmText: "Abmelden",
                 onConfirm: () => {
                   auth.signOut();
-                  snackbar({ message: "Sie sind jetzt abgemeldet." });
+                  snackbar({
+                    message: "Sie sind jetzt abgemeldet.",
+                    closeable: true,
+                  });
                 },
               });
             }}

src/admin/navigation/DrawerList.jsx

@@ -244,7 +244,7 @@ export default function DrawerList() {
         <DrawerItem
           active={active === "students"}
           title={"SchülerInnen"}
-          icon={"people"}
+          icon={"groups"}
           onCLick={() => navigate("/admin/students/new-class")}
         />