Skip to content

Commit

Permalink
Security form validation
Browse files Browse the repository at this point in the history
  • Loading branch information
Manuel Sangoi committed Jul 16, 2014
1 parent fd094f5 commit dfefb04
Show file tree
Hide file tree
Showing 3 changed files with 108 additions and 58 deletions.
2 changes: 1 addition & 1 deletion leshan-standalone/src/main/resources/webapp/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ leshanApp.config(['$routeProvider', '$locationProvider', function($routeProvider
$routeProvider.
when('/clients', { templateUrl : 'partials/client-list.html', controller : 'ClientListCtrl' }).
when('/clients/:clientId', { templateUrl : 'partials/client-detail.html', controller : 'ClientDetailCtrl' }).
when('/security', { templateUrl : 'partials/security-list.html', controller : 'SecurityListCtrl' }).
when('/security', { templateUrl : 'partials/security-list.html', controller : 'SecurityCtrl' }).
otherwise({ redirectTo : '/clients' });

} ]);
108 changes: 75 additions & 33 deletions leshan-standalone/src/main/resources/webapp/js/security-controllers.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
var lwClientControllers = angular.module('securityControllers', []);
angular.module('securityControllers', [])

lwClientControllers.controller('SecurityListCtrl', [
.controller('SecurityCtrl', [
'$scope',
'$http',
'dialog',
function SecurityListCtrl($scope, $http, dialog) {
function SecurityCtrl($scope, $http, dialog) {

// update navbar
angular.element("#navbar").children().removeClass('active');
Expand Down Expand Up @@ -34,34 +34,76 @@ lwClientControllers.controller('SecurityListCtrl', [
});
}

$scope.newSecurity = function() {
$('#newSecuritySubmit').unbind();
$('#newSecuritySubmit').click(function(e) {
e.preventDefault();

var endpoint = endpointValue.value;
if(securityMode.value == "psk") {
var security = {endpoint: endpoint, psk : { identity : pskIdentityValue.value , key : pskValue.value}};
}

// TODO validation
if(endpoint && security) {
$('#securityModal').modal('hide');

$http({method: 'PUT', url: "api/security", data: security, headers:{'Content-Type': 'text/plain'}})
.success(function(data, status, headers, config) {

$scope.securityInfos[endpoint] = security;

}).error(function(data, status, headers, config) {
errormessage = "Unable to add security info for endpoint " + endpoint + ": " + status + " - " + data;
dialog.open(errormessage);
console.error(errormessage)
});
}
});

$('#newSecurityModal').modal('show');
};
$scope.save = function() {

$scope.$broadcast('show-errors-check-validity');

if ($scope.form.$valid) {

if($scope.securityMode == "psk") {
var security = {endpoint: $scope.endpoint, psk : { identity : $scope.pskIdentity , key : $scope.pskValue}};
}
else {
dialog.open("RPK not supported yet");
}

if(security) {
$http({method: 'PUT', url: "api/security", data: security, headers:{'Content-Type': 'text/plain'}})
.success(function(data, status, headers, config) {
$scope.securityInfos[$scope.endpoint] = security;
$('#newSecurityModal').modal('hide');

}).error(function(data, status, headers, config) {
errormessage = "Unable to add security info for endpoint " + $scope.endpoint + ": " + status + " - " + data;
dialog.open(errormessage);
console.error(errormessage)
});
}
}
}

$scope.showModal = function() {
$('#newSecurityModal').modal('show');
$scope.$broadcast('show-errors-reset');
$scope.endpoint = ''
$scope.securityMode = 'psk'
$scope.pskIdentity = ''
$scope.pskValue = ''
$scope.rskValue = ''
}

}]);
}])


/* directive to toggle error class on input fields */
.directive('showErrors', function($timeout) {
return {
restrict : 'A',
require : '^form',
link : function(scope, el, attrs, formCtrl) {
// find the text box element, which has the 'name' attribute
var inputEl = el[0].querySelector("[name]");
// convert the native text box element to an angular element
var inputNgEl = angular.element(inputEl);
// get the name on the text box
var inputName = inputNgEl.attr('name');

// only apply the has-error class after the user leaves the text box
inputNgEl.bind('blur', function() {
el.toggleClass('has-error', formCtrl[inputName].$invalid);
});

scope.$on('show-errors-check-validity', function() {
el.toggleClass('has-error', formCtrl[inputName].$invalid);
});

scope.$on('show-errors-reset', function() {
$timeout(function() {
el.removeClass('has-error');
}, 0, false);
});
}
}
})


56 changes: 32 additions & 24 deletions leshan-standalone/src/main/resources/webapp/partials/security-list.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div>
<button class="btn btn-default center-block" ng-click="newSecurity()">Add
<button class="btn btn-default center-block" ng-click="showModal()" >Add
new client security configuration</button>
</div>

Expand Down Expand Up @@ -33,46 +33,56 @@
<h4 class="modal-title">New security configuration</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" name="form">
<div class="form-group">
<form class="form form-horizontal" name="form" novalidate>
<div class="form-group" show-errors>
<label for="endpointValue" class="col-sm-4 control-label">Client
endpoint</label>
<div class="col-sm-8">
<input class="form-control" id="endpointValue" name="endpoint">
<input class="form-control" id="endpointValue" name="endpoint" ng-model="endpoint" required>
<p class="help-block" ng-if="form.endpoint.$error.required">The endpoint is required</p>
</div>
</div>
<div class="form-group">
<label for="securityMode" class="col-sm-4 control-label">Security
mode</label>
<div class="col-sm-8">
<select class="form-control" id="securityMode">
<select class="form-control" id="securityMode" ng-model="securityMode">
<option value="psk">Pre-Shared Key</option>
<option value="rpk">Raw Public Key Certificate</option>
</select>
</div>
</div>

<!-- PSK inputs -->
<div class="form-group security-fg psk-fg">
<div class="form-group" ng-class="{'hidden': securityMode!='psk'}" show-errors>
<label for="pskIdentityValue" class="col-sm-4 control-label">Identity</label>
<div class="col-sm-8">
<input class="form-control" id="pskIdentityValue">
<textarea class="form-control" style="resize:none" rows="3" id="pskIdentityValue" name="pskIdentity"
ng-model="pskIdentity" ng-required="securityMode=='psk'" ng-maxlength="128" ></textarea>
<p class="help-block" ng-if="form.pskIdentity.$error.required">The PSK identity is required</p>
<p class="help-block" ng-if="form.pskIdentity.$error.maxlength">The PSK identity is too long</p>
</div>
</div>

<div class="form-group security-fg psk-fg">
<div class="form-group" ng-class="{'hidden': securityMode!='psk'}" show-errors>
<label for="pskValue" class="col-sm-4 control-label">Key</label>
<div class="col-sm-8">
<textarea class="form-control" rows="3" id="pskValue"></textarea>
<textarea class="form-control" style="resize:none" rows="3" id="pskValue" name="pskValue" ng-model="pskValue"
ng-required="securityMode=='psk'" ng-pattern="/^[0-9a-fA-F]+$/" ng-maxlength="128"></textarea>
<p class="text-right text-muted small" style="margin:0">Hexadecimal format</p>
<p class="help-block" ng-if="form.pskValue.$error.required">The pre-shared key is required</p>
<p class="help-block" ng-if="form.pskValue.$error.pattern">Hexadecimal format is expected</p>
<p class="help-block" ng-if="form.pskValue.$error.maxlength">The pre-shared key is too long</p>
</div>
</div>

<!-- RPK inputs -->
<div class="form-group security-fg rpk-fg hidden">
<div class="form-group" ng-class="{'hidden': securityMode!='rpk'}" show-errors>
<label for="rpkValue" class="col-sm-4 control-label">Public
key</label>
<div class="col-sm-8">
<input class="form-control" id="rpkValue">
<input class="form-control" id="rpkValue" name="rpkValue" ng-model="rpkValue"
ng-required="securityMode=='rpk'">
</div>
</div>

Expand All @@ -82,21 +92,19 @@ <h4 class="modal-title">New security configuration</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal"
id="newSecuritySubmit">Create</button>
<button type="button" class="btn btn-primary" id="newSecuritySubmit" ng-click="save()">Create</button>
</div>
</div>
</div>
</div>

<script>
$(document.body).on('click', '#securityMode', function(event) {
$(".security-fg").addClass('hidden');
if (securityMode.value == "psk") {
$(".psk-fg").removeClass('hidden');
} else if (securityMode.value == "rpk") {
$(".rpk-fg").removeClass('hidden');
}
return false;
})
</script>

<style>
.form-group .help-block {
display: none;
}

.form-group.has-error .help-block {
display: block;
}
</style>

0 comments on commit dfefb04

Please sign in to comment.