libre.sh/keycloak-scim
3
0
Fork 0
Code Issues 15 Pull requests Releases 1 Packages Activity Actions

Updatd realm and application forms

Browse source
This commit is contained in:
Stian Thorgersen 2013-07-25 12:40:26 +01:00
parent 3cbcc8c324
commit 4952849526
13 changed files with 665 additions and 498 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
ui/src/main/java/org/keycloak/ui/example/Admin.java
View file

@ -24,27 +24,27 @@ import javax.ws.rs.core.Response;
@Path("") @Path("")
public class Admin extends javax.ws.rs.core.Application { public class Admin extends javax.ws.rs.core.Application {
private static Map<String, Realm> realms = new HashMap<String, Realm>();
private static Map<String, Application> applications = new HashMap<String, Application>(); private static Map<String, Application> applications = new HashMap<String, Application>();
private static Map<String, Realm> realms = new HashMap<String, Realm>();
@DELETE @DELETE
@Path("/applications/{key}") @Path("/applications/{id}")
public void delete(@PathParam("key") String applicationKey) { public void delete(@PathParam("id") String id) {
applications.remove(applicationKey); applications.remove(id);
} }
@DELETE @DELETE
@Path("/realms/{key}") @Path("/realms/{id}")
public void deleteRealm(@PathParam("key") String key) { public void deleteRealm(@PathParam("id") String id) {
realms.remove(key); realms.remove(id);
} }
@GET @GET
@Path("/applications/{key}") @Path("/applications/{id}")
@Produces(MediaType.APPLICATION_JSON) @Produces(MediaType.APPLICATION_JSON)
public Application getApplication(@PathParam("key") String applicationKey) { public Application getApplication(@PathParam("id") String id) {
return applications.get(applicationKey); return applications.get(id);
} }
@GET @GET
@ -55,10 +55,10 @@ public class Admin extends javax.ws.rs.core.Application {
} }
@GET @GET
@Path("/realms/{key}") @Path("/realms/{id}")
@Produces(MediaType.APPLICATION_JSON) @Produces(MediaType.APPLICATION_JSON)
public Realm getRealm(@PathParam("key") String key) { public Realm getRealm(@PathParam("id") String id) {
return realms.get(key); return realms.get(id);
} }
@ -73,33 +73,33 @@ public class Admin extends javax.ws.rs.core.Application {
@Path("/applications") @Path("/applications")
@Consumes(MediaType.APPLICATION_JSON) @Consumes(MediaType.APPLICATION_JSON)
public Response save(Application application) { public Response save(Application application) {
String key = UUID.randomUUID().toString(); String id = UUID.randomUUID().toString();
application.setKey(key); application.setId(id);
applications.put(key, application); applications.put(id, application);
return Response.created(URI.create("/applications/" + application.getKey())).build(); return Response.created(URI.create("/applications/" + id)).build();
} }
@POST @POST
@Path("/realms") @Path("/realms")
@Consumes(MediaType.APPLICATION_JSON) @Consumes(MediaType.APPLICATION_JSON)
public Response save(Realm realm) { public Response save(Realm realm) {
String key = UUID.randomUUID().toString(); String id = UUID.randomUUID().toString();
realm.setKey(key); realm.setId(id);
realms.put(key, realm); realms.put(id, realm);
return Response.created(URI.create("/realms/" + realm.getKey())).build(); return Response.created(URI.create("/realms/" + id)).build();
} }
@PUT @PUT
@Path("/applications/{key}") @Path("/applications/{id}")
@Consumes(MediaType.APPLICATION_JSON) @Consumes(MediaType.APPLICATION_JSON)
public void save(@PathParam("key") String applicationKey, Application application) { public void save(@PathParam("id") String id, Application application) {
applications.put(applicationKey, application); applications.put(id, application);
} }
@PUT @PUT
@Path("/realms/{key}") @Path("/realms/{id}")
@Consumes(MediaType.APPLICATION_JSON) @Consumes(MediaType.APPLICATION_JSON)
public void save(@PathParam("key") String key, Realm realm) { public void save(@PathParam("id") String id, Realm realm) {
realms.put(key, realm); realms.put(id, realm);
} }
} }

80
ui/src/main/java/org/keycloak/ui/example/Application.java
View file

