feat: submitting and validation

custom images of the mii are still not implemented
This commit is contained in:
trafficlunar 2025-04-05 14:45:22 +01:00
parent fb4d790b3d
commit 49c6206623
14 changed files with 514 additions and 63 deletions

2
.gitignore vendored
View file

@ -40,3 +40,5 @@ yarn-error.log*
# typescript # typescript
*.tsbuildinfo *.tsbuildinfo
next-env.d.ts next-env.d.ts
public/uploads/

View file

@ -24,6 +24,7 @@
"react-dom": "^19.0.0", "react-dom": "^19.0.0",
"react-dropzone": "^14.3.8", "react-dropzone": "^14.3.8",
"react-select": "^5.10.1", "react-select": "^5.10.1",
"sharp": "^0.34.0",
"zod": "^3.24.2" "zod": "^3.24.2"
}, },
"devDependencies": { "devDependencies": {

View file

@ -50,6 +50,9 @@ importers:
react-select: react-select:
specifier: ^5.10.1 specifier: ^5.10.1
version: 5.10.1(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) version: 5.10.1(@types/react@19.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
sharp:
specifier: ^0.34.0
version: 0.34.0
zod: zod:
specifier: ^3.24.2 specifier: ^3.24.2
version: 3.24.2 version: 3.24.2
@ -439,105 +442,215 @@ packages:
cpu: [arm64] cpu: [arm64]
os: [darwin] os: [darwin]
'@img/sharp-darwin-arm64@0.34.0':
resolution: {integrity: sha512-BLT8CQ234EOJFN4NCAkZUkJr2lyXavD+aQH/Jc2skPqAJTMjKeH2BUulaZNkd4MJ9hcCicTdupcbCRg4bto0Ow==}
engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
cpu: [arm64]
os: [darwin]
'@img/sharp-darwin-x64@0.33.5': '@img/sharp-darwin-x64@0.33.5':
resolution: {integrity: sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==} resolution: {integrity: sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==}
engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
cpu: [x64] cpu: [x64]
os: [darwin] os: [darwin]
'@img/sharp-darwin-x64@0.34.0':
resolution: {integrity: sha512-FZLxjWEtz+QbxZbtFb+f6AbD47/M9k6GuZ9dedTFdsgI9HwUMvyinxFMAeyP1fJZkJBw999Ht5Cus4sqpFlBPg==}
engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
cpu: [x64]
os: [darwin]
'@img/sharp-libvips-darwin-arm64@1.0.4': '@img/sharp-libvips-darwin-arm64@1.0.4':
resolution: {integrity: sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==} resolution: {integrity: sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==}
cpu: [arm64] cpu: [arm64]
os: [darwin] os: [darwin]
'@img/sharp-libvips-darwin-arm64@1.1.0':
resolution: {integrity: sha512-HZ/JUmPwrJSoM4DIQPv/BfNh9yrOA8tlBbqbLz4JZ5uew2+o22Ik+tHQJcih7QJuSa0zo5coHTfD5J8inqj9DA==}
cpu: [arm64]
os: [darwin]
'@img/sharp-libvips-darwin-x64@1.0.4': '@img/sharp-libvips-darwin-x64@1.0.4':
resolution: {integrity: sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==} resolution: {integrity: sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==}
cpu: [x64] cpu: [x64]
os: [darwin] os: [darwin]
'@img/sharp-libvips-darwin-x64@1.1.0':
resolution: {integrity: sha512-Xzc2ToEmHN+hfvsl9wja0RlnXEgpKNmftriQp6XzY/RaSfwD9th+MSh0WQKzUreLKKINb3afirxW7A0fz2YWuQ==}
cpu: [x64]
os: [darwin]
'@img/sharp-libvips-linux-arm64@1.0.4': '@img/sharp-libvips-linux-arm64@1.0.4':
resolution: {integrity: sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==} resolution: {integrity: sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==}
cpu: [arm64] cpu: [arm64]
os: [linux] os: [linux]
'@img/sharp-libvips-linux-arm64@1.1.0':
resolution: {integrity: sha512-IVfGJa7gjChDET1dK9SekxFFdflarnUB8PwW8aGwEoF3oAsSDuNUTYS+SKDOyOJxQyDC1aPFMuRYLoDInyV9Ew==}
cpu: [arm64]
os: [linux]
'@img/sharp-libvips-linux-arm@1.0.5': '@img/sharp-libvips-linux-arm@1.0.5':
resolution: {integrity: sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==} resolution: {integrity: sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==}
cpu: [arm] cpu: [arm]
os: [linux] os: [linux]
'@img/sharp-libvips-linux-arm@1.1.0':
resolution: {integrity: sha512-s8BAd0lwUIvYCJyRdFqvsj+BJIpDBSxs6ivrOPm/R7piTs5UIwY5OjXrP2bqXC9/moGsyRa37eYWYCOGVXxVrA==}
cpu: [arm]
os: [linux]
'@img/sharp-libvips-linux-ppc64@1.1.0':
resolution: {integrity: sha512-tiXxFZFbhnkWE2LA8oQj7KYR+bWBkiV2nilRldT7bqoEZ4HiDOcePr9wVDAZPi/Id5fT1oY9iGnDq20cwUz8lQ==}
cpu: [ppc64]
os: [linux]
'@img/sharp-libvips-linux-s390x@1.0.4': '@img/sharp-libvips-linux-s390x@1.0.4':
resolution: {integrity: sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==} resolution: {integrity: sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==}
cpu: [s390x] cpu: [s390x]
os: [linux] os: [linux]
'@img/sharp-libvips-linux-s390x@1.1.0':
resolution: {integrity: sha512-xukSwvhguw7COyzvmjydRb3x/09+21HykyapcZchiCUkTThEQEOMtBj9UhkaBRLuBrgLFzQ2wbxdeCCJW/jgJA==}
cpu: [s390x]
os: [linux]
'@img/sharp-libvips-linux-x64@1.0.4': '@img/sharp-libvips-linux-x64@1.0.4':
resolution: {integrity: sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==} resolution: {integrity: sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==}
cpu: [x64] cpu: [x64]
os: [linux] os: [linux]
'@img/sharp-libvips-linux-x64@1.1.0':
resolution: {integrity: sha512-yRj2+reB8iMg9W5sULM3S74jVS7zqSzHG3Ol/twnAAkAhnGQnpjj6e4ayUz7V+FpKypwgs82xbRdYtchTTUB+Q==}
cpu: [x64]
os: [linux]
'@img/sharp-libvips-linuxmusl-arm64@1.0.4': '@img/sharp-libvips-linuxmusl-arm64@1.0.4':
resolution: {integrity: sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==} resolution: {integrity: sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==}
cpu: [arm64] cpu: [arm64]
os: [linux] os: [linux]
'@img/sharp-libvips-linuxmusl-arm64@1.1.0':
resolution: {integrity: sha512-jYZdG+whg0MDK+q2COKbYidaqW/WTz0cc1E+tMAusiDygrM4ypmSCjOJPmFTvHHJ8j/6cAGyeDWZOsK06tP33w==}
cpu: [arm64]
os: [linux]
'@img/sharp-libvips-linuxmusl-x64@1.0.4': '@img/sharp-libvips-linuxmusl-x64@1.0.4':
resolution: {integrity: sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==} resolution: {integrity: sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==}
cpu: [x64] cpu: [x64]
os: [linux] os: [linux]
'@img/sharp-libvips-linuxmusl-x64@1.1.0':
resolution: {integrity: sha512-wK7SBdwrAiycjXdkPnGCPLjYb9lD4l6Ze2gSdAGVZrEL05AOUJESWU2lhlC+Ffn5/G+VKuSm6zzbQSzFX/P65A==}
cpu: [x64]
os: [linux]
'@img/sharp-linux-arm64@0.33.5': '@img/sharp-linux-arm64@0.33.5':
resolution: {integrity: sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==} resolution: {integrity: sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==}
engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
cpu: [arm64] cpu: [arm64]
os: [linux] os: [linux]
'@img/sharp-linux-arm64@0.34.0':
resolution: {integrity: sha512-fpvIy7rPdTegqthhUNAaQikg8CzNUGxuf7VTIs5HEQllCTL322rBDuGHVoH/pZ6Qms9enHe++DsUoG/Ux93E1A==}
engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
cpu: [arm64]
os: [linux]
'@img/sharp-linux-arm@0.33.5': '@img/sharp-linux-arm@0.33.5':
resolution: {integrity: sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==} resolution: {integrity: sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==}
engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
cpu: [arm] cpu: [arm]
os: [linux] os: [linux]
'@img/sharp-linux-arm@0.34.0':
resolution: {integrity: sha512-MfbqXi4zdy0CsSONwESFzrdpzcNSN66qbt8a7CdesOFfZHmlPXgC+xOy+2SLYn6+MFi/06qngGRIje7vfAV/5Q==}
engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
cpu: [arm]
os: [linux]
'@img/sharp-linux-s390x@0.33.5': '@img/sharp-linux-s390x@0.33.5':
resolution: {integrity: sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==} resolution: {integrity: sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==}
engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
cpu: [s390x] cpu: [s390x]
os: [linux] os: [linux]
'@img/sharp-linux-s390x@0.34.0':
resolution: {integrity: sha512-04jdT+VCZIqj0RoTEpWXh0lErZC9prhkxEZWrQdGt1MZ368SlvXpKkXCD4Ww5ISc3LexBmfnAW/+ErUmD9sRPQ==}
engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
cpu: [s390x]
os: [linux]
'@img/sharp-linux-x64@0.33.5': '@img/sharp-linux-x64@0.33.5':
resolution: {integrity: sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==} resolution: {integrity: sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==}
engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
cpu: [x64] cpu: [x64]
os: [linux] os: [linux]
'@img/sharp-linux-x64@0.34.0':
resolution: {integrity: sha512-Y98V1d5vh8RIpf+pUb7U9a0SGzfPa7x7KPXsqtvb7i52L7HXAMv5U0aaOdnnf/CAqVUVaTJajINJ3KyrLcwByQ==}
engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
cpu: [x64]
os: [linux]
'@img/sharp-linuxmusl-arm64@0.33.5': '@img/sharp-linuxmusl-arm64@0.33.5':
resolution: {integrity: sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==} resolution: {integrity: sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==}
engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
cpu: [arm64] cpu: [arm64]
os: [linux] os: [linux]
'@img/sharp-linuxmusl-arm64@0.34.0':
resolution: {integrity: sha512-pmsehGlQIOlAQ8lgtDxpGInXXMAV6JrFwoJ0Ib9PpsVYuwFM+Soa9mVZMfsTO+u9dBhCMEn2AP3mRUljgpGYvQ==}
engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
cpu: [arm64]
os: [linux]
'@img/sharp-linuxmusl-x64@0.33.5': '@img/sharp-linuxmusl-x64@0.33.5':
resolution: {integrity: sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==} resolution: {integrity: sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==}
engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
cpu: [x64] cpu: [x64]
os: [linux] os: [linux]
'@img/sharp-linuxmusl-x64@0.34.0':
resolution: {integrity: sha512-t80LMHorxyKGIPWIX3Qyamg72vj/TGYLyOvzjvkywvNmlQurgHu3ZI2aZnUc5YQlrKPOovnwkVmTEbH+YllQ5Q==}
engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
cpu: [x64]
os: [linux]
'@img/sharp-wasm32@0.33.5': '@img/sharp-wasm32@0.33.5':
resolution: {integrity: sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==} resolution: {integrity: sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==}
engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
cpu: [wasm32] cpu: [wasm32]
'@img/sharp-wasm32@0.34.0':
resolution: {integrity: sha512-oI6xsOqLHhRA3LSZb07KW3dMAmo1PpyAxwdHkuiC5+N8HzodpqXusOtzBEXKeFG8Za5ycry0xLYsu7hG5aUxoQ==}
engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
cpu: [wasm32]
'@img/sharp-win32-ia32@0.33.5': '@img/sharp-win32-ia32@0.33.5':
resolution: {integrity: sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==} resolution: {integrity: sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==}
engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
cpu: [ia32] cpu: [ia32]
os: [win32] os: [win32]
'@img/sharp-win32-ia32@0.34.0':
resolution: {integrity: sha512-ofcDYsjJJ1zya9s/GCnXjbFIhTw5/gRVr+SivAGPMXmAml/rLLyDu/HtWntvhiacnL4VYvtgMFw/B2Zz/kgoWQ==}
engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
cpu: [ia32]
os: [win32]
'@img/sharp-win32-x64@0.33.5': '@img/sharp-win32-x64@0.33.5':
resolution: {integrity: sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==} resolution: {integrity: sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==}
engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
cpu: [x64] cpu: [x64]
os: [win32] os: [win32]
'@img/sharp-win32-x64@0.34.0':
resolution: {integrity: sha512-S0X+Uty7Qe6tBfTigFEInchNsGYM/uRjuF1ixi8mLubMfTClmbnVIMxR2/cD5I5Z1m6lHP5D6ASneM3qsF3KFA==}
engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
cpu: [x64]
os: [win32]
'@jridgewell/gen-mapping@0.3.8': '@jridgewell/gen-mapping@0.3.8':
resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==} resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==}
engines: {node: '>=6.0.0'} engines: {node: '>=6.0.0'}
@ -2060,6 +2173,10 @@ packages:
resolution: {integrity: sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==} resolution: {integrity: sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==}
engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
sharp@0.34.0:
resolution: {integrity: sha512-l7K33wCojhluT82RQXKm3X/y9Y6yBioJ4GaOlGT67yDv8bXZcU3aOlxUM0W1zUUKQjOoIh3VcfQEKHVW9AyijQ==}
engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
shebang-command@2.0.0: shebang-command@2.0.0:
resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==} resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
engines: {node: '>=8'} engines: {node: '>=8'}
@ -2598,76 +2715,154 @@ snapshots:
'@img/sharp-libvips-darwin-arm64': 1.0.4 '@img/sharp-libvips-darwin-arm64': 1.0.4
optional: true optional: true
'@img/sharp-darwin-arm64@0.34.0':
optionalDependencies:
'@img/sharp-libvips-darwin-arm64': 1.1.0
optional: true
'@img/sharp-darwin-x64@0.33.5': '@img/sharp-darwin-x64@0.33.5':
optionalDependencies: optionalDependencies:
'@img/sharp-libvips-darwin-x64': 1.0.4 '@img/sharp-libvips-darwin-x64': 1.0.4
optional: true optional: true
'@img/sharp-darwin-x64@0.34.0':
optionalDependencies:
'@img/sharp-libvips-darwin-x64': 1.1.0
optional: true
'@img/sharp-libvips-darwin-arm64@1.0.4': '@img/sharp-libvips-darwin-arm64@1.0.4':
optional: true optional: true
'@img/sharp-libvips-darwin-arm64@1.1.0':
optional: true
'@img/sharp-libvips-darwin-x64@1.0.4': '@img/sharp-libvips-darwin-x64@1.0.4':
optional: true optional: true
'@img/sharp-libvips-darwin-x64@1.1.0':
optional: true
'@img/sharp-libvips-linux-arm64@1.0.4': '@img/sharp-libvips-linux-arm64@1.0.4':
optional: true optional: true
'@img/sharp-libvips-linux-arm64@1.1.0':
optional: true
'@img/sharp-libvips-linux-arm@1.0.5': '@img/sharp-libvips-linux-arm@1.0.5':
optional: true optional: true
'@img/sharp-libvips-linux-arm@1.1.0':
optional: true
'@img/sharp-libvips-linux-ppc64@1.1.0':
optional: true
'@img/sharp-libvips-linux-s390x@1.0.4': '@img/sharp-libvips-linux-s390x@1.0.4':
optional: true optional: true
'@img/sharp-libvips-linux-s390x@1.1.0':
optional: true
'@img/sharp-libvips-linux-x64@1.0.4': '@img/sharp-libvips-linux-x64@1.0.4':
optional: true optional: true
'@img/sharp-libvips-linux-x64@1.1.0':
optional: true
'@img/sharp-libvips-linuxmusl-arm64@1.0.4': '@img/sharp-libvips-linuxmusl-arm64@1.0.4':
optional: true optional: true
'@img/sharp-libvips-linuxmusl-arm64@1.1.0':
optional: true
'@img/sharp-libvips-linuxmusl-x64@1.0.4': '@img/sharp-libvips-linuxmusl-x64@1.0.4':
optional: true optional: true
'@img/sharp-libvips-linuxmusl-x64@1.1.0':
optional: true
'@img/sharp-linux-arm64@0.33.5': '@img/sharp-linux-arm64@0.33.5':
optionalDependencies: optionalDependencies:
'@img/sharp-libvips-linux-arm64': 1.0.4 '@img/sharp-libvips-linux-arm64': 1.0.4
optional: true optional: true
'@img/sharp-linux-arm64@0.34.0':
optionalDependencies:
'@img/sharp-libvips-linux-arm64': 1.1.0
optional: true
'@img/sharp-linux-arm@0.33.5': '@img/sharp-linux-arm@0.33.5':
optionalDependencies: optionalDependencies:
'@img/sharp-libvips-linux-arm': 1.0.5 '@img/sharp-libvips-linux-arm': 1.0.5
optional: true optional: true
'@img/sharp-linux-arm@0.34.0':
optionalDependencies:
'@img/sharp-libvips-linux-arm': 1.1.0
optional: true
'@img/sharp-linux-s390x@0.33.5': '@img/sharp-linux-s390x@0.33.5':
optionalDependencies: optionalDependencies:
'@img/sharp-libvips-linux-s390x': 1.0.4 '@img/sharp-libvips-linux-s390x': 1.0.4
optional: true optional: true
'@img/sharp-linux-s390x@0.34.0':
optionalDependencies:
'@img/sharp-libvips-linux-s390x': 1.1.0
optional: true
'@img/sharp-linux-x64@0.33.5': '@img/sharp-linux-x64@0.33.5':
optionalDependencies: optionalDependencies:
'@img/sharp-libvips-linux-x64': 1.0.4 '@img/sharp-libvips-linux-x64': 1.0.4
optional: true optional: true
'@img/sharp-linux-x64@0.34.0':
optionalDependencies:
'@img/sharp-libvips-linux-x64': 1.1.0
optional: true
'@img/sharp-linuxmusl-arm64@0.33.5': '@img/sharp-linuxmusl-arm64@0.33.5':
optionalDependencies: optionalDependencies:
'@img/sharp-libvips-linuxmusl-arm64': 1.0.4 '@img/sharp-libvips-linuxmusl-arm64': 1.0.4
optional: true optional: true
'@img/sharp-linuxmusl-arm64@0.34.0':
optionalDependencies:
'@img/sharp-libvips-linuxmusl-arm64': 1.1.0
optional: true
'@img/sharp-linuxmusl-x64@0.33.5': '@img/sharp-linuxmusl-x64@0.33.5':
optionalDependencies: optionalDependencies:
'@img/sharp-libvips-linuxmusl-x64': 1.0.4 '@img/sharp-libvips-linuxmusl-x64': 1.0.4
optional: true optional: true
'@img/sharp-linuxmusl-x64@0.34.0':
optionalDependencies:
'@img/sharp-libvips-linuxmusl-x64': 1.1.0
optional: true
'@img/sharp-wasm32@0.33.5': '@img/sharp-wasm32@0.33.5':
dependencies: dependencies:
'@emnapi/runtime': 1.4.0 '@emnapi/runtime': 1.4.0
optional: true optional: true
'@img/sharp-wasm32@0.34.0':
dependencies:
'@emnapi/runtime': 1.4.0
optional: true
'@img/sharp-win32-ia32@0.33.5': '@img/sharp-win32-ia32@0.33.5':
optional: true optional: true
'@img/sharp-win32-ia32@0.34.0':
optional: true
'@img/sharp-win32-x64@0.33.5': '@img/sharp-win32-x64@0.33.5':
optional: true optional: true
'@img/sharp-win32-x64@0.34.0':
optional: true
'@jridgewell/gen-mapping@0.3.8': '@jridgewell/gen-mapping@0.3.8':
dependencies: dependencies:
'@jridgewell/set-array': 1.2.1 '@jridgewell/set-array': 1.2.1
@ -3186,13 +3381,11 @@ snapshots:
dependencies: dependencies:
color-name: 1.1.4 color-name: 1.1.4
simple-swizzle: 0.2.2 simple-swizzle: 0.2.2
optional: true
color@4.2.3: color@4.2.3:
dependencies: dependencies:
color-convert: 2.0.1 color-convert: 2.0.1
color-string: 1.9.1 color-string: 1.9.1
optional: true
concat-map@0.0.1: {} concat-map@0.0.1: {}
@ -3806,8 +3999,7 @@ snapshots:
is-arrayish@0.2.1: {} is-arrayish@0.2.1: {}
is-arrayish@0.3.2: is-arrayish@0.3.2: {}
optional: true
is-async-function@2.1.1: is-async-function@2.1.1:
dependencies: dependencies:
@ -4389,6 +4581,33 @@ snapshots:
'@img/sharp-win32-x64': 0.33.5 '@img/sharp-win32-x64': 0.33.5
optional: true optional: true
sharp@0.34.0:
dependencies:
color: 4.2.3
detect-libc: 2.0.3
semver: 7.7.1
optionalDependencies:
'@img/sharp-darwin-arm64': 0.34.0
'@img/sharp-darwin-x64': 0.34.0
'@img/sharp-libvips-darwin-arm64': 1.1.0
'@img/sharp-libvips-darwin-x64': 1.1.0
'@img/sharp-libvips-linux-arm': 1.1.0
'@img/sharp-libvips-linux-arm64': 1.1.0
'@img/sharp-libvips-linux-ppc64': 1.1.0
'@img/sharp-libvips-linux-s390x': 1.1.0
'@img/sharp-libvips-linux-x64': 1.1.0
'@img/sharp-libvips-linuxmusl-arm64': 1.1.0
'@img/sharp-libvips-linuxmusl-x64': 1.1.0
'@img/sharp-linux-arm': 0.34.0
'@img/sharp-linux-arm64': 0.34.0
'@img/sharp-linux-s390x': 0.34.0
'@img/sharp-linux-x64': 0.34.0
'@img/sharp-linuxmusl-arm64': 0.34.0
'@img/sharp-linuxmusl-x64': 0.34.0
'@img/sharp-wasm32': 0.34.0
'@img/sharp-win32-ia32': 0.34.0
'@img/sharp-win32-x64': 0.34.0
shebang-command@2.0.0: shebang-command@2.0.0:
dependencies: dependencies:
shebang-regex: 3.0.0 shebang-regex: 3.0.0
@ -4426,7 +4645,6 @@ snapshots:
simple-swizzle@0.2.2: simple-swizzle@0.2.2:
dependencies: dependencies:
is-arrayish: 0.3.2 is-arrayish: 0.3.2
optional: true
source-map-js@1.2.1: {} source-map-js@1.2.1: {}

