re-port

2 files changed, 21 insertions, 7 deletions

diff --git a/app/assets/javascripts/pages/projects/settings/repository/show/index.js b/app/assets/javascripts/pages/projects/settings/repository/show/index.js
index 923cd9efe87..78cf5406e43 100644
--- a/app/assets/javascripts/pages/projects/settings/repository/show/index.js
+++ b/app/assets/javascripts/pages/projects/settings/repository/show/index.js
@@ -1,9 +1,9 @@
 import initForm from '../form';
-import PushPull from './push_pull';
+import MirrorRepos from './mirror_repos';
 
 document.addEventListener('DOMContentLoaded', () => {
   initForm();
 
-  const pushPullContainer = document.querySelector('.js-mirror-settings');
-  if (pushPullContainer) new PushPull(pushPullContainer).init();
+  const mirrorReposContainer = document.querySelector('.js-mirror-settings');
+  if (mirrorReposContainer) new MirrorRepos(mirrorReposContainer).init();
 });
diff --git a/app/assets/javascripts/pages/projects/settings/repository/show/push_pull.js b/app/assets/javascripts/pages/projects/settings/repository/show/mirror_repos.js
index 242ee73e2f8..91070b3c6f2 100644
--- a/app/assets/javascripts/pages/projects/settings/repository/show/push_pull.js
+++ b/app/assets/javascripts/pages/projects/settings/repository/show/mirror_repos.js
@@ -4,24 +4,32 @@ import { __ } from '~/locale';
 import Flash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 
-export default class PushPull {
+export default class MirrorRepos {
   constructor(container) {
     this.$container = $(container);
     this.$form = $('.js-mirror-form', this.$container);
     this.$urlInput = $('.js-mirror-url', this.$form);
     this.$protectedBranchesInput = $('.js-mirror-protected', this.$form);
-    this.mirrorEndpoint = this.$form.data('projectMirrorEndpoint');
     this.$table = $('.js-mirrors-table-body', this.$container);
+    this.mirrorEndpoint = this.$form.data('projectMirrorEndpoint');
   }
 
   init() {
     this.registerUpdateListeners();
+    this.initMirrorPush();
 
     this.$table.on('click', '.js-delete-mirror', this.deleteMirror.bind(this));
   }
 
   updateUrl() {
-    $('.js-mirror-url-hidden', this.$form).val(this.$urlInput.val());
+    let val = this.$urlInput.val();
+
+    if (this.$password) {
+      const password = this.$password.val();
+      if (password) val = val.replace('@', `:${password}@`);
+    }
+
+    $('.js-mirror-url-hidden', this.$form).val(val);
   }
 
   updateProtectedBranches() {
@@ -32,10 +40,16 @@ export default class PushPull {
   }
 
   registerUpdateListeners() {
-    this.$urlInput.on('change', () => this.updateUrl());
+    this.debouncedUpdateUrl = _.debounce(() => this.updateUrl(), 200);
+    this.$urlInput.on('input', () => this.debouncedUpdateUrl());
     this.$protectedBranchesInput.on('change', () => this.updateProtectedBranches());
   }
 
+  initMirrorPush() {
+    this.$password = $('.js-password', this.$form);
+    this.$password.on('input.updateUrl', () => this.debouncedUpdateUrl());
+  }
+
   deleteMirror(event, existingPayload) {
     const $target = $(event.currentTarget);
     let payload = existingPayload;