Scenes

auth-verification

Builds Button Callout Card FormField OneTimeCodeInput

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_verification(window: &mut Window, cx: &mut App) -> AnyElement {
    ensure_auth_verification(window, cx);
    let code = cx.global::<SceneAuthVerification>().code.clone();
    let theme = cx.theme().clone();
    let card_id = "scene.auth.verification.card";
    let title = crate::foundation::text(&theme, TypeScale::Title, "Verify sign-in").semantic_in(
        cx,
        NodeSpec::new("scene.auth.verification.title", Role::Text)
            .parent(card_id)
            .text("Verify 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(
                            "Enter the code from your authenticator or recovery method.",
                            Tone::Neutral,
                        )
                        .id("scene.auth.verification.guidance"),
                    )
                    .child(
                        FormField::new("scene.auth.verification.code.field", "Verification code")
                            .control("scene.auth.verification.code")
                            .required(true)
                            .child(code),
                    )
                    .child(
                        Button::new("scene.auth.verification.submit")
                            .label("Verify")
                            .full_width(true)
                            .on_click(|_, _| {}),
                    )
                    .child(
                        Button::new("scene.auth.verification.alternative")
                            .label("Use another method")
                            .secondary()
                            .full_width(true)
                            .on_click(|_, _| {}),
                    )
                    .child(
                        Button::new("scene.auth.verification.recovery")
                            .label("Use a recovery option")
                            .link()
                            .on_click(|_, _| {}),
                    ),
            ),
        )
        .into_any_element()
}