OTPWCalc Sources / file revision
src/firefoxos/main.html@698b4dda1f76
src/firefoxos/main.html
Sat, 13 Jul 2013 09:33:12 +0200
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Sat, 13 Jul 2013 09:33:12 +0200
- changeset 11
- 698b4dda1f76
- parent 8
- 9b8205e1e4a4
- child 13
- deac632e477c
- permissions
- -rw-r--r--
Update to new JQuery core version and correct missing mouse/touch events.
1 <!DOCTYPE html>
2 <!--
3 OTPWCalc - One time password challenge response calculator client
4 Copyright © 2013 Michael Schloh von Bennewitz <michael@schloh.com>
6 OTPWCalc is free software: you can redistribute it and/or modify
7 it under the terms of the European Union Public Licence, either
8 version 1.1 of the license, or (at your option) any later version.
10 OTPWCalc is distributed in the hope that it will be useful,
11 but WITHOUT ANY WARRANTY; without even the implied warranty
12 of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See
13 the European Union Public License for more details.
15 You should have received a copy of the European Union Public
16 Licence along with OTPWCalc. If not, please refer to
17 <http://joinup.ec.europa.eu/software/page/eupl/>.
19 This file is part of project OTWPCalc, a one time password challenge
20 response calculator client and is found at http://otpwcalc.europalab.com/
22 main.html: W3C HTML implementation
23 -->
25 <html>
26 <head>
27 <meta charset="utf-8">
28 <!--<meta http-equiv="Content-Type" content="text/html;charset=utf-8">-->
29 <meta name="viewport" content="width=device-width, initial-scale=1">
30 <title>OTPWCalc</title>
31 <link rel="stylesheet" type="text/css" href="jquery.mobile/jquery.mobile-1.3.1.min.css" />
32 <link rel="stylesheet" type="text/css" href="main.css" />
33 <!--<script src="sjcl-0.0/sjcl.js"></script>-->
34 <script src="hashes/md5.js"></script>
35 <script src="hashes/sha1.js"></script>
36 <script src="hashes/rmd160.js"></script>
37 <script src="otpalg/dict.js"></script>
38 <script src="otpalg/otpalg.js"></script>
39 <script src="jquery.core/jquery-1.10.2.min.js"></script>
40 <script src="main.js"></script>
41 <script src="jquery.mobile/jquery.mobile-1.3.1.min.js"></script>
42 </head>
43 <body>
44 <!-- Data attributes reserved by JQuery Mobile:
45 data-theme, data-ajax, data-filter, data-icon, data-grid,
46 data-rel, data-icon, data-url, data-role, and data-type -->
47 <!-- http://api.jquerymobile.com/data-attribute/ -->
48 <!--<div data-role="page" data-fullscreen="true" class="type-interior">-->
49 <div data-role="page" class="type-interior oc-swipage" id="mainhaupt">
50 <!-- H1 header data-role good for Search Engine Optimization -->
51 <!--<div data-role="header" data-position="inline">-->
52 <div data-role="header" data-position="fixed" data-id="headmain">
53 <a href="about.html" data-prefetch="true" data-transition="turn" data-rel="dialog" style="margin-left: 8px; width: 5em">About</a>
54 <h1>OTPWCalc</h1>
55 <a href="help/help.html" data-prefetch="true" data-transition="slide" style="margin-right: 8px; width: 5em">Help</a>
56 </div><!-- /header -->
57 <div data-role="content">
58 <div class="content-primary">
60 <!-- This describes how to use AJAX without a server side script -->
61 <!-- http://www.terminally-incoherent.com/blog/2011/12/05/making-ajax-driven-websites-without-server-side-scripting/ -->
63 <form method="post" onsubmit="return dosubmit();" onreset="return doreset();" data-ajax="false">
64 <ul data-role="listview">
65 <!--<h2>OTPWCalc</h2>-->
67 <!-- Implement embedded help system later
68 <p>Type the given hash value and sequence number, your
69 secret passphrase, and choose the encryption algorythm
70 to receive a one time password (OTPW) for login.</p>
71 -->
73 <li>
74 <div data-role="collapsible" data-collapsed="false" data-theme="e" data-content-theme="c">
75 <h3>Input Values</h3>
76 <fieldset class="ui-grid-a">
77 <div class="ui-block-a" style="padding-right: 1em;">
78 <input type="text" name="seedid" id="seedid" value="" placeholder="Seed ID" pattern="[0-9A-Za-z]*" required />
79 </div>
80 <div class="ui-block-b">
81 <input type="number" name="crement" id="crement" pattern="[0-9]*" value="" placeholder="Sequence #" min="1" required />
82 </div>
83 </fieldset>
85 <div data-role="fieldcontain" style="text-align: right; border: none;">
86 <label for="selectdecr" style="float: left; width: 40%;">Automatic<br />Decrement</label>
87 <select name="selectdecr" id="selectdecr" data-iconpos="left" data-inline="true">
88 <option value="0">Disabled</option>
89 <option value="1">Offset 1</option>
90 <option value="2">Offset 2</option>
91 <option value="3">Offset 3</option>
92 <option value="4">Offset 4</option>
93 </select>
94 </div>
96 <input type="password" data-clear-btn="true" name="paswrd" id="paswrd" value="" placeholder="Secret" />
98 <!-- JQM miscalculated spacing -->
99 <div style="height: 0.25em;"></div>
101 <a type=button name="viewpass" id="viewpass" data-theme="b" data-icon="otpwcalc-seepass" onmousedown="$('#paswrd').get(0).type='text'; return false;" ontouchstart="$('#paswrd').get(0).type='text'; return false;" onmouseup="$('#paswrd').get(0).type='password'; return false;" ontouchend="$('#paswrd').get(0).type='password'; return false;">Press to Reveal Secret</a>
102 </div>
103 </li>
105 <li>
106 <div data-role="collapsible" data-collapsed="true" data-theme="e" data-content-theme="c">
107 <h3>Output Format</h3>
108 <fieldset data-role="controlgroup" data-type="horizontal" style="width: 100%;">
109 <!--<input type="radio" name="radio-choice-b" id="radio-choice-a" value="off" />
110 <label for="radio-choice-a">MD4</label>-->
111 <input type="radio" name="radiohash" id="hashmd5" value="on" checked="checked" style="width: 33%;" />
112 <label for="hashmd5">MD5</label>
113 <input type="radio" name="radiohash" id="hashsha1" value="off" style="width: 33%;" />
114 <label for="hashsha1">SHA1</label>
115 <input type="radio" name="radiohash" id="hashr160" value="off" style="width: 33%;" />
116 <label for="hashr160">R160</label>
117 </fieldset>
119 <!-- JQM miscalculated spacing -->
120 <div style="height: 0.25em;"></div>
122 <fieldset data-role="controlgroup">
123 <input type="radio" name="radiodisplay" id="displaysix" class="custom" value="on" checked="checked" />
124 <label for="displaysix">Display six words</label>
125 <input type="radio" name="radiodisplay" id="displayhex" class="custom" value="off" />
126 <label for="displayhex">Display hexadecimal</label>
127 </fieldset>
128 </div>
129 </li>
131 <li>
132 <div class="ui-body" style="text-align: center; height: 2em; padding-left: 0; padding-right: 0; padding-top: 0.5em; padding-bottom: 0.5em;">
133 <label><div id="outext" style="color: rgb(192,0,0); font-size: 1.125em;">Please Click Submit For A OTP</div></label>
134 </div>
136 <fieldset class="ui-grid-a">
137 <div class="ui-block-a"><button type="reset" data-theme="c" data-icon="delete">Reset</button></div>
138 <div class="ui-block-b"><button type="submit" data-theme="b" data-icon="check">Submit</button></div>
139 </fieldset>
140 </li>
141 </ul>
142 </form>
143 </div><!-- /content-primary -->
144 </div><!-- /content -->
145 </div><!-- /page -->
146 </body>
147 </html>
