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
This commit is contained in:
Marko (Hermes Implementer)
@@ -1,12 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div>
|
||||
<h1>Job Tracker</h1>
|
||||
<p>Welcome to the Job Tracker application.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -0,0 +1,19 @@
|
||||
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
||||
import { AuthProvider } from "./contexts/AuthContext";
|
||||
import HomePage from "./pages/HomePage";
|
||||
import LoginPage from "./pages/LoginPage";
|
||||
import RegisterPage from "./pages/RegisterPage";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<AuthProvider>
|
||||
<Routes>
|
||||
<Route path="/" element={<HomePage />} />
|
||||
<Route path="/login" element={<LoginPage />} />
|
||||
<Route path="/register" element={<RegisterPage />} />
|
||||
</Routes>
|
||||
</AuthProvider>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,139 @@
|
||||
import {
|
||||
createContext,
|
||||
useContext,
|
||||
useReducer,
|
||||
useCallback,
|
||||
type ReactNode,
|
||||
type Dispatch,
|
||||
} from "react";
|
||||
import {
|
||||
loginUser,
|
||||
registerUser,
|
||||
type UserProfile,
|
||||
type LoginPayload,
|
||||
type RegisterPayload,
|
||||
} from "../services/authApi";
|
||||
|
||||
// ── State ──────────────────────────────────────────────────────────────
|
||||
interface AuthState {
|
||||
user: UserProfile | null;
|
||||
isAuthenticated: boolean;
|
||||
isLoading: boolean;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
const initialState: AuthState = {
|
||||
user: null,
|
||||
isAuthenticated: false,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
};
|
||||
|
||||
// ── Actions ────────────────────────────────────────────────────────────
|
||||
type AuthAction =
|
||||
| { type: "AUTH_START" }
|
||||
| { type: "AUTH_SUCCESS"; payload: UserProfile }
|
||||
| { type: "AUTH_FAILURE"; payload: string }
|
||||
| { type: "LOGOUT" }
|
||||
| { type: "CLEAR_ERROR" };
|
||||
|
||||
function authReducer(state: AuthState, action: AuthAction): AuthState {
|
||||
switch (action.type) {
|
||||
case "AUTH_START":
|
||||
return { ...state, isLoading: true, error: null };
|
||||
case "AUTH_SUCCESS":
|
||||
return {
|
||||
...state,
|
||||
isLoading: false,
|
||||
isAuthenticated: true,
|
||||
user: action.payload,
|
||||
error: null,
|
||||
};
|
||||
case "AUTH_FAILURE":
|
||||
return {
|
||||
...state,
|
||||
isLoading: false,
|
||||
error: action.payload,
|
||||
};
|
||||
case "LOGOUT":
|
||||
return { ...initialState };
|
||||
case "CLEAR_ERROR":
|
||||
return { ...state, error: null };
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Context ────────────────────────────────────────────────────────────
|
||||
interface AuthContextValue {
|
||||
state: AuthState;
|
||||
dispatch: Dispatch<AuthAction>;
|
||||
login: (payload: LoginPayload) => Promise<void>;
|
||||
register: (payload: RegisterPayload) => Promise<void>;
|
||||
logout: () => void;
|
||||
clearError: () => void;
|
||||
}
|
||||
|
||||
const AuthContext = createContext<AuthContextValue | null>(null);
|
||||
|
||||
// ── Provider ───────────────────────────────────────────────────────────
|
||||
export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
const [state, dispatch] = useReducer(authReducer, initialState);
|
||||
|
||||
const login = useCallback(async (payload: LoginPayload) => {
|
||||
dispatch({ type: "AUTH_START" });
|
||||
try {
|
||||
const response = await loginUser(payload);
|
||||
localStorage.setItem("access_token", response.access);
|
||||
localStorage.setItem("refresh_token", response.refresh);
|
||||
dispatch({ type: "AUTH_SUCCESS", payload: response.user });
|
||||
} catch (err: unknown) {
|
||||
const message =
|
||||
err instanceof Error ? err.message : "Login failed. Please try again.";
|
||||
dispatch({ type: "AUTH_FAILURE", payload: message });
|
||||
throw err;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const register = useCallback(async (payload: RegisterPayload) => {
|
||||
dispatch({ type: "AUTH_START" });
|
||||
try {
|
||||
const user = await registerUser(payload);
|
||||
dispatch({ type: "AUTH_SUCCESS", payload: user });
|
||||
} catch (err: unknown) {
|
||||
const message =
|
||||
err instanceof Error
|
||||
? err.message
|
||||
: "Registration failed. Please try again.";
|
||||
dispatch({ type: "AUTH_FAILURE", payload: message });
|
||||
throw err;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const logout = useCallback(() => {
|
||||
localStorage.removeItem("access_token");
|
||||
localStorage.removeItem("refresh_token");
|
||||
dispatch({ type: "LOGOUT" });
|
||||
}, []);
|
||||
|
||||
const clearError = useCallback(() => {
|
||||
dispatch({ type: "CLEAR_ERROR" });
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<AuthContext.Provider
|
||||
value={{ state, dispatch, login, register, logout, clearError }}
|
||||
>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Hook ───────────────────────────────────────────────────────────────
|
||||
export function useAuth(): AuthContextValue {
|
||||
const context = useContext(AuthContext);
|
||||
if (!context) {
|
||||
throw new Error("useAuth must be used within an AuthProvider");
|
||||
}
|
||||
return context;
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import App from "./App";
|
||||
|
||||
const rootElement = document.getElementById("root");
|
||||
if (!rootElement) throw new Error("Root element not found");
|
||||
|
||||
ReactDOM.createRoot(rootElement).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
);
|
||||
@@ -0,0 +1,14 @@
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import App from "./App";
|
||||
|
||||
const rootElement = document.getElementById("root");
|
||||
if (!rootElement) {
|
||||
throw new Error("Root element #root not found in the document.");
|
||||
}
|
||||
|
||||
createRoot(rootElement).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
);
|
||||
@@ -0,0 +1,88 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { useAuth } from "../contexts/AuthContext";
|
||||
|
||||
export default function HomePage() {
|
||||
const { state, logout } = useAuth();
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
minHeight: "100vh",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
backgroundColor: "#f5f5f5",
|
||||
fontFamily:
|
||||
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#fff",
|
||||
padding: "2.5rem",
|
||||
borderRadius: "8px",
|
||||
boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
<h1 style={{ margin: "0 0 0.5rem" }}>Job Tracker</h1>
|
||||
<p style={{ color: "#666", marginBottom: "1.5rem" }}>
|
||||
Welcome to the Job Tracker application.
|
||||
</p>
|
||||
|
||||
{state.isAuthenticated && state.user ? (
|
||||
<div>
|
||||
<p style={{ marginBottom: "0.5rem" }}>
|
||||
Signed in as <strong>{state.user.email}</strong>
|
||||
</p>
|
||||
<button
|
||||
onClick={logout}
|
||||
style={{
|
||||
padding: "0.5rem 1.25rem",
|
||||
backgroundColor: "#b91c1c",
|
||||
color: "#fff",
|
||||
border: "none",
|
||||
borderRadius: "6px",
|
||||
fontSize: "0.9rem",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
Sign Out
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: "flex", gap: "0.75rem", justifyContent: "center" }}>
|
||||
<Link
|
||||
to="/login"
|
||||
style={{
|
||||
padding: "0.5rem 1.25rem",
|
||||
backgroundColor: "#1a73e8",
|
||||
color: "#fff",
|
||||
textDecoration: "none",
|
||||
borderRadius: "6px",
|
||||
fontSize: "0.9rem",
|
||||
}}
|
||||
>
|
||||
Sign In
|
||||
</Link>
|
||||
<Link
|
||||
to="/register"
|
||||
style={{
|
||||
padding: "0.5rem 1.25rem",
|
||||
backgroundColor: "#fff",
|
||||
color: "#1a73e8",
|
||||
textDecoration: "none",
|
||||
border: "1px solid #1a73e8",
|
||||
borderRadius: "6px",
|
||||
fontSize: "0.9rem",
|
||||
}}
|
||||
>
|
||||
Register
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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="········"
|
||||
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,
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,249 @@
|
||||
import { useState, type FormEvent, type ChangeEvent } from "react";
|
||||
import { useNavigate, Link } from "react-router-dom";
|
||||
import { useAuth } from "../contexts/AuthContext";
|
||||
|
||||
export default function RegisterPage() {
|
||||
const navigate = useNavigate();
|
||||
const { state, register, clearError } = useAuth();
|
||||
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [passwordConfirm, setPasswordConfirm] = useState("");
|
||||
const [firstName, setFirstName] = useState("");
|
||||
const [lastName, setLastName] = useState("");
|
||||
|
||||
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
clearError();
|
||||
try {
|
||||
await register({
|
||||
email,
|
||||
password,
|
||||
password_confirm: passwordConfirm,
|
||||
first_name: firstName,
|
||||
last_name: lastName,
|
||||
});
|
||||
navigate("/login", {
|
||||
state: { message: "Registration successful! Please sign in." },
|
||||
});
|
||||
} catch {
|
||||
// error is captured in state.error via context
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<div style={styles.card}>
|
||||
<h1 style={styles.title}>Create Account</h1>
|
||||
<p style={styles.subtitle}>Get started with Job Tracker</p>
|
||||
|
||||
{state.error && <div style={styles.error}>{state.error}</div>}
|
||||
|
||||
<form onSubmit={handleSubmit} style={styles.form}>
|
||||
<div style={styles.row}>
|
||||
<div style={styles.halfField}>
|
||||
<label htmlFor="firstName" style={styles.label}>
|
||||
First Name
|
||||
</label>
|
||||
<input
|
||||
id="firstName"
|
||||
type="text"
|
||||
value={firstName}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
||||
setFirstName(e.target.value)
|
||||
}
|
||||
style={styles.input}
|
||||
/>
|
||||
</div>
|
||||
<div style={styles.halfField}>
|
||||
<label htmlFor="lastName" style={styles.label}>
|
||||
Last Name
|
||||
</label>
|
||||
<input
|
||||
id="lastName"
|
||||
type="text"
|
||||
value={lastName}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
||||
setLastName(e.target.value)
|
||||
}
|
||||
style={styles.input}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={styles.field}>
|
||||
<label htmlFor="email" style={styles.label}>
|
||||
Email <span style={styles.required}>*</span>
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
||||
setEmail(e.target.value)
|
||||
}
|
||||
style={styles.input}
|
||||
placeholder="you@example.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={styles.field}>
|
||||
<label htmlFor="password" style={styles.label}>
|
||||
Password <span style={styles.required}>*</span>
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
||||
setPassword(e.target.value)
|
||||
}
|
||||
style={styles.input}
|
||||
placeholder="Min. 8 characters"
|
||||
required
|
||||
minLength={8}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={styles.field}>
|
||||
<label htmlFor="passwordConfirm" style={styles.label}>
|
||||
Confirm Password <span style={styles.required}>*</span>
|
||||
</label>
|
||||
<input
|
||||
id="passwordConfirm"
|
||||
type="password"
|
||||
value={passwordConfirm}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
||||
setPasswordConfirm(e.target.value)
|
||||
}
|
||||
style={styles.input}
|
||||
placeholder="Repeat your password"
|
||||
required
|
||||
minLength={8}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={state.isLoading}
|
||||
style={{
|
||||
...styles.button,
|
||||
...(state.isLoading ? styles.buttonDisabled : {}),
|
||||
}}
|
||||
>
|
||||
{state.isLoading ? "Creating Account..." : "Create Account"}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p style={styles.footer}>
|
||||
Already have an account?{" "}
|
||||
<Link to="/login" style={styles.link}>
|
||||
Sign in
|
||||
</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: "440px",
|
||||
},
|
||||
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",
|
||||
},
|
||||
row: {
|
||||
display: "flex",
|
||||
gap: "0.75rem",
|
||||
},
|
||||
field: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "0.35rem",
|
||||
},
|
||||
halfField: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "0.35rem",
|
||||
flex: 1,
|
||||
},
|
||||
label: {
|
||||
fontSize: "0.85rem",
|
||||
fontWeight: 500,
|
||||
color: "#333",
|
||||
},
|
||||
required: {
|
||||
color: "#b91c1c",
|
||||
},
|
||||
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,
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,55 @@
|
||||
import axios from "axios";
|
||||
|
||||
const apiClient = axios.create({
|
||||
baseURL: import.meta.env.VITE_API_URL || "http://localhost:8000",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
|
||||
// Attach access token to every request if present
|
||||
apiClient.interceptors.request.use((config) => {
|
||||
const token = localStorage.getItem("access_token");
|
||||
if (token && config.headers) {
|
||||
config.headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
return config;
|
||||
});
|
||||
|
||||
export interface RegisterPayload {
|
||||
email: string;
|
||||
password: string;
|
||||
password_confirm: string;
|
||||
first_name?: string;
|
||||
last_name?: string;
|
||||
}
|
||||
|
||||
export interface LoginPayload {
|
||||
email: string;
|
||||
password: string;
|
||||
}
|
||||
|
||||
export interface UserProfile {
|
||||
id: number;
|
||||
email: string;
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
}
|
||||
|
||||
export interface LoginResponse {
|
||||
user: UserProfile;
|
||||
access: string;
|
||||
refresh: string;
|
||||
}
|
||||
|
||||
export function registerUser(payload: RegisterPayload): Promise<UserProfile> {
|
||||
return apiClient
|
||||
.post<UserProfile>("/api/auth/register/", payload)
|
||||
.then((res) => res.data);
|
||||
}
|
||||
|
||||
export function loginUser(payload: LoginPayload): Promise<LoginResponse> {
|
||||
return apiClient
|
||||
.post<LoginResponse>("/api/auth/login/", payload)
|
||||
.then((res) => res.data);
|
||||
}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
Reference in New Issue
Block a user