View file

@ -1,9 +0,0 @@
/*
Warnings:
- You are about to drop the column `pictures` on the `miis` table. All the data in the column will be lost.
*/
-- AlterTable
ALTER TABLE "miis" DROP COLUMN "pictures",
ADD COLUMN "images" TEXT[];

View file

@ -45,7 +45,9 @@ CREATE TABLE "miis" (
"id" SERIAL NOT NULL, "id" SERIAL NOT NULL,
"userId" INTEGER NOT NULL, "userId" INTEGER NOT NULL,
"name" VARCHAR(64) NOT NULL, "name" VARCHAR(64) NOT NULL,
"pictures" TEXT[], "qrCodeUrl" TEXT NOT NULL,
"studioUrl" TEXT NOT NULL,
"images" TEXT[],
"tags" TEXT[], "tags" TEXT[],
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP, "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,

View file

@ -0,0 +1,3 @@
-- AlterTable
ALTER TABLE "miis" ALTER COLUMN "qrCodeUrl" DROP NOT NULL,
ALTER COLUMN "studioUrl" DROP NOT NULL;

View file

@ -64,6 +64,8 @@ model Mii {
id Int @id @default(autoincrement()) id Int @id @default(autoincrement())
userId Int userId Int
name String @db.VarChar(64) name String @db.VarChar(64)
qrCodeUrl String?
studioUrl String?
images String[] images String[]
tags String[] tags String[]

139
src/app/api/submit/route.ts Normal file
View 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 });
}
}

