keycloakify 10.1.0-rc.1 → 10.1.0

package/res/account-v1/resource-detail.ftl

@@ -0,0 +1,277 @@
+<#import "template.ftl" as layout>
+<@layout.mainLayout active='authorization' bodyClass='authorization'; section>
+
+    <style>
+        .search-box,.close-icon,.search-wrapper {
+            position: relative;
+        }
+        .search-wrapper {
+            width: 500px;
+            margin: auto;
+            margin-top: 50px;
+        }
+        .search-box {
+            font-weight: 600;
+            color: white;
+            border: 1px solid #006e9c;
+            outline: 0;
+            border-radius: 15px;
+            background-color: #0085cf;
+            padding: 2px 5px;
+
+        }
+        .search-box:focus {
+            box-shadow: 0 0 15px 5px #b0e0ee;
+            border: 2px solid #bebede;
+        }
+        .close-icon {
+            border:1px solid transparent;
+            background-color: transparent;
+            display: inline-block;
+            float: right;
+          outline: 0;
+          cursor: pointer;
+        }
+        .close-icon:after {
+            display: block;
+            width: 15px;
+            height: 15px;
+            background-color: #FA9595;
+            z-index:1;
+            right: 35px;
+            top: 0;
+            bottom: 0;
+            margin: auto;
+            padding: 2px;
+            border-radius: 50%;
+            text-align: center;
+            color: white;
+            font-weight: normal;
+            font-size: 12px;
+            box-shadow: 0 0 2px #E50F0F;
+            cursor: pointer;
+        }
+        .search-box:not(:valid) ~ .close-icon {
+            display: none;
+        }
+    </style>
+    <script>
+        function removeScopeElm(elm) {
+            elm.parentNode.removeChild(elm);
+        }
+
+        function removeAllScopes(id) {
+            var scopesElm = document.getElementsByName('removeScope-' + id);
+
+            for (i = 0; i < scopesElm.length; i++) {
+                var td = scopesElm[i].parentNode.parentNode;
+                var tr = td.parentNode;
+                var tbody = tr.parentNode;
+                tbody.removeChild(tr);
+            }
+        }
+
+        function getChildren(parent, childId) {
+            var childNodes = [];
+
+            for (i = 0; i < parent.childNodes.length; i++) {
+                if (parent.childNodes[i].id == childId) {
+                    childNodes.push(parent.childNodes[i]);
+                }
+            }
+
+            return childNodes;
+        }
+    </script>
+
+    <div class="row">
+        <div class="col-md-10">
+            <h2>
+                <a href="${url.resourceUrl}">${msg("myResources")}</a> <i class="fa fa-angle-right"></i> <#if authorization.resource.displayName??>${authorization.resource.displayName}<#else>${authorization.resource.name}</#if>
+            </h2>
+        </div>
+    </div>
+
+    <#if authorization.resource.iconUri??>
+        <img src="${authorization.resource.iconUri}">
+        <br/>
+    </#if>
+
+    <div class="row">
+        <div class="col-md-10">
+            <h3>
+                ${msg("peopleAccessResource")}
+            </h3>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-md-12">
+                <table class="table table-striped table-bordered">
+                    <thead>
+                        <tr>
+                            <th>${msg("user")}</th>
+                            <th>${msg("permission")}</th>
+                            <th>${msg("date")}</th>
+                            <th>${msg("action")}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <#if authorization.resource.shares?size != 0>
+                            <#list authorization.resource.shares as permission>
+                                <form action="${url.getResourceGrant(authorization.resource.id)}" name="revokeForm-${authorization.resource.id}-${permission.requester.username}" method="post">
+                                    <input type="hidden" name="action" value="revoke">
+                                    <input type="hidden" name="requester" value="${permission.requester.username}">
+                                    <input type="hidden" id="stateChecker" name="stateChecker" value="${stateChecker}">
+                                    <tr>
+                                        <td>
+                                            <#if permission.requester.email??>${permission.requester.email}<#else>${permission.requester.username}</#if>
+                                        </td>
+                                        <td>
+                                            <#if permission.scopes?size != 0>
+                                                <#list permission.scopes as scope>
+                                                    <#if scope.granted && scope.scope??>
+                                                        <div class="search-box">
+                                                            <#if scope.scope.displayName??>
+                                                                ${scope.scope.displayName}
+                                                            <#else>
+                                                                ${scope.scope.name}
+                                                            </#if>
+                                                            <button class="close-icon" type="button" name="removeScope-${authorization.resource.id}-${permission.requester.username}" onclick="removeScopeElm(this.parentNode);document.forms['revokeForm-${authorization.resource.id}-${permission.requester.username}'].submit();"><i class="fa fa-times" aria-hidden="true"></i></button>
+                                                            <input type="hidden" name="permission_id" value="${scope.id}"/>
+                                                        </div>
+                                                    <#else>
+                                                        ${msg("anyPermission")}
+                                                    </#if>
+                                                </#list>
+                                            <#else>
+                                                Any action
+                                            </#if>
+                                        </td>
+                                        <td>
+                                            ${permission.createdDate?datetime}
+                                        </td>
+                                        <td width="20%" align="middle" style="vertical-align: middle">
+                                            <a href="#" id="revoke-${authorization.resource.name}-${permission.requester.username}" onclick="removeAllScopes('${authorization.resource.id}-${permission.requester.username}');document.forms['revokeForm-${authorization.resource.id}-${permission.requester.username}'].submit();" type="submit" class="btn btn-primary">${msg("doRevoke")}</a>
+                                        </td>
+                                    </tr>
+                                </form>
+                            </#list>
+                        <#else>
+                            <tr>
+                                <td colspan="4">${msg("resourceIsNotBeingShared")}</td>
+                            </tr>
+                        </#if>
+                    </tbody>
+                </table>
+            </form>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-md-10">
+            <h3>
+                ${msg("resourceManagedPolicies")}
+            </h3>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-md-12">
+                <table class="table table-striped table-bordered">
+                    <thead>
+                        <tr>
+                            <th>${msg("description")}</th>
+                            <th>${msg("permission")}</th>
+                            <th>${msg("action")}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <#if authorization.resource.policies?size != 0>
+                            <#list authorization.resource.policies as permission>
+                                <form action="${url.getResourceGrant(authorization.resource.id)}" name="revokePolicyForm-${authorization.resource.id}-${permission.id}" method="post">
+                                    <input type="hidden" name="action" value="revokePolicy">
+                                    <input type="hidden" name="permission_id" value="${permission.id}"/>
+                                    <input type="hidden" id="stateChecker" name="stateChecker" value="${stateChecker}">
+                                    <tr>
+                                        <td>
+                                            <#if permission.description??>
+                                                ${permission.description}
+                                            </#if>
+                                        </td>
+                                        <td>
+                                            <#if permission.scopes?size != 0>
+                                                <#list permission.scopes as scope>
+                                                    <div class="search-box">
+                                                        <#if scope.displayName??>
+                                                            ${scope.displayName}
+                                                        <#else>
+                                                            ${scope.name}
+                                                        </#if>
+                                                        <button class="close-icon" type="button" name="removePolicyScope-${authorization.resource.id}-${permission.id}-${scope.id}" onclick="removeScopeElm(this.parentNode);document.forms['revokePolicyForm-${authorization.resource.id}-${permission.id}'].submit();"><i class="fa fa-times" aria-hidden="true"></i></button>
+                                                        <input type="hidden" name="permission_id" value="${permission.id}:${scope.id}"/>
+                                                    </div>
+                                                </#list>
+                                            <#else>
+                                                ${msg("anyAction")}
+                                            </#if>
+                                        </td>
+                                        <td width="20%" align="middle" style="vertical-align: middle">
+                                            <a href="#" id="revokePolicy-${authorization.resource.name}-${permission.id}" onclick="document.forms['revokePolicyForm-${authorization.resource.id}-${permission.id}']['action'].value = 'revokePolicyAll';document.forms['revokePolicyForm-${authorization.resource.id}-${permission.id}'].submit();" type="submit" class="btn btn-primary">${msg("doRevoke")}</a>
+                                        </td>
+                                    </tr>
+                                </form>
+                            </#list>
+                        <#else>
+                            <tr>
+                                <td colspan="3">
+                                    ${msg("resourceNoPermissionsGrantingAccess")}
+                                </td>
+                            </tr>
+                        </#if>
+                    </tbody>
+                </table>
+            </form>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-md-10">
+            <h3>
+                ${msg("shareWithOthers")}
+            </h3>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-md-10">
+            <form action="${url.getResourceShare(authorization.resource.id)}" name="shareForm" method="post">
+                <input type="hidden" id="stateChecker" name="stateChecker" value="${stateChecker}">
+                <div class="col-sm-3 col-md-3">
+                    <label for="password" class="control-label">${msg("username")} or ${msg("email")} </label> <span class="required">*</span>
+                </div>
+                <div class="col-sm-8 col-md-8">
+                    <div class="row">
+                        <div class="col-md-12">
+                            <input type="text" class="form-control" id="user_id" name="user_id" autofocus autocomplete="off">
+                        </div>
+                        <div class="col-md-12">
+                            <br/>
+                            <#list authorization.resource.scopes as scope>
+                                <div id="scope" class="search-box">
+                                    <#if scope.displayName??>
+                                        ${scope.displayName}
+                                    <#else>
+                                        ${scope.name}
+                                    </#if>
+                                    <button class="close-icon" id="share-remove-scope-${authorization.resource.name}-${scope.name}" type="button" onclick="if (getChildren(this.parentNode.parentNode, 'scope').length > 1) {removeScopeElm(this.parentNode)}"><i class="fa fa-times" aria-hidden="true"></i></button>
+                                    <input type="hidden" name="scope_id" value="${scope.id}"/>
+                                </div>
+                            </#list>
+                        </div>
+                        <div class="col-md-12">
+                            <br/>
+                            <a href="#" onclick="document.forms['shareForm'].submit()" type="submit" id="share-button" class="btn btn-primary">${msg("share")}</a>
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+    <br/>
+</@layout.mainLayout>

