Redesigning homepage, starting on admin page

src/routes/__layout.svelte

@@ -1,15 +1,38 @@
+<script lang="ts">
+import { page } from '$app/stores';
+</script>
+
+<svelte:head>
+	<title>Minecraft Server Invites</title>
+</svelte:head>
+
 <slot />
 
 <footer>
+{#if $page.url.pathname == '/' ? 'active' : ''}
 	<a href="/datacollection">Data Collection</a>
+{:else}
+	<a href="/">&lt;- Home</a>
+{/if}
 </footer>
 
+
 <style>
-	:global(body) {
+	@font-face {
-		font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue,
+		font-family: 'Minecraftia';
-			helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
+			src: url('/Minecraftia.ttf') format('truetype');
+		font-weight: normal;
+		font-style: normal;
 	}
-	footer {
+	:global(body) {
+		font-family: 'Minecraftia', monospace;
+		color: white;
+		background-color: #202225;
+		background-image: url('/dirt.jpg');
+	}
+	footer a, footer a:visited {
+		color: white;
+		font-size: large;
 		position: absolute;
 		bottom: 0;
 	}

src/routes/datacollection.svelte

@@ -1,3 +1,4 @@
+<main>
 <h1>Data Collection</h1>
 
 <p>
@@ -6,17 +7,53 @@
 	<a href="https://gdpr.eu/right-to-be-forgotten/">right to be forgotten</a> or any other inquiries,
 	please reach out to me at mc-invites@gmem.ca.
 </p>
+
 <p>
-	User data collected includes your Minecraft username at time of signup, your unique Minecraft
+	User data collected includes:
-	UUID, and Microsoft OAuth tokens required to speak to Mojang's API. IP addresses or other
+	<ul>
-	personally identifiable data that may be sent is not permenantly logged. Other data includes the
+		<li>Your Minecraft username at time of signup</li>
-	server-related configuration when adding a new server to create invites, which includes the
+		<li>Your unique Minecraft UUID</li>
+		<li>Microsoft OAuth tokens required to speak to Mojang's API</li>
+	</ul>
+<p>
+	Any other personally identifiable data that may be sent is not permenantly logged. 
+</p>
+<p>
+	Other, non-PII data 
+	includes the server-related configuration when adding a new server to create invites, which includes the
 	address of the server, the address of the RCON server, and the RCON password, in addition to a
 	custom server name.
 </p>
+</main>
 
 <style>
 	p {
-		max-width: 50vw;
+		padding: 10px;
+		width: 90%;
+		margin: 0 auto;
+	}
+	main {
+		background-color: #444a52f6;
+		color: white;
+		margin: 0 auto;
+		width: 50vw;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		padding: 10px;
+		border-radius: 5px;
+		border: 1px solid white;
+	}
+	@media (max-width: 700px) {
+		main {
+			width: 90vw;
+		}
+	}
+	a {
+		color: lightblue;
+	}
+	a:visited {
+		color: lightgrey;
 	}
 </style>

src/routes/index.svelte

@@ -14,24 +14,101 @@
 			}
 		}
 	});
+
+	const redirectToInvite = (e: Event) => {
+		const formData = new FormData(e.target);
+		const formProps = Object.fromEntries(formData);
+		if (formProps.token != "") {
+			goto(`/invite/${formProps.token}`);
+		}
+	}
 </script>
 
+<div>
+<header>
 {#if !loggedIn}
-	<a href="/api/v1/auth/redirect">Login</a>
+<a href="/api/v1/auth/redirect">Login</a>
 {:else}
-	<a href="/servers">Manage Servers</a>
+<a href="/servers">Manage Servers</a>
 {/if}
 
-<h1>MC Invites</h1>
+<h1>Minecraft Server Invites</h1>
+<h2>discord-like invites for minecraft server whitelists</h2>
+<h3>Free during beta!</h3>
+</header>
 
-<h2>discord-like invites for minecraft servers</h2>
+<form on:submit|preventDefault="{redirectToInvite}">
-
+<label for="token">enter invite code</label>
-<label>enter invite
+<input type="text" name="token" id="token" placeholder="ABC123">
-<input type="text" name="token" id="token"></label>
+<input type="submit" value="Go">
+</form>
+</div>
 
 <style>
-	:global(body) {
+	header, form {
-		font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue,
+		text-align: center;
-			helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
+	}
+	h3 {
+		color: yellow;
+	}
+	header {
+		display: flex;
+		flex-direction: column;
+	}
+	form {
+		display: flex;
+		flex-direction: column;
+		margin: 10px 0;
+	}
+	input[type=text] {
+		color: white;
+		padding: 20px 5px;
+		margin: 0 auto;
+		text-align: center;
+		font-family: 'Minecraftia', monospace;
+		font-size: larger;
+		background-color: black;
+		border: 3px inset grey;
+	}
+	a, a:visited {
+		color: white;
+	}
+
+	div {
+		background-color: #444a52f6;
+		color: white;
+		margin: 0 auto;
+		width: 50vw;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		padding: 10px;
+		border-radius: 5px;
+		border: 1px solid white;
+		position: absolute;
+		top: 40%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
+	@media (max-width: 700px) {
+		div {
+			width: 90vw;
+		}
+	}
+	input[type=submit] {
+		font-family: 'Minecraftia', monospace;
+		color: white;
+		margin: 10px 0;
+		height: 50px;
+		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMQAAAAPCAAAAACe4j/AAAAEuElEQVRIx1WWS5Ibuw5EtddrdRRJJE4iSKrb4c2/AUuy30iK+jEBHCTwAICMCgAKiGhKVQUwKzJHQo4mQGBy7AIvk1E2AQKhFt6bUGD1gILy0DkD4dmzACkGyzCScgFgQmLZr4LpQpC56QB2wgSYE8i1fd6xd1yPHIAKwAs14Undx2LIHK0X6vdFbzTa6CNBLQE8Y5rapn7oAl3KSDKC6cLfL6sLnIVG7ffnyUgvQ6rwLjUZdIVqWz0iEXXCZ+TJsV8feUdoPHDk+a/IeAbq0ldLT59jtHweHwmKS6gFSUYCqKcVsPami1pEnqolkCMBiAS87FXTICp03geYUr8TV8un3KuyC0BfTUzihOCdwjUya1bkT9VWe+AaFOoJzHdtERXRe/eulyEDhC6pjYwr+JQuIDU9/0wQBnJEAkd+9i6IRTJrV7YWnGfwLA6ESphkBoCu88M0YH1CTTOiRUpDdwpGkkP5yL9phhwn+QVxDarAXq513y9bLKgxBGR/CjDyMl4ECd6lO82CaMLbEHGHp1R8ePDERj392ssaCOigNjJ+dXXl6OLUFfVx6dA1BFJLlHpkUHPam095C3QJLIjn6OLIOB3xe0JS85Zd+govg1/z/UhtG3RdVW98yxNp5I0Vtf/U+6y/dJ/yHtSK4q7G9ARscC3/Df/kXTwiT3d6ovjEISLJIVEvBwWeCXlALZTbpy85xqWuf3sNiBBUmYjI+BqN6aNQqDWpipSYf3W1nOV/WALoykjIiCPreSn97UigsjZdPA5s3AmCDIxaVO0Fa1fV/qkaiijPPz/bEeRyLSBDI8K8j37TO8aH7vmOqUUQ1DboYhvqd+FlFGEo+2T75MbLGnjvPeu7Pl521Ap14dcR3h7p75qv4xieqnNDoyCPLt/yKkf5gOUXl+6S3d9Syq/982fz+fhpsm28C5EhJcxsWWQke6KoPMA7tqm7kKcrn6FLhWcoqCNCxDPyQ8wEKR73nIlEX8GpARSJX7/rzeNtWPD/Dl2IwtOYMwV7osGsHYJanzeU7KqIZVCTcrT0IEbyD4d1e1dkBtW2qLhLXK7a1ogDqsjI1DR4PY7nHEqfF9tn8HUJL+eQ/lGOXdwI1++57CqgmDaReM9CZYLAk4D4ymqti4KZI9Htz9OnrcuOhCQEqJfXaxHPAFG/l/ee1GFJPXmPryYUiUGPutnRGXkagmnjHk5RNpm7xxiclm6CjJEQ4+MD4xPmuT9Ef4b3YT3B51a7d4Np76PF0cavuC+SoaH6PlilipEakoJBJETWT3k7Hf+1REPj2fIx95t5ct6u9S5v3KM2fv2Ve29ax9yC98zT2IZot61MHyYtdPF92nguZ29xfcVxSu9Nj5Gl8G3wcVoW8n1Q/f6BHFEAyy5R2aRIdYH8XfV4453vHKcnqarXPD6mdrD0rlVV5xBPF2xuJM5Oo0SdaaqGMjJva7ii6bYv74IzPMo5pGebpu72ghypwTR+WWDuhQOkFijGyAzF3GXh11lEH0hkPINZivpTqLEtVm2j1hVcn/S0//q0es5dbyxOErxKivQ+bHotvzcT3/XztPf20XqG6fJZMePT2X6ts+nlm9LoSYHMiHuJjGXniB7v2fo/5qT4nuxYg6AAAAAASUVORK5CYII=);
+		border-color: #aaa #565656 #565656 #aaa;
+		text-shadow: 3px 3px #4c4c4c;
+		outline: 2px solid #000;
+	}
+
+	input[type=submit]:hover {
+		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMQAAAAPCAMAAACMV5AuAAAAVFBMVEVtd7ZteLZverdwerdwe7hxfLhyfbl0frl1f7p2gLt4grx6hLx7hb18hr5+iL+AisCBi8GCjMGEjsKGkMOHkcSIksSKk8WLlMWLlcaMlcaNlsePmMdwBHmVAAAEjElEQVRIx1WW27YbKw5F3Ul2GYTWFAJX+pyd///PfgDsTg0/mSqQ1k08AEAeDkAA7kXyDAeyu2QCWREgCGSvAAbIE/D9U2m8Ji4Drw0CEhP7EMiqBFxmDMBEkHvd5AziDsjoCKQXddUl1nuZgMZrf0PMdj1kgNY+Ay+CJPg8kj1rR3X/GS9kxaoJVFaB6QkxIX5TBX65mpAZGQH3HaoCFMj6/GxuYgDyTsyup1hfxwxVN+F08ANGANyf8jqAPaBpranJvhxV+VV08JGPVScmcL8W4EIuAFWFHMZrUkUfNC3WtIsEaFogMWJRl839MES61w1cjMUsI1fb7GKaoENMOdFNykzXPz2mlwekkXjV4ioO9b15rZWZd4AaCL9cxdSutl8buIOUkd8JTgAy01IKoFoFPhAZr65SbDHgxFIGKi5IpLaKdlafAHxaVWDt2SSZ24LQhEx6aLGyj7RtELDLiA7EiD72ehBiQJo5oPq1nOQMYGAIYoY2AwIrImaA+25P8vZRa0KgqrjnQIaACiom/1G9Sla3GUHVLl/mMl/mxeUPGT0T5seAeeAQtF9WV2F7cX4niJ4DYmBd12oh7jymyRkBuq6M81mQuExHVv313beo9VH3ojfM2zZ8AkTG8X7EeDs6OZw+mrY7E5l/gqQJmZx+YySQAi1/dqQZy0as4FL1d7nrcfd1kjWTX1ZIYESTUCnuPZE7+anrqcxlz3diUX2HowHCf15S3AvxrnhRxeMwtQACGYGKZ7wGjNl7vH73MHdP8s/vSXM0FiRqMnPowfbjRsfe6n7nZ/FGIyfgF6+A/t1XTrcWB3Q42AxkMOfMfuJotRPgqGqFMfB8KO6eN+BEpO8F2eLZ18YO0GUdmEDcXMcNey+XuOfvP5P35guSVxAzWRYUpIoSuZiJrJ/p4zPouw0pwX+6XwpIcyNWEcJ/uf5Svuyx+ncTfhmotEhIBPe/8f961F/jI5aQfSs3WFOwChnZZxPk+HQjZu/WBuDFVwobZnoLISBOdkmNLFPE9iadiImsgTcdTDKA8dj1qBT518Xcg6+6L0Yl/nqCLeH+b46InkCSETTBzEQBRoPEwS9lKVUkpEx426M3oIMHYQLhK/B6jHvgXw6if4+YM4mlJdWDpLw4MhHgjwBZgIt+ZJdAVENOEkiv6mY4yy5nFPjnQmGfGVy0IqP+cmbsWF7Se/rT+5ZBzHPdKfajHW2ouWldPJaoTDJ3GUYTNMV/IyaiPYqQuX0VPXK+ra3Mc8c5Wlkp4D/e5S5htjXU3HnPPJsBXraRM/rSpOMX99zMoVradRl9AMxJdVPIYgf8Rhu0DvLM739A5rmjJ51QcW9SFXjcvR85oYOhSKTsd65pqdKWIV59ZO/7kKTDJLbvYw9XVRIyTXKJdfm4rOjE18yT8IHM/euZa0Z0fLvBSIh7h925QLoXR80WNfnqOHHP7Qk5aj+dTLX4E3hhIkafoGd15/IDT/lPTVSVr233dy6OkJtiLm0yBu+byeE2Yc59pVrDdKyPjxgD4h6r6vcFwpYNHMxVBaE2ApmfyTTjf5jQnWRymG7iAAAAAElFTkSuQmCC);
+		border-color: #bdc6ff #59639a #59639a #bdc6ff;
 	}
 </style>

src/routes/invite/[code].svelte

@@ -6,6 +6,7 @@
 	const { code } = $page.params;
 
 	let invite;
+	let loaded = false;
 	let success = '';
 	let login = true;
 
@@ -17,6 +18,10 @@
 		const request = await fetch(`/api/v1/invite/${code}`);
 		if (request.ok) {
 			invite = await request.json();
+			loaded = true;
+		}
+		else {
+			loaded = true;
 		}
 	});
 
@@ -41,17 +46,22 @@
 </svelte:head>
 
 <div>
-	{#if invite}
+	{#if loaded}
-		{#if success == ''}
+		{#if invite}
-			<p>Invite {code} from {invite.creator.display_name}</p>
+			{#if success == ''}
-			<p>Join {invite.server.name}?</p>
+				<p>Invite {code} from {invite.creator.display_name}</p>
-			{#if login}
+				<p>Join {invite.server.name}?</p>
-				<a href="/api/v1/auth/redirect"><img src={mslogin} alt="Login with Microsoft" /></a>
+				{#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}
-				<button on:click={acceptInvite}>Yes!</button>
+				<p>You have been whitelisted! Connect at: <code>{invite.server.address}</code></p>
 			{/if}
 		{:else}
-			<p>You have been whitelisted! Connect at: <code>{invite.server.address}</code></p>
+			<p>Invite code not found!</p>
+			<a href="/">Go home</a>
 		{/if}
 	{:else}
 		<p>Loading...</p>
@@ -59,7 +69,6 @@
 </div>
 
 <style>
-	@import 'https://fontlibrary.org/face/minecraftia';
 	div {
 		background-color: #444a52f6;
 		color: white;
@@ -88,7 +97,6 @@
 		margin: 0 auto;
 		height: 6vh;
 		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMQAAAAPCAAAAACe4j/AAAAEuElEQVRIx1WWS5Ibuw5EtddrdRRJJE4iSKrb4c2/AUuy30iK+jEBHCTwAICMCgAKiGhKVQUwKzJHQo4mQGBy7AIvk1E2AQKhFt6bUGD1gILy0DkD4dmzACkGyzCScgFgQmLZr4LpQpC56QB2wgSYE8i1fd6xd1yPHIAKwAs14Undx2LIHK0X6vdFbzTa6CNBLQE8Y5rapn7oAl3KSDKC6cLfL6sLnIVG7ffnyUgvQ6rwLjUZdIVqWz0iEXXCZ+TJsV8feUdoPHDk+a/IeAbq0ldLT59jtHweHwmKS6gFSUYCqKcVsPami1pEnqolkCMBiAS87FXTICp03geYUr8TV8un3KuyC0BfTUzihOCdwjUya1bkT9VWe+AaFOoJzHdtERXRe/eulyEDhC6pjYwr+JQuIDU9/0wQBnJEAkd+9i6IRTJrV7YWnGfwLA6ESphkBoCu88M0YH1CTTOiRUpDdwpGkkP5yL9phhwn+QVxDarAXq513y9bLKgxBGR/CjDyMl4ECd6lO82CaMLbEHGHp1R8ePDERj392ssaCOigNjJ+dXXl6OLUFfVx6dA1BFJLlHpkUHPam095C3QJLIjn6OLIOB3xe0JS85Zd+govg1/z/UhtG3RdVW98yxNp5I0Vtf/U+6y/dJ/yHtSK4q7G9ARscC3/Df/kXTwiT3d6ovjEISLJIVEvBwWeCXlALZTbpy85xqWuf3sNiBBUmYjI+BqN6aNQqDWpipSYf3W1nOV/WALoykjIiCPreSn97UigsjZdPA5s3AmCDIxaVO0Fa1fV/qkaiijPPz/bEeRyLSBDI8K8j37TO8aH7vmOqUUQ1DboYhvqd+FlFGEo+2T75MbLGnjvPeu7Pl521Ap14dcR3h7p75qv4xieqnNDoyCPLt/yKkf5gOUXl+6S3d9Syq/982fz+fhpsm28C5EhJcxsWWQke6KoPMA7tqm7kKcrn6FLhWcoqCNCxDPyQ8wEKR73nIlEX8GpARSJX7/rzeNtWPD/Dl2IwtOYMwV7osGsHYJanzeU7KqIZVCTcrT0IEbyD4d1e1dkBtW2qLhLXK7a1ogDqsjI1DR4PY7nHEqfF9tn8HUJL+eQ/lGOXdwI1++57CqgmDaReM9CZYLAk4D4ymqti4KZI9Htz9OnrcuOhCQEqJfXaxHPAFG/l/ee1GFJPXmPryYUiUGPutnRGXkagmnjHk5RNpm7xxiclm6CjJEQ4+MD4xPmuT9Ef4b3YT3B51a7d4Np76PF0cavuC+SoaH6PlilipEakoJBJETWT3k7Hf+1REPj2fIx95t5ct6u9S5v3KM2fv2Ve29ax9yC98zT2IZot61MHyYtdPF92nguZ29xfcVxSu9Nj5Gl8G3wcVoW8n1Q/f6BHFEAyy5R2aRIdYH8XfV4453vHKcnqarXPD6mdrD0rlVV5xBPF2xuJM5Oo0SdaaqGMjJva7ii6bYv74IzPMo5pGebpu72ghypwTR+WWDuhQOkFijGyAzF3GXh11lEH0hkPINZivpTqLEtVm2j1hVcn/S0//q0es5dbyxOErxKivQ+bHotvzcT3/XztPf20XqG6fJZMePT2X6ts+nlm9LoSYHMiHuJjGXniB7v2fo/5qT4nuxYg6AAAAAASUVORK5CYII=);
-		font-family: 'MinecraftiaRegular';
 		border-color: #aaa #565656 #565656 #aaa;
 		text-shadow: 3px 3px #4c4c4c;
 		outline: 2px solid #000;
@@ -99,7 +107,6 @@
 		border-color: #bdc6ff #59639a #59639a #bdc6ff;
 	}
 	code {
-		font-family: 'MinecraftiaRegular';
 		color: white;
 		padding: 20px 5px;
 		margin: 20px 0;
@@ -109,9 +116,7 @@
 		background-color: black;
 		border: 3px inset grey;
 	}
-	:global(body) {
+	a, a:visited {
-		font-family: 'MinecraftiaRegular';
+		color: white;
-		background-color: #202225;
-		background-image: url('/dirt.jpg');
 	}
 </style>

src/routes/servers/[id]/index.svelte

@@ -69,7 +69,7 @@
             {#each invites as invite}
             <details>
                 <summary>{invite.token} | Uses: {!invite.unlimited ? invite.uses : "unlimited"} <button on:click={deleteInvite} data-invitetoken="{invite.token}">delete</button></summary>
-                {#if invite.log.length > 0}
+                {#if invite.log && invite.log.length > 0}
                     {#each invite.log as log}
                         <p>{log.user.display_name} ({log.user.id})</p>
                     {/each}

src/routes/servers/__layout.svelte

@@ -20,3 +20,12 @@
 {/if}
 
 <slot />
+
+<style>
+	:global(body) {
+		background: rgba(0,0,0,0.75);
+	}
+	:global(a, a:visited) {
+		color: white;
+	}
+</style>

src/routes/servers/index.svelte

@@ -40,6 +40,13 @@
 				<a href="/servers/{server.id}">view</a>
 				<button on:click={deleteServer} data-serverid="{server.id}">delete</button>
 			</div>
+			<div>
+				<h3>{server.name}</h3>
+				<p>Server Address: {server.address}</p>
+				<p>Server RCON Address: {server.rcon.address}</p>
+				<a href="/servers/{server.id}">view</a>
+				<button on:click={deleteServer} data-serverid="{server.id}">delete</button>
+			</div>
 		{/each}
 	{/if}
 {:else}
@@ -48,6 +55,10 @@
 
 <style>
 	div {
-		margin: 0 auto;
+		display: flex;
+		justify-items: center;
+		align-items: center;
+		justify-content: space-evenly;
+		border: 1px solid black;
 	}
 </style>

src/routes/servers/new.svelte

@@ -61,4 +61,6 @@
 		border-radius: 5px;
 		font-size: large;
 	}
+	form {
+	}
 </style>

static/licenses.txt

@@ -0,0 +1 @@
+Minecraftia Font by Andrew Tyler licensed under the CC BY-SA 3.0 (https://creativecommons.org/licenses/by-sa/3.0/) license