luzifer/vault-otp-ui
1
0
Fork 0
mirror of https://github.com/Luzifer/vault-otp-ui.git synced 2024-11-09 08:40:05 +00:00
Code Issues Releases Wiki Activity

Improve UI handling

Browse source 
- No jumping after copy-click
- Improved alerts

Signed-off-by: Knut Ahlers <knut@ahlers.me>
This commit is contained in:
Knut Ahlers 2018-03-23 19:06:48 +01:00
parent 94037bf603
commit 738395bacf
Signed by: luzifer
GPG key ID: DC2729FDD34BE99E
5 changed files with 2029 additions and 158 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
application.coffee
View file

@ -30,9 +30,9 @@ createAlert = (type, keyword, message, timeout) ->
tpl = $('#tpl-message').html() tpl = $('#tpl-message').html()
alrt = $(tpl) alrt = $(tpl)
alrt.addClass "alert-#{type}" alrt.find('.alert').addClass "alert-#{type}"
alrt.find('.keyword').text keyword alrt.find('.alert').find('.keyword').text keyword
alrt.find('.message').text message alrt.find('.alert').find('.message').text message
alrt.appendTo $('#messagecontainer') alrt.appendTo $('#messagecontainer')
@ -135,6 +135,13 @@ updateCodes = (data) ->
text: (trigger) -> text: (trigger) ->
$(trigger).find('.badge').text().replace(' ', '') $(trigger).find('.badge').text().replace(' ', '')
clipboard.on 'success', (e) ->
createAlert 'info', 'Success', 'Code copied to clipboard', 1000
e.blur()
clipboard.on 'error', (e) ->
createAlert 'danger', 'Oops', 'Copy to clipboard failed', 2000
filterChange() filterChange()
delay timeLeft()*1000, -> delay timeLeft()*1000, ->

13
application.js
View file

@ -36,9 +36,9 @@
var alrt, tpl; var alrt, tpl;
tpl = $('#tpl-message').html(); tpl = $('#tpl-message').html();
alrt = $(tpl); alrt = $(tpl);
alrt.addClass("alert-" + type); alrt.find('.alert').addClass("alert-" + type);
alrt.find('.keyword').text(keyword); alrt.find('.alert').find('.keyword').text(keyword);
alrt.find('.message').text(message); alrt.find('.alert').find('.message').text(message);
alrt.appendTo($('#messagecontainer')); alrt.appendTo($('#messagecontainer'));
if (timeout > 0) { if (timeout > 0) {
return delay(timeout, function() { return delay(timeout, function() {
@ -145,6 +145,13 @@
return $(trigger).find('.badge').text().replace(' ', ''); return $(trigger).find('.badge').text().replace(' ', '');
} }
}); });
clipboard.on('success', function(e) {
createAlert('info', 'Success', 'Code copied to clipboard', 1000);
return e.blur();
});
clipboard.on('error', function(e) {
return createAlert('danger', 'Oops', 'Copy to clipboard failed', 2000);
});
filterChange(); filterChange();
delay(timeLeft() * 1000, function() { delay(timeLeft() * 1000, function() {
return fetchCodes(iterationCurrent); return fetchCodes(iterationCurrent);

2139
assets.go
View file

File diff suppressed because it is too large Load diff

20
index.html
View file

@ -24,6 +24,7 @@
.alert { background-image: none; } .alert { background-image: none; }
.badge { background-color: #e2e2e2; color: #555; font-size: 15px; font-weight: bold; margin-top: 3px; } .badge { background-color: #e2e2e2; color: #555; font-size: 15px; font-weight: bold; margin-top: 3px; }
.center { text-align: center; } .center { text-align: center; }
.fixed { bottom: 0; position: fixed; width: 100%; z-index: 999; }
.jumbotron h2 { text-align: center; } .jumbotron h2 { text-align: center; }
.otp-item i { width: 1.1em; } .otp-item i { width: 1.1em; }
.pbar { background-color: #2196f3; height: 100%; } .pbar { background-color: #2196f3; height: 100%; }
@ -72,12 +73,13 @@
</nav> </nav>
<div id="application"> <div id="application">
<div class="container-fluid fixed">
<div class="row">
<div class="col-xs-10 col-xs-offset-1 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-4 col-lg-offset-4" id="messagecontainer"></div>
</div>
</div>
<div class="container"> <div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2" id="messagecontainer">
</div>
</div>
<div class="row"> <div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3"> <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3">
@ -116,16 +118,18 @@
<div id="templates"> <div id="templates">
<div id="tpl-otp-item"> <div id="tpl-otp-item">
<a href="#" class="list-group-item otp-item"> <a class="list-group-item otp-item">
<span class="badge">145 369</span> <span class="badge">145 369</span>
<i class="fa"></i> <i class="fa"></i>
<span class="title">Some Site</span> <span class="title">Some Site</span>
</a> </a>
</div> </div>
<div id="tpl-message"> <div id="tpl-message">
<div class="alert alert-dismissible" role="alert"> <div class="row">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button> <div class="alert alert-dismissible col-sm-12 col-xs-12 col-md-12 col-lg-12" role="alert">
<strong class="keyword">Warning!</strong> <span class="message"></span> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<strong class="keyword">Warning!</strong> <span class="message"></span>
</div>
</div> </div>
</div> </div>
</div> </div>

2
main.go
View file

@ -1,6 +1,6 @@
package main package main
//go:generate go-bindata -pkg $GOPACKAGE -o assets.go index.html application.js static //go:generate go-bindata -pkg $GOPACKAGE -o assets.go index.html application.js static/...
import ( import (
"bytes" "bytes"