buy: store FIO creds in localStorage

ts/buy.ts

@@ -1,11 +1,21 @@
 import {setupPopover} from './popover';
 
-document.querySelector("#fetch")!.addEventListener("click", async () => {
-	const username = (document.querySelector("#username") as HTMLInputElement).value;
-	const apiKey = (document.querySelector("#api-key") as HTMLInputElement).value;
-	const supplyForDays = parseInt((document.querySelector("#days") as HTMLInputElement).value, 10);
-	const output = await calculate(username, apiKey, supplyForDays);
+const username = document.querySelector('#username') as HTMLInputElement;
+const apiKey = document.querySelector('#api-key') as HTMLInputElement;
+{
+	const storedUsername = localStorage.getItem('fio-username');
+	if (storedUsername)
+		username.value = storedUsername;
+	const storedApiKey = localStorage.getItem('fio-api-key');
+	if (storedApiKey)
+		apiKey.value = storedApiKey;
+}
+document.querySelector('#fetch')!.addEventListener('click', async () => {
+	const supplyForDays = parseInt((document.querySelector('#days') as HTMLInputElement).value, 10);
+	const output = await calculate(username.value, apiKey.value, supplyForDays);
 	console.log(output);
+	localStorage.setItem('fio-username', username.value);
+	localStorage.setItem('fio-api-key', apiKey.value);
 });
 setupPopover();
 
@@ -42,11 +52,11 @@ async function calculate(username: string, apiKey: string, supplyForDays: number
 	}
 	materials.sort((a, b) => b.savings - a.savings);
 
-	const tbody = document.querySelector("tbody")!;
+	const tbody = document.querySelector('tbody')!;
 	tbody.innerHTML = '';
 	const format= new Intl.NumberFormat(undefined, {maximumFractionDigits: 0}).format;
 	for (const m of materials) {
-		const tr = document.createElement("tr");
+		const tr = document.createElement('tr');
 		const buyAmount = Math.max(m.amount - m.bids - m.warehouse, 0);
 		tr.innerHTML = `
 			<td>${m.ticker}</td>

www/buy.html

@@ -13,7 +13,7 @@
 	<main>
 		<form>
 			<label>FIO username: <input type="text" id="username"></label>
-			<label>FIO API key: <input type="text" size="30" id="api-key"></label>
+			<label>FIO API key: <input type="password" size="30" id="api-key"></label>
 			<label>supply for <input type="number" size="2" value="7" id="days"> days</label>
 			<label>CX <input type="text" id="cx" value="IC1" size="3" disabled></label>
 			<input type="button" value="fetch" id="fetch">