Use 6-digit code to add MC accounts instead of usernames

Author: MineGame159

package.json

@@ -11,6 +11,7 @@
 		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch"
 	},
 	"devDependencies": {
+		"@jimmyverburgt/svelte-input-otp": "^0.0.3",
 		"@paypal/paypal-js": "^5.1.4",
 		"@sveltejs/adapter-node": "^1.1.0",
 		"@sveltejs/kit": "^1.0.7",

src/routes/account/+page.svelte

@@ -7,7 +7,6 @@
 
     $: if (browser && !$token) goto("/login");
 
-    let username: string;
     let linkToken: string | null = null;
 
     function unlinkDiscord() {
@@ -25,16 +24,6 @@
             .then(() => refreshUser());
     }
 
-    function addMcAccount() {
-        if (username === "") return;
-
-        api("account/mcAccount?username=" + username, true, "POST")
-            .then(() => {
-                username = "";
-                refreshUser();
-            });
-    }
-
     function selectCape(id: string) {
         api("account/selectCape?cape=" + id, true, "POST")
             .then(() => refreshUser());
@@ -102,10 +91,9 @@
                         {/await}
                     {/each}
                 </ul>
-                <form class="buttons add-account" on:submit|preventDefault={addMcAccount}>
-                    <input type="text" placeholder="Username" bind:value={username}>
-                    <button type="button" on:click={addMcAccount}>Add Account</button>
-                </form>
+                <div class="buttons">
+                    <a class="button" href="/addMcAccount">Add Account</a>
+                </div>
             </div>
 
             <!-- Cape -->
@@ -210,8 +198,4 @@
         padding: 0.5rem;
         font-size: 1rem;
     }
-
-    .add-account {
-        gap: 0;
-    }
 </style>

src/routes/addMcAccount/+page.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+    import { browser } from "$app/environment";
+    import { goto } from "$app/navigation";
+    import { refreshUser, token } from "$lib/user";
+    import Navbar from "$lib/components/navbar.svelte";
+    import { OTPRoot, OTPInput } from "@jimmyverburgt/svelte-input-otp";
+    import { api } from "$lib/api";
+
+    $: if (browser && !$token) goto("/login");
+
+    let errorEl: HTMLSpanElement;
+    let value = "";
+
+    function onComplete(code: string) {
+        errorEl.textContent = "";
+
+        api("account/mcAccount?code=" + code, true, "POST")
+            .then(() => {
+                refreshUser();
+                goto("/account");
+            })
+            .catch(error => {
+                value = "";
+                errorEl.textContent = error;
+            });
+    }
+</script>
+
+<Navbar />
+
+<div class="container">
+    <div>
+        <h1>Add MC account</h1>
+
+        <ol>
+            <li>Launch your Minecraft client and join our server with the IP <span class="ip">mcauth.meteorclient.com</span></li>
+            <li>You will be immediatelly kicked with a one-time 6-digit code</li>
+            <li>Write the code into the input box below</li>
+        </ol>
+
+        <OTPRoot maxLength={6} autoFocus={true} inputMode="numeric" onComplete={onComplete} bind:value className="otp-root">
+            <OTPInput index={0} className="otp-input" focusClassName="focused" />
+            <OTPInput index={1} className="otp-input" focusClassName="focused" />
+            <OTPInput index={2} className="otp-input" focusClassName="focused" />
+            <OTPInput index={3} className="otp-input" focusClassName="focused" />
+            <OTPInput index={4} className="otp-input" focusClassName="focused" />
+            <OTPInput index={5} className="otp-input" focusClassName="focused" />
+        </OTPRoot>
+
+        <span class="error" bind:this={errorEl}></span>
+    </div>
+</div>
+
+<style>
+    .container > div {
+        display: flex;
+        flex-direction: column;
+    }
+
+    h1 {
+        color: black;
+    }
+
+    ol {
+        margin: 2rem 0;
+    }
+
+    li {
+        text-align: left;
+    }
+
+    li::marker {
+        font-weight: bold;
+    }
+
+    .ip {
+        background-color: rgb(190, 190, 190);
+        padding: 0.2rem 0.4rem;
+        border-radius: 0.375rem;
+        box-shadow: inset 0 -3px 0 rgb(99 110 123 / 40%);
+    }
+
+    :global(.otp-root) {
+        display: flex;
+        justify-content: center;
+        gap: 0.25rem;
+
+        color: black;
+        font-size: 2rem;
+    }
+
+    :global(.otp-input) {
+        width: 1em;
+        height: 1.4em;
+        
+        border: 1px rgb(80, 80, 80) solid;
+        border-radius: 0.325rem;
+    }
+
+    :global(.otp-input.focused) {
+        border-width: 2px;
+        border-color: black;
+    }
+
+    .error {
+        color: red;
+    }
+</style>