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

KEYCLOAK-74 - added acc/social and acc/access mock pages

Browse source
This commit is contained in:
vrockai 2013-10-01 11:03:23 +02:00
parent 144f5f9cfd
commit c8df32b0e5
6 changed files with 358 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
forms/src/main/resources/META-INF/resources/forms/theme/default/access.ftl
View file

@ -1,11 +1,82 @@
<#-- TODO: Only a placeholder, implementation needed -->
<#import "template-main.ftl" as layout>
<@layout.mainLayout active='access' bodyClass='access'; section>
<#if section = "header">
Authorized Applications
<h2>Manage Authorised Access</h2>
<#elseif section = "content">
<p class="info">Services requested access to your following accounts:</p>
<table class="list">
<caption>Table of services</caption>
<tbody>
<tr class="collapsed">
<td class="provider"><a href="#eventjuggler">EventJuggler</a></td>
<td class="soft">3 services accessing</td>
</tr>
<tr class="expanded hidden" id="#eventjuggler">
<td colspan="2">
<span class="provider">EventJuggler</span>
<p>You have granted the following services access to your EventJuggler account:</p>
<form>
<ul>
<li>
<span class="item">Event Announcer - Events info</span>
<button class="link"><span class="icon-cancel-circle">Icon: remove</span>Revoke Access</button>
</li>
<li>
<span class="item">Facebook - Events info</span>
<button class="link"><span class="icon-cancel-circle">Icon: remove</span>Revoke Access</button>
</li>
<li>
<span class="item">Event Announcer - Profile info</span>
<span class="status red">Access revoked</span>
<button class="link">Undo</button>
</li>
</ul>
<div class="form-actions">
<button type="submit" class="primary">Save</button>
<button type="submit">Cancel</button>
</div>
</form>
</td>
</tr>
<tr class="collapsed">
<td class="provider"><a href="#another-service">Another Service</a></td>
<td class="soft">5 services accessing</td>
</tr>
<tr class="expanded hidden" id="another-service">
<td colspan="2">
<span class="provider">EventJuggler</span>
<p>You have granted the following services access to your EventJuggler account:</p>
<form>
<ul>
<li>
<span class="item">Event Announcer - Events info</span>
<button class="link"><span class="icon-cancel-circle">Icon: remove</span>Revoke Access</button>
</li>
<li>
<span class="item">Facebook - Events info</span>
<button class="link"><span class="icon-cancel-circle">Icon: remove</span>Revoke Access</button>
</li>
<li>
<span class="item">Event Announcer - Profile info</span>
<span class="status red">Access revoked</span>
<button class="link">Undo</button>
</li>
</ul>
<div class="form-actions">
<button type="submit" class="primary">Save</button>
<button type="submit">Cancel</button>
</div>
</form>
</td>
</tr>
</tbody>
</table>
</#if>
</@layout.mainLayout>

50
forms/src/main/resources/META-INF/resources/forms/theme/default/css/admin-console.css
View file