@ -21,8 +21,6 @@
*/ */
package org.keycloak.ui.example; package org.keycloak.ui.example;
import java.util.List;
import javax.xml.bind.annotation.XmlRootElement; import javax.xml.bind.annotation.XmlRootElement;
/** /**
@ -31,84 +29,74 @@ import javax.xml.bind.annotation.XmlRootElement;
@XmlRootElement @XmlRootElement
public class Application { public class Application {
private String callbackUrl; private String[] callbackUrl;
private String key; private boolean enabled;
private String id;
private String[] initialRoles;
private String name; private String name;
private String owner;
private String javaScriptOrigin;
private List<IdentityProviderConfig> providers;
private String secret;
private String realm; private String realm;
public String getCallbackUrl() { private String[] roles;
public String[] getCallbackUrl() {
return callbackUrl; return callbackUrl;
} }
public String getJavaScriptOrigin() { public String getId() {
return javaScriptOrigin; return id;
} }
public String getKey() { public String[] getInitialRoles() {
return key; return initialRoles;
} }
public String getName() { public String getName() {
return name; return name;
} }
public String getOwner() {
return owner;
}
public List<IdentityProviderConfig> getProviders() {
return providers;
}
public String getSecret() {
return secret;
}
public String getRealm() { public String getRealm() {
return realm; return realm;
} }
public void setCallbackUrl(String callbackUrl) { public String[] getRoles() {
return roles;
}
public boolean isEnabled() {
return enabled;
}
public void setCallbackUrl(String[] callbackUrl) {
this.callbackUrl = callbackUrl; this.callbackUrl = callbackUrl;
} }
public void setJavaScriptOrigin(String javaScriptOrigin) { public void setEnabled(boolean enabled) {
this.javaScriptOrigin = javaScriptOrigin; this.enabled = enabled;
} }
public void setKey(String key) { public void setId(String id) {
this.key = key; this.id = id;
}
public void setInitialRoles(String[] initialRoles) {
this.initialRoles = initialRoles;
} }
public void setName(String name) { public void setName(String name) {
this.name = name; this.name = name;
} }
public void setOwner(String owner) {
this.owner = owner;
}
public void setProviders(List<IdentityProviderConfig> providers) {
this.providers = providers;
}
public void setSecret(String secret) {
this.secret = secret;
}
public void setRealm(String realm) { public void setRealm(String realm) {
this.realm = realm; this.realm = realm;
} }
public void setRoles(String[] roles) {
this.roles = roles;
}
} }

81
ui/src/main/java/org/keycloak/ui/example/Realm.java
View file

@ -21,40 +21,101 @@
*/ */
package org.keycloak.ui.example; package org.keycloak.ui.example;
import java.util.concurrent.TimeUnit;
/** /**
* @author <a href="mailto:sthorger@redhat.com">Stian Thorgersen</a> * @author <a href="mailto:sthorger@redhat.com">Stian Thorgersen</a>
*/ */
public class Realm { public class Realm {
private String key; private boolean enabled;
private String[] initialRoles;
private String id;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
private String name; private String name;
private String owner; private String[] roles;
public String getKey() { private boolean social;
return key;
private long tokenExpiration;
private TimeUnit tokenExpirationUnit;
private boolean userRegistration;
public String[] getInitialRoles() {
return initialRoles;
} }
public String getName() { public String getName() {
return name; return name;
} }
public String getOwner() { public String[] getRoles() {
return owner; return roles;
} }
public void setKey(String key) { public long getTokenExpiration() {
this.key = key; return tokenExpiration;
}
public TimeUnit getTokenExpirationUnit() {
return tokenExpirationUnit;
}
public boolean isEnabled() {
return enabled;
}
public boolean isSocial() {
return social;
}
public boolean isUserRegistration() {
return userRegistration;
}
public void setEnabled(boolean enabled) {
this.enabled = enabled;
}
public void setInitialRoles(String[] initialRoles) {
this.initialRoles = initialRoles;
} }
public void setName(String name) { public void setName(String name) {
this.name = name; this.name = name;
} }
public void setOwner(String owner) { public void setRoles(String[] roles) {
this.owner = owner; this.roles = roles;
}
public void setSocial(boolean social) {
this.social = social;
}
public void setTokenExpiration(long tokenExpiration) {
this.tokenExpiration = tokenExpiration;
}
public void setTokenExpirationUnit(TimeUnit tokenExpirationUnit) {
this.tokenExpirationUnit = tokenExpirationUnit;
}
public void setUserRegistration(boolean userRegistration) {
this.userRegistration = userRegistration;
} }
} }

4
ui/src/main/resources/META-INF/resources/ui/index.html
View file

@ -12,12 +12,12 @@
<link href="css/styles.css" rel="stylesheet"> <link href="css/styles.css" rel="stylesheet">
<script src="lib/jquery/jquery-1.10.2.js"></script>
<script src="lib/angular/angular.js"></script> <script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-resource.js"></script> <script src="lib/angular/angular-resource.js"></script>
<script src="lib/angular/ui-bootstrap-tpls-0.4.0.js"></script> <script src="lib/angular/ui-bootstrap-tpls-0.4.0.js"></script>
<script src="lib/jquery/jquery-1.10.2.js"></script>
<script src="js/app.js"></script> <script src="js/app.js"></script>
<script src="js/controllers.js"></script> <script src="js/controllers.js"></script>
<script src="js/services.js"></script> <script src="js/services.js"></script>

81
ui/src/main/resources/META-INF/resources/ui/js/app.js
View file

