99 lines
No EOL
2.4 KiB
HTML
99 lines
No EOL
2.4 KiB
HTML
<h2>shared accounts:</h2>
|
|
<!-- there might be sections for personal accounts later ~ -->
|
|
|
|
<div id='accounts'></div>
|
|
|
|
<script>
|
|
// const generateKey = async (password, salt) => {
|
|
// const encoder = new TextEncoder()
|
|
// const baseKey = await window.crypto.subtle.importKey('raw', encoder.encode(password), { name: 'PBKDF2' }, false, ['deriveKey'])
|
|
// return window.crypto.subtle.deriveKey({
|
|
// name: 'PBKDF2',
|
|
// salt: salt,
|
|
// iterations: 1000,
|
|
// hash: 'SHA-256'
|
|
// }, baseKey, { name: 'AES-CBC', length: 256 }, true, ['encrypt', 'decrypt'])
|
|
// }
|
|
|
|
// const encrypt = async (data, password) => {
|
|
// const salt = window.crypto.getRandomValues(new Uint8Array(16))
|
|
// const encoder = new TextEncoder()
|
|
// const key = await generateKey(password, salt)
|
|
// const encryptedContent = await window.crypto.subtle.encrypt({
|
|
// name: 'AES-CBC',
|
|
// iv: window.crypto.getRandomValues(new Uint8Array(16))
|
|
// }, key, encoder.encode(data))
|
|
|
|
// return {
|
|
// encryptedContent,
|
|
// salt
|
|
// }
|
|
// }
|
|
|
|
// const decrypt = async (data, password, salt, iv) => {
|
|
// const decoder = new TextDecoder()
|
|
// const key = await generateKey(password, salt)
|
|
// const decryptedContent = await window.crypto.subtle.decrypt({
|
|
// name: 'AES-CBC',
|
|
// iv
|
|
// }, key, data)
|
|
|
|
// return decoder.decode(decryptedContent)
|
|
// }
|
|
|
|
el = document.getElementById('accounts')
|
|
for (i = 0; i < accounts.length; i++) {
|
|
a = accounts[i]
|
|
el.innerHTML += `<div class='account ${(a.dead ? 'dead' : '')}'>
|
|
<div class='name'>
|
|
<a href='${a.link}'>${a.name}</a>
|
|
</div>
|
|
<div class='info'>
|
|
<div onclick='
|
|
window.getSelection().selectAllChildren(this)
|
|
'>${a.user}</div>
|
|
</div>
|
|
<div class='info'>
|
|
<div onclick='
|
|
this.innerHTML === "${a.pass}" ?
|
|
window.getSelection().selectAllChildren(this) :
|
|
this.innerHTML = "${a.pass}"
|
|
'>${'*'.repeat(a.pass.length)}</div>
|
|
</div>
|
|
</div>`
|
|
}
|
|
|
|
</script>
|
|
|
|
<!--
|
|
<div onclick='
|
|
this.innerHTML="✓ ";
|
|
navigator.clipboard.writeText("${a.pass}")
|
|
'>⧉ </div>
|
|
-->
|
|
|
|
<style>
|
|
.account {
|
|
margin-bottom: 32px;
|
|
padding-left: 16px;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
|
|
border-left: 2px solid #0000003a;
|
|
|
|
> .name {
|
|
font-size: 1.5em;
|
|
}
|
|
}
|
|
.info {
|
|
cursor: pointer;
|
|
/* display: flex;
|
|
gap: 8px;
|
|
font-family: 'Courier Prime', monospace; */
|
|
}
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
</style> |