jeffemmett
/
canvas-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: improve admin request button error handling 

- Added adminRequestError state to track request failures
- Parse and display server error messages to user
- Show red error button with retry option on failure
- Display error message below button explaining what went wrong

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2025-12-21 00:55:46 -05:00
parent e28ec80984
commit cf07ab47e5
1 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/BoardSettingsDropdown.tsx
View File

@ -36,6 +36,7 @@ const BoardSettingsDropdown: React.FC<BoardSettingsDropdownProps> = ({ className
const [updating, setUpdating] = useState(false); const [updating, setUpdating] = useState(false);
const [requestingAdmin, setRequestingAdmin] = useState(false); const [requestingAdmin, setRequestingAdmin] = useState(false);
const [adminRequestSent, setAdminRequestSent] = useState(false); const [adminRequestSent, setAdminRequestSent] = useState(false);
const [adminRequestError, setAdminRequestError] = useState<string | null>(null);
const [inviteInput, setInviteInput] = useState(''); const [inviteInput, setInviteInput] = useState('');
const [inviteStatus, setInviteStatus] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle'); const [inviteStatus, setInviteStatus] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle');
@ -120,6 +121,7 @@ const BoardSettingsDropdown: React.FC<BoardSettingsDropdownProps> = ({ className
if (requestingAdmin || adminRequestSent) return; if (requestingAdmin || adminRequestSent) return;
setRequestingAdmin(true); setRequestingAdmin(true);
setAdminRequestError(null);
try { try {
const headers = getAuthHeaders(); const headers = getAuthHeaders();
const res = await fetch(`${WORKER_URL}/admin/request`, { const res = await fetch(`${WORKER_URL}/admin/request`, {
@ -128,11 +130,16 @@ const BoardSettingsDropdown: React.FC<BoardSettingsDropdownProps> = ({ className
body: JSON.stringify({ reason: `Requesting admin access for board: ${boardId}` }), body: JSON.stringify({ reason: `Requesting admin access for board: ${boardId}` }),
}); });
if (res.ok) { const data = await res.json() as { success?: boolean; message?: string; error?: string };
if (res.ok && data.success) {
setAdminRequestSent(true); setAdminRequestSent(true);
} else {
setAdminRequestError(data.error || data.message || 'Failed to send request');
} }
} catch (error) { } catch (error) {
console.error('Failed to request admin:', error); console.error('Failed to request admin:', error);
setAdminRequestError('Network error - please try again');
} finally { } finally {
setRequestingAdmin(false); setRequestingAdmin(false);
} }
@ -514,8 +521,8 @@ const BoardSettingsDropdown: React.FC<BoardSettingsDropdownProps> = ({ className
style={{ style={{
width: '100%', width: '100%',
padding: '10px', padding: '10px',
backgroundColor: adminRequestSent ? '#10b981' : 'var(--color-muted-2)', backgroundColor: adminRequestSent ? '#10b981' : adminRequestError ? '#ef4444' : 'var(--color-muted-2)',
color: adminRequestSent ? 'white' : 'var(--color-text)', color: adminRequestSent || adminRequestError ? 'white' : 'var(--color-text)',
border: '1px solid var(--color-panel-contrast)', border: '1px solid var(--color-panel-contrast)',
borderRadius: '8px', borderRadius: '8px',
cursor: requestingAdmin || adminRequestSent ? 'not-allowed' : 'pointer', cursor: requestingAdmin || adminRequestSent ? 'not-allowed' : 'pointer',
@ -524,8 +531,13 @@ const BoardSettingsDropdown: React.FC<BoardSettingsDropdownProps> = ({ className
fontFamily: 'inherit', fontFamily: 'inherit',
}} }}
> >
{requestingAdmin ? 'Sending request...' : adminRequestSent ? 'Request Sent!' : 'Request Admin Access'} {requestingAdmin ? 'Sending request...' : adminRequestSent ? 'Request Sent!' : adminRequestError ? 'Retry Request' : 'Request Admin Access'}
</button> </button>
{adminRequestError && (
<div style={{ fontSize: '10px', color: '#ef4444', marginTop: '6px', textAlign: 'center' }}>
{adminRequestError}
</div>
)}
<div style={{ fontSize: '10px', color: 'var(--color-text-3)', marginTop: '6px', textAlign: 'center' }}> <div style={{ fontSize: '10px', color: 'var(--color-text-3)', marginTop: '6px', textAlign: 'center' }}>
Admin requests are sent to jeffemmett@gmail.com Admin requests are sent to jeffemmett@gmail.com
</div> </div>