feat(core/bolt): hide chars in passphrase input

- hide already written characters in the passphrase keyboard in Bolt
- holding a finger in the input field reveals the whole passphrase in a
potentially multi-line manner

Author: obrusvit

core/.changelog.d/6342.fixed

@@ -0,0 +1 @@
+[T2T1,T3T1] Hide written characters in passphrase keyboard.

core/embed/rust/src/ui/layout_bolt/component/keyboard/passphrase.rs

@@ -1,18 +1,26 @@
 use crate::{
-    strutil::TString,
+    strutil::{ShortString, TString},
+    time::Duration,
     ui::{
         component::{
-            base::ComponentExt, text::common::TextBox, Child, Component, Event, EventCtx, Never,
-            Paginate,
+            base::ComponentExt,
+            text::{
+                common::TextBox,
+                layout::{LayoutFit, LineBreaking},
+                TextStyle,
+            },
+            Child, Component, Event, EventCtx, Never, Pad, Paginate, TextLayout, Timer,
         },
         display,
-        geometry::{Grid, Offset, Rect},
-        shape::{self, Renderer},
-        util::{long_line_content_with_ellipsis, Pager},
+        event::TouchEvent,
+        geometry::{Alignment, Grid, Insets, Offset, Rect},
+        shape::{Bar, Renderer, Text},
+        util::{DisplayStyle, Pager},
     },
 };
 
 use super::super::{
+    super::constant::SCREEN,
     button::{Button, ButtonContent, ButtonMsg},
     keyboard::common::{render_pending_marker, MultiTapKeyboard},
     swipe::{Swipe, SwipeDirection},
@@ -134,9 +142,15 @@ impl PassphraseKeyboard {
         };
 
         self.scrollbar.set_pager(pager);
-        // Clear the pending state.
-        self.input
-            .mutate(ctx, |ctx, i| i.multi_tap.clear_pending_state(ctx));
+        // Clear the pending state. If there was a pending character, it has been
+        // committed; show it briefly then hide.
+        self.input.mutate(ctx, |ctx, i| {
+            if i.multi_tap.pending_key().is_some() {
+                i.multi_tap.clear_pending_state(ctx);
+                i.display_style = DisplayStyle::LastOnly;
+                i.last_char_timer.start(ctx, Input::LAST_DIGIT_TIMEOUT);
+            }
+        });
         // Update buttons.
         self.replace_button_content(ctx, pager.current().into());
         // Reset backlight to normal level on next paint.
@@ -255,9 +269,12 @@ impl Component for PassphraseKeyboard {
     }
 
     fn event(&mut self, ctx: &mut EventCtx, event: Event) -> Option<Self::Msg> {
+        // Handle multi-tap timeout: commit the pending character and show it briefly
         let multitap_timeout = self.input.mutate(ctx, |ctx, i| {
             if i.multi_tap.timeout_event(event) {
                 i.multi_tap.clear_pending_state(ctx);
+                i.display_style = DisplayStyle::LastOnly;
+                i.last_char_timer.start(ctx, Input::LAST_DIGIT_TIMEOUT);
                 true
             } else {
                 false
@@ -266,6 +283,15 @@ impl Component for PassphraseKeyboard {
         if multitap_timeout {
             return None;
         }
+
+        // Handle input touch events (reveal/hide passphrase)
+        self.input.event(ctx, event);
+
+        // When passphrase is shown in full, disable all keypad interaction
+        if self.input.inner().display_style == DisplayStyle::Shown {
+            return None;
+        }
+
         if let Some(swipe) = self.page_swipe.event(ctx, event) {
             // We have detected a horizontal swipe. Change the keyboard page.
             self.on_page_swipe(ctx, swipe);
@@ -286,6 +312,7 @@ impl Component for PassphraseKeyboard {
                     self.input.mutate(ctx, |ctx, i| {
                         i.multi_tap.clear_pending_state(ctx);
                         i.textbox.delete_last(ctx);
+                        i.display_style = DisplayStyle::Hidden;
                     });
                     self.after_edit(ctx);
                     None
@@ -295,6 +322,7 @@ impl Component for PassphraseKeyboard {
                 self.input.mutate(ctx, |ctx, i| {
                     i.multi_tap.clear_pending_state(ctx);
                     i.textbox.clear(ctx);
+                    i.display_style = DisplayStyle::Hidden;
                 });
                 self.after_edit(ctx);
                 return None;
@@ -319,6 +347,15 @@ impl Component for PassphraseKeyboard {
                 self.input.mutate(ctx, |ctx, i| {
                     let edit = text.map(|c| i.multi_tap.click_key(ctx, key, c));
                     i.textbox.apply(ctx, edit);
+                    if text.len() == 1 {
+                        // Single-char key: immediately applied, show last char briefly
+                        i.display_style = DisplayStyle::LastOnly;
+                        i.last_char_timer.start(ctx, Input::LAST_DIGIT_TIMEOUT);
+                    } else {
+                        // Multi-tap key: pending state, show char with marker
+                        i.last_char_timer.stop();
+                        i.display_style = DisplayStyle::LastWithMarker;
+                    }
                 });
                 self.after_edit(ctx);
                 return None;
@@ -328,16 +365,21 @@ impl Component for PassphraseKeyboard {
     }
 
     fn render<'s>(&'s self, target: &mut impl Renderer<'s>) {
-        self.input.render(target);
-        self.scrollbar.render(target);
-        self.confirm.render(target);
-        self.back.render(target);
-        for btn in &self.keys {
-            btn.render(target);
-        }
-        if self.fade.take() {
-            // Note that this is blocking and takes some time.
-            display::fade_backlight(theme::backlight::get_backlight_normal());
+        if self.input.inner().display_style == DisplayStyle::Shown {
+            // When passphrase is revealed, render only the shown overlay
+            self.input.render(target);
+        } else {
+            self.input.render(target);
+            self.scrollbar.render(target);
+            self.confirm.render(target);
+            self.back.render(target);
+            for btn in &self.keys {
+                btn.render(target);
+            }
+            if self.fade.take() {
+                // Note that this is blocking and takes some time.
+                display::fade_backlight(theme::backlight::get_backlight_normal());
+            }
         }
     }
 }
@@ -346,14 +388,129 @@ struct Input {
     area: Rect,
     textbox: TextBox,
     multi_tap: MultiTapKeyboard,
+    display_style: DisplayStyle,
+    last_char_timer: Timer,
+    pad: Pad,
+    shown_area: Rect,
 }
 
 impl Input {
+    const TWITCH: i16 = 4;
+    const LAST_DIGIT_TIMEOUT: Duration = Duration::from_secs(1);
+    const STYLE: TextStyle =
+        theme::label_keyboard().with_line_breaking(LineBreaking::BreakWordsNoHyphen);
+    const SHOWN_INSETS: Insets = Insets::new(8, 10, 8, 10);
+    const SHOWN_TOUCH_OUTSET: Insets = Insets::bottom(80);
+
     fn new(max_len: usize) -> Self {
         Self {
             area: Rect::zero(),
             textbox: TextBox::empty(max_len),
             multi_tap: MultiTapKeyboard::new(),
+            display_style: DisplayStyle::Hidden,
+            last_char_timer: Timer::new(),
+            pad: Pad::with_background(theme::BG),
+            shown_area: Rect::zero(),
+        }
+    }
+
+    fn update_shown_area(&mut self) {
+        let line_height = Self::STYLE.text_font.line_height();
+
+        // Start with full screen width, positioned at the input area top
+        let initial_height = line_height + Self::SHOWN_INSETS.top + Self::SHOWN_INSETS.bottom;
+        let mut shown_area = SCREEN.inset(Self::SHOWN_INSETS).with_height(initial_height);
+
+        // Extend the shown area until the text fits
+        while let LayoutFit::OutOfBounds { .. } = TextLayout::new(Self::STYLE)
+            .with_align(Alignment::Start)
+            .with_bounds(shown_area.inset(Self::SHOWN_INSETS))
+            .fit_text(self.textbox.content())
+        {
+            shown_area = shown_area.outset(Insets::bottom(line_height));
+        }
+
+        self.shown_area = shown_area;
+    }
+
+    fn render_shown<'s>(&self, target: &mut impl Renderer<'s>) {
+        debug_assert_eq!(self.display_style, DisplayStyle::Shown);
+
+        Bar::new(self.shown_area)
+            .with_bg(theme::GREY_DARK)
+            .with_radius(theme::RADIUS as i16)
+            .render(target);
+
+        TextLayout::new(Self::STYLE)
+            .with_bounds(self.shown_area.inset(Self::SHOWN_INSETS))
+            .with_align(Alignment::Start)
+            .render_text(self.textbox.content(), target, true);
+    }
+
+    fn render_hidden<'s>(&self, target: &mut impl Renderer<'s>) {
+        debug_assert_ne!(self.display_style, DisplayStyle::Shown);
+
+        let style = theme::label_keyboard();
+        let pp_len = self.textbox.count();
+        if pp_len == 0 {
+            return;
+        }
+
+        let last_char_visible = self.display_style == DisplayStyle::LastOnly
+            || self.display_style == DisplayStyle::LastWithMarker;
+
+        // Compute how many characters fit in the available width. Account for the
+        // pending marker, which draws itself one pixel longer than the last char.
+        let available_width = self.area.width() - 1;
+        let asterisk_width = style.text_font.char_width('*').max(1);
+        let max_visible = (available_width / asterisk_width).max(1) as usize;
+        let visible_count = pp_len.min(max_visible);
+        let asterisk_count = visible_count.saturating_sub(last_char_visible as usize);
+
+        // Build asterisks string
+        let mut asterisks = ShortString::new();
+        for _ in 0..asterisk_count {
+            let _ = asterisks.push('*');
+        }
+
+        let mut text_baseline = self.area.top_left() + Offset::y(style.text_font.text_height())
+            - Offset::y(style.text_font.text_baseline());
+
+        // Twitch when overflowed (alternates so user sees feedback when typing past
+        // what fits)
+        if pp_len > max_visible && pp_len % 2 == 1 {
+            text_baseline.x += Self::TWITCH;
+        }
+
+        // Render asterisks in GREY_LIGHT
+        if !asterisks.is_empty() {
+            Text::new(text_baseline, &asterisks, style.text_font)
+                .with_align(Alignment::Start)
+                .with_fg(theme::GREY_LIGHT)
+                .render(target);
+        }
+
+        // Render the visible last character in the regular text color
+        if last_char_visible {
+            if let Some(last) = self.textbox.last_char_str() {
+                let last_baseline =
+                    text_baseline + Offset::x(style.text_font.text_width(&asterisks));
+
+                Text::new(last_baseline, last, style.text_font)
+                    .with_align(Alignment::Start)
+                    .with_fg(style.text_color)
+                    .render(target);
+
+                if self.display_style == DisplayStyle::LastWithMarker {
+                    render_pending_marker(
+                        target,
+                        last_baseline,
+                        last,
+                        style.text_font,
+                        style.text_color,
+                    );
+                }
+            }
         }
     }
 }
@@ -362,44 +519,64 @@ impl Component for Input {
     type Msg = Never;
 
     fn place(&mut self, bounds: Rect) -> Rect {
+        self.pad.place(bounds);
         self.area = bounds;
         self.area
     }
 
-    fn event(&mut self, _ctx: &mut EventCtx, _event: Event) -> Option<Self::Msg> {
+    fn event(&mut self, ctx: &mut EventCtx, event: Event) -> Option<Self::Msg> {
+        if self.textbox.is_empty() {
+            return None;
+        }
+
+        let extended_shown_area = self
+            .shown_area
+            .outset(Self::SHOWN_TOUCH_OUTSET)
+            .clamp(SCREEN);
+
+        match event {
+            Event::Touch(TouchEvent::TouchStart(pos)) if self.area.contains(pos) => {
+                self.multi_tap.clear_pending_state(ctx);
+                self.last_char_timer.stop();
+                self.display_style = DisplayStyle::Shown;
+                self.update_shown_area();
+                self.pad.clear();
+                ctx.request_paint();
+            }
+            Event::Touch(TouchEvent::TouchEnd(_)) if self.display_style == DisplayStyle::Shown => {
+                self.display_style = DisplayStyle::Hidden;
+                self.pad.clear();
+                ctx.request_paint();
+            }
+            Event::Touch(TouchEvent::TouchMove(pos))
+                if !extended_shown_area.contains(pos)
+                    && self.display_style == DisplayStyle::Shown =>
+            {
+                self.display_style = DisplayStyle::Hidden;
+                self.pad.clear();
+                ctx.request_paint();
+            }
+            // Timeout for showing the last char
+            Event::Timer(_) if self.last_char_timer.expire(event) => {
+                self.display_style = DisplayStyle::Hidden;
+                self.request_complete_repaint(ctx);
+                ctx.request_paint();
+            }
+            _ => {}
+        }
         None
     }
 
     fn render<'s>(&'s self, target: &mut impl Renderer<'s>) {
-        let style = theme::label_keyboard();
+        self.pad.render(target);
 
-        let text_baseline = self.area.top_left() + Offset::y(style.text_font.text_height())
-            - Offset::y(style.text_font.text_baseline());
-
-        let text = self.textbox.content();
-
-        shape::Bar::new(self.area).with_bg(theme::BG).render(target);
-
-        // Find out how much text can fit into the textbox.
-        // Accounting for the pending marker, which draws itself one pixel longer than
-        // the last character
-        let available_area_width = self.area.width() - 1;
-        let text_to_display =
-            long_line_content_with_ellipsis(text, "...", style.text_font, available_area_width);
-
-        shape::Text::new(text_baseline, &text_to_display, style.text_font)
-            .with_fg(style.text_color)
-            .render(target);
+        if self.textbox.is_empty() {
+            return;
+        }
 
-        // Paint the pending marker.
-        if self.multi_tap.pending_key().is_some() {
-            render_pending_marker(
-                target,
-                text_baseline,
-                &text_to_display,
-                style.text_font,
-                style.text_color,
-            );
+        match self.display_style {
+            DisplayStyle::Shown => self.render_shown(target),
+            _ => self.render_hidden(target),
         }
     }
 }
@@ -410,8 +587,10 @@ impl crate::trace::Trace for PassphraseKeyboard {
         let page = self.scrollbar.pager().current();
         debug_assert!(page < PAGE_COUNT as u16);
         let active_layout = uformat!("{:?}", KeyboardLayout::from_page_unchecked(page.into()));
+        let display_style = uformat!("{:?}", self.input.inner().display_style);
         t.component("PassphraseKeyboard");
         t.string("active_layout", active_layout.as_str().into());
         t.string("passphrase", self.passphrase().into());
+        t.string("display_style", display_style.as_str().into());
     }
 }