Permalink
Cannot retrieve contributors at this time
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
car-crushers-portal/app/routes/report.tsx
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
344 lines (303 sloc)
8.74 KB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { | |
Button, | |
CircularProgress, | |
CircularProgressLabel, | |
Container, | |
FormControl, | |
FormLabel, | |
Heading, | |
HStack, | |
Input, | |
Link, | |
Text, | |
Textarea, | |
useToast, | |
} from "@chakra-ui/react"; | |
import { useEffect, useState } from "react"; | |
import { useLoaderData } from "@remix-run/react"; | |
import Success from "../../components/Success.js"; | |
export async function loader({ | |
context, | |
}: { | |
context: RequestContext; | |
}): Promise<{ logged_in: boolean; site_key: string }> { | |
return { | |
logged_in: Boolean(context.data.current_user), | |
site_key: context.env.TURNSTILE_SITEKEY, | |
}; | |
} | |
export function meta() { | |
return [ | |
{ | |
title: "Report an Exploiter - Car Crushers", | |
}, | |
]; | |
} | |
export default function () { | |
const [fileProgress, setFileProgress] = useState(0); | |
const [showSuccess, setShowSuccess] = useState(false); | |
const [supportsRequestStreams, setSupportsRequestStreams] = useState(false); | |
const toast = useToast(); | |
const [uploading, setUploading] = useState(false); | |
const fileTypes: { [k: string]: string } = { | |
gif: "image/gif", | |
heic: "image/heic", | |
heif: "image/heif", | |
jfif: "image/jpeg", | |
jpeg: "image/jpeg", | |
jpg: "image/jpg", | |
m4v: "video/x-m4v", | |
mkv: "video/x-matroska", | |
mov: "video/quicktime", | |
mp4: "video/mp4", | |
png: "image/png", | |
webp: "image/webp", | |
webm: "video/webm", | |
wmv: "video/x-ms-wmv", | |
}; | |
useEffect(() => { | |
if (sessionStorage.getItem("REPORT_SUCCESS")) { | |
sessionStorage.removeItem("REPORT_SUCCESS"); | |
return setShowSuccess(true); | |
} | |
setSupportsRequestStreams( | |
(() => { | |
let duplexAccessed = false; | |
const hasContentType = new Request("", { | |
body: new ReadableStream(), | |
method: "POST", | |
// @ts-ignore | |
get duplex() { | |
duplexAccessed = true; | |
return "half"; | |
}, | |
}).headers.has("Content-Type"); | |
return duplexAccessed && !hasContentType; | |
})(), | |
); | |
}, []); | |
const { logged_in, site_key } = useLoaderData<typeof loader>(); | |
async function submit() { | |
const usernames = ( | |
document.getElementById("usernames") as HTMLInputElement | |
).value | |
.replaceAll(" ", "") | |
.split(","); | |
const files = (document.getElementById("evidence") as HTMLInputElement) | |
.files; | |
if (!usernames.length) | |
return toast({ | |
description: "Must provide at least one username", | |
isClosable: true, | |
status: "error", | |
title: "Error", | |
}); | |
if (!files?.length) | |
return toast({ | |
description: "Must attach at least one file", | |
isClosable: true, | |
status: "error", | |
title: "Error", | |
}); | |
if (usernames.length > 20) | |
return toast({ | |
description: "Only up to twenty users can be reported at a time", | |
isClosable: true, | |
status: "error", | |
title: "Too Many Usernames", | |
}); | |
let turnstileToken = ""; | |
if (!logged_in) { | |
const tokenElem = document | |
.getElementsByName("cf-turnstile-response") | |
.item(0) as HTMLInputElement; | |
if (!tokenElem.value) | |
return toast({ | |
description: "Please complete the captcha and try again", | |
isClosable: true, | |
status: "error", | |
title: "Captcha not completed", | |
}); | |
turnstileToken = tokenElem.value; | |
} | |
const description = ( | |
document.getElementById("description") as HTMLTextAreaElement | |
).value; | |
const filelist = []; | |
for (const file of files) { | |
filelist.push({ name: file.name, size: file.size }); | |
} | |
const submitReq = await fetch("/api/reports/submit", { | |
body: JSON.stringify({ | |
bypass: false, | |
description: description || undefined, | |
files: filelist, | |
turnstileResponse: logged_in ? undefined : turnstileToken, | |
usernames, | |
}), | |
headers: { | |
"content-type": "application/json", | |
}, | |
method: "POST", | |
}); | |
if (!submitReq.ok) { | |
if (!logged_in) { | |
try { | |
// @ts-expect-error | |
turnstile.reset(); | |
} catch {} | |
} | |
return toast({ | |
description: ((await submitReq.json()) as { error: string }).error, | |
isClosable: true, | |
status: "error", | |
title: "Error", | |
}); | |
} | |
const { id, upload_urls }: { id: string; upload_urls: string[] } = | |
await submitReq.json(); | |
const totalSize = filelist.reduce((a, b) => a + b.size, 0); | |
let bytesRead = 0; | |
let shouldRecall = false; | |
setUploading(true); | |
for (let i = 0; i < upload_urls.length; i++) { | |
const reader = files[i].stream().getReader(); | |
try { | |
const uploadReq = await fetch(upload_urls[i], { | |
body: supportsRequestStreams | |
? new ReadableStream({ | |
async pull(controller) { | |
const chunk = await reader.read(); | |
if (chunk.done) { | |
controller.close(); | |
if (i === upload_urls.length - 1) setUploading(false); | |
return; | |
} | |
controller.enqueue(chunk.value); | |
bytesRead += chunk.value.length; | |
setFileProgress(Math.floor((bytesRead / totalSize) * 100)); | |
}, | |
}) | |
: files[i], | |
// @ts-expect-error | |
duplex: supportsRequestStreams ? "half" : undefined, | |
headers: { | |
"content-type": | |
files[i].type || | |
fileTypes[files[i].name.split(".").at(-1) as string], | |
}, | |
method: "PUT", | |
}); | |
if (!uploadReq.ok) { | |
shouldRecall = true; | |
break; | |
} | |
} catch (e) { | |
console.error(e); | |
shouldRecall = true; | |
break; | |
} | |
} | |
if (shouldRecall) { | |
await fetch("/api/reports/recall", { | |
body: JSON.stringify({ id }), | |
headers: { | |
"content-type": "application/json", | |
}, | |
method: "POST", | |
}); | |
return toast({ | |
description: "Failed to upload file", | |
isClosable: true, | |
status: "error", | |
title: "Error", | |
}); | |
} | |
await fetch("/api/reports/complete", { | |
body: JSON.stringify({ id }), | |
headers: { | |
"content-type": "application/json", | |
}, | |
method: "POST", | |
}); | |
sessionStorage.setItem("REPORT_SUCCESS", "1"); | |
} | |
useEffect(() => { | |
if (logged_in) return; | |
const script = document.createElement("script"); | |
script.async = true; | |
script.defer = true; | |
script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js"; | |
document.body.appendChild(script); | |
}, [logged_in]); | |
return showSuccess ? ( | |
<Success | |
heading="Report Submitted" | |
message="We will review it as soon as possible." | |
/> | |
) : ( | |
<> | |
<Container maxW="container.md" pt="4vh" textAlign="start"> | |
<Heading mb="4vh">Report an Exploiter</Heading> | |
<br /> | |
<FormControl isRequired> | |
<FormLabel htmlFor="usernames"> | |
Username(s) - To specify more than one, provide a comma-delimited | |
list (User1, User2, User3...) | |
</FormLabel> | |
<Input id="usernames" placeholder="builderman" /> | |
</FormControl> | |
<br /> | |
<FormControl isRequired> | |
<FormLabel>Your Evidence (Max size per file: 512MB)</FormLabel> | |
<Button | |
colorScheme="blue" | |
mr="8px" | |
onClick={() => document.getElementById("evidence")?.click()} | |
> | |
Select File | |
</Button> | |
<input id="evidence" multiple type="file" /> | |
</FormControl> | |
<br /> | |
<FormControl> | |
<FormLabel>Optional description</FormLabel> | |
<Textarea id="description" maxLength={512} /> | |
</FormControl> | |
<br /> | |
<div className="cf-turnstile" data-sitekey={site_key}></div> | |
<br /> | |
<Text> | |
By submitting this form, you agree to the{" "} | |
<Link color="#646cff" href="/terms"> | |
Terms of Service | |
</Link>{" "} | |
and{" "} | |
<Link color="#646cff" href="/privacy"> | |
Privacy Policy | |
</Link> | |
. | |
</Text> | |
<br /> | |
<HStack> | |
<Button | |
disabled={uploading} | |
mr="8px" | |
onClick={async () => await submit()} | |
> | |
Submit | |
</Button> | |
<CircularProgress | |
display={uploading ? "" : "none"} | |
isIndeterminate={!supportsRequestStreams} | |
value={supportsRequestStreams ? fileProgress : undefined} | |
> | |
{supportsRequestStreams ? ( | |
<CircularProgressLabel>{fileProgress}%</CircularProgressLabel> | |
) : null} | |
</CircularProgress> | |
</HStack> | |
</Container> | |
</> | |
); | |
} |