124 lines
3.4 KiB
Vue
124 lines
3.4 KiB
Vue
<script>
|
|
/* eslint-disable vue/no-v-html */
|
|
import { escape } from 'lodash';
|
|
import { GlButton } from '@gitlab/ui';
|
|
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,
|
|
GlButton,
|
|
},
|
|
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>
|
|
<gl-button
|
|
:data-target="`#${$options.modalId}`"
|
|
:disabled="isRequestPending || newUsername === username"
|
|
category="primary"
|
|
variant="warning"
|
|
data-toggle="modal"
|
|
>
|
|
{{ $options.buttonText }}
|
|
</gl-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>
|