1<#import "template.ftl" as layout>
2<@layout.mainLayout active='authorization' bodyClass='authorization'; section>
3
4    <style>
5        .search-box,.close-icon,.search-wrapper {
6            position: relative;
7        }
8        .search-wrapper {
9            width: 500px;
10            margin: auto;
11            margin-top: 50px;
12        }
13        .search-box {
14            font-weight: 600;
15            color: white;
16            border: 1px solid #006e9c;
17            outline: 0;
18            border-radius: 15px;
19            background-color: #0085cf;
20            padding: 2px 5px;
21
22        }
23        .search-box:focus {
24            box-shadow: 0 0 15px 5px #b0e0ee;
25            border: 2px solid #bebede;
26        }
27        .close-icon {
28            border:1px solid transparent;
29            background-color: transparent;
30            display: inline-block;
31            float: right;
32          outline: 0;
33          cursor: pointer;
34        }
35        .close-icon:after {
36            display: block;
37            width: 15px;
38            height: 15px;
39            background-color: #FA9595;
40            z-index:1;
41            right: 35px;
42            top: 0;
43            bottom: 0;
44            margin: auto;
45            padding: 2px;
46            border-radius: 50%;
47            text-align: center;
48            color: white;
49            font-weight: normal;
50            font-size: 12px;
51            box-shadow: 0 0 2px #E50F0F;
52            cursor: pointer;
53        }
54        .search-box:not(:valid) ~ .close-icon {
55            display: none;
56        }
57    </style>
58    <script>
59        function removeScopeElm(elm) {
60            elm.parentNode.removeChild(elm);
61        }
62
63        function removeAllScopes(id) {
64            var scopesElm = document.getElementsByName('removeScope-' + id);
65
66            for (i = 0; i < scopesElm.length; i++) {
67                var td = scopesElm[i].parentNode.parentNode;
68                var tr = td.parentNode;
69                var tbody = tr.parentNode;
70                tbody.removeChild(tr);
71            }
72        }
73
74        function getChildren(parent, childId) {
75            var childNodes = [];
76
77            for (i = 0; i < parent.childNodes.length; i++) {
78                if (parent.childNodes[i].id == childId) {
79                    childNodes.push(parent.childNodes[i]);
80                }
81            }
82
83            return childNodes;
84        }
85    </script>
86
87    <div class="row">
88        <div class="col-md-10">
89            <h2>
90                <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>
91            </h2>
92        </div>
93    </div>
94
95    <#if authorization.resource.iconUri??>
96        <img src="${authorization.resource.iconUri}">
97        <br/>
98    </#if>
99
100    <div class="row">
101        <div class="col-md-10">
102            <h3>
103                ${msg("peopleAccessResource")}
104            </h3>
105        </div>
106    </div>
107    <div class="row">
108        <div class="col-md-12">
109                <table class="table table-striped table-bordered">
110                    <thead>
111                        <tr>
112                            <th>${msg("user")}</th>
113                            <th>${msg("permission")}</th>
114                            <th>${msg("date")}</th>
115                            <th>${msg("action")}</th>
116                        </tr>
117                    </thead>
118                    <tbody>
119                        <#if authorization.resource.shares?size != 0>
120                            <#list authorization.resource.shares as permission>
121                                <form action="${url.getResourceGrant(authorization.resource.id)}" name="revokeForm-${authorization.resource.id}-${permission.requester.username}" method="post">
122                                    <input type="hidden" name="action" value="revoke">
123                                    <input type="hidden" name="requester" value="${permission.requester.username}">
124                                    <input type="hidden" id="stateChecker" name="stateChecker" value="${stateChecker}">
125                                    <tr>
126                                        <td>
127                                            <#if permission.requester.email??>${permission.requester.email}<#else>${permission.requester.username}</#if>
128                                        </td>
129                                        <td>
130                                            <#if permission.scopes?size != 0>
131                                                <#list permission.scopes as scope>
132                                                    <#if scope.granted && scope.scope??>
133                                                        <div class="search-box">
134                                                            <#if scope.scope.displayName??>
135                                                                ${scope.scope.displayName}
136                                                            <#else>
137                                                                ${scope.scope.name}
138                                                            </#if>
139                                                            <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>
140                                                            <input type="hidden" name="permission_id" value="${scope.id}"/>
141                                                        </div>
142                                                    <#else>
143                                                        ${msg("anyPermission")}
144                                                    </#if>
145                                                </#list>
146                                            <#else>
147                                                Any action
148                                            </#if>
149                                        </td>
150                                        <td>
151                                            ${permission.createdDate?datetime}
152                                        </td>
153                                        <td width="20%" align="middle" style="vertical-align: middle">
154                                            <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>
155                                        </td>
156                                    </tr>
157                                </form>
158                            </#list>
159                        <#else>
160                            <tr>
161                                <td colspan="4">${msg("resourceIsNotBeingShared")}</td>
162                            </tr>
163                        </#if>
164                    </tbody>
165                </table>
166            </form>
167        </div>
168    </div>
169    <div class="row">
170        <div class="col-md-10">
171            <h3>
172                ${msg("resourceManagedPolicies")}
173            </h3>
174        </div>
175    </div>
176    <div class="row">
177        <div class="col-md-12">
178                <table class="table table-striped table-bordered">
179                    <thead>
180                        <tr>
181                            <th>${msg("description")}</th>
182                            <th>${msg("permission")}</th>
183                            <th>${msg("action")}</th>
184                        </tr>
185                    </thead>
186                    <tbody>
187                        <#if authorization.resource.policies?size != 0>
188                            <#list authorization.resource.policies as permission>
189                                <form action="${url.getResourceGrant(authorization.resource.id)}" name="revokePolicyForm-${authorization.resource.id}-${permission.id}" method="post">
190                                    <input type="hidden" name="action" value="revokePolicy">
191                                    <input type="hidden" name="permission_id" value="${permission.id}"/>
192                                    <input type="hidden" id="stateChecker" name="stateChecker" value="${stateChecker}">
193                                    <tr>
194                                        <td>
195                                            <#if permission.description??>
196                                                ${permission.description}
197                                            </#if>
198                                        </td>
199                                        <td>
200                                            <#if permission.scopes?size != 0>
201                                                <#list permission.scopes as scope>
202                                                    <div class="search-box">
203                                                        <#if scope.displayName??>
204                                                            ${scope.displayName}
205                                                        <#else>
206                                                            ${scope.name}
207                                                        </#if>
208                                                        <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>
209                                                        <input type="hidden" name="permission_id" value="${permission.id}:${scope.id}"/>
210                                                    </div>
211                                                </#list>
212                                            <#else>
213                                                ${msg("anyAction")}
214                                            </#if>
215                                        </td>
216                                        <td width="20%" align="middle" style="vertical-align: middle">
217                                            <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>
218                                        </td>
219                                    </tr>
220                                </form>
221                            </#list>
222                        <#else>
223                            <tr>
224                                <td colspan="3">
225                                    ${msg("resourceNoPermissionsGrantingAccess")}
226                                </td>
227                            </tr>
228                        </#if>
229                    </tbody>
230                </table>
231            </form>
232        </div>
233    </div>
234    <div class="row">
235        <div class="col-md-10">
236            <h3>
237                ${msg("shareWithOthers")}
238            </h3>
239        </div>
240    </div>
241    <div class="row">
242        <div class="col-md-10">
243            <form action="${url.getResourceShare(authorization.resource.id)}" name="shareForm" method="post">
244                <input type="hidden" id="stateChecker" name="stateChecker" value="${stateChecker}">
245                <div class="col-sm-3 col-md-3">
246                    <label for="password" class="control-label">${msg("username")} or ${msg("email")} </label> <span class="required">*</span>
247                </div>
248                <div class="col-sm-8 col-md-8">
249                    <div class="row">
250                        <div class="col-md-12">
251                            <input type="text" class="form-control" id="user_id" name="user_id" autofocus autocomplete="off">
252                        </div>
253                        <div class="col-md-12">
254                            <br/>
255                            <#list authorization.resource.scopes as scope>
256                                <div id="scope" class="search-box">
257                                    <#if scope.displayName??>
258                                        ${scope.displayName}
259                                    <#else>
260                                        ${scope.name}
261                                    </#if>
262                                    <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>
263                                    <input type="hidden" name="scope_id" value="${scope.id}"/>
264                                </div>
265                            </#list>
266                        </div>
267                        <div class="col-md-12">
268                            <br/>
269                            <a href="#" onclick="document.forms['shareForm'].submit()" type="submit" id="share-button" class="btn btn-primary">${msg("share")}</a>
270                        </div>
271                    </div>
272                </div>
273            </form>
274        </div>
275    </div>
276    <br/>
277</@layout.mainLayout>
278