Redesigning homepage, starting on admin page

This commit is contained in:
Gabriel Simmer 2022-07-11 18:31:40 +01:00
parent b53f510b4c
commit a8e54675f4
10 changed files with 203 additions and 38 deletions

View file

@ -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-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue,
helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
@font-face {
font-family: 'Minecraftia';
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;
}

View file

@ -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
UUID, and Microsoft OAuth tokens required to speak to Mojang's API. IP addresses or other
personally identifiable data that may be sent is not permenantly logged. Other data includes the
server-related configuration when adding a new server to create invites, which includes the
User data collected includes:
<ul>
<li>Your Minecraft username at time of signup</li>
<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;
}
</style>
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>

View file

@ -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>
<label>enter invite
<input type="text" name="token" id="token"></label>
<form on:submit|preventDefault="{redirectToInvite}">
<label for="token">enter invite code</label>
<input type="text" name="token" id="token" placeholder="ABC123">
<input type="submit" value="Go">
</form>
</div>
<style>
:global(body) {
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue,
helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
header, form {
text-align: center;
}
</style>
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>

View file

@ -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 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>
{#if loaded}
{#if invite}
{#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}
<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) {
font-family: 'MinecraftiaRegular';
background-color: #202225;
background-image: url('/dirt.jpg');
a, a:visited {
color: white;
}
</style>

View file

@ -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}

View file

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

View file

@ -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>

View file

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

BIN
static/Minecraftia.ttf Normal file

Binary file not shown.

1
static/licenses.txt Normal file
View file

@ -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