SONAR-9195 Ease removing of SCM accounts

diff --git a/server/sonar-web/src/main/js/apps/users/form-view.js b/server/sonar-web/src/main/js/apps/users/form-view.js
index 9fccdea1f39d5b98f2a200597b74f0fd8bb3da1c..ade9b2070bcec78253bf14aced3a9fa07732d7c4 100644 (file)
--- a/server/sonar-web/src/main/js/apps/users/form-view.js
+++ b/server/sonar-web/src/main/js/apps/users/form-view.js
@@ -27,7 +27,8 @@ export default ModalForm.extend({
   events() {
     return {
       ...ModalForm.prototype.events.apply(this, arguments),
-      'click #create-user-add-scm-account': 'onAddScmAccountClick'
+      'click #create-user-add-scm-account': 'onAddScmAccountClick',
+      'click .js-remove-scm': 'onRemoveScmAccountClick'
     };
   },
 
@@ -61,11 +62,21 @@ export default ModalForm.extend({
   },
 
   addScmAccount() {
-    const fields = this.$('[name="scmAccounts"]');
-    fields
+    const fields = this.$('.js-scm-input');
+    const newField = fields
       .first()
       .clone()
+      .removeClass('hidden');
+    newField.insertAfter(fields.last());
+    newField
+      .find('input')
       .val('')
-      .insertAfter(fields.last());
+      .focus();
+  },
+
+  onRemoveScmAccountClick(e) {
+    $(e.currentTarget)
+      .parent()
+      .remove();
   }
 });

diff --git a/server/sonar-web/src/main/js/apps/users/templates/users-form.hbs b/server/sonar-web/src/main/js/apps/users/templates/users-form.hbs
index 908eefb5df4659285ca86558babfbc41d2d946b1..8538c31d914b636621a8a37bf4ac2e34cf91689b 100644 (file)
--- a/server/sonar-web/src/main/js/apps/users/templates/users-form.hbs
+++ b/server/sonar-web/src/main/js/apps/users/templates/users-form.hbs
@@ -36,13 +36,21 @@
     {{/unless}}
     <div class="modal-field">
       <label>{{t 'my_profile.scm_accounts'}}</label>
-      {{#each scmAccounts}}
-        <input name="scmAccounts" type="text" size="50" maxlength="255" value="{{this}}">
-      {{else}}
+      <span class="js-scm-input hidden">
         <input name="scmAccounts" type="text" size="50" maxlength="255">
+        <a class="icon-delete js-remove-scm" href="#"></a>
+      </span>
+      {{#each scmAccounts}}
+        <span class="js-scm-input">
+          <input name="scmAccounts" type="text" size="50" maxlength="255" value="{{this}}">
+          <a class="icon-delete js-remove-scm" href="#"></a>
+        </span>
       {{/each}}
-      <a id="create-user-add-scm-account" class="icon-plus" href="#" title="Add another SCM account"
-         data-toggle="tooltip"></a>
+      <div class="spacer-bottom">
+        <a id="create-user-add-scm-account" class="button" href="#">
+          {{t 'add_verb'}}
+        </a>
+      </div>
       <p class="note">{{t 'user.login_or_email_used_as_scm_account'}}</p>
     </div>
   </div>