Add ui support for displaying disabled accounts

web/src/App.tsx

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

web/src/components/Header.tsx

@@ -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,6 +58,7 @@ const Header: React.FC<HeaderProps> = ({ user, onCreateAppClick }) => {
     };
 
     return (
+        <>
             <AppBar position="static" elevation={0}>
                 <Toolbar>
                     <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
@@ -68,6 +72,7 @@ const Header: React.FC<HeaderProps> = ({ user, onCreateAppClick }) => {
                         color="inherit"
                         startIcon={<AddIcon />}
                         onClick={onCreateAppClick}
+                        disabled={!user.active}
                         sx={{
                             backgroundColor: 'rgba(255, 255, 255, 0.08)',
                             '&:hover': {
@@ -91,7 +96,9 @@ const Header: React.FC<HeaderProps> = ({ user, onCreateAppClick }) => {
                             sx={{
                                 width: 40,
                                 height: 40,
-                            cursor: 'pointer'
+                                cursor: 'pointer',
+                                opacity: user.active ? 1 : 0.6,
+                                border: !user.active ? '2px solid #f44336' : 'none'
                             }}
                             alt="Profile Photo"
                             src={ user.avatar_url }
@@ -122,6 +129,28 @@ const Header: React.FC<HeaderProps> = ({ user, onCreateAppClick }) => {
                     </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>
+            )}
+        </>
     );
 };
 

web/src/components/applications/ApplicationsPage.tsx

@@ -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

web/src/types/index.ts

@@ -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;