Add button to copy link/password to clipboard
- 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
parent
c0d1e0ae39
commit
073885d651
5 changed files with 63 additions and 2 deletions
4
snappass/static/css/custom.css
Normal file
4
snappass/static/css/custom.css
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
input[readonly].readonly-text {
|
||||||
|
background-color: #fff;
|
||||||
|
cursor: text;
|
||||||
|
}
|
||||||
31
snappass/static/scripts/clipboard_button.js
Normal file
31
snappass/static/scripts/clipboard_button.js
Normal 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();
|
||||||
|
|
||||||
|
})();
|
||||||
|
|
@ -4,6 +4,8 @@
|
||||||
<head>
|
<head>
|
||||||
<title>Send Password</title>
|
<title>Send Password</title>
|
||||||
<link href="{{ config.STATIC_URL }}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="navbar">
|
<div class="navbar">
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,19 @@
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<section>
|
<section>
|
||||||
<div class="page-header"><h1>Password stored!</h1></div>
|
<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>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% 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 %}
|
||||||
|
|
|
||||||
|
|
@ -4,8 +4,20 @@
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<section>
|
<section>
|
||||||
<div class="page-header"><h1>Here is your password!</h1></div>
|
<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>
|
<p>Remember to copy this password! It's been deleted from the database and can't be re-accessed.</p>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% 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 %}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue