Add confirmation modal to "Change username"

2 files changed, 136 insertions, 0 deletions

diff --git a/app/assets/javascripts/profile/account/components/update_username.vue b/app/assets/javascripts/profile/account/components/update_username.vue
new file mode 100644
index 00000000000..e5de3f69b01
--- /dev/null
+++ b/app/assets/javascripts/profile/account/components/update_username.vue
@@ -0,0 +1,121 @@
+<script>
+import _ from 'underscore';
+import axios from '~/lib/utils/axios_utils';
+import GlModal from '~/vue_shared/components/gl_modal.vue';
+import { s__, sprintf } from '~/locale';
+import Flash from '~/flash';
+
+export default {
+  components: {
+    GlModal,
+  },
+  props: {
+    actionUrl: {
+      type: String,
+      required: true,
+    },
+    rootUrl: {
+      type: String,
+      required: true,
+    },
+    initialUsername: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isRequestPending: false,
+      username: this.initialUsername,
+      newUsername: this.initialUsername,
+    };
+  },
+  computed: {
+    path() {
+      return sprintf(s__('Profiles|Current path: %{path}'), {
+        path: `${this.rootUrl}${this.username}`,
+      });
+    },
+    modalText() {
+      return sprintf(
+        s__(`Profiles|
+You are going to change the username %{currentUsernameBold} to %{newUsernameBold}.
+Profile and projects will be redirected to the %{newUsername} namespace but this redirect will expire once the %{currentUsername} namespace is registered by another user or group.
+Please update your Git repository remotes as soon as possible.`),
+        {
+          currentUsernameBold: `<strong>${_.escape(this.username)}</strong>`,
+          newUsernameBold: `<strong>${_.escape(this.newUsername)}</strong>`,
+          currentUsername: _.escape(this.username),
+          newUsername: _.escape(this.newUsername),
+        },
+        false,
+      );
+    },
+  },
+  methods: {
+    onConfirm() {
+      this.isRequestPending = true;
+      const username = this.newUsername;
+      const putData = {
+        user: {
+          username,
+        },
+      };
+
+      return axios
+        .put(this.actionUrl, putData)
+        .then(result => {
+          Flash(result.data.message, 'notice');
+          this.username = username;
+          this.isRequestPending = false;
+        })
+        .catch(error => {
+          Flash(error.response.data.message);
+          this.isRequestPending = false;
+          throw error;
+        });
+    },
+  },
+  modalId: 'username-change-confirmation-modal',
+  inputId: 'username-change-input',
+  buttonText: s__('Profiles|Update username'),
+};
+</script>
+<template>
+  <div>
+    <div class="form-group">
+      <label :for="$options.inputId">{{ s__('Profiles|Path') }}</label>
+      <div class="input-group">
+        <div class="input-group-addon">{{ rootUrl }}</div>
+        <input
+          :id="$options.inputId"
+          class="form-control"
+          required="required"
+          v-model="newUsername"
+          :disabled="isRequestPending"
+        />
+      </div>
+      <p class="help-block">
+        {{ path }}
+      </p>
+    </div>
+    <button
+      :data-target="`#${$options.modalId}`"
+      class="btn btn-warning"
+      type="button"
+      data-toggle="modal"
+      :disabled="isRequestPending || newUsername === username"
+    >
+      {{ $options.buttonText }}
+    </button>
+    <gl-modal
+      :id="$options.modalId"
+      :header-title-text="s__('Profiles|Change username') + '?'"
+      footer-primary-button-variant="warning"
+      :footer-primary-button-text="$options.buttonText"
+      @submit="onConfirm"
+    >
+      <span v-html="modalText"></span>
+    </gl-modal>
+  </div>
+</template>
diff --git a/app/assets/javascripts/profile/account/index.js b/app/assets/javascripts/profile/account/index.js
index 84049a1f0b7..59c13e1a042 100644
--- a/app/assets/javascripts/profile/account/index.js
+++ b/app/assets/javascripts/profile/account/index.js
@@ -1,10 +1,25 @@
 import Vue from 'vue';
 import Translate from '~/vue_shared/translate';
+import UpdateUsername from './components/update_username.vue';
 import deleteAccountModal from './components/delete_account_modal.vue';
 
 export default () => {
   Vue.use(Translate);
 
+  const updateUsernameElement = document.getElementById('update-username');
+  // eslint-disable-next-line no-new
+  new Vue({
+    el: updateUsernameElement,
+    components: {
+      UpdateUsername,
+    },
+    render(createElement) {
+      return createElement('update-username', {
+        props: { ...updateUsernameElement.dataset },
+      });
+    },
+  });
+
   const deleteAccountButton = document.getElementById('delete-account-button');
   const deleteAccountModalEl = document.getElementById('delete-account-modal');
   // eslint-disable-next-line no-new