feature : Connect front to backend #1
@@ -1,8 +1,7 @@
|
|||||||
import { useAuth } from '../../contexts/AuthContext';
|
import { useAuth } from '../../contexts/AuthContext';
|
||||||
import type { UserRole } from '../../types';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Developer-only overlay to quickly switch user roles for testing.
|
* Developer-only overlay to quickly log in as test accounts.
|
||||||
* Only visible in development mode.
|
* Only visible in development mode.
|
||||||
*/
|
*/
|
||||||
export function DevRoleSwitcher() {
|
export function DevRoleSwitcher() {
|
||||||
@@ -12,9 +11,8 @@ export function DevRoleSwitcher() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function DevRoleSwitcherInner() {
|
function DevRoleSwitcherInner() {
|
||||||
const { user, isAuthenticated, devSetRole, login, logout } = useAuth();
|
const { user, isAuthenticated, login, logout } = useAuth();
|
||||||
|
|
||||||
const ROLES: UserRole[] = ['user', 'dev', 'com'];
|
|
||||||
const DEV_ACCOUNTS = [
|
const DEV_ACCOUNTS = [
|
||||||
{ label: 'Dev/Admin (Kestrel)', email: 'kestrel@crowmate.dev' },
|
{ label: 'Dev/Admin (Kestrel)', email: 'kestrel@crowmate.dev' },
|
||||||
{ label: 'Com Staff (Vesper)', email: 'vesper@crowmate.dev' },
|
{ label: 'Com Staff (Vesper)', email: 'vesper@crowmate.dev' },
|
||||||
@@ -48,30 +46,10 @@ function DevRoleSwitcherInner() {
|
|||||||
<div style={{ color: 'var(--color-text-muted)', marginBottom: '0.4rem' }}>
|
<div style={{ color: 'var(--color-text-muted)', marginBottom: '0.4rem' }}>
|
||||||
Logged as: <strong style={{ color: 'var(--color-text)' }}>{user?.username}</strong>
|
Logged as: <strong style={{ color: 'var(--color-text)' }}>{user?.username}</strong>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ color: 'var(--color-text-muted)', marginBottom: '0.5rem' }}>
|
<div style={{ color: 'var(--color-text-muted)', marginBottom: '0.75rem' }}>
|
||||||
Role: <strong style={{ color: 'var(--color-green)' }}>{user?.role}</strong>
|
Role: <strong style={{ color: 'var(--color-green)' }}>{user?.role}</strong>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style={{ display: 'flex', gap: '0.3rem', marginBottom: '0.5rem', flexWrap: 'wrap' }}>
|
|
||||||
{ROLES.map((r) => (
|
|
||||||
<button
|
|
||||||
key={r}
|
|
||||||
onClick={() => devSetRole(r)}
|
|
||||||
style={{
|
|
||||||
background: user?.role === r ? 'var(--color-amber)' : 'transparent',
|
|
||||||
border: '1px solid var(--color-amber)',
|
|
||||||
color: user?.role === r ? '#000' : 'var(--color-amber)',
|
|
||||||
padding: '0.1rem 0.4rem',
|
|
||||||
cursor: 'pointer',
|
|
||||||
fontFamily: 'var(--font-mono)',
|
|
||||||
fontSize: '0.65rem',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{r}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
<button
|
||||||
onClick={logout}
|
onClick={logout}
|
||||||
style={{
|
style={{
|
||||||
|
|||||||
Reference in New Issue
Block a user