Review changes

app/assets/javascripts/pages/projects/settings/repository/show/mirror_repos.js

@@ -15,10 +15,17 @@ export default class MirrorRepos {
   }
 
   init() {
-    this.registerUpdateListeners();
     this.initMirrorPush();
+    this.registerUpdateListeners();
+  }
 
-    this.$table.on('click', '.js-delete-mirror', this.deleteMirror.bind(this));
+  initMirrorPush() {
+    this.$passwordGroup = $('.js-password-group', this.$container);
+    this.$password = $('.js-password', this.$passwordGroup);
+    this.$authMethod = $('.js-auth-method', this.$form);
+
+    this.$authMethod.on('change', () => this.togglePassword());
+    this.$password.on('input.updateUrl', () => this.debouncedUpdateUrl());
   }
 
   updateUrl() {
@@ -43,11 +50,17 @@ export default class MirrorRepos {
     this.debouncedUpdateUrl = _.debounce(() => this.updateUrl(), 200);
     this.$urlInput.on('input', () => this.debouncedUpdateUrl());
     this.$protectedBranchesInput.on('change', () => this.updateProtectedBranches());
+    this.$table.on('click', '.js-delete-mirror', this.deleteMirror.bind(this));
   }
 
-  initMirrorPush() {
-    this.$password = $('.js-password', this.$form);
-    this.$password.on('input.updateUrl', () => this.debouncedUpdateUrl());
+  togglePassword() {
+    const isPassword = this.$authMethod.val() === 'password';
+
+    if (!isPassword) {
+      this.$password.val('');
+      this.updateUrl();
+    }
+    this.$passwordGroup.collapse(isPassword ? 'show' : 'hide');
   }
 
   deleteMirror(event, existingPayload) {

app/views/projects/mirrors/_mirror_repos_form.html.haml

@@ -11,8 +11,8 @@
 
 .form-group
   = label_tag :auth_method, _('Authentication method'), class: 'label-bold'
-  = select_tag :auth_method, options_for_select([[_('Password'), 'password']], 'password'), { class: "form-control js-auth-method", disabled: true }
+  = select_tag :auth_method, options_for_select([[[_('None'), 'none'], [_('Password'), 'password']], 'none'), { class: "form-control js-auth-method", disabled: true }
 
-.form-group
+.form-group.js-password-group.collapse
   = label_tag :password, _('Password'), class: 'label-bold'
   = text_field_tag :password, '', class: 'form-control js-password'

ee/app/assets/javascripts/mirrors/mirror_pull.js

@@ -29,9 +29,9 @@ export default class MirrorPull {
   }
 
   init() {
-    this.toggleAuthWell(this.$dropdownAuthType.val());
+    this.handleRepositoryUrlInput(true);
 
-    this.$repositoryUrl.on('keyup', e => this.handleRepositoryUrlInput(e));
+    this.$repositoryUrl.on('keyup', () => this.handleRepositoryUrlInput());
     this.$form.find('.js-known-hosts').on('keyup', e => this.handleSSHKnownHostsInput(e));
     this.$dropdownAuthType.on('change', e => this.handleAuthTypeChange(e));
     this.$btnDetectHostKeys.on('click', e => this.handleDetectHostKeys(e));
@@ -44,19 +44,19 @@ export default class MirrorPull {
   /**
    * Method to monitor Git Repository URL input
    */
-  handleRepositoryUrlInput() {
+  handleRepositoryUrlInput(forceMatch) {
     const protocol = this.$repositoryUrl.val().split('://')[0];
     const protRegEx = /http|git/;
 
     // Validate URL and verify if it consists only supported protocols
-    if (this.$form.get(0).checkValidity()) {
+    if (forceMatch || this.$form.get(0).checkValidity()) {
       // Hide/Show SSH Host keys section only for SSH URLs
       this.$sectionSSHHostKeys.collapse(protocol === 'ssh' ? 'show' : 'hide');
       this.$btnDetectHostKeys.enable();
 
       // Verify if URL is http, https or git and hide/show Auth type dropdown
       // as we don't support auth type SSH for non-SSH URLs
-      const matchesProtocol = protRegEx.test(protocol);
+      const matchesProtocol = forceMatch || protRegEx.test(protocol);
       this.$dropdownAuthType.attr('disabled', matchesProtocol);
 
       if (matchesProtocol) {
@@ -214,7 +214,7 @@ export default class MirrorPull {
    */
   toggleAuthWell(authType) {
     this.$wellPasswordAuth.collapse(authType === AUTH_METHOD.PASSWORD ? 'show' : 'hide');
-    this.$wellSSHAuth.collapse(authType === AUTH_METHOD.PASSWORD ? 'hide' : 'show');
+    this.$wellSSHAuth.collapse(authType === AUTH_METHOD.SSH ? 'show' : 'hide');
   }
 
   /**

ee/app/assets/javascripts/pages/projects/settings/repository/show/ee_mirror_repos.js

@@ -60,7 +60,9 @@ export default class EEMirrorRepos extends MirrorRepos {
   updateForm() {
     const direction = this.$mirrorDirectionSelect.val();
 
+    this.$insertionPoint.collapse('hide');
     this.$insertionPoint.html(this.directionFormMap[direction]);
+    this.$insertionPoint.collapse('show');
 
     this.updateUrl();
     this.updateProtectedBranches();

ee/app/views/projects/mirrors/_mirror_repos_form.html.haml

@@ -22,9 +22,9 @@
 
     .form-group
       = label_tag :auth_method, _('Authentication method'), class: 'label-bold'
-      = select_tag :auth_method, options_for_select([[_('Password'), 'password']], 'password'), { class: "form-control js-auth-method", disabled: true }
+      = select_tag :auth_method, options_for_select([[_('None'), 'none'], [_('Password'), 'password']], 'none'), { class: "form-control js-auth-method" }
 
-    .form-group
+    .form-group.js-password-group.collapse
       = label_tag :password, _('Password'), class: 'label-bold'
       = text_field_tag :password, '', type: 'password', class: 'form-control js-password'