simono41/snappass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add button to copy link/password to clipboard

Browse source 
- Using clipboard.js
- On browsers not supporting evalCommand(), the text will be selected,
  and the keyboard shortcut displayed, depending on platform.
  (tested on Safari)
- Now using Bootstrap readonly text form, instead of a header,
  to display the passwords and generated links;
- Using fontawesome to get a clipboard icon (like GitHub, GitLab, etc.)
- fontawesome and clipboard.js are pulled from a CDN.
This commit is contained in:
Samuel Dion-Girardeau 2016-08-13 20:04:38 -04:00
parent c0d1e0ae39
commit 073885d651
5 changed files with 63 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
snappass/static/css/custom.css Normal file
View file

@ -0,0 +1,4 @@
input[readonly].readonly-text {
background-color: #fff;
cursor: text;
}

31
snappass/static/scripts/clipboard_button.js Normal file
View file

@ -0,0 +1,31 @@
(function(){
var targetButtonSelector = '#copy-clipboard-btn'
var clipboard = new Clipboard(targetButtonSelector);
var copyError = function(e) {
var key;
if (/Mac/i.test(navigator.userAgent)) {
key = '⌘';
} else {
key = 'Ctrl';
}
$(e.trigger).attr('title', "Press " + key + "-C to copy" )
.tooltip('fixTitle')
.tooltip('show');
};
var copySuccess = function(e) {
$(e.trigger).attr('title', 'Copied!')
.tooltip('fixTitle')
.tooltip('show');
e.clearSelection();
};
clipboard.on('success', copySuccess);
clipboard.on('error', copyError);
$(targetButtonSelector).tooltip();
})();

2
snappass/templates/base.html
View file

@ -4,6 +4,8 @@
<head>
<title>Send Password</title>
<link href="{{ config.STATIC_URL }}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link href="{{ config.STATIC_URL }}/css/custom.css" rel="stylesheet">
</head>
<body>
<div class="navbar">

14
snappass/templates/confirm.html
View file

@ -4,7 +4,19 @@
<div class="container">
<section>
<div class="page-header"><h1>Password stored!</h1></div>
<h4>{{ password_link }}</h4>
<div class="form-horizontal">
<input type="text" class="input-xxlarge readonly-text" id="password-link" value="{{ password_link }}" readonly="readonly">
<button title="Copy to clipboard" type="button" class="btn btn-secondary copy-clipboard-btn"
id="copy-clipboard-btn" data-clipboard-target="#password-link"
data-placement='bottom'>
<i class="fa fa-clipboard"></i>
</button>
</div>
</section>
</div>
{% endblock %}
{% block js %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.12/clipboard.min.js"></script>
<script src="{{ config.STATIC_URL }}/scripts/clipboard_button.js"></script>
{% endblock %}

14
snappass/templates/password.html
View file

@ -4,8 +4,20 @@
<div class="container">
<section>
<div class="page-header"><h1>Here is your password!</h1></div>
<h4>{{ password }}</h4>
<div class="form-horizontal">
<input type="text" class="input readonly-text" id="password-text" value="{{ password }}" readonly="readonly">
<button title="Copy to clipboard" type="button" class="btn btn-secondary copy-clipboard-btn"
id="copy-clipboard-btn" data-clipboard-target="#password-text"
data-placement='bottom'>
<i class="fa fa-clipboard"></i>
</button>
</div>
<p>Remember to copy this password! It's been deleted from the database and can't be re-accessed.</p>
</section>
</div>
{% endblock %}
{% block js %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.12/clipboard.min.js"></script>
<script src="{{ config.STATIC_URL }}/scripts/clipboard_button.js"></script>
{% endblock %}