server side and user client side completed for registration

components/HeaderUserWidget.vue

@@ -22,7 +22,7 @@
       leave-to-class="transform opacity-0 scale-95"
     >
       <MenuItems
-        class="absolute right-0 top-10 z-10 w-56 origin-top-right focus:outline-none shadow-md"
+        class="absolute right-0 top-10 z-50 w-56 origin-top-right focus:outline-none shadow-md"
       >
         <PanelWidget class="flex-col gap-y-2">
           <NuxtLink

error.vue

@@ -2,95 +2,105 @@
 import type { NuxtError } from "#app";
 
 const props = defineProps({
-    error: Object as () => NuxtError,
+  error: Object as () => NuxtError,
 });
 
 const route = useRoute();
 const user = useUser();
+const statusCode = props.error?.statusCode;
+const message =
+  props.error?.statusMessage ||
+  props.error?.message ||
+  "An unknown error occurred.";
+const showSignIn = statusCode ? statusCode == 403 || statusCode == 401 : false;
 
 async function signIn() {
-    clearError({
+  clearError({
-        redirect: `/signin?redirect=${encodeURIComponent(route.fullPath)}`,
+    redirect: `/signin?redirect=${encodeURIComponent(route.fullPath)}`,
-    });
+  });
 }
 
 useHead({
-    title: `${props.error?.statusCode ?? "An unknown error occurred"} | Drop`,
+  title: `${statusCode ?? message} | Drop`,
 });
 
 console.log(props.error);
 </script>
 
 <template>
-    <div
+  <div
-        class="grid min-h-screen grid-cols-1 grid-rows-[1fr,auto,1fr] bg-zinc-950 lg:grid-cols-[max(50%,36rem),1fr]"
+    class="grid min-h-screen grid-cols-1 grid-rows-[1fr,auto,1fr] bg-zinc-950 lg:grid-cols-[max(50%,36rem),1fr]"
+  >
+    <header
+      class="mx-auto w-full max-w-7xl px-6 pt-6 sm:pt-10 lg:col-span-2 lg:col-start-1 lg:row-start-1 lg:px-8"
     >
-        <header
+      <Logo class="h-10 w-auto sm:h-12" />
-            class="mx-auto w-full max-w-7xl px-6 pt-6 sm:pt-10 lg:col-span-2 lg:col-start-1 lg:row-start-1 lg:px-8"
+    </header>
+    <main
+      class="mx-auto w-full max-w-7xl px-6 py-24 sm:py-32 lg:col-span-2 lg:col-start-1 lg:row-start-2 lg:px-8"
+    >
+      <div class="max-w-lg">
+        <p class="text-base font-semibold leading-8 text-blue-600">
+          {{ error?.statusCode }}
+        </p>
+        <h1
+          class="mt-4 text-3xl font-bold font-display tracking-tight text-zinc-100 sm:text-5xl"
         >
