vili/register (#61)

* add register page

* update register

* fix register

gradesa/src/app/auth/auth.css

@@ -46,3 +46,13 @@
 .form-button:hover {
     background-color: #0056b3;
   }
+
+.success {
+  text-align: center;
+  margin-bottom: 1.5rem;
+}
+
+.error {
+  text-align: center;
+  margin-bottom: 1.5rem;
+}

gradesa/src/app/auth/register/page.js

@@ -0,0 +1,86 @@
+"use client";
+import { useState } from "react";
+
+export default function Register() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const [submitted, setSubmitted] = useState(false);
+  const [error, setError] = useState(null);
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    if (email === "" || password === "") {
+      setError(true);
+    } else {
+      setSubmitted(true);
+      setError(false);
+    }
+  };
+  const successMessage = () => {
+    return (
+      <div className="success">
+        {!!submitted && <h1>Benutzer {email} erfolgreich registriert</h1>}
+      </div>
+    );
+  };
+
+  const errorMessage = () => {
+    return (
+      <div
+        className="error"
+        style={{
+          display: error ? "" : "none",
+        }}
+      >
+        <h1>Bitte alle Felder ausfüllen</h1>
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <h1 className="auth-title">Registrieren</h1>
+      <div className="messages">
+        {errorMessage()}
+        {successMessage()}
+      </div>
+
+      <form onSubmit={handleSubmit}>
+        <div className="form-group">
+          <label className="form-label" htmlFor="email">
+            E-Mail-Adresse
+          </label>
+          <input
+            className="form-input"
+            type="email"
+            id="email"
+            name="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+          />
+        </div>
+
+        <div className="form-group">
+          <label className="form-label" htmlFor="password">
+            Passwort
+          </label>
+          <input
+            className="form-input"
+            type="password"
+            id="password"
+            name="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+        </div>
+
+        <button onClick={handleSubmit} type="submit" className="form-button">
+          Registrieren
+        </button>
+      </form>
+    </>
+  );
+}