Styling of registration and minecraft page

src/extensions/invite/index.ts

@@ -17,13 +17,13 @@ export default class extends ExtensionBase {
     }
 
     override requires_admin: Extension['requires_admin'] = (path) => {
-        if (['register', 'create_acc'].includes(path.at(0)??'')) {
+        if (['register', 'create_acc', 'register.css'].includes(path.at(0)??'')) {
             return false
         }
         return true
     }
     override requires_login: Extension['requires_login'] = (path) => {
-        if (['register', 'create_acc'].includes(path.at(0)??'')) {
+        if (['register', 'create_acc', 'register.css'].includes(path.at(0)??'')) {
             return false
         }
         return true
@@ -32,7 +32,7 @@ export default class extends ExtensionBase {
     override handle: Extension['handle'] = async (ctx) => {
         let [knex]: [Knex] = this.get_dependencies('Knex')
         let location = ctx.path.shift()
-
+        
         switch (location) {
             case '':
             case undefined:{

src/extensions/invite/register.html

@@ -1,17 +1,19 @@
 {% extends "layout.html" %}
 
 {% block head %}
-    <link href="/invite/index.css" rel="stylesheet">
+    <link href="/invite/register.css" rel="stylesheet">
 {% endblock %}
 
 
 {% block body %}
-<form action="/invite/create_acc" method="post" enctype="application/x-www-form-urlencoded">
+<h3>Registration</h3>
+<div>
+    <form action="/invite/create_acc" method="post" enctype="application/x-www-form-urlencoded">
     <input type="text" name="invite_code" hidden="true" value="{{invite_code}}">
     <table>
         <tr>
             <td><label for="username">Name:</label></td>
-            <td><input type="text" name="username" id="username" maxlength="32" autocomplete="username"></td>
+            <td><input type="text" name="username" id="username" maxlength="32" autocomplete="username" autofocus="true"></td>
         </tr>
         <tr>
             <td><label for="password">Password:</label></td>
@@ -20,15 +22,15 @@
         <tr>
             <td><label for="username">Minecraft Username:</label></td>
             <td><input type="text" name="minecraft_name" id="minecraft_name" maxlength="32" value="{{minecraft_username}}"></td>
-            <td><label>(Only if you want to play on the minecraft server)</label></td>
+            <td><sub>(optional)</sub></td>
         </tr>
         <tr>
             <td></td>
-            <td style="display: flex; flex-direction: row-reverse;">
-                <input type="submit" value="register" name="register">
-            </td>
+            <td><input type="submit" value="register" name="register" class="form-button"></td>
+            <td></td>
         </tr>
     </table>
     <span id="error" style="color: red;">{{auth_err}}</span>
 </form>
+</div>
 {% endblock %}

src/extensions/invite/static/register.css

@@ -0,0 +1,48 @@
+
+div{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 2%;
+}
+
+form {
+    display: flex;
+    flex-wrap: nowrap;
+}
+form input {
+    background-color: silver;
+    border-radius: 5px;
+    border: solid 2px darkgrey;
+    outline: none;
+}
+form input:focus {
+    background-color: rgb(221, 221, 221);
+}
+
+.form-button,
+.form-button:visited {
+    all: unset;
+    background-color: rgb(221, 221, 221);
+    padding: 5px 10px;
+    border-radius: var(--margin-small);
+    display: inline-block;
+    width: fit-content;
+    height: 16px;
+    font-size: 15px;
+    box-shadow: 0 0 2px black;
+    text-decoration: none;
+    color: black;
+    margin-left: 2px;
+    box-sizing: content-box;
+    cursor: pointer;
+
+    margin: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.form-button:hover {
+    background-color: darkgrey;
+}

src/extensions/minecraft/index.html

@@ -1,14 +1,19 @@
 {% extends "extension.html" %}
 
+{% block head %}
+    <link href="/minecraft/index.css" rel="stylesheet">
+{% endblock %}
+
 {% block body %}
+
 <form action="/minecraft/change" method="post" enctype="application/x-www-form-urlencoded">
     <table>
         <tr>
             <td><label for="username">Minecraft Username:</label></td>
             <td><input type="text" name="minecraft_name" id="minecraft_name" maxlength="32" value="{{minecraft_username}}"></td>
+            <td><input type="submit" value="Change" name="change" class="form-button"></td>
         </tr>
     </table>
-    <input type="submit" value="Change" name="change">
     <span id="error" style="color: red;">{{auth_err}}</span>
 </form>
 

src/extensions/minecraft/index.ts

@@ -65,6 +65,9 @@ export default class extends ExtensionBase {
 
                 return this.return(ctx, undefined, location='/minecraft')
             }
+            default: {
+                return this.return_file(ctx, location)
+            }
         }
     }
 

src/extensions/minecraft/static/index.css

@@ -0,0 +1,42 @@
+form{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 5%;
+}
+
+td{
+    padding: 5px;
+}
+
+.form-button,
+.form-button:visited {
+    all: unset;
+    background-color: rgb(221, 221, 221);
+    padding: 5px 10px;
+    border-radius: var(--margin-small);
+    display: inline-block;
+    width: fit-content;
+    height: 16px;
+    font-size: 15px;
+    box-shadow: 0 0 2px black;
+    text-decoration: none;
+    color: black;
+    margin-left: 2px;
+    box-sizing: content-box;
+    cursor: pointer;
+}
+
+.form-button:hover {
+    background-color: darkgrey;
+}
+
+form input {
+    background-color: silver;
+    border-radius: 5px;
+    border: solid 2px darkgrey;
+    outline: none;
+}
+form input:focus {
+    background-color: rgb(221, 221, 221);
+}

src/templates/layout.html

@@ -9,6 +9,8 @@
 
         <title>Keuknet</title>
         <link type="text/css" rel="stylesheet" href="/index.css">
+        {% block head %}
+        {% endblock %}
     </head>
 
     <body>