@authduo/authduo/x/manager/views/pages/onboard/view.js

Free User-sovereign Authentication for the World

import { html, shadowView } from "@benev/slate";
import stylesCss from "./styles.css.js";
import { manager } from "../../../context.js";
import themeCss from "../../../../common/theme.css.js";
import { PassportEditor } from "../../common/passport-editor/view.js";
export const OnboardPage = shadowView(use => (situation) => {
    use.styles([themeCss, stylesCss]);
    const purpose = manager.purpose.value;
    const passport = use.signal(situation.passport);
    function save() {
        if (passport.value) {
            situation.onSaveNewPassport(passport.value);
            situation.onDone();
        }
    }
    function login() {
        if (purpose.kind === "login" && passport.value) {
            situation.onSaveNewPassport(passport.value);
            purpose.onLogin(passport.value);
        }
    }
    return html `
		<div class=plate>
			<header class=instruction>
				${purpose.kind === "login" ? html `
						<h2>Create a login for <code class=domain>${purpose.hostname}</code></h2>
					` : html `
					<h2>Create your first digital passport</h2>
				`}
			</header>

			${PassportEditor([{
            passport: situation.passport,
            onUpdate: updated => passport.value = updated,
        }])}

			<footer class=buttonbar>
				<button @click="${situation.onIngress}">
					Import Existing
				</button>

				${purpose.kind === "login" ? html `
					<button class=login
						?disabled="${!passport.value}"
						@click="${login}">
							Login
					</button>
				` : html `
					<button class=happy
						?disabled="${!passport.value}"
						@click="${save}">
							Create
					</button>
				`}

			</footer>
		</div>
	`;
});
//# sourceMappingURL=view.js.map