re-port

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

 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();
 });

app/assets/javascripts/pages/projects/settings/repository/show/push_pull.js → 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;

app/assets/stylesheets/framework/buttons.scss

@@ -242,6 +242,10 @@
     &:not(:last-child) {
       margin-right: 5px;
     }
+
+    &.hide {
+      display: none;
+    }
   }
 }
 

app/assets/stylesheets/framework/forms.scss

@@ -201,7 +201,7 @@ label {
 }
 
 .gl-show-field-errors {
-  .form-control {
+  .form-control:not(textarea) {
     height: 34px;
   }
 

app/assets/stylesheets/pages/settings.scss

@@ -311,3 +311,11 @@
 .push-pull-table {
   margin-top: 1em;
 }
+
+.push-pull-table {
+  margin-top: 1em;
+
+  .mirror-action-buttons {
+    padding-right: 0;
+  }
+}

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

@@ -8,4 +8,3 @@
     %li
       = _('This user will be the author of all events in the activity feed that are the result of an update,
       like new branches being created or new commits being pushed to existing branches.')
-

app/views/projects/mirrors/_push_pull.html.haml → app/views/projects/mirrors/_mirror_repos.html.haml

@@ -29,9 +29,11 @@
 
           = render 'projects/mirrors/instructions'
 
-          = render_if_exists 'projects/mirrors/direction_dropdown', options: options
+          .form-group
+            = label_tag :mirror_direction, _('Mirror direction'), class: 'label-light'
+            = select_tag :mirror_direction, options_for_select(options), class: 'form-control js-mirror-direction'
 
-          = render 'projects/mirrors/push_pull_form', can_push: can_push, can_pull: can_pull, f: f
+          = render 'projects/mirrors/mirror_repos_form', can_push: can_push, can_pull: can_pull, f: f
 
           .form-check.append-bottom-10
             = check_box_tag :only_protected_branches, '1', false, class: 'js-mirror-protected form-check-input'
@@ -64,7 +66,7 @@
                   %td
                     - if mirror.last_error.present?
                       .badge.mirror-error-badge{ data: { toggle: 'tooltip', html: 'true' }, title: html_escape(mirror.last_error.try(:strip)) }= _('Error')
-                  %td
-                    .btn-group.mirror-actions-group{ role: 'group' }
+                  %td.mirror-action-buttons
+                    .btn-group.mirror-actions-group.pull-right{ role: 'group' }
                       = render 'shared/remote_mirror_update_button', remote_mirror: mirror
                       %button.js-delete-mirror.btn.btn-danger{ type: 'button', data: { mirror_id: mirror.id, toggle: 'tooltip', container: 'body' }, title: _('Remove') }= icon('trash-o')

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

@@ -4,3 +4,11 @@
   = rm_f.hidden_field :enabled, value: '1'
   = rm_f.hidden_field :url, class: 'js-mirror-url-hidden', required: true, pattern: "(#{protocols}):\/\/.+"
   = rm_f.hidden_field :only_protected_branches, class: 'js-mirror-protected-hidden'
+
+.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: 'disabled' }
+
+.form-group
+  = label_tag :password, _('Password'), class: 'label-bold'
+  = text_field_tag :password, '', class: 'form-control js-password'

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

-= render 'projects/mirrors/push_pull'
\ No newline at end of file
+= render 'projects/mirrors/mirror_repos'