4849 |
13 Jun 18 |
nicklas |
1 |
<%@ page |
4849 |
13 Jun 18 |
nicklas |
2 |
pageEncoding="UTF-8" |
4849 |
13 Jun 18 |
nicklas |
3 |
session="false" |
4849 |
13 Jun 18 |
nicklas |
4 |
import="net.sf.basedb.core.SessionControl" |
4854 |
15 Jun 18 |
nicklas |
5 |
import="net.sf.basedb.util.Values" |
4849 |
13 Jun 18 |
nicklas |
6 |
import="net.sf.basedb.clients.web.Base" |
4854 |
15 Jun 18 |
nicklas |
7 |
import="net.sf.basedb.clients.web.util.HTML" |
4849 |
13 Jun 18 |
nicklas |
8 |
import="net.sf.basedb.clients.web.extensions.ExtensionsControl" |
4849 |
13 Jun 18 |
nicklas |
9 |
%> |
4849 |
13 Jun 18 |
nicklas |
10 |
<%@ taglib prefix="base" uri="/WEB-INF/base.tld" %> |
4849 |
13 Jun 18 |
nicklas |
11 |
<% |
4849 |
13 Jun 18 |
nicklas |
12 |
final String home = ExtensionsControl.getHomeUrl("net.sf.basedb.otp.authentication-manager"); |
4849 |
13 Jun 18 |
nicklas |
13 |
SessionControl sc = Base.getExistingSessionControl(pageContext, false); |
4854 |
15 Jun 18 |
nicklas |
14 |
String username = Values.getStringOrNull(request.getParameter("username")); |
4849 |
13 Jun 18 |
nicklas |
15 |
%> |
4850 |
14 Jun 18 |
nicklas |
16 |
<base:page type="popup" title="Set-up OTP for your account"> |
4849 |
13 Jun 18 |
nicklas |
17 |
<base:head scripts="~setup-otp.js"> |
4849 |
13 Jun 18 |
nicklas |
18 |
<style> |
4849 |
13 Jun 18 |
nicklas |
19 |
#setup |
4849 |
13 Jun 18 |
nicklas |
20 |
{ |
4849 |
13 Jun 18 |
nicklas |
21 |
margin: auto; |
4850 |
14 Jun 18 |
nicklas |
22 |
margin-top: 8rem; |
4850 |
14 Jun 18 |
nicklas |
23 |
margin-top: 13vh; |
4857 |
18 Jun 18 |
nicklas |
24 |
width: 45em; |
4857 |
18 Jun 18 |
nicklas |
25 |
font-size: 1.15rem; |
4849 |
13 Jun 18 |
nicklas |
26 |
} |
4849 |
13 Jun 18 |
nicklas |
27 |
|
4849 |
13 Jun 18 |
nicklas |
28 |
#setup form |
4849 |
13 Jun 18 |
nicklas |
29 |
{ |
4849 |
13 Jun 18 |
nicklas |
30 |
border-width: 2px; |
4849 |
13 Jun 18 |
nicklas |
31 |
border-radius: 0.5rem 0.5rem; |
4849 |
13 Jun 18 |
nicklas |
32 |
} |
4849 |
13 Jun 18 |
nicklas |
33 |
|
4849 |
13 Jun 18 |
nicklas |
34 |
#setup table |
4849 |
13 Jun 18 |
nicklas |
35 |
{ |
4849 |
13 Jun 18 |
nicklas |
36 |
width: 100%; |
4849 |
13 Jun 18 |
nicklas |
37 |
} |
4849 |
13 Jun 18 |
nicklas |
38 |
|
4849 |
13 Jun 18 |
nicklas |
39 |
#setup td.instructions |
4849 |
13 Jun 18 |
nicklas |
40 |
{ |
4857 |
18 Jun 18 |
nicklas |
41 |
padding: 0.5rem 1rem; |
4849 |
13 Jun 18 |
nicklas |
42 |
border-bottom-width: 2px; |
4849 |
13 Jun 18 |
nicklas |
43 |
border-radius: 0.5rem 0.5rem 0 0; |
4849 |
13 Jun 18 |
nicklas |
44 |
} |
4849 |
13 Jun 18 |
nicklas |
45 |
|
4849 |
13 Jun 18 |
nicklas |
46 |
#setup th, #setup td |
4849 |
13 Jun 18 |
nicklas |
47 |
{ |
4857 |
18 Jun 18 |
nicklas |
48 |
padding-left: 1rem; |
4849 |
13 Jun 18 |
nicklas |
49 |
text-align: left; |
4849 |
13 Jun 18 |
nicklas |
50 |
} |
4849 |
13 Jun 18 |
nicklas |
51 |
|
4849 |
13 Jun 18 |
nicklas |
52 |
#setup th |
4849 |
13 Jun 18 |
nicklas |
53 |
{ |
4849 |
13 Jun 18 |
nicklas |
54 |
width: 13em; |
4849 |
13 Jun 18 |
nicklas |
55 |
padding-right: 0; |
4849 |
13 Jun 18 |
nicklas |
56 |
} |
4849 |
13 Jun 18 |
nicklas |
57 |
|
4857 |
18 Jun 18 |
nicklas |
58 |
#username, #password, #newpw, #newpw2 |
4849 |
13 Jun 18 |
nicklas |
59 |
{ |
4849 |
13 Jun 18 |
nicklas |
60 |
width: 20rem; |
4849 |
13 Jun 18 |
nicklas |
61 |
} |
4849 |
13 Jun 18 |
nicklas |
62 |
|
4849 |
13 Jun 18 |
nicklas |
63 |
#otp |
4849 |
13 Jun 18 |
nicklas |
64 |
{ |
4849 |
13 Jun 18 |
nicklas |
65 |
width: 10rem; |
4849 |
13 Jun 18 |
nicklas |
66 |
} |
4849 |
13 Jun 18 |
nicklas |
67 |
|
4849 |
13 Jun 18 |
nicklas |
68 |
#message |
4849 |
13 Jun 18 |
nicklas |
69 |
{ |
4849 |
13 Jun 18 |
nicklas |
70 |
text-align: center; |
4849 |
13 Jun 18 |
nicklas |
71 |
font-style: italic; |
4849 |
13 Jun 18 |
nicklas |
72 |
margin-bottom: 1rem; |
4849 |
13 Jun 18 |
nicklas |
73 |
} |
4849 |
13 Jun 18 |
nicklas |
74 |
|
4850 |
14 Jun 18 |
nicklas |
75 |
ol |
4850 |
14 Jun 18 |
nicklas |
76 |
{ |
4850 |
14 Jun 18 |
nicklas |
77 |
margin: 0.5rem; |
4850 |
14 Jun 18 |
nicklas |
78 |
} |
4849 |
13 Jun 18 |
nicklas |
79 |
|
4849 |
13 Jun 18 |
nicklas |
80 |
label |
4849 |
13 Jun 18 |
nicklas |
81 |
{ |
4849 |
13 Jun 18 |
nicklas |
82 |
text-decoration: none; |
4849 |
13 Jun 18 |
nicklas |
83 |
color: inherit; |
4849 |
13 Jun 18 |
nicklas |
84 |
} |
4849 |
13 Jun 18 |
nicklas |
85 |
label:hover |
4849 |
13 Jun 18 |
nicklas |
86 |
{ |
4849 |
13 Jun 18 |
nicklas |
87 |
text-decoration: none; |
4849 |
13 Jun 18 |
nicklas |
88 |
} |
4850 |
14 Jun 18 |
nicklas |
89 |
|
4857 |
18 Jun 18 |
nicklas |
90 |
#setup td.qrcode |
4850 |
14 Jun 18 |
nicklas |
91 |
{ |
4857 |
18 Jun 18 |
nicklas |
92 |
padding: 0.5em; |
4857 |
18 Jun 18 |
nicklas |
93 |
text-align: right; |
4850 |
14 Jun 18 |
nicklas |
94 |
} |
4850 |
14 Jun 18 |
nicklas |
95 |
|
4857 |
18 Jun 18 |
nicklas |
96 |
|
4857 |
18 Jun 18 |
nicklas |
97 |
|
4850 |
14 Jun 18 |
nicklas |
98 |
#no-qrcode |
4850 |
14 Jun 18 |
nicklas |
99 |
{ |
4857 |
18 Jun 18 |
nicklas |
100 |
display: inline-block; |
4850 |
14 Jun 18 |
nicklas |
101 |
width: 137px; |
4850 |
14 Jun 18 |
nicklas |
102 |
height: 137px; |
4850 |
14 Jun 18 |
nicklas |
103 |
background-image: url('images/no-qrcode.png'); |
4850 |
14 Jun 18 |
nicklas |
104 |
padding: 35px 15px 10px 15px; |
4850 |
14 Jun 18 |
nicklas |
105 |
font-size: 85%; |
4850 |
14 Jun 18 |
nicklas |
106 |
text-align: center; |
4850 |
14 Jun 18 |
nicklas |
107 |
border-width: 1px; |
4850 |
14 Jun 18 |
nicklas |
108 |
border-style: dashed; |
4850 |
14 Jun 18 |
nicklas |
109 |
border-radius: 5px; |
4850 |
14 Jun 18 |
nicklas |
110 |
} |
4850 |
14 Jun 18 |
nicklas |
111 |
|
4850 |
14 Jun 18 |
nicklas |
112 |
#message .error |
4850 |
14 Jun 18 |
nicklas |
113 |
{ |
4850 |
14 Jun 18 |
nicklas |
114 |
padding: 0.5rem; |
4850 |
14 Jun 18 |
nicklas |
115 |
border-radius: 0.5rem; |
4851 |
14 Jun 18 |
nicklas |
116 |
border-width: 2px; |
4850 |
14 Jun 18 |
nicklas |
117 |
} |
4851 |
14 Jun 18 |
nicklas |
118 |
|
4851 |
14 Jun 18 |
nicklas |
119 |
#message .success |
4851 |
14 Jun 18 |
nicklas |
120 |
{ |
4851 |
14 Jun 18 |
nicklas |
121 |
padding: 2rem; |
4851 |
14 Jun 18 |
nicklas |
122 |
border-radius: 0.5rem; |
4851 |
14 Jun 18 |
nicklas |
123 |
border-width: 2px; |
4851 |
14 Jun 18 |
nicklas |
124 |
} |
4851 |
14 Jun 18 |
nicklas |
125 |
|
4849 |
13 Jun 18 |
nicklas |
126 |
</style> |
4849 |
13 Jun 18 |
nicklas |
127 |
</base:head> |
4849 |
13 Jun 18 |
nicklas |
128 |
<base:body> |
4849 |
13 Jun 18 |
nicklas |
129 |
|
4850 |
14 Jun 18 |
nicklas |
130 |
<h1>Set-up one-time password login for your account</h1> |
4849 |
13 Jun 18 |
nicklas |
131 |
<div id="setup" class="content"> |
4850 |
14 Jun 18 |
nicklas |
132 |
<div id="message">Welcome to the one-time password set-up wizard!</div> |
4849 |
13 Jun 18 |
nicklas |
133 |
|
4851 |
14 Jun 18 |
nicklas |
134 |
<form name="setup" id="setup-form"> |
4849 |
13 Jun 18 |
nicklas |
135 |
<table> |
4849 |
13 Jun 18 |
nicklas |
136 |
<tr> |
4849 |
13 Jun 18 |
nicklas |
137 |
<td colspan="3" class="instructions note"> |
4850 |
14 Jun 18 |
nicklas |
138 |
Use this form to set-up OTP login for your account. |
4850 |
14 Jun 18 |
nicklas |
139 |
<ol> |
4857 |
18 Jun 18 |
nicklas |
140 |
<li>Enter your Login and Password. |
4857 |
18 Jun 18 |
nicklas |
141 |
<li>If you want to, you can also change your password. |
4857 |
18 Jun 18 |
nicklas |
142 |
<li>Scan the QR code with the device you are going to use for OTP. |
4857 |
18 Jun 18 |
nicklas |
143 |
<li>To verify the setup, enter the current passcode. |
4857 |
18 Jun 18 |
nicklas |
144 |
<li>Click on <b>Save</b>. |
4850 |
14 Jun 18 |
nicklas |
145 |
</ol> |
4850 |
14 Jun 18 |
nicklas |
146 |
<p> |
4849 |
13 Jun 18 |
nicklas |
147 |
<b>Note!</b> The OTP setup can only be performed once. If you need to |
4850 |
14 Jun 18 |
nicklas |
148 |
reset it please contact the server administrator. |
4849 |
13 Jun 18 |
nicklas |
149 |
</td> |
4849 |
13 Jun 18 |
nicklas |
150 |
</tr> |
4849 |
13 Jun 18 |
nicklas |
151 |
<tr> |
4849 |
13 Jun 18 |
nicklas |
152 |
<th class="bg-filled-100"><label for="username">Login</label></th> |
4849 |
13 Jun 18 |
nicklas |
153 |
<td><input |
4857 |
18 Jun 18 |
nicklas |
154 |
type="text" class="required" name="username" id="username" value="<%=HTML.encodeTags(username)%>" data-next-focus="password"> |
4849 |
13 Jun 18 |
nicklas |
155 |
</td> |
4857 |
18 Jun 18 |
nicklas |
156 |
<td rowspan="5" class="qrcode"> |
4850 |
14 Jun 18 |
nicklas |
157 |
<img id="qrcode" src="" style="display:none;"> |
4850 |
14 Jun 18 |
nicklas |
158 |
<div id="no-qrcode"> |
4850 |
14 Jun 18 |
nicklas |
159 |
Enter your <b>Login</b> to create the QR code! |
4850 |
14 Jun 18 |
nicklas |
160 |
</div> |
4850 |
14 Jun 18 |
nicklas |
161 |
</td> |
4849 |
13 Jun 18 |
nicklas |
162 |
</tr> |
4849 |
13 Jun 18 |
nicklas |
163 |
<tr> |
4849 |
13 Jun 18 |
nicklas |
164 |
<th class="bg-filled-100"><label for="password">Password</label></th> |
4849 |
13 Jun 18 |
nicklas |
165 |
<td><input |
4857 |
18 Jun 18 |
nicklas |
166 |
type="password" class="required" name="password" id="password" data-next-focus="otp"> |
4849 |
13 Jun 18 |
nicklas |
167 |
</td> |
4849 |
13 Jun 18 |
nicklas |
168 |
</tr> |
4857 |
18 Jun 18 |
nicklas |
169 |
<tr id="change-password"> |
4857 |
18 Jun 18 |
nicklas |
170 |
<th class="bg-filled-100"></th> |
4857 |
18 Jun 18 |
nicklas |
171 |
<td><label><input type="checkbox" id="change-pwd">I want to change my passsword</label></td> |
4857 |
18 Jun 18 |
nicklas |
172 |
</tr> |
4857 |
18 Jun 18 |
nicklas |
173 |
|
4857 |
18 Jun 18 |
nicklas |
174 |
<tr id="new-password-1" style="display: none;"> |
4857 |
18 Jun 18 |
nicklas |
175 |
<th class="bg-filled-100"><label for="newpw">New password</label></th> |
4857 |
18 Jun 18 |
nicklas |
176 |
<td><input |
4857 |
18 Jun 18 |
nicklas |
177 |
type="password" name="newpw" id="newpw" autocomplete="off" data-next-focus="newpw2"> |
4857 |
18 Jun 18 |
nicklas |
178 |
</td> |
4857 |
18 Jun 18 |
nicklas |
179 |
</tr> |
4857 |
18 Jun 18 |
nicklas |
180 |
<tr id="new-password-2" style="display: none;"> |
4857 |
18 Jun 18 |
nicklas |
181 |
<th class="bg-filled-100"><label for="newpw2">Re-type password</label></th> |
4857 |
18 Jun 18 |
nicklas |
182 |
<td><input |
4857 |
18 Jun 18 |
nicklas |
183 |
type="password" name="newpw2" id="newpw2" autocomplete="off" data-next-focus="otp"> |
4857 |
18 Jun 18 |
nicklas |
184 |
</td> |
4857 |
18 Jun 18 |
nicklas |
185 |
</tr> |
4849 |
13 Jun 18 |
nicklas |
186 |
<tr> |
4849 |
13 Jun 18 |
nicklas |
187 |
<th class="bg-filled-100" style="border-bottom-left-radius: 0.5rem;"><label for="otp">One-time passcode</label></th> |
4849 |
13 Jun 18 |
nicklas |
188 |
<td><input |
4857 |
18 Jun 18 |
nicklas |
189 |
type="text" class="required" name="otp" id="otp" maxlength="6" autocomplete="off"> |
4849 |
13 Jun 18 |
nicklas |
190 |
</td> |
4849 |
13 Jun 18 |
nicklas |
191 |
</tr> |
4849 |
13 Jun 18 |
nicklas |
192 |
</table> |
4849 |
13 Jun 18 |
nicklas |
193 |
</form> |
4849 |
13 Jun 18 |
nicklas |
194 |
</div> |
4849 |
13 Jun 18 |
nicklas |
195 |
|
4851 |
14 Jun 18 |
nicklas |
196 |
<base:buttongroup subclass="dialogbuttons" style="display: none;" id="close-button"> |
4863 |
19 Jun 18 |
nicklas |
197 |
<base:button id="btnClose" title="Close" image="ok.png" /> |
4851 |
14 Jun 18 |
nicklas |
198 |
</base:buttongroup> |
4851 |
14 Jun 18 |
nicklas |
199 |
|
4851 |
14 Jun 18 |
nicklas |
200 |
<base:buttongroup subclass="dialogbuttons" id="setup-buttons"> |
4849 |
13 Jun 18 |
nicklas |
201 |
<base:button id="btnCancel" title="Cancel" /> |
4849 |
13 Jun 18 |
nicklas |
202 |
<base:button id="btnSave" title="Save" /> |
4849 |
13 Jun 18 |
nicklas |
203 |
</base:buttongroup> |
4849 |
13 Jun 18 |
nicklas |
204 |
|
4849 |
13 Jun 18 |
nicklas |
205 |
|
4849 |
13 Jun 18 |
nicklas |
206 |
</base:body> |
4849 |
13 Jun 18 |
nicklas |
207 |
</base:page> |