wip: clenup of legacy self admin edit ui

tabarra · Dec 9, 2023 · 0ebabd5 · 0ebabd5
1 parent 5043d43
commit 0ebabd5
Show file tree

Hide file tree

Showing 13 changed files with 82 additions and 234 deletions.
diff --git a/core/webroutes/adminManager/actions.ts b/core/webroutes/adminManager/actions.ts
@@ -161,17 +161,19 @@ async function handleEdit(ctx: AuthedCtx) {
     const name = ctx.request.body.name.trim();
     const citizenfxID = ctx.request.body.citizenfxID.trim();
     const discordID = ctx.request.body.discordID.trim();
-    const editingSelf = (ctx.admin.name.toLowerCase() === name.toLowerCase());
+
+    //Check if editing himself
+    if (ctx.admin.name.toLowerCase() === name.toLowerCase()) {
+        return ctx.send({type: 'danger', message: '(ERR0) You cannot edit yourself.'});
+    }
+
+    //Validate & translate permissions
     let permissions;
-    if (!editingSelf) {
-        if (Array.isArray(ctx.request.body.permissions)) {
-            permissions = ctx.request.body.permissions.filter((x: unknown) => typeof x === 'string');
-            if (permissions.includes('all_permissions')) permissions = ['all_permissions'];
-        } else {
-            permissions = [];
-        }
+    if (Array.isArray(ctx.request.body.permissions)) {
+        permissions = ctx.request.body.permissions.filter((x: unknown) => typeof x === 'string');
+        if (permissions.includes('all_permissions')) permissions = ['all_permissions'];
     } else {
-        permissions = undefined;
+        permissions = [];
     }
 
     //Validate & translate FiveM ID
@@ -256,7 +258,7 @@ async function handleDelete(ctx: AuthedCtx) {
     }
     const name = ctx.request.body.name.trim();
 
-    //Check if editing himself
+    //Check if deleting himself
     if (ctx.admin.name.toLowerCase() === name.toLowerCase()) {
         return ctx.send({type: 'danger', message: "You can't delete yourself."});
     }

diff --git a/core/webroutes/adminManager/getModal.ts b/core/webroutes/adminManager/getModal.ts
@@ -64,7 +64,6 @@ export default async function AdminManagerGetModal(ctx: AuthedCtx) {
         const [permsGeneral, permsMenu] = getPerms([], allPermissions);
         const renderData = {
             isNewAdmin: true,
-            editingSelf: false,
             username: '',
             citizenfx_id: '',
             discord_id: '',
@@ -98,7 +97,6 @@ export default async function AdminManagerGetModal(ctx: AuthedCtx) {
         username: admin.name,
         citizenfx_id: (admin.providers.citizenfx) ? admin.providers.citizenfx.id : '',
         discord_id: (admin.providers.discord) ? admin.providers.discord.id : '',
-        editingSelf: (ctx.admin.name.toLowerCase() === name.toLowerCase()),
         permsGeneral,
         permsMenu,
     };

diff --git a/core/webroutes/adminManager/page.ts b/core/webroutes/adminManager/page.ts
@@ -25,14 +25,16 @@ export default async function AdminManagerPage(ctx: AuthedCtx) {
         } else {
             perms = '1 permission';
         }
+        const isSelf = ctx.admin.name.toLowerCase() === admin.name.toLowerCase();
 
         return {
             hasCitizenFX: (admin.providers.includes('citizenfx')),
             hasDiscord: (admin.providers.includes('discord')),
             name: admin.name,
             perms: perms,
+            isSelf,
             disableEdit: !ctx.admin.isMaster && admin.master,
-            disableDelete: (admin.master || ctx.admin.name.toLowerCase() === admin.name.toLowerCase()),
+            disableDelete: (admin.master || isSelf),
         };
     });
 

diff --git a/docs/dev_notes.md b/docs/dev_notes.md
@@ -82,8 +82,8 @@ Processo:
     - [ ][3d] "your account" modal
         - [x] if isTempPassword change message and disallows closing before changing the password
         - [ ] give the chance to change modifiers
-        - [ ] remove legacy header + change password code
-        - [ ] admin manager should open "my account" when trying to edit self
+        - [x] remove legacy header + change password code
+        - [x] admin manager should open "my account" when trying to edit self
         - [ ] maybe separate the backend routes
     - [ ][3d] playerlist
     - [ ][1d] add the new logos to shell+auth pages

diff --git a/panel/src/hooks/dialogs.ts b/panel/src/hooks/dialogs.ts
@@ -21,6 +21,15 @@ export const useAccountModal = () => {
     }
 }
 
+export const useOpenAccountModal = () => {
+    const setAccountModalOpen = useSetAtom(accountModalOpenAtom);
+    const setAccountModalTab = useSetAtom(accountModalTabAtom);
+    return (tab?: string) => {
+        setAccountModalOpen(true);
+        if (tab) setAccountModalTab(tab);
+    }
+}
+
 
 
 /**

diff --git a/panel/src/layout/Header.tsx b/panel/src/layout/Header.tsx
@@ -137,8 +137,8 @@ function AuthedHeaderFragment() {
                 />
             </DropdownMenuTrigger>
             <DropdownMenuContent>
-                <DropdownMenuLabel>My Account</DropdownMenuLabel>
-                <DropdownMenuSeparator />
+                {/* <DropdownMenuLabel>Your Account</DropdownMenuLabel>
+                <DropdownMenuSeparator /> */}
 
                 <DropdownMenuItem className="cursor-pointer" onClick={switchTheme}>
                     <span className="hidden dark:flex items-center">
