diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/access.ftl b/forms/src/main/resources/META-INF/resources/forms/theme/default/access.ftl
index 8eff7d7..127b73f 100755
--- a/forms/src/main/resources/META-INF/resources/forms/theme/default/access.ftl
+++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/access.ftl
@@ -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>
\ No newline at end of file
diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/css/admin-console.css b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/admin-console.css
index c363b3b..af63a63 100644
--- a/forms/src/main/resources/META-INF/resources/forms/theme/default/css/admin-console.css
+++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/admin-console.css
@@ -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 {
diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/css/icons.css b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/icons.css
new file mode 100644
index 0000000..3db30cd
--- /dev/null
+++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/icons.css
@@ -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";
+}
diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/css/tables.css b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/tables.css
new file mode 100644
index 0000000..15a1f34
--- /dev/null
+++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/tables.css
@@ -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;
+}
diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/social.ftl b/forms/src/main/resources/META-INF/resources/forms/theme/default/social.ftl
index 09b770e..c927285 100755
--- a/forms/src/main/resources/META-INF/resources/forms/theme/default/social.ftl
+++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/social.ftl
@@ -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>
\ No newline at end of file
diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/template-main.ftl b/forms/src/main/resources/META-INF/resources/forms/theme/default/template-main.ftl
index 9f27f1e..3cc7975 100644
--- a/forms/src/main/resources/META-INF/resources/forms/theme/default/template-main.ftl
+++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/template-main.ftl
@@ -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">
