107 lines
2.5 KiB
Vue
107 lines
2.5 KiB
Vue
|
<script>
|
||
|
|
import { GlButton, GlModal } from '@gitlab/ui';
|
||
|
|
import { createAlert, VARIANT_SUCCESS, VARIANT_WARNING } from '~/alert';
|
||
|
|
import axios from '~/lib/utils/axios_utils';
|
||
|
|
import InputCopyToggleVisibility from '~/vue_shared/components/form/input_copy_toggle_visibility.vue';
|
||
|
|
import {
|
||
|
|
CONFIRM_MODAL,
|
||
|
|
CONFIRM_MODAL_TITLE,
|
||
|
|
COPY_SECRET,
|
||
|
|
DESCRIPTION_SECRET,
|
||
|
|
RENEW_SECRET,
|
||
|
|
RENEW_SECRET_FAILURE,
|
||
|
|
RENEW_SECRET_SUCCESS,
|
||
|
|
WARNING_NO_SECRET,
|
||
|
|
} from '../constants';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
CONFIRM_MODAL,
|
||
|
|
CONFIRM_MODAL_TITLE,
|
||
|
|
COPY_SECRET,
|
||
|
|
DESCRIPTION_SECRET,
|
||
|
|
RENEW_SECRET,
|
||
|
|
name: 'OAuthSecret',
|
||
|
|
components: {
|
||
|
|
GlButton,
|
||
|
|
GlModal,
|
||
|
|
InputCopyToggleVisibility,
|
||
|
|
},
|
||
|
|
inject: ['initialSecret', 'renewPath'],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
secret: this.initialSecret,
|
||
|
|
alert: null,
|
||
|
|
isModalVisible: false,
|
||
|
|
isLoading: false,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
actionPrimary() {
|
||
|
|
return {
|
||
|
|
text: this.$options.RENEW_SECRET,
|
||
|
|
attributes: {
|
||
|
|
variant: 'confirm',
|
||
|
|
loading: this.isLoading,
|
||
|
|
},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
if (!this.secret) {
|
||
|
|
this.alert = createAlert({ message: WARNING_NO_SECRET, variant: VARIANT_WARNING });
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
displayModal() {
|
||
|
|
this.isModalVisible = true;
|
||
|
|
},
|
||
|
|
async renewSecret(event) {
|
||
|
|
event.preventDefault();
|
||
|
|
this.isLoading = true;
|
||
|
|
this.alert?.dismiss();
|
||
|
|
|
||
|
|
try {
|
||
|
|
const { data } = await axios.put(this.renewPath);
|
||
|
|
this.alert = createAlert({ message: RENEW_SECRET_SUCCESS, variant: VARIANT_SUCCESS });
|
||
|
|
this.secret = data.secret;
|
||
|
|
} catch {
|
||
|
|
this.alert = createAlert({ message: RENEW_SECRET_FAILURE });
|
||
|
|
} finally {
|
||
|
|
this.isLoading = false;
|
||
|
|
this.isModalVisible = false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="gl-display-flex gl-flex-wrap gl-gap-5">
|
||
|
|
<input-copy-toggle-visibility
|
||
|
|
v-if="secret"
|
||
|
|
:copy-button-title="$options.COPY_SECRET"
|
||
|
|
:value="secret"
|
||
|
|
class="gl-mt-n3 gl-mb-0"
|
||
|
|
>
|
||
|
|
<template #description>
|
||
|
|
{{ $options.DESCRIPTION_SECRET }}
|
||
|
|
</template>
|
||
|
|
</input-copy-toggle-visibility>
|
||
|
|
|
||
|
|
<gl-button category="secondary" class="gl-align-self-start" @click="displayModal">{{
|
||
|
|
$options.RENEW_SECRET
|
||
|
|
}}</gl-button>
|
||
|
|
|
||
|
|
<gl-modal
|
||
|
|
v-model="isModalVisible"
|
||
|
|
:title="$options.CONFIRM_MODAL_TITLE"
|
||
|
|
size="sm"
|
||
|
|
modal-id="modal-renew-secret"
|
||
|
|
:action-primary="actionPrimary"
|
||
|
|
@primary="renewSecret"
|
||
|
|
>
|
||
|
|
{{ $options.CONFIRM_MODAL }}
|
||
|
|
</gl-modal>
|
||
|
|
</div>
|
||
|
|
</template>
|