Loading...
+ }
+
+ if (!isAuthenticated) {
+ return
{/* Top bar */}
diff --git a/frontend/src/components/PasswordChangeModal.tsx b/frontend/src/components/PasswordChangeModal.tsx
new file mode 100644
index 0000000..2102310
--- /dev/null
+++ b/frontend/src/components/PasswordChangeModal.tsx
@@ -0,0 +1,129 @@
+import { useState } from 'react'
+import { authApi } from '../api/auth'
+import { useAuth } from '../context/AuthContext'
+
+interface PasswordChangeModalProps {
+ onSuccess: () => void
+}
+
+export default function PasswordChangeModal({ onSuccess }: PasswordChangeModalProps) {
+ const { clearPasswordChangeRequired } = useAuth()
+ const [currentPassword, setCurrentPassword] = useState('')
+ const [newPassword, setNewPassword] = useState('')
+ const [confirmPassword, setConfirmPassword] = useState('')
+ const [error, setError] = useState(null)
+ const [loading, setLoading] = useState(false)
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault()
+ setError(null)
+
+ // Validation
+ if (!currentPassword || !newPassword || !confirmPassword) {
+ setError('All fields are required')
+ return
+ }
+
+ if (newPassword.length < 6) {
+ setError('New password must be at least 6 characters')
+ return
+ }
+
+ if (newPassword !== confirmPassword) {
+ setError('New passwords do not match')
+ return
+ }
+
+ if (currentPassword === newPassword) {
+ setError('New password must be different from current password')
+ return
+ }
+
+ try {
+ setLoading(true)
+ await authApi.changePassword({
+ current_password: currentPassword,
+ new_password: newPassword,
+ })
+ clearPasswordChangeRequired()
+ onSuccess()
+ } catch (err: any) {
+ setError(err.response?.data?.detail || 'Failed to change password')
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ return (
+ (undefined)
@@ -19,6 +22,8 @@ export function AuthProvider({ children }: { children: ReactNode }) {
isAuthenticated: false,
username: null,
isLoading: true,
+ passwordChangeRequired: false,
+ isAdmin: false,
})
useEffect(() => {
@@ -31,6 +36,8 @@ export function AuthProvider({ children }: { children: ReactNode }) {
isAuthenticated: true,
username: user.username,
isLoading: false,
+ passwordChangeRequired: false,
+ isAdmin: user.is_admin || false,
})
})
.catch(() => {
@@ -40,6 +47,8 @@ export function AuthProvider({ children }: { children: ReactNode }) {
isAuthenticated: false,
username: null,
isLoading: false,
+ passwordChangeRequired: false,
+ isAdmin: false,
})
})
} else {
@@ -47,6 +56,8 @@ export function AuthProvider({ children }: { children: ReactNode }) {
isAuthenticated: false,
username: null,
isLoading: false,
+ passwordChangeRequired: false,
+ isAdmin: false,
})
}
}, [])
@@ -57,12 +68,15 @@ export function AuthProvider({ children }: { children: ReactNode }) {
localStorage.setItem('access_token', tokens.access_token)
localStorage.setItem('refresh_token', tokens.refresh_token)
const user = await authApi.me()
+ const passwordChangeRequired = tokens.password_change_required || false
setAuthState({
isAuthenticated: true,
username: user.username,
isLoading: false,
+ passwordChangeRequired,
+ isAdmin: user.is_admin || false,
})
- return { success: true }
+ return { success: true, passwordChangeRequired }
} catch (error: any) {
return {
success: false,
@@ -71,6 +85,13 @@ export function AuthProvider({ children }: { children: ReactNode }) {
}
}
+ const clearPasswordChangeRequired = () => {
+ setAuthState((prev) => ({
+ ...prev,
+ passwordChangeRequired: false,
+ }))
+ }
+
const logout = () => {
localStorage.removeItem('access_token')
localStorage.removeItem('refresh_token')
@@ -84,7 +105,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
}
return (
-
+
{children}
)
diff --git a/frontend/src/pages/ApproveIdentified.tsx b/frontend/src/pages/ApproveIdentified.tsx
index e87ce78..64be17f 100644
--- a/frontend/src/pages/ApproveIdentified.tsx
+++ b/frontend/src/pages/ApproveIdentified.tsx
@@ -58,11 +58,11 @@ export default function ApproveIdentified() {
}
const handleSubmit = async () => {
- // Get all decisions that have been made, but only for pending items
+ // Get all decisions that have been made, for pending or denied items (not approved)
const decisionsList = Object.entries(decisions)
.filter(([id, decision]) => {
const pending = pendingIdentifications.find(p => p.id === parseInt(id))
- return decision !== null && pending && pending.status === 'pending'
+ return decision !== null && pending && pending.status !== 'approved'
})
.map(([id, decision]) => ({
id: parseInt(id),
@@ -193,7 +193,7 @@ export default function ApproveIdentified() {
const isDenied = pending.status === 'denied'
const isApproved = pending.status === 'approved'
return (
-
+
- {isDenied ? (
-
diff --git a/frontend/src/pages/AutoMatch.tsx b/frontend/src/pages/AutoMatch.tsx
index 6aa2709..a071964 100644
--- a/frontend/src/pages/AutoMatch.tsx
+++ b/frontend/src/pages/AutoMatch.tsx
@@ -624,7 +624,7 @@ export default function AutoMatch() {
diff --git a/frontend/src/pages/ManageUsers.tsx b/frontend/src/pages/ManageUsers.tsx
new file mode 100644
index 0000000..2b490ff
--- /dev/null
+++ b/frontend/src/pages/ManageUsers.tsx
@@ -0,0 +1,473 @@
+import { useState, useEffect } from 'react'
+import { usersApi, UserResponse, UserCreateRequest, UserUpdateRequest } from '../api/users'
+
+export default function ManageUsers() {
+ const [users, setUsers] = useState([])
+ const [loading, setLoading] = useState(true)
+ const [error, setError] = useState(null)
+ const [showCreateModal, setShowCreateModal] = useState(false)
+ const [editingUser, setEditingUser] = useState(null)
+ const [filterActive, setFilterActive] = useState(null)
+ const [filterAdmin, setFilterAdmin] = useState(null)
+
+ const [createForm, setCreateForm] = useState({
+ username: '',
+ password: '',
+ email: '',
+ full_name: '',
+ is_active: true,
+ is_admin: false,
+ })
+
+ const [editForm, setEditForm] = useState({
+ password: '',
+ email: '',
+ full_name: '',
+ is_active: true,
+ is_admin: false,
+ })
+
+ useEffect(() => {
+ loadUsers()
+ }, [filterActive, filterAdmin])
+
+ const loadUsers = async () => {
+ try {
+ setLoading(true)
+ setError(null)
+ const params: { is_active?: boolean; is_admin?: boolean } = {}
+ if (filterActive !== null) params.is_active = filterActive
+ if (filterAdmin !== null) params.is_admin = filterAdmin
+ const response = await usersApi.listUsers(params)
+ setUsers(response.items)
+ } catch (err: any) {
+ setError(err.response?.data?.detail || 'Failed to load users')
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ const handleCreate = async () => {
+ try {
+ setError(null)
+ await usersApi.createUser(createForm)
+ setShowCreateModal(false)
+ setCreateForm({
+ username: '',
+ password: '',
+ email: '',
+ full_name: '',
+ is_active: true,
+ is_admin: false,
+ })
+ loadUsers()
+ } catch (err: any) {
+ setError(err.response?.data?.detail || 'Failed to create user')
+ }
+ }
+
+ const handleUpdate = async () => {
+ if (!editingUser) return
+ try {
+ setError(null)
+ // Only send password if it's not empty
+ const updateData: UserUpdateRequest = {
+ ...editForm,
+ password: editForm.password && editForm.password.trim() !== ''
+ ? editForm.password
+ : undefined,
+ }
+ await usersApi.updateUser(editingUser.id, updateData)
+ setEditingUser(null)
+ setEditForm({
+ password: '',
+ email: '',
+ full_name: '',
+ is_active: true,
+ is_admin: false,
+ })
+ loadUsers()
+ } catch (err: any) {
+ setError(err.response?.data?.detail || 'Failed to update user')
+ }
+ }
+
+ const handleDelete = async (userId: number, username: string) => {
+ if (!confirm(`Are you sure you want to delete user "${username}"?`)) {
+ return
+ }
+ try {
+ setError(null)
+ await usersApi.deleteUser(userId)
+ loadUsers()
+ } catch (err: any) {
+ setError(err.response?.data?.detail || 'Failed to delete user')
+ }
+ }
+
+ const startEdit = (user: UserResponse) => {
+ setEditingUser(user)
+ setEditForm({
+ password: '',
+ email: user.email || '',
+ full_name: user.full_name || '',
+ is_active: user.is_active,
+ is_admin: user.is_admin,
+ })
+ }
+
+ const formatDate = (dateString: string | null) => {
+ if (!dateString) return 'Never'
+ return new Date(dateString).toLocaleString()
+ }
+
+ return (
+ ([])
+ const [loading, setLoading] = useState(true)
+ const [error, setError] = useState(null)
+ const [decisions, setDecisions] = useState>({})
+ const [reviewNotes, setReviewNotes] = useState>({})
+ const [submitting, setSubmitting] = useState(false)
+ const [statusFilter, setStatusFilter] = useState('pending')
+
+ const loadReportedPhotos = useCallback(async () => {
+ setLoading(true)
+ setError(null)
+ try {
+ const response = await reportedPhotosApi.listReportedPhotos(
+ statusFilter || undefined
+ )
+ setReportedPhotos(response.items)
+
+ // Initialize review notes from existing data
+ const existingNotes: Record = {}
+ response.items.forEach((item) => {
+ if (item.review_notes) {
+ existingNotes[item.id] = item.review_notes
+ }
+ })
+ setReviewNotes(existingNotes)
+ } catch (err: any) {
+ setError(err.response?.data?.detail || err.message || 'Failed to load reported photos')
+ console.error('Error loading reported photos:', err)
+ } finally {
+ setLoading(false)
+ }
+ }, [statusFilter])
+
+ useEffect(() => {
+ loadReportedPhotos()
+ }, [loadReportedPhotos])
+
+ const formatDate = (dateString: string | null | undefined): string => {
+ if (!dateString) return '-'
+ try {
+ const date = new Date(dateString)
+ return date.toLocaleString()
+ } catch {
+ return dateString
+ }
+ }
+
+ const handleDecisionChange = (id: number, decision: 'keep' | 'remove') => {
+ setDecisions((prev) => ({
+ ...prev,
+ [id]: decision,
+ }))
+ }
+
+ const handleReviewNotesChange = (id: number, notes: string) => {
+ setReviewNotes((prev) => ({
+ ...prev,
+ [id]: notes,
+ }))
+ }
+
+ const handleSubmit = async () => {
+ // Get all decisions that have been made for pending or reviewed items
+ const decisionsList: ReviewDecision[] = Object.entries(decisions)
+ .filter(([id, decision]) => {
+ const reported = reportedPhotos.find((p) => p.id === parseInt(id))
+ return decision !== null && reported && (reported.status === 'pending' || reported.status === 'reviewed')
+ })
+ .map(([id, decision]) => ({
+ id: parseInt(id),
+ decision: decision!,
+ review_notes: reviewNotes[parseInt(id)] || null,
+ }))
+
+ if (decisionsList.length === 0) {
+ alert('Please select Keep or Remove for at least one reported photo.')
+ return
+ }
+
+ if (
+ !confirm(
+ `Submit ${decisionsList.length} decision(s)?\n\nThis will ${
+ decisionsList.filter((d) => d.decision === 'remove').length
+ } remove photo(s) and ${
+ decisionsList.filter((d) => d.decision === 'keep').length
+ } keep photo(s).`
+ )
+ ) {
+ return
+ }
+
+ setSubmitting(true)
+ try {
+ const response = await reportedPhotosApi.reviewReportedPhotos({
+ decisions: decisionsList,
+ })
+
+ const message = [
+ `â
Kept: ${response.kept}`,
+ `â Removed: ${response.removed}`,
+ response.errors.length > 0 ? `â ī¸ Errors: ${response.errors.length}` : '',
+ ]
+ .filter(Boolean)
+ .join('\n')
+
+ alert(message)
+
+ if (response.errors.length > 0) {
+ console.error('Errors:', response.errors)
+ }
+
+ // Reload the list to show updated status
+ await loadReportedPhotos()
+ // Clear decisions and notes
+ setDecisions({})
+ setReviewNotes({})
+ } catch (err: any) {
+ const errorMessage =
+ err.response?.data?.detail || err.message || 'Failed to submit decisions'
+ alert(`Error: ${errorMessage}`)
+ console.error('Error submitting decisions:', err)
+ } finally {
+ setSubmitting(false)
+ }
+ }
+
+ return (
+
+
+ )
+}
+
diff --git a/frontend/src/context/AuthContext.tsx b/frontend/src/context/AuthContext.tsx
index 9ad80c5..d0e67da 100644
--- a/frontend/src/context/AuthContext.tsx
+++ b/frontend/src/context/AuthContext.tsx
@@ -5,11 +5,14 @@ interface AuthState {
isAuthenticated: boolean
username: string | null
isLoading: boolean
+ passwordChangeRequired: boolean
+ isAdmin: boolean
}
interface AuthContextType extends AuthState {
- login: (username: string, password: string) => Promise<{ success: boolean; error?: string }>
+ login: (username: string, password: string) => Promise<{ success: boolean; error?: string; passwordChangeRequired?: boolean }>
logout: () => void
+ clearPasswordChangeRequired: () => void
}
const AuthContext = createContext
+
+ Change Password Required
++ You must change your password before continuing. Please enter your current password + (provided by your administrator) and choose a new password. +
+ + {error && ( +
+ {error}
+
+ )}
+
+
+
{formatName(pending)}
@@ -265,34 +265,37 @@ export default function ApproveIdentified() {
Denied
- ) : isApproved ? (
+ {isApproved ? (
Approved
) : (
-
-
-
+
+ {isDenied && (
+ (Denied)
+ )}
+
)}
+
+
+
- Person {currentIndex + 1} of {activePeople.length}
+ Person {currentIndex + 1}
- Person {currentIndex + 1} of {activePeople.length}
+ Person {currentIndex + 1}
{currentPerson && ` âĸ ${currentPerson.total_matches} matches`}
+
+ )
+}
+
diff --git a/frontend/src/pages/ReportedPhotos.tsx b/frontend/src/pages/ReportedPhotos.tsx
new file mode 100644
index 0000000..8766b0a
--- /dev/null
+++ b/frontend/src/pages/ReportedPhotos.tsx
@@ -0,0 +1,368 @@
+import { useEffect, useState, useCallback } from 'react'
+import {
+ reportedPhotosApi,
+ ReportedPhotoResponse,
+ ReviewDecision,
+} from '../api/reportedPhotos'
+import { apiClient } from '../api/client'
+
+export default function ReportedPhotos() {
+ const [reportedPhotos, setReportedPhotos] = useState
+
+
+ {error && (
+ Manage Users
+ +
+ {error}
+
+ )}
+
+ {/* Filters */}
+
+
+
+ {/* Users Table */}
+
+
+
+
+
+
+ {loading ? (
+
+
+
+ )}
+
+
+ {/* Create Modal */}
+ {showCreateModal && (
+ Loading users...
+ ) : users.length === 0 ? (
+ No users found
+ ) : (
+ | + Username + | ++ Email + | ++ Full Name + | ++ Status + | ++ Role + | ++ Created + | ++ Last Login + | ++ Actions + | +
|---|---|---|---|---|---|---|---|
| + {user.username} + | ++ {user.email || '-'} + | ++ {user.full_name || '-'} + | ++ + {user.is_active ? 'Active' : 'Inactive'} + + | ++ + {user.is_admin ? 'Admin' : 'User'} + + | ++ {formatDate(user.created_date)} + | ++ {formatDate(user.last_login)} + | ++ + + | +
+
+ )}
+
+ {/* Edit Modal */}
+ {editingUser && (
+
+
+ Create New User
+
+
+
+
+
+ setCreateForm({ ...createForm, username: e.target.value })
+ }
+ className="w-full px-3 py-2 border border-gray-300 rounded-md"
+ required
+ />
+
+
+
+
+ setCreateForm({ ...createForm, password: e.target.value })
+ }
+ className="w-full px-3 py-2 border border-gray-300 rounded-md"
+ required
+ minLength={6}
+ />
+
+
+
+
+ setCreateForm({ ...createForm, email: e.target.value })
+ }
+ className="w-full px-3 py-2 border border-gray-300 rounded-md"
+ />
+
+
+
+
+ setCreateForm({ ...createForm, full_name: e.target.value })
+ }
+ className="w-full px-3 py-2 border border-gray-300 rounded-md"
+ />
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+ + Edit User: {editingUser.username} +
+
+
+
+
+
+ setEditForm({ ...editForm, password: e.target.value || null })
+ }
+ className="w-full px-3 py-2 border border-gray-300 rounded-md"
+ minLength={6}
+ placeholder="Leave empty to keep current password"
+ />
+
+ + Minimum 6 characters. Leave empty to keep the current password. +
+
+
+
+ setEditForm({ ...editForm, email: e.target.value })
+ }
+ className="w-full px-3 py-2 border border-gray-300 rounded-md"
+ />
+
+
+
+
+ setEditForm({ ...editForm, full_name: e.target.value })
+ }
+ className="w-full px-3 py-2 border border-gray-300 rounded-md"
+ />
+
+
+
+
+
+
+
+
+
+
+
+
Reported Photos
+ + {loading && ( +
+
+ )}
+
+ {error && (
+ Loading reported photos...
+
+
+ )}
+
+ {!loading && !error && (
+ <>
+ Error loading data
+{error}
+ +
+
+
+ {reportedPhotos.length === 0 ? (
+
+
+
+
+ Total reported photos: {reportedPhotos.length}
+
+
+
+
+ ) : (
+ No reported photos found.
+
+
+
+
| + Photo + | ++ Reported By + | ++ Reported At + | ++ Status + | ++ Decision + | ++ Review Notes + | +
|---|---|---|---|---|---|
|
+
+ {reported.photo_id ? (
+
+ {
+ const photoUrl = `${apiClient.defaults.baseURL}/api/v1/photos/${reported.photo_id}/image`
+ window.open(photoUrl, '_blank')
+ }}
+ title="Click to open full photo"
+ >
+
+ ) : (
+  {
+ const target = e.target as HTMLImageElement
+ target.style.display = 'none'
+ const parent = target.parentElement
+ if (parent && !parent.querySelector('.error-fallback')) {
+ const fallback = document.createElement('div')
+ fallback.className =
+ 'text-gray-400 text-xs error-fallback'
+ fallback.textContent = `#${reported.photo_id}`
+ parent.appendChild(fallback)
+ }
+ }}
+ />
+ Photo not found
+ )}
+
+ {reported.photo_filename || `Photo #${reported.photo_id}`}
+
+ |
+
+
+ {reported.user_name || 'Unknown'}
+
+
+ {reported.user_email || '-'}
+
+ |
+
+
+ {formatDate(reported.reported_at)}
+
+ |
+ + + {reported.status} + + | +
+
+
+
+
+ |
+
+ {isReviewed || isDismissed ? (
+
+ {reported.review_notes ? (
+
+ ) : (
+
+ {reported.review_notes}
+
+ ) : (
+ -
+ )}
+
+ {reported.review_notes && (
+
+
+ )}
+
+ Existing notes:
+
+
+ {reported.review_notes}
+
+ |