twofa.xhtml 12.7 KB
Newer Older
michael.simon's avatar
michael.simon committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:bw="http://www.scc.kit.edu/bwfacelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:of="http://omnifaces.org/functions">
<head>
<title></title>
</head>
<body>

<f:view>
<f:metadata>
18
	<f:viewParam name="retsid" value="#{twoFaUserBean.returnServiceId}"/>
michael.simon's avatar
michael.simon committed
19
20
21
22
23
24
25
26
	<f:event type="javax.faces.event.PreRenderViewEvent"
           listener="#{twoFaUserBean.preRenderView}" />
</f:metadata>

<ui:composition template="/template/default.xhtml">
	<ui:param name="title" value="#{messages.title}"/>

	<ui:define name="content">
michael.simon's avatar
michael.simon committed
27
	<h:form id="form" class="full fancy form">
28
			<div><p:messages showDetail="true" /></div>
ls1947's avatar
ls1947 committed
29

michael.simon's avatar
michael.simon committed
30
31
		<p:outputPanel rendered="#{twoFaUserBean.reallyReadOnly}">
			<h3>#{messages.twofa_list}</h3>
32
			<div><h:outputText value="#{messages.twofa_list_really_readonly}"/></div>
michael.simon's avatar
michael.simon committed
33
34
			<div class="full text"><a href="#{twoFaUserBean.managementUrl}" target="_blank">#{twoFaUserBean.managementUrl}</a></div>
		</p:outputPanel>
35
		
michael.simon's avatar
michael.simon committed
36
37
		<p:outputPanel rendered="#{twoFaUserBean.readOnly and not twoFaUserBean.reallyReadOnly}">
			<h3>#{messages.twofa_list}</h3>
ls1947's avatar
ls1947 committed
38
39
			
			<div><h:outputText value="#{messages.twofa_list_readonly}"/></div>
michael.simon's avatar
michael.simon committed
40
			<div class="full text"><a href="#{twoFaUserBean.managementUrl}" target="_blank">#{twoFaUserBean.managementUrl}</a></div>
ls1947's avatar
ls1947 committed
41
			
ls1947's avatar
ls1947 committed
42
43
44
45
46
47
48
49
50
51
52
53
			<p:dataGrid var="token" value="#{twoFaUserBean.tokenList}" columns="2" styleClass="whitefoot"
					layout="grid" style="margin-bottom: 16px; opacity: 0.5;">
		        <p:panel styleClass="grayback" style="margin-bottom: 0px;">
		        	<f:facet name="header">
		        		<i class="fa fa-fw fa-key"></i>
						<b><h:outputText value="#{token.serial}" /></b>
					</f:facet>
					<p:panelGrid columns="2">
						<p:outputPanel>
							<h:graphicImage width="60px" value="#{resource['img/smartphone.svg']}" alt="Smartphone" rendered="#{token.tokenType == 'TOTP' and token.serial.startsWith('TOTP')}"/>
							<h:graphicImage width="60px" value="#{resource['img/kittoken_small.png']}" alt="Hardware Token" rendered="#{token.tokenType == 'TOTP' and not token.serial.startsWith('TOTP')}"/>
							<h:graphicImage width="60px" value="#{resource['img/yubikey_small.png']}" alt="Yubikey" rendered="#{token.tokenType == 'yubico'}"/>
54
							<h:graphicImage width="60px" value="#{resource['img/tanlist.svg']}" alt="Backup TAN List" rendered="#{token.tokenType == 'HMAC'}"/>
ls1947's avatar
ls1947 committed
55
56
57
58
59
60
61
62
						</p:outputPanel>
						<p:outputPanel>
							<h:panelGrid columns="2">
								<p:outputLabel for="@next" value="#{messages.twofa_tokentype}:" />
								<h:panelGroup>
									<h:outputText value="#{messages.twofa_tokentype_tanlist}" rendered="#{token.tokenType == 'HMAC' and token.serial.startsWith('OATH')}"/>
									<h:outputText value="#{messages.twofa_tokentype_totp}" rendered="#{token.tokenType == 'TOTP' and token.serial.startsWith('TOTP')}"/>
									<h:outputText value="#{messages.twofa_tokentype_totp_hardware}" rendered="#{token.tokenType == 'TOTP' and not token.serial.startsWith('TOTP')}"/>
63
									<h:outputText value="#{messages.twofa_tokentype_tanlist}" rendered="#{token.tokenType == 'HMAC'}"/>
