Scenes

auth-sign-in

Builds Button Callout Card FormField Icon PasswordInput

The code that drew it

A still frame holds a repeating animation at its first frame and a one-shot at its last, because a still of a moving thing is not reproducible. Run the gallery to review motion.

fn auth_sign_in(window: &mut Window, cx: &mut App) -> AnyElement {
    ensure_auth_sign_in(window, cx);
    let password = cx.global::<SceneAuthSignIn>().password.clone();
    let theme = cx.theme().clone();
    let card_id = "scene.auth.sign-in.card";
    let title = crate::foundation::text(&theme, TypeScale::Title, "Sign in").semantic_in(
        cx,
        NodeSpec::new("scene.auth.sign-in.title", Role::Text)
            .parent(card_id)
            .text("Sign in"),
    );

    stack(&theme)
        .w(px(440.0))
        .child(
            Card::new().id(card_id).padded(true).child(
                div()
                    .column()
                    .gap_token(&theme, Space::Md)
                    .child(title)
                    .child(
                        Callout::new("Credentials are verified by the caller.", Tone::Neutral)
                            .id("scene.auth.sign-in.boundary"),
                    )
                    .child(
                        FormField::new("scene.auth.sign-in.password.field", "Password")
                            .control("scene.auth.sign-in.password")
                            .required(true)
                            .child(password),
                    )
                    .child(
                        Button::new("scene.auth.sign-in.submit")
                            .label("Sign in")
                            .full_width(true)
                            .on_click(|_, _| {}),
                    )
                    .child(
                        Button::new("scene.auth.sign-in.passkey")
                            .label("Continue with passkey")
                            .icon(Icon::Key)
                            .secondary()
                            .full_width(true)
                            .on_click(|_, _| {}),
                    )
                    .child(
                        Button::new("scene.auth.sign-in.organization")
                            .label("Continue with organization sign-on")
                            .icon(Icon::Global)
                            .secondary()
                            .full_width(true)
                            .on_click(|_, _| {}),
                    )
                    .child(
                        Button::new("scene.auth.sign-in.recovery")
                            .label("Use a recovery option")
                            .link()
                            .on_click(|_, _| {}),
                    ),
            ),
        )
        .into_any_element()
}