update_username.vue

<script>
/* eslint-disable vue/no-v-html */
import { escape } from 'lodash';
import axios from '~/lib/utils/axios_utils';
import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
import { s__, sprintf } from '~/locale';
import { deprecatedCreateFlash as Flash } from '~/flash';

export default {
  components: {
    GlModal: DeprecatedModal2,
  },
  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-prepend">
          <div class="input-group-text">{{ rootUrl }}</div>
        </div>
        <input
          :id="$options.inputId"
          v-model="newUsername"
          :disabled="isRequestPending"
          class="form-control"
          required="required"
        />
      </div>
      <p class="form-text text-muted">{{ path }}</p>
    </div>
    <button
      :data-target="`#${$options.modalId}`"
      :disabled="isRequestPending || newUsername === username"
      class="btn btn-warning"
      type="button"
      data-toggle="modal"
    >
      {{ $options.buttonText }}
    </button>
    <gl-modal
      :id="$options.modalId"
      :header-title-text="s__('Profiles|Change username') + '?'"
      :footer-primary-button-text="$options.buttonText"
      footer-primary-button-variant="warning"
      @submit="onConfirm"
    >
      <span v-html="modalText"></span>
    </gl-modal>
  </div>
</template>