@authduo/authduo
Version:
Free User-sovereign Authentication for the World
67 lines (63 loc) • 1.98 kB
JavaScript
import { html, shadowView } from "@benev/slate";
import stylesCss from "./styles.css.js";
import themeCss from "../../../../common/theme.css.js";
import { Breakdown } from "../../common/breakdown/view.js";
import { PassportsFile } from "../../../../auth/passports-file.js";
export const IngressPage = shadowView(use => (situation) => {
use.styles([themeCss, stylesCss]);
const passports = use.signal([]);
const problems = use.signal([]);
async function handleUpload(event) {
const input = event.currentTarget;
const files = Array.from(input.files ?? []);
passports.value = [];
problems.value = [];
for (const file of files) {
try {
const text = await file.text();
const passportsFile = PassportsFile.fromData(JSON.parse(text));
passports.value = [...passports.value, ...passportsFile.list()];
}
catch {
problems.value = [...problems.value, `error with file "${file.name}"`];
}
}
}
function accept() {
situation.onAddPassports(passports.value);
situation.onBack();
}
return html `
<section class=plate>
<header>
<h2 class=instruction>Import passport files from your device</h2>
</header>
<input
type="file"
multiple
accept=".${PassportsFile.extension}"
@change="${handleUpload}"
/>
${problems.value.length > 0 ? html `
<ol class=problems>
${problems.value.map(problem => html `
<li>${problem}</li>
`)}
</ol>
` : null}
${passports.value.length > 0 ? html `
${Breakdown([passports.value])}
` : null}
<footer class=buttonbar>
<button @click="${situation.onBack}">Cancel</button>
<button
class=happy
?disabled="${passports.value.length === 0}"
@click="${accept}">
Import Passports
</button>
</footer>
</section>
`;
});
//# sourceMappingURL=view.js.map