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