-            <Logo class="h-10 w-auto sm:h-12" />
+          Oh no!
-        </header>
+        </h1>
-        <main
+        <p v-if="message" class="mt-3 font-bold text-base leading-7 text-red-500">
-            class="mx-auto w-full max-w-7xl px-6 py-24 sm:py-32 lg:col-span-2 lg:col-start-1 lg:row-start-2 lg:px-8"
+          {{ message }}
-        >
+        </p>
-            <div class="max-w-lg">
+        <p class="mt-6 text-base leading-7 text-zinc-400">
-                <p class="text-base font-semibold leading-8 text-blue-600">
+          An error occurred while responding to your request. If you believe
-                    {{ error?.statusCode }}
+          this to be a bug, please report it. Try signing in and see if it
-                </p>
+          resolves the issue.
-                <h1
+        </p>
-                    class="mt-4 text-3xl font-bold font-display tracking-tight text-zinc-100 sm:text-5xl"
+        <div class="mt-10">
-                >
+          <!-- full app reload to fix errors -->
-                    Oh no!
+          <a
-                </h1>
+            v-if="user && !showSignIn"
-                <p class="mt-6 text-base leading-7 text-zinc-400">
+            href="/"
-                    An error occurred while responding to your request. If you
+            class="text-sm font-semibold leading-7 text-blue-600"
-                    believe this to be a bug, please report it.
+            ><span aria-hidden="true">&larr;</span> Back to home</a
-                </p>
+          >
-                <div class="mt-10">
+          <button
-                    <!-- full app reload to fix errors -->
+            v-else
-                    <a
+            @click="signIn"
-                        v-if="user"
+            class="text-sm font-semibold leading-7 text-blue-600"
-                        href="/"
+          >
-                        class="text-sm font-semibold leading-7 text-blue-600"
+            Sign in <span aria-hidden="true">&rarr;</span>
-                        ><span aria-hidden="true">&larr;</span> Back to home</a
+          </button>
-                    >
-                    <button
-                        v-else
-                        @click="signIn"
-                        class="text-sm font-semibold leading-7 text-blue-600"
-                    >
-                        Sign in <span aria-hidden="true">&rarr;</span>
-                    </button>
-                </div>
-            </div>
-        </main>
-        <footer class="self-end lg:col-span-2 lg:col-start-1 lg:row-start-3">
-            <div class="border-t border-zinc-700 bg-zinc-900 py-10">
-                <nav
-                    class="mx-auto flex w-full max-w-7xl items-center gap-x-4 px-6 text-sm leading-7 text-zinc-400 lg:px-8"
-                >
-                    <NuxtLink href="/docs">Documentation</NuxtLink>
-                    <svg
-                        viewBox="0 0 2 2"
-                        aria-hidden="true"
-                        class="h-0.5 w-0.5 fill-zinc-600"
-                    >
-                        <circle cx="1" cy="1" r="1" />
-                    </svg>
-                    <a href="https://discord.gg/NHx46XKJWA" target="_blank"
-                        >Support Discord</a
-                    >
-                </nav>
-            </div>
-        </footer>
-        <div
-            class="hidden lg:relative lg:col-start-2 lg:row-start-1 lg:row-end-4 lg:block"
-        >
-            <img
-                src="/wallpapers/error-wallpaper.jpg"
-                alt=""
-                class="absolute inset-0 h-full w-full object-cover"
-            />
         </div>
+      </div>
+    </main>
+    <footer class="self-end lg:col-span-2 lg:col-start-1 lg:row-start-3">
+      <div class="border-t border-zinc-700 bg-zinc-900 py-10">
+        <nav
+          class="mx-auto flex w-full max-w-7xl items-center gap-x-4 px-6 text-sm leading-7 text-zinc-400 lg:px-8"
+        >
+          <NuxtLink href="/docs">Documentation</NuxtLink>
+          <svg
+            viewBox="0 0 2 2"
+            aria-hidden="true"
+            class="h-0.5 w-0.5 fill-zinc-600"
+          >
+            <circle cx="1" cy="1" r="1" />
+          </svg>
+          <a href="https://discord.gg/NHx46XKJWA" target="_blank"
+            >Support Discord</a
+          >
+        </nav>
+      </div>
+    </footer>
+    <div
+      class="hidden lg:relative lg:col-start-2 lg:row-start-1 lg:row-end-4 lg:block"
+    >
+      <img
+        src="/wallpapers/error-wallpaper.jpg"
+        alt=""
+        class="absolute inset-0 h-full w-full object-cover"
+      />
     </div>
+  </div>
 </template>

package.json

@@ -17,8 +17,10 @@
     "@prisma/client": "5.20.0",
     "axios": "^1.7.7",
     "bcrypt": "^5.1.1",
+    "canvas": "^2.11.2",
     "fast-fuzzy": "^1.12.0",
     "file-type-mime": "^0.4.3",
+    "jdenticon": "^3.3.0",
     "markdown-it": "^14.1.0",
     "moment": "^2.30.1",
     "nuxt": "^3.13.2",

pages/register.vue

@@ -1,26 +1,260 @@
 <template>