ls1947's avatar
ls1947 committed
64
65
66
67
68
69
70
71
72
73
74
75
76
77
									<h:outputText value="#{messages.twofa_tokentype_yubikey}" rendered="#{token.tokenType == 'yubico'}"/>
								</h:panelGroup>
								
								<p:outputLabel for="@next" value="#{messages.twofa_active}:" />
								<h:outputText value="#{token.isactive ? messages.yes : messages.no}" />
							</h:panelGrid>

							<p:panel style="margin: 8px;" rendered="#{! token.isactive and (token.tokenDesc.contains('INIT'))}">
								<h:outputText value="#{messages.twofa_token_not_init}" style="color:red;"/>
							</p:panel>
							</p:outputPanel>
					</p:panelGrid>
				</p:panel>
			</p:dataGrid>
michael.simon's avatar
michael.simon committed
78
		</p:outputPanel>
ls1947's avatar
ls1947 committed
79

ls1947's avatar
ls1947 committed
80
		<p:dataGrid var="token" value="#{twoFaUserBean.tokenList}" columns="2" styleClass="whitefoot"
ls1947's avatar
ls1947 committed
81
82
83
84
				layout="grid" style="margin-bottom: 16px;" rendered="#{! twoFaUserBean.readOnly}">
	        <f:facet name="header">#{messages.twofa_list}</f:facet>
	        <p:panel styleClass="grayback" style="margin-bottom: 0px;">
	        	<f:facet name="header">
85
86
	        		<i class="fa fa-fw fa-key"></i>
					<b><h:outputText value="#{token.serial}" /></b>
ls1947's avatar
ls1947 committed
87
				</f:facet>
ls1947's avatar
ls1947 committed
88
89
90
91
92
				<p:panelGrid columns="2">
					<p:outputPanel>
						<h:graphicImage width="60px" value="#{resource['img/smartphone.svg']}" alt="Smartphone" rendered="#{token.tokenType == 'TOTP' and token.serial.startsWith('TOTP')}"/>
						<h:graphicImage width="60px" value="#{resource['img/kittoken_small.png']}" alt="Hardware Token" rendered="#{token.tokenType == 'TOTP' and not token.serial.startsWith('TOTP')}"/>
						<h:graphicImage width="60px" value="#{resource['img/yubikey_small.png']}" alt="Yubikey" rendered="#{token.tokenType == 'yubico'}"/>
93
						<h:graphicImage width="60px" value="#{resource['img/tanlist.svg']}" alt="Backup TAN List" rendered="#{token.tokenType == 'HMAC'}"/>
ls1947's avatar
ls1947 committed
94
95
					</p:outputPanel>
					<p:outputPanel>
ls1947's avatar
ls1947 committed
96
						<h:panelGrid columns="2" style="margin-bottom: 16px;">
97
98
99
100
							<p:outputLabel for="@next" value="#{messages.twofa_tokentype}:" />
							<h:panelGroup>
								<h:outputText value="#{messages.twofa_tokentype_totp}" rendered="#{token.tokenType == 'TOTP' and token.serial.startsWith('TOTP')}"/>
								<h:outputText value="#{messages.twofa_tokentype_totp_hardware}" rendered="#{token.tokenType == 'TOTP' and not token.serial.startsWith('TOTP')}"/>
ls1947's avatar
ls1947 committed
101
								<h:outputText value="#{messages.twofa_tokentype_tanlist}" rendered="#{token.tokenType == 'HMAC'}"/>
102
103
104
105
106
107
								<h:outputText value="#{messages.twofa_tokentype_yubikey}" rendered="#{token.tokenType == 'yubico'}"/>
							</h:panelGroup>
		
							<p:outputLabel for="@next" value="#{messages.twofa_active}:" />
							<h:outputText value="#{token.isactive ? messages.yes : messages.no}" />
						</h:panelGrid>
ls1947's avatar
ls1947 committed
108
109
						<p:panel style="margin: 8px;" rendered="#{! token.isactive and (token.tokenDesc.contains('INIT'))}">
							<h:outputText value="#{messages.twofa_token_not_init}" style="color:red;" />
110
111
112
						</p:panel>
						<p:commandButton action="#{twoFaUserBean.disableToken(token.serial)}" value="#{messages.disable}" 
							update="@form" rendered="#{token.isactive}"/>
ls1947's avatar
ls1947 committed
113
						<p:commandButton action="#{twoFaUserBean.enableToken(token.serial)}" value="#{messages.enable}" 
114
115
							update="@form" rendered="#{! token.isactive and (! token.tokenDesc.contains('INIT'))}"/>
						<p:commandButton action="#{twoFaUserBean.deleteToken(token.serial)}" value="#{messages.delete}" 
116
							update="@form" rendered="#{! token.isactive and (token.tokenDesc.contains('DELABLE'))}" style="color:red;">
