feat: add user authentication with separate login and register pages

- Custom User model with email as unique identifier (AUTH_USER_MODEL) - POST /api/auth/register/ with email validation, password min 8 chars, duplicate rejection - POST /api/auth/login/ returning JWT (access + refresh) tokens - Passwords hashed via Django's make_password - React LoginPage and RegisterPage with form validation - AuthContext with useReducer for auth state management - Axios API client with JWT token injection - TypeScript conversion of frontend scaffold
2026-05-26 00:54:27 +00:00
parent b91b7c364e
commit 6867a91b67
28 changed files with 3313 additions and 55 deletions
@@ -0,0 +1,179 @@
+import { useState, type FormEvent, type ChangeEvent } from "react";
+import { useNavigate, Link } from "react-router-dom";
+import { useAuth } from "../contexts/AuthContext";
+
+export default function LoginPage() {
+  const navigate = useNavigate();
+  const { state, login, clearError } = useAuth();
+
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    clearError();
+    try {
+      await login({ email, password });
+      navigate("/");
+    } catch {
+      // error is captured in state.error via context
+    }
+  };
+
+  const handleEmailChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setEmail(e.target.value);
+  };
+
+  const handlePasswordChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setPassword(e.target.value);
+  };
+
+  return (
+    <div style={styles.container}>
+      <div style={styles.card}>
+        <h1 style={styles.title}>Sign In</h1>
+        <p style={styles.subtitle}>Welcome back to Job Tracker</p>
+
+        {state.error && <div style={styles.error}>{state.error}</div>}
+
+        <form onSubmit={handleSubmit} style={styles.form}>
+          <div style={styles.field}>
+            <label htmlFor="email" style={styles.label}>
+              Email
+            </label>
+            <input
+              id="email"
+              type="email"
+              value={email}
+              onChange={handleEmailChange}
+              style={styles.input}
+              placeholder="you@example.com"
+              required
+            />
+          </div>
+
+          <div style={styles.field}>
+            <label htmlFor="password" style={styles.label}>
+              Password
+            </label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={handlePasswordChange}
+              style={styles.input}
+              placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
+              required
+            />
+          </div>
+
+          <button
+            type="submit"
+            disabled={state.isLoading}
+            style={{
+              ...styles.button,
+              ...(state.isLoading ? styles.buttonDisabled : {}),
+            }}
+          >
+            {state.isLoading ? "Signing in..." : "Sign In"}
+          </button>
+        </form>
+
+        <p style={styles.footer}>
+          Don't have an account?{" "}
+          <Link to="/register" style={styles.link}>
+            Create one
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}
+
+const styles: Record<string, React.CSSProperties> = {
+  container: {
+    minHeight: "100vh",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#f5f5f5",
+    fontFamily:
+      '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  },
+  card: {
+    backgroundColor: "#fff",
+    padding: "2rem",
+    borderRadius: "8px",
+    boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
+    width: "100%",
+    maxWidth: "400px",
+  },
+  title: {
+    margin: "0 0 0.25rem",
+    fontSize: "1.5rem",
+    fontWeight: 600,
+  },
+  subtitle: {
+    margin: "0 0 1.5rem",
+    color: "#666",
+    fontSize: "0.9rem",
+  },
+  form: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "1rem",
+  },
+  field: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.35rem",
+  },
+  label: {
+    fontSize: "0.85rem",
+    fontWeight: 500,
+    color: "#333",
+  },
+  input: {
+    padding: "0.6rem 0.75rem",
+    border: "1px solid #ccc",
+    borderRadius: "6px",
+    fontSize: "0.95rem",
+    outline: "none",
+    transition: "border-color 0.15s",
+  },
+  button: {
+    padding: "0.65rem",
+    backgroundColor: "#1a73e8",
+    color: "#fff",
+    border: "none",
+    borderRadius: "6px",
+    fontSize: "1rem",
+    fontWeight: 500,
+    cursor: "pointer",
+    marginTop: "0.5rem",
+  },
+  buttonDisabled: {
+    opacity: 0.6,
+    cursor: "not-allowed",
+  },
+  error: {
+    backgroundColor: "#fef2f2",
+    color: "#b91c1c",
+    border: "1px solid #fecaca",
+    borderRadius: "6px",
+    padding: "0.5rem 0.75rem",
+    fontSize: "0.85rem",
+    marginBottom: "0.5rem",
+  },
+  footer: {
+    marginTop: "1.25rem",
+    textAlign: "center",
+    fontSize: "0.85rem",
+    color: "#666",
+  },
+  link: {
+    color: "#1a73e8",
+    textDecoration: "none",
+    fontWeight: 500,
+  },
+};