From 3d06020d5dd632a1ff26d3ce7389e0138e6d6e56 Mon Sep 17 00:00:00 2001
From: LautaroCesso <59095036+LautaroCesso@users.noreply.github.com>
Date: Fri, 1 May 2020 14:56:49 -0300
Subject: [PATCH] Add loading in AreYouSure component. (#771)

---
 client/src/app-components/are-you-sure.js     | 81 ++++++++++++++++---
 client/src/app-components/are-you-sure.scss   |  8 +-
 client/src/app-components/ticket-viewer.js    |  2 +-
 .../settings/admin-panel-advanced-settings.js |  4 +-
 4 files changed, 80 insertions(+), 15 deletions(-)

diff --git a/client/src/app-components/are-you-sure.js b/client/src/app-components/are-you-sure.js
index eea92f55..e3d3d266 100644
--- a/client/src/app-components/are-you-sure.js
+++ b/client/src/app-components/are-you-sure.js
@@ -6,6 +6,7 @@ import ModalContainer from 'app-components/modal-container';
 import Button from 'core-components/button';
 import Input from 'core-components/input';
 import Icon from 'core-components/icon';
+import Loading from 'core-components/loading'
 
 
 class AreYouSure extends React.Component {
@@ -24,6 +25,7 @@ class AreYouSure extends React.Component {
     };
 
     state = {
+        loading: false,
         password: ''
     };
 
@@ -39,6 +41,7 @@ class AreYouSure extends React.Component {
     }
 
     render() {
+        const { loading } = this.state;
         return (
             <div className="are-you-sure" role="dialog" aria-labelledby="are-you-sure__header" aria-describedby="are-you-sure__description">
                 <div className="are-you-sure__header" id="are-you-sure__header">
@@ -54,13 +57,20 @@ class AreYouSure extends React.Component {
                 <span className="separator" />
                 <div className="are-you-sure__buttons">
                     <div className="are-you-sure__no-button">
-                        <Button type="link" size="auto" onClick={this.onNo.bind(this)} tabIndex="2">
+                        <Button disabled={loading} type="link" size="auto" onClick={this.onNo.bind(this)} tabIndex="2">
                             {i18n('CANCEL')}
                         </Button>
                     </div>
                     <div className="are-you-sure__yes-button">
-                        <Button type="secondary" size="small" onClick={this.onYes.bind(this)} ref="yesButton" tabIndex="2">
-                            {i18n('YES')}
+                        <Button
+                            type="secondary"
+                            size="small"
+                            onClick={this.onYes.bind(this)}
+                            ref="yesButton"
+                            tabIndex="2"
+                            disabled={loading}
+                        >
+                            {loading ? <Loading /> : i18n('YES')}
                         </Button>
                     </div>
                 </div>
@@ -69,8 +79,23 @@ class AreYouSure extends React.Component {
     }
 
     renderPassword() {
+        const {
+            password,
+            loading
+        } = this.state;
         return (
-            <Input className="are-you-sure__password" password placeholder="password" name="password" ref="password" size="medium" value={this.state.password} onChange={this.onPasswordChange.bind(this)} onKeyDown={this.onInputKeyDown.bind(this)}/>
+            <Input
+                className="are-you-sure__password"
+                password
+                placeholder="password"
+                name="password"
+                ref="password"
+                size="medium"
+                value={password}
+                onChange={this.onPasswordChange.bind(this)}
+                onKeyDown={this.onInputKeyDown.bind(this)}
+                disabled={loading}
+            />
         );
     }
 
@@ -87,19 +112,55 @@ class AreYouSure extends React.Component {
     }
 
     onYes() {
-        if (this.props.type === 'secure' && !this.state.password) {
+        const {
+            password,
+        } = this.state;
+        const {
+            type,
+            onYes
+        } = this.props;
+
+        if(type === 'secure' && !password) {
             this.refs.password.focus()
         }
 
-        if (this.props.type === 'default' || this.state.password) {
-            this.closeModal();
-
-            if (this.props.onYes) {
-                this.props.onYes(this.state.password);
+        if(type === 'default' || password) {
+            if(onYes) {
+                const result = onYes(password);
+                if(this.isPromise(result)) {
+                    this.setState({
+                        loading: true
+                    });
+                    result
+                        .then(() => {
+                            this.setState({
+                                loading: false
+                            });
+                            this.closeModal();
+                        })
+                        .catch(() => {
+                            this.setState({
+                                loading: false,
+                            });
+                            this.closeModal();
+                        })
+                } else {
+                    this.closeModal();
+                }
+            } else {
+                this.closeModal();
             }
         }
     }
 
+    isPromise(object) {
+        if(Promise && Promise.resolve) {
+            return Promise.resolve(object) == object;
+        } else {
+            throw "Promise not supported in your environment"
+        }
+    }
+
     onNo() {
         this.closeModal();
     }
diff --git a/client/src/app-components/are-you-sure.scss b/client/src/app-components/are-you-sure.scss
index 0bfc4f0d..de469b2b 100644
--- a/client/src/app-components/are-you-sure.scss
+++ b/client/src/app-components/are-you-sure.scss
@@ -24,12 +24,16 @@
     &__buttons {
         margin-top: 10px;
         padding-bottom: 10px;
-        text-align: right;
+        width: 100%;
+        display: inline-flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        align-items: center;
     }
 
     &__yes-button,
     &__no-button {
-        display: inline-block;
+        display: block;
         margin-right: 10px;
     }
 
diff --git a/client/src/app-components/ticket-viewer.js b/client/src/app-components/ticket-viewer.js
index bd173f81..ee223281 100644
--- a/client/src/app-components/ticket-viewer.js
+++ b/client/src/app-components/ticket-viewer.js
@@ -428,7 +428,7 @@ class TicketViewer extends React.Component {
             }));
         }
 
-        APICallPromise.then(this.onTicketModification.bind(this));
+        return APICallPromise.then(this.onTicketModification.bind(this));
     }
 
     onReopenClick() {
diff --git a/client/src/app/admin/panel/settings/admin-panel-advanced-settings.js b/client/src/app/admin/panel/settings/admin-panel-advanced-settings.js
index 0855e6e7..f401baf5 100644
--- a/client/src/app/admin/panel/settings/admin-panel-advanced-settings.js
+++ b/client/src/app/admin/panel/settings/admin-panel-advanced-settings.js
@@ -191,7 +191,7 @@ class AdminPanelAdvancedSettings extends React.Component {
     }
 
     onAreYouSureUserSystemOk(password) {
-        API.call({
+        return API.call({
             path: this.props.config['user-system-enabled'] ? '/system/disable-user-system' : '/system/enable-user-system',
             data: {
                 password: password
@@ -207,7 +207,7 @@ class AdminPanelAdvancedSettings extends React.Component {
     }
 
     onAreYouSureRegistrationOk(password) {
-        API.call({
+        return API.call({
             path: this.props.config['registration'] ? '/system/disable-registration' : '/system/enable-registration',
             data: {
                 password: password