Merge pull request #74 from cardosogabriel/master
Adjustements from the "Keycloak Design Fixes" spreadsheet
This commit is contained in:
commit
d1660f3004
10 changed files with 137 additions and 95 deletions
|
@ -344,6 +344,7 @@ fieldset.border-top {
|
|||
border-style: solid;
|
||||
border-color: #e9e8e8;
|
||||
padding-top: 2em;
|
||||
clear: both;
|
||||
}
|
||||
.form-group {
|
||||
display: block;
|
||||
|
|
|
@ -400,6 +400,7 @@ fieldset.border-top {
|
|||
border-style: solid;
|
||||
border-color: #e9e8e8;
|
||||
padding-top: 2em;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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()">---></button>
|
||||
<button type="submit" ng-click="deleteApplicationRole()"><---</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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue