[9.x] Implement secret modal (#1258)

* Implement secret modal

* Add upgrade note on vue assets

* Revert change

* Update UPGRADE.md

Co-authored-by: Taylor Otwell <[email protected]>

Author: driesvints

UPGRADE.md

@@ -1,5 +1,11 @@
 # Upgrade Guide
 
+## General Notes
+
+After updating Passport, you should always re-publish and re-compile the Vue "quickstart" assets if you're using them:
+
+    php artisan vendor:publish --tag=passport-views --force
+
 ## Upgrading To 9.0 From 8.0
 
 ### Support For Multiple Guards

resources/js/components/Clients.vue

@@ -224,6 +224,35 @@
                 </div>
             </div>
         </div>
+
+        <!-- Client Secret Modal -->
+        <div class="modal fade" id="modal-client-secret" tabindex="-1" role="dialog">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h4 class="modal-title">
+                            Client Secret
+                        </h4>
+
+                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                    </div>
+
+                    <div class="modal-body">
+                        <p>
+                            Here is your new client secret. This is the only time it will be shown so don't lose it!
+                            You may now use this secret to make API requests.
+                        </p>
+
+                        <input type="text" class="form-control" v-model="clientSecret">
+                    </div>
+
+                    <!-- Modal Actions -->
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -236,6 +265,8 @@
             return {
                 clients: [],
 
+                clientSecret: null,
+
                 createForm: {
                     errors: [],
                     name: '',
@@ -341,17 +372,17 @@
 
                 axios[method](uri, form)
                     .then(response => {
-                        if (method === 'post') {
-                            this.clients.push(response.data);
-                        } else {
-                            this.getClients();
-                        }
+                        this.getClients();
 
                         form.name = '';
                         form.redirect = '';
                         form.errors = [];
 
                         $(modal).modal('hide');
+
+                        if (response.data.plainSecret) {
+                            this.showClientSecret(response.data.plainSecret);
+                        }
                     })
                     .catch(error => {
                         if (typeof error.response.data === 'object') {
@@ -362,6 +393,15 @@
                     });
             },
 
+            /**
+             * Show the given client secret to the user.
+             */
+            showClientSecret(clientSecret) {
+                this.clientSecret = clientSecret;
+
+                $('#modal-client-secret').modal('show');
+            },
+
             /**
              * Destroy the given client.
              */

src/Http/Controllers/ClientController.php

@@ -89,7 +89,7 @@ public function store(Request $request)
         );
 
         if (Passport::$hashesClientSecrets) {
-            return ['secret' => $client->plainSecret] + $client->toArray();
+            return ['plainSecret' => $client->plainSecret] + $client->toArray();
         }
 
         return $client->makeVisible('secret');