@ -4,7 +4,24 @@ var module = angular.module('keycloak', [ 'keycloak.services', 'keycloak.control
var resourceRequests = 0; var resourceRequests = 0;
module.config([ '$routeProvider', function($routeProvider) { module.config([ '$routeProvider', function($routeProvider) {
$routeProvider.when('/applications/:key', { $routeProvider.when('/create/application', {
templateUrl : 'partials/application-detail.html',
resolve : {
applications : function(ApplicationListLoader) {
return ApplicationListLoader();
},
application : function(ApplicationLoader) {
return {};
},
realms : function(RealmListLoader) {
return RealmListLoader();
},
providers : function(ProviderListLoader) {
return ProviderListLoader();
}
},
controller : 'ApplicationDetailCtrl'
}).when('/applications/:application', {
templateUrl : 'partials/application-detail.html', templateUrl : 'partials/application-detail.html',
resolve : { resolve : {
applications : function(ApplicationListLoader) { applications : function(ApplicationListLoader) {
@ -29,7 +46,7 @@ module.config([ '$routeProvider', function($routeProvider) {
} }
}, },
controller : 'ApplicationListCtrl' controller : 'ApplicationListCtrl'
}).when('/realms/:realmKey/users/:userId', { }).when('/realms/:realm/users/:user', {
templateUrl : 'partials/user-detail.html', templateUrl : 'partials/user-detail.html',
resolve : { resolve : {
realms : function(RealmListLoader) { realms : function(RealmListLoader) {
@ -43,7 +60,7 @@ module.config([ '$routeProvider', function($routeProvider) {
} }
}, },
controller : 'UserDetailCtrl' controller : 'UserDetailCtrl'
}).when('/realms/:realmKey/users', { }).when('/realms/:realm/users', {
templateUrl : 'partials/user-list.html', templateUrl : 'partials/user-list.html',
resolve : { resolve : {
realms : function(RealmListLoader) { realms : function(RealmListLoader) {
@ -57,7 +74,18 @@ module.config([ '$routeProvider', function($routeProvider) {
} }
}, },
controller : 'UserListCtrl' controller : 'UserListCtrl'
}).when('/realms/:realmKey', { }).when('/create/realm', {
templateUrl : 'partials/realm-detail.html',
resolve : {
realms : function(RealmListLoader) {
return RealmListLoader();
},
realm : function(RealmLoader) {
return {};
}
},
controller : 'RealmDetailCtrl'
}).when('/realms/:realm', {
templateUrl : 'partials/realm-detail.html', templateUrl : 'partials/realm-detail.html',
resolve : { resolve : {
realms : function(RealmListLoader) { realms : function(RealmListLoader) {
@ -126,4 +154,49 @@ module.factory('spinnerInterceptor', function($q, $window, $rootScope, $location
return $q.reject(response); return $q.reject(response);
}); });
}; };
});
module.directive('kcInput', function() {
var d = {
scope : true,
replace: false,
link : function(scope, element, attrs) {
var form = element.closest('form');
var label = element.children('label');
var input = element.children('input');
var id = form.attr('name') + '.' + input.attr('name');
element.attr('class', 'control-group');
label.attr('class', 'control-label');
label.attr('for', id);
input.wrap('<div class="controls"/>');
input.attr('id', id);
if (!input.attr('placeHolder')) {
input.attr('placeHolder', label.text());
}
if (input.attr('required')) {
label.append(' <span class="required">*</span>');
}
}
};
return d;
});
module.directive('kcEnter', function() {
return function(scope, element, attrs) {
element.bind("keydown keypress", function(event) {
if(event.which === 13) {
scope.$apply(function(){
scope.$eval(attrs.kcEnter);
});
event.preventDefault();
}
});
};
}); });

549
ui/src/main/resources/META-INF/resources/ui/js/controllers.js
View file

@ -1,308 +1,361 @@
'use strict'; 'use strict';
var module = angular.module('keycloak.controllers', [ 'keycloak.services' ]); var module = angular.module('keycloak.controllers', [ 'keycloak.services' ]);
module.controller('GlobalCtrl', function($scope, Auth, $location, Notifications) { module.controller('GlobalCtrl', function($scope, Auth, $location, Notifications) {
$scope.addMessage = function() { $scope.addMessage = function() {
Notifications.success("test"); Notifications.success("test");
}; };
$scope.auth = Auth;
$scope.$watch(function() { $scope.auth = Auth;
return $location.path();
}, function() { $scope.$watch(function() {
$scope.path = $location.path().substring(1).split("/"); return $location.path();
}); }, function() {
$scope.path = $location.path().substring(1).split("/");
});
}); });
module.controller('ApplicationListCtrl', function($scope, applications) { module.controller('ApplicationListCtrl', function($scope, applications) {
$scope.applications = applications; $scope.applications = applications;
}); });
module.controller('ApplicationDetailCtrl', function($scope, applications, application, Application, realms, providers, $location, $window, $dialog, Notifications) { module.controller('ApplicationDetailCtrl', function($scope, applications, application, Application, realms, providers, $location, $window, $dialog,
$scope.application = angular.copy(application); Notifications) {
$scope.applications = applications; $scope.application = angular.copy(application);
$scope.realms = realms; $scope.applications = applications;
$scope.providers = providers; $scope.realms = realms;
$scope.providers = providers;
$scope.callbackUrl = $window.location.origin + "/ejs-identity/api/callback/" + application.key; $scope.callbackUrl = $window.location.origin + "/ejs-identity/api/callback/" + application.id;
$scope.create = !application.key; $scope.create = !application.id;
$scope.changed = $scope.create; $scope.changed = $scope.create;
$scope.$watch('application', function() { $scope.$watch('application', function() {
if (!angular.equals($scope.application, application)) { if (!angular.equals($scope.application, application)) {
$scope.changed = true; $scope.changed = true;
} }
}, true); }, true);
$scope.save = function() {
if ($scope.applicationForm.$valid) {
if (!$scope.application.key) {
Application.save($scope.application, function(data, headers) {
var l = headers().location;
var key = l.substring(l.lastIndexOf("/") + 1);
$location.url("/applications/" + key);
Notifications.success("Created application");
});
} else {
Application.update($scope.application, function() {
$scope.changed = false;
application = angular.copy($scope.application);
if ($scope.create) {
$location.url("/applications/" + $scope.application.key);
}
Notifications.success("Saved changes to the application");
});
}
} else {
$scope.applicationForm.showErrors = true;
}
};
$scope.reset = function() { $scope.addRole = function() {
$scope.application = angular.copy(application); if ($scope.newRole) {
$scope.changed = false; if (!$scope.application.roles) {
$scope.applicationForm.showErrors = false; $scope.application.roles = [];
}; }
$scope.cancel = function() { $scope.application.roles.push($scope.newRole);
$location.url("/applications"); $scope.newRole = null;
}; }
}
$scope.remove = function() { $scope.removeRole = function(i) {
var title = 'Delete ' + $scope.application.name; $scope.application.roles.splice(i, 1);
var msg = 'Are you sure you want to permanently delete this application?'; };
var btns = [ {
result : 'cancel',
label : 'Cancel'
}, {
result : 'ok',
label : 'Delete this application',
cssClass : 'btn-primary'
} ];
$dialog.messageBox(title, msg, btns).open().then(function(result) { $scope.addInitialRole = function() {
if (result == "ok") { if ($scope.newInitialRole) {
$scope.application.$remove(function() { if (!$scope.application.initialRoles) {
$location.url("/applications"); $scope.application.initialRoles = [];
Notifications.success("Deleted application"); }
});
}
});
};
$scope.availableProviders = []; $scope.application.initialRoles.push($scope.newInitialRole);
$scope.newInitialRole = null;
}
}
$scope.addProvider = function() { $scope.removeInitialRole = function(i) {
if (!$scope.application.providers) { $scope.application.initialRoles.splice(i, 1);
$scope.application.providers = []; };
}
$scope.save = function() {
if ($scope.applicationForm.$valid) {
if ($scope.create) {
Application.save($scope.application, function(data, headers) {
var l = headers().location;
var id = l.substring(l.lastIndexOf("/") + 1);
$location.url("/applications/" + id);
Notifications.success("Created application");
});
} else {
Application.update($scope.application, function() {
$scope.changed = false;
application = angular.copy($scope.application);
Notifications.success("Saved changes to the application");
});
}
} else {
$scope.applicationForm.showErrors = true;
}
};
$scope.application.providers.push({ $scope.reset = function() {
"providerId" : $scope.newProviderId $scope.application = angular.copy(application);
}); $scope.changed = false;
$scope.applicationForm.showErrors = false;
};
$scope.newProviderId = null; $scope.cancel = function() {
}; $location.url("/applications");
};
$scope.getProviderDescription = function(providerId) { $scope.remove = function() {
for ( var i = 0; i < $scope.providers.length; i++) { var title = 'Delete ' + $scope.application.name;
if ($scope.providers[i].id == providerId) { var msg = 'Are you sure you want to permanently delete this application?';
return $scope.providers[i]; var btns = [ {
} result : 'cancel',
} label : 'Cancel'
}; }, {
result : 'ok',
label : 'Delete this application',
cssClass : 'btn-primary'
} ];
$scope.removeProvider = function(i) { $dialog.messageBox(title, msg, btns).open().then(function(result) {
$scope.application.providers.splice(i, 1); if (result == "ok") {
}; $scope.application.$remove(function() {
$location.url("/applications");
Notifications.success("Deleted application");
});
}
});
};
var updateAvailableProviders = function() { $scope.availableProviders = [];
$scope.availableProviders.splice(0, $scope.availableProviders.length);
for ( var i in $scope.providers) { $scope.addProvider = function() {
var add = true; if (!$scope.application.providers) {
$scope.application.providers = [];
}
for ( var j in $scope.application.providers) { $scope.application.providers.push({
if ($scope.application.providers[j].providerId == $scope.providers[i].id) { "providerId" : $scope.newProviderId
add = false; });
break;
}
}
if (add) { $scope.newProviderId = null;
$scope.availableProviders.push($scope.providers[i]); };
}
}
};
$scope.openHelp = function(i) { $scope.getProviderDescription = function(providerId) {
$scope.providerHelpModal = true; for ( var i = 0; i < $scope.providers.length; i++) {
$scope.providerHelp = {}; if ($scope.providers[i].id == providerId) {
$scope.providerHelp.index = i; return $scope.providers[i];
$scope.providerHelp.description = $scope.getProviderDescription($scope.application.providers[i].providerId); }
}; }
};
$scope.closeHelp = function() { $scope.removeProvider = function(i) {
$scope.providerHelpModal = false; $scope.application.providers.splice(i, 1);
$scope.providerHelp = null; };
};
$scope.$watch("providers.length + application.providers.length", updateAvailableProviders); var updateAvailableProviders = function() {
$scope.availableProviders.splice(0, $scope.availableProviders.length);
for ( var i in $scope.providers) {
var add = true;
for ( var j in $scope.application.providers) {
if ($scope.application.providers[j].providerId == $scope.providers[i].id) {
add = false;
break;
}
}
if (add) {
$scope.availableProviders.push($scope.providers[i]);
}
}
};
$scope.openHelp = function(i) {
$scope.providerHelpModal = true;
$scope.providerHelp = {};
$scope.providerHelp.index = i;
$scope.providerHelp.description = $scope.getProviderDescription($scope.application.providers[i].providerId);
};
$scope.closeHelp = function() {
$scope.providerHelpModal = false;
$scope.providerHelp = null;
};
$scope.$watch("providers.length + application.providers.length", updateAvailableProviders);
}); });
module.controller('RealmListCtrl', function($scope, realms) { module.controller('RealmListCtrl', function($scope, realms) {
$scope.realms = realms; $scope.realms = realms;
}); });
module.controller('UserListCtrl', function($scope, realms, realm, users) { module.controller('UserListCtrl', function($scope, realms, realm, users) {
$scope.realms = realms; $scope.realms = realms;
$scope.realm = realm; $scope.realm = realm;
$scope.users = users; $scope.users = users;
}); });
module.controller('UserDetailCtrl', function($scope, realms, realm, user, User, $location, $dialog, Notifications) { module.controller('UserDetailCtrl', function($scope, realms, realm, user, User, $location, $dialog, Notifications) {
$scope.realms = realms; $scope.realms = realms;
$scope.realm = realm; $scope.realm = realm;
$scope.user = angular.copy(user); $scope.user = angular.copy(user);
$scope.create = !user.userId; $scope.create = !user.userId;
$scope.changed = $scope.create; $scope.changed = $scope.create;
$scope.$watch('user', function() { $scope.$watch('user', function() {
if (!angular.equals($scope.user, user)) { if (!angular.equals($scope.user, user)) {
$scope.changed = true; $scope.changed = true;
} }
}, true); }, true);
$scope.save = function() { $scope.save = function() {
if ($scope.userForm.$valid) { if ($scope.userForm.$valid) {
User.save({ User.save({
realmKey : realm.key realmKey : realm.key
}, $scope.user, function() { }, $scope.user, function() {
$scope.changed = false; $scope.changed = false;
user = angular.copy($scope.user); user = angular.copy($scope.user);
if ($scope.create) { if ($scope.create) {
$location.url("/realms/" + realm.key + "/users/" + user.userId); $location.url("/realms/" + realm.key + "/users/" + user.userId);
Notifications.success("Created user"); Notifications.success("Created user");
} else { } else {
Notifications.success("Saved changes to user"); Notifications.success("Saved changes to user");
} }
}); });
} else { } else {
$scope.userForm.showErrors = true; $scope.userForm.showErrors = true;
} }
}; };
$scope.reset = function() { $scope.reset = function() {
$scope.user = angular.copy(user); $scope.user = angular.copy(user);
$scope.changed = false; $scope.changed = false;
$scope.userForm.showErrors = false; $scope.userForm.showErrors = false;
}; };
$scope.cancel = function() { $scope.cancel = function() {
$location.url("/realms/" + realm.key + "/users"); $location.url("/realms/" + realm.key + "/users");
}; };
$scope.remove = function() { $scope.remove = function() {
var title = 'Delete ' + $scope.user.userId; var title = 'Delete ' + $scope.user.userId;
var msg = 'Are you sure you want to permanently delete this user?'; var msg = 'Are you sure you want to permanently delete this user?';
var btns = [ { var btns = [ {
result : 'cancel', result : 'cancel',
label : 'Cancel' label : 'Cancel'
}, { }, {
result : 'ok', result : 'ok',
label : 'Delete this user', label : 'Delete this user',
cssClass : 'btn-primary' cssClass : 'btn-primary'
} ]; } ];
$dialog.messageBox(title, msg, btns).open().then(function(result) { $dialog.messageBox(title, msg, btns).open().then(function(result) {
if (result == "ok") { if (result == "ok") {
$scope.user.$remove({ $scope.user.$remove({
realmKey : realm.key, realmKey : realm.key,
userId : $scope.user.userId userId : $scope.user.userId
}, function() { }, function() {
$location.url("/realms/" + realm.key + "/users"); $location.url("/realms/" + realm.key + "/users");
Notifications.success("Deleted user"); Notifications.success("Deleted user");
}); });
} }
}); });
}; };
}); });
module.controller('RealmDetailCtrl', function($scope, Realm, realms, realm, $location, $dialog, Notifications) { module.controller('RealmDetailCtrl', function($scope, Realm, realms, realm, $location, $dialog, Notifications) {
$scope.realms = realms; $scope.realms = realms;
$scope.realm = angular.copy(realm); $scope.realm = angular.copy(realm);
$scope.create = !realm.name; $scope.create = !realm.name;
$scope.changed = $scope.create; $scope.changed = $scope.create;
$scope.$watch('realm', function() { $scope.$watch('realm', function() {
if (!angular.equals($scope.realm, realm)) { if (!angular.equals($scope.realm, realm)) {
$scope.changed = true; $scope.changed = true;
} }
}, true); }, true);
$scope.save = function() { $scope.addRole = function() {
if ($scope.realmForm.$valid) { if ($scope.newRole) {
if (!$scope.realm.key) { if (!$scope.realm.roles) {
Realm.save($scope.realm, function(data, headers) { $scope.realm.roles = [];
var l = headers().location; }
var key = l.substring(l.lastIndexOf("/") + 1);
$location.url("/realms/" + key);
Notifications.success("Created realm");
});
} else {
Realm.update($scope.realm, function() {
$scope.changed = false;
realm = angular.copy($scope.realm);
if ($scope.create) {
$location.url("/realms/" + $scope.realm.key);
Notifications.success("Created realm");
} else {
Notifications.success("Saved changes to realm");
}
});
}
} else {
$scope.realmForm.showErrors = true;
}
};
$scope.reset = function() { $scope.realm.roles.push($scope.newRole);
$scope.realm = angular.copy(realm); $scope.newRole = null;
$scope.changed = false; }
$scope.realmForm.showErrors = false; }
};
$scope.cancel = function() { $scope.removeRole = function(i) {
$location.url("/realms"); $scope.realm.roles.splice(i, 1);
}; };
$scope.remove = function() { $scope.addInitialRole = function() {
var title = 'Delete ' + $scope.realm.name; if ($scope.newInitialRole) {
var msg = 'Are you sure you want to permanently delete this realm?'; if (!$scope.realm.initialRoles) {
var btns = [ { $scope.realm.initialRoles = [];
result : 'cancel', }
label : 'Cancel'
}, {
result : 'ok',
label : 'Delete this realm',
cssClass : 'btn-primary'
} ];
$dialog.messageBox(title, msg, btns).open().then(function(result) { $scope.realm.initialRoles.push($scope.newInitialRole);
if (result == "ok") { $scope.newInitialRole = null;
Realm.remove($scope.realm, function() { }
$location.url("/realms"); }
Notifications.success("Deleted realm");
}); $scope.removeInitialRole = function(i) {
} $scope.realm.initialRoles.splice(i, 1);
}); };
};
$scope.save = function() {
if ($scope.realmForm.$valid) {
if ($scope.create) {
Realm.save($scope.realm, function(data, headers) {
var l = headers().location;
var id = l.substring(l.lastIndexOf("/") + 1);
$location.url("/realms/" + id);
Notifications.success("Created realm");
});
} else {
Realm.update($scope.realm, function() {
$scope.changed = false;
realm = angular.copy($scope.realm);
Notifications.success("Saved changes to realm");
});
}
} else {
$scope.realmForm.showErrors = true;
}
};
$scope.reset = function() {
$scope.realm = angular.copy(realm);
$scope.changed = false;
$scope.realmForm.showErrors = false;
};
$scope.cancel = function() {
$location.url("/realms");
};
$scope.remove = function() {
var title = 'Delete ' + $scope.realm.name;
var msg = 'Are you sure you want to permanently delete this realm?';
var btns = [ {
result : 'cancel',
label : 'Cancel'
}, {
result : 'ok',
label : 'Delete this realm',
cssClass : 'btn-primary'
} ];
$dialog.messageBox(title, msg, btns).open().then(function(result) {
if (result == "ok") {
Realm.remove($scope.realm, function() {
$location.url("/realms");
Notifications.success("Deleted realm");
});
}
});
};
}); });

74
ui/src/main/resources/META-INF/resources/ui/js/services.js
View file

@ -34,8 +34,8 @@ module.factory('Notifications', function($rootScope, $timeout) {
}); });
module.factory('Application', function($resource) { module.factory('Application', function($resource) {
return $resource('/keycloak-server/ui/api/applications/:key', { return $resource('/keycloak-server/ui/api/applications/:id', {
key : '@key' id : '@id'
}, { }, {
update : { update : {
method : 'PUT' method : 'PUT'
@ -57,20 +57,16 @@ module.factory('ApplicationListLoader', function(Application, $q) {
module.factory('ApplicationLoader', function(Application, $route, $q) { module.factory('ApplicationLoader', function(Application, $route, $q) {
return function() { return function() {
var key = $route.current.params.key; var id = $route.current.params.application;
if (key == 'new') { var delay = $q.defer();
return {}; Application.get({
} else { id : id
var delay = $q.defer(); }, function(application) {
Application.get({ delay.resolve(application);
key : key }, function() {
}, function(application) { delay.reject('Unable to fetch application ' + id);
delay.resolve(application); });
}, function() { return delay.promise;
delay.reject('Unable to fetch application ' + key);
});
return delay.promise;
}
}; };
}); });
@ -91,8 +87,8 @@ module.factory('ProviderListLoader', function(Provider, $q) {
}); });
module.factory('Realm', function($resource) { module.factory('Realm', function($resource) {
return $resource('/keycloak-server/ui/api/realms/:key', { return $resource('/keycloak-server/ui/api/realms/:id', {
key : '@key' id : '@id'
}, { }, {
update : { update : {
method : 'PUT' method : 'PUT'
@ -114,27 +110,23 @@ module.factory('RealmListLoader', function(Realm, $q) {
module.factory('RealmLoader', function(Realm, $route, $q) { module.factory('RealmLoader', function(Realm, $route, $q) {
return function() { return function() {
var key = $route.current.params.realmKey; var id = $route.current.params.realm;
if (key == 'new') { var delay = $q.defer();
return {}; Realm.get({
} else { id : id
var delay = $q.defer(); }, function(realm) {
Realm.get({ delay.resolve(realm);
key : key }, function() {
}, function(realm) { delay.reject('Unable to fetch realm ' + name);
delay.resolve(realm); });
}, function() { return delay.promise;
delay.reject('Unable to fetch key ' + key);
});
return delay.promise;
}
}; };
}); });
module.factory('User', function($resource) { module.factory('User', function($resource) {
return $resource('/ejs-identity/api/im/:realmKey/users/:userId', { return $resource('/ejs-identity/api/im/:realm/users/:id', {
realmKey : '@realmKey', realm : '@realm',
userId : '@userId' id : '@id'
}, { }, {
save : { save : {
method : 'PUT' method : 'PUT'
@ -158,18 +150,18 @@ module.factory('UserListLoader', function(User, $route, $q) {
module.factory('UserLoader', function(User, $route, $q) { module.factory('UserLoader', function(User, $route, $q) {
return function() { return function() {
var userId = $route.current.params.userId; var name = $route.current.params.user;
if (userId == 'new') { if (name == 'new') {
return {}; return {};
} else { } else {
var delay = $q.defer(); var delay = $q.defer();
User.get({ User.get({
realmKey : $route.current.params.realmKey, realm : $route.current.params.realm,
userId : userId name : name
}, function(user) { }, function(user) {
delay.resolve(user); delay.resolve(user);
}, function() { }, function() {
delay.reject('Unable to fetch user ' + $route.current.params.userId); delay.reject('Unable to fetch user ' + name);
}); });
return delay.promise; return delay.promise;
} }
@ -182,7 +174,7 @@ module.service('Auth', function($resource, $http, $location, $routeParams) {
}; };
auth.user = { auth.user = {
userId : 'test', userId : 'test',
displayName: 'Test User' displayName : 'Test User'
}; };
return auth; return auth;
}); });

138
ui/src/main/resources/META-INF/resources/ui/partials/application-detail.html
View file

@ -2,7 +2,7 @@
<div class="row"> <div class="row">
<aside class="span3" data-ng-include data-src="'partials/application-menu.html'"></aside> <aside class="span3" data-ng-include data-src="'partials/application-menu.html'"></aside>
<div id="actions-bg"></div> <div id="actions-bg"></div>
<div id="container-right" class="span9"> <div id="container-right" class="span9">
<h1> <h1>
<span class="gray" data-ng-show="create">New Application</span> <span class="gray" data-ng-hide="create">{{application.name}}</span> <span class="gray" data-ng-show="create">New Application</span> <span class="gray" data-ng-hide="create">{{application.name}}</span>
@ -15,88 +15,56 @@
<form class="form-horizontal" name="applicationForm" novalidate> <form class="form-horizontal" name="applicationForm" novalidate>
<fieldset> <fieldset>
<legend>Settings</legend> <legend>Settings</legend>
<div>
<div class="control-group">
<label class="control-label" for="name">Name <span class="required">*</span></label>
<div class="controls">
<input type="text" class="input-xlarge" id="name" name="name" data-ng-model="application.name" autofocus required>
</div>
</div>
<div class="control-group">
<label class="control-label" for="callbackUrl">Callback URL <span class="required">*</span></label>
<div class="controls">
<input type="text" class="input-xxlarge" id="callbackUrl" name="callbackUrl" data-ng-model="application.callbackUrl"
required>
</div>
</div>
<div class="control-group">
<label class="control-label" for="javaScriptOrigin">JavaScript Origin </label>
<div class="controls">
<input type="text" class="input-xxlarge" id="javaScriptOrigin" data-ng-model="application.javaScriptOrigin">
</div>
</div>
<div class="control-group">
<label class="control-label" for="key">Key </label>
<div class="controls">
<input class="input-xxlarge" type="text" id="key" data-ng-model="application.key" data-ng-readonly="!(auth.root && create)">
</div>
</div>
<div class="control-group">
<label class="control-label" for="secret">Secret </label>
<div class="controls">
<input class="input-xxlarge" type="text" id="secret" data-ng-model="application.secret" data-ng-readonly="!(auth.root && create)">
</div>
</div>
<div class="control-group">
<label class="control-label" for="realm">Realm <span class="required">*</span></label>
<div class="controls">
<select data-ng-model="application.realm" id="realm" name="realm" data-ng-required>
<option data-ng-repeat="r in realms" value="{{r.key}}" data-ng-selected="r.key == application.realm">{{r.name}}</option>
</select>
</div>
</div>
<div class="control-group" data-ng-show="auth.root">
<label class="control-label" for="owner">Owner </label>
<div class="controls">
<input class="input-xxlarge" type="text" id="owner" data-ng-model="application.owner">
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Identity Providers</legend>
<div>
<div class="input-append">
<select data-ng-model="newProviderId">
<option data-ng-repeat="p in availableProviders" value="{{p.id}}">{{p.name}}</option>
</select>
<button class="btn" data-ng-click="addProvider()" data-ng-disabled="!newProviderId">Add Provider</button>
</div>
<table class="table table-striped table-bordered margin-top" data-ng-show="application.providers.length > 0"> <div data-kc-input>
<thead> <label>Name</label>
<tr> <input class="input-xlarge" type="text" name="name" data-ng-model="application.name" autofocus required>
<th>Provider</th> </div>
<th>Key <span class="required">*</span></th>
<th>Secret <span class="required">*</span></th> <div data-kc-input>
<th>&nbsp;</th> <label>Enabled</label>
</tr> <input class="input-xlarge" type="checkbox" name="enabled" data-ng-model="application.enabled">
</thead> </div>
<tr data-ng-repeat="provider in application.providers">
<td><input type="text" placeholder="Key" value="{{getProviderDescription(provider.providerId).name}}" readonly></td> <div class="control-group">
<td> <label class="control-label" for="realm">Realm <span class="required">*</span></label>
<input type="text" placeholder="Key" data-ng-model="provider.key" required> <div class="controls">
</td> <select data-ng-model="application.realm" id="realm" name="realm" data-ng-required>
<td> <option data-ng-repeat="r in realms" value="{{r.id}}" data-ng-selected="r.id == application.realm">{{r.name}}</option>
<input type="text" placeholder="Secret" data-ng-model="provider.secret" required> </select>
</td> </div>
<td><i class="icon-question-sign" data-ng-click="openHelp($index)"></i></td>
<td><i class="icon-trash" data-ng-click="removeProvider($index)"></i></td>
</tr>
</table>
</div> </div>
</fieldset> </fieldset>
<fieldset>
<legend>Roles</legend>
<div class="control-group">
<label class="control-label">Roles</label>
<div class="controls">
<span style="margin-right: 1em;" data-ng-repeat="r in application.roles">{{r}} <button data-ng-click="removeRole($index)"><i class="icon-remove"></i></button></span>
<div class="input-append">
<input class="input-small" type="text" data-ng-model="newRole" placeHolder="Role" data-kc-enter="addRole()" />
<button class="btn" type="button" data-ng-click="addRole()">Add</button>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">Initial Roles</label>
<div class="controls">
<span style="margin-right: 1em;" data-ng-repeat="r in application.initialRoles">{{r}} <button data-ng-click="removeInitialRole($index)"><i class="icon-remove"></i></button></span>
<div class="input-append">
<select style="width: auto;" data-ng-model="newInitialRole" data-ng-click="addInitialRole()">
<option data-ng-repeat="r in application.roles" value="{{r}}">{{r}}</option>
</select>
</div>
</div>
</div>
</fieldset>
<div class="form-actions" data-ng-show="create"> <div class="form-actions" data-ng-show="create">
<button type="submit" data-ng-click="save()" class="btn btn-primary" data-ng-show="changed">Save</button> <button type="submit" data-ng-click="save()" class="btn btn-primary" data-ng-show="changed">Save</button>
<button type="submit" data-ng-click="cancel()" class="btn" data-ng-click="cancel()" data-ng-show="changed">Cancel</button> <button type="submit" data-ng-click="cancel()" class="btn" data-ng-click="cancel()" data-ng-show="changed">Cancel</button>
@ -113,16 +81,4 @@
<div id="container-right-bg"></div> <div id="container-right-bg"></div>
</div> </div>
</div>
<div data-modal="providerHelpModal" data-close="closeHelp()" data-options="opts">
<div class="modal-header">
<h3>Configure {{providerHelp.description.name}}</h3>
</div>
<div class="modal-body">
<div data-ng-include data-src="providerHelp && 'partials/provider/' + providerHelp.description.id + '-help.html'"></div>
</div>
<div class="modal-footer">
<button class="btn" data-ng-click="closeHelp()">Close</button>
</div>
</div> </div>

4
ui/src/main/resources/META-INF/resources/ui/partials/application-list.html
View file

@ -4,7 +4,7 @@
<div id="actions-bg"></div> <div id="actions-bg"></div>
<div id="container-right" class="span9"> <div id="container-right" class="span9">
<a class="btn btn-small pull-right" href="#/applications/new">Add Application</a> <a class="btn btn-small pull-right" href="#/create/application">Add Application</a>
<h1> <h1>
<span class="gray">Applications</span> <span class="gray">Applications</span>
@ -17,7 +17,7 @@
</tr> </tr>
</thead> </thead>
<tr data-ng-repeat="application in applications"> <tr data-ng-repeat="application in applications">
<td><a href="#/applications/{{application.key}}">{{application.name}}</a></td> <td><a href="#/applications/{{application.id}}">{{application.name}}</a></td>
</tr> </tr>
</table> </table>
</div> </div>

4
ui/src/main/resources/META-INF/resources/ui/partials/application-menu.html
View file

@ -5,8 +5,8 @@
<span class="toggle">Applications</span> <span class="toggle">Applications</span>
</div> </div>
<ul> <ul>
<li data-ng-repeat="application in applications" data-ng-class="path[1] == application.key && 'active'"> <li data-ng-repeat="application in applications" data-ng-class="path[1] == application.id && 'active'">
<a href="#/applications/{{application.key}}">{{application.name}}</a> <a href="#/applications/{{application.id}}">{{application.name}}</a>
</li> </li>
</ul> </ul>
</li> </li>

78
ui/src/main/resources/META-INF/resources/ui/partials/realm-detail.html
View file

@ -14,25 +14,69 @@
<form class="form-horizontal" name="realmForm" novalidate> <form class="form-horizontal" name="realmForm" novalidate>
<fieldset> <fieldset>
<legend>Details</legend> <legend>Settings</legend>
<div data-kc-input>
<label>Name</label>
<input class="input-xlarge" type="text" name="name" data-ng-model="realm.name" autofocus required>
</div>
<div data-kc-input>
<label>Enabled</label>
<input class="input-xlarge" type="checkbox" name="enabled" data-ng-model="realm.enabled">
</div>
<div data-kc-input>
<label>Social login</label>
<input class="input-xlarge" type="checkbox" name="social" data-ng-model="realm.social">
</div>
<div data-kc-input>
<label>User registration</label>
<input class="input-xlarge" type="checkbox" name="social" data-ng-model="realm.userRegistration">
</div>
<div class="control-group"> <div class="control-group">
<label class="control-label" for="name">Name <span class="required">*</span></label> <label for="realmForm-tokenExpiration" class="control-label">Token expiration</label>
<div class="controls"> <div class="controls">
<input type="text" class="input-xlarge" id="name" name="name" data-ng-model="realm.name" autofocus required> <input class="input-small" type="text" name="tokenExpiration" data-ng-model="realm.tokenExpiration">
</div> <select style="width: auto;" name="tokenExpirationUnit" data-ng-model="realm.tokenExpirationUnit">
</div> <option value="SECONDS" data-ng-selected="!realm.tokenExpirationUnit">Seconds</option>
<div class="control-group"> <option value="MINUTES">Minutes</option>
<label class="control-label" for="key">Key </label> <option value="HOURS">Hours</option>
<div class="controls"> <option value="DAYS">Days</option>
<input class="input-xxlarge" type="text" id="key" name="key" data-ng-model="realm.key" data-ng-readonly="!(auth.root && create)"> </select>
</div> </div>
</div> </div>
<div class="control-group" data-ng-show="auth.root"> </fieldset>
<label class="control-label" for="owner">Owner </label>
<div class="controls"> <fieldset>
<input class="input-xxlarge" type="text" id="owner" data-ng-model="realm.owner"> <legend>Roles</legend>
</div>
</div> <div class="control-group">
<label class="control-label">Roles</label>
<div class="controls">
<span style="margin-right: 1em;" data-ng-repeat="r in realm.roles">{{r}} <button data-ng-click="removeRole($index)"><i class="icon-remove"></i></button></span>
<div class="input-append">
<input class="input-small" type="text" data-ng-model="newRole" placeHolder="Role" data-kc-enter="addRole()" />
<button class="btn" type="button" data-ng-click="addRole()">Add</button>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">Initial Roles</label>
<div class="controls">
<span style="margin-right: 1em;" data-ng-repeat="r in realm.initialRoles">{{r}} <button data-ng-click="removeInitialRole($index)"><i class="icon-remove"></i></button></span>
<div class="input-append">
<select style="width: auto;" data-ng-model="newInitialRole" data-ng-click="addInitialRole()">
<option data-ng-repeat="r in realm.roles" value="{{r}}">{{r}}</option>
</select>
</div>
</div>
</div>
</fieldset> </fieldset>
<div class="form-actions" data-ng-show="create"> <div class="form-actions" data-ng-show="create">

4
ui/src/main/resources/META-INF/resources/ui/partials/realm-list.html
View file

@ -4,7 +4,7 @@
<div id="actions-bg"></div> <div id="actions-bg"></div>
<div id="container-right" class="span9"> <div id="container-right" class="span9">
<a class="btn btn-small pull-right" href="#/realms/new">Add Realm</a> <a class="btn btn-small pull-right" href="#/create/realm">Add Realm</a>
<h1> <h1>
<span class="gray">Realms</span> <span class="gray">Realms</span>
@ -17,7 +17,7 @@
</tr> </tr>
</thead> </thead>
<tr data-ng-repeat="r in realms"> <tr data-ng-repeat="r in realms">
<td><a href="#/realms/{{r.key}}">{{r.name}}</a></td> <td><a href="#/realms/{{r.id}}">{{r.name}}</a></td>
</tr> </tr>
</table> </table>
</div> </div>

10
ui/src/main/resources/META-INF/resources/ui/partials/realm-menu.html
View file

@ -5,11 +5,11 @@
<span class="toggle">Realms</span> <span class="toggle">Realms</span>
</div> </div>
<ul> <ul>
<li data-ng-repeat="r in realms" data-ng-class="realm.key == r.key && 'active'"> <li data-ng-repeat="r in realms" data-ng-class="realm.id == r.id && 'active'">
<a href=#/realms/{{r.key}}>{{r.name}}</a> <a href=#/realms/{{r.id}}>{{r.name}}</a>
<ul class="sub-items" data-ng-show="realm.key == r.key"> <ul class="sub-items" data-ng-show="realm.id == r.id">
<li data-ng-class="!path[2] && 'active'"><a href="#/realms/{{r.key}}">Configuration</a></li> <li data-ng-class="!path[2] && 'active'"><a href="#/realms/{{r.id}}">Configuration</a></li>
<li data-ng-class="path[2] == 'users' && 'active'"><a href="#/realms/{{r.key}}/users">Users</a></li> <li data-ng-class="path[2] == 'users' && 'active'"><a href="#/realms/{{r.id}}/users">Users</a></li>
</ul> </ul>
</li> </li>
</ul> </ul>