/
_token.html.erb
82 lines (71 loc) · 2.14 KB
/
_token.html.erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<script type="text/javascript">
$('#btn-token').on('click',function() {
var token = '<%= @user.user.token %>';
var mask = document.createElement('div');
mask.className = 'mask';
mask.id = 'token-mask';
mask.innerHTML = '\
<div class="modal-dialog" id="token-popup">\
<div class="modal-content">\
<div class="modal-header">\
<button type="button" class="close" id="close-btn">×</button>\
<h4 class="modal-title">Access Token</h4>\
</div>\
<div class="modal-body">\
<p><span class="token form-control text-center"></span></p>\
</div>\
<div class="modal-footer">\
<button type="button" class="btn btn-default" id="copy-btn">Copy</button>\
</div>\
</div>\
</div>\
';
$('body').append(mask);
$('#token-mask').fadeIn(200, function(){
$('#token-popup .token').text(token);
$('#token-popup .modal-content').animate({marginTop: '30px', opacity: '1'}, 300);
$('#token-mask').on('click', closePopup);
$('#token-popup #copy-btn').on('click', copyToken);
});
});
function copyToken(){
var temp = $('<input>');
$("body").append(temp);
temp.val($('#token-popup .token').text()).select();
document.execCommand('copy');
temp.remove();
$('#token-popup #copy-btn').text('Copied').attr('disabled', 'true');
};
function closePopup(e){
var tokenPopup = document.querySelector('#token-popup .modal-content');
if (tokenPopup === e.target || tokenPopup.contains(e.target) && e.target.id !== 'close-btn'){
return;
};
$('#token-popup .modal-content').animate({marginTop: '0', opacity: '0'}, 300, function(){
$(this).remove();
$('#token-mask').fadeOut(200, function(){
$(this).remove();
});
});
};
</script>
<style type="text/css">
.mask{
display: none;
z-index: 10000;
position: fixed;
height: 100%;
width: 100%;
top: 0;
background-color: rgba(0, 0, 0, 0.7);
}
.modal-dialog{
margin-top: 0;
}
.modal-content{
opacity: 0;
}
.token{
font-weight: bold;
}
</style>