debian-mirror-gitlab/app/assets/javascripts/issuable/components/issuable_by_email.vue

172 lines
4.8 KiB
Vue
Raw Normal View History

2021-03-11 19:13:27 +05:30
<script>
import {
GlButton,
GlModal,
GlModalDirective,
GlTooltipDirective,
GlSprintf,
GlLink,
GlFormInputGroup,
GlIcon,
} from '@gitlab/ui';
import axios from '~/lib/utils/axios_utils';
import { sprintf, __ } from '~/locale';
import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
export default {
2021-04-29 21:17:54 +05:30
i18n: {
sendEmail: __('Send email'),
},
2021-03-11 19:13:27 +05:30
name: 'IssuableByEmail',
components: {
GlButton,
GlModal,
GlSprintf,
GlLink,
GlFormInputGroup,
GlIcon,
ModalCopyButton,
},
directives: {
GlModal: GlModalDirective,
GlTooltip: GlTooltipDirective,
},
inject: {
initialEmail: {
default: null,
},
issuableType: {
2021-09-30 23:02:18 +05:30
default: 'issue',
2021-03-11 19:13:27 +05:30
},
emailsHelpPagePath: {
default: '',
},
quickActionsHelpPath: {
default: '',
},
markdownHelpPath: {
default: '',
},
resetPath: {
default: '',
},
},
data() {
return {
email: this.initialEmail,
2022-01-26 12:08:38 +05:30
issuableName: this.issuableType === 'issue' ? __('issue') : __('merge request'),
2021-03-11 19:13:27 +05:30
};
},
computed: {
mailToLink() {
const subject = sprintf(__('Enter the %{name} title'), {
name: this.issuableName,
});
const body = sprintf(__('Enter the %{name} description'), {
name: this.issuableName,
});
return `mailto:${this.email}?subject=${subject}&body=${body}`;
},
},
methods: {
async resetIncomingEmailToken() {
try {
const {
data: { new_address: newAddress },
} = await axios.put(this.resetPath);
this.email = newAddress;
} catch {
2021-09-30 23:02:18 +05:30
this.$toast.show(__('There was an error when reseting email token.'));
2021-03-11 19:13:27 +05:30
}
},
cancelHandler() {
this.$refs.modal.hide();
},
},
modalId: 'issuable-email-modal',
};
</script>
<template>
<div>
2021-09-04 01:27:46 +05:30
<gl-button v-gl-modal="$options.modalId" variant="link"
2021-03-11 19:13:27 +05:30
><gl-sprintf :message="__('Email a new %{name} to this project')"
><template #name>{{ issuableName }}</template></gl-sprintf
></gl-button
>
<gl-modal ref="modal" :modal-id="$options.modalId">
<template #modal-title>
<gl-sprintf :message="__('Create new %{name} by email')">
<template #name>{{ issuableName }}</template>
</gl-sprintf>
</template>
<p>
<gl-sprintf
:message="
__(
'You can create a new %{name} inside this project by sending an email to the following email address:',
)
"
>
<template #name>{{ issuableName }}</template>
</gl-sprintf>
</p>
<gl-form-input-group :value="email" readonly select-on-click class="gl-mb-4">
<template #append>
<modal-copy-button :text="email" :title="__('Copy')" :modal-id="$options.modalId" />
<gl-button
v-gl-tooltip.hover
:href="mailToLink"
2021-04-29 21:17:54 +05:30
:title="$options.i18n.sendEmail"
:aria-label="$options.i18n.sendEmail"
2021-03-11 19:13:27 +05:30
icon="mail"
/>
</template>
</gl-form-input-group>
<p>
<gl-sprintf
:message="
__(
'The subject will be used as the title of the new issue, and the message will be the description. %{quickActionsLinkStart}Quick actions%{quickActionsLinkEnd} and styling with %{markdownLinkStart}Markdown%{markdownLinkEnd} are supported.',
)
"
>
<template #quickActionsLink="{ content }">
<gl-link :href="quickActionsHelpPath" target="_blank">{{ content }}</gl-link>
</template>
<template #markdownLink="{ content }">
<gl-link :href="markdownHelpPath" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</p>
<p>
<gl-sprintf
:message="
__(
2021-09-04 01:27:46 +05:30
'This is a private email address %{helpIcon} generated just for you. Anyone who has it can create issues or merge requests as if they were you. If that happens, %{resetLinkStart}reset this token%{resetLinkEnd}.',
2021-03-11 19:13:27 +05:30
)
"
>
<template #helpIcon>
2021-09-04 01:27:46 +05:30
<gl-link :href="emailsHelpPagePath" target="_blank">
<gl-icon class="gl-text-blue-600" name="question-o" />
</gl-link>
2021-03-11 19:13:27 +05:30
</template>
<template #resetLink="{ content }">
<gl-button
variant="link"
2021-09-04 01:27:46 +05:30
data-testid="reset_email_token_link"
2021-03-11 19:13:27 +05:30
@click="resetIncomingEmailToken"
>
2021-09-04 01:27:46 +05:30
{{ content }}
</gl-button>
2021-03-11 19:13:27 +05:30
</template>
</gl-sprintf>
</p>
<template #modal-footer>
2021-12-11 22:18:48 +05:30
<gl-button category="secondary" @click="cancelHandler">{{ __('Cancel') }}</gl-button>
2021-03-11 19:13:27 +05:30
</template>
</gl-modal>
</div>
</template>