Merge pull request 'Tweaks for login/registration and base + image roundness' (#25) from BordedDev/snek:main into main

Reviewed-on: https://molodetz.nl/retoor/snek/pulls/25
Reviewed-by: retoor <retoor@noreply@molodetz.nl>

src/snek/static/back-form.css

@@ -0,0 +1,18 @@
+.back-form {
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-template-rows: auto auto;
+
+  fancy-button {
+    grid-column: 1 / 1;
+    grid-row: 1 / 1;
+    z-index: 1;
+    margin-left: 30px;
+    margin-top: 30px;
+  }
+
+  generic-form {
+    grid-column: 1 / 3;
+    grid-row: 1 / 3;
+  }
+}

src/snek/static/base.css

@@ -111,14 +111,17 @@ a {
   height: 200px;
   background: #1a1a1a;
 }
+
 .container {
   flex: 1;
   padding: 10px;
+
   ul {
     list-style: none;
     margin: 0;
     padding: 0;
   }
+
   a {
     font-size: 20px;
     color: #f05a28;
@@ -161,23 +164,26 @@ a {
   color: #f05a28;
   margin-bottom: 3px;
 }
+
 * {
-word-break: break-word;
+  word-break: break-word;
   overflow-wrap: break-word;
   hyphens: auto;
 }
+
 .highlight pre {
   white-space: pre-wrap;
   word-break: break-word;
   overflow-wrap: break-word;
   hyphens: auto;
-  }
+}
+
 .chat-messages .message .message-content .text, .threads .thread .message-content .text {
   margin-bottom: 5px;
   color: #e6e6e6;
   word-break: break-word;
   overflow-wrap: break-word;
-hyphens: auto; 
+  hyphens: auto;
 }
 
 .message-content {
@@ -187,7 +193,8 @@ hyphens: auto;
 .message-content {
 
   img, video, iframe, div {
-        max-width: 100%; 
+    max-width: 90%;
+    border-radius: 20px;
   }
 }
 
@@ -254,7 +261,7 @@ input[type="text"], .chat-input textarea {
 }
 
 .message.switch-user {
-  .text img,iframe, video {
+  .text img, iframe, video {
     max-width: 90%;
     border-radius: 20px;
   }
@@ -269,15 +276,15 @@ input[type="text"], .chat-input textarea {
   }
 }
 
-.message:has(+ .message.switch-user), .message:last-child{ 
+.message:has(+ .message.switch-user), .message:last-child {
   .time {
     display: block;
-}
+  }
 }
 
 /* The entire scrollbar */
 ::-webkit-scrollbar {
-    display:none;
+  display: none;
 }
 
 ::-webkit-scrollbar-track {
@@ -300,8 +307,9 @@ input[type="text"], .chat-input textarea {
 }
 
 a {
-    text-decoration:none
+  text-decoration: none
 }
+
 .sidebar {
   width: 250px;
   background-color: #121212;

src/snek/static/generic-form.js

@@ -62,7 +62,7 @@ class GenericField extends HTMLElement {
 
   constructor() {
     super();
-    this.attachShadow({ mode: 'open' });
+    this.attachShadow({mode: 'open'});
     this.container = document.createElement('div');
     this.styleElement = document.createElement('style');
     this.styleElement.innerHTML = `
@@ -83,6 +83,18 @@ class GenericField extends HTMLElement {
         background-color: #1a1a1a;
         color: #e6e6e6;
         font-size: 1em;
+        
+        &:focus {
+          outline: 2px solid #f05a28 !important;
+        }
+        
+        &::placeholder {
+          transition: opacity 0.3s;
+        }
+        
+        &:focus::placeholder {
+          opacity: 0.4;
+        }
       }
       
       button {
@@ -165,18 +177,26 @@ class GenericField extends HTMLElement {
       const me = this;
       this.inputElement.addEventListener("keyup", (e) => {
         if (e.key === 'Enter') {
+          const event = new CustomEvent("change", {detail: me, bubbles: true});
+          me.dispatchEvent(event);
+
           me.dispatchEvent(new Event("submit"));
         } else if (me.field.value !== e.target.value) {
-          const event = new CustomEvent("change", { detail: me, bubbles: true });
+          const event = new CustomEvent("change", {detail: me, bubbles: true});
           me.dispatchEvent(event);
         }
       });
 
       this.inputElement.addEventListener("click", (e) => {
-        const event = new CustomEvent("click", { detail: me, bubbles: true });
+        const event = new CustomEvent("click", {detail: me, bubbles: true});
         me.dispatchEvent(event);
       });
 
+      this.inputElement.addEventListener("blur", (e) => {
+        const event = new CustomEvent("change", {detail: me, bubbles: true});
+        me.dispatchEvent(event);
+      }, true);
+
       this.container.appendChild(this.inputElement);
     }
 
@@ -226,7 +246,7 @@ class GenericForm extends HTMLElement {
 
   constructor() {
     super();
-    this.attachShadow({ mode: 'open' });
+    this.attachShadow({mode: 'open'});
     this.styleElement = document.createElement("style");
     this.styleElement.innerHTML = `
 
@@ -307,6 +327,16 @@ class GenericForm extends HTMLElement {
             }
           }
         });
+
+        fieldElement.addEventListener("submit", async (e) => {
+          const isValid = await this.validate();
+          if (isValid) {
+            const saveResult = await this.submit();
+            if (saveResult.redirect_url) {
+              window.location.pathname = saveResult.redirect_url;
+            }
+          }
+        })
       });
 
     } catch (error) {
@@ -322,7 +352,7 @@ class GenericForm extends HTMLElement {
       headers: {
         'Content-Type': 'application/json'
       },
-      body: JSON.stringify({ "action": "validate", "form": this.form })
+      body: JSON.stringify({"action": "validate", "form": this.form})
     });
 
     const form = await response.json();
@@ -353,7 +383,7 @@ class GenericForm extends HTMLElement {
       headers: {
         'Content-Type': 'application/json'
       },
-      body: JSON.stringify({ "action": "submit", "form": this.form })
+      body: JSON.stringify({"action": "submit", "form": this.form})
     });
     return await response.json();
   }