@@ -175,8 +175,8 @@ export function Header() {
                 <div className="flex flex-row items-center flex-grow gap-5 mr-5">
                     <div className="w-sidebar hidden xl:flex justify-center">
                         <span
-                        className="h-7 w-36 bg-accent text-accent-foreground rounded text-center p-0.5 font-bold tracking-widest"
-                        title={`tx: v${window.txConsts.txaVersion} | fx: b${window.txConsts.fxsVersion}`}
+                            className="h-7 w-36 bg-accent text-accent-foreground rounded text-center p-0.5 font-bold tracking-widest"
+                            title={`tx: v${window.txConsts.txaVersion} | fx: b${window.txConsts.fxsVersion}`}
                         >FULL LOGO</span>
                     </div>
                     <div className="h-8 w-8 lg:h-10 lg:w-10 rounded hidden sm:max-xl:block bg-accent text-accent-foreground text-center">

diff --git a/panel/src/layout/MainShell.tsx b/panel/src/layout/MainShell.tsx
@@ -18,14 +18,18 @@ import ConfirmDialog from '@/components/ConfirmDialog';
 import PromptDialog from '@/components/PromptDialog';
 import TxToaster, { txToast } from '../components/TxToaster';
 import AccountDialog from '@/components/AccountDialog';
+import { useOpenAccountModal } from '@/hooks/dialogs';
 
 
 export default function MainShell() {
     useAtomValue(pageTitleWatcher);
     const expireSession = useExpireAuthData();
+    const openAccountModal = useOpenAccountModal();
     useEventListener('message', (e: MessageEventFromIframe) => {
         if (e.data.type === 'logoutNotice') {
             expireSession('child iframe');
+        } else if (e.data.type === 'openYourAccountModal') {
+            openAccountModal();
         }
     });
 

diff --git a/web/main/adminManager.ejs b/web/main/adminManager.ejs
@@ -85,26 +85,33 @@
                                 </td>
                                 <td><%= admin.perms %></td>
                                 <td class="tableActions">
-                                    <% if (admin.disableEdit) { %>
-                                        <button class="btn btn-sm btn-outline-secondary" disabled>
-                                            <i class="icon-pencil"></i> Edit
-                                        </button>
-                                    <% } else { %>
+                                    <% if (admin.isSelf) { %>
                                         <button class="btn btn-sm btn-outline-primary"
-                                            onclick="getAdminModal('<%= admin.name %>')">
-                                            <i class="icon-pencil"></i> Edit
-                                        </button>
-                                    <% } %>
-                                    &nbsp;
-                                    <% if (admin.disableDelete) { %>
-                                        <button class="btn btn-sm btn-outline-secondary" disabled>
-                                            <i class="icon-trash"></i> Delete
+                                            onclick="openYourAccountModal()">
+                                            <i class="icon-pencil"></i> Your Account
                                         </button>
                                     <% } else { %>
-                                        <button class="btn btn-sm btn-outline-danger"
-                                            onclick="deleteAdmin('<%= admin.name %>')">
-                                            <i class="icon-trash"></i> Delete
-                                        </button>
+                                        <% if (admin.disableEdit) { %>
+                                            <button class="btn btn-sm btn-outline-secondary" disabled>
+                                                <i class="icon-pencil"></i> Edit
+                                            </button>
+                                        <% } else { %>
+                                            <button class="btn btn-sm btn-outline-primary"
+                                                onclick="getAdminModal('<%= admin.name %>')">
+                                                <i class="icon-pencil"></i> Edit
+                                            </button>
+                                        <% } %>
+                                        &nbsp;
+                                        <% if (admin.disableDelete) { %>
+                                            <button class="btn btn-sm btn-outline-secondary" disabled>
+                                                <i class="icon-trash"></i> Delete
+                                            </button>
+                                        <% } else { %>
+                                            <button class="btn btn-sm btn-outline-danger"
+                                                onclick="deleteAdmin('<%= admin.name %>')">
+                                                <i class="icon-trash"></i> Delete
+                                            </button>
+                                        <% } %>
                                     <% } %>
                                 </td>
                             </tr>
@@ -194,6 +201,11 @@
     }
 
     
+    //============================================== Show Your Account Modal
+    function openYourAccountModal() {
+        window.parent.postMessage({ type: 'openYourAccountModal' });
+    }
+
     //============================================== Show Admin Modal
     function getAdminModal(name){
         let modalType, data;

diff --git a/web/parts/adminModal.ejs b/web/parts/adminModal.ejs
@@ -53,33 +53,27 @@
     <h5>Permissions</h5>
 </div>
 <div class="form-group row">
-    <% if (editingSelf) { %>
-        <div class="col-sm-12 text-center pt-2">
-            <h5 class="text-secondary">you cannot edit your own permissions</h5>
+    <div class="col-sm-6">
+        <% for (const [key, perm] of permsMenu.entries()) { %>
+        <div class="form-check checkbox">
+            <input class="form-check-input permsCheckbox" id="modAdmin-permsMenu-<%= perm.id %>-<%= key %>"
+                type="checkbox" name="modAdmin-permissions[]" value="<%= perm.id %>" <%= perm.checked %>>
+            <label class="form-check-label <%= perm.dangerous ? 'text-danger' : '' %>" 
+                for="modAdmin-permsMenu-<%= perm.id %>-<%= key %>" alt="sdfsdf sdf sdfsdfs">
+                <%= perm.desc %>
+            </label>
         </div>
-    <% } else { %>
-        <div class="col-sm-6">
-            <% for (const [key, perm] of permsMenu.entries()) { %>
-            <div class="form-check checkbox">
-                <input class="form-check-input permsCheckbox" id="modAdmin-permsMenu-<%= perm.id %>-<%= key %>"
-                    type="checkbox" name="modAdmin-permissions[]" value="<%= perm.id %>" <%= perm.checked %>>
-                <label class="form-check-label <%= perm.dangerous ? 'text-danger' : '' %>" 
-                    for="modAdmin-permsMenu-<%= perm.id %>-<%= key %>" alt="sdfsdf sdf sdfsdfs">
-                    <%= perm.desc %>
-                </label>
-            </div>
-            <% } %>
-        </div>
-        <div class="col-sm-6">
-            <% for (const [key, perm] of permsGeneral.entries()) { %>
-            <div class="form-check checkbox">
-                <input class="form-check-input permsCheckbox" id="modAdmin-permsGeneral-<%= perm.id %>-<%= key %>" type="checkbox" name="modAdmin-permissions[]"
-                    value="<%= perm.id %>" <%= perm.checked %>>
-                <label class="form-check-label <%= perm.dangerous ? 'text-danger' : '' %>" for="modAdmin-permsGeneral-<%= perm.id %>-<%= key %>"><%= perm.desc %></label>
-            </div>
-            <% } %>
+        <% } %>
+    </div>
+    <div class="col-sm-6">
+        <% for (const [key, perm] of permsGeneral.entries()) { %>
+        <div class="form-check checkbox">
+            <input class="form-check-input permsCheckbox" id="modAdmin-permsGeneral-<%= perm.id %>-<%= key %>" type="checkbox" name="modAdmin-permissions[]"
+                value="<%= perm.id %>" <%= perm.checked %>>
+            <label class="form-check-label <%= perm.dangerous ? 'text-danger' : '' %>" for="modAdmin-permsGeneral-<%= perm.id %>-<%= key %>"><%= perm.desc %></label>
         </div>
-    <% } %>
+        <% } %>
+    </div>
 </div>
 
 <!-- Just signaling for the save action -->

diff --git a/web/parts/changePasswordModal.ejs b/web/parts/changePasswordModal.ejs
diff --git a/web/parts/footer.ejs b/web/parts/footer.ejs
@@ -7,7 +7,6 @@
 
 
 <%- await include('parts/playerInfoModal.ejs', locals) %>
-<%- await include('parts/changePasswordModal.ejs', locals) %>
 
     <!-- CoreUI and necessary plugins-->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" 

diff --git a/web/parts/header.ejs b/web/parts/header.ejs
@@ -76,43 +76,6 @@
 
     <!-- Center Content -->
     <div class="c-wrapper c-fixed-components">
-        <!-- Header -->
-        <% if (isWebInterface) { %>
-            <header class="c-header c-header-light c-header-fixed c-header-with-subheader">
-                <ul class="c-header-nav ml-auto mr-4">
-                    <li class="c-header-nav-item dropdown">
-                        <a class="c-header-nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
-                            aria-expanded="false">
-                            <span class="d-md-down-none pr-2"><%= adminUsername %> </span>
-                            <div class="c-avatar">
-                                <img class="c-avatar-img profile-pic" src="<%= profilePicture %>" alt="<%= adminUsername %>">
-                            </div>
-                        </a>
-                        <div class="dropdown-menu dropdown-menu-right pt-0">
-                            <div class="dropdown-header py-2">
-                                <strong>Account</strong>
-                            </div>
-                            <a class="dropdown-item" href="" onclick="changeOwnPasswordModal(); return false;">
-                                <svg class="c-icon mr-2">
-                                    <use href="img/coreui_icons.svg#cil-lock-locked"></use>
-                                </svg> Change password
-                            </a>
-                            <a class="dropdown-item" href="auth?logout">
-                                <svg class="c-icon mr-2">
-                                    <use href="img/coreui_icons.svg#cil-account-logout"></use>
-                                </svg> Logout
-                            </a>
-                        </div>
-                    </li>
-                </ul>
-                <button class="c-header-toggler c-class-toggler d-xl-none" type="button" data-target="#plist"
-                    data-class="playerlist-sidebar-max">
-                    <svg class="c-icon c-icon-lg">
-                        <use href="img/coreui_icons.svg#cil-menu"></use>
-                    </svg>
-                </button>
-            </header>
-        <% } %> <%# end if(isWebInterface) %>
 
         <!-- Actual Body -->
         <div class="c-body">