PLT-3984 Add the ability to regenerate OAuth Client Secret (#3899)

3 files changed, 58 insertions, 4 deletions

diff --git a/webapp/client/client.jsx b/webapp/client/client.jsx
index 5dda975f6..b842d9939 100644
--- a/webapp/client/client.jsx
+++ b/webapp/client/client.jsx
@@ -1573,6 +1573,16 @@ export default class Client {
         end(this.handleResponse.bind(this, 'deauthorizeOAuthApp', success, error));
     }
 
+    regenerateOAuthAppSecret(id, success, error) {
+        request.
+        post(`${this.getOAuthRoute()}/${id}/regen_secret`).
+        set(this.defaultHeaders).
+        type('application/json').
+        accept('application/json').
+        send().
+        end(this.handleResponse.bind(this, 'regenerateOAuthAppSecret', success, error));
+    }
+
     // Routes for Hooks
 
     addIncomingHook(hook, success, error) {
diff --git a/webapp/components/integrations/components/installed_oauth_app.jsx b/webapp/components/integrations/components/installed_oauth_app.jsx
index 37fc061f7..15a79ed4c 100644
--- a/webapp/components/integrations/components/installed_oauth_app.jsx
+++ b/webapp/components/integrations/components/installed_oauth_app.jsx
@@ -3,6 +3,9 @@
 
 import React from 'react';
 
+import FormError from 'components/form_error.jsx';
+
+import Client from 'client/web_client.jsx';
 import * as Utils from 'utils/utils.jsx';
 
 import {FormattedMessage, FormattedHTMLMessage} from 'react-intl';
@@ -23,6 +26,7 @@ export default class InstalledOAuthApp extends React.Component {
 
         this.handleShowClientSecret = this.handleShowClientSecret.bind(this);
         this.handleHideClientScret = this.handleHideClientScret.bind(this);
+        this.handleRegenerate = this.handleRegenerate.bind(this);
         this.handleDelete = this.handleDelete.bind(this);
 
         this.matchesFilter = this.matchesFilter.bind(this);
@@ -42,6 +46,21 @@ export default class InstalledOAuthApp extends React.Component {
         this.setState({clientSecret: FAKE_SECRET});
     }
 
+    handleRegenerate(e) {
+        e.preventDefault();
+
+        Client.regenerateOAuthAppSecret(
+            this.props.oauthApp.id,
+            (data) => {
+                this.props.oauthApp.client_secret = data.client_secret;
+                this.handleShowClientSecret(e);
+            },
+            (err) => {
+                this.setState({error: err.message});
+            }
+        );
+    }
+
     handleDelete(e) {
         e.preventDefault();
 
@@ -58,6 +77,15 @@ export default class InstalledOAuthApp extends React.Component {
 
     render() {
         const oauthApp = this.props.oauthApp;
+        let error;
+
+        if (this.state.error) {
+            error = (
+                <FormError
+                    error={this.state.error}
+                />
+            );
+        }
 
         if (!this.matchesFilter(oauthApp, this.props.filter)) {
             return null;
@@ -107,9 +135,9 @@ export default class InstalledOAuthApp extends React.Component {
             isTrusted = Utils.localizeMessage('installed_oauth_apps.trusted.no', 'No');
         }
 
-        let action;
+        let showHide;
         if (this.state.clientSecret === FAKE_SECRET) {
-            action = (
+            showHide = (
                 <a
                     href='#'
                     onClick={this.handleShowClientSecret}
@@ -121,7 +149,7 @@ export default class InstalledOAuthApp extends React.Component {
                 </a>
             );
         } else {
-            action = (
+            showHide = (
                 <a
                     href='#'
                     onClick={this.handleHideClientScret}
@@ -134,6 +162,18 @@ export default class InstalledOAuthApp extends React.Component {
             );
         }
 
+        const regen = (
+            <a
+                href='#'
+                onClick={this.handleRegenerate}
+            >
+                <FormattedMessage
+                    id='installed_integrations.regenSecret'
+                    defaultMessage='Regenerate Secret'
+                />
+            </a>
+        );
+
         let icon;
         if (oauthApp.icon_url) {
             icon = (
@@ -152,6 +192,7 @@ export default class InstalledOAuthApp extends React.Component {
                             {name}
                         </span>
                     </div>
+                    {error}
                     {description}
                     <div className='item-details__row'>
                         <span className='item-details__url'>
@@ -201,7 +242,9 @@ export default class InstalledOAuthApp extends React.Component {
                     </div>
                 </div>
                 <div className='item-actions'>
-                    {action}
+                    {showHide}
+                    {' - '}
+                    {regen}
                     {' - '}
                     <a
                         href='#'
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 4617d2162..8d1cfb3c7 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -1308,6 +1308,7 @@
   "installed_integrations.creation": "Created by {creator} on {createAt, date, full}",
   "installed_integrations.delete": "Delete",
   "installed_integrations.hideSecret": "Hide Secret",
+  "installed_integrations.regenSecret": "Regenerate Secret",
   "installed_integrations.regenToken": "Regenerate Token",
   "installed_integrations.showSecret": "Show Secret",
   "installed_integrations.token": "Token: {token}",