@e280/authlocal
Version:
User-sovereign login system for everybody
78 lines • 2.88 kB
JavaScript
import { Thumbprint } from "@e280/stz";
import { html, shadowView } from "@benev/slate";
import stylesCss from "./styles.css.js";
import themeCss from "../../../theme.css.js";
import { Tabby } from "../../common/tabby/view.js";
import { constants } from "../../../../constants.js";
import { Confirmer } from "../../common/confirmer/view.js";
import { seedPack } from "../../../../trust/exports/authority.js";
import { SeedReveal } from "../../common/seed-reveal/view.js";
import { IdentityDraft } from "../../common/identity-widget/draft.js";
import { crushUsername } from "../../../../common/utils/crush-username.js";
import { identityWidget, IdentityWidget } from "../../common/identity-widget/view.js";
export const EditPage = shadowView(use => (situation) => {
use.name("edit-page");
use.styles([themeCss, stylesCss]);
const seed = use.signal(situation.seed);
const draft = use.once(() => new IdentityDraft(situation.identity));
const clickBack = () => situation.onBack();
const clickSave = async () => {
const identity = draft.getValidEditedIdentity();
if (identity) {
draft.identity = identity;
seed.value = await seedPack(identity);
await situation.onSave(identity);
}
};
const label = draft.getValidEditedIdentity()?.label ?? draft.identity.label;
const tabby = use.once(() => new Tabby(0));
const { tabs, panel } = tabby.render([
{ button: () => html `Edit`, panel: () => html `
${IdentityWidget([draft, { editable: true }], { content: html `
<button
theme-button=happy
@click="${clickSave}"
?disabled="${!draft.hasValidChanges()}">
Save
</button>
` })}
` },
{ button: () => html `Seed`, panel: () => html `
${identityWidget(draft.identity)}
<section theme-group class=seedtext>
${SeedReveal([
seed.value,
crushUsername(label) + constants.seedExtension,
])}
</section>
` },
{ button: () => html `Deletion`, panel: () => html `
${identityWidget(draft.identity)}
<section theme-zone=danger>
<h2>Delete this identity</h2>
${Confirmer([{
buttonLabel: () => "Delete",
requiredText: Thumbprint.sigil.fromHex(draft.identity.id),
onConfirmed: async () => {
await situation.onDelete(draft.identity);
await situation.onBack();
},
}], { content: html `
<h2 class=delete-heading>Delete "${draft.identity.label}"</h2>
` })}
</section>
` },
]);
return html `
<section theme-plate>
${tabs}
${panel}
<footer theme-buttons>
<button theme-button=back @click="${clickBack}">
Back
</button>
</footer>
</section>
`;
});
//# sourceMappingURL=view.js.map