Depot API & v4 (#298)

* feat: nginx + torrential basics & services system

* fix: lint + i18n

* fix: update torrential to remove openssl

* feat: add torrential to Docker build

* feat: move to self hosted runner

* fix: move off self-hosted runner

* fix: update nginx.conf

* feat: torrential cache invalidation

* fix: update torrential for cache invalidation

* feat: integrity check task

* fix: lint

* feat: move to version ids

* fix: client fixes and client-side checks

* feat: new depot apis and version id fixes

* feat: update torrential

* feat: droplet bump and remove unsafe update functions

* fix: lint

* feat: v4 featureset: emulators, multi-launch commands

* fix: lint

* fix: mobile ui for game editor

* feat: launch options

* fix: lint

* fix: remove axios, use $fetch

* feat: metadata and task api improvements

* feat: task actions

* fix: slight styling issue

* feat: fix style and lints

* feat: totp backend routes

* feat: oidc groups

* fix: update drop-base

* feat: creation of passkeys & totp

* feat: totp signin

* feat: webauthn mfa/signin

* feat: launch selecting ui

* fix: manually running tasks

* feat: update add company game modal to use new SelectorGame

* feat: executor selector

* fix(docker): update rust to rust nightly for torrential build (#305)

* feat: new version ui

* feat: move package lookup to build time to allow for deno dev

* fix: lint

* feat: localisation cleanup

* feat: apply localisation cleanup

* feat: potential i18n refactor logic

* feat: remove args from commands

* fix: lint

* fix: lockfile

---------

Co-authored-by: Aden Lindsay <140392385+AdenMGB@users.noreply.github.com>

pages/client/code/index.vue

@@ -8,20 +8,7 @@
         {{ $t("auth.code.description") }}
       </p>
       <div v-if="!loading" class="mt-8 flex flex-row gap-4">
-        <input
-          v-for="i in codeLength"
-          ref="codeElements"
-          :key="i"
-          v-model="code[i - 1]"
-          class="uppercase w-16 h-16 appearance-none text-center bg-zinc-900 rounded-xl border-zinc-700 focus:border-blue-600 text-2xl text-bold font-display text-zinc-100"
-          type="text"
-          pattern="\d*"
-          :placeholder="placeholder[i - 1]"
-          @keydown="(v) => keydown(i - 1, v)"
-          @input="() => input(i - 1)"
-          @focusin="() => select(i - 1)"
-          @paste="(v) => paste(i - 1, v)"
-        />
+        <CodeInput @complete="(code) => complete(code)" />
       </div>
       <div v-else class="mt-8 flex items-center justify-center">
         <svg
@@ -65,58 +52,10 @@
 import { XCircleIcon } from "@heroicons/vue/24/solid";
 import { FetchError } from "ofetch";
 
-const codeLength = 7;
-const placeholder = "1A2B3C4";
-const codeElements = useTemplateRef("codeElements");
-const code = ref<string[]>([]);
-
 const router = useRouter();
 const loading = ref(false);
 const error = ref<string | undefined>(undefined);
 
-function keydown(index: number, event: KeyboardEvent) {
-  if (event.key === "Backspace" && !code.value[index] && index > 0) {
-    codeElements.value![index - 1].focus();
-  }
-}
-
-function input(index: number) {
-  if (codeElements.value === null) return;
-  const v = code.value[index] ?? "";
-  if (v.length > 1) code.value[index] = v[0];
-
-  if (!(index + 1 >= codeElements.value.length) && v) {
-    codeElements.value[index + 1].focus();
-  }
-
-  if (!(index - 1 < 0) && !v) {
-    codeElements.value[index - 1].focus();
-  }
-
-  console.log(index, codeLength - 1);
-  if (index == codeLength - 1) {
-    const assembledCode = code.value.join("");
-    if (assembledCode.length == codeLength) {
-      complete(assembledCode);
-    }
-  }
-}
-
-function select(index: number) {
-  if (!codeElements.value) return;
-  if (index >= codeElements.value.length) return;
-  codeElements.value[index].select();
-}
-
-function paste(index: number, event: ClipboardEvent) {
-  const newCode = event.clipboardData!.getData("text/plain");
-  for (let i = 0; i < newCode.length && i < codeLength; i++) {
-    code.value[i] = newCode[i];
-    codeElements.value![i].focus();
-  }
-  event.preventDefault();
-}
-
 async function complete(code: string) {
   loading.value = true;
   try {