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

@@ -58,10 +58,10 @@ header nav a {
 }
 
 .no-select {
-  -webkit-user-select: none;  
-  -moz-user-select: none;     
-  -ms-user-select: none;      
-  user-select: none;          
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 header nav a:hover {
@@ -111,19 +111,22 @@ a {
   height: 200px;
   background: #1a1a1a;
 }
+
 .container {
   flex: 1;
   padding: 10px;
+
   ul {
     list-style: none;
     margin: 0;
     padding: 0;
   }
+
   a {
-        font-size: 20px;
-        color: #f05a28;
-      }
- 
+    font-size: 20px;
+    color: #f05a28;
+  }
+
 }
 
 .chat-messages::-webkit-scrollbar {
@@ -161,34 +164,38 @@ a {
   color: #f05a28;
   margin-bottom: 3px;
 }
+
 * {
-word-break: break-word;
+  word-break: break-word;
   overflow-wrap: break-word;
-    hyphens: auto;
+  hyphens: auto;
 }
+
 .highlight pre {
-    white-space: pre-wrap;
-    word-break: break-word;
-    overflow-wrap: break-word;
-    hyphens: auto;
-  }
+  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 {
-    max-width: 100%;
+  max-width: 100%;
 }
 
 .message-content {
 
-    img, video, iframe, div {
-        max-width: 100%; 
-    }
+  img, video, iframe, div {
+    max-width: 90%;
+    border-radius: 20px;
+  }
 }
 
 .chat-messages .message .message-content .time, .threads .thread .message-content .time {
@@ -254,11 +261,11 @@ input[type="text"], .chat-input textarea {
 }
 
 .message.switch-user {
-  .text img,iframe, video {
+  .text img, iframe, video {
     max-width: 90%;
     border-radius: 20px;
   }
-  
+
   .avatar {
     user-select: none;
     opacity: 1;
@@ -269,15 +276,15 @@ input[type="text"], .chat-input textarea {
   }
 }
 
-.message:has(+ .message.switch-user), .message:last-child{ 
-    .time {
-  display: block;
-}
+.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 = `
@@ -75,16 +75,28 @@ class GenericField extends HTMLElement {
       }
 
       input {
-          width: 90%;
-          padding: 10px;
-          margin: 10px 0;
-          border: 1px solid #333;
-          border-radius: 5px;
-          background-color: #1a1a1a;
-          color: #e6e6e6;
-          font-size: 1em;
+        width: 90%;
+        padding: 10px;
+        margin: 10px 0;
+        border: 1px solid #333;
+        border-radius: 5px;
+        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 {
           width: 50%;
           padding: 10px;
@@ -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

@@ -1,26 +1,36 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>{% block title %}{% endblock %}</title>
-  <script src="/app.js"></script>
-  <script src="/message-list.js"></script>
-  <style>{{ highlight_styles }}</style>
-  <link rel="stylesheet" href="/style.css">
-   <script src="/fancy-button.js"></script>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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>
+    <link rel="stylesheet" href="/style.css">
+    <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>
-        {% block header %}
-        {% endblock %}
+<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 main %}
-  <fancy-button url="/back" text="Back" size="auto"></fancy-button>
-   <generic-form class="center" url="/login.json"></generic-form>
-
+{% 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>
-  
-  <generic-form class="center" url="/register.json"></generic-form>
+    <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 %}