Files
frontend/lib/auth-context.tsx
T
TakahashiNguyen 96584c5494
Release package / release (push) Has been cancelled
fix: add connection to backend (#34)
Co-authored-by: TakahashiNg <83152264+TakahashiNguyen@users.noreply.github.com>
Reviewed-on: #34
2026-04-19 02:22:46 +00:00

192 lines
4.3 KiB
TypeScript

"use client";
import {
ReactNode,
createContext,
useContext,
useEffect,
useState,
} from "react";
import type { User } from "./types";
interface AuthContextType {
user: User | null;
login: (username: string, password: string) => Promise<boolean>;
logout: () => void;
registerPhone: string | null;
setRegisterPhone: (phone: string | null) => void;
completeRegistration: (phone: string) => void;
}
const AuthContext = createContext<AuthContextType | undefined>(undefined);
// Mock user database
const MOCK_AUTH_DB = {
// Admin
admin: {
username: "admin",
password: "admin",
user: {
id: 1,
name: "Quản lý",
role: "manager" as const,
avatar: null,
phone: "0912345678",
},
},
// Staff (username and password are their names)
"Nguyễn Văn An": {
username: "Nguyễn Văn An",
password: "Nguyễn Văn An",
user: {
id: 2,
name: "Nguyễn Văn An",
role: "staff" as const,
avatar: null,
phone: "0901234567",
},
},
"Trần Thị Bình": {
username: "Trần Thị Bình",
password: "Trần Thị Bình",
user: {
id: 3,
name: "Trần Thị Bình",
role: "staff" as const,
avatar: null,
phone: "0902345678",
},
},
"Lê Văn Cường": {
username: "Lê Văn Cường",
password: "Lê Văn Cường",
user: {
id: 4,
name: "Lê Văn Cường",
role: "staff" as const,
avatar: null,
phone: "0903456789",
},
},
// Customers (username is phone number, password is custom)
"0987654321": {
username: "0987654321",
password: "user1",
user: {
id: 5,
name: "Khách hàng",
role: "customer" as const,
avatar: null,
phone: "0987654321",
},
},
"0976543210": {
username: "0976543210",
password: "user1",
user: {
id: 6,
name: "Khách hàng",
role: "customer" as const,
avatar: null,
phone: "0976543210",
},
},
};
export function AuthProvider({ children }: { children: ReactNode }) {
const [user, setUser] = useState<User | null>(null);
const [registerPhone, setRegisterPhone] = useState<string | null>(null);
// Load user from localStorage on mount
useEffect(() => {
const savedUser = localStorage.getItem("coffee-shop-user");
if (savedUser) {
try {
setUser(JSON.parse(savedUser));
} catch (e) {
console.error("Failed to parse saved user", e);
}
}
}, []);
const login = async (phone: string, password: string): Promise<boolean> => {
try {
const response = await fetch("/api/customer/login", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ phone, password }),
});
if (response.ok) {
const userData = await response.json();
setUser(userData);
localStorage.setItem("coffee-shop-user", JSON.stringify(userData));
return true;
} else {
console.error("Đăng nhập thất bại:", response.statusText);
return false;
}
} catch (error) {
console.error("Lỗi kết nối API:", error);
return false;
}
};
const logout = () => {
setUser(null);
localStorage.removeItem("coffee-shop-user");
};
const completeRegistration = (phone: string) => {
// Create new customer account
const newUser: User = {
id: Date.now(),
name: "Khách hàng",
role: "customer",
avatar: null,
phone,
};
// Add to mock database (in real app, this would be API call)
(MOCK_AUTH_DB as any)[phone] = {
username: phone,
password: "user1", // Default password for new customers
user: newUser,
};
setUser(newUser);
localStorage.setItem("coffee-shop-user", JSON.stringify(newUser));
setRegisterPhone(null);
};
return (
<AuthContext.Provider
value={{
user,
login,
logout,
registerPhone,
setRegisterPhone,
completeRegistration,
}}
>
{children}
</AuthContext.Provider>
);
}
export function useAuth() {
const context = useContext(AuthContext);
if (context === undefined) {
throw new Error("useAuth must be used within an AuthProvider");
}
return context;
}