From 9202ce1ea3d98d43e7d085a7f59ca872741dcb3c Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Sun, 18 Aug 2024 17:20:36 +0800
Subject: [PATCH] more permission control implemented in ux

---
 addon/components/modals/api-key-form.hbs      | 22 ++++++++-----------
 .../components/modals/rename-api-key-form.hbs |  1 +
 addon/components/modals/roll-api-key-form.hbs |  2 ++
 addon/controllers/api-keys/index.js           |  6 +++++
 4 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/addon/components/modals/api-key-form.hbs b/addon/components/modals/api-key-form.hbs
index f189a41..49433a5 100644
--- a/addon/components/modals/api-key-form.hbs
+++ b/addon/components/modals/api-key-form.hbs
@@ -1,21 +1,17 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}} as |options|>
     <div class="modal-body-container">
-        <div class="input-group">
-            <label>
-                {{t "developers.common.name"}}
-            </label>
-            <Input
-                @value={{options.apiKey.name}}
-                @type="text"
-                aria-label={{t "developers.component.modals.api-key-form.api-name-aria-label"}}
-                class="w-full form-input"
-                placeholder={{t "developers.component.modals.api-key-form.name-placeholder"}}
-            />
-        </div>
+        <InputGroup
+            @name={{t "developers.common.name"}}
+            @value={{options.apiKey.name}}
+            @placeholder={{t "developers.component.modals.api-key-form.name-placeholder"}}
+            @disabled={{cannot @options.formPermission}}
+            aria-label={{t "developers.component.modals.api-key-form.api-name-aria-label"}}
+            class="w-full form-input"
+        />
         <div class="input-group">
             <InputLabel @labelText={{t "developers.component.modals.api-key-form.expiration-label"}} @helpText={{t "developers.component.modals.api-key-form.expiration-help-text"}} />
 
-            <select class="w-full mb-1 form-select" aria-label={{t "developers.component.modals.api-key-form.api-expiration-aria-label"}} {{on "change" @options.setExpiration}}>
+            <select class="w-full mb-1 form-select" disabled={{cannot @options.formPermission}} aria-label={{t "developers.component.modals.api-key-form.api-expiration-aria-label"}} {{on "change" @options.setExpiration}}>
                 <option selected disabled>
                     {{t "developers.component.modals.api-key-form.select-expiration-date"}}
                 </option>
diff --git a/addon/components/modals/rename-api-key-form.hbs b/addon/components/modals/rename-api-key-form.hbs
index c8c089a..bea7254 100644
--- a/addon/components/modals/rename-api-key-form.hbs
+++ b/addon/components/modals/rename-api-key-form.hbs
@@ -10,6 +10,7 @@
                 aria-label={{t "developers.component.modals.rename-api-key-form.api-key-label"}}
                 class="w-full form-input"
                 placeholder={{t "developers.component.modals.rename-api-key-form.api-key-placeholder"}}
+                disabled={{cannot @options.formPermission}}
             />
         </div>
     </div>
diff --git a/addon/components/modals/roll-api-key-form.hbs b/addon/components/modals/roll-api-key-form.hbs
index d2732f5..76ab83b 100644
--- a/addon/components/modals/roll-api-key-form.hbs
+++ b/addon/components/modals/roll-api-key-form.hbs
@@ -44,6 +44,7 @@
                 <select
                     class="w-full mb-2 form-select form-input-sm"
                     aria-label={{t "developers.component.modals.roll-api-key-form.api-key-expiration-label"}}
+                    disabled={{cannot @options.formPermission}}
                     {{on "change" @options.setExpiration}}
                 >
                     <option selected disabled>
@@ -89,6 +90,7 @@
                 aria-label={{t "developers.component.modals.roll-api-key-form.user-password"}}
                 placeholder={{t "developers.component.modals.roll-api-key-form.user-password-placeholder"}}
                 class="w-full form-input"
+                disabled={{cannot @options.formPermission}}
             />
         </div>
     </div>
diff --git a/addon/controllers/api-keys/index.js b/addon/controllers/api-keys/index.js
index 3bf9f12..9e2ee69 100644
--- a/addon/controllers/api-keys/index.js
+++ b/addon/controllers/api-keys/index.js
@@ -346,6 +346,8 @@ export default class ApiKeysIndexController extends Controller {
 
         this.modalsManager.show('modals/rename-api-key-form', {
             title: this.intl.t('developers.api-keys.index.rename-api-key-title', { apiKeyName }),
+            acceptButtonDisabled: this.abilities.cannot(formPermission),
+            acceptButtonHelpText: this.abilities.cannot(formPermission) ? this.intl.t('common.unauthorized') : null,
             apiKey,
             formPermission,
             confirm: async modal => {
@@ -411,12 +413,15 @@ export default class ApiKeysIndexController extends Controller {
      * @void
      */
     @action rollApiKey (apiKey) {
+        const formPermission = 'developers roll api-key';
         const apiKeyName = getWithDefault(apiKey, 'name', this.intl.t('developers.api-keys.index.untitled'));
 
         this.modalsManager.show('modals/roll-api-key-form', {
             title: this.intl.t('developers.api-keys.index.roll-api-key', { apiKeyName }),
             modalClass: 'roll-key-modal',
             acceptButtonText: this.intl.t('developers.api-keys.index.roll-api-key-button-text'),
+            acceptButtonDisabled: this.abilities.cannot(formPermission),
+            acceptButtonHelpText: this.abilities.cannot(formPermission) ? this.intl.t('common.unauthorized') : null,
             user: this.currentUser.user,
             expirationOptions: this.expirationOptions,
             setExpiration: ({ target }) => {
@@ -424,6 +429,7 @@ export default class ApiKeysIndexController extends Controller {
             },
             viewRequestLogs: this.viewRequestLogs,
             password: null,
+            formPermission,
             apiKey,
             confirm: async modal => {
                 modal.startLoading();