115 lines
3.0 KiB
Vue
115 lines
3.0 KiB
Vue
<template>
|
|
<b-modal size="md" centered id="api_keys_modal" ref="$modal" :title="$gettext('Add API Key')"
|
|
@hidden="clearContents"
|
|
no-enforce-focus>
|
|
<template #default="slotProps">
|
|
<b-alert variant="danger" :show="error != null">{{ error }}</b-alert>
|
|
|
|
<b-form v-if="newKey === null" class="form vue-form" @submit.prevent="doSubmit">
|
|
<b-form-fieldset>
|
|
<b-wrapped-form-group id="form_comments" :field="v$.comment" autofocus>
|
|
<template #label>
|
|
{{ $gettext('API Key Description/Comments') }}
|
|
</template>
|
|
</b-wrapped-form-group>
|
|
</b-form-fieldset>
|
|
|
|
<invisible-submit-button/>
|
|
</b-form>
|
|
|
|
<div v-else>
|
|
<account-api-key-new-key :new-key="newKey"></account-api-key-new-key>
|
|
</div>
|
|
</template>
|
|
|
|
<template #modal-footer="slotProps">
|
|
<slot name="modal-footer" v-bind="slotProps">
|
|
<b-button variant="default" type="button" @click="close">
|
|
{{ $gettext('Close') }}
|
|
</b-button>
|
|
<b-button v-if="newKey === null" :variant="(v$.$invalid) ? 'danger' : 'primary'" type="submit"
|
|
@click="doSubmit">
|
|
{{ $gettext('Create New Key') }}
|
|
</b-button>
|
|
</slot>
|
|
</template>
|
|
</b-modal>
|
|
</template>
|
|
|
|
<script setup>
|
|
import BFormFieldset from "~/components/Form/BFormFieldset";
|
|
import InvisibleSubmitButton from "~/components/Common/InvisibleSubmitButton";
|
|
import AccountApiKeyNewKey from "./ApiKeyNewKey";
|
|
import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
|
|
import {required} from '@vuelidate/validators';
|
|
import {ref} from "vue";
|
|
import {useVuelidateOnForm} from "~/functions/useVuelidateOnForm";
|
|
import {useNotify} from "~/vendor/bootstrapVue";
|
|
import {useAxios} from "~/vendor/axios";
|
|
|
|
const props = defineProps({
|
|
createUrl: String
|
|
});
|
|
|
|
const emit = defineEmits(['relist']);
|
|
|
|
const error = ref(null);
|
|
const newKey = ref(null);
|
|
|
|
const {form, resetForm, v$} = useVuelidateOnForm(
|
|
{
|
|
comment: {required}
|
|
},
|
|
{
|
|
comment: ''
|
|
}
|
|
);
|
|
|
|
const clearContents = () => {
|
|
resetForm();
|
|
error.value = null;
|
|
newKey.value = null;
|
|
};
|
|
|
|
const $modal = ref(); // BModal
|
|
|
|
const create = () => {
|
|
clearContents();
|
|
|
|
$modal.value?.show();
|
|
};
|
|
|
|
const {wrapWithLoading} = useNotify();
|
|
const {axios} = useAxios();
|
|
|
|
const doSubmit = () => {
|
|
v$.value.$touch();
|
|
if (v$.value.$errors.length > 0) {
|
|
return;
|
|
}
|
|
|
|
error.value = null;
|
|
|
|
wrapWithLoading(
|
|
axios({
|
|
method: 'POST',
|
|
url: props.createUrl,
|
|
data: form.value
|
|
})
|
|
).then((resp) => {
|
|
newKey.value = resp.data.key;
|
|
emit('relist');
|
|
}).catch((error) => {
|
|
error.value = error.response.data.message;
|
|
});
|
|
};
|
|
|
|
const close = () => {
|
|
$modal.value?.hide();
|
|
};
|
|
|
|
defineExpose({
|
|
create
|
|
});
|
|
</script>
|