From 7e0e881017c104f4a9a105ff64660bd544a3604a Mon Sep 17 00:00:00 2001
From: Lance Edgar <lance@edbob.org>
Date: Fri, 1 Jul 2022 12:00:06 -0500
Subject: [PATCH] Fix form validation for app settings page w/ buefy theme

---
 tailbone/templates/appsettings.mako | 33 ++++++++++++-----------------
 tailbone/views/settings.py          | 28 ++++++++++++++++++------
 2 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/tailbone/templates/appsettings.mako b/tailbone/templates/appsettings.mako
index e3fa2ccf..a80dafc2 100644
--- a/tailbone/templates/appsettings.mako
+++ b/tailbone/templates/appsettings.mako
@@ -52,16 +52,12 @@
       ${h.csrf_token(request)}
 
       % if dform.error:
-          <div class="error-messages">
-            <div class="ui-state-error ui-corner-all">
-              <span style="float: left; margin-right: .3em;" class="ui-icon ui-icon-alert"></span>
-              Please see errors below.
-            </div>
-            <div class="ui-state-error ui-corner-all">
-              <span style="float: left; margin-right: .3em;" class="ui-icon ui-icon-alert"></span>
-              ${dform.error}
-            </div>
-          </div>
+          <b-notification type="is-warning">
+            Please see errors below.
+          </b-notification>
+          <b-notification type="is-warning">
+            ${dform.error}
+          </b-notification>
       % endif
 
       <div class="app-wrapper">
@@ -115,17 +111,13 @@
                  ## :class="'field-wrapper' + (setting.error ? ' with-error' : '')"
                  >
 
-              <div v-if="setting.error" class="field-error">
-                <span v-for="msg in setting.error_messages"
-                      class="error-msg">
-                  {{ msg }}
-                </span>
-              </div>
-
               <div style="margin-bottom: 2rem;">
 
                 <b-field horizontal
-                         :label="setting.label">
+                         :label="setting.label"
+                         :type="setting.error ? 'is-danger' : null"
+                         ## TODO: what if there are multiple error messages?
+                         :message="setting.error ? setting.error_messages[0] : null">
 
                   <b-checkbox v-if="setting.data_type == 'bool'"
                               :name="setting.field_name"
@@ -158,8 +150,9 @@
 
                 </b-field>
 
-                <span v-if="setting.helptext" class="instructions">
-                  {{ setting.helptext }}
+                <span v-if="setting.helptext"
+                      v-html="setting.helptext"
+                      class="instructions">
                 </span>
               </div>
 
diff --git a/tailbone/views/settings.py b/tailbone/views/settings.py
index acb74f7b..7b10f1d0 100644
--- a/tailbone/views/settings.py
+++ b/tailbone/views/settings.py
@@ -2,7 +2,7 @@
 ################################################################################
 #
 #  Rattail -- Retail Software Framework
-#  Copyright © 2010-2021 Lance Edgar
+#  Copyright © 2010-2022 Lance Edgar
 #
 #  This file is part of Rattail.
 #
@@ -28,12 +28,12 @@ from __future__ import unicode_literals, absolute_import
 
 import re
 
+import json
 import six
 
 from rattail.db import model, api
 from rattail.settings import Setting
 from rattail.util import import_module_path
-from rattail.config import parse_bool
 
 import colander
 from webhelpers2.html import tags
@@ -171,14 +171,28 @@ class AppSettingsView(View):
                 'data_type': setting.data_type.__name__,
                 'choices': setting.choices,
                 'helptext': form.render_helptext(field.name) if form.has_helptext(field.name) else None,
-                'error': field.error,
+                'error': False, # nb. may set to True below
             }
-            value = self.get_setting_value(setting)
-            if setting.data_type is bool:
-                value = parse_bool(value)
+
+            # we want the value from the form, i.e. in case of a POST
+            # request with validation errors.  we also want to make
+            # sure value is JSON-compatible, but we must represent it
+            # as Python value here, and it will be JSON-encoded later.
+            value = form.get_vuejs_model_value(field)
+            value = json.loads(value)
             s['value'] = value
+
+            # specify error / message if applicable
+            # TODO: not entirely clear to me why some field errors are
+            # represented differently?  presumably it depends on
+            # whether Buefy is used by the theme.
             if field.error:
-                s['error_messages'] = field.error_messages()
+                s['error'] = True
+                if isinstance(field.error, colander.Invalid):
+                    s['error_messages'] = [field.errormsg]
+                else:
+                    s['error_messages'] = field.error_messages()
+
             grouped[setting.group].append(s)
 
         data = []