replace native buttons with Button component (#235)

2 files changed, 13 insertions, 11 deletions

diff --git a/server/sonar-web/src/main/js/apps/settings/encryption/EncryptionForm.js b/server/sonar-web/src/main/js/apps/settings/encryption/EncryptionForm.js
index 0a7b75c580a..fef8d687609 100644
--- a/server/sonar-web/src/main/js/apps/settings/encryption/EncryptionForm.js
+++ b/server/sonar-web/src/main/js/apps/settings/encryption/EncryptionForm.js
@@ -20,6 +20,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { translate } from '../../../helpers/l10n';
+import { SubmitButton } from '../../../components/ui/buttons';
 
 export default class EncryptionForm extends React.PureComponent {
   static propTypes = {
@@ -46,8 +47,8 @@ export default class EncryptionForm extends React.PureComponent {
         <div className="spacer-bottom">{translate('encryption.form_intro')}</div>
 
         <form
-          id="encryption-form"
           className="big-spacer-bottom"
+          id="encryption-form"
           onSubmit={e => this.handleEncrypt(e)}>
           <textarea
             autoFocus={true}
@@ -59,7 +60,7 @@ export default class EncryptionForm extends React.PureComponent {
             value={this.state.value}
           />
           <div className="spacer-top">
-            <button>{translate('encryption.encrypt')}</button>
+            <SubmitButton>{translate('encryption.encrypt')}</SubmitButton>
           </div>
         </form>
 
@@ -68,10 +69,10 @@ export default class EncryptionForm extends React.PureComponent {
             {translate('encryption.encrypted_value')}
             {': '}
             <input
-              id="encrypted-value"
               className="input-clear input-code input-super-large"
-              type="text"
+              id="encrypted-value"
               readOnly={true}
+              type="text"
               value={this.props.encryptedValue}
             />
           </div>
@@ -83,7 +84,7 @@ export default class EncryptionForm extends React.PureComponent {
             dangerouslySetInnerHTML={{ __html: translate('encryption.form_note') }}
           />
           <form id="encryption-new-key-form" onSubmit={e => this.handleGenerateNewKey(e)}>
-            <button>{translate('encryption.generate_new_secret_key')}</button>
+            <SubmitButton>{translate('encryption.generate_new_secret_key')}</SubmitButton>
           </form>
         </div>
       </div>
diff --git a/server/sonar-web/src/main/js/apps/settings/encryption/GenerateSecretKeyForm.js b/server/sonar-web/src/main/js/apps/settings/encryption/GenerateSecretKeyForm.js
index c818cecbcd6..bec7d661859 100644
--- a/server/sonar-web/src/main/js/apps/settings/encryption/GenerateSecretKeyForm.js
+++ b/server/sonar-web/src/main/js/apps/settings/encryption/GenerateSecretKeyForm.js
@@ -20,6 +20,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { translate } from '../../../helpers/l10n';
+import { SubmitButton } from '../../../components/ui/buttons';
 
 export default class GenerateSecretKeyForm extends React.PureComponent {
   static propTypes = {
@@ -27,10 +28,10 @@ export default class GenerateSecretKeyForm extends React.PureComponent {
     generateSecretKey: PropTypes.func.isRequired
   };
 
-  handleSubmit(e) {
+  handleSubmit = e => {
     e.preventDefault();
     this.props.generateSecretKey();
-  }
+  };
 
   render() {
     return (
@@ -40,10 +41,10 @@ export default class GenerateSecretKeyForm extends React.PureComponent {
             <div className="big-spacer-bottom">
               <h3 className="spacer-bottom">{translate('encryption.secret_key')}</h3>
               <input
-                id="secret-key"
                 className="input-large"
-                type="text"
+                id="secret-key"
                 readOnly={true}
+                type="text"
                 value={this.props.secretKey}
               />
             </div>
@@ -62,8 +63,8 @@ export default class GenerateSecretKeyForm extends React.PureComponent {
               dangerouslySetInnerHTML={{ __html: translate('ecryption.secret_key_description') }}
             />
 
-            <form id="generate-secret-key-form" onSubmit={e => this.handleSubmit(e)}>
-              <button>{translate('encryption.generate_secret_key')}s</button>
+            <form id="generate-secret-key-form" onSubmit={this.handleSubmit}>
+              <SubmitButton>{translate('encryption.generate_secret_key')}</SubmitButton>
             </form>
           </div>
         )}