UI Dynamic List updates

12 years ago · 306e07bc36
parent 5377a2bac4
commit 306e07bc36
2 changed files with 113 additions and 66 deletions
--- a/openid-connect-server/src/main/webapp/resources/js/app.js
+++ b/openid-connect-server/src/main/webapp/resources/js/app.js
@ -1,4 +1,17 @@

+    var URIModel = Backbone.Model.extend({
+
+        validate: function(){
+
+            var expression = /^(?:([a-z0-9+.-]+:\/\/)((?:(?:[a-z0-9-._~!$&'()*+,;=:]|%[0-9A-F]{2})*)@)?((?:[a-z0-9-._~!$&'()*+,;=]|%[0-9A-F]{2})*)(:(?:\d*))?(\/(?:[a-z0-9-._~!$&'()*+,;=:@\/]|%[0-9A-F]{2})*)?|([a-z0-9+.-]+:)(\/?(?:[a-z0-9-._~!$&'()*+,;=:@]|%[0-9A-F]{2})+(?:[a-z0-9-._~!$&'()*+,;=:@\/]|%[0-9A-F]{2})*)?)(\?(?:[a-z0-9-._~!$&'()*+,;=:\/?@]|%[0-9A-F]{2})*)?(#(?:[a-z0-9-._~!$&'()*+,;=:\/?@]|%[0-9A-F]{2})*)?$/i;
+            var regex = new RegExp(expression);
+
+            if (!this.get("uri").match(regex)) {
+                return "Invalid URI";
+            }
+        }
+
+    });

    var ClientModel = Backbone.Model.extend({

@ -36,26 +49,9 @@
            refreshTokenValiditySeconds: {
                required: true,
                type:"number"
-            },
-            registeredRedirectUri: {
-                custom: 'validateURI'
            }
        },

-        validateURI: function(attributeName, attributeValue) {
-
-            var expression = /^(?:([a-z0-9+.-]+:\/\/)((?:(?:[a-z0-9-._~!$&'()*+,;=:]|%[0-9A-F]{2})*)@)?((?:[a-z0-9-._~!$&'()*+,;=]|%[0-9A-F]{2})*)(:(?:\d*))?(\/(?:[a-z0-9-._~!$&'()*+,;=:@\/]|%[0-9A-F]{2})*)?|([a-z0-9+.-]+:)(\/?(?:[a-z0-9-._~!$&'()*+,;=:@]|%[0-9A-F]{2})+(?:[a-z0-9-._~!$&'()*+,;=:@\/]|%[0-9A-F]{2})*)?)(\?(?:[a-z0-9-._~!$&'()*+,;=:\/?@]|%[0-9A-F]{2})*)?(#(?:[a-z0-9-._~!$&'()*+,;=:\/?@]|%[0-9A-F]{2})*)?$/i;
-            var regex = new RegExp(expression);
-
-
-            for (var i in attributeValue) {
-                if (!attributeValue[i].match(regex)) {
-                    return "Invalid URI";
-                }
-            }
-
-
-        },

        // We can pass it default values.
        defaults:{
@ -91,6 +87,79 @@
        url:"api/clients"
    });

+
+
+    var URIView = Backbone.View.extend({
+
+        tagName: 'tr',
+
+        events:{
+            "click .icon-minus-sign":function() { this.model.destroy(); }
+        },
+
+        initialize:function () {
+
+            if (!this.template) {
+                this.template = _.template($('#tmpl-uri').html());
+            }
+
+            this.model.bind('destroy', this.remove, this);
+
+        },
+
+        render:function () {
+            this.$el.html(this.template(this.model.toJSON()));
+            return this;
+        }
+    });
+
+    var URIListView = Backbone.View.extend({
+
+        tagName: "table",
+
+        events:{
+            "click button": "addItem"
+        },
+
+        initialize:function () {
+
+            if (!this.template) {
+                this.template = _.template($('#tmpl-uri-list').html());
+            }
+
+            this.$el.addClass("table-condensed");
+            this.collection.bind('add', this.render, this);
+
+        },
+
+        addItem:function() {
+            var input_value = $("input", this.el).val().trim();
+
+            var uri = new URIModel({uri:input_value});
+
+            // if it's valid and doesn't already exist
+            if (uri.isValid() && this.collection.where({uri: input_value}).length < 1) {
+                this.collection.add(uri);
+            }
+        },
+
+        render:function (eventName) {
+
+            this.$el.html(this.template());
+
+            _self = this;
+
+            _.each(this.collection.models, function (model) {
+                var el = new URIView({model:model}).render().el;
+                $("tbody", _self.el).append(el);
+            }, this);
+
+            return this;
+        }
+
+    });
+
+
    var BreadCrumbView = Backbone.View.extend({

        tagName: 'ul',
@ -222,6 +291,8 @@
            if (!this.template) {
                this.template = _.template($('#tmpl-client-form').html());
            }
+
+            this.registeredRedirectUriCollection = new Backbone.Collection();
        },

        events:{
@ -291,12 +362,6 @@

            $('.control-group').removeClass('error');

-            // do some trimming to the redirect URI to allow null value
-            var registeredRedirectUri = $.trim($('#registeredRedirectUri textarea').val()).replace(/ /g,'').split("\n");
-            if (registeredRedirectUri.length == 1 && registeredRedirectUri[0] == "") {
-                registeredRedirectUri = [];
-            }
-
            // build the grant type object
            var authorizedGrantTypes = [];
            $.each(["authorization_code","client_credentials","password","implicit"],function(index,type) {
@ -319,7 +384,7 @@
                clientId:$('#clientId input').val(),
                clientSecret: clientSecret,
                generateClientSecret:generateClientSecret,
-                registeredRedirectUri:registeredRedirectUri,
+                registeredRedirectUri: this.registeredRedirectUriCollection.pluck("uri"),
                clientDescription:$('#clientDescription textarea').val(),
                allowRefresh:$('#allowRefresh').is(':checked'),
                authorizedGrantTypes: authorizedGrantTypes,
@ -349,7 +414,16 @@
        render:function (eventName) {

            $(this.el).html(this.template(this.model.toJSON()));
-            
+
+            _self = this;
+
+            // build and bind registered redirect URI collection and view
+            _.each(this.model.get("registeredRedirectUri"), function (registeredRedirectUri) {
+                _self.registeredRedirectUriCollection.add(new URIModel({uri:registeredRedirectUri}));
+            });
+
+            $("#registeredRedirectUri .controls",this.el).html(new URIListView({collection: this.registeredRedirectUriCollection}).render().el);
+
            return this;
        },
        
@ -358,28 +432,7 @@
        }
    });

-    var URLListView = Backbone.View.extend({

-        tagName: 'span',
-
-        initialize:function () {
-        },
-
-        events:{
-            "click .btn-primary":"save"
-        },
-
-        save:function () {
-
-        },
-
-        render:function (eventName) {
-
-            // append and render
-            $(this.el).html($('#tmpl-url-list').html());
-            return this;
-        }
-    });


    // Router
@ -397,10 +450,6 @@
            this.clientList = new ClientCollection();
            this.clientListView = new ClientListView({model:this.clientList});

-            this.whiteListView = new URLListView();
-            this.blackListView = new URLListView();
-
-
            this.breadCrumbView = new BreadCrumbView({
                collection:new Backbone.Collection()
            });
--- a/openid-connect-server/src/main/webapp/resources/template/client.html
+++ b/openid-connect-server/src/main/webapp/resources/template/client.html
@ -70,22 +70,6 @@
            <div class="control-group" id="registeredRedirectUri">
                <label class="control-label">Redirect URI(s)</label>
                <div class="controls">
-                    <textarea class="input-xlarge" placeholder="http://"
-                              rows="3"><% for (var i in registeredRedirectUri) { %><%=registeredRedirectUri[i]+"\n"%><% } %></textarea>
-                    <p class="help-block">You may enter multiple URIs separated by a new lines</p>
-
-                    <table class="table-condensed">
-                        <tbody>
-                        <tr>
-                            <td><input type="text" value="" placeholder="http://"></td>
-                            <td><button class="btn btn-small" type="button">Add</button></td>
-                        </tr>
-                        <tr>
-                            <td>http://google.com</td>
-                            <td><i class="icon-minus-sign icon-gray"></i></td>
-                        </tr>
-                        </tbody>
-                    </table>
                </div>
            </div>

@ -234,4 +218,18 @@
    <% } else { %>
    <li class="active"><%=text%></li>
    <% } %>
+</script>
+
+<script type="text/html" id="tmpl-uri">
+    <td><%=uri%></td>
+    <td><i class="icon-minus-sign icon-gray"></i></td>
+</script>
+
+<script type="text/html" id="tmpl-uri-list">
+    <tbody>
+    <tr>
+        <td><input type="text" value="" placeholder="http://"></td>
+        <td><button class="btn btn-small" type="button">Add</button></td>
+    </tr>
+    </tbody>
 </script>