get import maps working, add JSDoc ish to modules, let EJS import them
This commit is contained in:
@@ -2,177 +2,69 @@
|
||||
<html lang="en">
|
||||
|
||||
<%- include('../layout/head.ejs', { title: 'Intended Link' }) %>
|
||||
<script async src="/static/js/es-module-shims.js"></script>
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"/utils": "/static/js/utils.js",
|
||||
"/send": "/static/js/send.js"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<body>
|
||||
<%- include('../layout/header.ejs') %>
|
||||
<main class="f-col">
|
||||
<div class="page-wrapper">
|
||||
<div class="text-center">
|
||||
<h1 class="page-header">Securely Share Your Secrets</h1>
|
||||
<p>Only the person with the account you specify will be able to decrypt your message.</p>
|
||||
</div>
|
||||
<form id="secretForm" class="table rows">
|
||||
<p>
|
||||
<label for="text">Secret Message</label>
|
||||
<textarea id="text" name="text" placeholder="Enter your secret here." required></textarea>
|
||||
</p>
|
||||
<p>
|
||||
<label for="file">Or select your secret file</label>
|
||||
<input type="file" id="file" name="file">
|
||||
</p>
|
||||
<p>
|
||||
<label for="serviceIdentifier">Their Username / Email</label>
|
||||
<input type="text" id="serviceIdentifier" name="serviceIdentifier" required>
|
||||
</p>
|
||||
<p>
|
||||
<label for="github">Type of account:</label>
|
||||
<select id="service" name="service">
|
||||
<option value="github">Github</option>
|
||||
<option value="google">Google</option>
|
||||
</select>
|
||||
</p>
|
||||
<p>
|
||||
<button type="submit">Generate URL</button>
|
||||
</p>
|
||||
</form>
|
||||
<body id="send-page">
|
||||
<%- include('../layout/header.ejs') %>
|
||||
<main class="f-col">
|
||||
<div class="page-wrapper">
|
||||
<div class="text-center">
|
||||
<h1 class="page-header">Securely Share Your Secrets</h1>
|
||||
<p>Only the person with the account you specify will be able to decrypt your message.</p>
|
||||
</div>
|
||||
<form id="secretForm" class="table rows">
|
||||
<p>
|
||||
<label for="text">Secret Message</label>
|
||||
<textarea id="text" name="text" placeholder="Enter your secret here." required></textarea>
|
||||
</p>
|
||||
<p>
|
||||
<label for="file">Or select your secret file</label>
|
||||
<input type="file" id="file" name="file">
|
||||
</p>
|
||||
<p>
|
||||
<label for="serviceIdentifier">Their Username / Email</label>
|
||||
<input type="text" id="serviceIdentifier" name="serviceIdentifier" required>
|
||||
</p>
|
||||
<p>
|
||||
<label for="github">Type of account:</label>
|
||||
<select id="service" name="service">
|
||||
<option value="github">Github</option>
|
||||
<option value="google">Google</option>
|
||||
</select>
|
||||
</p>
|
||||
<p>
|
||||
<button type="submit">Generate URL</button>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<div class="result-section">
|
||||
<div class="f-row">
|
||||
<label for="result">Intended Link:</label>
|
||||
<input type="text" id="result" readonly>
|
||||
<button id="copyButton" class="iconbutton" type="button">⎘</button>
|
||||
</div>
|
||||
<div>
|
||||
<label for="encryptedData">Encrypted data sent to the server:</label>
|
||||
<textarea id="encryptedData" readonly></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="result-section">
|
||||
<div class="f-row">
|
||||
<label for="result">Intended Link:</label>
|
||||
<input type="text" id="result" readonly>
|
||||
<button id="copyButton" class="iconbutton" type="button">⎘</button>
|
||||
</div>
|
||||
</main>
|
||||
<div>
|
||||
<label for="encryptedData">Encrypted data sent to the server:</label>
|
||||
<textarea id="encryptedData" readonly></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
const HexMix = {
|
||||
uint8ToHex(data) {
|
||||
return Array.from(data, byte => ('00' + byte.toString(16)).slice(-2)).join('');
|
||||
},
|
||||
hexToUint8(data) {
|
||||
const hexArray = data.match(/.{1,2}/g);
|
||||
return hexArray ? new Uint8Array(hexArray.map(char => parseInt(char, 16))) : new Uint8Array(0);
|
||||
},
|
||||
arrayBufferToString(buf, callback) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = event => callback(event.target.result);
|
||||
reader.onerror = event => alert(event.target.error);
|
||||
reader.readAsBinaryString(new Blob([buf], { type: 'application/octet-stream' }));
|
||||
},
|
||||
stringToArrayBuffer(str) {
|
||||
const array = new Uint8Array(str.length);
|
||||
for (let i = 0; i < str.length; i++) {
|
||||
array[i] = str.charCodeAt(i);
|
||||
}
|
||||
return array.buffer;
|
||||
}
|
||||
};
|
||||
<script type="module">
|
||||
import { initializeSendPage } from '/send';
|
||||
initializeSendPage();
|
||||
</script>
|
||||
|
||||
const copyButton = document.getElementById('copyButton');
|
||||
const fileInput = document.getElementById('file');
|
||||
<%- include('../layout/footer.ejs') %>
|
||||
</body>
|
||||
|
||||
copyButton.addEventListener('click', () => {
|
||||
resultInput.select();
|
||||
document.execCommand('copy');
|
||||
alert('URL copied to clipboard!');
|
||||
});
|
||||
|
||||
fileInput.addEventListener('change', (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (file) {
|
||||
document.getElementById('text').disabled = true;
|
||||
} else {
|
||||
document.getElementById('text').disabled = false;
|
||||
}
|
||||
});
|
||||
|
||||
const form = document.getElementById('secretForm');
|
||||
const resultInput = document.getElementById('result');
|
||||
const encryptedDataTextarea = document.getElementById('encryptedData');
|
||||
|
||||
|
||||
form.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const formData = new FormData(form);
|
||||
const text = formData.get('text');
|
||||
const file = formData.get('file');
|
||||
const serviceIdentifier = formData.get('serviceIdentifier');
|
||||
const service = formData.get('service');
|
||||
|
||||
let plaintext = text;
|
||||
let filetype = 'text/plain';
|
||||
let filename = 'secret.txt';
|
||||
|
||||
if (file.size > 0) {
|
||||
if (file.size > 2097152) {
|
||||
alert('Error: Max file size is 2mb.');
|
||||
return;
|
||||
}
|
||||
plaintext = await file.arrayBuffer();
|
||||
filetype = file.type;
|
||||
filename = file.name;
|
||||
}
|
||||
|
||||
const key = await window.crypto.subtle.generateKey(
|
||||
{ name: 'AES-GCM', length: 256 },
|
||||
true,
|
||||
['encrypt', 'decrypt']
|
||||
);
|
||||
|
||||
const iv = window.crypto.getRandomValues(new Uint8Array(16));
|
||||
const exported = await window.crypto.subtle.exportKey('raw', key);
|
||||
const encrypted = await window.crypto.subtle.encrypt(
|
||||
{ name: 'AES-GCM', iv },
|
||||
key,
|
||||
typeof plaintext === 'string' ? HexMix.stringToArrayBuffer(plaintext) : plaintext
|
||||
);
|
||||
|
||||
HexMix.arrayBufferToString(encrypted, async (encryptedText) => {
|
||||
encryptedDataTextarea.value = encryptedText;
|
||||
|
||||
|
||||
const keyHex = HexMix.uint8ToHex(new Uint8Array(exported));
|
||||
const ivHex = HexMix.uint8ToHex(iv);
|
||||
const keyParams = { key: keyHex, iv: ivHex };
|
||||
|
||||
const params = JSON.stringify({
|
||||
service: service,
|
||||
serviceIdentifier: serviceIdentifier,
|
||||
text: encryptedText,
|
||||
iv: ivHex,
|
||||
filetype: filetype,
|
||||
filename: filename
|
||||
});
|
||||
|
||||
try {
|
||||
const response = await fetch('/rest/links', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: params
|
||||
});
|
||||
const data = await response.json();
|
||||
const url = `http://${window.location.host}/rest/links/${data.id}#${btoa(JSON.stringify(keyParams))}`;
|
||||
resultInput.value = url;
|
||||
} catch (err) {
|
||||
alert(`Error: ${err.message}`);
|
||||
}
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<%- include('../layout/footer.ejs') %>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user