casConsentView.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  1. <!DOCTYPE html>
  2. <html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
  3. <head>
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  5. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
  6. <title th:text="#{screen.consent.title}">Consent View</title>
  7. <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag" />
  8. <link rel="stylesheet" th:href="@{#{webjars.bootstrap-selectmin.css}}">
  9. <script th:src="@{#{webjars.bootstrap-selectmin.js}}"></script>
  10. <script th:src="@{#{webjars.bootstrapmin.js}}"></script>
  11. <link rel="stylesheet" th:href="@{#{webjars.datatables.bootstrapmin.css}}"/>
  12. <script th:src="@{#{webjars.datatables.jquery.datatablesmin.js}}"></script>
  13. <script th:src="@{#{webjars.datatables.datatables.bootstrapmin.js}}"></script>
  14. <script th:inline="javascript">
  15. /*<![CDATA[*/
  16. var data = {
  17. attributes: /*[[${attributes}]]*/
  18. };
  19. var strings = {
  20. info: /*[[#{screen.consent.attributes.data.info}]]*/
  21. };
  22. /*]]>*/
  23. </script>
  24. <script type="text/javascript" th:inline="javascript">
  25. function jqueryReady() {
  26. head.load(
  27. /*[[@{/js/consent.js}]]*/
  28. );
  29. }
  30. </script>
  31. </head>
  32. <body>
  33. <main role="main" class="container mt-3 mb-3">
  34. <div layout:fragment="content">
  35. <form method="post" id="fm1">
  36. <div class="alert alert-info">
  37. <h2 th:text="#{screen.consent.title}">Attribute Consent</h2>
  38. <ul class="nav nav-tabs" id="consentTabs" role="tablist">
  39. <li class="nav-item">
  40. <a class="nav-link active" id="attributes-tab" data-toggle="tab" href="#attributesPanel"
  41. role="tab" aria-controls="attributes" aria-selected="true"
  42. th:text="#{screen.consent.attributes}">Attributes</a>
  43. </li>
  44. <li class="nav-item">
  45. <a class="nav-link" id="options-tab" data-toggle="tab" href="#optionsPanel" role="tab"
  46. aria-controls="options" aria-selected="false" th:text="#{screen.consent.options}">Options</a>
  47. </li>
  48. </ul>
  49. <div class="mb-4 tab-content" id="consentTabsContent">
  50. <div class="tab-pane fade show active bg-white p-4" id="attributesPanel" role="tabpanel"
  51. aria-labelledby="attributes-tab">
  52. <p th:utext="#{screen.consent.attributes.header(${service.id})}">The following attributes will
  53. be released to</p>
  54. <table id="attributesTable" class="display table table-striped table-bordered">
  55. <thead>
  56. <tr>
  57. <th th:text="#{screen.consent.attributes.attribute}">Attribute</th>
  58. <th th:text="#{screen.consent.attributes.values}">Value(s)</th>
  59. </tr>
  60. </thead>
  61. <tbody>
  62. </tbody>
  63. </table>
  64. </div>
  65. <div class="tab-pane fade bg-white p-4" id="optionsPanel" role="tabpanel"
  66. aria-labelledby="options-tab">
  67. <div class="card mb-4">
  68. <div class="card-header bg-info text-white" th:text="#{screen.consent.options.header}">How
  69. should I be prompted
  70. for consent again?
  71. </div>
  72. <div class="card-body">
  73. <div class="form-check">
  74. <input class="form-check-input" type="radio" name="option" id="optionAlways"
  75. value="0"
  76. th:checked="${option == 0}"
  77. onclick="optionSelected()"/>
  78. <label class="form-check-label" for="optionAlways"
  79. th:utext="#{screen.consent.options.always}">Always</label>
  80. <span class="help-block"
  81. th:text="#{screen.consent.options.desc.always(${service.id})}">help block</span>
  82. </div>
  83. <div class="form-check">
  84. <input class="form-check-input" type="radio" name="option" id="optionAttributeName"
  85. value="1"
  86. th:checked="${option == 1}"
  87. onclick="optionSelected()"/>
  88. <label class="form-check-label" for="optionAttributeName"
  89. th:utext="#{screen.consent.options.attributename}">Attribute Name</label>
  90. <span class="help-block"
  91. th:text="#{screen.consent.options.desc.attributename(${service.id})}">help block</span>
  92. </span>
  93. </div>
  94. <div class="form-check">
  95. <input class="form-check-input" type="radio" name="option" value="2"
  96. th:checked="${option == 2}"
  97. onclick="optionSelected()" />
  98. <label class="form-check-label" th:utext="#{screen.consent.options.attributevalue}">Attribute
  99. Value</label>
  100. <span class="help-block" th:utext="#{screen.consent.options.desc.attributevalue.intro} +
  101. '<ul><li>' +
  102. #{screen.consent.options.desc.attributevalue.first(${service.id})} +
  103. '</li><li>' +
  104. #{screen.consent.options.desc.attributevalue.second(${service.id})} +
  105. '</li><li>' +
  106. #{screen.consent.options.desc.attributevalue.third(${service.id})} +
  107. '</li><ul>'"/>
  108. </div>
  109. </div>
  110. </div>
  111. <div id="reminderPanel" class="card">
  112. <div class="card-header bg-info text-white"
  113. th:text="#{screen.consent.options.reminder.header}">How often should I be reminded to
  114. consent again?
  115. </div>
  116. <div class="card-body">
  117. <p th:text="#{screen.consent.options.reminder.expl(${service.id})}">Show the consent
  118. screen, as a
  119. reminder, in the event that there is no change to the collection of attributes
  120. released to
  121. {0}.</p>
  122. <table>
  123. <tr>
  124. <td>
  125. <input name="reminder" id="reminder" class="form-control" type="number"
  126. th:value="${reminder}">
  127. </td>
  128. <td>
  129. <select name="reminderTimeUnit" id="reminderTimeUnit" class="form-control">
  130. <option value="seconds"
  131. th:selected="${#strings.toLowerCase(reminderTimeUnit) == 'seconds'}"
  132. th:text="#{screen.consent.options.timeunit.seconds}">Seconds
  133. </option>
  134. <option value="minutes"
  135. th:selected="${#strings.toLowerCase(reminderTimeUnit) == 'minutes'}"
  136. th:text="#{screen.consent.options.timeunit.minutes}">Minutes
  137. </option>
  138. <option value="hours"
  139. th:selected="${#strings.toLowerCase(reminderTimeUnit) == 'hours'}"
  140. th:text="#{screen.consent.options.timeunit.hours}">Hours
  141. </option>
  142. <option value="days"
  143. th:selected="${#strings.toLowerCase(reminderTimeUnit) == 'days'}"
  144. th:text="#{screen.consent.options.timeunit.days}">Days
  145. </option>
  146. <option value="weeks"
  147. th:selected="${#strings.toLowerCase(reminderTimeUnit) == 'weeks'}"
  148. th:text="#{screen.consent.options.timeunit.weeks}">Weeks
  149. </option>
  150. <option value="months"
  151. th:selected="${#strings.toLowerCase(reminderTimeUnit) == 'months'}"
  152. th:text="#{screen.consent.options.timeunit.months}">Months
  153. </option>
  154. <option value="years"
  155. th:selected="${#strings.toLowerCase(reminderTimeUnit) == 'years'}"
  156. th:text="#{screen.consent.options.timeunit.years}">Years
  157. </option>
  158. </select>
  159. </td>
  160. </tr>
  161. </table>
  162. </div>
  163. </div>
  164. </div> <!-- end Options Panel -->
  165. </div>
  166. </div>
  167. <div class="text-center form-group">
  168. <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
  169. <input type="hidden" name="_eventId" value="confirm"/>
  170. <input class="btn btn-submit"
  171. name="confirm"
  172. accesskey="l"
  173. th:value="#{screen.consent.confirm}"
  174. value="Confirm"
  175. type="submit"/>
  176. <a class="btn btn-default" id="cancel" name="cancel"
  177. th:href="@{/login}" th:text="#{screen.consent.cancel}">Cancel</a>
  178. </div>
  179. </form>
  180. </div>
  181. </main>
  182. </body>
  183. </html>