diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-01-18 19:00:14 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-01-18 19:00:14 +0000 |
commit | 05f0ebba3a2c8ddf39e436f412dc2ab5bf1353b2 (patch) | |
tree | 11d0f2a6ec31c7793c184106cedc2ded3d9a2cc5 /app/assets/javascripts/abuse_reports/components/abuse_category_selector.vue | |
parent | ec73467c23693d0db63a797d10194da9e72a74af (diff) | |
download | gitlab-ce-05f0ebba3a2c8ddf39e436f412dc2ab5bf1353b2.tar.gz |
Add latest changes from gitlab-org/gitlab@15-8-stable-eev15.8.0-rc42
Diffstat (limited to 'app/assets/javascripts/abuse_reports/components/abuse_category_selector.vue')
-rw-r--r-- | app/assets/javascripts/abuse_reports/components/abuse_category_selector.vue | 112 |
1 files changed, 112 insertions, 0 deletions
diff --git a/app/assets/javascripts/abuse_reports/components/abuse_category_selector.vue b/app/assets/javascripts/abuse_reports/components/abuse_category_selector.vue new file mode 100644 index 00000000000..c716afbbcf0 --- /dev/null +++ b/app/assets/javascripts/abuse_reports/components/abuse_category_selector.vue @@ -0,0 +1,112 @@ +<script> +import { GlButton, GlDrawer, GlForm, GlFormGroup, GlFormRadioGroup } from '@gitlab/ui'; +import { getContentWrapperHeight } from '~/lib/utils/dom_utils'; +import { s__, __ } from '~/locale'; +import csrf from '~/lib/utils/csrf'; + +export default { + name: 'AbuseCategorySelector', + csrf, + components: { + GlButton, + GlDrawer, + GlForm, + GlFormGroup, + GlFormRadioGroup, + }, + inject: { + reportAbusePath: { + default: '', + }, + reportedUserId: { + default: '', + }, + reportedFromUrl: { + default: '', + }, + }, + props: { + showDrawer: { + type: Boolean, + required: true, + }, + }, + i18n: { + title: __('Report abuse to administrator'), + close: __('Close'), + label: s__('ReportAbuse|Why are you reporting this user?'), + next: __('Next'), + }, + categoryOptions: [ + { value: 'spam', text: s__("ReportAbuse|They're posting spam.") }, + { value: 'offensive', text: s__("ReportAbuse|They're being offsensive or abusive.") }, + { value: 'phishing', text: s__("ReportAbuse|They're phising.") }, + { value: 'crypto', text: s__("ReportAbuse|They're crypto mining.") }, + { + value: 'credentials', + text: s__("ReportAbuse|They're posting personal information or credentials."), + }, + { value: 'copyright', text: s__("ReportAbuse|They're violating a copyright or trademark.") }, + { value: 'malware', text: s__("ReportAbuse|They're posting malware.") }, + { value: 'other', text: s__('ReportAbuse|Something else.') }, + ], + data() { + return { + selected: '', + }; + }, + computed: { + drawerOffsetTop() { + return getContentWrapperHeight('.content-wrapper'); + }, + }, + methods: { + closeDrawer() { + this.$emit('close-drawer'); + }, + }, +}; +</script> +<template> + <gl-drawer + :header-height="drawerOffsetTop" + :z-index="300" + :open="showDrawer" + @close="closeDrawer" + > + <template #title> + <h2 + class="gl-font-size-h2 gl-mt-0 gl-mb-0 gl-line-height-24" + data-testid="category-drawer-title" + > + {{ $options.i18n.title }} + </h2> + </template> + <template #default> + <gl-form :action="reportAbusePath" method="post" class="gl-text-left"> + <input :value="$options.csrf.token" type="hidden" name="authenticity_token" /> + + <input type="hidden" name="user_id" :value="reportedUserId" data-testid="input-user-id" /> + <input + type="hidden" + name="abuse_report[reported_from_url]" + :value="reportedFromUrl" + data-testid="input-referer" + /> + + <gl-form-group :label="$options.i18n.label"> + <gl-form-radio-group + v-model="selected" + :options="$options.categoryOptions" + name="abuse_report[category]" + required + /> + </gl-form-group> + + <gl-button type="submit" variant="confirm" data-testid="submit-form-button"> + {{ $options.i18n.next }} + </gl-button> + </gl-form> + </template> + </gl-drawer> +</template> |