Added the possibility to upload a file containing users to a group

src/pages/(admin)/BatchCodeGenerator.tsx

@@ -0,0 +1,81 @@
+import Button from "@/components/Low/Button";
+import {Type} from "@/interfaces/user";
+import axios from "axios";
+import clsx from "clsx";
+import {capitalize} from "lodash";
+import {useEffect, useState} from "react";
+import {toast} from "react-toastify";
+import ShortUniqueId from "short-unique-id";
+import {useFilePicker} from "use-file-picker";
+
+export default function BatchCodeGenerator() {
+	const [emails, setEmails] = useState<string[]>([]);
+	const {openFilePicker, filesContent} = useFilePicker({
+		accept: ".txt",
+		multiple: false,
+	});
+
+	useEffect(() => {
+		if (filesContent.length > 0) {
+			const file = filesContent[0];
+			const emails = file.content
+				.split("\n")
+				.filter((x) => new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/).test(x));
+
+			if (emails.length === 0) {
+				toast.error("Please upload a .txt file containing e-mails, one per line!");
+				return;
+			}
+
+			setEmails(emails);
+		}
+	}, [filesContent]);
+
+	const generateCode = (type: Type) => {
+		const uid = new ShortUniqueId();
+		const codes = emails.map(() => uid.randomUUID(6));
+
+		axios
+			.post("/api/code", {type, codes})
+			.then(({data, status}) => {
+				if (data.ok) {
+					toast.success(`Successfully generated ${capitalize(type)} codes!`, {toastId: "success"});
+					return;
+				}
+
+				if (status === 403) {
+					toast.error(`You do not have permission to generate ${capitalize(type)} codes!`, {toastId: "forbidden"});
+				}
+			})
+			.catch(({response: {status}}) => {
+				if (status === 403) {
+					toast.error(`You do not have permission to generate ${capitalize(type)} codes!`, {toastId: "forbidden"});
+					return;
+				}
+
+				toast.error(`Something went wrong, please try again later!`, {toastId: "error"});
+			});
+	};
+
+	return (
+		<div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
+			<label className="font-normal text-base text-mti-gray-dim">Choose a .txt file containing e-mails</label>
+			<Button onClick={openFilePicker}>{filesContent.length > 0 ? filesContent[0].name : "Choose a file"}</Button>
+			<label className="font-normal text-base text-mti-gray-dim">Select the type of user they should be</label>
+			<div className="grid grid-cols-2 gap-4">
+				<Button className="w-48" variant="outline" onClick={() => generateCode("student")} disabled={emails.length === 0}>
+					Student
+				</Button>
+				<Button className="w-48" variant="outline" onClick={() => generateCode("teacher")} disabled={emails.length === 0}>
+					Teacher
+				</Button>
+				<Button className="w-48" variant="outline" onClick={() => generateCode("admin")} disabled={emails.length === 0}>
+					Admin
+				</Button>
+				<Button className="w-48" variant="outline" onClick={() => generateCode("owner")} disabled={emails.length === 0}>
+					Owner
+				</Button>
+			</div>
+		</div>
+	);
+}