Menambah Fitur Copy to Clipboard pada Gembok Authenticator

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.