extensions/net.sf.basedb.otp/trunk/resources/setup-otp.jsp

Code
Comments
Other
Rev Date Author Line
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>