Login with Microsoft button, preview invite

src/routes/invite/[code].svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
-import { server } from "$app/env";
-import { goto } from "$app/navigation";
 import { page } from '$app/stores';
 import { onMount } from "svelte";
+import mslogin from "$lib/images/mslogin.png"
 
 const { code } = $page.params;
 
 let invite;
 let success = "";
+let login = true;
 
 onMount(async () => {
     const loggedIn = await fetch('/api/v1/me')
-    if (!loggedIn.ok) {
-        goto("/api/v1/auth/redirect");
+    if (loggedIn.ok) {
+        login = false
     }
     const request = await fetch(`/api/v1/invite/${code}`)
     if (request.ok) {
@@ -46,7 +46,11 @@ const acceptInvite = async () => {
 {#if success == ""}
     <p>Invite {code} from {invite.creator.display_name}</p>
     <p>Join {invite.server.name}?</p>
+    {#if login }
+    <a href="/api/v1/auth/redirect"><img src="{mslogin}" alt="Login with Microsoft"></a>
+    {:else}
     <button on:click="{acceptInvite}">Yes!</button>
+    {/if}
 {:else}
     <p>You have been whitelisted! Connect at: <code>{invite.server.address}</code></p>
 {/if}
@@ -109,6 +113,6 @@ const acceptInvite = async () => {
     :global(body) {
         font-family: 'MinecraftiaRegular';
         background-color: #202225;
-        background-image: url(../dirt.jpg);
+        background-image: url("/dirt.jpg");
     }
 </style>

svelte.config.js

@@ -9,6 +9,9 @@ const config = {
 
 	kit: {
 		adapter: adapter()
+	},
+	experimental: {
+		useVitePreprocess: true
 	}
 };