Misc · Codes and checks: a QR code scanner and a captcha

misc::QrCodeScanner reads QR codes with rqrr 0.11 from the frames the
host hands in, one at a time off the main thread, and hands each code
to the owner once. misc::Captcha shows the owner's picture over an
answer field that empties and keeps focus with each answer; the owner
says how it stood. BarcodeDisplay, Signature and Rating Widget point
to their homes.

src/misc/captcha.rs

@@ -0,0 +1,193 @@
+use std::rc::Rc;
+
+use gpui::{
+    App, ElementId, ImageSource, InteractiveElement, IntoElement, ParentElement, RenderOnce,
+    SharedString, Styled, Window, div, prelude::*,
+};
+
+use crate::{
+    buttons::{Button, ButtonVariant, IconButton},
+    feedback::InlineMessage,
+    forms::{Enter, Input, TextInput},
+    primitives::{FocusRing, Icon, IconName, Image, Severity, checked_ratio, framed, tab_stop},
+    theme::{ActiveTheme, ControlSize, IconSize, Radius},
+};
+
+type OnAnswer = Rc<dyn Fn(&SharedString, &mut Window, &mut App)>;
+type OnRefresh = Rc<dyn Fn(&mut Window, &mut App)>;
+
+/// Where a captcha stands, as its owner says.
+#[derive(Clone, Copy, Debug, Default, PartialEq, Eq)]
+pub enum CaptchaState {
+    #[default]
+    Asking,
+    /// The owner checks the answer: Verify spins and takes no press.
+    Checking,
+    /// The answer did not match.
+    Wrong,
+    /// The field rests, and Verify becomes a mark that keeps its focus.
+    Passed,
+}
+
+/// A picture of characters to copy, from the owner, over a field to type them. Verify or Enter hands the answer to the owner, who checks it and says how it stood; the field empties with each answer and keeps focus. With `on_refresh`, a button asks the owner for a new picture.
+#[derive(IntoElement)]
+pub struct Captcha {
+    id: ElementId,
+    picture: ImageSource,
+    ratio: f32,
+    state: CaptchaState,
+    on_answer: Option<OnAnswer>,
+    on_refresh: Option<OnRefresh>,
+}
+
+impl Captcha {
+    /// `ratio` is the picture's width over its height.
+    pub fn new(id: impl Into<ElementId>, picture: impl Into<ImageSource>, ratio: f32) -> Self {
+        Self {
+            id: id.into(),
+            picture: picture.into(),
+            ratio: checked_ratio(ratio),
+            state: CaptchaState::default(),
+            on_answer: None,
+            on_refresh: None,
+        }
+    }
+
+    pub fn state(mut self, state: CaptchaState) -> Self {
+        self.state = state;
+        self
+    }
+
+    /// Runs with the typed answer, trimmed.
+    pub fn on_answer(
+        mut self,
+        handler: impl Fn(&SharedString, &mut Window, &mut App) + 'static,
+    ) -> Self {
+        self.on_answer = Some(Rc::new(handler));
+        self
+    }
+
+    /// Asks for a new picture.
+    pub fn on_refresh(mut self, handler: impl Fn(&mut Window, &mut App) + 'static) -> Self {
+        self.on_refresh = Some(Rc::new(handler));
+        self
+    }
+}
+
+impl RenderOnce for Captcha {
+    fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
+        let id = self.id;
+        let on_answer = self
+            .on_answer
+            .unwrap_or_else(|| panic!("captcha {id:?} has no on_answer"));
+        let field = window.use_keyed_state((id.clone(), "field"), cx, |window, cx| {
+            TextInput::new(window, cx).placeholder("Type the characters")
+        });
+        let passed = self.state == CaptchaState::Passed;
+        if field.read(cx).is_disabled() != passed {
+            field.update(cx, |field, cx| field.set_disabled(passed, cx));
+        }
+        let verify = tab_stop((id.clone(), "verify").into(), !passed, window, cx);
+        let empty = field.read(cx).text().trim().is_empty();
+        let answer = {
+            let field = field.clone();
+            Rc::new(move |window: &mut Window, cx: &mut App| {
+                let text = SharedString::from(field.read(cx).text().trim().to_string());
+                if text.is_empty() {
+                    return;
+                }
+                log::info!("captcha: answered");
+                on_answer(&text, window, cx);
+                field.update(cx, |field, cx| field.set_text("", cx));
+                window.focus(field.read(cx).focus());
+            })
+        };
+        let theme = cx.theme();
+        let colors = &theme.colors;
+        let radius = theme.radius(Radius::Md);
+        let action = match passed {
+            true => div()
+                .id((id.clone(), "verified"))
+                .debug_selector(|| "captcha-verified".into())
+                .track_focus(&verify)
+                .flex()
+                .flex_none()
+                .items_center()
+                .gap_1()
+                .h(theme.control_height(ControlSize::Md))
+                .px(theme.control_padding(ControlSize::Md))
+                .rounded(radius)
+                .border_1()
+                .border_color(colors.border.alpha(0.0))
+                .focus_ring(cx)
+                .text_color(colors.success)
+                .child(
+                    Icon::new(IconName::Check)
+                        .size(IconSize::Sm)
+                        .color(colors.success),
+                )
+                .child("Verified")
+                .into_any_element(),
+            false => {
+                let answer = answer.clone();
+                Button::new((id.clone(), "verify-button"), "Verify")
+                    .variant(ButtonVariant::Primary)
+                    .focus_handle(&verify)
+                    .loading(self.state == CaptchaState::Checking)
+                    .disabled(empty && self.state != CaptchaState::Checking)
+                    .on_click(move |_, window, cx| answer(window, cx))
+                    .into_any_element()
+            }
+        };
+        let refresh = self.on_refresh.map(|on_refresh| {
+            IconButton::new((id.clone(), "refresh"), IconName::RefreshCw)
+                .tooltip("New picture")
+                .on_click(move |_, window, cx| {
+                    log::info!("captcha: asked for a new picture");
+                    on_refresh(window, cx)
+                })
+        });
+        div()
+            .flex()
+            .flex_col()
+            .gap_2()
+            .child(
+                div()
+                    .flex()
+                    .items_center()
+                    .gap_2()
+                    .child(
+                        div().flex_1().min_w_0().child(
+                            framed(self.ratio, cx).rounded(radius).child(
+                                Image::new((id.clone(), "picture"), self.picture)
+                                    .size_full()
+                                    .rounded(radius),
+                            ),
+                        ),
+                    )
+                    .children(refresh),
+            )
+            .child(
+                div()
+                    .flex()
+                    .items_center()
+                    .gap_2()
+                    .child(
+                        div()
+                            .flex_1()
+                            .min_w_0()
+                            .capture_action(move |_: &Enter, window, cx| {
+                                cx.stop_propagation();
+                                answer(window, cx);
+                            })
+                            .child(Input::new(&field)),
+                    )
+                    .child(action),
+            )
+            .when(self.state == CaptchaState::Wrong, |captcha| {
+                captcha.child(div().debug_selector(|| "captcha-wrong".into()).child(
+                    InlineMessage::new(Severity::Danger, "That did not match; try again."),
+                ))
+            })
+    }
+}