117
118
							<p:confirm header="#{messages.confirm_header}" message="#{messages.confirm}" />
						</p:commandButton>
ls1947's avatar
ls1947 committed
119
						<p:commandButton action="#{twoFaUserBean.getBackupTanList(token.serial)}" value="#{messages.token_get_tanlist_values}" 
120
121
							update="@form" rendered="#{token.isactive and token.tokenType == 'HMAC'}"
							oncomplete="PF('showBackupTanDlg').show();"/>
ls1947's avatar
ls1947 committed
122
					</p:outputPanel>
ls1947's avatar
ls1947 committed
123
				</p:panelGrid>
ls1947's avatar
ls1947 committed
124
125
			</p:panel>
		</p:dataGrid>
ls1947's avatar
ls1947 committed
126

127
		<p:panel rendered="#{(! twoFaUserBean.readOnly) and (twoFaUserBean.tokenList.size() lt 7)}">
128
			<div style="margin-bottom: 16px;">
ls1947's avatar
ls1947 committed
129
130
				<h:outputText value="#{messages.twofa_create_new_token}" />
			</div>
131
132
133
			<p:outputPanel style="margin-bottom: 16px;">
				<p:commandButton id="openAddTotpDialog" oncomplete="PF('addTotpDlg').show();" value="#{messages.twofa_create_new_totp}"></p:commandButton>
				<p:commandButton id="openAddYubicoDialog" oncomplete="PF('addYubicoDlg').show();" value="#{messages.twofa_create_new_yubico}"></p:commandButton>
ls1947's avatar
ls1947 committed
134
				<p:commandButton id="openAddBackupTanDialog" oncomplete="PF('addBackupTanDlg').show();" value="#{messages.twofa_create_backup_tan_list}"></p:commandButton>
135
136
137
138
139
140
			</p:outputPanel>
			<p:outputPanel rendered="#{not empty twoFaUserBean.returnServiceId}">
				<p:link href="../user/register-service.xhtml" value="#{messages.twofa_back_to_register}">
					<f:param name="serviceId" value="#{twoFaUserBean.returnServiceId}"/>
				</p:link>
			</p:outputPanel>
michael.simon's avatar
michael.simon committed
141
		</p:panel>
142

michael.simon's avatar
michael.simon committed
143
		<p:dialog header="#{messages.twofa_tokentype_tanlist}" width="240"
144
145
					widgetVar="showBackupTanDlg" id="showBackupTanId" modal="true" closable="true" closeOnEscape="true"
					showEffect="fade" hideEffect="fade">
michael.simon's avatar
michael.simon committed
146
147
148
149
150
151
152
153
154
155
156
157
158
159
			<div style="margin-bottom: 8px;">
				<h:outputText value="#{messages.twofa_backup_tan_list_values}" />
			</div>
			<ul style="margin-bottom: 16px;">
				<ui:repeat var="key" value="#{twoFaUserBean.backupTanList.result.value.otp.keySet()}">
					<li style="margin-bottom: 4px;">
						<b><h:outputText value="#{key}" /></b> -  
						<h:outputText value="#{twoFaUserBean.backupTanList.result.value.otp.get(key)}" />
					</li>
				</ui:repeat>
			</ul>
			<p:commandButton value="Print" type="button" style="margin-bottom: 16px">
    			<p:printer target="showBackupTanId" />
			</p:commandButton>
160
161
		</p:dialog>
			
ls1947's avatar
ls1947 committed
162
		<p:dialog header="#{messages.twofa_create_totp_token}" 
ls1947's avatar
ls1947 committed
163
					widgetVar="addTotpDlg" id="addTotpDlgId" modal="true" closable="true" closeOnEscape="true"
ls1947's avatar
ls1947 committed
164
165
166
					showEffect="fade" hideEffect="fade">
			<p:ajax event="close" update="@form" />

167
			<div class="panel" style="width:520px;">
ls1947's avatar
ls1947 committed
168
			    <h:outputText value="#{messages.twofa_create_totp_token_desc}" escape="false" />
ls1947's avatar
ls1947 committed
169
170
		    </div>

171
			<p:panel id="totpResponsePanel" style="height: 260px;">
ls1947's avatar
ls1947 committed
172
			    <p:commandButton id="totpStartButton" action="#{twoFaUserBean.createAuthenticatorToken()}" value="#{messages.start}"
ls1947's avatar
ls1947 committed
173
		    		update="totpResponsePanel" oncomplete="PF('addTotpDlg').initPosition()" rendered="#{empty twoFaUserBean.createTokenResponse}"/>
