/
ReportIncidentDialog.vue
282 lines (260 loc) · 8.41 KB
/
ReportIncidentDialog.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
<template>
<cdx-dialog
v-model:open="wrappedOpen"
:title="$i18n( 'reportincident-dialog-title' ).text()"
:close-button-label="$i18n( 'reportincident-dialog-close-btn' ).text()"
class="ext-reportincident-dialog"
>
<!-- dialog content-->
<div class="ext-reportincident-dialog__content">
<slot :name="currentSlotName"></slot>
</div>
<!-- dialog footer -->
<template #footer>
<p
v-if="showFooterHelpText"
v-i18n-html:reportincident-dialog-admin-review="[ adminLink ]"
class="ext-reportincident-dialog__text-subtext">
</p>
<cdx-message
v-if="showFooterErrorText"
type="error"
inline
class="ext-reportincident-dialog__form-error-text">
{{ footerErrorMessage }}
</cdx-message>
<div class="ext-reportincident-dialog-footer">
<cdx-button
class="ext-reportincident-dialog-footer__back-btn"
:disabled="formSubmissionInProgress || null"
@click="navigatePrevious"
>
{{ defaultButtonLabel }}
</cdx-button>
<cdx-button
class="ext-reportincident-dialog-footer__next-btn"
weight="primary"
action="progressive"
:disabled="formSubmissionInProgress || null"
@click="navigateNext"
>
{{ primaryButtonLabel }}
</cdx-button>
</div>
</template>
</cdx-dialog>
</template>
<script>
const useFormStore = require( '../stores/Form.js' );
const { toRef, ref, computed } = require( 'vue' );
const { CdxButton, CdxDialog, CdxMessage, useModelWrapper } = require( '@wikimedia/codex' );
const Constants = require( '../Constants.js' );
// @vue/component
module.exports = exports = {
name: 'ReportIncidentDialog',
components: {
CdxButton,
CdxDialog,
CdxMessage
},
props: {
initialStep: {
type: String,
default: Constants.DIALOG_STEP_1
}
},
emits: [ 'update:open' ],
setup( props, { emit } ) {
const wrappedOpen = useModelWrapper( toRef( props, 'open' ), emit, 'update:open' );
const currentStep = ref( props.initialStep );
const footerErrorMessage = ref( '' );
const formSubmissionInProgress = ref( false );
const currentSlotName = computed( () => `${currentStep.value}` );
const showFooterHelpText = computed( () => {
return currentStep.value === Constants.DIALOG_STEP_1;
} );
const showFooterErrorText = computed( () => {
return currentStep.value === Constants.DIALOG_STEP_2 && footerErrorMessage.value !== '';
} );
const primaryButtonLabel = computed( () => {
return currentStep.value === Constants.DIALOG_STEP_1 ?
mw.msg( 'reportincident-dialog-proceed-btn' ) :
mw.msg( 'reportincident-dialog-submit-btn' );
} );
const defaultButtonLabel = computed( () => {
return currentStep.value === Constants.DIALOG_STEP_1 ?
mw.msg( 'reportincident-dialog-first-step-cancel-btn' ) :
mw.msg( 'reportincident-dialog-back-btn' );
} );
/**
* Prints the email that was sent or failed to send
* at the stage of calling IEmailer::send. This is
* only returned by the server when in developer
* mode, so this should not cause spam in production.
*
* @param {Object} response
*/
function printEmailToConsole( response ) {
if ( response && response.sentEmail ) {
// Display the email sent to the administrators if in
// developer mode.
/* eslint-disable no-console */
console.log( 'An email has been sent for this report' );
console.log( 'Sent from:\n' + response.sentEmail.from.address );
console.log( 'Sent to:\n' + response.sentEmail.to.map( function ( item ) {
return item.address;
} ).join( ', ' ) );
console.log( 'Subject of the email:\n' + response.sentEmail.subject );
console.log( 'Body of the email:\n' + response.sentEmail.body );
/* eslint-enable no-console */
}
}
/**
* Function called when the POST request to the
* ReportIncident reporting REST API succeeds.
*
* @param {Object} response
*/
function onReportSubmitSuccess( response ) {
const store = useFormStore();
printEmailToConsole( response );
wrappedOpen.value = false;
currentStep.value = Constants.DIALOG_STEP_1;
store.$reset();
store.formSuccessfullySubmitted = true;
formSubmissionInProgress.value = false;
}
/**
* Function called when the POST request to the
* ReportIncident reporting REST API fails.
*
* @param {string} _err
* @param {Object} errObject
*/
function onReportSubmitFailure( _err, errObject ) {
const store = useFormStore();
let errorKey = null;
if (
errObject.xhr.responseJSON
) {
printEmailToConsole( errObject.xhr.responseJSON );
if ( errObject.xhr.responseJSON.errorKey ) {
errorKey = errObject.xhr.responseJSON.errorKey;
}
}
if ( errorKey === 'reportincident-dialog-violator-nonexistent' ) {
// Show the server error next to the correct field.
store.reportedUserDoesNotExist = true;
// Remove any existing footer error message as a field
// specific one exists.
footerErrorMessage.value = '';
// Re-enable the field if is disabled as the server has said
// the user does not exist, so it will need to be fixed.
store.inputReportedUserDisabled = false;
} else {
let message;
if ( !navigator.onLine ) {
// If the navigator.onLine is false, the user is definitely
// offline so display the internet disconnected error. The user
// may still be offline if this property is true and in this
// case the generic error will be shown.
message = mw.msg( 'reportincident-dialog-internet-disconnected-error' );
} else if (
errObject.xhr.status >= 500 &&
errObject.xhr.status < 600
) {
// If the HTTP status code starts with 5, then this is a
// server error and the footer error message should indicate
// it is the server that was the problem.
message = mw.msg( 'reportincident-dialog-server-error' );
} else {
// Otherwise use the generic error.
message = mw.msg( 'reportincident-dialog-generic-error' );
}
footerErrorMessage.value = message;
}
formSubmissionInProgress.value = false;
}
function navigateNext() {
// if on the first page, navigate to the second page
if ( currentStep.value === Constants.DIALOG_STEP_1 ) {
currentStep.value = Constants.DIALOG_STEP_2;
} else {
// if on the second page, validate, then POST the data
const store = useFormStore();
const restPayload = store.restPayload;
restPayload.revisionId = mw.config.get( 'wgCurRevisionId' );
// TODO: Simulate mw.Api.postWithToken() by re-trying if the REST API call fails
// because the CSRF token does not match.
restPayload.token = mw.user.tokens.get( 'csrfToken' );
if ( store.isFormValidForSubmission() ) {
formSubmissionInProgress.value = true;
new mw.Rest().post(
'/reportincident/v0/report',
restPayload
).then( onReportSubmitSuccess, onReportSubmitFailure );
} else {
// Clear footer error messages as the form-specific ones will be set.
footerErrorMessage.value = '';
}
}
}
function navigatePrevious() {
if ( currentStep.value === Constants.DIALOG_STEP_1 ) {
// if on the first page, close the dialog
wrappedOpen.value = false;
// Also clear any form data, as the user has had to
// navigate back from the second page to the first to
// cancel which suggests they don't want to submit this
// report.
const store = useFormStore();
store.$reset();
} else {
// if on the second page, navigate back to the first page
currentStep.value = Constants.DIALOG_STEP_1;
}
}
const adminLink = mw.util.getUrl( mw.config.get( 'wgReportIncidentAdministratorsPage' ) );
return {
wrappedOpen,
primaryButtonLabel,
defaultButtonLabel,
currentSlotName,
navigateNext,
navigatePrevious,
adminLink,
footerErrorMessage,
showFooterHelpText,
showFooterErrorText,
formSubmissionInProgress,
// Used in tests, so needs to be passed out here.
/* eslint-disable vue/no-unused-properties */
onReportSubmitFailure
/* eslint-enable vue/no-unused-properties */
};
}
};
</script>
<style lang="less">
@import ( reference ) 'mediawiki.skin.variables.less';
.ext-reportincident-dialog {
.ext-reportincident-dialog-footer {
float: right;
}
@media screen and ( max-width: @max-width-breakpoint-mobile ) {
.ext-reportincident-dialog-footer {
display: flex;
flex-direction: column-reverse;
width: 100%;
&__back-btn {
width: 100%;
margin-top: @spacing-35;
}
&__next-btn {
width: 100%;
margin-top: @spacing-35;
}
}
}
}
</style>