add remove access reminder for Users

typescript/frontend-marios2/src/content/dashboards/ManageAccess/UserAccess.tsx

@@ -82,6 +82,13 @@ function UserAccess(props: UserAccessProps) {
   const [openFolder, setOpenFolder] = useState(false);
   const [openModal, setOpenModal] = useState(false);
 
+  // Pending access revoke awaiting confirmation (folder or direct installation)
+  const [revokeTarget, setRevokeTarget] = useState<{
+    type: 'folder' | 'installation';
+    id: number;
+    name: string;
+  } | null>(null);
+
   const [selectedFolderNames, setSelectedFolderNames] = useState<string[]>([]);
   const [selectedInstallations, setSelectedInstallations] = useState<I_Installation[]>([]);
 
@@ -248,6 +255,16 @@ function UserAccess(props: UserAccessProps) {
       });
   };
 
+  const confirmRevoke = () => {
+    if (!revokeTarget) return;
+    if (revokeTarget.type === 'folder') {
+      handleRevokeFolder(revokeTarget.id, revokeTarget.name);
+    } else {
+      handleRevokeInstallation(revokeTarget.id);
+    }
+    setRevokeTarget(null);
+  };
+
   const handleSubmit = async () => {
     for (const folderName of selectedFolderNames) {
       const folder = availableFolders.find((f) => f.name === folderName);
@@ -405,6 +422,66 @@ function UserAccess(props: UserAccessProps) {
             </Box>
           </Modal>
 
+          {/* Revoke Access Confirmation Modal */}
+          <Modal
+            open={revokeTarget !== null}
+            onClose={() => setRevokeTarget(null)}
+            aria-labelledby="revoke-confirm-modal"
+          >
+            <Box
+              sx={{
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-50%, -50%)',
+                width: 350,
+                bgcolor: 'background.paper',
+                borderRadius: 4,
+                boxShadow: 24,
+                p: 4,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center'
+              }}
+            >
+              <Typography variant="body1" gutterBottom sx={{ fontWeight: 'bold', textAlign: 'center' }}>
+                <FormattedMessage
+                  id="confirmRevokeAccess"
+                  defaultMessage='Do you want to remove access to "{name}"?'
+                  values={{ name: revokeTarget?.name ?? '' }}
+                />
+              </Typography>
+
+              <div style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
+                <Button
+                  sx={{
+                    marginTop: 2,
+                    textTransform: 'none',
+                    bgcolor: '#ffc04d',
+                    color: '#111111',
+                    '&:hover': { bgcolor: '#f7b34d' }
+                  }}
+                  onClick={confirmRevoke}
+                >
+                  <FormattedMessage id="delete" defaultMessage="Delete" />
+                </Button>
+                <Button
+                  sx={{
+                    marginTop: 2,
+                    marginLeft: 2,
+                    textTransform: 'none',
+                    bgcolor: '#ffc04d',
+                    color: '#111111',
+                    '&:hover': { bgcolor: '#f7b34d' }
+                  }}
+                  onClick={() => setRevokeTarget(null)}
+                >
+                  <FormattedMessage id="cancel" defaultMessage="Cancel" />
+                </Button>
+              </div>
+            </Box>
+          </Modal>
+
           <Button
             variant="contained"
             onClick={handleGrantAccess}
@@ -437,7 +514,12 @@ function UserAccess(props: UserAccessProps) {
                         {isExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
                       </IconButton>
                       {currentUser.userType === UserType.admin && (
-                        <IconButton onClick={() => handleRevokeFolder(folder.id, folder.name)} edge="end">
+                        <IconButton
+                          onClick={() =>
+                            setRevokeTarget({ type: 'folder', id: folder.id, name: folder.name })
+                          }
+                          edge="end"
+                        >
                           <PersonRemoveIcon />
                         </IconButton>
                       )}
@@ -529,7 +611,16 @@ function UserAccess(props: UserAccessProps) {
                   sx={{ mb: isLast ? 4 : 0 }}
                   secondaryAction={
                     currentUser.userType === UserType.admin && (
-                      <IconButton onClick={() => handleRevokeInstallation(installation.id)} edge="end">
+                      <IconButton
+                        onClick={() =>
+                          setRevokeTarget({
+                            type: 'installation',
+                            id: installation.id,
+                            name: installation.name
+                          })
+                        }
+                        edge="end"
+                      >
                         <PersonRemoveIcon />
                       </IconButton>
                     )

typescript/frontend-marios2/src/lang/de.json

@@ -181,6 +181,7 @@
   "unableToLoadData": "Daten können nicht geladen werden",
   "unableToRevokeAccess": "Der Zugriff konnte nicht widerrufen werden",
   "revokedAccessFromUser": "Zugriff vom Benutzer widerrufen",
+  "confirmRevokeAccess": "Möchten Sie den Zugriff auf \"{name}\" entfernen?",
   "Show Errors": "Fehler anzeigen",
   "Show Warnings": "Warnungen anzeigen",
   "lastSeen": "Zuletzt gesehen",

typescript/frontend-marios2/src/lang/en.json

@@ -163,6 +163,7 @@
   "unableToLoadData": "Unable to load data",
   "unableToRevokeAccess": "Unable to revoke access",
   "revokedAccessFromUser": "Revoked access from user: ",
+  "confirmRevokeAccess": "Do you want to remove access to \"{name}\"?",
   "Show Errors": "Show Errors",
   "Show Warnings": "Show Warnings",
   "lastSeen": "Last seen",

typescript/frontend-marios2/src/lang/fr.json

@@ -175,6 +175,7 @@
   "unableToLoadData": "Impossible de charger les données",
   "unableToRevokeAccess": "Impossible de révoquer l'accès",
   "revokedAccessFromUser": "Accès révoqué de l'utilisateur",
+  "confirmRevokeAccess": "Voulez-vous retirer l'accès à « {name} » ?",
   "Show Errors": "Afficher les erreurs",
   "Show Warnings": "Afficher les avertissements",
   "lastSeen": "Dernière connexion",

typescript/frontend-marios2/src/lang/it.json

@@ -163,6 +163,7 @@
   "unableToLoadData": "Impossibile caricare i dati",
   "unableToRevokeAccess": "Impossibile revocare l'accesso",
   "revokedAccessFromUser": "Accesso revocato all'utente: ",
+  "confirmRevokeAccess": "Vuoi rimuovere l'accesso a \"{name}\"?",
   "alarms": "Allarmi",
   "overview": "Panoramica",
   "manage": "Gestione accessi",