Fixed auth security
This commit is contained in:
@ -1,5 +1,6 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import type { RegistryItem } from "../lib/types";
|
||||
import { fetchWithAuth, getAuthToken } from "../utils/auth-client";
|
||||
|
||||
const RegistryManager = () => {
|
||||
const [registryItems, setRegistryItems] = useState<RegistryItem[]>([]);
|
||||
@ -8,20 +9,24 @@ const RegistryManager = () => {
|
||||
const [newItem, setNewItem] = useState({ name: "", link: "" });
|
||||
const [showClaimants, setShowClaimants] = useState<Set<string>>(new Set());
|
||||
|
||||
useEffect(() => {
|
||||
fetchRegistryItems();
|
||||
}, []);
|
||||
|
||||
const fetchRegistryItems = async () => {
|
||||
// Don't try to fetch if we don't have a token yet
|
||||
if (!getAuthToken()) {
|
||||
setError("No authentication token found");
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const response = await fetch("/api/registry");
|
||||
const response = await fetchWithAuth("/api/registry");
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
const data = await response.json();
|
||||
setRegistryItems(data);
|
||||
setError(null);
|
||||
} catch (e: any) {
|
||||
setError(e.message);
|
||||
console.error("Failed to fetch registry items:", e);
|
||||
@ -30,12 +35,23 @@ const RegistryManager = () => {
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchRegistryItems();
|
||||
|
||||
// Add listener for auth success to retry fetching
|
||||
const handleAuthSuccess = () => {
|
||||
fetchRegistryItems();
|
||||
};
|
||||
document.addEventListener("auth-success", handleAuthSuccess);
|
||||
return () => document.removeEventListener("auth-success", handleAuthSuccess);
|
||||
}, []);
|
||||
|
||||
const handleAddItem = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!newItem.name.trim()) return;
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/registry", {
|
||||
const response = await fetchWithAuth("/api/registry", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
@ -55,11 +71,9 @@ const RegistryManager = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteItem = async (itemId: string) => {
|
||||
if (!confirm("Are you sure you want to delete this item?")) return;
|
||||
|
||||
const handleDeleteItem = async (id: string) => {
|
||||
try {
|
||||
const response = await fetch(`/api/registry/${itemId}`, {
|
||||
const response = await fetchWithAuth(`/api/registry/${id}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
|
||||
@ -74,12 +88,12 @@ const RegistryManager = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const toggleClaimantVisibility = (itemId: string) => {
|
||||
const toggleShowClaimant = (id: string) => {
|
||||
const newShowClaimants = new Set(showClaimants);
|
||||
if (newShowClaimants.has(itemId)) {
|
||||
newShowClaimants.delete(itemId);
|
||||
if (newShowClaimants.has(id)) {
|
||||
newShowClaimants.delete(id);
|
||||
} else {
|
||||
newShowClaimants.add(itemId);
|
||||
newShowClaimants.add(id);
|
||||
}
|
||||
setShowClaimants(newShowClaimants);
|
||||
};
|
||||
@ -89,50 +103,34 @@ const RegistryManager = () => {
|
||||
}
|
||||
|
||||
if (error) {
|
||||
if (error === "No authentication token found") {
|
||||
return <div className="text-center">Initializing...</div>;
|
||||
}
|
||||
return <div className="text-red-500 text-center">Error: {error}</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-4">
|
||||
<form onSubmit={handleAddItem} className="mb-8">
|
||||
<div className="card bg-base-100 shadow-xl">
|
||||
<div className="card-body">
|
||||
<h2 className="card-title">Add New Item</h2>
|
||||
<div className="form-control">
|
||||
<label className="label">
|
||||
<span className="label-text">Item Name</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter item name"
|
||||
className="input input-bordered"
|
||||
value={newItem.name}
|
||||
onChange={(e) =>
|
||||
setNewItem({ ...newItem, name: e.target.value })
|
||||
}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="form-control">
|
||||
<label className="label">
|
||||
<span className="label-text">Item Link (optional)</span>
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
placeholder="Enter item link"
|
||||
className="input input-bordered"
|
||||
value={newItem.link}
|
||||
onChange={(e) =>
|
||||
setNewItem({ ...newItem, link: e.target.value })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="card-actions justify-end">
|
||||
<button type="submit" className="btn btn-primary">
|
||||
Add Item
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<input
|
||||
type="text"
|
||||
value={newItem.name}
|
||||
onChange={(e) => setNewItem({ ...newItem, name: e.target.value })}
|
||||
placeholder="Item name"
|
||||
className="input input-bordered"
|
||||
required
|
||||
/>
|
||||
<input
|
||||
type="url"
|
||||
value={newItem.link}
|
||||
onChange={(e) => setNewItem({ ...newItem, link: e.target.value })}
|
||||
placeholder="Item link (optional)"
|
||||
className="input input-bordered"
|
||||
/>
|
||||
<button type="submit" className="btn btn-primary">
|
||||
Add Item
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -140,7 +138,7 @@ const RegistryManager = () => {
|
||||
<table className="table w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Item</th>
|
||||
<th>Name</th>
|
||||
<th>Link</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
@ -149,35 +147,7 @@ const RegistryManager = () => {
|
||||
<tbody>
|
||||
{registryItems.map((item) => (
|
||||
<tr key={item.id}>
|
||||
<td>
|
||||
<div className="flex items-center gap-2">
|
||||
{item.name}
|
||||
{item.taken && (
|
||||
<>
|
||||
<span className="badge badge-success">Taken</span>
|
||||
{item.claimedBy && (
|
||||
<button
|
||||
onClick={() => toggleClaimantVisibility(item.id)}
|
||||
className="btn btn-ghost btn-xs"
|
||||
>
|
||||
{showClaimants.has(item.id) ? (
|
||||
<i className="fas fa-eye-slash" />
|
||||
) : (
|
||||
<i className="fas fa-eye" />
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{item.taken &&
|
||||
item.claimedBy &&
|
||||
showClaimants.has(item.id) && (
|
||||
<div className="text-sm text-gray-500">
|
||||
Claimed by: {item.claimedBy}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td>{item.name}</td>
|
||||
<td>
|
||||
{item.link && (
|
||||
<a
|
||||
@ -186,15 +156,38 @@ const RegistryManager = () => {
|
||||
rel="noopener noreferrer"
|
||||
className="link link-primary"
|
||||
>
|
||||
View
|
||||
View Item
|
||||
</a>
|
||||
)}
|
||||
</td>
|
||||
<td>{item.taken ? "Claimed" : "Available"}</td>
|
||||
<td>
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className={`badge ${
|
||||
item.taken ? "badge-error" : "badge-success"
|
||||
}`}
|
||||
>
|
||||
{item.taken ? "Claimed" : "Available"}
|
||||
</span>
|
||||
{item.taken && (
|
||||
<button
|
||||
onClick={() => toggleShowClaimant(item.id)}
|
||||
className="btn btn-xs"
|
||||
>
|
||||
{showClaimants.has(item.id) ? "Hide" : "Show"} Claimant
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{item.taken && showClaimants.has(item.id) && (
|
||||
<div className="text-sm mt-1">
|
||||
Claimed by: {item.claimedBy}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
<button
|
||||
className="btn btn-error btn-sm"
|
||||
onClick={() => handleDeleteItem(item.id)}
|
||||
className="btn btn-error btn-sm"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user