allura-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From brond...@apache.org
Subject [14/50] [abbrv] allura git commit: [#7919] Add frontend validation to the add-tool form
Date Fri, 08 Jan 2016 19:30:19 GMT
[#7919] Add frontend validation to the add-tool form


Project: http://git-wip-us.apache.org/repos/asf/allura/repo
Commit: http://git-wip-us.apache.org/repos/asf/allura/commit/9b28d94c
Tree: http://git-wip-us.apache.org/repos/asf/allura/tree/9b28d94c
Diff: http://git-wip-us.apache.org/repos/asf/allura/diff/9b28d94c

Branch: refs/heads/master
Commit: 9b28d94cb1c443869bc9eb0ce9d95895efdb5586
Parents: ab5932b
Author: Heith Seewald <heiths@gmail.com>
Authored: Tue Dec 8 15:36:23 2015 -0500
Committer: Dave Brondsema <dave@brondsema.net>
Committed: Fri Jan 8 14:06:15 2016 -0500

----------------------------------------------------------------------
 .../admin/templates/project_install_tool.html   | 110 +++++++++++++------
 Allura/allura/public/nf/css/navbar.css          |  38 ++++++-
 .../allura/templates/jinja_master/top_nav.html  |   2 +-
 3 files changed, 110 insertions(+), 40 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/allura/blob/9b28d94c/Allura/allura/ext/admin/templates/project_install_tool.html
----------------------------------------------------------------------
diff --git a/Allura/allura/ext/admin/templates/project_install_tool.html b/Allura/allura/ext/admin/templates/project_install_tool.html
index 8d378d0..eb4ce21 100644
--- a/Allura/allura/ext/admin/templates/project_install_tool.html
+++ b/Allura/allura/ext/admin/templates/project_install_tool.html
@@ -1,9 +1,17 @@
 <!DOCTYPE html>
 {% import 'allura:templates/jinja_master/lib.html' as lib with context %}
-
+{#<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>#}
+{#<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>#}
 {% set full_url = h.absurl(c.project.url()) %}
 
 <h1> Installing {{ tool.tool_label }} </h1>
+{% if tool_name == 'subproject' %}
+    {% set mount_point_re = h.re_mount_points['re_project_name']|safe %}
+{% else %}
+    {% set mount_point_re = h.re_mount_points['re_relaxed_tool_mount_point']|safe
+    if g.entry_points['tool'][tool_name].relaxed_mount_points
+    else h.re_mount_points['re_tool_mount_point']|safe %}
+{% endif %}
 
 <form method="post" action="{{ full_url }}admin/update_mounts" id="install_form">
     <input type="hidden" name="new.ordinal" value="{{ total_mounts }}"/>
@@ -11,62 +19,94 @@
     <label class="grid-13" for="new.mount_label">Label</label>
     <div class="grid-13"><input type="text" name="new.mount_label" class="new_mount_label"
                                 title="This will be the name displayed in your project toolbar."
-                                value="{{ tool.default_mount_label }}">
+                                value="{{ tool.default_mount_label }}" maxlength="100">
     </div>
     <label class="grid-13" for="new.mount_point">Url Path</label>
     <div class="grid-13">
         <input id="id_url_input" type="text" name="new.mount_point"
-               title="The url for this tool relative to {{ full_url }} " class="new_mount_point"
-               value="{{ tool.default_mount_point }}">
-        <p><span id="full-url-preview" data-url="{{ full_url }}"></span></p>
+               title="The url for this tool relative to {{ full_url }} " class="new_mount_point
validate_input"
+               value="{{ tool.default_mount_point }}" data-regex="{{ mount_point_re }}"
+               maxlength="{% 14 if tool_name == 'subproject' else 62 %}">
+        <span id="url_error_message" class="modal-form-error"></span>
+        <p><span id="full-url-preview">
+            {{ full_url }} <strong style="color:orange">
+            <span id="input-safe-preview"></span> </strong>
+        </span></p>
     </div>
     <div id="install_options">
         {% for o in options %}
-          <label class="grid-13" for="{{o.name}}">{{o.label}}</label>
-          <div class="grid-13">
-            {% if o.ming_type.__name__ == 'bool' %}
-              <input {{o.render_attrs()}}id="{{o.name}}" name="{{o.name}}" type="checkbox"{{
' checked="checked"' if o.default}}>
-            {% else %}
-              <input {{o.render_attrs()}} id="{{o.name}}" name="{{o.name}}" value="{{o.default
or ''}}">
+            <label class="grid-13" for="{{ o.name }}">{{ o.label }}</label>
+            <div class="grid-13">
+                {% if o.ming_type.__name__ == 'bool' %}
+                    <input {{ o.render_attrs() }}id="{{ o.name }}" name="{{ o.name }}"
+                           type="checkbox"{{ ' checked="checked"' if o.default }}>
+                {% else %}
+                    <input {{ o.render_attrs() }} id="{{ o.name }}" name="{{ o.name }}"
value="{{ o.default or '' }}">
+                {% endif %}
+            </div>
+            {% if o.help_text %}
+                <div class="grid-13">
+                    <small>{{ o.help_text }}</small>
+                </div>
             {% endif %}
-          </div>
-          {% if o.help_text %}
-            <div class="grid-13"><small>{{o.help_text}}</small></div>
-          {% endif %}
         {% endfor %}
     </div>
     <div class="grid-13">&nbsp;</div>
     <hr>
     <div class="grid-13">&nbsp;</div>
     <div class="grid-13">
-        <input type="submit" value="Save" name="new.install"> <a href="#" class="close
btn link">Cancel</a>
+        <input type="submit" id="id-submit-install" value="Save" name="new.install">
+        <a href="#" class="close btn link">Cancel</a>
     </div>
-    {{lib.csrf_token()}}
+    {{ lib.csrf_token() }}
 </form>
 
 
 <script>
     $('#admin_modal_title').hide();
-    var url_preview = $('#full-url-preview'); // "Preview Url Path" displayed on when creating
a new tool.
-
-    var full_url = $(url_preview).data().url; // Full url path of current project.
+    var mount_point = $('#id_url_input');
+    var _re = mount_point.data('regex');
+    var url_error = $("#url_error_message");
+    var submit_button = $("#id-submit-install");
+    var url_preview = $('#input-safe-preview');
 
     // Update the url path preview as they type.
-    $('#id_url_input').keyup(function(){
-        url_preview.html(full_url + '<strong style="color:orange">' + $(this).val()
+ "</strong>");
+    mount_point.keyup(function () {
+        url_preview.text($(this).val());
+        validateNewToolForm();
     }).keyup();
 
-    // Set url_preview to the Url Path Defaults when creating a new tool.
-    // Add the link tool's 'nice name'.
-{#    defaults['external link'] = defaults.link#}
-{#    var tool_name = $.trim($(this).text().toLowerCase());#}
-{##}
-{#    // If a tool has a default url path, use it for an initial preview.#}
-{#    if (defaults[tool_name]) {#}
-{#        url_preview.html(full_url + '<strong class="url-keyword">' + defaults[tool_name].default_mount
+ "</strong>");#}
-{#    }#}
-{#    else {#}
-{#        // No defaults for this tool, so we use the base url to ensure the url_preview
is reset.#}
-{#        url_preview.html(full_url);#}
-{#    }#}
+    function validateNewToolForm() {
+        var mp = document.getElementById('id_url_input');
+        var v = $(mp).val();
+        var mp_exists = _.contains(document._existingTools, $(mp).val());
+
+        if(v.length > 61){
+            submit_button.attr('disabled', true);
+            $(url_error).text("The path entered is too long");
+            mp.setCustomValidity("Must be less than 63 characters");
+        }
+        else if (!v.match(_re)) {
+            submit_button.attr('disabled', true);
+            $(url_error).text("You have entered an invalid character");
+            mp.setCustomValidity("Invalid character");
+        }
+        else if (v.length < 3) {
+            submit_button.attr('disabled', true);
+            $(url_error).text("Must be at least 3 characters");
+            mp.setCustomValidity("Must be 3 or more letters");
+        }
+        else if (mp_exists) {
+            submit_button.attr('disabled', true);
+            var exists_msg = "";
+            $(url_error).text("A tool with that path already exists");
+            mp.setCustomValidity('Mount point already exists');
+            url_error.className = "modal-form-error";
+        } else {
+            // Everything looks good -- clear any validation errors.
+            $(url_error).text("");
+            submit_button.attr('disabled', false);
+            mp.setCustomValidity("");
+        }
+    }
 </script>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/allura/blob/9b28d94c/Allura/allura/public/nf/css/navbar.css
----------------------------------------------------------------------
diff --git a/Allura/allura/public/nf/css/navbar.css b/Allura/allura/public/nf/css/navbar.css
index 8c1c877..a29bcaf 100644
--- a/Allura/allura/public/nf/css/navbar.css
+++ b/Allura/allura/public/nf/css/navbar.css
@@ -278,8 +278,38 @@
 }
 
 /*.modal {*/
-    /*background-color: rgba(51, 51, 51, 0.94) !important;*/
-    /*border-radius: 12px !important;*/
-    /*background-image: none !important;*/
-    /*box-shadow: inset 0 1px 1px #aaaaaa,inset 0 -2px 20px rgba(96, 96, 96, 0.5),0 1px 5px
rgba(0, 0, 0, 0.4) !important;*/
+    /*background: rgb(47, 47, 47) none !important;*/
+    /*box-shadow: none !important;*/
+    /*border-radius: 15px !important;*/
+    /*border: 5px solid #404040 !important;*/
 /*}*/
+
+/*.modal input{*/
+    /*margin-bottom: 3px;*/
+    /*padding-left: 2px;*/
+    /*font-weight: 700;*/
+    /*margin-top: 5px;*/
+    /*font-size: medium;*/
+/*}*/
+
+input.validate_input:valid[type='text'] {
+    border: 1px solid #d8ffd5;
+    background: #deffdc;
+}
+
+input.validate_input:invalid[type='text'] {
+    background: #fadad5;
+}
+
+input:focus:invalid {
+    outline: none;
+}
+
+.modal-form-error {
+    color: #FFFFFF;
+    padding: 2px;
+    border-radius: 2px;
+    font-size: smaller;
+    font-weight: 600;
+    margin-left: 0.6rem;
+}

http://git-wip-us.apache.org/repos/asf/allura/blob/9b28d94c/Allura/allura/templates/jinja_master/top_nav.html
----------------------------------------------------------------------
diff --git a/Allura/allura/templates/jinja_master/top_nav.html b/Allura/allura/templates/jinja_master/top_nav.html
index 3d14c25..415123c 100644
--- a/Allura/allura/templates/jinja_master/top_nav.html
+++ b/Allura/allura/templates/jinja_master/top_nav.html
@@ -52,6 +52,7 @@
     var _data = {{ h.escape_json(c.project.nav_data(admin_options=True))|safe  }};
         $(document).ready(function () {
             var _existingTools = getMountPoints(_data['menu']);
+            document._existingTools = getMountPoints(_data['menu'])
             $('#toggle-admin-btn').click(function () {
                 ReactDOM.render(React.createElement(Main, {
                     initialData: _data
@@ -61,7 +62,6 @@
             ReactDOM.render(React.createElement(ToggleAddNewTool, {
                         installableTools: _data['installable_tools'],
                         mountPointValidation:_existingTools
-
                     }), document.getElementById('add-tool-container'));
         });
     </script>


Mime
View raw message