mirror of
https://github.com/trafficlunar/tomodachi-share.git
synced 2026-06-28 06:34:15 +00:00
feat: submitting and validation
custom images of the mii are still not implemented
This commit is contained in:
parent
fb4d790b3d
commit
49c6206623
14 changed files with 514 additions and 63 deletions
139
src/app/api/submit/route.ts
Normal file
139
src/app/api/submit/route.ts
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
import fs from "fs/promises";
|
||||
import path from "path";
|
||||
import sharp from "sharp";
|
||||
|
||||
import { AES_CCM } from "@trafficlunar/asmcrypto.js";
|
||||
import Mii from "@pretendonetwork/mii-js";
|
||||
import qrcode from "qrcode-generator";
|
||||
|
||||
import { auth } from "@/lib/auth";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { MII_DECRYPTION_KEY, MII_QR_SIZES } from "@/lib/constants";
|
||||
import { nameSchema, tagsSchema } from "@/lib/schemas";
|
||||
|
||||
const uploadsDirectory = path.join(process.cwd(), "public", "uploads");
|
||||
|
||||
export async function POST(request: Request) {
|
||||
const session = await auth();
|
||||
if (!session) return Response.json({ error: "Unauthorized" }, { status: 401 });
|
||||
|
||||
const { name, tags, qrBytesRaw } = await request.json();
|
||||
if (!name) return Response.json({ error: "Name is required" }, { status: 400 });
|
||||
if (!tags || tags.length == 0) return Response.json({ error: "At least one tag is required" }, { status: 400 });
|
||||
if (!qrBytesRaw || qrBytesRaw.length == 0) return Response.json({ error: "A QR code is required" }, { status: 400 });
|
||||
|
||||
const nameValidation = nameSchema.safeParse(name);
|
||||
if (!nameValidation.success) return Response.json({ error: nameValidation.error.errors[0].message }, { status: 400 });
|
||||
const tagsValidation = tagsSchema.safeParse(tags);
|
||||
if (!tagsValidation.success) return Response.json({ error: tagsValidation.error.errors[0].message }, { status: 400 });
|
||||
|
||||
// Validate QR code size
|
||||
if (!MII_QR_SIZES.includes(qrBytesRaw.length)) return Response.json({ error: "QR code is not a valid Mii QR code size" }, { status: 400 });
|
||||
|
||||
const qrBytes = new Uint8Array(qrBytesRaw);
|
||||
|
||||
// Decrypt the QR code
|
||||
const nonce = qrBytes.subarray(0, 8);
|
||||
const content = qrBytes.subarray(8, 0x70);
|
||||
|
||||
const nonceWithZeros = new Uint8Array(12);
|
||||
nonceWithZeros.set(nonce, 0);
|
||||
|
||||
let decrypted: Uint8Array<ArrayBufferLike> = new Uint8Array();
|
||||
try {
|
||||
decrypted = AES_CCM.decrypt(content, MII_DECRYPTION_KEY, nonceWithZeros, undefined, 16);
|
||||
} catch (error) {
|
||||
console.warn("Failed to decrypt QR code:", error);
|
||||
return Response.json({ error: "Failed to decrypt QR code. It may be invalid or corrupted." }, { status: 400 });
|
||||
}
|
||||
|
||||
const result = new Uint8Array(96);
|
||||
result.set(decrypted.subarray(0, 12), 0);
|
||||
result.set(nonce, 12);
|
||||
result.set(decrypted.subarray(12), 20);
|
||||
|
||||
// Check if QR code is valid (after decryption)
|
||||
if (result.length !== 0x60 || (result[0x16] !== 0 && result[0x17] !== 0))
|
||||
return Response.json({ error: "QR code is not a valid Mii QR code" }, { status: 400 });
|
||||
|
||||
// Convert to Mii class
|
||||
const buffer = Buffer.from(result);
|
||||
const mii = new Mii(buffer);
|
||||
|
||||
// Create Mii in database
|
||||
const miiRecord = await prisma.mii.create({
|
||||
data: {
|
||||
userId: Number(session.user.id),
|
||||
name,
|
||||
tags,
|
||||
},
|
||||
});
|
||||
|
||||
// Ensure directories exist
|
||||
await Promise.all([
|
||||
fs.mkdir(path.join(uploadsDirectory, "studio"), { recursive: true }),
|
||||
fs.mkdir(path.join(uploadsDirectory, "qr-code"), { recursive: true }),
|
||||
]);
|
||||
|
||||
// Download the image of the Mii
|
||||
let studioBuffer: Buffer;
|
||||
try {
|
||||
const studioUrl = mii.studioUrl({ width: 128 });
|
||||
const studioResponse = await fetch(studioUrl);
|
||||
|
||||
if (!studioResponse.ok) {
|
||||
throw new Error(`Failed to fetch Mii image ${studioResponse.status}`);
|
||||
}
|
||||
|
||||
const studioArrayBuffer = await studioResponse.arrayBuffer();
|
||||
studioBuffer = Buffer.from(studioArrayBuffer);
|
||||
} catch (error) {
|
||||
// Clean up if something went wrong
|
||||
await prisma.mii.delete({ where: { id: miiRecord.id } });
|
||||
console.error("Failed to download Mii image:", error);
|
||||
return Response.json({ error: "Failed to download Mii image" }, { status: 500 });
|
||||
}
|
||||
|
||||
try {
|
||||
// Compress and upload
|
||||
const studioWebpBuffer = await sharp(studioBuffer).webp({ quality: 85 }).toBuffer();
|
||||
const studioFileLocation = path.join(uploadsDirectory, "studio", `${miiRecord.id}.webp`);
|
||||
|
||||
await fs.writeFile(studioFileLocation, studioWebpBuffer);
|
||||
|
||||
// Generate a new QR code for aesthetic reasons
|
||||
const byteString = String.fromCharCode(...qrBytes);
|
||||
const generatedCode = qrcode(0, "L");
|
||||
generatedCode.addData(byteString, "Byte");
|
||||
generatedCode.make();
|
||||
|
||||
// Upload QR code
|
||||
const codeDataUrl = generatedCode.createDataURL();
|
||||
const codeBase64 = codeDataUrl.replace(/^data:image\/gif;base64,/, "");
|
||||
const codeBuffer = Buffer.from(codeBase64, "base64");
|
||||
|
||||
// Compress and upload
|
||||
const codeWebpBuffer = await sharp(codeBuffer).webp({ quality: 85 }).toBuffer();
|
||||
const codeFileLocation = path.join(uploadsDirectory, "qr-code", `${miiRecord.id}.webp`);
|
||||
await fs.writeFile(codeFileLocation, codeWebpBuffer);
|
||||
|
||||
// todo: upload user images
|
||||
|
||||
// Update database to use images
|
||||
await prisma.mii.update({
|
||||
where: {
|
||||
id: miiRecord.id,
|
||||
},
|
||||
data: {
|
||||
studioUrl: studioFileLocation,
|
||||
qrCodeUrl: codeFileLocation,
|
||||
},
|
||||
});
|
||||
|
||||
return Response.json({ success: true, id: miiRecord.id });
|
||||
} catch (error) {
|
||||
await prisma.mii.delete({ where: { id: miiRecord.id } });
|
||||
console.error("Error processing Mii files:", error);
|
||||
return Response.json({ error: "Failed to process and store Mii files" }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
"use client";
|
||||
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useDropzone } from "react-dropzone";
|
||||
import { Icon } from "@iconify/react";
|
||||
|
|
@ -8,12 +10,13 @@ import { AES_CCM } from "@trafficlunar/asmcrypto.js";
|
|||
import Mii from "@pretendonetwork/mii-js";
|
||||
import qrcode from "qrcode-generator";
|
||||
|
||||
import { MII_DECRYPTION_KEY } from "@/lib/constants";
|
||||
import { nameSchema, tagsSchema } from "@/lib/schemas";
|
||||
|
||||
import TagSelector from "./submit/tag-selector";
|
||||
import QrUpload from "./submit/qr-upload";
|
||||
import QrScanner from "./submit/qr-scanner";
|
||||
|
||||
const key = new Uint8Array([0x59, 0xfc, 0x81, 0x7e, 0x64, 0x46, 0xea, 0x61, 0x90, 0x34, 0x7b, 0x20, 0xe9, 0xbd, 0xce, 0x52]);
|
||||
|
||||
export default function SubmitForm() {
|
||||
const { acceptedFiles, getRootProps, getInputProps } = useDropzone({
|
||||
accept: {
|
||||
|
|
@ -22,15 +25,53 @@ export default function SubmitForm() {
|
|||
});
|
||||
|
||||
const [isQrScannerOpen, setIsQrScannerOpen] = useState(false);
|
||||
const [qrBytes, setQrBytes] = useState<Uint8Array>(new Uint8Array());
|
||||
|
||||
const [studioUrl, setStudioUrl] = useState<string | undefined>();
|
||||
const [generatedQrCodeUrl, setGeneratedQrCodeUrl] = useState<string | undefined>();
|
||||
|
||||
const [error, setError] = useState<string | undefined>(undefined);
|
||||
|
||||
const [name, setName] = useState("");
|
||||
const [tags, setTags] = useState<string[]>([]);
|
||||
const [qrBytesRaw, setQrBytesRaw] = useState<number[]>([]);
|
||||
|
||||
const handleSubmit = async (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
|
||||
// Validate before sending request
|
||||
const nameValidation = nameSchema.safeParse(name);
|
||||
if (!nameValidation.success) {
|
||||
setError(nameValidation.error.errors[0].message);
|
||||
return;
|
||||
}
|
||||
const tagsValidation = tagsSchema.safeParse(tags);
|
||||
if (!tagsValidation.success) {
|
||||
setError(tagsValidation.error.errors[0].message);
|
||||
return;
|
||||
}
|
||||
|
||||
// Send request to server
|
||||
const response = await fetch("/api/submit", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ name, tags, qrBytesRaw }),
|
||||
});
|
||||
const { id, error } = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
setError(error);
|
||||
return;
|
||||
}
|
||||
|
||||
redirect(`/mii/${id}`);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (qrBytes.length == 0) return;
|
||||
if (qrBytesRaw.length == 0) return;
|
||||
const qrBytes = new Uint8Array(qrBytesRaw);
|
||||
|
||||
const decode = async () => {
|
||||
setError("");
|
||||
|
||||
// Decrypt the QR code
|
||||
const nonce = qrBytes.subarray(0, 8);
|
||||
const content = qrBytes.subarray(8, 0x70);
|
||||
|
|
@ -38,32 +79,51 @@ export default function SubmitForm() {
|
|||
const nonceWithZeros = new Uint8Array(12);
|
||||
nonceWithZeros.set(nonce, 0);
|
||||
|
||||
const decrypted = AES_CCM.decrypt(content, key, nonceWithZeros, undefined, 16);
|
||||
let decrypted: Uint8Array<ArrayBufferLike> = new Uint8Array();
|
||||
try {
|
||||
decrypted = AES_CCM.decrypt(content, MII_DECRYPTION_KEY, nonceWithZeros, undefined, 16);
|
||||
} catch (error) {
|
||||
console.warn("Failed to decrypt QR code:", error);
|
||||
setError("Failed to decrypt QR code. It may be invalid or corrupted.");
|
||||
return;
|
||||
}
|
||||
|
||||
const result = new Uint8Array(96);
|
||||
result.set(decrypted.subarray(0, 12), 0);
|
||||
result.set(nonce, 12);
|
||||
result.set(decrypted.subarray(12), 20);
|
||||
|
||||
// Check if QR code is valid (after decryption)
|
||||
if (result.length !== 0x60 || (result[0x16] !== 0 && result[0x17] !== 0)) {
|
||||
setError("QR code is not a valid Mii QR code");
|
||||
return;
|
||||
}
|
||||
|
||||
// Convert to Mii class
|
||||
const buffer = Buffer.from(result);
|
||||
const mii = new Mii(buffer);
|
||||
|
||||
setStudioUrl(mii.studioUrl({ width: 128 }));
|
||||
try {
|
||||
setStudioUrl(mii.studioUrl({ width: 128 }));
|
||||
|
||||
// Generate a new QR code for aesthetic reasons
|
||||
const byteString = String.fromCharCode(...qrBytes);
|
||||
const generatedCode = qrcode(0, "L");
|
||||
generatedCode.addData(byteString, "Byte");
|
||||
generatedCode.make();
|
||||
// Generate a new QR code for aesthetic reasons
|
||||
const byteString = String.fromCharCode(...qrBytes);
|
||||
const generatedCode = qrcode(0, "L");
|
||||
generatedCode.addData(byteString, "Byte");
|
||||
generatedCode.make();
|
||||
|
||||
setGeneratedQrCodeUrl(generatedCode.createDataURL());
|
||||
setGeneratedQrCodeUrl(generatedCode.createDataURL());
|
||||
} catch (error) {
|
||||
console.warn("Failed to get and/or generate Mii images:", error);
|
||||
setError("Failed to get and/or generate Mii images");
|
||||
}
|
||||
};
|
||||
|
||||
decode();
|
||||
}, [qrBytes]);
|
||||
}, [qrBytesRaw]);
|
||||
|
||||
return (
|
||||
<form onSubmit={(e) => e.preventDefault()} className="grid grid-cols-2">
|
||||
<form onSubmit={handleSubmit} className="grid grid-cols-2">
|
||||
<div className="p-4 flex flex-col gap-2">
|
||||
<div className="flex justify-center gap-2">
|
||||
<img
|
||||
|
|
@ -110,6 +170,8 @@ export default function SubmitForm() {
|
|||
minLength={2}
|
||||
maxLength={64}
|
||||
placeholder="Type your mii's name here..."
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -117,13 +179,13 @@ export default function SubmitForm() {
|
|||
<label htmlFor="tags" className="font-semibold">
|
||||
Tags
|
||||
</label>
|
||||
<TagSelector />
|
||||
<TagSelector tags={tags} setTags={setTags} />
|
||||
</div>
|
||||
|
||||
<fieldset className="border-t-2 border-b-2 border-black p-3 flex flex-col items-center gap-2">
|
||||
<legend className="px-2">QR Code</legend>
|
||||
|
||||
<QrUpload setQrBytes={setQrBytes} />
|
||||
<QrUpload setQrBytesRaw={setQrBytesRaw} />
|
||||
|
||||
<span>or</span>
|
||||
|
||||
|
|
@ -132,12 +194,16 @@ export default function SubmitForm() {
|
|||
Use your camera
|
||||
</button>
|
||||
|
||||
<QrScanner isOpen={isQrScannerOpen} setIsOpen={setIsQrScannerOpen} setQrBytes={setQrBytes} />
|
||||
<QrScanner isOpen={isQrScannerOpen} setIsOpen={setIsQrScannerOpen} setQrBytesRaw={setQrBytesRaw} />
|
||||
</fieldset>
|
||||
|
||||
<button type="submit" className="pill button w-min ml-auto">
|
||||
Submit
|
||||
</button>
|
||||
<div className="flex justify-between items-center">
|
||||
{error && <span className="text-red-400 font-semibold">Error: {error}</span>}
|
||||
|
||||
<button type="submit" className="pill button w-min ml-auto mb-auto">
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -9,10 +9,10 @@ import QrFinder from "../qr-finder";
|
|||
interface Props {
|
||||
isOpen: boolean;
|
||||
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
setQrBytes: React.Dispatch<React.SetStateAction<Uint8Array>>;
|
||||
setQrBytesRaw: React.Dispatch<React.SetStateAction<number[]>>;
|
||||
}
|
||||
|
||||
export default function QrScanner({ isOpen, setIsOpen, setQrBytes }: Props) {
|
||||
export default function QrScanner({ isOpen, setIsOpen, setQrBytesRaw }: Props) {
|
||||
const [permissionGranted, setPermissionGranted] = useState<boolean | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -29,10 +29,10 @@ export default function QrScanner({ isOpen, setIsOpen, setQrBytes }: Props) {
|
|||
setIsOpen(false);
|
||||
|
||||
// Convert to bytes
|
||||
const encoder = new TextEncoder();
|
||||
const byteArray = encoder.encode(result[0].rawValue);
|
||||
// const encoder = new TextEncoder();
|
||||
// const byteArray = encoder.encode(result[0].rawValue);
|
||||
|
||||
setQrBytes(byteArray);
|
||||
// setQrBytes(byteArray);
|
||||
};
|
||||
|
||||
if (isOpen)
|
||||
|
|
|
|||
|
|
@ -6,10 +6,10 @@ import { Icon } from "@iconify/react";
|
|||
import jsQR from "jsqr";
|
||||
|
||||
interface Props {
|
||||
setQrBytes: React.Dispatch<React.SetStateAction<Uint8Array>>;
|
||||
setQrBytesRaw: React.Dispatch<React.SetStateAction<number[]>>;
|
||||
}
|
||||
|
||||
export default function QrUpload({ setQrBytes }: Props) {
|
||||
export default function QrUpload({ setQrBytesRaw }: Props) {
|
||||
const onDrop = useCallback((acceptedFiles: FileWithPath[]) => {
|
||||
acceptedFiles.forEach((file) => {
|
||||
// Scan QR code
|
||||
|
|
@ -28,7 +28,7 @@ export default function QrUpload({ setQrBytes }: Props) {
|
|||
const imageData = ctx.getImageData(0, 0, image.width, image.height);
|
||||
const decoded = jsQR(imageData.data, image.width, image.height);
|
||||
|
||||
setQrBytes(new Uint8Array(decoded?.binaryData!));
|
||||
setQrBytesRaw(decoded?.binaryData!);
|
||||
};
|
||||
image.src = event.target!.result as string;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,20 +2,21 @@
|
|||
|
||||
import CreatableSelect from "react-select/creatable";
|
||||
|
||||
const options = [
|
||||
{ value: "anime", label: "anime" },
|
||||
{ value: "art", label: "art" },
|
||||
{ value: "cartoon", label: "cartoon" },
|
||||
{ value: "celebrity", label: "celebrity" },
|
||||
{ value: "games", label: "games" },
|
||||
{ value: "history", label: "history" },
|
||||
{ value: "meme", label: "meme" },
|
||||
{ value: "movie", label: "movie" },
|
||||
{ value: "oc", label: "oc" },
|
||||
{ value: "tv", label: "tv" },
|
||||
];
|
||||
interface Props {
|
||||
tags: string[];
|
||||
setTags: React.Dispatch<React.SetStateAction<string[]>>;
|
||||
}
|
||||
|
||||
export default function TagSelector() {
|
||||
interface Option {
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
const stringToOption = (input: string) => ({ value: input, label: input });
|
||||
|
||||
const options = ["anime", "art", "cartoon", "celebrity", "games", "history", "meme", "movie", "oc", "tv"].map(stringToOption);
|
||||
|
||||
export default function TagSelector({ tags, setTags }: Props) {
|
||||
// todo: tag validating
|
||||
|
||||
return (
|
||||
|
|
@ -23,7 +24,9 @@ export default function TagSelector() {
|
|||
isMulti
|
||||
placeholder="Select or create tags..."
|
||||
options={options}
|
||||
className="pill input col-span-2 w-full !py-0.5"
|
||||
value={tags.map(stringToOption)}
|
||||
onChange={(newValue) => setTags(newValue.map((option) => option.value))}
|
||||
className="pill input col-span-2 w-full min-h-11 !py-0.5"
|
||||
styles={{
|
||||
control: (provided) => ({
|
||||
...provided,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue