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

Free User-sovereign Authentication for the World

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 { signalInput } from "../../../../tools/signal-input.js";
export const DeletePage = shadowView(use => (situation) => {
    use.styles([themeCss, stylesCss]);
    const { passport } = situation;
    const thumb = use.once(() => passport.thumbprint.slice(0, 5));
    const confirmation = use.signal("");
    const confirmationAccepted = use.computed(() => confirmation.value.toLowerCase() === thumb.toLowerCase());
    function deleteForever() {
        situation.onComplete(passport);
    }
    return html `
		<div class=plate>
			<header>
				<h2 class=instruction>Delete Passport?</h2>
			</header>

			<p>Are you absolutely super-duper sure you want to delete this passport? It will be <strong>gone forever</strong>, unless you have it saved elsewhere.</p>

			${Breakdown([[passport]])}

			<label>
				<span>If you're certain, confirm by typing "<code>${thumb}</code>" exactly:</span>
				<input type=text .value="${confirmation}" @input="${signalInput(confirmation)}"/>
			</label>

			<footer class=buttonbar>
				<button @click="${() => situation.onCancel()}">
					Cancel
				</button>

				<button
					class=angry
					?disabled="${!confirmationAccepted.value}"
					@click="${deleteForever}">
					Delete Forever
				</button>
			</footer>
		</div>
	`;
});
//# sourceMappingURL=view.js.map