KEYCLOAK-74 - added acc/social and acc/access mock pages
This commit is contained in:
vrockai
parent
144f5f9cfd
commit
c8df32b0e5
6 changed files with 358 additions and 11 deletions
|
|
@ -1,11 +1,82 @@
|
||||||
|
<#-- TODO: Only a placeholder, implementation needed -->
|
||||||
<#import "template-main.ftl" as layout>
|
<#import "template-main.ftl" as layout>
|
||||||
<@layout.mainLayout active='access' bodyClass='access'; section>
|
<@layout.mainLayout active='access' bodyClass='access'; section>
|
||||||
|
|
||||||
<#if section = "header">
|
<#if section = "header">
|
||||||
|
|
||||||
Authorized Applications
|
<h2>Manage Authorised Access</h2>
|
||||||
|
|
||||||
<#elseif section = "content">
|
<#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>
|
</#if>
|
||||||
</@layout.mainLayout>
|
</@layout.mainLayout>
|
||||||
|
|
@ -240,33 +240,65 @@ td.token-cell button {
|
||||||
margin-top: 0.45454545454545em;
|
margin-top: 0.45454545454545em;
|
||||||
}
|
}
|
||||||
table.list {
|
table.list {
|
||||||
border-left: none;
|
border-color: #EDEDED;
|
||||||
border-right: none;
|
border-left: medium none #EDEDED;
|
||||||
|
border-right: medium none #EDEDED;
|
||||||
margin-top: 1.5em;
|
margin-top: 1.5em;
|
||||||
}
|
}
|
||||||
table.list caption {
|
table.list caption {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
table.list tbody tr:first-child td {
|
table.list tbody tr:first-child td {
|
||||||
border-top: 1px solid #dcdcdc;
|
border-top: 1px solid #EDEDED;
|
||||||
}
|
}
|
||||||
table.list tbody tr:nth-child(2n) {
|
table.list tbody tr:nth-child(2n) {
|
||||||
background-color: #fff;
|
background-color: #FFFFFF;
|
||||||
}
|
}
|
||||||
table.list tbody tr td {
|
table.list tbody tr td {
|
||||||
border-right: none;
|
border-left: medium none;
|
||||||
border-left: none;
|
border-right: medium none;
|
||||||
}
|
}
|
||||||
table.list tbody tr td.provider {
|
table.list tbody tr td.provider {
|
||||||
font-weight: bold;
|
|
||||||
font-size: 1.2em;
|
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 {
|
table.list tbody tr td.soft {
|
||||||
color: #a1a1a1;
|
color: #A1A1A1;
|
||||||
}
|
}
|
||||||
table.list tbody tr td.action {
|
table.list tbody tr td.action {
|
||||||
text-align: right;
|
|
||||||
font-size: 1em;
|
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 */
|
/* Page: TOTP setup */
|
||||||
.totp ol li {
|
.totp ol li {
|
||||||
|
|
|
||||||
|
|
@ -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";
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -1,12 +1,38 @@
|
||||||
|
<#-- TODO: Only a placeholder, implementation needed -->
|
||||||
<#import "template-main.ftl" as layout>
|
<#import "template-main.ftl" as layout>
|
||||||
<@layout.mainLayout active='social' bodyClass='social'; section>
|
<@layout.mainLayout active='social' bodyClass='social'; section>
|
||||||
|
|
||||||
<#if section = "header">
|
<#if section = "header">
|
||||||
|
|
||||||
Social Accounts
|
<h2>Social Accounts</h2>
|
||||||
|
|
||||||
<#elseif section = "content">
|
<#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>
|
</#if>
|
||||||
</@layout.mainLayout>
|
</@layout.mainLayout>
|
||||||
|
|
@ -10,6 +10,7 @@
|
||||||
<link rel="stylesheet" href="${template.formsPath}/theme/${template.theme}/css/reset.css">
|
<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 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}/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/sprites.css">
|
||||||
<link rel="stylesheet" href="${template.formsPath}/theme/${template.theme}/css/select2.css">
|
<link rel="stylesheet" href="${template.formsPath}/theme/${template.theme}/css/select2.css">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue