199 lines
11 KiB
HTML
199 lines
11 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
|
||
|
|
|
||
|
|
<title th:text="#{screen.consent.title}">Consent View</title>
|
||
|
|
<link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag" />
|
||
|
|
|
||
|
|
<link rel="stylesheet" th:href="@{#{webjars.bootstrap-selectmin.css}}">
|
||
|
|
<script th:src="@{#{webjars.bootstrap-selectmin.js}}"></script>
|
||
|
|
<script th:src="@{#{webjars.bootstrapmin.js}}"></script>
|
||
|
|
|
||
|
|
<link rel="stylesheet" th:href="@{#{webjars.datatables.bootstrapmin.css}}"/>
|
||
|
|
<script th:src="@{#{webjars.datatables.jquery.datatablesmin.js}}"></script>
|
||
|
|
<script th:src="@{#{webjars.datatables.datatables.bootstrapmin.js}}"></script>
|
||
|
|
|
||
|
|
<script th:inline="javascript">
|
||
|
|
/*<![CDATA[*/
|
||
|
|
var data = {
|
||
|
|
attributes: /*[[${attributes}]]*/
|
||
|
|
};
|
||
|
|
var strings = {
|
||
|
|
info: /*[[#{screen.consent.attributes.data.info}]]*/
|
||
|
|
};
|
||
|
|
/*]]>*/
|
||
|
|
</script>
|
||
|
|
<script type="text/javascript" th:inline="javascript">
|
||
|
|
|
||
|
|
function jqueryReady() {
|
||
|
|
head.load(
|
||
|
|
/*[[@{/js/consent.js}]]*/
|
||
|
|
);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<main role="main" class="container mt-3 mb-3">
|
||
|
|
<div layout:fragment="content">
|
||
|
|
|
||
|
|
<form method="post" id="fm1">
|
||
|
|
<div class="alert alert-info">
|
||
|
|
<h2 th:text="#{screen.consent.title}">Attribute Consent</h2>
|
||
|
|
|
||
|
|
<ul class="nav nav-tabs" id="consentTabs" role="tablist">
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link active" id="attributes-tab" data-toggle="tab" href="#attributesPanel"
|
||
|
|
role="tab" aria-controls="attributes" aria-selected="true"
|
||
|
|
th:text="#{screen.consent.attributes}">Attributes</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" id="options-tab" data-toggle="tab" href="#optionsPanel" role="tab"
|
||
|
|
aria-controls="options" aria-selected="false" th:text="#{screen.consent.options}">Options</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<div class="mb-4 tab-content" id="consentTabsContent">
|
||
|
|
<div class="tab-pane fade show active bg-white p-4" id="attributesPanel" role="tabpanel"
|
||
|
|
aria-labelledby="attributes-tab">
|
||
|
|
<p th:utext="#{screen.consent.attributes.header(${service.id})}">The following attributes will
|
||
|
|
be released to</p>
|
||
|
|
<table id="attributesTable" class="display table table-striped table-bordered">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th th:text="#{screen.consent.attributes.attribute}">Attribute</th>
|
||
|
|
<th th:text="#{screen.consent.attributes.values}">Value(s)</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="tab-pane fade bg-white p-4" id="optionsPanel" role="tabpanel"
|
||
|
|
aria-labelledby="options-tab">
|
||
|
|
<div class="card mb-4">
|
||
|
|
<div class="card-header bg-info text-white" th:text="#{screen.consent.options.header}">How
|
||
|
|
should I be prompted
|
||
|
|
for consent again?
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<div class="form-check">
|
||
|
|
<input class="form-check-input" type="radio" name="option" id="optionAlways"
|
||
|
|
value="0"
|
||
|
|
th:checked="${option == 0}"
|
||
|
|
onclick="optionSelected()"/>
|
||
|
|
<label class="form-check-label" for="optionAlways"
|
||
|
|
th:utext="#{screen.consent.options.always}">Always</label>
|
||
|
|
<span class="help-block"
|
||
|
|
th:text="#{screen.consent.options.desc.always(${service.id})}">help block</span>
|
||
|
|
</div>
|
||
|
|
<div class="form-check">
|
||
|
|
<input class="form-check-input" type="radio" name="option" id="optionAttributeName"
|
||
|
|
value="1"
|
||
|
|
th:checked="${option == 1}"
|
||
|
|
onclick="optionSelected()"/>
|
||
|
|
<label class="form-check-label" for="optionAttributeName"
|
||
|
|
th:utext="#{screen.consent.options.attributename}">Attribute Name</label>
|
||
|
|
<span class="help-block"
|
||
|
|
th:text="#{screen.consent.options.desc.attributename(${service.id})}">help block</span>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="form-check">
|
||
|
|
<input class="form-check-input" type="radio" name="option" value="2"
|
||
|
|
th:checked="${option == 2}"
|
||
|
|
onclick="optionSelected()" />
|
||
|
|
<label class="form-check-label" th:utext="#{screen.consent.options.attributevalue}">Attribute
|
||
|
|
Value</label>
|
||
|
|
<span class="help-block" th:utext="#{screen.consent.options.desc.attributevalue.intro} +
|
||
|
|
'<ul><li>' +
|
||
|
|
#{screen.consent.options.desc.attributevalue.first(${service.id})} +
|
||
|
|
'</li><li>' +
|
||
|
|
#{screen.consent.options.desc.attributevalue.second(${service.id})} +
|
||
|
|
'</li><li>' +
|
||
|
|
#{screen.consent.options.desc.attributevalue.third(${service.id})} +
|
||
|
|
'</li><ul>'"/>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="reminderPanel" class="card">
|
||
|
|
<div class="card-header bg-info text-white"
|
||
|
|
th:text="#{screen.consent.options.reminder.header}">How often should I be reminded to
|
||
|
|
consent again?
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<p th:text="#{screen.consent.options.reminder.expl(${service.id})}">Show the consent
|
||
|
|
screen, as a
|
||
|
|
reminder, in the event that there is no change to the collection of attributes
|
||
|
|
released to
|
||
|
|
{0}.</p>
|
||
|
|
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
<input name="reminder" id="reminder" class="form-control" type="number"
|
||
|
|
th:value="${reminder}">
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<select name="reminderTimeUnit" id="reminderTimeUnit" class="form-control">
|
||
|
|
<option value="seconds"
|
||
|
|
th:selected="${#strings.toLowerCase(reminderTimeUnit) == 'seconds'}"
|
||
|
|
th:text="#{screen.consent.options.timeunit.seconds}">Seconds
|
||
|
|
</option>
|
||
|
|
<option value="minutes"
|
||
|
|
th:selected="${#strings.toLowerCase(reminderTimeUnit) == 'minutes'}"
|
||
|
|
th:text="#{screen.consent.options.timeunit.minutes}">Minutes
|
||
|
|
</option>
|
||
|
|
<option value="hours"
|
||
|
|
th:selected="${#strings.toLowerCase(reminderTimeUnit) == 'hours'}"
|
||
|
|
th:text="#{screen.consent.options.timeunit.hours}">Hours
|
||
|
|
</option>
|
||
|
|
<option value="days"
|
||
|
|
th:selected="${#strings.toLowerCase(reminderTimeUnit) == 'days'}"
|
||
|
|
th:text="#{screen.consent.options.timeunit.days}">Days
|
||
|
|
</option>
|
||
|
|
<option value="weeks"
|
||
|
|
th:selected="${#strings.toLowerCase(reminderTimeUnit) == 'weeks'}"
|
||
|
|
th:text="#{screen.consent.options.timeunit.weeks}">Weeks
|
||
|
|
</option>
|
||
|
|
<option value="months"
|
||
|
|
th:selected="${#strings.toLowerCase(reminderTimeUnit) == 'months'}"
|
||
|
|
th:text="#{screen.consent.options.timeunit.months}">Months
|
||
|
|
</option>
|
||
|
|
<option value="years"
|
||
|
|
th:selected="${#strings.toLowerCase(reminderTimeUnit) == 'years'}"
|
||
|
|
th:text="#{screen.consent.options.timeunit.years}">Years
|
||
|
|
</option>
|
||
|
|
</select>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div> <!-- end Options Panel -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="text-center form-group">
|
||
|
|
<input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
|
||
|
|
<input type="hidden" name="_eventId" value="confirm"/>
|
||
|
|
<input class="btn btn-submit"
|
||
|
|
name="confirm"
|
||
|
|
accesskey="l"
|
||
|
|
th:value="#{screen.consent.confirm}"
|
||
|
|
value="Confirm"
|
||
|
|
type="submit"/>
|
||
|
|
<a class="btn btn-default" id="cancel" name="cancel"
|
||
|
|
th:href="@{/login}" th:text="#{screen.consent.cancel}">Cancel</a>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
</body>
|
||
|
|
</html>
|