View file

@ -1,5 +1,7 @@
"use client"; "use client";
import { redirect } from "next/navigation";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useDropzone } from "react-dropzone"; import { useDropzone } from "react-dropzone";
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
@ -8,12 +10,13 @@ import { AES_CCM } from "@trafficlunar/asmcrypto.js";
import Mii from "@pretendonetwork/mii-js"; import Mii from "@pretendonetwork/mii-js";
import qrcode from "qrcode-generator"; 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 TagSelector from "./submit/tag-selector";
import QrUpload from "./submit/qr-upload"; import QrUpload from "./submit/qr-upload";
import QrScanner from "./submit/qr-scanner"; 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() { export default function SubmitForm() {
const { acceptedFiles, getRootProps, getInputProps } = useDropzone({ const { acceptedFiles, getRootProps, getInputProps } = useDropzone({
accept: { accept: {
@ -22,15 +25,53 @@ export default function SubmitForm() {
}); });
const [isQrScannerOpen, setIsQrScannerOpen] = useState(false); const [isQrScannerOpen, setIsQrScannerOpen] = useState(false);
const [qrBytes, setQrBytes] = useState<Uint8Array>(new Uint8Array());
const [studioUrl, setStudioUrl] = useState<string | undefined>(); const [studioUrl, setStudioUrl] = useState<string | undefined>();
const [generatedQrCodeUrl, setGeneratedQrCodeUrl] = 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(() => { useEffect(() => {
if (qrBytes.length == 0) return; if (qrBytesRaw.length == 0) return;
const qrBytes = new Uint8Array(qrBytesRaw);
const decode = async () => { const decode = async () => {
setError("");
// Decrypt the QR code // Decrypt the QR code
const nonce = qrBytes.subarray(0, 8); const nonce = qrBytes.subarray(0, 8);
const content = qrBytes.subarray(8, 0x70); const content = qrBytes.subarray(8, 0x70);
@ -38,16 +79,31 @@ export default function SubmitForm() {
const nonceWithZeros = new Uint8Array(12); const nonceWithZeros = new Uint8Array(12);
nonceWithZeros.set(nonce, 0); 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); const result = new Uint8Array(96);
result.set(decrypted.subarray(0, 12), 0); result.set(decrypted.subarray(0, 12), 0);
result.set(nonce, 12); result.set(nonce, 12);
result.set(decrypted.subarray(12), 20); 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 // Convert to Mii class
const buffer = Buffer.from(result); const buffer = Buffer.from(result);
const mii = new Mii(buffer); const mii = new Mii(buffer);
try {
setStudioUrl(mii.studioUrl({ width: 128 })); setStudioUrl(mii.studioUrl({ width: 128 }));
// Generate a new QR code for aesthetic reasons // Generate a new QR code for aesthetic reasons
@ -57,13 +113,17 @@ export default function SubmitForm() {
generatedCode.make(); 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(); decode();
}, [qrBytes]); }, [qrBytesRaw]);
return ( 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="p-4 flex flex-col gap-2">
<div className="flex justify-center gap-2"> <div className="flex justify-center gap-2">
<img <img
@ -110,6 +170,8 @@ export default function SubmitForm() {
minLength={2} minLength={2}
maxLength={64} maxLength={64}
placeholder="Type your mii's name here..." placeholder="Type your mii's name here..."
value={name}
onChange={(e) => setName(e.target.value)}
/> />
</div> </div>
@ -117,13 +179,13 @@ export default function SubmitForm() {
<label htmlFor="tags" className="font-semibold"> <label htmlFor="tags" className="font-semibold">
Tags Tags
</label> </label>
<TagSelector /> <TagSelector tags={tags} setTags={setTags} />
</div> </div>
<fieldset className="border-t-2 border-b-2 border-black p-3 flex flex-col items-center gap-2"> <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> <legend className="px-2">QR Code</legend>
<QrUpload setQrBytes={setQrBytes} /> <QrUpload setQrBytesRaw={setQrBytesRaw} />
<span>or</span> <span>or</span>
@ -132,13 +194,17 @@ export default function SubmitForm() {
Use your camera Use your camera
</button> </button>
<QrScanner isOpen={isQrScannerOpen} setIsOpen={setIsQrScannerOpen} setQrBytes={setQrBytes} /> <QrScanner isOpen={isQrScannerOpen} setIsOpen={setIsQrScannerOpen} setQrBytesRaw={setQrBytesRaw} />
</fieldset> </fieldset>
<button type="submit" className="pill button w-min ml-auto"> <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 Submit
</button> </button>
</div> </div>
</div>
</form> </form>
); );
} }

View file

@ -9,10 +9,10 @@ import QrFinder from "../qr-finder";
interface Props { interface Props {
isOpen: boolean; isOpen: boolean;
setIsOpen: React.Dispatch<React.SetStateAction<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); const [permissionGranted, setPermissionGranted] = useState<boolean | null>(null);
useEffect(() => { useEffect(() => {
@ -29,10 +29,10 @@ export default function QrScanner({ isOpen, setIsOpen, setQrBytes }: Props) {
setIsOpen(false); setIsOpen(false);
// Convert to bytes // Convert to bytes
const encoder = new TextEncoder(); // const encoder = new TextEncoder();
const byteArray = encoder.encode(result[0].rawValue); // const byteArray = encoder.encode(result[0].rawValue);
setQrBytes(byteArray); // setQrBytes(byteArray);
}; };
if (isOpen) if (isOpen)

View file

@ -6,10 +6,10 @@ import { Icon } from "@iconify/react";
import jsQR from "jsqr"; import jsQR from "jsqr";
interface Props { 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[]) => { const onDrop = useCallback((acceptedFiles: FileWithPath[]) => {
acceptedFiles.forEach((file) => { acceptedFiles.forEach((file) => {
// Scan QR code // Scan QR code
@ -28,7 +28,7 @@ export default function QrUpload({ setQrBytes }: Props) {
const imageData = ctx.getImageData(0, 0, image.width, image.height); const imageData = ctx.getImageData(0, 0, image.width, image.height);
const decoded = jsQR(imageData.data, 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; image.src = event.target!.result as string;
}; };

View file

@ -2,20 +2,21 @@
import CreatableSelect from "react-select/creatable"; import CreatableSelect from "react-select/creatable";
const options = [ interface Props {
{ value: "anime", label: "anime" }, tags: string[];
{ value: "art", label: "art" }, setTags: React.Dispatch<React.SetStateAction<string[]>>;
{ 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" },
];
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 // todo: tag validating
return ( return (
@ -23,7 +24,9 @@ export default function TagSelector() {
isMulti isMulti
placeholder="Select or create tags..." placeholder="Select or create tags..."
options={options} 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={{ styles={{
control: (provided) => ({ control: (provided) => ({
...provided, ...provided,

2
src/lib/constants.ts Normal file
View file

@ -0,0 +1,2 @@
export const MII_DECRYPTION_KEY = new Uint8Array([0x59, 0xfc, 0x81, 0x7e, 0x64, 0x46, 0xea, 0x61, 0x90, 0x34, 0x7b, 0x20, 0xe9, 0xbd, 0xce, 0x52]);
export const MII_QR_SIZES = [0x70, 172, 324, 372];

22
src/lib/schemas.ts Normal file
View file

@ -0,0 +1,22 @@
import { z } from "zod";
export const nameSchema = z
.string()
.min(2, { message: "Name must be at least 2 characters long" })
.max(64, { message: "Name cannot be more than 64 characters long" })
.regex(/^[a-zA-Z0-9-_. ']+$/, {
message: "Name can only contain letters, numbers, dashes, underscores, apostrophes, and spaces.",
});
export const tagsSchema = z
.array(
z
.string()
.min(2, { message: "Tags must be at least 2 characters long" })
.max(64, { message: "Tags cannot be more than 20 characters long" })
.regex(/^[a-z0-9-_]+$/, {
message: "Tags can only contain lowercase letters, numbers, dashes, and underscores.",
})
)
.min(1, { message: "There must be at least 1 tag" })
.max(8, { message: "There cannot be more than 8 tags" });