-  <form @submit.prevent="register">
+  <div
-    <input type="text" v-model="username" placeholder="username" />
+    class="flex min-h-screen bg-zinc-950 flex-1 flex-col justify-center py-12 sm:px-6 lg:px-8"
-    <input type="password" v-model="password" placeholder="password" />
+  >
+    <div class="sm:mx-auto sm:w-full sm:max-w-md">
+      <Logo class="mx-auto h-10 w-auto" />
+      <h2
+        class="mt-6 text-center text-2xl font-bold font-display leading-9 tracking-tight text-zinc-100"
+      >
+        Create your Drop account
+      </h2>
+    </div>
 
-    <button type="submit">Submit</button>
+    <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-[480px]">
-  </form>
+      <div class="bg-zinc-900 px-6 py-12 shadow sm:rounded-lg sm:px-12">
+        <form class="space-y-6" @submit.prevent="() => register_wrapper()">
+          <div>
+            <label
+              for="display-name"
+              class="block text-sm font-medium leading-6 text-zinc-100"
+              >Display Name</label
+            >
+            <div class="mt-2">
+              <input
+                id="display-name"
+                name="display-name"
+                type="text"
+                autocomplete="display-name"
+                required
+                v-model="displayName"
+                placeholder="AwesomeDropGamer771"
+                class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-500 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
+              />
+            </div>
+          </div>
+
+          <div>
+            <label
+              for="email"
+              class="block text-sm font-medium leading-6 text-zinc-100"
+              >Email address</label
+            >
+            <p
+              :class="[
+                validEmail ? 'text-blue-400' : 'text-red-500',
+                'block text-xs font-medium leading-6',
+              ]"
+            >
+              Must be in the format user@example.com
+            </p>
+            <div class="mt-2">
+              <input
+                id="email"
+                name="email"
+                type="email"
+                autocomplete="email"
+                required
+                :disabled="!!invitation.data.value?.email"
+                v-model="email"
+                placeholder="me@example.com"
+                class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-500 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
+              />
+            </div>
+          </div>
+
+          <div class="w-full h-px bg-zinc-700" />
+
+          <div>
+            <label
+              for="username"
+              class="block text-sm font-medium leading-6 text-zinc-100"
+              >Username</label
+            >
+            <p
+              :class="[
+                validUsername ? 'text-blue-400' : 'text-red-500',
+                'block text-xs font-medium leading-6',
+              ]"
+            >
+              Must be 5 or more characters
+            </p>
+            <div class="mt-2">
+              <input
+                id="username"
+                name="username"
+                type="text"
+                autocomplete="username"
+                required
+                :disabled="!!invitation.data.value?.username"
+                v-model="username"
+                placeholder="myUsername"
+                class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-500 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
+              />
+            </div>
+          </div>
+
+          <div class="w-full h-px bg-zinc-700" />
+
+          <div>
+            <label
+              for="password"
+              class="block text-sm font-medium leading-6 text-zinc-100"
+              >Password</label
+            >
+            <p
+              :class="[
+                validPassword ? 'text-blue-400' : 'text-red-500',
+                'block text-xs font-medium leading-6',
+              ]"
+            >
+              Must be 14 or more characters
+            </p>
+            <div class="mt-2">
+              <input
+                id="password"
+                name="password"
+                type="password"
+                autocomplete="password"
+                required
+                v-model="password"
+                class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-500 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
+              />
+            </div>
+          </div>
+
+          <div>
+            <label
+              for="confirm-password"
+              class="block text-sm font-medium leading-6 text-zinc-100"
+              >Confirm Password</label
+            >
+            <p
+              :class="[
+                validConfirmPassword ? 'text-blue-400' : 'text-red-500',
+                'block text-xs font-medium leading-6',
+              ]"
+            >
+              Must be the same as above
+            </p>
+            <div class="mt-2">
+              <input
+                id="confirm-password"
+                name="confirm-password"
+                type="password"
+                autocomplete="confirm-password"
+                required
+                v-model="confirmPassword"
+                class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-500 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
+              />
+            </div>
+          </div>
+
+          <div>
+            <LoadingButton type="submit" :loading="loading" class="w-full">
+              Create
+            </LoadingButton>
+          </div>
+
+          <div v-if="error" class="mt-1 rounded-md bg-red-600/10 p-4">
+            <div class="flex">
+              <div class="flex-shrink-0">
+                <XCircleIcon class="h-5 w-5 text-red-600" aria-hidden="true" />
+              </div>
+              <div class="ml-3">
+                <h3 class="text-sm font-medium text-red-600">
+                  {{ error }}
+                </h3>
+              </div>
+            </div>
+          </div>
+        </form>
+      </div>
+
+      <!-- todo: feature to add custom text here -->
+      <p v-if="false" class="mt-10 text-center text-sm text-zinc-400">
+        What's Drop?
+        {{ " " }}
+        <a
+          href="https://github.com/Drop-OSS/drop"
+          target="_blank"
+          class="font-semibold leading-6 text-blue-600 hover:text-blue-500"
+          >Check us out here &rarr;</a
+        >
+      </p>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-const username = ref("");
+import { XCircleIcon } from '@heroicons/vue/24/solid';
+
+const route = useRoute();
+const router = useRouter();
+const invitationId = route.query.id?.toString();
+if (!invitationId)
+  throw createError({
+    statusCode: 400,
+    statusMessage: "Invitation required to sign up.",
+  });
+
+const invitation = await useFetch(
+  `/api/v1/auth/signup/simple?id=${encodeURIComponent(invitationId)}`
+);
+
+const email = ref(invitation.data.value?.username);
+const displayName = ref("");
+const username = ref(invitation.data.value?.username);
 const password = ref("");