ls1947's avatar
ls1947 committed
174
175
				<h:panelGroup rendered="#{not empty twoFaUserBean.createTokenResponse}">
					<h:panelGrid columns="2">
176
177
178
179
180
181
182
183
184
						<p:outputPanel>
							<h:outputText value="#{twoFaUserBean.createTokenResponse.detail.googleurl.img}" escape="false" />
						</p:outputPanel>
						<p:outputPanel>
							<h:panelGrid columns="2">
								<p:outputLabel for="@next" value="#{messages.twofa_serial}:" />
								<h:outputText value="#{twoFaUserBean.createTokenResponse.detail.serial}"/>
								
								<p:outputLabel for="@next" value="#{messages.twofa_code}:" />
ls1947's avatar
ls1947 committed
185
								<p:inputText id="totpText" autocomplete="false" value="#{twoFaUserBean.totpCode}"/>
186
187
188
189
190
							</h:panelGrid>
							<p:commandButton id="checkTotpButton" action="#{twoFaUserBean.checkAuthenticatorToken()}" value="#{messages.check}"
								update="totpResponsePanel" />
							</p:outputPanel>
						</h:panelGrid>
ls1947's avatar
ls1947 committed
191
192
193
194
195
				</h:panelGroup>
			</p:panel>
		</p:dialog>

		<p:dialog header="#{messages.twofa_create_yubico_token}" 
ls1947's avatar
ls1947 committed
196
					widgetVar="addYubicoDlg" id="addYubicoDlgId" modal="true" closable="true" closeOnEscape="true"
ls1947's avatar
ls1947 committed
197
198
199
					showEffect="fade" hideEffect="fade">
			<p:ajax event="close" update="@form" />
			<div class="panel" style="width:360px;">
ls1947's avatar
ls1947 committed
200
			    <h:outputText value="#{messages.twofa_create_yubico_token_desc}" escape="false" />
ls1947's avatar
ls1947 committed
201
202
203
204
205
		    </div>
		
			<p:panel id="yubicoResponsePanel">
				<h:panelGrid columns="2">
					<p:outputLabel for="@next" value="#{messages.twofa_code}:" />
ls1947's avatar
ls1947 committed
206
					<p:inputText id="yubicoText" autocomplete="false" value="#{twoFaUserBean.yubicoCode}"/>
ls1947's avatar
ls1947 committed
207
208
209
210
211
212
213
				</h:panelGrid>
			    <p:commandButton id="yubicoStartButton" action="#{twoFaUserBean.createYubicoToken()}" value="#{messages.start}"
		    		update="yubicoResponsePanel"/>
			</p:panel>

		</p:dialog>
		
ls1947's avatar
ls1947 committed
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
		<p:dialog header="#{messages.twofa_create_backup_tan_list}" 
					widgetVar="addBackupTanDlg" id="addBackupTanDlgId" modal="true" closable="true" closeOnEscape="true"
					showEffect="fade" hideEffect="fade">
			<p:ajax event="close" update="@form" />
			<div class="panel" style="width:360px;">
			    <h:outputText value="#{messages.twofa_create_backup_tan_list_desc}" escape="false" />
		    </div>
		
			<p:panel id="backupTanResponsePanel">
			    <p:commandButton id="backupTanStartButton" action="#{twoFaUserBean.createBackupTanList()}" value="#{messages.start}"
		    		update="backupTanResponsePanel"/>
			</p:panel>

		</p:dialog>
		
ls1947's avatar
ls1947 committed
229
		<p:dialog header="#{messages.twofa_create_backuptan_token}" 
ls1947's avatar
ls1947 committed
230
					widgetVar="addBackuptanDlg" id="addBackuptanDlgId" modal="true" closable="true" closeOnEscape="true"
ls1947's avatar
ls1947 committed
231
232
233
234
235
236
237
238
239
240
241
242
					showEffect="fade" hideEffect="fade">
					
		</p:dialog>

	    <p:confirmDialog global="true" showEffect="fade" hideEffect="fade" closable="false" closeOnEscape="true">
	        <p:commandButton value="#{messages.yes}" type="button" styleClass="ui-confirmdialog-yes" />
	        <p:commandButton value="#{messages.no}" type="button" styleClass="ui-confirmdialog-no" />
	    </p:confirmDialog>    

		<p:defaultCommand target="yubicoStartButton" scope="addYubicoDlgId"/>		
		<p:defaultCommand target="checkTotpButton" scope="addTotpDlgId"/>		

michael.simon's avatar
michael.simon committed
243
244
245
246
247
248
249
	</h:form>
	</ui:define>

</ui:composition>
</f:view>
</body>
</html>