diff --git a/fluxer_app/src/components/pages/ReportPage.module.css b/fluxer_app/src/components/pages/ReportPage.module.css
index 9bb877dd..30bd7677 100644
--- a/fluxer_app/src/components/pages/ReportPage.module.css
+++ b/fluxer_app/src/components/pages/ReportPage.module.css
@@ -17,96 +17,221 @@
* along with Fluxer. If not, see
.
*/
-.container {
+.page {
+ --report-max-width: 640px;
+ max-width: var(--report-max-width);
+ width: 100%;
+ margin: 0 auto;
+ padding: 1rem 0 2rem;
display: flex;
flex-direction: column;
- gap: 1.25rem;
- max-width: 32rem;
- margin: 0 auto;
- text-align: left;
+ gap: 1rem;
}
-.stepIndicator {
- font-size: 0.75rem;
- line-height: 1rem;
- letter-spacing: 0.06em;
+.breadcrumbs {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ flex-wrap: wrap;
+ margin-bottom: 0.25rem;
+}
+
+.breadcrumbShell {
+ position: sticky;
+ top: 0;
+ z-index: 5;
+ padding-top: 0.3rem;
+ padding-bottom: 0.5rem;
+ margin-bottom: 0.25rem;
+ min-height: 2.5rem;
+ display: flex;
+ align-items: center;
+ width: 100%;
+}
+
+.breadcrumbPlaceholder {
+ width: 100%;
+ height: 1.5rem;
+}
+
+.breadcrumbStep {
+ display: flex;
+ align-items: center;
+ gap: 0.35rem;
+ padding: 0.35rem 0.6rem;
+ border-radius: 0.5rem;
+ background: none;
+ border: none;
+ color: var(--text-tertiary);
+ font-size: 0.85rem;
+ cursor: pointer;
+ transition:
+ color 0.1s ease,
+ background 0.1s ease;
+}
+
+.breadcrumbStep:disabled {
+ opacity: 0.6;
+ cursor: default;
+}
+
+.breadcrumbStep:hover:not(:disabled) {
+ color: var(--text-secondary);
+}
+
+.breadcrumbActive {
+ color: var(--text-primary);
+ cursor: default;
+ background: color-mix(in srgb, var(--background-modifier-accent) 60%, transparent);
+}
+
+.breadcrumbActive:hover {
+ color: var(--text-primary);
+}
+
+.breadcrumbNumber {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 1.4rem;
+ height: 1.4rem;
+ border-radius: 50%;
+ background: var(--background-modifier-accent);
+ font-weight: 600;
+ font-size: 0.8rem;
+}
+
+.breadcrumbActive .breadcrumbNumber {
+ background: var(--brand-primary);
+ color: white;
+}
+
+.breadcrumbLabel {
+ font-weight: 600;
+}
+
+.breadcrumbSeparator {
+ color: var(--text-tertiary);
+ font-size: 0.9rem;
+}
+
+.card {
+ background: transparent;
+ border: none;
+ border-radius: 16px;
+ padding: 1.5rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ width: 100%;
+ margin: 0;
+ box-shadow: none;
+}
+
+.cardHeader {
+ display: flex;
+ flex-direction: column;
+ gap: 0.2rem;
+ width: 100%;
+}
+
+.cardBody {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ width: 100%;
+ min-height: 1px;
+}
+
+.eyebrow {
+ margin: 0;
text-transform: uppercase;
- color: var(--text-muted);
- text-align: center;
+ letter-spacing: 0.06em;
+ font-size: 0.75rem;
+ color: var(--text-tertiary);
}
.title {
- margin-bottom: 0.25rem;
- text-align: center;
- font-size: 1.25rem;
- line-height: 1.75rem;
- font-weight: 600;
- letter-spacing: 0.025em;
+ margin: 0;
+ font-size: 1.3rem;
+ line-height: 1.6rem;
+ font-weight: 700;
color: var(--text-primary);
}
.description {
- margin-bottom: 0.75rem;
- text-align: center;
- font-size: 0.875rem;
- line-height: 1.25rem;
- color: var(--text-tertiary);
-}
-
-.metaLine {
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 0.5rem;
- font-size: 0.875rem;
- line-height: 1.25rem;
- color: var(--text-tertiary);
- text-align: center;
-}
-
-.metaValue {
- color: var(--text-primary);
- font-weight: 500;
-}
-
-.metaSpacer {
- color: var(--text-muted);
+ margin: 0.2rem 0 0;
+ font-size: 0.95rem;
+ line-height: 1.45rem;
+ color: var(--text-secondary);
}
.form {
display: flex;
flex-direction: column;
gap: 1rem;
+ align-items: stretch;
}
-.footer {
- margin-top: 1.25rem;
+.footerLinks {
+ display: flex;
+ flex-direction: column;
+ gap: 0.4rem;
+}
+
+.actionRow {
display: flex;
flex-direction: column;
gap: 0.75rem;
- align-items: center;
- text-align: center;
+ width: 100%;
}
-.footerRow {
+@media (min-width: 640px) {
+ .actionRow {
+ flex-direction: row;
+ align-items: center;
+ justify-content: flex-start;
+ }
+}
+
+.actionButton {
+ align-self: flex-start;
+}
+
+.linkRow {
display: flex;
- gap: 1rem;
- justify-content: center;
- flex-wrap: wrap;
+ align-items: center;
+ gap: 0.45rem;
+ font-size: 0.9rem;
+ color: var(--text-secondary);
+}
+
+.linkButton {
+ all: unset;
+ font-size: 0.9rem;
+ font-weight: 600;
+ color: var(--text-secondary);
+ cursor: pointer;
+}
+
+.linkButton:hover {
+ color: var(--text-primary);
+ text-decoration: underline;
+}
+
+.linkSeparator {
+ color: var(--background-modifier-accent);
}
.link {
- font-size: 0.875rem;
- line-height: 1.25rem;
+ font-size: 0.9rem;
color: var(--text-tertiary);
text-decoration: none;
background: none;
border: none;
cursor: pointer;
- transition-property: color;
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
- transition-duration: 150ms;
padding: 0;
+ transition: color 120ms ease;
}
.link:hover {
@@ -121,44 +246,24 @@
}
.errorBox {
- margin-bottom: 0.5rem;
padding: 0.75rem 1rem;
border-radius: var(--radius-lg);
background-color: color-mix(in srgb, var(--status-danger) 15%, transparent);
color: var(--status-danger);
- font-size: 0.875rem;
- line-height: 1.25rem;
- text-align: left;
-}
-
-.successBox {
- margin-top: 0.25rem;
- padding: 0.75rem 1rem;
- border-radius: var(--radius-lg);
- background-color: color-mix(in srgb, var(--status-success) 12%, transparent);
- color: var(--text-primary);
- text-align: left;
-}
-
-.successLabel {
- font-size: 0.75rem;
- line-height: 1rem;
- letter-spacing: 0.06em;
- text-transform: uppercase;
- color: var(--text-tertiary);
- margin-bottom: 0.25rem;
-}
-
-.successValue {
- font-size: 1rem;
- line-height: 1.5rem;
- font-weight: 600;
- letter-spacing: 0.02em;
- word-break: break-word;
+ font-size: 0.9rem;
+ line-height: 1.3rem;
}
.helperText {
- font-size: 0.75rem;
+ font-size: 0.8rem;
color: var(--text-muted);
- text-align: left;
+}
+
+.mainColumn {
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ width: 100%;
+ margin: 0;
}
diff --git a/fluxer_app/src/components/pages/ReportPage.tsx b/fluxer_app/src/components/pages/ReportPage.tsx
index 04dd81d4..240a9c6c 100644
--- a/fluxer_app/src/components/pages/ReportPage.tsx
+++ b/fluxer_app/src/components/pages/ReportPage.tsx
@@ -17,327 +17,138 @@
* along with Fluxer. If not, see
.
*/
-import {Trans, useLingui} from '@lingui/react/macro';
+import {useLingui} from '@lingui/react/macro';
import {observer} from 'mobx-react-lite';
import React from 'react';
-import {Input, Textarea} from '~/components/form/Input';
-import {Select, type SelectOption} from '~/components/form/Select';
-import {Button} from '~/components/uikit/Button/Button';
-import {RadioGroup, type RadioOption} from '~/components/uikit/RadioGroup/RadioGroup';
+import * as ToastActionCreators from '~/actions/ToastActionCreators';
+import type {SelectOption} from '~/components/form/Select';
+import type {RadioOption} from '~/components/uikit/RadioGroup/RadioGroup';
+import {AuthLayoutContext} from '~/contexts/AuthLayoutContext';
import {Endpoints} from '~/Endpoints';
import {useFluxerDocumentTitle} from '~/hooks/useFluxerDocumentTitle';
import HttpClient from '~/lib/HttpClient';
import styles from './ReportPage.module.css';
+import {
+ COUNTRY_OPTIONS,
+ GUILD_CATEGORY_OPTIONS,
+ MESSAGE_CATEGORY_OPTIONS,
+ REPORT_TYPE_OPTION_DESCRIPTORS,
+ USER_CATEGORY_OPTIONS,
+} from './report/optionDescriptors';
+import ReportBreadcrumbs from './report/ReportBreadcrumbs';
+import ReportStepComplete from './report/ReportStepComplete';
+import ReportStepDetails from './report/ReportStepDetails';
+import ReportStepEmail from './report/ReportStepEmail';
+import ReportStepSelection from './report/ReportStepSelection';
+import ReportStepVerification from './report/ReportStepVerification';
+import {createInitialState, reducer} from './report/state';
+import type {FlowStep, FormValues, ReportType} from './report/types';
+import {
+ EMAIL_REGEX,
+ formatVerificationCodeInput,
+ isValidHttpUrl,
+ normalizeLikelyUrl,
+ VERIFICATION_CODE_REGEX,
+} from './report/validators';
-type ReportType = 'message' | 'user' | 'guild';
-type FlowStep = 'selection' | 'email' | 'verification' | 'details' | 'complete';
-
-const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-const VERIFICATION_CODE_REGEX = /^[A-Z0-9]{4}-[A-Z0-9]{4}$/;
-
-const FLOW_TOTAL_STEPS = 4;
-
-const INITIAL_FORM_VALUES = {
- category: '',
- reporterFullName: '',
- reporterCountry: '',
- reporterFluxerTag: '',
- messageLink: '',
- messageUserTag: '',
- userId: '',
- userTag: '',
- guildId: '',
- inviteCode: '',
- additionalInfo: '',
-};
-
-type FormValues = typeof INITIAL_FORM_VALUES;
-
-type State = {
- selectedType: ReportType | null;
- flowStep: FlowStep;
-
- email: string;
- verificationCode: string;
- ticket: string | null;
-
- formValues: FormValues;
-
- isSendingCode: boolean;
- isVerifying: boolean;
- isSubmitting: boolean;
-
- errorMessage: string | null;
- successReportId: string | null;
-};
-
-type Action =
- | {type: 'RESET_ALL'}
- | {type: 'SELECT_TYPE'; reportType: ReportType}
- | {type: 'GO_TO_SELECTION'}
- | {type: 'GO_TO_EMAIL'}
- | {type: 'GO_TO_VERIFICATION'}
- | {type: 'GO_TO_DETAILS'}
- | {type: 'SET_ERROR'; message: string | null}
- | {type: 'SET_EMAIL'; email: string}
- | {type: 'SET_VERIFICATION_CODE'; code: string}
- | {type: 'SET_TICKET'; ticket: string | null}
- | {type: 'SET_FORM_FIELD'; field: keyof FormValues; value: string}
- | {type: 'SENDING_CODE'; value: boolean}
- | {type: 'VERIFYING'; value: boolean}
- | {type: 'SUBMITTING'; value: boolean}
- | {type: 'SUBMIT_SUCCESS'; reportId: string};
-
-const createInitialState = (): State => ({
- selectedType: null,
- flowStep: 'selection',
-
- email: '',
- verificationCode: '',
- ticket: null,
-
- formValues: {...INITIAL_FORM_VALUES},
-
- isSendingCode: false,
- isVerifying: false,
- isSubmitting: false,
-
- errorMessage: null,
- successReportId: null,
-});
-
-function reducer(state: State, action: Action): State {
- switch (action.type) {
- case 'RESET_ALL':
- return createInitialState();
-
- case 'SELECT_TYPE':
- return {
- ...createInitialState(),
- selectedType: action.reportType,
- flowStep: 'email',
- };
-
- case 'GO_TO_SELECTION':
- return {
- ...createInitialState(),
- };
-
- case 'GO_TO_EMAIL':
- return {
- ...state,
- flowStep: 'email',
- verificationCode: '',
- ticket: null,
- isVerifying: false,
- errorMessage: null,
- };
-
- case 'GO_TO_VERIFICATION':
- return {
- ...state,
- flowStep: 'verification',
- verificationCode: '',
- ticket: null,
- errorMessage: null,
- };
-
- case 'GO_TO_DETAILS':
- return {
- ...state,
- flowStep: 'details',
- errorMessage: null,
- };
-
- case 'SET_ERROR':
- return {...state, errorMessage: action.message};
-
- case 'SET_EMAIL':
- return {...state, email: action.email, errorMessage: null};
-
- case 'SET_VERIFICATION_CODE':
- return {...state, verificationCode: action.code, errorMessage: null};
-
- case 'SET_TICKET':
- return {...state, ticket: action.ticket};
-
- case 'SET_FORM_FIELD':
- return {
- ...state,
- formValues: {...state.formValues, [action.field]: action.value},
- errorMessage: null,
- };
-
- case 'SENDING_CODE':
- return {...state, isSendingCode: action.value};
-
- case 'VERIFYING':
- return {...state, isVerifying: action.value};
-
- case 'SUBMITTING':
- return {...state, isSubmitting: action.value};
-
- case 'SUBMIT_SUCCESS':
- return {
- ...state,
- successReportId: action.reportId,
- flowStep: 'complete',
- isSubmitting: false,
- errorMessage: null,
- };
-
- default:
- return state;
- }
-}
-
-function getStepNumber(step: FlowStep): number | null {
- switch (step) {
- case 'selection':
- return 1;
- case 'email':
- return 2;
- case 'verification':
- return 3;
- case 'details':
- return 4;
- case 'complete':
- return null;
- }
-}
-
-function formatVerificationCodeInput(raw: string): string {
- const cleaned = raw
- .toUpperCase()
- .replace(/[^A-Z0-9]/g, '')
- .slice(0, 8);
- if (cleaned.length <= 4) return cleaned;
- return `${cleaned.slice(0, 4)}-${cleaned.slice(4)}`;
-}
-
-function normalizeLikelyUrl(raw: string): string {
- const trimmed = raw.trim();
- if (!trimmed) return '';
-
- if (!/^[a-zA-Z][a-zA-Z\d+\-.]*:\/\//.test(trimmed)) {
- return `https://${trimmed}`;
- }
-
- return trimmed;
-}
-
-function isValidHttpUrl(raw: string): boolean {
- try {
- const url = new URL(raw);
- return url.protocol === 'http:' || url.protocol === 'https:';
- } catch {
- return false;
- }
-}
+type ValidationError = {path: string; message: string};
export const ReportPage = observer(() => {
const {t} = useLingui();
+ const authLayout = React.useContext(AuthLayoutContext);
useFluxerDocumentTitle(t`Report Illegal Content`);
+ React.useLayoutEffect(() => {
+ if (!authLayout) return;
+ authLayout.setShowLogoSide(false);
+ return () => authLayout.setShowLogoSide(true);
+ }, [authLayout]);
+
const [state, dispatch] = React.useReducer(reducer, undefined, createInitialState);
- const reportTypeOptions = React.useMemo
>>(
- () => [
- {value: 'message', name: t`Report a Message`},
- {value: 'user', name: t`Report a User Profile`},
- {value: 'guild', name: t`Report a Community`},
- ],
+ const parseValidationErrors = React.useCallback(
+ (
+ error: unknown,
+ ): {fieldErrors: Partial>; generalMessage: string | null} | null => {
+ if (error && typeof error === 'object' && 'body' in error && (error as {body?: unknown}).body) {
+ const body = (error as {body?: any}).body;
+ const pathMap: Record = {
+ category: 'category',
+ reporter_full_legal_name: 'reporterFullName',
+ reporter_country_of_residence: 'reporterCountry',
+ reporter_fluxer_tag: 'reporterFluxerTag',
+ message_link: 'messageLink',
+ reported_user_tag: 'messageUserTag',
+ user_id: 'userId',
+ user_tag: 'userTag',
+ guild_id: 'guildId',
+ invite_code: 'inviteCode',
+ additional_info: 'additionalInfo',
+ };
+
+ if (body?.code === 'INVALID_FORM_BODY' && Array.isArray(body.errors)) {
+ const fieldErrors: Partial> = {};
+ const errors = body.errors as Array;
+ for (const err of errors) {
+ const mapped = pathMap[err.path];
+ if (mapped) {
+ fieldErrors[mapped] = err.message;
+ }
+ }
+
+ const hasFieldErrors = Object.keys(fieldErrors).length > 0;
+ const generalMessage = hasFieldErrors
+ ? null
+ : (errors[0]?.message ?? t`Something went wrong while submitting the report. Please try again.`);
+
+ return {fieldErrors, generalMessage};
+ }
+
+ if (typeof body?.message === 'string') {
+ return {fieldErrors: {}, generalMessage: body.message};
+ }
+ }
+
+ return null;
+ },
[t],
);
- const reportTypeLabel = React.useMemo(() => {
- const match = reportTypeOptions.find((o) => o.value === state.selectedType);
- return match?.name ?? '';
- }, [reportTypeOptions, state.selectedType]);
+ const reportTypeOptions = React.useMemo>>(() => {
+ return REPORT_TYPE_OPTION_DESCRIPTORS.map((option) => ({
+ value: option.value,
+ name: t(option.name),
+ }));
+ }, [t]);
- const messageCategoryOptions = React.useMemo>>(
- () => [
- {value: '', label: t`Select a category`},
- {value: 'harassment', label: t`Harassment or Bullying`},
- {value: 'hate_speech', label: t`Hate Speech`},
- {value: 'violent_content', label: t`Violent or Graphic Content`},
- {value: 'spam', label: t`Spam or Scam`},
- {value: 'nsfw_violation', label: t`NSFW Policy Violation`},
- {value: 'illegal_activity', label: t`Illegal Activity`},
- {value: 'doxxing', label: t`Sharing Personal Information`},
- {value: 'self_harm', label: t`Self-Harm or Suicide`},
- {value: 'child_safety', label: t`Child Safety Concerns`},
- {value: 'malicious_links', label: t`Malicious Links`},
- {value: 'impersonation', label: t`Impersonation`},
- {value: 'other', label: t`Other`},
- ],
- [t],
- );
+ const messageCategoryOptions = React.useMemo>>(() => {
+ return MESSAGE_CATEGORY_OPTIONS.map((option) => ({
+ value: option.value,
+ label: t(option.label),
+ }));
+ }, [t]);
- const userCategoryOptions = React.useMemo>>(
- () => [
- {value: '', label: t`Select a category`},
- {value: 'harassment', label: t`Harassment or Bullying`},
- {value: 'hate_speech', label: t`Hate Speech`},
- {value: 'spam_account', label: t`Spam Account`},
- {value: 'impersonation', label: t`Impersonation`},
- {value: 'underage_user', label: t`Underage User`},
- {value: 'inappropriate_profile', label: t`Inappropriate Profile`},
- {value: 'other', label: t`Other`},
- ],
- [t],
- );
+ const userCategoryOptions = React.useMemo>>(() => {
+ return USER_CATEGORY_OPTIONS.map((option) => ({
+ value: option.value,
+ label: t(option.label),
+ }));
+ }, [t]);
- const guildCategoryOptions = React.useMemo>>(
- () => [
- {value: '', label: t`Select a category`},
- {value: 'harassment', label: t`Harassment`},
- {value: 'hate_speech', label: t`Hate Speech`},
- {value: 'extremist_community', label: t`Extremist Community`},
- {value: 'illegal_activity', label: t`Illegal Activity`},
- {value: 'child_safety', label: t`Child Safety Concerns`},
- {value: 'raid_coordination', label: t`Raid Coordination`},
- {value: 'spam', label: t`Spam or Scam Community`},
- {value: 'malware_distribution', label: t`Malware Distribution`},
- {value: 'other', label: t`Other`},
- ],
- [t],
- );
+ const guildCategoryOptions = React.useMemo>>(() => {
+ return GUILD_CATEGORY_OPTIONS.map((option) => ({
+ value: option.value,
+ label: t(option.label),
+ }));
+ }, [t]);
- const countryOptions = React.useMemo>>(
- () => [
- {value: '', label: t`Select a country`},
- {value: 'AT', label: t`Austria`},
- {value: 'BE', label: t`Belgium`},
- {value: 'BG', label: t`Bulgaria`},
- {value: 'HR', label: t`Croatia`},
- {value: 'CY', label: t`Cyprus`},
- {value: 'CZ', label: t`Czech Republic`},
- {value: 'DK', label: t`Denmark`},
- {value: 'EE', label: t`Estonia`},
- {value: 'FI', label: t`Finland`},
- {value: 'FR', label: t`France`},
- {value: 'DE', label: t`Germany`},
- {value: 'GR', label: t`Greece`},
- {value: 'HU', label: t`Hungary`},
- {value: 'IE', label: t`Ireland`},
- {value: 'IT', label: t`Italy`},
- {value: 'LV', label: t`Latvia`},
- {value: 'LT', label: t`Lithuania`},
- {value: 'LU', label: t`Luxembourg`},
- {value: 'MT', label: t`Malta`},
- {value: 'NL', label: t`Netherlands`},
- {value: 'PL', label: t`Poland`},
- {value: 'PT', label: t`Portugal`},
- {value: 'RO', label: t`Romania`},
- {value: 'SK', label: t`Slovakia`},
- {value: 'SI', label: t`Slovenia`},
- {value: 'ES', label: t`Spain`},
- {value: 'SE', label: t`Sweden`},
- ],
- [t],
- );
+ const countryOptions = React.useMemo>>(() => {
+ return COUNTRY_OPTIONS.map((option) => ({
+ value: option.value,
+ label: t(option.label),
+ }));
+ }, [t]);
const categoryOptionsByType = React.useMemo(() => {
return {
@@ -349,7 +160,11 @@ export const ReportPage = observer(() => {
const categoryOptions = state.selectedType ? categoryOptionsByType[state.selectedType] : [];
- const isBusy = state.isSendingCode || state.isVerifying || state.isSubmitting;
+ React.useEffect(() => {
+ if (state.resendCooldownSeconds <= 0) return;
+ const timer = window.setInterval(() => dispatch({type: 'TICK_RESEND_COOLDOWN'}), 1000);
+ return () => window.clearInterval(timer);
+ }, [state.resendCooldownSeconds, dispatch]);
React.useEffect(() => {
if (state.flowStep === 'selection') return;
@@ -399,6 +214,9 @@ export const ReportPage = observer(() => {
dispatch({type: 'SET_ERROR', message: null});
dispatch({type: 'SENDING_CODE', value: true});
+ if (state.flowStep === 'verification') {
+ dispatch({type: 'START_RESEND_COOLDOWN', seconds: 30});
+ }
try {
await HttpClient.post({
@@ -408,12 +226,19 @@ export const ReportPage = observer(() => {
dispatch({type: 'SET_EMAIL', email: normalizedEmail});
dispatch({type: 'GO_TO_VERIFICATION'});
+
+ if (state.flowStep === 'verification') {
+ ToastActionCreators.createToast({type: 'success', children: t`Code resent`});
+ }
} catch (_error) {
dispatch({type: 'SET_ERROR', message: t`Failed to send verification code. Please try again.`});
+ if (state.flowStep === 'verification') {
+ ToastActionCreators.createToast({type: 'error', children: t`Failed to resend code. Please try again.`});
+ }
} finally {
dispatch({type: 'SENDING_CODE', value: false});
}
- }, [state.email, state.isSendingCode, state.isVerifying, state.isSubmitting, t]);
+ }, [state.email, state.isSendingCode, state.isVerifying, state.isSubmitting, state.flowStep, t]);
const verifyCode = React.useCallback(async () => {
if (state.isSendingCode || state.isVerifying || state.isSubmitting) return;
@@ -464,6 +289,8 @@ export const ReportPage = observer(() => {
return;
}
+ dispatch({type: 'CLEAR_FIELD_ERRORS'});
+
const reporterFullName = state.formValues.reporterFullName.trim();
const reporterCountry = state.formValues.reporterCountry;
const reporterFluxerTag = state.formValues.reporterFluxerTag.trim();
@@ -560,413 +387,149 @@ export const ReportPage = observer(() => {
dispatch({type: 'SUBMIT_SUCCESS', reportId: response.body.report_id});
} catch (_error) {
- dispatch({type: 'SET_ERROR', message: t`Something went wrong while submitting the report. Please try again.`});
+ const parsed = parseValidationErrors(_error);
+ if (parsed) {
+ dispatch({type: 'SET_FIELD_ERRORS', errors: parsed.fieldErrors});
+ dispatch({type: 'SET_ERROR', message: parsed.generalMessage});
+ } else {
+ dispatch({type: 'SET_ERROR', message: t`Something went wrong while submitting the report. Please try again.`});
+ }
dispatch({type: 'SUBMITTING', value: false});
}
}, [state, t]);
- const stepNumber = getStepNumber(state.flowStep);
+ const reporterFullName = state.formValues.reporterFullName.trim();
+ const reporterCountry = state.formValues.reporterCountry;
+ const category = state.formValues.category;
- const renderStepHeader = (title: React.ReactNode, description: React.ReactNode) => (
- <>
- {stepNumber !== null && (
-
-
- Step {stepNumber} of {FLOW_TOTAL_STEPS}
-
-
- )}
- {title}
- {description}
-
+ const messageLinkNormalized = normalizeLikelyUrl(state.formValues.messageLink);
+ const messageLinkOk = state.selectedType !== 'message' ? true : isValidHttpUrl(messageLinkNormalized);
+
+ const userTargetOk =
+ state.selectedType !== 'user' ? true : Boolean(state.formValues.userId.trim() || state.formValues.userTag.trim());
+
+ const guildTargetOk = state.selectedType !== 'guild' ? true : Boolean(state.formValues.guildId.trim());
+
+ const canSubmit =
+ Boolean(category) &&
+ Boolean(reporterFullName) &&
+ Boolean(reporterCountry) &&
+ messageLinkOk &&
+ userTargetOk &&
+ guildTargetOk;
+
+ const handleBreadcrumbSelect = (step: FlowStep) => {
+ switch (step) {
+ case 'selection':
+ dispatch({type: 'GO_TO_SELECTION'});
+ break;
+ case 'email':
+ dispatch({type: 'GO_TO_EMAIL'});
+ break;
+ case 'verification':
+ dispatch({type: 'GO_TO_VERIFICATION'});
+ break;
+ case 'details':
+ dispatch({type: 'GO_TO_DETAILS'});
+ break;
+ default:
+ break;
+ }
+ };
+
+ const renderStep = () => {
+ switch (state.flowStep) {
+ case 'selection':
+ return (
+
+ );
+
+ case 'email':
+ return (
+ dispatch({type: 'SET_EMAIL', email: value})}
+ onSubmit={() => void sendVerificationCode()}
+ onStartOver={() => dispatch({type: 'GO_TO_SELECTION'})}
+ />
+ );
+
+ case 'verification':
+ return (
+ dispatch({type: 'GO_TO_EMAIL'})}
+ onResend={() => void sendVerificationCode()}
+ onVerify={() => void verifyCode()}
+ onCodeChange={(value) =>
+ dispatch({type: 'SET_VERIFICATION_CODE', code: formatVerificationCodeInput(value)})
+ }
+ onStartOver={() => dispatch({type: 'GO_TO_SELECTION'})}
+ />
+ );
+
+ case 'details':
+ return (
+ dispatch({type: 'SET_FORM_FIELD', field, value})}
+ onSubmit={() => void handleSubmit()}
+ onStartOver={() => dispatch({type: 'RESET_ALL'})}
+ onBack={() => dispatch({type: 'GO_TO_VERIFICATION'})}
+ messageLinkOk={messageLinkOk}
+ userTargetOk={userTargetOk}
+ guildTargetOk={guildTargetOk}
+ />
+ );
+
+ case 'complete':
+ return state.successReportId ? dispatch({type: 'RESET_ALL'})} /> : null;
+
+ default:
+ return null;
+ }
+ };
+
+ const breadcrumbs =
+ state.flowStep === 'complete' ? null : (
+
+ );
+
+ const breadcrumbShell =
+ state.flowStep === 'complete' ? null : (
+
+ {breadcrumbs ?? }
+
+ );
+
+ return (
+
+ {breadcrumbShell}
+
{renderStep()}
+
- {renderStepHeader(
-
Report Submitted,
-
Thank you for filing a report. We'll review it as soon as possible.,
- )}
-
-
-
- Your submission ID
-
-
{state.successReportId}
-
-
-
-
-
-
- {renderStepHeader(
-
Report Illegal Content,
-
- Use this form to report illegal content under the Digital Services Act (DSA). Select what you want to
- report.
- ,
- )}
-
-
-
- options={reportTypeOptions}
- value={state.selectedType}
- onChange={onSelectType}
- aria-label={t`Report Type`}
- />
-
-
- {renderStepHeader(
-
Enter Your Email,
-
We need to verify your email address before you can submit a report.,
- )}
-
- {state.selectedType && (
-
- Reporting: {reportTypeLabel}
-
- )}
-
- {state.errorMessage && (
-
- {state.errorMessage}
-
- )}
-
-
-
-
-
-
-
- {renderStepHeader(
-
Enter Verification Code,
-
We sent a verification code to {state.email}.,
- )}
-
- {state.errorMessage && (
-
- {state.errorMessage}
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
- {renderStepHeader(
Report Details,
Please provide the details of your report.)}
-
-
- Reporting: {reportTypeLabel}
-
- •
-
-
- Email verified
-
-
-
- {state.errorMessage && (
-
- {state.errorMessage}
-
- )}
-
-
+