@ -240,33 +240,65 @@ td.token-cell button {
margin-top: 0.45454545454545em;
}
table.list {
border-left: none;
border-right: none;
border-color: #EDEDED;
border-left: medium none #EDEDED;
border-right: medium none #EDEDED;
margin-top: 1.5em;
}
table.list caption {
display: none;
}
table.list tbody tr:first-child td {
border-top: 1px solid #dcdcdc;
border-top: 1px solid #EDEDED;
}
table.list tbody tr:nth-child(2n) {
background-color: #fff;
background-color: #FFFFFF;
}
table.list tbody tr td {
border-right: none;
border-left: none;
border-left: medium none;
border-right: medium none;
}
table.list tbody tr td.provider {
font-weight: bold;
font-size: 1.2em;
font-weight: bold;
}
table.list tbody tr td.provider a {
display: inline-block;
padding-bottom: 0.333333em;
padding-top: 0.416667em;
}
table.list tbody tr td.soft {
color: #a1a1a1;
color: #A1A1A1;
}
table.list tbody tr td.action {
text-align: right;
font-size: 1em;
text-align: right;
}
table.list tbody tr.expanded {
background-color: #F6F6F6;
}
table.list tbody tr.expanded .provider {
display: block;
font-size: 1.3913em;
padding-top: 0.5em;
}
table.list tbody tr.expanded p {
margin-bottom: 1.73913em;
margin-top: 1.30435em;
}
table.list tbody tr.expanded ul li {
margin-left: 1.30435em;
}
table.list tbody tr.expanded ul li .item, table.list tbody tr.expanded ul li .status {
margin-right: 2.6087em;
}
table.list tbody tr.expanded ul li .red {
color: #BA1212;
}
table.list tbody tr.expanded .form-actions {
font-size: 0.869565em;
margin-bottom: 1.5em;
margin-top: 0.5em;
}
/* Page: TOTP setup */
.totp ol li {

34
forms/src/main/resources/META-INF/resources/forms/theme/default/css/icons.css Normal file
View file

@ -0,0 +1,34 @@
.icon-collapse, .icon-expand {
background-image: url("img/icon-collapse-expand.png");
background-position: left top;
background-repeat: no-repeat;
height: 14px;
margin-right: 1em;
width: 14px;
}
.icon-expand {
background-position: left -14px;
margin-top: -1px;
}
.social:before {
display: inline-block;
font: 120%/1.65 zocial;
padding-right: 10px;
width: 28px;
}
.social.googleplus:before {
color: #D54431;
content: "+";
}
.social.google:before {
color: #3078F0;
content: "G";
}
.social.twitter:before {
color: #46C0FB;
content: "T";
}
.social.facebook:before {
color: #4863AE;
content: "f";
}

183
forms/src/main/resources/META-INF/resources/forms/theme/default/css/tables.css Normal file
View file

@ -0,0 +1,183 @@
table {
width: 100%;
border: 1px #dcdcdc solid;
border-spacing: 0;
}
table caption {
text-align: left;
font-weight: bold;
padding: 11.5px;
}
table tbody tr:nth-child(even) {
background-color: #f6f6f6;
}
table tbody tr td,
table thead tr th {
font-weight: normal;
padding: 6px 15px;
font-size: 11.5px;
border-top: 1px #ebebeb;
border-right: 1px #dcdcdc solid;
text-align: left;
}
.rcue-table-actions {
padding: 1px;
border-top: none;
}
.rcue-table-actions span:last-child {
float: right;
}
.rcue-table-actions {
padding: 1px;
}
/*
.rcue-table-actions button {
padding: 3px 8px;
font-size: 11px;
box-shadow: 1px 2px 2px #e3e3e3;
margin: 4px;
}
*/
.rcue-table-number {
text-align: right;
width: 100px;
}
table thead tr th {
font-weight: bold;
border: none;
border-right: 1px #dcdcdc solid;
background-image: linear-gradient(top, #fafafa 0%, #eeeeee 100%);
background-image: -o-linear-gradient(top, #fafafa 0%, #eeeeee 100%);
background-image: -moz-linear-gradient(top, #fafafa 0%, #eeeeee 100%);
background-image: -webkit-linear-gradient(top, #fafafa 0%, #eeeeee 100%);
background-image: -ms-linear-gradient(top, #fafafa 0%, #eeeeee 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fafafa), color-stop(1, 0, #eeeeee));
border-bottom: 1px #cedede solid;
}
/*
table tbody tr td:first-child {
color: #0099d3;
}
*/
table thead tr th:last-child {
border-right: none;
}
table tbody tr:first-child td {
border-top: 1px solid #f2f2f2;
/* padding-top: 9px; */
}
table tbody tr td:last-child {
border-right: none;
}
/*
table tbody tr:hover {
cursor: pointer;
background-color: #ebebeb;
}
*/
/* Styles from Gabriel */
.rcue-table-actions button + button,
.rcue-table-actions .button + button {
margin-left: 5px;
}
.rcue-table-actions div.actions {
float: right;
font-size: 0.90909090909091em;
}
table tbody tr {
border-top: 1px solid #ededed;
}
table tbody tr:hover {
cursor: default;
}
table tbody tr td {
vertical-align: middle;
}
table tbody tr td.token-cell {
padding: 0 0.7em;
line-height: 0;
}
table tbody tr td.token-cell .token {
padding-top: 0.18181818181818em;
padding-bottom: 0.18181818181818em;
margin-top: 6px;
margin-bottom: 5px;
}
table tbody tr td.token-cell button {
float: left;
margin-bottom: 7px;
margin-top: 8px;
}
table tbody.selectable-rows tr:hover {
cursor: pointer;
background-color: #ebebeb;
}
table tbody.selectable-rows tr:first-child td {
padding-top: 9px;
}
table tbody.selectable-rows tr.selected,
table tbody.selectable-rows tr.selected:hover {
background-color: #eaf5fb;
}
table tbody.selectable-rows tr.selected td:first-child,
table tbody.selectable-rows tr.selected:hover td:first-child {
background-image: url(img/icon-row-selected.svg);
background-position: 0.2em center;
background-repeat: no-repeat;
}
table tfoot tr {
border-top: 1px solid #cecece;
}
table tfoot tr .table-nav {
float: right;
}
table tfoot tr .table-nav a {
display: inline-block;
line-height: 2.4em;
border-left: 1px solid #d9d9d9;
width: 3.5em;
background-color: #f3f3f3;
background-image: linear-gradient(top, #fafafa 0%, #ededed 100%);
background-image: -o-linear-gradient(top, #fafafa 0%, #ededed 100%);
background-image: -moz-linear-gradient(top, #fafafa 0%, #ededed 100%);
background-image: -webkit-linear-gradient(top, #fafafa 0%, #ededed 100%);
background-image: -ms-linear-gradient(top, #fafafa 0%, #ededed 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fafafa), color-stop(1, 0, #ededed));
text-indent: -99999em;
background-image: url(img/sprite-table-nav.png);
background-repeat: no-repeat;
background-position: left top;
vertical-align: top;
}
table tfoot tr .table-nav a.last {
background-position: top right;
}
table tfoot tr .table-nav a.prev {
background-position: bottom left;
}
table tfoot tr .table-nav a.next {
background-position: bottom right;
}
table tfoot tr .table-nav a:hover {
background-image: url(img/sprite-table-nav.png);
background-color: #eeeeee;
}
table tfoot tr .table-nav a:active {
box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.25) inset;
}
table tfoot tr .table-nav a.disabled {
opacity: 0.5;
filter: alpha(opacity=50);
cursor: default;
}
table tfoot tr .table-nav a.disabled:active {
box-shadow: none;
}
table tfoot tr .table-nav span {
font-size: 1.1em;
border-left: 1px solid #d9d9d9;
line-height: 2.18181818181818em;
display: inline-block;
padding: 0 1.36363636363636em;
}

28
forms/src/main/resources/META-INF/resources/forms/theme/default/social.ftl
View file

@ -1,12 +1,38 @@
<#-- TODO: Only a placeholder, implementation needed -->
<#import "template-main.ftl" as layout>
<@layout.mainLayout active='social' bodyClass='social'; section>
<#if section = "header">
Social Accounts
<h2>Social Accounts</h2>
<#elseif section = "content">
<form>
<fieldset>
<p class="info">You have the following social accounts associated to your Keycloak account:</p>
<table class="list">
<caption>Table of social accounts</caption>
<tbody>
<tr>
<td class="provider"><span class="social google">Google</span></td>
<td class="soft">Connected as john@google.com</td>
<td class="action"><a href="#" class="button">Remove Google</a></td>
</tr>
<tr>
<td class="provider"><span class="social twitter">Twitter</span></td>
<td class="soft"></td>
<td class="action"><a href="#" class="button">Add Twitter</a></td>
</tr>
<tr>
<td class="provider"><span class="social facebook">Facebook</span></td>
<td class="soft"></td>
<td class="action"><a href="#" class="button">Add Facebook</a></td>
</tr>
</tbody>
</table>
</fieldset>
</form>
</#if>
</@layout.mainLayout>

1
forms/src/main/resources/META-INF/resources/forms/theme/default/template-main.ftl
View file

@ -10,6 +10,7 @@
<link rel="stylesheet" href="${template.formsPath}/theme/${template.theme}/css/reset.css">
<!--link rel="stylesheet" href="bootstrap-3.0.0-wip/css/bootstrap.css"-->
<link href="${template.formsPath}/lib/bootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="${template.formsPath}/theme/${template.theme}/css/zocial/zocial.css" rel="stylesheet">
<link rel="stylesheet" href="${template.formsPath}/theme/${template.theme}/css/sprites.css">
<link rel="stylesheet" href="${template.formsPath}/theme/${template.theme}/css/select2.css">