From 9f917d62b50c5d66f77cf0b2ce146502a6506f1e Mon Sep 17 00:00:00 2001
From: Nabil Adouani <nabil.adouani@gmail.com>
Date: Fri, 6 Nov 2020 16:43:24 +0100
Subject: [PATCH] #1623 Add the API key section in the user's settings page

---
 .../app/scripts/controllers/SettingsCtrl.js   | 40 +++++++++++++++++++
 .../app/views/partials/personal-settings.html | 30 ++++++++++++++
 2 files changed, 70 insertions(+)

diff --git a/frontend/app/scripts/controllers/SettingsCtrl.js b/frontend/app/scripts/controllers/SettingsCtrl.js
index c84b6ef61d..470670ef98 100644
--- a/frontend/app/scripts/controllers/SettingsCtrl.js
+++ b/frontend/app/scripts/controllers/SettingsCtrl.js
@@ -24,6 +24,8 @@
                 passwordConfirm: ''
             };
 
+            $scope.keyData = {};
+
             $scope.mfaData = {
                 enabled: $scope.currentUser.hasMFA,
                 secret: null,
@@ -32,6 +34,7 @@
             };
 
             $scope.canChangePass = appConfig.config.capabilities.indexOf('changePassword') !== -1;
+            $scope.canChangeKey = appConfig.config.capabilities.indexOf('authByKey') !== -1;
             $scope.canChangeMfa = appConfig.config.capabilities.indexOf('mfa') !== -1;
 
 
@@ -95,6 +98,43 @@
                 }
             };
 
+            $scope.createKey = function(){
+                    var modalInstance = ModalSrv.confirm(
+                        'Renew API Key',
+                        'Are you sure you want to renew your API Key?', {
+                            flavor: 'danger',
+                            okText: 'Yes, renew it'
+                        }
+                    );
+
+                    modalInstance.result
+                        .then(function() {
+                            UserSrv.setKey($scope.currentUser.login);
+                        })
+                        .then(function() {
+                            delete $scope.keyData.key;
+                            NotificationSrv.success('API key has been successfully renewed.');
+                        })
+                        .catch(function(err) {
+                            if (!_.isString(err)) {
+                                NotificationSrv.error('SettingsCtrl', err.data, err.status);
+                            }
+                        });
+            };
+
+            $scope.getKey = function() {
+                UserSrv.getKey($scope.currentUser.login)
+                    .then(function(key) {
+                        $scope.keyData.key = key;
+                    });
+            };
+
+            $scope.copyKey = function() {
+                clipboard.copyText($scope.keyData.key);
+                delete $scope.keyData.key;
+                NotificationSrv.success('API key has been successfully copied to clipboard.');
+            };
+
             $scope.copySecret = function(secret) {
                 clipboard.copyText(secret);
                 NotificationSrv.success('MFA Secret has been successfully copied to clipboard.');
diff --git a/frontend/app/views/partials/personal-settings.html b/frontend/app/views/partials/personal-settings.html
index 8adb4364c6..525cdf7c94 100644
--- a/frontend/app/views/partials/personal-settings.html
+++ b/frontend/app/views/partials/personal-settings.html
@@ -136,6 +136,36 @@ <h3 class="box-title"><input type="checkbox" ng-model="passData.changePassword"
             </div>
         </form>
 
+        <!-- Update API Key -->
+        <form ng-if="canChangeKey">
+            <div class="box">
+                <div class="box-header">
+                    <h3 class="box-title">API Key</h3>
+                </div>
+                <div class="box-body">
+                    <div class="callout callout-warning mv-0" ng-if="!currentUser.hasKey">
+                        <h4>You don't have any API key.</h4>
+                        <p> Please contact your organization's administrator.</p>
+                    </div>
+                    <div class="form-group" ng-if="currentUser.hasKey">
+                        <p>You have an API key defined. You can renew it if needed.</p>
+                        <div class="input-group">
+                            <span class="input-group-btn">
+                                <span class="btn btn-default" ng-click="createKey()">Renew</span>
+                                <span class="btn btn-primary" ng-click="getKey()" ng-if="!keyData.key">Reveal</span>
+                            </span>
+                            <input class="form-control" readonly ng-model="keyData.key" ng-if="keyData.key">
+                            <span class="input-group-btn" ng-if="keyData.key">
+                                <button class="btn btn-primary" type="button" ng-click="copyKey()">
+                                    <i class="fa fa-copy"></i>
+                                </button>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </form>
+
         <!-- Update mfa -->
         <form ng-if="canChangeMfa" class="mt-s" name="mfaForm" ng-submit="setMfaSettings(mfaForm);" novalidate>
             <div class="box">