From c1c37aad85ad0c16221e60e507e43a2bc6619f0a Mon Sep 17 00:00:00 2001
From: Lance Edgar <ledgar@techsupport.coop>
Date: Fri, 30 Aug 2019 13:56:06 -0500
Subject: [PATCH] Cleanup styles for login form

---
 tailbone/templates/deform/password.pt | 27 +++++++++++++++++++++++++++
 tailbone/templates/login.mako         | 16 +++++++++++-----
 2 files changed, 38 insertions(+), 5 deletions(-)
 create mode 100644 tailbone/templates/deform/password.pt

diff --git a/tailbone/templates/deform/password.pt b/tailbone/templates/deform/password.pt
new file mode 100644
index 00000000..9ad77d1b
--- /dev/null
+++ b/tailbone/templates/deform/password.pt
@@ -0,0 +1,27 @@
+<span tal:define="name name|field.name;
+                  css_class css_class|field.widget.css_class;
+                  oid oid|field.oid;
+                  mask mask|field.widget.mask;
+                  mask_placeholder mask_placeholder|field.widget.mask_placeholder;
+                  style style|field.widget.style;
+                  use_buefy use_buefy|0;"
+      tal:omit-tag="">
+
+  <input tal:condition="not use_buefy"
+         type="password" 
+         name="${name}" 
+         value="${field.widget.redisplay and cstruct or ''}"
+         tal:attributes="style style;
+                         class string: form-control ${css_class or ''};
+                         attributes|field.widget.attributes|{};"
+         id="${oid}" />
+
+  <div tal:condition="use_buefy"
+       tal:define="vmodel vmodel|'field_model_' + name;"
+       tal:omit-tag="">
+    <b-input name="${name}"
+             v-model="${vmodel}"
+             type="password">
+    </b-input>
+  </div>
+</span>
diff --git a/tailbone/templates/login.mako b/tailbone/templates/login.mako
index e49c4558..3949a3c5 100644
--- a/tailbone/templates/login.mako
+++ b/tailbone/templates/login.mako
@@ -19,6 +19,15 @@
             max-height: 350px;
             max-width: 800px;
         }
+
+        /* this "undoes" global styles for field labels */
+        .field.is-horizontal .field-label .label {
+            width: auto;
+        }
+
+        .buttons {
+            justify-content: right;
+        }
       </style>
   % else:
       ${h.stylesheet_link(request.static_url('tailbone:static/css/login.css'))}
@@ -46,17 +55,14 @@
 
   % if use_buefy:
 
-      ## note, we make 3 columns just to get 1 in the center
-      <div class="columns">
-        <div class="column"></div>
-        <div class="column">
+      <div class="columns is-centered">
+        <div class="column is-narrow">
           <div class="card">
             <div class="card-content">
               <tailbone-form></tailbone-form>
             </div>
           </div>
         </div>
-        <div class="column"></div>
       </div>
 
   % else: