@authduo/authduo/x/manager/views/common/passport-editor/view.js

Free User-sovereign Authentication for the World

import { deep, html, shadowView } from "@benev/slate";
import stylesCss from "./styles.css.js";
import { whence } from "../../../../tools/whence.js";
import themeCss from "../../../../common/theme.css.js";
import { IdView } from "../../../../common/views/id/view.js";
import { inputString } from "../../../../tools/input-string.js";
import { maxNameLength, validName } from "../../../../auth/utils/validation.js";
export const PassportEditor = shadowView(use => ({ passport, onUpdate }) => {
    use.name("passport-editor");
    use.styles([themeCss, stylesCss]);
    const name = use.signal(passport.name);
    const valid = use.signal(true);
    function validate() {
        valid.value = validName(name.value);
        if (valid.value) {
            const draft = deep.clone(passport);
            draft.name = name.value;
            onUpdate(draft);
        }
        else {
            onUpdate(null);
        }
    }
    function updateName(n) {
        name.value = n;
        validate();
    }
    return html `
		<section class=form>
			<label>
				<strong>Public Name</strong>

				<input
					type=text
					.value="${name.value}"
					maxlength="${maxNameLength}"
					@input="${inputString(updateName)}"
					?data-angry="${!validName(name.value)}"
					/>

				<small class=details>
					<span>${whence(passport.created)}</span>
					<span>${IdView([passport.thumbprint])}</span>
				</small>

				${!validName(name.value) ? html `
					<span class=invalid>invalid name</span>
				` : null}

			</label>

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