login and register logic

public/index.css

@@ -28,10 +28,22 @@ body {
     border-radius: 20px;
 }
 
-.header {
+.header,
+.header-big {
     color: var(--main-4);
 }
 
+.header-big {
+    width: 800px;
+    margin: -10px;
+    padding: 10px;
+    background: var(--main-5);
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    max-width: calc(100vw - 40px);
+    margin-bottom: 10px;
+}
+
 .scroller {
     display: flex;
     justify-content: start;
@@ -137,7 +149,7 @@ body {
     display: grid;
 }
 
-.form-heading,
+form .header-big,
 .form-message,
 .form-button {
     grid-column: span 2;

public/index.js

@@ -0,0 +1,30 @@
+async function formClick(ev) {
+    ev.preventDefault();
+
+    let { target } = ev;
+
+    let fData = new FormData(target);
+
+    let file = target.querySelector('input[type=file]');
+    if (file)
+        file.value = null;
+
+    let fetched = await fetch(target.action, {
+        'method': 'POST',
+        'body': fData
+    });
+
+    let json = await fetched.json();
+
+    target.querySelector('.form-message').textContent = json.message;
+
+    if (json.redirect && json.success) {
+        setTimeout(function () {
+            window.location.href = json.redirect;
+        }, 2000);
+    }
+}
+
+window.onload = function () {
+    document.addEventListener('submit', formClick);
+}