render_form should accept layout template as a parameter (#305)

* Add support to use template for render_form. Add password strength progress bar to input field password * Fixed css * CSS prettier * style fix * password field style fix * remove console log * Fix the template check * Change to layout_template * fix min-height of modal in desktop * Change variable name to template
hasgeek · Jun 30, 2020 · da25171 · da25171
1 parent ee13f9e
commit da25171
Show file tree

Hide file tree

Showing 6 changed files with 160 additions and 47 deletions.
diff --git a/baseframe/forms/auto.py b/baseframe/forms/auto.py
@@ -47,6 +47,7 @@ def render_form(
     action=None,
     autosave=False,
     draft_revision=None,
+    template='',
 ):
     multipart = False
     ref_id = 'form-' + (formid or buid())
@@ -56,7 +57,8 @@ def render_form(
         if isinstance(field.widget, wtforms.widgets.FileInput):
             multipart = True
     if not with_chrome:
-        template = THEME_FILES[current_app.config['theme']]['ajaxform.html.jinja2']
+        if not template:
+            template = THEME_FILES[current_app.config['theme']]['ajaxform.html.jinja2']
         return render_template(
             template,
             form=form,
@@ -73,9 +75,9 @@ def render_form(
             autosave=autosave,
             draft_revision=draft_revision,
         )
-    if request_is_xhr() and ajax:
+    if not template and request_is_xhr() and ajax:
         template = THEME_FILES[current_app.config['theme']]['ajaxform.html.jinja2']
-    else:
+    elif not template:
         template = THEME_FILES[current_app.config['theme']]['autoform.html.jinja2']
     return make_response(
         render_template(

diff --git a/baseframe/static/css/mui.css b/baseframe/static/css/mui.css
@@ -4165,6 +4165,57 @@ li p + ol {
   display: inline-block;
 }
 
+.mui-textfield--password .password-toggle {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+}
+.mui-textfield--password .progress {
+  height: 4px;
+  margin: 8px 0 32px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  box-shadow: 0 1px 3px rgba(158, 158, 158, 0.12),
+    0 1px 2px rgba(158, 158, 158, 0.24);
+  position: relative;
+  display: none;
+}
+.mui-textfield--password .progress .progress__bar {
+  float: left;
+  width: 0;
+  height: 100%;
+  font-size: 12px;
+  line-height: 20px;
+  color: #fff;
+  text-align: center;
+  background-color: #428bca;
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  -webkit-transition: width 0.6s ease;
+  -o-transition: width 0.6s ease;
+  transition: width 0.6s ease;
+}
+.mui-textfield--password .progress .progress__txt {
+  position: absolute;
+  top: 4px;
+  left: 0;
+  color: #c04b61;
+}
+.mui-textfield--password .progress .progress__bar--danger {
+  background-color: #c04b61;
+}
+.mui-textfield--password .progress .progress__bar--warning {
+  background-color: #f0a40c;
+}
+.mui-textfield--password .progress .progress__bar--warning .progress__txt {
+  color: #f0a40c;
+}
+.mui-textfield--password .progress .progress__bar--success {
+  background-color: #53b783;
+}
+.mui-textfield--password .progress .progress__bar--success .progress__txt {
+  color: #53b783;
+}
+
 .chip {
   padding: 0 5px 5px;
   border: 0;
@@ -4415,7 +4466,7 @@ li p + ol {
     max-width: 500px;
     width: 90%;
     padding: 24px;
-    height: auto;
+    min-height: auto;
     border-radius: 8px;
   }
 }

diff --git a/baseframe/static/sass/baseframe-material/_form.scss b/baseframe/static/sass/baseframe-material/_form.scss
@@ -141,3 +141,57 @@
 .listwidget ol label {
   display: inline-block;
 }
+
+.mui-textfield--password {
+  .password-toggle {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+  }
+  .progress {
+    height: 4px;
+    margin: $mui-grid-padding/2 0 $mui-grid-padding * 2;
+    background-color: #f5f5f5;
+    border-radius: 4px;
+    box-shadow: 0 1px 3px rgba(mui-color('grey'), 0.12),
+      0 1px 2px rgba(mui-color('grey'), 0.24);
+    position: relative;
+    display: none;
+
+    .progress__bar {
+      float: left;
+      width: 0;
+      height: 100%;
+      font-size: 12px;
+      line-height: 20px;
+      color: #fff;
+      text-align: center;
+      background-color: #428bca;
+      box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+      -webkit-transition: width 0.6s ease;
+      -o-transition: width 0.6s ease;
+      transition: width 0.6s ease;
+    }
+    .progress__txt {
+      position: absolute;
+      top: 4px;
+      left: 0;
+      color: $mui-danger-color;
+    }
+    .progress__bar--danger {
+      background-color: $mui-danger-color;
+    }
+    .progress__bar--warning {
+      background-color: $mui-warning-color;
+      .progress__txt {
+        color: $mui-warning-color;
+      }
+    }
+    .progress__bar--success {
+      background-color: $mui-success-color;
+      .progress__txt {
+        color: $mui-success-color;
+      }
+    }
+  }
+}
diff --git a/baseframe/static/sass/baseframe-material/_modal.scss b/baseframe/static/sass/baseframe-material/_modal.scss
@@ -46,7 +46,7 @@
       max-width: 500px;
       width: 90%;
       padding: $mui-grid-padding + $mui-grid-padding/2;
-      height: auto;
+      min-height: auto;
       border-radius: 8px;
     }
   }

diff --git a/baseframe/static/sass/mui.scss b/baseframe/static/sass/mui.scss
@@ -1,53 +1,36 @@
-@import "compass";
+@import 'compass';
 
 //For flex grid
-@import "reflex/variables";
-@import "reflex/mixins";
-@import "reflex/grid";
-@import "reflex/helpers";
+@import 'reflex/variables';
+@import 'reflex/mixins';
+@import 'reflex/grid';
+@import 'reflex/helpers';
 
-@import "mui/custom";
+@import 'mui/custom';
 
 // Core variables and mixins
-@import
-"mui/colors",
-"mui/variables",
-"mui/mixins";
+@import 'mui/colors', 'mui/variables', 'mui/mixins';
 
 // Globals
-@import
-"mui/globals";
+@import 'mui/globals';
 
 // Components
-@import
-"mui/appbar",
-"mui/buttons",
-"mui/checkbox-and-radio",
-"mui/containers",
-"mui/divider",
-"mui/dropdown",
-"mui/form",
-"mui/panel",
-"mui/select",
-"mui/table",
-"mui/tabs",
-"mui/textfield";
+@import 'mui/appbar', 'mui/buttons', 'mui/checkbox-and-radio', 'mui/containers',
+  'mui/divider', 'mui/dropdown', 'mui/form', 'mui/panel', 'mui/select',
+  'mui/table', 'mui/tabs', 'mui/textfield';
 
 // Miscellaneous
-@import
-"mui/helpers",
-"mui/overlay",
-"mui/ripple";
+@import 'mui/helpers', 'mui/overlay', 'mui/ripple';
 
-@import "baseframe-material/helper";
-@import "baseframe-material/menu";
-@import "baseframe-material/layout";
-@import "baseframe-material/footer";
-@import "baseframe-material/form";
-@import "baseframe-material/chip";
-@import "baseframe-material/card";
-@import "baseframe-material/alert";
-@import "baseframe-material/thumbnail";
-@import "baseframe-material/modal";
-@import "baseframe-material/tabs";
-@import "baseframe-material/responsive-table";
+@import 'baseframe-material/helper';
+@import 'baseframe-material/menu';
+@import 'baseframe-material/layout';
+@import 'baseframe-material/footer';
+@import 'baseframe-material/form';
+@import 'baseframe-material/chip';
+@import 'baseframe-material/card';
+@import 'baseframe-material/alert';
+@import 'baseframe-material/thumbnail';
+@import 'baseframe-material/modal';
+@import 'baseframe-material/tabs';
+@import 'baseframe-material/responsive-table';
diff --git a/baseframe/templates/baseframe/mui/forms.html.jinja2 b/baseframe/templates/baseframe/mui/forms.html.jinja2
@@ -72,13 +72,27 @@
               <div id="{{ field.id }}_map" class="no-jshidden map__marker"></div>
               <div class="jshidden">{{ field(class="field-" + field.id + " form-control") }}</div>
             </div>
-          {%- elif field.widget.input_type in ['text', 'email', 'search', 'url', 'number', 'tel', 'password'] and field.widget.html_tag not in ['ul', 'ol'] %}
+          {%- elif field.widget.input_type in ['text', 'email', 'search', 'url', 'number', 'tel'] and field.widget.html_tag not in ['ul', 'ol'] %}
             <div class="mui-textfield mui-textfield--float-label">
               {{ field | render_field_options(class="field-" + field.id + " " + widget_css_class, tabindex=tabindex, autofocus=autofocus, rows=rows)}}
               {%- if not nolabel %}
                 <label>{{ field.label.text }}</label>
               {%- endif %}
             </div>
+          {%- elif field.widget.input_type == 'password' and field.widget.html_tag not in ['ul', 'ol'] %}
+            <div class="mui-textfield mui-textfield--password mui-textfield--float-label">
+              {{ field | render_field_options(class="field-" + field.id + " " + widget_css_class, tabindex=tabindex, autofocus=autofocus, rows=rows)}}
+              <a href="javascript:void(0)" class="js-show-password password-toggle" aria-label="show password">{{ faicon(icon='eye', icon_size='title', css_class='mui--text-light') }}</a>
+              <a href="javascript:void(0)" class="js-hide-password password-toggle mui--hide" aria-label="hide password">{{ faicon(icon='eye-slash', icon_size='title', css_class='mui--text-light') }}</a>
+              {%- if not nolabel %}
+                <label>{{ field.label.text }}</label>
+              {%- endif %}
+              <div class="progress">
+                <div class="progress__bar">
+                  <span class="progress__txt mui--text-body2"></span>
+                </div>
+              </div>
+            </div>
           {%- elif field.widget.input_type in ['color', 'date', 'datetime', 'datetime-local', 'month', 'time', 'week'] and field.widget.html_tag not in ['ul', 'ol'] %}
             <div class="mui-textfield">
               {{ field | render_field_options(class="field-" + field.id + " " + widget_css_class, tabindex=tabindex, autofocus=autofocus, rows=rows)}}
@@ -301,6 +315,15 @@
   <script type="text/javascript">
     $(function() {
   {%- endif %}
+    $('.js-show-password').click(function (argument) {
+      $(this).parent().find('.password-toggle').toggleClass('mui--hide');
+      $(this).parent().find('input').attr('type', 'text');
+    });
+
+    $('.js-hide-password').click(function (argument) {
+      $(this).parent().find('.password-toggle').toggleClass('mui--hide');
+      $(this).parent().find('input').attr('type', 'password');
+    });
   {%- for field in form -%}
     {%- if field.type == 'FormField' %}
       {{ widgetscripts(field.form, script=false) }}