
TeknoCerdas.com – Salam cerdas untuk kita semua. Gembok Authenticator adalah 2FA Token Generator alternatif dari Google Authenticator yang ditulis menggunakan HTML dan Javascript. Salah satu kekurangan Gembok Authenticator adalah fitur Copy to Clipboard token yang dihasilkan. Pada tulisan ini kita akan melihat bagaimana fitur Copy to Clipboard ditambahkan pada Gembok Authenticator versi 1.1. Ketika sebuah token diklik maka nilainya akan disalin ke clipboard.
Javascript menyediakan fungsi document.execCommand('copy')
untuk menyalin teks ke clipboard atau memory. Namun teks tersebut harus diselect atau dipilih terlebih dahulu. Sedangkan token pada Gembok Authenticator menggunakan elemen h4
bukan inputan seperti textarea
atau input
element.
Baca Juga
Gembok Authenticator: 2FA Token Generator Ditulis dengan Javascript dan HTML
Agar teks token bisa diselect kemudian disalin oleh execCommand
maka perlu dibuatkan dummy element yang mendukung fungsi Javascript element.select()
untuk kemudian disalin. Dalam fitur ini kita menggunakan textarea
sebagai dummy element.
Pertama kita tambahkan element teks informasi yang akan muncul ketika sebuah token diklik yang mengindikasikan bahwa token telah disalin ke clipboard.
function loadItems(jsonData) {
try {
var items = JSON.parse(jsonData);
for (var i=0; i<items.length; i++) {
var identifier = items[i].provider + '-' + i;
items[i].identifier = identifier;
secretMap[identifier] = items[i].secret;
createItem(items[i]);
}
updateAllProgressBar();
$('.items-container').insertAdjacentHTML('beforeend', ' <div class="item-copied"><p>Copied to clipboard</p></div>');
} catch(e) {
if (e.name === "SyntaxError") {
alert('Failed to load JSON file, make sure it is valid.');
}
}
}
Perubahan yang dilakukan pada fungsi diatas adalah menambahkan elemen baru yaitu sebuah div
dengan class .item-copied
.
$('.items-container').insertAdjacentHTML('beforeend', ' <div class="item-copied"><p>Copied to clipboard</p></div>');
Element ini harusnya tersembunyi by default dan akan muncul jika token diklik. Posisi dari element akan kita tempatkan pada pojok kanan bawah. Untuk itu kita akan menambahkan CSS untuk element tersebut.
.item-copied {
text-align: right;
color: yellow;
background-color: #272822;
position: fixed;
bottom: 10px;
right: 10px;
font-size: 12px;
display: none;
border: 1px solid #999;
padding: 4px 8px;
border-radius: 4px;
}
Sekarang saatnya membuat fungsi Javascript untuk melakukan copy teks ke clipboard. Fungsi ini kita namakan copyToClipboard(text)
. Fungsi ini akan membuat dummy textarea
yang isinya adalah token yang diklik oleh pengguna. Kemudian menyalin teks tersebut ke clipboard. Selain menyalin fungsi ini juga menampilkan pesan bahwa token telah disalin pada pojok kanan bawah halaman dan akan hilang secara otomatis setelah 3 detik.
function copyToClipboard(text) {
clipboardTimer && clearTimeout(clipboardTimer);
// Temporarily create textarea to be able to select text
var elem = document.createElement('textarea');
elem.value = text;
document.body.appendChild(elem);
elem.select();
document.execCommand('copy');
document.body.removeChild(elem);
$('.item-copied').style.display = 'inline-block';
$('.item-copied').innerHTML = '<p>"' + text + '" copied to clipboard</p>'
clipboardTimer = setTimeout(function hideText() {
$('.item-copied').style.display = 'none';
}, 3000);
}
Fungsi salin teks ke clipboard sudah selesai saatnya menyematkannya pada tiap token agar ketika diklik maka fungsi ini dijalankan. Kita akan memodifikasi fungsi createItem()
dan menambahkan event onclick pada token.
function createItem(options) {
var itemHtml = '<div class="item" data-identifier="' + options.identifier + '" data-algorithm="' + (options.algorithm || 'SHA1') + '" data-provider="' + options.provider + '" data-digits="' + (options.digits || 6) + '" data-period="' + (options.period || 30) + '">';
itemHtml += '<h3 class="item-title">' + (options.provider || 'error') + '</h3>';
itemHtml += '<p class="item-desc">' + (options.description || '') + '</p>';
itemHtml += '<h4 class="item-token" onclick="copyToClipboard(this.innerText)" title="Click to copy">000000</h4>';
itemHtml += '<div style="background-color: ' + (options.indicatorColor || 'red') + '" class="item-expires"><div class="item-expires-progress"></div></div>';
$('.items-container').insertAdjacentHTML('beforeend', itemHtml);
}
Kode lengkap perubahan yang dilakukan pada Gembok Authenticator v1.1 dapat dilihat pada repository-nya langsung:
https://github.com/rioastamal/gembok
Berikut adalah hasil akhir perubahan yang dilakukan pada Gembok Authenticator v1.1 dengan menambahkan fitur baru yaitu copy teks ke clipboard.