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

Keycloak design fixes

Browse source
This commit is contained in:
Gabriel Cardoso 2013-10-16 18:01:53 -03:00
parent c56433883c
commit 833a532c1a
10 changed files with 137 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/forms.css
View file

@ -344,6 +344,7 @@ fieldset.border-top {
border-style: solid;
border-color: #e9e8e8;
padding-top: 2em;
clear: both;
}
.form-group {
display: block;

1
admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/forms.less
View file

@ -400,6 +400,7 @@ fieldset.border-top {
border-style: solid;
border-color: #e9e8e8;
padding-top: 2em;
clear: both;
}
.form-group {

36
admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-credentials.html
View file

@ -4,44 +4,46 @@
<div id="content-area" class="col-md-9" role="main">
<div class="top-nav" data-ng-hide="createRealm">
<ul class="rcue-tabs">
<li><a href="#/realms/{{realm.id}}">Settings</a></li>
<li><a href="#/realms/{{realm.id}}">General</a></li>
<li data-ng-show="realm.social"><a href="#">Social</a></li>
<li><a href="#/realms/{{realm.id}}/roles">Roles</a></li>
<li class="active"><a href="#/realms/{{realm.id}}/required-credentials">Required Credentials</a></li>
<li><a href="#/realms/{{realm.id}}/token-settings">Token Settings</a></li>
<li class="active"><a href="#/realms/{{realm.id}}/required-credentials">Credentials</a></li>
<li><a href="#/realms/{{realm.id}}/token-settings">Token</a></li>
</ul>
</div>
<div id="content">
<h2 class="pull-left">Realm: <span>{{realm.realm}}</span></h2>
<p class="subtitle"></p>
<ol class="breadcrumb">
<li><a href="#/realms/{{realm.id}}">{{realm.realm}}</a></li>
<li><a href="#/realms/{{realm.id}}">Settings</a></li>
<li class="active">Required Credentials</li>
</ol>
<h2><span>{{realm.realm}}</span> Credentials</h2>
<form name="realmForm" novalidate>
<fieldset>
<legend uncollapsed><span class="text">Required Credentials</span></legend>
<div class="form-group">
<label class="control-label">Required User Credentials</label>
<fieldset class="border-top">
<div class="form-group clearfix">
<label for="user" class="control-label">Required User Credentials</label>
<div class="controls">
<input style="width:250px" type="text" ui-select2="userCredentialOptions" ng-model="realm.requiredCredentials">
<input id="user" type="text" ui-select2="userCredentialOptions" ng-model="realm.requiredCredentials" class="form-control tokenfield" placeholder="Type a role and enter">
</div>
</div>
<div class="form-group">
<label class="control-label">Required Application Credentials</label>
<div class="form-group clearfix">
<label for="application" class="control-label">Required Application Credentials</label>
<div class="controls">
<input style="width:250;height:25" type="text" ui-select2="userCredentialOptions" ng-model="realm.requiredApplicationCredentials">
<input id="application" type="text" ui-select2="userCredentialOptions" ng-model="realm.requiredApplicationCredentials" class="form-control tokenfield" placeholder="Type a role and enter">
</div>
</div>
<div class="form-group">
<label class="control-label">Required OAuth Credentials</label>
<div class="form-group clearfix">
<label for="oauth" class="control-label">Required OAuth Credentials</label>
<div class="controls">
<input style="width:250px" type="text" ui-select2="userCredentialOptions" ng-model="realm.requiredOAuthClientCredentials">
<input id="oauth" type="text" ui-select2="userCredentialOptions" ng-model="realm.requiredOAuthClientCredentials" class="form-control tokenfield" placeholder="Type a role and enter">
</div>
</div>
</fieldset>
<div class="form-actions">
<button type="submit" data-ng-click="save()" class="primary" data-ng-show="changed">Save
changes
</button>
<button type="submit" data-ng-click="reset()" data-ng-show="changed">Clear changes
</button>

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

@ -32,7 +32,7 @@
</div>
</div>
<div class="form-group">
<label class="control-label">Enabled</label>
<label for="enabled" class="control-label">Enabled</label>
<div class="onoffswitch">
<input type="checkbox" data-ng-model="realm.enabled" class="onoffswitch-checkbox"
@ -50,7 +50,7 @@
<fieldset>
<legend uncollapsed><span class="text">Login Options</span></legend>
<div class="form-group clearfix block">
<label class="control-label">Social login</label>
<label for="social" class="control-label">Social login</label>
<div class="onoffswitch">
<input type="checkbox" data-ng-model="realm.social" class="onoffswitch-checkbox" name="social" id="social">
<label for="social" class="onoffswitch-label">
@ -63,7 +63,7 @@
</div>
</div>
<div class="form-group clearfix block">
<label class="control-label">User registration</label>
<label for="registrationAllowed" class="control-label">User registration</label>
<div class="onoffswitch">
<input type="checkbox" data-ng-model="realm.registrationAllowed" class="onoffswitch-checkbox" name="registrationAllowed" id="registrationAllowed">
<label for="registrationAllowed" class="onoffswitch-label">
@ -76,7 +76,7 @@
</div>
</div>
<div class="form-group clearfix block">
<label class="control-label">Require SSL</label>
<label for="requireSsl" class="control-label">Require SSL</label>
<div class="onoffswitch">
<input type="checkbox" data-ng-model="realm.requireSsl" class="onoffswitch-checkbox" name="requireSsl" id="requireSsl">
<label for="requireSsl" class="onoffswitch-label">
@ -89,7 +89,7 @@
</div>
</div>
<div class="form-group">
<label class="control-label">Cookie login allowed</label>
<label for="cookieLoginAllowed" class="control-label">Cookie login allowed</label>
<div class="onoffswitch">
<input type="checkbox" data-ng-model="realm.cookieLoginAllowed" class="onoffswitch-checkbox" name="cookieLoginAllowed" id="cookieLoginAllowed">
<label for="cookieLoginAllowed" class="onoffswitch-label">

18
admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-tokens.html
View file

@ -4,19 +4,22 @@
<div id="content-area" class="col-md-9" role="main">
<div class="top-nav" data-ng-hide="createRealm">
<ul class="rcue-tabs">
<li><a href="#/realms/{{realm.id}}">Settings</a></li>
<li><a href="#/realms/{{realm.id}}">General</a></li>
<li data-ng-show="realm.social"><a href="#">Social</a></li>
<li><a href="#/realms/{{realm.id}}/roles">Roles</a></li>
<li><a href="#/realms/{{realm.id}}/required-credentials">Required Credentials</a></li>
<li class="active"><a href="#/realms/{{realm.id}}/token-settings">Token Settings</a></li>
<li><a href="#/realms/{{realm.id}}/required-credentials">Credentials</a></li>
<li class="active"><a href="#/realms/{{realm.id}}/token-settings">Token</a></li>
</ul>
</div>
<div id="content">
<h2 class="pull-left">Realm: <span>{{realm.realm}}</span></h2>
<p class="subtitle"></p>
<ol class="breadcrumb">
<li><a href="#/realms/{{realm.id}}">{{realm.realm}}</a></li>
<li><a href="#/realms/{{realm.id}}">Settings</a></li>
<li class="active">Token</li>
</ol>
<h2><span>{{realm.realm}}</span> Token Settings</h2>
<form name="realmForm" novalidate>
<fieldset>
<legend uncollapsed><span class="text">Token Settings</span></legend>
<fieldset class="border-top">
<div class="form-group input-select">
<label for="tokenLifespan">Token lifespan</label>
<div class="input-group">
@ -48,7 +51,6 @@
</fieldset>
<div class="form-actions">
<button type="submit" data-ng-click="save()" class="primary" data-ng-show="changed">Save
changes
</button>
<button type="submit" data-ng-click="reset()" data-ng-show="changed">Clear changes
</button>

34
admin-ui/src/main/resources/META-INF/resources/admin/partials/role-detail.html
View file

@ -4,20 +4,33 @@
<div id="content-area" class="col-md-9" role="main">
<div class="top-nav">
<ul class="rcue-tabs">
<li class="active"><a href="#/create/role/{{realm.id}}">New Realm Role</a></li>
<li><a href="#/realms/{{realm.id}}/roles">Realm Roles</a></li>
<li><a href="#/realms/{{realm.id}}">Realm Settings</a></li>
<li><a href="#/realms/{{realm.id}}">General</a></li>
<li data-ng-show="realm.social"><a href="#">Social</a></li>
<li class="active"><a href="#/realms/{{realm.id}}/roles">Roles</a></li>
<li><a href="#/realms/{{realm.id}}/required-credentials">Credentials</a></li>
<li><a href="#/realms/{{realm.id}}/token-settings">Token</a></li>
</ul>
</div>
<div id="content">
<h2 class="pull-left" data-ng-show="create">New Realm Role</h2>
<h2 class="pull-left" data-ng-hide="create">Realm Role <span>{{role.name}}</span></h2>
<ol class="breadcrumb" data-ng-hide="create">
<li><a href="#/realms/{{realm.id}}">{{realm.realm}}</a></li>
<li><a href="#/realms/{{realm.id}}">Settings</a></li>
<li><a href="#/realms/{{realm.id}}/roles">Roles</a></li>
<li class="active">{{role.name}}</li>
</ol>
<h2 class="pull-left" data-ng-hide="create"><span>{{realm.realm}}</span> {{role.name}}</h2>
<ol class="breadcrumb" data-ng-show="create">
<li><a href="#/realms/{{realm.id}}">{{realm.realm}}</a></li>
<li><a href="#/realms/{{realm.id}}">Settings</a></li>
<li><a href="#/realms/{{realm.id}}/roles">Roles</a></li>
<li class="active">Add Role</li>
</ol>
<h2 class="pull-left" data-ng-show="create">Add Realm Role</h2>
<p class="subtitle" data-ng-show="create"><span class="required">*</span> Required fields</p>
<form name="realmForm" novalidate>
<fieldset>
<legend uncollapsed><span class="text">Details</span> </legend>
<fieldset class="border-top">
<div class="form-group">
<label for="name">Role name </label><span class="required" data-ng-show="create">*</span>
<label for="name">Role name <span class="required" data-ng-show="create">*</span></label>
<div class="controls">
<input type="text" id="name" name="name" data-ng-model="role.name" autofocus
@ -28,8 +41,8 @@
<label for="description">Description </label>
<div class="controls">
<input type="text" id="description" name="description" data-ng-model="role.description" autofocus
required>
<textarea rows="5" cols="50" id="description" name="description" data-ng-model="role.description" required></textarea>
<!-- Replaced by the textarea above <input type="text" id="description" name="description" data-ng-model="role.description" required> -->
</div>
</div>
</fieldset>
@ -43,7 +56,6 @@
<div class="form-actions" data-ng-show="!create">
<button type="submit" data-ng-click="save()" class="primary" data-ng-show="changed">Save
changes
</button>
<button type="submit" data-ng-click="reset()" data-ng-show="changed">Clear changes
</button>

8
admin-ui/src/main/resources/META-INF/resources/admin/partials/role-list.html
View file

@ -18,14 +18,16 @@
<li class="active">Roles</li>
</ol>
<h2 class="pull-left"><span>{{realm.realm}}</span> Roles</h2>
<div class="feedback info" data-ng-show="!roles || roles.length == 0">
<p><strong>You have not configured realm roles.</strong><br><a class="button" href="#/create/role/{{realm.id}}">Add Role</a></p>
</div>
<table>
<caption class="hidden" data-ng-show="roles && roles.length > 0">Table of realm roles</caption>
<caption data-ng-show="!roles || roles.length == 0">No configured realm roles...</caption>
<thead>
<tr>
<th class="rcue-table-actions" colspan="2">
<div class="actions">
<a class="button" href="#/create/role/{{realm.id}}">Add</a>
<a class="button" href="#/create/role/{{realm.id}}">Add Role</a>
<!-- <button class="remove disabled">Remove</button> -->
</div>
</th>
@ -58,7 +60,7 @@
</td>
</tr>
</tfoot>
<tbody class="selectable-rows">
<tbody>
<tr ng-repeat="role in roles">
<td><a href="#/realms/{{realm.id}}/roles/{{role.id}}">{{role.name}}</a></td>
<td>{{role.description}}</td>

33
admin-ui/src/main/resources/META-INF/resources/admin/partials/role-mappings.html
View file

@ -19,7 +19,8 @@
<h2 class="pull-left"><span>{{user.username}}'s</span> Role Mappings</h2>
<p class="subtitle">All fields required</p>
<form name="realmForm" novalidate>
<fieldset class="border-top">
<fieldset>
<legend uncollapsed><span class="text">Realm Roles</span> </legend>
<div class="form-group">
<div class="controls changing-selectors">
<div class="select-title">
@ -49,7 +50,7 @@
<fieldset ng-show="applications.length > 0">
<legend collapsed><span class="text">Application Roles</span> </legend>
<div class="form-group input-select">
<label for="applications">Application: </label>
<label for="applications">Application</label>
<div class="input-group">
<div class="select-rcue">
<select id="applications" name="applications" ng-change="changeApplication()" ng-model="application" ng-options="a.name for a in applications">
@ -58,19 +59,27 @@
</div>
</div>
<div class="form-group" ng-show="application">
<div class="controls">
<select multiple size="5"
ng-multiple="true"
ng-model="selectedApplicationRoles"
ng-options="r.name for r in applicationRoles">
</select>
<button type="submit" ng-click="addApplicationRole()">---&gt;</button>
<button type="submit" ng-click="deleteApplicationRole()">&lt;---</button>
<select multiple size=5
<div class="controls changing-selectors">
<div class="select-title">
<label for="available-app">Available Roles</label>
<select id="available-app" class="form-control" multiple size="5"
ng-multiple="true"
ng-model="selectedApplicationRoles"
ng-options="r.name for r in applicationRoles">
</select>
</div>
<div class="middle-buttons">
<button type="submit" ng-click="addApplicationRole()" data-original-title="Move right" class="tooltipRightTrigger"><span class="icon-arrow-right">Move right</span></button>
<button type="submit" ng-click="deleteApplicationRole()" data-original-title="Move left" class="tooltipRightTrigger"><span class="icon-arrow-left">Move left</span></button>
</div>
<div class="select-title">
<label for="assigned-app">Assigned Roles</label>
<select id="assigned-app" class="form-control" multiple size=5
ng-multiple="true"
ng-model="selectedApplicationMappings"
ng-options="r.name for r in applicationMappings">
</select>
</select>
</div>
</div>
</div>
</fieldset>

34
admin-ui/src/main/resources/META-INF/resources/admin/partials/user-detail.html
View file

@ -3,31 +3,38 @@
<div class="bs-sidebar col-md-3 clearfix" data-ng-include data-src="'partials/realm-menu.html'"></div>
<div id="content-area" class="col-md-9" role="main">
<div class="top-nav" data-ng-show="create">
<ul class="rcue-tabs" >
<ul class="rcue-tabs">
<li class="active"><a href="#/create/user/{{realm.id}}">New User</a></li>
<li><a href="#/realms/{{realm.id}}/users">Query Users</a></li>
</ul>
<ul class="rcue-tabs">
<li></li>
</ul>
</div>
<div class="top-nav" data-ng-show="!create">
<ul class="rcue-tabs" >
<li><a href="#/create/user/{{realm.id}}">New User</a></li>
<li><a href="#/realms/{{realm.id}}/users">Query Users</a></li>
<li class="active"><a href="#">Attributes</a></li>
<li><a href="#">Credentials</a></li>
<li><a href="#/realms/{{realm.id}}/users/{{user.username}}/role-mappings">Role Mappings</a></li>
</ul>
</div>
<div id="content">
<h2 class="pull-left" data-ng-show="create">New User</h2>
<h2 class="pull-left" data-ng-hide="create">User <span>{{user.username}}</span></h2>
<p class="subtitle"><span class="required">*</span> Required fields</p>
<ol class="breadcrumb" data-ng-show="create">
<li><a href="#/realms/{{realm.id}}">{{realm.realm}}</a></li>
<li><a href="#/realms/{{realm.id}}/users">Users</a></li>
<li class="active">Add</li>
</ol>
<h2 class="pull-left" data-ng-show="create">Add User</h2>
<p class="subtitle" data-ng-show="create"><span class="required">*</span> Required fields</p>
<ol class="breadcrumb" data-ng-hide="create">
<li><a href="#/realms/{{realm.id}}">{{realm.realm}}</a></li>
<li><a href="#/realms/{{realm.id}}/users">Users</a></li>
<li><a href="#/realms/{{realm.id}}/users/{{user.username}}">{{user.username}}</a></li>
<li class="active">Attributes</li>
</ol>
<h2 class="pull-left" data-ng-hide="create"><span>{{user.username}}'s</span> Attributes</h2>
<form name="applicationForm" novalidate>
<fieldset>
<legend uncollapsed><span class="text">Attributes</span></legend>
<fieldset class="border-top">
<div class="form-group">
<label for="username">Username </label><span class="required" data-ng-show="create">*</span>
<label for="username">Username <span class="required" data-ng-show="create">*</span></label>
<div class="controls">
<input type="text" id="username" name="username" data-ng-model="user.username" autofocus
required data-ng-readonly="!create">
@ -69,7 +76,6 @@
<div class="form-actions" data-ng-show="!create">
<button type="submit" data-ng-click="save()" class="primary" data-ng-show="changed">Save
changes
</button>
<button type="submit" data-ng-click="reset()" data-ng-show="changed">Clear changes
</button>

57
admin-ui/src/main/resources/META-INF/resources/admin/partials/user-list.html
View file

@ -2,37 +2,44 @@
<div class="row">
<div class="bs-sidebar col-md-3 clearfix" data-ng-include data-src="'partials/realm-menu.html'"></div>
<div id="content-area" class="col-md-9" role="main">
<div class="top-nav" data-ng-hide="createRealm">
<div class="top-nav">
<ul class="rcue-tabs">
<li><a href="#/create/user/{{realm.id}}">New User</a></li>
<li class="active"><a href="#/realms/{{realm.id}}/users">Query Users</a></li>
<li></li>
</ul>
</div>
<div id="content">
<h2 class="pull-left">Query Users</h2>
<ol class="breadcrumb">
<li><a href="#/realms/{{realm.id}}">{{realm.realm}}</a></li>
<li class="active">Users</li>
</ol>
<h2><span>{{realm.realm}}</span> Users</h2>
<table>
<caption data-ng-show="users && search">Table of realm users</caption>
<caption data-ng-show="users && search" class="hidden">Table of realm users</caption>
<thead>
<tr>
<th class="rcue-table-actions" colspan="4">
<div class="search-comp clearfix">
<input type="text" placeholder="Search..." data-ng-model="search" class="search">
<button data-ng-click="searchQuery()"
class="icon-search tooltipRightTrigger"
data-original-title="Search by full name, last name, email, or username.">
Icon: search
</button>
</div>
</th>
</tr>
<tr>
<tr data-ng-show="users && search">
<th>Username</th>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
</tr>
</tr>
<tr>
<th class="rcue-table-actions" colspan="4">
<div class="search-comp clearfix">
<input type="text" placeholder="Search..." data-ng-model="search" class="search">
<button data-ng-click="searchQuery()"
class="icon-search tooltipRightTrigger"
data-original-title="Search by full name, last name, email, or username.">
Icon: search
</button>
</div>
<div class="actions">
<a class="button" href="#/create/user/{{realm.id}}">Add User</a>
<!-- <button class="remove disabled">Remove</button> -->
</div>
</th>
</tr>
<tr>
<tr data-ng-show="users && search">
<th>Username</th>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
</tr>
</tr>
</thead>
<tfoot data-ng-show="users && users.length > 10"> <!-- todo -->
<tr>