1 files changed, 66 insertions, 9 deletions
diff --git a/server/sonar-web/src/main/js/apps/settings/licenses/LicenseChangeForm.js b/server/sonar-web/src/main/js/apps/settings/licenses/LicenseChangeForm.js
index e3e443e51b6..ff068c49d98 100644
--- a/server/sonar-web/src/main/js/apps/settings/licenses/LicenseChangeForm.js
+++ b/server/sonar-web/src/main/js/apps/settings/licenses/LicenseChangeForm.js
@@ -18,8 +18,8 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
-import LicenseValueView from './LicenseValueView';
-import { translate } from '../../../helpers/l10n';
+import Modal from 'react-modal';
+import { translate, translateWithParameters } from '../../../helpers/l10n';
 
 export default class LicenseChangeForm extends React.PureComponent {
   static propTypes = {
@@ -27,23 +27,80 @@ export default class LicenseChangeForm extends React.PureComponent {
     onChange: React.PropTypes.func.isRequired
   };
 
+  state = {
+    loading: false,
+    modalOpen: false
+  };
+
   onClick(e) {
     e.preventDefault();
     e.target.blur();
+    this.setState({ modalOpen: true });
+  }
 
-    const { license, onChange } = this.props;
+  closeModal = () => this.setState({ modalOpen: false });
 
-    new LicenseValueView({
-      productName: license.name || license.key,
-      value: license.value,
-      onChange
-    }).render();
-  }
+  handleSubmit = event => {
+    event.preventDefault();
+    if (this.textarea) {
+      const { value } = this.textarea;
+      this.setState({ loading: true });
+      this.props
+        .onChange(value)
+        .then(
+          () => this.setState({ loading: false, modalOpen: false }),
+          () => this.setState({ loading: false })
+        );
+    }
+  };
+
+  handleCancelClick = event => {
+    event.preventDefault();
+    this.closeModal();
+  };
 
   render() {
+    const { license } = this.props;
+    const productName = license.name || license.key;
+
     return (
       <button className="js-change" onClick={e => this.onClick(e)}>
         {translate('update_verb')}
+
+        {this.state.modalOpen &&
+          <Modal
+            isOpen={true}
+            contentLabel="license update"
+            className="modal"
+            overlayClassName="modal-overlay"
+            onRequestClose={this.closeModal}>
+            <form onSubmit={this.handleSubmit}>
+              <div className="modal-head">
+                <h2>{translateWithParameters('licenses.update_license_for_x', productName)}</h2>
+              </div>
+              <div className="modal-body">
+                <label htmlFor="license-input">{translate('licenses.license_input_label')}</label>
+                <textarea
+                  autoFocus={true}
+                  className="width-100 spacer-top"
+                  ref={node => (this.textarea = node)}
+                  rows="7"
+                  id="license-input"
+                  defaultValue={license.value}
+                />
+                <div className="spacer-top note">{translate('licenses.license_input_note')}</div>
+              </div>
+              <div className="modal-foot">
+                {this.state.loading && <i className="js-modal-spinner spinner spacer-right" />}
+                <button className="js-modal-submit" disabled={this.state.loading}>
+                  {translate('save')}
+                </button>
+                <a href="#" className="js-modal-close" onClick={this.handleCancelClick}>
+                  {translate('cancel')}
+                </a>
+              </div>
+            </form>
+          </Modal>}
       </button>
     );
   }