From ae12a6cd7cabe2a67920edbd63ec905fe368abf3 Mon Sep 17 00:00:00 2001
From: itzaname <me@sliving.io>
Date: Sat, 28 Jun 2025 00:40:39 -0400
Subject: [PATCH] Add ui support for displaying disabled accounts

---
 web/src/App.tsx                               |   1 +
 web/src/components/Header.tsx                 | 161 +++++++++++-------
 .../applications/ApplicationsPage.tsx         |  12 +-
 web/src/types/index.ts                        |   1 +
 4 files changed, 105 insertions(+), 70 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index ef06d64..83fbfbc 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -36,6 +36,7 @@ const AppUI = ({ user }: { user: UserInfo }) => {
             <Header user={user} onCreateAppClick={openCreateDialog} />
 
             <ApplicationsPage
+                user={user}
                 permissions={user.permissions}
             />
 
diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
index d4e998f..aa29d72 100644
--- a/web/src/components/Header.tsx
+++ b/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,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>
-                
-                {/* 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
+        <>
+            <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} />
+                    
+                    <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>
+            )}
+        </>
     );
 };
 
diff --git a/web/src/components/applications/ApplicationsPage.tsx b/web/src/components/applications/ApplicationsPage.tsx
index 06d8a89..7759d55 100644
--- a/web/src/components/applications/ApplicationsPage.tsx
+++ b/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
diff --git a/web/src/types/index.ts b/web/src/types/index.ts
index 17a5766..b43faca 100644
--- a/web/src/types/index.ts
+++ b/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;