1<script> 2import { 3 GlButton, 4 GlModal, 5 GlModalDirective, 6 GlTooltipDirective, 7 GlSprintf, 8 GlLink, 9 GlFormInputGroup, 10 GlIcon, 11} from '@gitlab/ui'; 12import axios from '~/lib/utils/axios_utils'; 13import { sprintf, __ } from '~/locale'; 14import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue'; 15 16export default { 17 i18n: { 18 sendEmail: __('Send email'), 19 }, 20 name: 'IssuableByEmail', 21 components: { 22 GlButton, 23 GlModal, 24 GlSprintf, 25 GlLink, 26 GlFormInputGroup, 27 GlIcon, 28 ModalCopyButton, 29 }, 30 directives: { 31 GlModal: GlModalDirective, 32 GlTooltip: GlTooltipDirective, 33 }, 34 inject: { 35 initialEmail: { 36 default: null, 37 }, 38 issuableType: { 39 default: 'issue', 40 }, 41 emailsHelpPagePath: { 42 default: '', 43 }, 44 quickActionsHelpPath: { 45 default: '', 46 }, 47 markdownHelpPath: { 48 default: '', 49 }, 50 resetPath: { 51 default: '', 52 }, 53 }, 54 data() { 55 return { 56 email: this.initialEmail, 57 issuableName: this.issuableType === 'issue' ? __('issue') : __('merge request'), 58 }; 59 }, 60 computed: { 61 mailToLink() { 62 const subject = sprintf(__('Enter the %{name} title'), { 63 name: this.issuableName, 64 }); 65 const body = sprintf(__('Enter the %{name} description'), { 66 name: this.issuableName, 67 }); 68 // eslint-disable-next-line @gitlab/require-i18n-strings 69 return `mailto:${this.email}?subject=${subject}&body=${body}`; 70 }, 71 }, 72 methods: { 73 async resetIncomingEmailToken() { 74 try { 75 const { 76 data: { new_address: newAddress }, 77 } = await axios.put(this.resetPath); 78 this.email = newAddress; 79 } catch { 80 this.$toast.show(__('There was an error when reseting email token.')); 81 } 82 }, 83 cancelHandler() { 84 this.$refs.modal.hide(); 85 }, 86 }, 87 modalId: 'issuable-email-modal', 88}; 89</script> 90 91<template> 92 <div> 93 <gl-button v-gl-modal="$options.modalId" variant="link" 94 ><gl-sprintf :message="__('Email a new %{name} to this project')" 95 ><template #name>{{ issuableName }}</template></gl-sprintf 96 ></gl-button 97 > 98 <gl-modal ref="modal" :modal-id="$options.modalId"> 99 <template #modal-title> 100 <gl-sprintf :message="__('Create new %{name} by email')"> 101 <template #name>{{ issuableName }}</template> 102 </gl-sprintf> 103 </template> 104 <p> 105 <gl-sprintf 106 :message=" 107 __( 108 'You can create a new %{name} inside this project by sending an email to the following email address:', 109 ) 110 " 111 > 112 <template #name>{{ issuableName }}</template> 113 </gl-sprintf> 114 </p> 115 <gl-form-input-group :value="email" readonly select-on-click class="gl-mb-4"> 116 <template #append> 117 <modal-copy-button :text="email" :title="__('Copy')" :modal-id="$options.modalId" /> 118 <gl-button 119 v-gl-tooltip.hover 120 :href="mailToLink" 121 :title="$options.i18n.sendEmail" 122 :aria-label="$options.i18n.sendEmail" 123 icon="mail" 124 /> 125 </template> 126 </gl-form-input-group> 127 <p> 128 <gl-sprintf 129 :message=" 130 __( 131 '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.', 132 ) 133 " 134 > 135 <template #quickActionsLink="{ content }"> 136 <gl-link :href="quickActionsHelpPath" target="_blank">{{ content }}</gl-link> 137 </template> 138 <template #markdownLink="{ content }"> 139 <gl-link :href="markdownHelpPath" target="_blank">{{ content }}</gl-link> 140 </template> 141 </gl-sprintf> 142 </p> 143 <p> 144 <gl-sprintf 145 :message=" 146 __( 147 '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}.', 148 ) 149 " 150 > 151 <template #helpIcon> 152 <gl-link :href="emailsHelpPagePath" target="_blank"> 153 <gl-icon class="gl-text-blue-600" name="question-o" /> 154 </gl-link> 155 </template> 156 <template #resetLink="{ content }"> 157 <gl-button 158 variant="link" 159 data-testid="reset_email_token_link" 160 @click="resetIncomingEmailToken" 161 > 162 {{ content }} 163 </gl-button> 164 </template> 165 </gl-sprintf> 166 </p> 167 <template #modal-footer> 168 <gl-button category="secondary" @click="cancelHandler">{{ __('Cancel') }}</gl-button> 169 </template> 170 </gl-modal> 171 </div> 172</template> 173