Merge pull request #8835 from ProcessMaker/FOUR-31336

FOUR-31336 | Change on clients adding modal for plainSecret

Author: nolanpro

ProcessMaker/Http/Controllers/Auth/ClientController.php

@@ -65,7 +65,6 @@ public function store(Request $request)
             );
         }
 
-        $client->makeVisible('secret');
         AuthClientCreated::dispatch($client->getAttributes());
 
         return new AuthClientResource($client);

ProcessMaker/Http/Resources/AuthClient.php

@@ -26,7 +26,7 @@ public function toArray($request)
         return [
             'id' => $this->id,
             'name' => $this->name,
-            'secret' => $this->secret,
+            'secret' => $this->plainSecret,
             'redirect' => $this->redirect,
             'revoked' => $this->revoked,
             'types' => $types,

resources/js/admin/auth-clients/components/AuthClientsListing.vue

@@ -33,19 +33,6 @@
             :divider="true"
           />
         </template>
-        <template slot="secret" slot-scope="props">
-          <b-btn
-            variant="link"
-            class="copylink"
-            @click="copySecret(props.rowData.secret)"
-            v-b-tooltip.hover
-            :title="$t('Copy Client Secret To Clipboard')"
-            v-uni-aria-describedby="props.rowData.id.toString()"
-          >
-            <i class="fas fa-clipboard fa-lg fa-fw"></i>
-          </b-btn>
-          {{ props.rowData.secret.substr(0, 10) }}...
-        </template>
       </vuetable>
       <pagination
         :single="$t('Auth Client')"
@@ -55,7 +42,6 @@
         @vuetable-pagination:change-page="onPageChange"
         ref="pagination"
       ></pagination>
-      <textarea class="copytext" ref="copytext"></textarea>
     </div>
   </div>
 </template>
@@ -73,7 +59,6 @@ export default {
   props: ["filter", "permission"],
   data() {
     return {
-      copytext: "",
       sortOrder: [
         {
           field: "name",
@@ -101,10 +86,6 @@ export default {
             return val.substr(0, 20) + "...";
           },
         },
-        {
-          title: () => this.$t("Client Secret"),
-          name: "__slot:secret",
-        },
         {
           name: "__slot:actions",
           title: "",
@@ -129,8 +110,7 @@ export default {
         data = data.filter((item) => {
           return (
             item.name.toLowerCase().indexOf(this.filter.toLowerCase()) > -1 ||
-            item.redirect.toLowerCase().indexOf(this.filter.toLowerCase()) > -1 ||
-            item.secret.toLowerCase().indexOf(this.filter.toLowerCase()) > -1
+            item.redirect.toLowerCase().indexOf(this.filter.toLowerCase()) > -1
           );
         });
       }
@@ -184,11 +164,6 @@ export default {
       }
       this.fetch();
     },
-    copySecret(secret) {
-      this.$refs.copytext.value = secret;
-      this.$refs.copytext.select();
-      document.execCommand("copy");
-    },
     onNavigate(action, data) {
       switch (action.value) {
         case 'edit-item':
@@ -223,15 +198,3 @@ export default {
   },
 };
 </script>
-
-<style>
-.copytext {
-  position: absolute;
-  left: -1000px;
-  top: -1000px;
-}
-
-.copylink {
-  padding: 0;
-}
-</style>

resources/lang/en.json

@@ -474,6 +474,7 @@
   "Copy Control": "Copy Control",
   "Copy Element": "Copy Element",
   "Copy link": "Copy link",
+  "Copy Secret To Clipboard": "Copy Secret To Clipboard",
   "Copy Screen": "Copy Screen",
   "Copy Script": "Copy Script",
   "Copy this URL into your Atlassian authorization settings": "Copy this URL into your Atlassian authorization settings",
@@ -498,6 +499,7 @@
   "Create an Inbox Rule Now": "Create an Inbox Rule Now",
   "Create Auth Clients": "Create Auth Clients",
   "Create AuthClients": "Create Auth-Clients",
+  "Create Auth-Client": "Create Auth-Client",
   "Create Bundle": "Create Bundle",
   "Create Categories": "Create Categories",
   "Create Category": "Create Category",
@@ -2361,6 +2363,7 @@
   "This file is password protected. Enter the password below to continue with the import.": "This file is password protected. Enter the password below to continue with the import.",
   "This is a Beta version and when using Quickfill, it may replace the pre-filled information in the form.": "This is a Beta version and when using Quickfill, it may replace the pre-filled information in the form.",
   "This is an AI feature and can provide inaccurate or biased responses.": "This is an AI feature and can provide inaccurate or biased responses.",
+  "This is the only time you will be able to view the client secret. Keep it in a safe place.": "This is the only time you will be able to view the client secret. Keep it in a safe place.",
   "This is your security code: :code": "This is your security code: :code",
   "This may cause validation errors during submission.": "This may cause validation errors during submission.",
   "This must be valid JSON": "This must be valid JSON",

resources/lang/es.json

@@ -455,6 +455,7 @@
   "Copy Control": "Control de copia",
   "Copy Element": "Copiar elemento",
   "Copy link": "Copiar enlace",
+  "Copy Secret To Clipboard": "Copiar secreto al portapapeles",
   "Copy Screen": "Copiar pantalla",
   "Copy Script": "Copiar script",
   "Copy this URL into your Atlassian authorization settings": "Copie esta URL en su configuración de autorización de Atlassian",
@@ -474,6 +475,7 @@
   "Create a new Process": "Crea un nuevo Proceso",
   "Create a Project": "Crea un Proyecto",
   "Create An Auth-Client": "Crear un cliente autenticado",
+  "Create Auth-Client": "Crear cliente autenticado",
   "Create an Inbox Rule Now": "Crea una Regla de Bandeja de Entrada Ahora",
   "Create Auth Clients": "Crear clientes de autenticación",
   "Create AuthClients": "Crear clientes autenticados",
@@ -2293,6 +2295,7 @@
   "This file is password protected. Enter the password below to continue with the import.": "Este archivo está protegido con contraseña. Ingrese la contraseña a continuación para continuar con la importación.",
   "This is a Beta version and when using Quickfill, it may replace the pre-filled information in the form.": "Esta es una versión Beta y al usar Quickfill, puede reemplazar la información previamente llenada en el formulario.",
   "This is an AI feature and can provide inaccurate or biased responses.": "Esta es una función de IA y puede proporcionar respuestas inexactas o sesgadas.",
+  "This is the only time you will be able to view the client secret. Keep it in a safe place.": "Esta es la única vez que podrás ver el secreto del cliente. Manténgalo en un lugar seguro.",
   "This is your security code: :code": "This is your security code: :code",
   "This may cause validation errors during submission.": "Esto puede causar errores de validación durante la presentación.",
   "This must be valid JSON": "Este debe ser un JSON válido",

resources/views/admin/auth-clients/index.blade.php

@@ -40,6 +40,26 @@
               </div>
             </b-form-checkbox-group>
         </pm-modal>
+        <pm-modal ref="secretModal" id="secretModal" :title="secretTitle" style="display: none;"
+        :set-custom-buttons="true"
+        :custom-buttons="customModalButtons"
+        @close="hideSecretModal">
+            <div class="form-group">
+                <label for="secret">{{__('Secret')}}</label>
+                <div class="input-group">
+                    <input readonly disabled type="text" class="form-control" id="secret" v-model="secret">
+                    <div class="input-group-append">
+                        <button type="button" class="btn btn-primary" @click="copySecret(secret)" v-b-tooltip.hover :title="$t('Copy Secret To Clipboard')">
+                            <i class="fa-lg fas fa-copy" aria-hidden="true"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="tw-flex tw-items-start tw-gap-3 tw-p-3 tw-mt-3 tw-rounded-lg tw-border tw-border-amber-300 tw-bg-amber-50 tw-text-amber-900" role="alert">
+                <i class="fas fa-exclamation-triangle tw-text-amber-500 tw-mt-0.5 tw-shrink-0" aria-hidden="true"></i>
+                <p class="tw-text-sm tw-m-0">{{ __('This is the only time you will be able to view the client secret. Keep it in a safe place.') }}</p>
+            </div>
+        </pm-modal>
 
         <div class="px-3 page-content">
             <div id="search-bar" class="search mb-3" vcloak>
@@ -66,7 +86,6 @@
                 <auth-clients-listing ref="authClientList" :permission="{{ \Auth::user()->hasPermissionsFor('auth_clients') }}" :filter="filter" @edit="edit"/>
             </div>
         </div>
-
     </div>
 @endsection
 
@@ -88,8 +107,12 @@
           errors: null,
           disabled: false,
           title:'',
+          secretTitle:'',
+          customModalButtons: [],
+          secret: "",
         },
         beforeMount() {
+          this.initCustomModalButtons();
           this.resetValues();
         },
         methods: {
@@ -120,8 +143,14 @@
               data: this.authClient,
             }).then(response => {
               this.$refs.createEditAuthClient.hide();
-              this.$refs.authClientList.fetch();
               this.loading = false;
+              if (response.data.secret) {
+                this.secret = response.data.secret
+                this.$refs.secretModal.show();
+              }
+              else {
+                this.$refs.authClientList.fetch();
+              }
               ProcessMaker.alert(this.$t("The auth client was ") + verb + ".", this.$t("success"))
             }).catch(error => {
               this.disabled = false;
@@ -130,6 +159,7 @@
           },
           resetValues() {
             this.title = this.$t('Create Auth-Client')
+            this.secretTitle = this.$t('Copy Secret To Clipboard')
             this.authClient = {
               id: null,
               name: "",
@@ -143,12 +173,35 @@
               types: null
             };
             this.disabled = false;
+            this.initCustomModalButtons();
           },
           edit(item) {
             this.title = this.$t('Edit Auth Client');
             this.authClient = item;
             this.$refs.createEditAuthClient.show();
-          }
+          },
+          initCustomModalButtons() {
+            this.customModalButtons = [
+              {
+                content: "Close",
+                action: "close",
+                variant: "secondary",
+                disabled: false,
+                hidden: false,
+              },
+            ];
+          },
+          hideSecretModal() {
+            this.$refs.secretModal.hide();
+            this.$refs.authClientList.fetch();
+          },
+          copySecret(secret) {
+            navigator.clipboard.writeText(secret).then(() => {
+              ProcessMaker.alert(this.$t("Secret copied to clipboard."), "success");
+            }, () => {
+              ProcessMaker.alert(this.$t("Secret not copied to clipboard."), "danger");
+            });
+          },
         },
       })
     </script>