Added modals for popups, and fixed root-level bug.

Frontend/src/Components/SettingsPanel.jsx

@@ -24,6 +24,8 @@ import {
   UploadAvatar,
 } from "../Api.js";
 import Switch from "./Switch.jsx";
+import PromptModal from "./PromptModal.jsx";
+import ConfirmModal from "./ConfirmModal.jsx";
 import { PaletteRoles } from "../ThemeRoles.js";
 
 export default function SettingsPanel({
@@ -42,6 +44,8 @@ export default function SettingsPanel({
   const [NewThemeName, SetNewThemeName] = useState("");
   const [NewThemePalette, SetNewThemePalette] = useState(null);
   const [ThemeError, SetThemeError] = useState(null);
+  const [IsRenamingTheme, SetIsRenamingTheme] = useState(false);
+  const [IsConfirmingThemeDelete, SetIsConfirmingThemeDelete] = useState(false);
 
   const [Users, SetUsers] = useState(null);
   const [NewUsername, SetNewUsername] = useState("");
@@ -68,6 +72,7 @@ export default function SettingsPanel({
   const [NewGroupName, SetNewGroupName] = useState("");
   const [GroupError, SetGroupError] = useState(null);
   const [ExpandedGroup, SetExpandedGroup] = useState(null);
+  const [ConfirmingDeleteGroupName, SetConfirmingDeleteGroupName] = useState(null);
 
   useEffect(() => {
     FetchSettings().then(SetSettings);
@@ -127,31 +132,38 @@ export default function SettingsPanel({
     }
   }
 
-  async function HandleRenameTheme() {
-    const NewName = window.prompt("Rename theme to:", Settings.ThemeName);
-    if (!NewName || !NewName.trim() || NewName.trim() === Settings.ThemeName) return;
+  function HandleRenameThemeClick() {
+    SetIsRenamingTheme(true);
+  }
+
+  async function HandleRenameThemeConfirm(NewName) {
+    SetIsRenamingTheme(false);
+    if (NewName === Settings.ThemeName) return;
 
     SetThemeError(null);
     try {
       const Palette = await FetchTheme(Settings.ThemeName);
-      await SaveTheme(NewName.trim(), Palette);
+      await SaveTheme(NewName, Palette);
       await DeleteTheme(Settings.ThemeName);
       const Updated = await FetchThemeNames();
       SetThemeNames(Updated);
-      UpdateField("ThemeName", NewName.trim());
+      UpdateField("ThemeName", NewName);
     } catch (Error) {
       SetThemeError(Error.message);
     }
   }
 
-  async function HandleDeleteTheme() {
+  function HandleDeleteThemeClick() {
     if (ThemeNames.length <= 1) {
       SetThemeError("Can't delete the only remaining theme.");
       return;
     }
 
-    if (!window.confirm(`Delete theme "${Settings.ThemeName}"? This can't be undone.`)) return;
+    SetIsConfirmingThemeDelete(true);
+  }
 
+  async function HandleDeleteThemeConfirm() {
+    SetIsConfirmingThemeDelete(false);
     SetThemeError(null);
     try {
       await DeleteTheme(Settings.ThemeName);
@@ -260,8 +272,13 @@ export default function SettingsPanel({
     }
   }
 
-  async function HandleDeleteGroup(Name) {
-    if (!window.confirm(`Delete group "${Name}"? This can't be undone.`)) return;
+  function HandleDeleteGroupClick(Name) {
+    SetConfirmingDeleteGroupName(Name);
+  }
+
+  async function HandleDeleteGroupConfirm() {
+    const Name = ConfirmingDeleteGroupName;
+    SetConfirmingDeleteGroupName(null);
 
     SetGroupError(null);
     try {
@@ -392,8 +409,8 @@ export default function SettingsPanel({
                 ))}
               </select>
               <div className="SettingsRowInline">
-                <button onClick={HandleRenameTheme}>Rename</button>
-                <button onClick={HandleDeleteTheme}>Delete</button>
+                <button onClick={HandleRenameThemeClick}>Rename</button>
+                <button onClick={HandleDeleteThemeClick}>Delete</button>
               </div>
             </div>
 
@@ -610,8 +627,8 @@ export default function SettingsPanel({
                         >
                           {ExpandedGroup === Group.Name ? "Hide" : "Members"}
                         </button>
-                        {Group.Name !== "Admin" && (
-                          <button onClick={() => HandleDeleteGroup(Group.Name)}>Delete</button>
+                        {Group.Name !== "Admin" && Group.Name !== "Guest" && (
+                          <button onClick={() => HandleDeleteGroupClick(Group.Name)}>Delete</button>
                         )}
                       </div>
                     </div>
@@ -658,6 +675,35 @@ export default function SettingsPanel({
           </button>
         </div>
       </div>
+
+      {IsRenamingTheme && (
+        <PromptModal
+          Title="Rename theme"
+          Label="New name:"
+          InitialValue={Settings.ThemeName}
+          ConfirmLabel="Rename"
+          OnConfirm={HandleRenameThemeConfirm}
+          OnCancel={() => SetIsRenamingTheme(false)}
+        />
+      )}
+      {IsConfirmingThemeDelete && (
+        <ConfirmModal
+          Title="Delete theme"
+          Message={`Delete theme "${Settings.ThemeName}"? This can't be undone.`}
+          ConfirmLabel="Delete"
+          OnConfirm={HandleDeleteThemeConfirm}
+          OnCancel={() => SetIsConfirmingThemeDelete(false)}
+        />
+      )}
+      {ConfirmingDeleteGroupName && (
+        <ConfirmModal
+          Title="Delete group"
+          Message={`Delete group "${ConfirmingDeleteGroupName}"? This can't be undone.`}
+          ConfirmLabel="Delete"
+          OnConfirm={HandleDeleteGroupConfirm}
+          OnCancel={() => SetConfirmingDeleteGroupName(null)}
+        />
+      )}
     </div>
   );
 }