+const confirmPassword = ref(undefined);
+
+const mailRegex = /^\S+@\S+\.\S+$/g;
+const validEmail = computed(() => mailRegex.test(email.value ?? ""));
+const validUsername = computed(() => (username.value?.length ?? 0) > 5);
+const validPassword = computed(() => (password.value?.length ?? 0) >= 14);
+const validConfirmPassword = computed(
+  () => password.value == confirmPassword.value
+);
+
+const loading = ref(false);
+const error = ref<string | undefined>(undefined);
 
 async function register() {
   await $fetch("/api/v1/auth/signup/simple", {
     method: "POST",
     body: {
+      invitation: invitationId,
       username: username.value,
       password: password.value,
+      email: email.value,
+      displayName: displayName.value,
     },
   });
 }
 
+function register_wrapper() {
+  if (
+    !validEmail.value ||
+    !validUsername.value ||
+    !validPassword.value ||
+    !validConfirmPassword.value
+  )
+    return;
+
+  loading.value = true;
+  register()
+    .then(() => {
+      router.push("/signin");
+    })
+    .catch((response) => {
+      const message = response.statusMessage || "An unknown error occurred";
+      error.value = message;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
 definePageMeta({
   layout: false,
 });

server/api/v1/admin/auth/invitation/index.delete.ts

@@ -0,0 +1,17 @@
+import prisma from "~/server/internal/db/database";
+
+export default defineEventHandler(async (h3) => {
+  const user = await h3.context.session.getAdminUser(h3);
+  if (!user) throw createError({ statusCode: 403 });
+
+  const body = await readBody(h3);
+  const id = body.id;
+  if (!id)
+    throw createError({
+      statusCode: 400,
+      statusMessage: "id required for deletion",
+    });
+
+  await prisma.invitation.delete({ where: { id: id } });
+  return {};
+});

server/api/v1/admin/auth/invitation/index.get.ts

@@ -0,0 +1,9 @@
+import prisma from "~/server/internal/db/database";
+
+export default defineEventHandler(async (h3) => {
+  const user = await h3.context.session.getAdminUser(h3);
+  if (!user) throw createError({ statusCode: 403 });
+
+  const invitations = await prisma.invitation.findMany({});
+  return invitations;
+});

server/api/v1/admin/auth/invitation/index.post.ts

@@ -0,0 +1,27 @@
+import prisma from "~/server/internal/db/database";
+
+export default defineEventHandler(async (h3) => {
+  const user = await h3.context.session.getAdminUser(h3);
+  if (!user) throw createError({ statusCode: 403 });
+
+  const body = await readBody(h3);
+  const isAdmin = body.isAdmin;
+  const username = body.username;
+  const email = body.email;
+
+  if (isAdmin !== undefined && typeof isAdmin !== "boolean")
+    throw createError({
+      statusCode: 400,
+      statusMessage: "isAdmin must be a boolean",
+    });
+
+  const invitation = await prisma.invitation.create({
+    data: {
+      isAdmin: isAdmin,
+      username: username,
+      email: email,
+    },
+  });
+
+  return invitation;
+});

server/api/v1/admin/import/version/index.post.ts

@@ -1,3 +1,4 @@
+import prisma from "~/server/internal/db/database";
 import libraryManager from "~/server/internal/library";
 
 export default defineEventHandler(async (h3) => {
@@ -11,13 +12,33 @@ export default defineEventHandler(async (h3) => {
   const startup = body.startup;
   const setup = body.setup ?? "";
   const delta = body.delta ?? false;
-  if (!gameId || !versionName || !platform || (!delta && !startup))
+
+  // startup & delta require more complex checking logic
+  if (!gameId || !versionName || !platform)
     throw createError({
       statusCode: 400,
       statusMessage:
-        "ID, version, platform, setup and startup (if not in upgrade mode) are required. ",
+        "ID, version, platform, setup, and startup (if not in update mode) are required.",
     });
 
+  if (!delta && !startup)
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Startup executable is required for non-update versions",
+    });
+
+  if (delta) {
+    const validOverlayVersions = await prisma.gameVersion.count({
+      where: { gameId: gameId, platform: platform, delta: false },
+    });
+    if (validOverlayVersions == 0)
+      throw createError({
+        statusCode: 400,
+        statusMessage:
+          "Update mode requires a pre-existing version for this platform.",
+      });
+  }
+
   const taskId = await libraryManager.importVersion(
     gameId,
     versionName,
@@ -26,7 +47,7 @@ export default defineEventHandler(async (h3) => {
       startup,
       setup,
     },
-    delta,
+    delta
   );
   if (!taskId)
     throw createError({

server/api/v1/auth/signup/simple.get.ts

@@ -0,0 +1,20 @@
+import prisma from "~/server/internal/db/database";
+
+export default defineEventHandler(async (h3) => {
+  const query = getQuery(h3);
+  const id = query.id?.toString();
+  if (!id)
+    throw createError({
+      statusCode: 400,
+      statusMessage: "id required in fetching invitation",
+    });
+
+  const invitation = await prisma.invitation.findUnique({ where: { id: id } });
+  if (!invitation)
+    throw createError({
+      statusCode: 404,
+      statusMessage: "Invalid or expired invitation",
+    });
+
+  return invitation;
+});

server/api/v1/auth/signup/simple.post.ts

@@ -1,9 +1,8 @@
 import { AuthMec, Invitation } from "@prisma/client";
-import { Readable } from "stream";
 import prisma from "~/server/internal/db/database";
 import { createHash } from "~/server/internal/security/simple";
 import { v4 as uuidv4 } from "uuid";
-import { KeyOfType } from "~/server/internal/utils/types";
+import * as jdenticon from "jdenticon";
 
 // Only really a simple test, in case people mistype their emails
 const mailRegex = /^\S+@\S+\.\S+$/g;
@@ -48,6 +47,9 @@ export default defineEventHandler(async (h3) => {
     mailRegex.test(e)
   );
   const password = body.password;
+  const displayName = body.displayName ?? username;
+
+  console.log(username, email, password.length, displayName);
   if (username === undefined)
     throw createError({
       statusCode: 400,
@@ -66,6 +68,12 @@ export default defineEventHandler(async (h3) => {
       statusMessage: "Password empty or missing.",
     });
 
+  if (password.length < 14)
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Password must be 14 or more characters.",
+    });
+
   const existing = await prisma.user.count({ where: { username: username } });
   if (existing > 0)
     throw createError({
@@ -78,18 +86,15 @@ export default defineEventHandler(async (h3) => {
   const profilePictureId = uuidv4();
   await h3.context.objects.createFromSource(
     profilePictureId,
-    () =>
+    async () => jdenticon.toPng(username, 256),
-      $fetch<Readable>("https://avatars.githubusercontent.com/u/64579723?v=4", {
-        responseType: "stream",
-      }),
     {},
     [`anonymous:read`, `${userId}:write`]
   );
   const user = await prisma.user.create({
     data: {
       username,
-      displayName: "DecDuck",
+      displayName,
-      email: "",
+      email,
       profilePicture: profilePictureId,
       admin: true,
     },
@@ -104,5 +109,7 @@ export default defineEventHandler(async (h3) => {
     },
   });
 
+  await prisma.invitation.delete({ where: { id: invitationId } });
+
   return user;
 });

tailwind.config.js

@@ -1,3 +1,6 @@
+import * as forms from "@tailwindcss/forms";
+import * as tpyo from "@tailwindcss/typography"; // lol
+
 /** @type {import('tailwindcss').Config} */
 export default {
   content: [
@@ -21,5 +24,5 @@ export default {
       },
     },
   },
-  plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")],
+  plugins: [forms, tpyo],
 };

yarn.lock

@@ -296,12 +296,12 @@
   dependencies:
     mime "^3.0.0"
 
-"@drop/droplet-linux-x64-gnu@^0.7.0":
+"@drop/droplet-linux-x64-gnu@0.7.0", "@drop/droplet-linux-x64-gnu@^0.7.0":
   version "0.7.0"
   resolved "https://lab.deepcore.dev/api/v4/projects/57/packages/npm/@drop/droplet-linux-x64-gnu/-/@drop/droplet-linux-x64-gnu-0.7.0.tgz#128e37707481cfcbbeb057142164f3e637f13f26"
   integrity sha1-Eo43cHSBz8u+sFcUIWTz5jfxPyY=
 
-"@drop/droplet-win32-x64-msvc@^0.7.0":
+"@drop/droplet-win32-x64-msvc@0.7.0", "@drop/droplet-win32-x64-msvc@^0.7.0":
   version "0.7.0"
   resolved "https://lab.deepcore.dev/api/v4/projects/57/packages/npm/@drop/droplet-win32-x64-msvc/-/@drop/droplet-win32-x64-msvc-0.7.0.tgz#db41136165ca74819b359db5d4e9c1ab2c4188c0"
   integrity sha1-20ETYWXKdIGbNZ211OnBqyxBiMA=
@@ -750,7 +750,7 @@
   resolved "https://registry.yarnpkg.com/@kwsites/promise-deferred/-/promise-deferred-1.1.1.tgz#8ace5259254426ccef57f3175bc64ed7095ed919"
   integrity sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==
 
-"@mapbox/node-pre-gyp@^1.0.11", "@mapbox/node-pre-gyp@^1.0.5":
+"@mapbox/node-pre-gyp@^1.0.0", "@mapbox/node-pre-gyp@^1.0.11", "@mapbox/node-pre-gyp@^1.0.5":
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.11.tgz#417db42b7f5323d79e93b34a6d7a2a12c0df43fa"
   integrity sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==
@@ -2209,6 +2209,22 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001646, caniuse-lite@^1.0.30001663:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001669.tgz#fda8f1d29a8bfdc42de0c170d7f34a9cf19ed7a3"
   integrity sha512-DlWzFDJqstqtIVx1zeSpIMLjunf5SmwOw0N2Ck/QSQdS8PLS4+9HrLaYei4w8BIAL7IB/UEDu889d8vhCTPA0w==
 
+canvas-renderer@~2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/canvas-renderer/-/canvas-renderer-2.2.1.tgz#c1d131f78a9799aca8af9679ad0a005052b65550"
+  integrity sha512-RrBgVL5qCEDIXpJ6NrzyRNoTnXxYarqm/cS/W6ERhUJts5UQtt/XPEosGN3rqUkZ4fjBArlnCbsISJ+KCFnIAg==
+  dependencies:
+    "@types/node" "*"
+
+canvas@^2.11.2:
+  version "2.11.2"
+  resolved "https://registry.yarnpkg.com/canvas/-/canvas-2.11.2.tgz#553d87b1e0228c7ac0fc72887c3adbac4abbd860"
+  integrity sha512-ItanGBMrmRV7Py2Z+Xhs7cT+FNt5K0vPL4p9EZ/UX/Mu7hFbkxSjKF2KVtPwX7UYWp7dRKnrTvReflgrItJbdw==
+  dependencies:
+    "@mapbox/node-pre-gyp" "^1.0.0"
+    nan "^2.17.0"
+    simple-get "^3.0.3"
+
 ccount@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/ccount/-/ccount-2.0.1.tgz#17a3bf82302e0870d6da43a01311a8bc02a3ecf5"
@@ -2640,6 +2656,13 @@ decode-named-character-reference@^1.0.0:
   dependencies:
     character-entities "^2.0.0"
 
+decompress-response@^4.2.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/decompress-response/-/decompress-response-4.2.1.tgz#414023cc7a302da25ce2ec82d0d5238ccafd8986"
+  integrity sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==
+  dependencies:
+    mimic-response "^2.0.0"
+
 deepmerge@^4.2.2:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
@@ -3825,6 +3848,13 @@ jackspeak@^3.1.2:
   optionalDependencies:
     "@pkgjs/parseargs" "^0.11.0"
 
+jdenticon@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/jdenticon/-/jdenticon-3.3.0.tgz#64bae9f9b3cf5c2a210e183648117afe3a89b367"
+  integrity sha512-DhuBRNRIybGPeAjMjdHbkIfiwZCCmf8ggu7C49jhp6aJ7DYsZfudnvnTY5/1vgUhrGA7JaDAx1WevnpjCPvaGg==
+  dependencies:
+    canvas-renderer "~2.2.0"
+
 jiti@^1.21.0, jiti@^1.21.6:
   version "1.21.6"
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.6.tgz#6c7f7398dd4b3142767f9a168af2f317a428d268"
@@ -4544,6 +4574,11 @@ mimic-fn@^4.0.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-4.0.0.tgz#60a90550d5cb0b239cca65d893b1a53b29871ecc"
   integrity sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==
 
+mimic-response@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-2.1.0.tgz#d13763d35f613d09ec37ebb30bac0469c0ee8f43"
+  integrity sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==
+
 mini-svg-data-uri@^1.2.3:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz#8ab0aabcdf8c29ad5693ca595af19dd2ead09939"
@@ -4654,6 +4689,11 @@ mz@^2.7.0:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
+nan@^2.17.0:
+  version "2.22.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.22.0.tgz#31bc433fc33213c97bad36404bb68063de604de3"
+  integrity sha512-nbajikzWTMwsW+eSsNm3QwlOs7het9gGJU5dDZzRTQGk03vyBOauxgI4VakDzE0PtsGTmXPsXTbbjVhRwR5mpw==
+
 nanoid@^3.3.4, nanoid@^3.3.7:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
@@ -4959,7 +4999,7 @@ on-finished@2.4.1:
   dependencies:
     ee-first "1.1.1"
 
-once@^1.3.0:
+once@^1.3.0, once@^1.3.1:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
   integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
@@ -5929,6 +5969,20 @@ signal-exit@^4.0.1, signal-exit@^4.1.0:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04"
   integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
 
+simple-concat@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/simple-concat/-/simple-concat-1.0.1.tgz#f46976082ba35c2263f1c8ab5edfe26c41c9552f"
+  integrity sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==
+
+simple-get@^3.0.3:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/simple-get/-/simple-get-3.1.1.tgz#cc7ba77cfbe761036fbfce3d021af25fc5584d55"
+  integrity sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==
+  dependencies:
+    decompress-response "^4.2.0"
+    once "^1.3.1"
+    simple-concat "^1.0.0"
+
 simple-git@^3.27.0:
   version "3.27.0"
   resolved "https://registry.yarnpkg.com/simple-git/-/simple-git-3.27.0.tgz#f4b09e807bda56a4a3968f635c0e4888d3decbd5"