StrafesNET/dev-service
3
Fork 0
Code Issues 1 Pull Requests Activity

Add ui support for displaying disabled accounts
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
itzaname
2025-06-28 00:40:39 -04:00
parent e90570e2ae
commit ae12a6cd7c
4 changed files with 105 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/src/App.tsx
View File

@@ -36,6 +36,7 @@ const AppUI = ({ user }: { user: UserInfo }) => {
<Header user={user} onCreateAppClick={openCreateDialog} />
<ApplicationsPage
user={user}
permissions={user.permissions}
/>

157
web/src/components/Header.tsx
View File

@@ -9,12 +9,15 @@ import {
MenuItem,
ListItemIcon,
ListItemText,
IconButton
IconButton,
Alert,
Box
} from '@mui/material';
import {
Add as AddIcon,
AccountCircle as AccountCircleIcon,
Logout as LogoutIcon
Logout as LogoutIcon,
Warning as WarningIcon
} from '@mui/icons-material';
import {UserInfo} from "../types";
import {useConfig} from "../context/ConfigContext.tsx";
@@ -55,73 +58,99 @@ const Header: React.FC<HeaderProps> = ({ user, onCreateAppClick }) => {
};
return (
<AppBar position="static" elevation={0}>
<Toolbar>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
StrafesNET Developer Portal
</Typography>
<>
<AppBar position="static" elevation={0}>
<Toolbar>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
StrafesNET Developer Portal
</Typography>
{/* Rate Limit Display */}
<RateLimitDisplay rateLimit={user.rate_limit} rateLimitStatus={user.rate_limit_status} />
{/* Rate Limit Display */}
<RateLimitDisplay rateLimit={user.rate_limit} rateLimitStatus={user.rate_limit_status} />
<Button
color="inherit"
startIcon={<AddIcon />}
onClick={onCreateAppClick}
sx={{
backgroundColor: 'rgba(255, 255, 255, 0.08)',
'&:hover': {
backgroundColor: 'rgba(255, 255, 255, 0.15)',
},
mr: 2
}}
>
Create App
</Button>
{/* Profile Avatar Button */}
<IconButton
onClick={handleProfileClick}
size="small"
aria-controls={open ? 'profile-menu' : undefined}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
>
<Avatar
<Button
color="inherit"
startIcon={<AddIcon />}
onClick={onCreateAppClick}
disabled={!user.active}
sx={{
width: 40,
height: 40,
cursor: 'pointer'
backgroundColor: 'rgba(255, 255, 255, 0.08)',
'&:hover': {
backgroundColor: 'rgba(255, 255, 255, 0.15)',
},
mr: 2
}}
alt="Profile Photo"
src={ user.avatar_url }
/>
</IconButton>
>
Create App
</Button>
{/* Dropdown Menu */}
<Menu
id="profile-menu"
anchorEl={anchorEl}
open={open}
onClose={handleClose}
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
>
<MenuItem onClick={handleAccountManagement}>
<ListItemIcon>
<AccountCircleIcon fontSize="small" />
</ListItemIcon>
<ListItemText>Account Management</ListItemText>
</MenuItem>
<MenuItem onClick={handleLogout}>
<ListItemIcon>
<LogoutIcon fontSize="small" />
</ListItemIcon>
<ListItemText>Logout</ListItemText>
</MenuItem>
</Menu>
</Toolbar>
</AppBar>
{/* Profile Avatar Button */}
<IconButton
onClick={handleProfileClick}
size="small"
aria-controls={open ? 'profile-menu' : undefined}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
>
<Avatar
sx={{
width: 40,
height: 40,
cursor: 'pointer',
opacity: user.active ? 1 : 0.6,
border: !user.active ? '2px solid #f44336' : 'none'
}}
alt="Profile Photo"
src={ user.avatar_url }
/>
</IconButton>
{/* Dropdown Menu */}
<Menu
id="profile-menu"
anchorEl={anchorEl}
open={open}
onClose={handleClose}
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
>
<MenuItem onClick={handleAccountManagement}>
<ListItemIcon>
<AccountCircleIcon fontSize="small" />
</ListItemIcon>
<ListItemText>Account Management</ListItemText>
</MenuItem>
<MenuItem onClick={handleLogout}>
<ListItemIcon>
<LogoutIcon fontSize="small" />
</ListItemIcon>
<ListItemText>Logout</ListItemText>
</MenuItem>
</Menu>
</Toolbar>
</AppBar>
{/* Account Disabled Warning */}
{!user.active && (
<Box sx={{ width: '100%' }}>
<Alert
severity="error"
icon={<WarningIcon />}
sx={{
borderRadius: 0,
'& .MuiAlert-message': {
width: '100%',
textAlign: 'center'
}
}}
>
<Typography variant="body1" sx={{fontWeight: 'medium'}}>
Your account has been disabled.
</Typography>
</Alert>
</Box>
)}
</>
);
};

12
web/src/components/applications/ApplicationsPage.tsx
View File

@@ -11,14 +11,15 @@ import {
Add as AddIcon
} from '@mui/icons-material';
import ApplicationCard from './ApplicationCard.tsx';
import { Permission } from '../../types';
import { Permission, UserInfo } from '../../types';
import { useApplications } from '../../context/ApplicationContext';
interface ApplicationsPageProps {
user: UserInfo;
permissions: Permission[];
}
const ApplicationsPage: React.FC<ApplicationsPageProps> = ({ permissions }) => {
const ApplicationsPage: React.FC<ApplicationsPageProps> = ({ user, permissions }) => {
const {
applications,
openCreateDialog
@@ -53,7 +54,8 @@ const ApplicationsPage: React.FC<ApplicationsPageProps> = ({ permissions }) => {
py: 8,
bgcolor: 'background.paper',
borderRadius: 2,
border: '1px solid rgba(255, 255, 255, 0.12)'
border: '1px solid rgba(255, 255, 255, 0.12)',
opacity: user.active ? 1 : 0.6
}}
>
<AppsIcon sx={{ fontSize: 60, color: 'text.secondary', mb: 2 }} />
@@ -64,6 +66,7 @@ const ApplicationsPage: React.FC<ApplicationsPageProps> = ({ permissions }) => {
variant="contained"
startIcon={<AddIcon />}
onClick={openCreateDialog}
disabled={!user.active}
sx={{ mt: 2 }}
>
Create Your First App
@@ -78,7 +81,8 @@ const ApplicationsPage: React.FC<ApplicationsPageProps> = ({ permissions }) => {
md: 'repeat(3, 1fr)',
lg: 'repeat(4, 1fr)'
},
gap: 3
gap: 3,
opacity: user.active ? 1 : 0.8
}}>
{applications.map((app) => (
<ApplicationCard

1
web/src/types/index.ts
View File

@@ -52,6 +52,7 @@ export interface CreateApplicationRequest {
export interface UserInfo {
id: number;
username: string;
active: boolean;
avatar_url: string;
rate_limit: RateLimit;
rate_limit_status: RateLimitStatus;