Feature/register page

.gitignore

@@ -10,3 +10,5 @@ venv
 .DS_Store
 node_modules
 team_logos
+.venv/
+backend/.venv/

frontend/apply/src/app/register/login.module.css

@@ -0,0 +1,96 @@
+.loginContainer {
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  min-height: calc(100vh - 100px);
+  padding: 24px 128px 24px 0;
+  background: url("/Uppsala_University_2023.jpg");
+  background-size: cover;
+}
+
+.loginCard {
+  background: white;
+  border-radius: 12px;
+  padding: 3rem;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
+  max-width: 870px;
+  width: 100%;
+}
+
+.title {
+  font-size: 2rem;
+  font-weight: 700;
+  color: #1a202c;
+}
+
+.form {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0 1.5rem;
+}
+
+.formFullWidth {
+  grid-column: 1 / -1;
+}
+
+.errorMessage {
+  background-color: #fee;
+  border: 1px solid #fcc;
+  color: #c33;
+  padding: 0.75rem 1rem;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  text-align: center;
+}
+
+.links {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center; 
+  gap: 1.5rem;
+  margin-top: 2rem;
+  padding-top: 2rem;
+  border-top: 1px solid #e2e8f0;
+}
+
+.link {
+  color: #667eea;
+  text-decoration: none;
+  font-size: 0.9rem;
+  text-align: center;
+  padding-left: 5rem;
+  transition: color 0.2s ease;
+}
+
+.link:hover {
+  color: #764ba2;
+  text-decoration: underline;
+}
+
+@media (max-width: 1000px) {
+  .loginContainer {
+    padding-right: 48px;
+  }
+  .loginCard {
+    max-width: 500px;
+  }
+  .form {
+    grid-template-columns: 1fr; 
+  }
+}
+
+@media (max-width: 768px) {
+  .loginContainer {
+    justify-content: center;
+    padding: 24px 0;
+  }
+
+  .loginCard {
+    padding: 2rem;
+  }
+
+  .title {
+    font-size: 1.75rem;
+  }
+}

frontend/apply/src/app/register/page.tsx

@@ -0,0 +1,171 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import TextInput from "@/components/TextInput";
+import styles from "../register/login.module.css";
+import { useTranslation } from "react-i18next";
+import "@/i18n/config";
+
+export default function Signup() {
+  const { t } = useTranslation();
+  const router = useRouter();
+
+  const [username, setUsername] = useState("");
+  const [email, setEmail] = useState("");
+
+  const [password, setPassword] = useState("");
+  const [passwordConfirmation, setPasswordConfirmation] = useState("");
+
+  const [personalIdentityNumber, setPersonalIdentityNumber] = useState("");
+  const [sectionValue, setSectionValue] = useState(""); // placeholder until dropdown/select
+  const [phoneNumberValue, setPhoneNumberValue] = useState("");
+
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+
+    if (name === "username") setUsername(value);
+    if (name === "email") setEmail(value);
+
+    if (name === "password") setPassword(value);
+    if (name === "passwordConfirmation") setPasswordConfirmation(value);
+
+    if (name === "personalIdentityNumber") setPersonalIdentityNumber(value);
+    if (name === "section") setSectionValue(value);
+    if (name === "phoneNumber") setPhoneNumberValue(value);
+  };
+
+  // you said ignore handleSubmit logic for now
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+
+    // minimal client-side check
+    if (password !== passwordConfirmation) {
+      setError(t("passwordsDoNotMatch"));
+      setLoading(false);
+      return;
+    }
+
+    // TODO: connect real register API later
+    setLoading(false);
+    // router.push("/account"); // example
+  };
+
+  return (
+    <div className={styles.loginContainer}>
+      <div className={styles.loginCard}>
+        <h1 className={styles.title}>{t("registerTitle")}</h1>
+
+        <form onSubmit={handleSubmit} className={styles.form}>
+          <TextInput
+            required
+            label={t("username")}
+            value={username}
+            onChange={handleChange}
+            name="username"
+            type="text"
+            placeholder={t("usernamePlaceholder")}
+            error={error && username === "" ? t("usernameRequired") : ""}
+          />
+
+          <TextInput
+            required
+            label={t("email")}
+            value={email}
+            onChange={handleChange}
+            name="email"
+            type="email"
+            placeholder={t("emailPlaceholder")}
+            error={error && email === "" ? t("emailRequired") : ""}
+          />
+
+          <TextInput
+            required
+            label={t("password")}
+            value={password}
+            onChange={handleChange}
+            name="password"
+            type="password"
+            placeholder={t("passwordPlaceholder")}
+            error={error && password === "" ? t("passwordRequired") : ""}
+          />
+
+          <TextInput
+            required
+            label={t("passwordConfirmation")}
+            value={passwordConfirmation}
+            onChange={handleChange}
+            name="passwordConfirmation"
+            type="password"
+            placeholder={t("passwordConfirmationPlaceholder")}
+            error={
+              error && passwordConfirmation === ""
+                ? t("passwordConfirmationRequired")
+                : ""
+            }
+          />
+
+          <TextInput
+            required
+            label={t("personalIdentityNumber")}
+            value={personalIdentityNumber}
+            onChange={handleChange}
+            name="personalIdentityNumber"
+            type="text"
+            placeholder={t("PersonNumberPlaceholder")}
+            error={
+              error && personalIdentityNumber === ""
+                ? t("PersonNumberRequired")
+                : ""
+            }
+          />
+
+          {/* Placeholder until dropdown/select */}
+          <TextInput
+            required
+            label={t("section")}
+            value={sectionValue}
+            onChange={handleChange}
+            name="section"
+            type="text"
+            placeholder={t("sectionPlaceholder")}
+            error={error && sectionValue === "" ? t("sectionRequired") : ""}
+          />
+
+          <TextInput
+            required
+            label={t("phoneNumber")}
+            value={phoneNumberValue}
+            onChange={handleChange}
+            name="phoneNumber"
+            type="tel"
+            placeholder={t("phoneNumberPlaceholder")}
+            error={error && phoneNumberValue === "" ? t("phoneNumberRequired") : ""}
+          />
+
+          {error && <div className={styles.errorMessage}>{error}</div>}
+
+        </form>
+
+        <div className={styles.links}>
+          <button
+            className="button activeButton"
+            onClick={handleSubmit}
+            disabled={loading}
+          >
+            {loading ? t("creatingAccount") : t("registerAccount")}
+          </button>
+          <a href="/login" className={styles.link}>
+            {t("login")}
+          </a>
+        </div>
+      </div>
+
+    </div>
+  );
+}