75 lines
2.7 KiB
TypeScript
75 lines
2.7 KiB
TypeScript
|
import { Modal, Badge, MonoText, Spinner, SectionHeader } from '@cameleer/design-system';
|
||
|
|
import { useMe } from '../api/queries/auth';
|
||
|
|
import styles from './AboutMeDialog.module.css';
|
||
|
|
|
||
|
|
interface AboutMeDialogProps {
|
||
|
|
open: boolean;
|
||
|
|
onClose: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function AboutMeDialog({ open, onClose }: AboutMeDialogProps) {
|
||
|
|
const { data: user, isLoading } = useMe(open);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Modal open={open} onClose={onClose} title="About Me" size="sm">
|
||
|
|
{isLoading || !user ? (
|
||
|
|
<div className={styles.loading}><Spinner size="md" /></div>
|
||
|
|
) : (
|
||
|
|
<div className={styles.content}>
|
||
|
|
<div className={styles.metaGrid}>
|
||
|
|
<span className={styles.metaLabel}>Name</span>
|
||
|
|
<span className={styles.metaValue}>{user.displayName}</span>
|
||
|
|
<span className={styles.metaLabel}>User ID</span>
|
||
|
|
<MonoText size="xs">{user.userId}</MonoText>
|
||
|
|
<span className={styles.metaLabel}>Provider</span>
|
||
|
|
<span className={styles.metaValue}>{user.provider}</span>
|
||
|
|
{user.email && (
|
||
|
|
<>
|
||
|
|
<span className={styles.metaLabel}>Email</span>
|
||
|
|
<span className={styles.metaValue}>{user.email}</span>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
<span className={styles.metaLabel}>Created</span>
|
||
|
|
<span className={styles.metaValue}>
|
||
|
|
{new Date(user.createdAt).toLocaleDateString()}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<SectionHeader>Roles</SectionHeader>
|
||
|
|
<div className={styles.tagList}>
|
||
|
|
{user.effectiveRoles.length === 0 && (
|
||
|
|
<span className={styles.empty}>No roles assigned</span>
|
||
|
|
)}
|
||
|
|
{user.effectiveRoles.map((role) => (
|
||
|
|
<Badge
|
||
|
|
key={role.id}
|
||
|
|
label={role.name}
|
||
|
|
color={role.name === 'ADMIN' ? 'error' : role.name === 'OPERATOR' ? 'warning' : 'auto'}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
{user.effectiveRoles.some((r) => r.source !== 'direct') && (
|
||
|
|
<div className={styles.sourceList}>
|
||
|
|
{user.effectiveRoles.map((role) => (
|
||
|
|
<span key={role.id} className={styles.sourceNote}>
|
||
|
|
{role.name}: {role.source}
|
||
|
|
</span>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<SectionHeader>Groups</SectionHeader>
|
||
|
|
<div className={styles.tagList}>
|
||
|
|
{user.effectiveGroups.length === 0 && (
|
||
|
|
<span className={styles.empty}>No group memberships</span>
|
||
|
|
)}
|
||
|
|
{user.effectiveGroups.map((group) => (
|
||
|
|
<Badge key={group.id} label={group.name} color="auto" />
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</Modal>
|
||
|
|
);
|
||
|
|
}
|