First stages of client-side validation worked into application

openid-connect-server/src/main/java/org/mitre/openid/connect/web/ClientAPI.java

@@ -69,6 +69,17 @@ public class ClientAPI {
         return "jsonClientView";
     }
 
+    @RequestMapping(value="/{id}", method = RequestMethod.PUT, headers = "Accept=application/json")
+    public String apiUpdateClient(@PathVariable("id") String id, @RequestBody String json, Model m) {
+
+        ClientDetailsEntity client = new Gson().fromJson(json, ClientDetailsEntity.class);
+        client.setClientId(id);
+        
+        m.addAttribute("entity", clientService.saveClient(client));
+
+        return "jsonClientView";
+    }
+
     @RequestMapping(value="/{id}", method=RequestMethod.DELETE, headers="Accept=application/json")
     public String apiDeleteClient(@PathVariable("id") String id, ModelAndView modelAndView) {
 

openid-connect-server/src/main/webapp/resources/js/app.js

@@ -4,6 +4,51 @@
 
         idAttribute: "clientId",
 
+        initialize: function () {
+
+            this.bind('error:clientName', function(model, errs) {
+                $('#clientName').addClass('error');
+            });
+
+            this.bind('error:clientDescription', function(model, errs) {
+                $('#clientDescription').addClass('error');
+            });
+
+            this.bind('error:registeredRedirectUri', function(model, errs) {
+                $('#registeredRedirectUri').addClass('error');
+            });
+        },
+
+        validate:{
+            clientName:{
+                required:true,
+                pattern:/^[a-zA-Z ]+$/,
+                minlength:3,
+                maxlength:100
+            },
+            clientDescription:{
+                required:true,
+                pattern:/^[a-zA-Z ]+$/,
+                minlength:3,
+                maxlength:100
+            },
+            registeredRedirectUri: {
+                custom: 'validateURI'
+            }
+        },
+
+        validateURI: function(attributeName, attributeValue) {
+
+            var expression = /[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi;
+            var regex = new RegExp(expression);
+
+            return attributeValue.every(function (url) {
+                if (!url.match(regex)) {
+                    return false;
+                }
+            });
+        },
+
         // We can pass it default values.
         defaults:{
             clientName:"",
@@ -51,7 +96,7 @@
         },
 
         editClient:function () {
-            alert('edit');
+            document.location.hash = 'client/' + this.model.id;
         },
 
         deleteClient:function () {
@@ -90,7 +135,7 @@
 
         newClient:function () {
             this.remove();
-            document.location.hash = 'new_client';
+            document.location.hash = 'client/new';
         },
 
         render:function (eventName) {
@@ -121,25 +166,36 @@
             "click .btn-primary":"saveClient"
         },
 
-        saveClient:function () {
+        saveClient:function (event) {
+
+            event.preventDefault();
+
             this.model.set({
-                clientName:$('#clientName').val(),
+                clientName:$('#clientName input').val(),
-                registeredRedirectUri:[$('#registeredRedirectUri').val()],
+                registeredRedirectUri:[$('#registeredRedirectUri input').val()],
-                clientDescription:$('#clientDescription').val()
+                clientDescription:$('#clientDescription textarea').val(),
+                allowRefresh:$('#allowRefresh').is(':checked')
             });
             if (this.model.isNew()) {
                 var self = this;
                 app.clientList.create(this.model, {
                     success:function () {
-                        alert('bravo!');
+                        document.location.hash = '';
                     },
                     error: function () {
-                        alert('boo!');
+                        //alert('boo!');
                     }
                 });
 
             } else {
-                this.model.save();
+                this.model.save(this.model, {
+                    success:function () {
+                        document.location.hash = '';
+                    },
+                    error: function () {
+                        //alert('boo!');
+                    }
+                });
             }
 
             return false;
@@ -147,13 +203,7 @@
 
         render:function (eventName) {
 
-            var action = "Edit";
+            $(this.el).html(this.template(this.model.toJSON()));
-
-            if (!this.model) {
-                 action = "New";
-            }
-
-            $(this.el).html(this.template({action: action}));
             return this;
         }
     });
@@ -163,7 +213,8 @@
 
         routes:{
             "":"list",
-            "new_client":"newClient"
+            "client/new":"newClient",
+            "client/:id":"editClient"
         },
 
         initialize:function () {
@@ -182,6 +233,12 @@
         newClient:function() {
             this.clientFormView = new ClientFormView({model:new ClientModel()});
             $('#content').html(this.clientFormView.render().el);
+        },
+
+        editClient:function(id) {
+            var client = this.clientList.get(id);
+            this.clientFormView = new ClientFormView({model:client});
+            $('#content').html(this.clientFormView.render().el);
         }
 
     });

openid-connect-server/src/main/webapp/resources/template/client.html

@@ -74,7 +74,7 @@
 
 <script type="text/html" id="tmpl-client-form">
 
-    <h1><%=action%> Client</h1>
+    <h1><%=(clientId == null ? 'New' : 'Edit')%> Client</h1>
 
 
     <div class="">
@@ -86,16 +86,21 @@
 
                     <div class="row-fluid">
                         <div class="span6">
+                            <span class="control-group" id="clientName">
                             <label>Client name</label>
-                            <input id="clientName" type="text" class="" placeholder="Type something"> <span class="help-inline">Associated help text!</span>
+                            <input value="<%=clientName%>" type="text" class="" placeholder="Type something"> <span class="help-inline">Associated help text!</span>
-
+                            </span>
+                            <span class="control-group" id="registeredRedirectUri">
                             <label>Redirect URL</label>
-                            <input id="registeredRedirectUri" type="text" class="" placeholder="http://"><span class="help-inline">Associated help text!</span>
+                            <input type="text" class="" placeholder="http://"><span class="help-inline">Associated help text!</span>
+                            </span>
                         </div>
                         <div class="span6">
+                            <span class="control-group" id="clientDescription">
                             <label>Description</label>
-                            <textarea id="clientDescription" class="input-xlarge" placeholder="Type a description"
+                            <textarea class="input-xlarge" placeholder="Type a description"
-                                      rows="3"></textarea> <span class="help-inline">Associated help text!</span>
+                                      rows="3"><%=clientDescription%></textarea> <span class="help-inline">Associated help text!</span>
+                            </span>
                         </div>
                     </div>
 
@@ -106,7 +111,7 @@
                             token after it
                             expires.</p>
                         <label class="checkbox">
-                            <input type="checkbox"> Allow refresh tokens?
+                            <input type="checkbox" id="allowRefresh" <%=(allowRefresh == true ? 'checked' : '')%>> Allow refresh tokens?
                         </label>
                         <button class="btn btn-primary">Submit</button>
                     </div>