X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Fresults%2FReportForm.js;h=2e85f4a4c3abfb9c334b3cd18253bf91727001f3;hb=3a069159f7971758817bb281f72a41ddc7d7a958;hp=9940171f344f676edf3ce1d89388e4f789be5be7;hpb=537b998e8059c56e3a20ee2a89d42c3bbfbb80b8;p=alttp.git

diff --git a/resources/js/components/results/ReportForm.js b/resources/js/components/results/ReportForm.js
index 9940171..2e85f4a 100644
--- a/resources/js/components/results/ReportForm.js
+++ b/resources/js/components/results/ReportForm.js
@@ -66,19 +66,39 @@ const ReportForm = ({
 				</Form.Group>
 			</Row>
 		: null}
-		<Row>
-			<Form.Group as={Col} sm={12} controlId="report.comment">
-				<Form.Label>{i18n.t('results.comment')}</Form.Label>
-				<Form.Control
-					as="textarea"
-					isInvalid={!!(touched.comment && errors.comment)}
-					name="comment"
-					onBlur={handleBlur}
-					onChange={handleChange}
-					value={values.comment || ''}
-				/>
-			</Form.Group>
-		</Row>
+		<Form.Group controlId="report.vod">
+			<Form.Label>{i18n.t('results.vod')}</Form.Label>
+			<Form.Control
+				isInvalid={!!(touched.vod && errors.vod)}
+				name="vod"
+				onBlur={handleBlur}
+				onChange={handleChange}
+				placeholder="https://twitch.tv/youtube"
+				type="text"
+				value={values.vod || ''}
+			/>
+			{touched.vod && errors.vod ?
+				<Form.Control.Feedback type="invalid">
+					{i18n.t(errors.vod)}
+				</Form.Control.Feedback>
+			:
+				<Form.Text muted>
+					{i18n.t('results.vodNote')}
+				</Form.Text>
+			}
+		</Form.Group>
+		<Form.Group controlId="report.comment">
+			<Form.Label>{i18n.t('results.comment')}</Form.Label>
+			<Form.Control
+				as="textarea"
+				isInvalid={!!(touched.comment && errors.comment)}
+				name="comment"
+				onBlur={handleBlur}
+				onChange={handleChange}
+				rows="6"
+				value={values.comment || ''}
+			/>
+		</Form.Group>
 	</Modal.Body>
 	<Modal.Footer>
 		{onCancel ?
@@ -97,6 +117,7 @@ ReportForm.propTypes = {
 		comment: PropTypes.string,
 		forfeit: PropTypes.string,
 		time: PropTypes.string,
+		vod: PropTypes.string,
 	}),
 	handleBlur: PropTypes.func,
 	handleChange: PropTypes.func,
@@ -109,11 +130,13 @@ ReportForm.propTypes = {
 		comment: PropTypes.bool,
 		forfeit: PropTypes.bool,
 		time: PropTypes.bool,
+		vod: PropTypes.bool,
 	}),
 	values: PropTypes.shape({
 		comment: PropTypes.string,
 		forfeit: PropTypes.bool,
 		time: PropTypes.string,
+		vod: PropTypes.string,
 	}),
 };
 
@@ -121,7 +144,7 @@ export default withFormik({
 	displayName: 'ReportForm',
 	enableReinitialize: true,
 	handleSubmit: async (values, actions) => {
-		const { comment, forfeit, round_id, time, user_id } = values;
+		const { comment, forfeit, round_id, time, user_id, vod } = values;
 		const { setErrors } = actions;
 		const { onCancel } = actions.props;
 		try {
@@ -131,6 +154,7 @@ export default withFormik({
 				round_id,
 				time: parseTime(time) || 0,
 				user_id,
+				vod,
 			});
 			toastr.success(i18n.t('results.reportSuccess'));
 			if (onCancel) {
@@ -151,6 +175,7 @@ export default withFormik({
 			round_id: round.id,
 			time: result && result.time ? formatTime(result) : '',
 			user_id: user.id,
+			vod: result && result.vod ? result.vod : '',
 		};
 	},
 	validationSchema: yup.object().shape({
@@ -158,7 +183,8 @@ export default withFormik({
 		forfeit: yup.boolean().required(),
 		time: yup.string().time().when('forfeit', {
 			is: false,
-			then: yup.string().required().time(),
+			then: () => yup.string().required().time(),
 		}),
+		vod: yup.string().url(),
 	}),
 })(withTranslation()(ReportForm));