package/res/account-v1/resources/css/account.css

@@ -0,0 +1,277 @@
+html {
+    height: 100%;
+}
+
+body {
+    background-color: #F9F9F9;
+    margin: 0;
+    padding: 0;
+    height: 100%;
+}
+
+header .navbar {
+    margin-bottom: 0;
+    min-height: inherit;
+}
+
+.header .container {
+    position: relative;
+}
+
+.navbar-title {
+    background-image: url('../img/logo.png');
+    height: 25px;
+    background-repeat: no-repeat;
+    width: 123px;
+    margin: 3px 10px 5px;
+    text-indent: -99999px;
+}
+
+.navbar-pf .navbar-utility {
+	right: 20px;
+    top: -34px !important;
+    font-size: 12px;
+}
+
+.navbar-pf .navbar-utility > li > a {
+    color: #fff !important;
+    padding-bottom: 12px;
+    padding-top: 11px;
+    border-left: medium none;
+}
+
+.container {
+    height: 100%;
+}
+
+.content-area {
+    background-color: #fff;
+    border-color: #CECECE;
+    border-style: solid;
+    border-width: 0 1px;
+    height: 100%;
+    padding: 0 30px;
+}
+
+.margin-bottom {
+    margin-bottom: 10px;
+}
+
+/* Sidebar */
+
+.bs-sidebar {
+    background-color: #f9f9f9;
+    padding-top: 44px;
+    padding-right: 0;
+    padding-left: 0;
+    z-index: 20;
+}
+.bs-sidebar ul {
+    list-style: none;
+    padding-left: 12px;
+}
+
+.bs-sidebar ul li {
+    margin-bottom: 0.5em;
+    margin-left: -1em;
+}
+.bs-sidebar ul li a {
+    font-size: 14px;
+    padding-left: 25px;
+    color: #4d5258;
+    line-height: 28px;
+    display: block;
+    border-width: 1px 0 1px 1px;
+    border-style: solid;
+    border-color: #f9f9f9;
+}
+.bs-sidebar ul li a:hover,
+.bs-sidebar ul li a:focus {
+    text-decoration: none;
+    color: #777777;
+    border-right: 2px solid #aaa;
+}
+.bs-sidebar ul li.active a {
+    background-color: #c7e5f0;
+    border-color: #56bae0;
+    font-weight: bold;
+    background-image: url(../img/icon-sidebar-active.png);
+    background-repeat: no-repeat;
+    background-position: right center;
+}
+
+.bs-sidebar ul li.active a:hover {
+	border-right: none;
+}
+
+
+.content-area h2 {
+    font-family: "Open Sans", sans-serif;
+    font-weight: 100;
+    font-size: 24px;
+    margin-bottom: 25px;
+    margin-top: 25px;
+}
+
+.subtitle {
+    text-align: right;
+    margin-top: 30px;
+    color: #909090;
+}
+
+.required {
+    color: #CB2915;
+}
+
+
+.alert {
+    margin-top: 30px;
+    margin-bottom: 0;
+}
+
+.feedback-aligner .alert {
+    background-position: 1.27273em center;
+    background-repeat: no-repeat;
+    border-radius: 2px;
+    border-width: 1px;
+    color: #4D5258;
+    display: inline-block;
+    font-size: 1.1em;
+    line-height: 1.4em;
+    margin: 0;
+    padding: 0.909091em 3.63636em;
+    position: relative;
+    text-align: left;
+}
+.alert.alert-success {
+    background-color: #E4F1E1;
+    border-color: #4B9E39;
+}
+.alert.alert-error {
+    background-color: #F8E7E7;
+    border-color: #B91415;
+}
+.alert.alert-warning {
+    background-color: #FEF1E9;
+    border-color: #F17528;
+}
+.alert.alert-info {
+    background-color: #E4F3FA;
+    border-color: #5994B2;
+}
+
+.form-horizontal {
+    border-top: 1px solid #E9E8E8;
+    padding-top: 23px;
+}
+
+.form-horizontal .control-label {
+    color: #909090;
+    line-height: 1.4em;
+    padding-top: 5px;
+    position: relative;
+    text-align: right;
+    width: 100%;
+}
+
+.form-group {
+    position: relative;
+}
+
+.control-label + .required {
+    position: absolute;
+    right: -2px;
+    top: 0;
+}
+
+#kc-form-buttons {
+    text-align: right;
+    margin-top: 10px;
+}
+
+#kc-form-buttons .btn-primary {
+    float: right;
+    margin-left: 8px;
+}
+
+/* Authenticator page */
+
+ol {
+    padding-left: 40px;
+}
+
+ol li {
+    font-size: 13px;
+    margin-bottom: 10px;
+    position: relative;
+}
+
+ol li img {
+    margin-top: 15px;
+    margin-bottom: 5px;
+    border: 1px solid #eee;
+}
+
+hr + .form-horizontal {
+    border: none;
+    padding-top: 0;
+}
+
+.kc-dropdown{
+    position: relative;
+}
+.kc-dropdown > a{
+    display:block;
+    padding: 11px 10px 12px;
+    line-height: 12px;
+    font-size: 12px;
+    color: #fff !important;
+    text-decoration: none;
+}
+.kc-dropdown > a::after{
+    content: "\2c5";
+    margin-left: 4px;
+}
+.kc-dropdown:hover > a{
+    background-color: rgba(0,0,0,0.2);
+}
+.kc-dropdown ul li a{
+    padding: 1px 11px;
+    font-size: 12px;
+    color: #000 !important;
+    border: 1px solid #fff;
+    text-decoration: none;
+    display:block;
+    line-height: 20px;
+}
+.kc-dropdown ul li a:hover{
+    color: #4d5258;
+    background-color: #d4edfa;
+    border-color: #b3d3e7;
+}
+.kc-dropdown ul{
+    position: absolute;
+    z-index: 2000;
+    list-style:none;
+    display:none;
+    padding: 5px 0px;
+    margin: 0px;
+    background-color: #fff !important;
+    border: 1px solid #b6b6b6;
+    border-radius: 1px;
+    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+    background-clip: padding-box;
+    min-width: 100px;
+}
+.kc-dropdown:hover ul{
+    display:block;
+}
+
+
+#kc-totp-secret-key {
+    border: 1px solid #eee;
+    font-size: 16px;
+    padding: 10px;
+    margin: 50px 0;
+}