Add timer and error messages

main
Pk11 2 years ago
parent 7538508a2e
commit d70ab9a5c8

File diff suppressed because one or more lines are too long

@ -6,51 +6,58 @@
<title>RSA SecurID</title>
<style>
.valid { color: lime; }
input:not([disabled]):not(.valid) { color: red; }
input:not([disabled]):not(.valid), #error { color: red; }
.hidden { display: none; }
</style>
</head>
<body>
<h1>SecurID</h1>
<fieldset>
<div>
<label for="input">Token:</label>
<input id="input">
</div>
<div id="password-div" class="hidden">
<label for="password">Password:</label>
<input id="password" type="password">
</div>
<div id="devid-div" class="hidden">
<label for="devid">Device ID:</label>
<input id="devid">
</div>
<div>
<label for="version">Version:</label>
<select id="version">
<option value="2">v2</option>
<option value="3">v3</option>
<option value="4" selected>v4</option>
</select>
</div>
<div>
<input id="remember" type="checkbox">
<label for="remember">Remember token</label>
</div>
<div>
<label for="pin">PIN:</label>
<input id="pin" type="password" minlength="4" maxlength="8">
</div>
<hr>
<div>
<label for="output">Passcode:</label>
<input id="output" maxlength="8" disabled>
</div>
<div>
<label for="timer">Time remaining:</label>
<input id="timer" type="range" min="0" max="59" value="0" disabled>
</div>
<div id="error" class="hidden"><hr><b>Error:</b> <span></span></div>
</fieldset>
<p>
[<a href=".">back</a>]
[<a href="https://github.com/Epicpkmn11/rsa-securid">source</a>]
</p>
<div>
<label for="input">Token:</label>
<input id="input">
</div>
<div id="password-div" class="hidden">
<label for="password">Password:</label>
<input id="password" type="password">
</div>
<div id="devid-div" class="hidden">
<label for="devid">Device ID:</label>
<input id="devid">
</div>
<div>
<label for="version">Version:</label>
<select id="version">
<option value="2">v2</option>
<option value="3">v3</option>
<option value="4" selected>v4</option>
</select>
</div>
<div>
<input id="remember" type="checkbox">
<label for="remember">Remember token</label>
</div>
<div>
<label for="pin">PIN:</label>
<input id="pin" type="password" minlength="4" maxlength="8">
</div>
<hr>
<div>
<label for="output">Passcode:</label>
<input id="output" maxlength="8" disabled>
</div>
<hr>
<div>2023 Pk11, based on <a href="https://github.com/domdomegg/rsa-securid">domdomegg/rsa-securid</a> and <a href="https://github.com/cernekee/stoken">cernekee/stoken</a>.</div>

@ -6,51 +6,57 @@
<title>RSA SecurID</title>
<style>
.valid { color: lime; }
input:not([disabled]):not(.valid) { color: red; }
input:not([disabled]):not(.valid), #error { color: red; }
.hidden { display: none; }
</style>
</head>
<body>
<h1>SecurID</h1>
<fieldset>
<div>
<label for="input">トークン:</label>  
<input id="input">
</div>
<div id="password-div" class="hidden">
<label for="password">パスワード:</label> 
<input id="password" type="password">
</div>
<div id="devid-div" class="hidden">
<label for="devid">デバイスID:</label>
<input id="devid">
</div>
<div>
<label for="version">バージョン:</label> 
<select id="version">
<option value="2">v2</option>
<option value="3">v3</option>
<option value="4" selected>v4</option>
</select>
</div>
<div>
<input id="remember" type="checkbox">
<label for="remember">トークンの記憶</label>
</div>
<div>
<label for="pin"></label>   
<input id="pin" type="password" minlength="4" maxlength="8">
</div>
<hr>
<div>
<label for="output">パスコード:</label> 
<input id="output" maxlength="8" disabled>
</div>
<div>
<label for="timer">残り時間:</label>  
<input id="timer" type="range" min="0" max="59" value="0" disabled>
</div>
<div id="error" class="hidden"><hr><b>エラー:</b>    <span></span></div>
</fieldset>
<p>
[<a href=".">戻る</a>]
[<a href="https://github.com/Epicpkmn11/rsa-securid">ソース</a>]
</p>
<div>
<label for="input">トークン:</label>  
<input id="input">
</div>
<div id="password-div" class="hidden">
<label for="password">パスワード:</label> 
<input id="password" type="password">
</div>
<div id="devid-div" class="hidden">
<label for="devid">デバイスID:</label>
<input id="devid">
</div>
<div>
<label for="version">バージョン:</label> 
<select id="version">
<option value="2">v2</option>
<option value="3">v3</option>
<option value="4" selected>v4</option>
</select>
</div>
<div>
<input id="remember" type="checkbox">
<label for="remember">トークンの記憶</label>
</div>
<div>
<label for="pin"></label>   
<input id="pin" type="password" minlength="4" maxlength="8">
</div>
<hr>
<div>
<label for="output">パスコード:</label> 
<input id="output" maxlength="8" disabled>
</div>
<hr>
<div>2023 Pk11、<a href="https://github.com/domdomegg/rsa-securid">domdomegg/rsa-securid</a><a href="https://github.com/cernekee/stoken">cernekee/stoken</a>に基づく。</div>

Loading…
Cancel
Save