src/snek/templates/base.html

@@ -3,7 +3,15 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>{% block title %}{% endblock %}</title>
+    <meta name="theme-color" content="#000000">
+    <meta name="application-name" content="Snek chat by Molodetz">
+    <meta name="description" content="Snek chat by Molodetz">
+    <meta name="author" content="Molodetz">
+    <meta name="keywords" content="snek, chat, molodetz">
+    <meta name="color-scheme" content="dark">
+
+    <title>{% block title %}Snek chat by Molodetz{% endblock %}</title>
+
     <script src="/app.js"></script>
     <script src="/message-list.js"></script>
     <style>{{ highlight_styles }}</style>
@@ -11,16 +19,18 @@
     <script src="/fancy-button.js"></script>
     <script src="/html-frame.js"></script>
     <script src="/generic-form.js"></script>
-    <link rel="stylesheet" href="/html-frame.css"></script>
+    <link rel="stylesheet" href="/html-frame.css">
 
+    {% block head %}
+    {% endblock %}
 </head>
 <body>
-    <header>
+<header>
     {% block header %}
     {% endblock %}
 
-    </header>
-    <main>
+</header>
+<main>
     {% block main %}
     {% endblock %}
 </main>

src/snek/templates/login.html

@@ -1,7 +1,16 @@
 {% extends "base.html" %}
 
+{% block title %}
+    Login - Snek chat by Molodetz
+{% endblock %}
+
+{% block head %}
+    <link rel="stylesheet" href="/back-form.css">
+{% endblock %}
+
 {% block main %}
+    <div class="back-form">
         <fancy-button url="/back" text="Back" size="auto"></fancy-button>
         <generic-form class="center" url="/login.json"></generic-form>
-
+    </div>
 {% endblock %}

src/snek/templates/register.html

@@ -1,7 +1,17 @@
 {% extends "base.html" %}
 
+{% block title %}
+    Register - Snek chat by Molodetz
+{% endblock %}
+
+{% block head %}
+    <link rel="stylesheet" href="/back-form.css">
+{% endblock %}
+
 {% block main %}
-<fancy-button url="/back" text="Back" size="auto"></fancy-button>
+    <div class="back-form">
+        <fancy-button url="/back" text="Back" size="auto"></fancy-button>
 
         <generic-form class="center" url="/register.json"></generic-form>
+    </div>
 {% endblock %}