Move to message2user for createUser functionality

We should style the span arround message2user so it's a bit clearer, but this would at least re-use stuff
berthubert · Dec 18, 2023 · 48e0ada · 48e0ada
1 parent 89828f9
commit 48e0ada
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 15 deletions.
diff --git a/html/admin.html b/html/admin.html
@@ -13,9 +13,9 @@
   <div x-data="{ login: '', 
                  user: '', 
                  users: [],
+                 message2user: '',
                  sessions: [],
-                 loggedon: false, 
-                 create_feedback: '',
+                 loggedon: false,
                  images: []
 }" x-init="getLoginStatus($data);getUserList($data);getImageList($data); getSessionList($data);"
     @paste.window="getImage($data, $event)">
@@ -45,6 +45,11 @@ <h1><a href="./">Trifecta</a> - admin</h1>
     </header>
 
     <div id="content">
+      <div id="userfeedback">
+        <span x-text="message2user"></span>
+      </div>
+
+
       <h2>Create new user</h2>
       <template x-if="loggedon">
         <form @submit.prevent="doCreateUser($el, $data)">
@@ -72,12 +77,13 @@ <h2>Create new user</h2>
               <td><input type="password" id="password2" name="password2" required></td>
             </tr>
             <tr>
-              <td> <button type="submit">Create</button></td>
-              <td x-html="create_feedback"></td>
+              <td colspan="2"><button type="submit">Create</button></td>
             </tr>
           </table>
         </form>
       </template>
+
+
       <div id="userlist">
         <h2>All users</h2>
         <table>

diff --git a/html/logic.js b/html/logic.js
@@ -233,9 +233,9 @@ function doCreateUser(el, f)
     let user =el[0].value;
     let pass1 = el[1].value;
     let pass2 = el[2].value;
-    f.create_feedback ="";
+    f.message2user = "";
     if(pass1 != pass2) {
-        f.create_feedback="<font color='#ff0000'>Passwords do not match</font>";
+        f.message2user="<span class='error'>Passwords do not match</span>";
         return;
     }
 
@@ -244,14 +244,14 @@ function doCreateUser(el, f)
             if(response.ok) {
                 response.json().then(data => {
                     if(data.ok) {
-                        f.create_feedback="User created";
+                        f.message2user="User created";
                         getUserList(f);
                     }
                     else
-                        f.create_feedback=data.message;
+                        f.message2user=data.message;
                 });
             }
             else
-                f.create_feedback="Error sending creation request";
+                f.message2user="Error sending creation request";
         });
 }
diff --git a/html/style.css b/html/style.css
@@ -1,11 +1,6 @@
 :root {
-    /* Palette URL: http://paletton.com/#uid=5420K0kllllk3PDkFuDm0c2mC3O */
-    --color-primary-0: #363377;
     --color-primary-1: #9FEFB0;
-    --color-primary-2: #514CAA;
-    --color-primary-3: #1E1B43;
-    --color-primary-4: #090815;
-
+
 
     --color-gray-50: #FAFAFA;
     --color-gray-100: #F5F5F5;
@@ -30,6 +25,8 @@
     --clr-btn-surface-hover: var(--color-gray-500);
     --clr-btn-surface-text: var(--color-primary-4);
 
+    --clr-txt-error: #F00;
+
     --size-xxs: 0.2em;
     --size-xs: 0.5em;
     --size-s: 0.8em;
@@ -169,4 +166,8 @@ button:hover {
 }
 .deleteicon:hover {
     cursor: pointer;
+}
+
+.error {
+    color: var(--clr-txt-error);
 }