guise/input/
password.rs

1//! `PasswordInput` — a masked text field with a visibility toggle (gpui entity).
2//!
3//! Owns its buffer and focus like [`TextInput`](super::TextInput) in password
4//! mode, plus an eye button that reveals the plain text while toggled. Emits
5//! [`PasswordInputEvent`] on edit and submit.
6//!
7//! ```ignore
8//! let secret = cx.new(|cx| {
9//!     PasswordInput::new(cx)
10//!         .label("Password")
11//!         .placeholder("At least 8 characters")
12//! });
13//! cx.subscribe(&secret, |_this, _input, event: &PasswordInputEvent, _cx| {
14//!     if let PasswordInputEvent::Submit(value) = event { /* log in */ }
15//! })
16//! .detach();
17//! ```
18
19use gpui::prelude::*;
20use gpui::{
21    div, px, App, Context, Entity, EventEmitter, FocusHandle, IntoElement, KeyDownEvent,
22    SharedString, Window,
23};
24
25use super::line::{self, Line, LineEditor, LineState};
26use super::{control_metrics, edit::TextEdit, Field, KeyOutcome};
27use crate::devtools::ProbedAny;
28use crate::icon::{Icon, IconName};
29use crate::reactive::Signal;
30use crate::theme::{theme, ColorName, Size};
31
32/// Emitted as the user edits or submits the field.
33#[derive(Debug, Clone)]
34pub enum PasswordInputEvent {
35    /// The text changed. Carries the full new value.
36    Change(String),
37    /// The user pressed Enter. Carries the current value.
38    Submit(String),
39}
40
41/// A password field with an eye toggle. Create with
42/// `cx.new(|cx| PasswordInput::new(cx))`.
43pub struct PasswordInput {
44    edit: TextEdit,
45    state: LineState,
46    focus: FocusHandle,
47    visible: bool,
48    placeholder: SharedString,
49    label: Option<SharedString>,
50    description: Option<SharedString>,
51    error: Option<SharedString>,
52    size: Size,
53    disabled: bool,
54    read_only: bool,
55    max_length: Option<usize>,
56}
57
58impl EventEmitter<PasswordInputEvent> for PasswordInput {}
59
60impl PasswordInput {
61    pub fn new(cx: &mut Context<Self>) -> Self {
62        PasswordInput {
63            edit: TextEdit::new(""),
64            state: LineState::new(),
65            focus: cx.focus_handle().tab_stop(true),
66            visible: false,
67            placeholder: SharedString::default(),
68            label: None,
69            description: None,
70            error: None,
71            size: Size::Sm,
72            disabled: false,
73            read_only: false,
74            max_length: None,
75        }
76    }
77
78    pub fn value(mut self, value: &str) -> Self {
79        self.edit = TextEdit::new(value);
80        self
81    }
82
83    pub fn placeholder(mut self, placeholder: impl Into<SharedString>) -> Self {
84        self.placeholder = placeholder.into();
85        self
86    }
87
88    pub fn label(mut self, label: impl Into<SharedString>) -> Self {
89        self.label = Some(label.into());
90        self
91    }
92
93    pub fn description(mut self, description: impl Into<SharedString>) -> Self {
94        self.description = Some(description.into());
95        self
96    }
97
98    pub fn error(mut self, error: impl Into<SharedString>) -> Self {
99        self.error = Some(error.into());
100        self
101    }
102
103    pub fn size(mut self, size: Size) -> Self {
104        self.size = size;
105        self
106    }
107
108    pub fn disabled(mut self, disabled: bool) -> Self {
109        self.disabled = disabled;
110        self
111    }
112
113    /// Start with the text revealed (the eye still toggles it).
114    pub fn visible(mut self, visible: bool) -> Self {
115        self.visible = visible;
116        self
117    }
118
119    /// Selectable but not editable, like an `<input readonly>`.
120    pub fn read_only(mut self, read_only: bool) -> Self {
121        self.read_only = read_only;
122        self
123    }
124
125    /// Cap the value's length in characters, like `<input maxlength>`.
126    pub fn max_length(mut self, max: usize) -> Self {
127        self.max_length = Some(max);
128        self
129    }
130
131    /// The current text.
132    pub fn text(&self) -> String {
133        self.edit.text()
134    }
135
136    /// Replace the text programmatically.
137    pub fn set_text(&mut self, value: &str, cx: &mut Context<Self>) {
138        self.edit.set_text(value);
139        cx.notify();
140    }
141
142    /// Two-way bind this input's text to a `Signal<String>`. The signal is
143    /// the source of truth: the field adopts its value now, edits write back
144    /// through [`Signal::set_if_changed`], and signal writes replace the text.
145    /// Equality guards on both directions prevent update loops.
146    pub fn bind(entity: &Entity<PasswordInput>, signal: &Signal<String>, cx: &mut App) {
147        let initial = signal.get(cx);
148        entity.update(cx, |this, cx| {
149            if this.text() != initial {
150                this.set_text(&initial, cx);
151            }
152        });
153        let sink = signal.clone();
154        cx.subscribe(entity, move |_input, event: &PasswordInputEvent, cx| {
155            if let PasswordInputEvent::Change(text) = event {
156                sink.set_if_changed(cx, text.clone());
157            }
158        })
159        .detach();
160        let input = entity.downgrade();
161        cx.observe(signal.entity(), move |observed, cx| {
162            let value = observed.read(cx).clone();
163            input
164                .update(cx, |this, cx| {
165                    if this.text() != value {
166                        this.set_text(&value, cx);
167                    }
168                })
169                .ok();
170        })
171        .detach();
172    }
173
174    fn on_key(&mut self, event: &KeyDownEvent, window: &mut Window, cx: &mut Context<Self>) {
175        if self.disabled {
176            return;
177        }
178        match line::keys(self, event, window, cx) {
179            KeyOutcome::Submit => {
180                cx.emit(PasswordInputEvent::Submit(self.edit.text()));
181                cx.notify();
182                cx.stop_propagation();
183            }
184            KeyOutcome::Edited => {
185                self.line_changed(cx);
186                cx.stop_propagation();
187            }
188            // Escape and unhandled keys bubble to the host.
189            KeyOutcome::Cancel | KeyOutcome::Pass => {}
190        }
191    }
192}
193
194impl LineEditor for PasswordInput {
195    fn edit(&self) -> &TextEdit {
196        &self.edit
197    }
198
199    fn edit_mut(&mut self) -> &mut TextEdit {
200        &mut self.edit
201    }
202
203    fn line(&self) -> &LineState {
204        &self.state
205    }
206
207    fn line_mut(&mut self) -> &mut LineState {
208        &mut self.state
209    }
210
211    fn line_focus(&self) -> &FocusHandle {
212        &self.focus
213    }
214
215    /// Revealing the field with the eye is a deliberate act, so it also lifts
216    /// the copy block — otherwise the toggle would be for looking only.
217    fn line_masked(&self) -> bool {
218        !self.visible
219    }
220
221    fn line_read_only(&self) -> bool {
222        self.read_only || self.disabled
223    }
224
225    fn line_max_length(&self) -> Option<usize> {
226        self.max_length
227    }
228
229    fn line_changed(&mut self, cx: &mut Context<Self>) {
230        cx.emit(PasswordInputEvent::Change(self.edit.text()));
231        cx.notify();
232    }
233}
234
235line::line_input_handler!(PasswordInput);
236line::line_focus_builders!(PasswordInput);
237
238impl Render for PasswordInput {
239    fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
240        let t = theme(cx);
241        let (height, pad_x, font) = control_metrics(self.size);
242        let radius = t.radius(t.default_radius);
243        let focused = self.focus.is_focused(window) && !self.disabled;
244
245        let border = if self.error.is_some() {
246            t.color(ColorName::Red, 6)
247        } else if focused {
248            t.primary()
249        } else {
250            t.border()
251        }
252        .hsla();
253        let text_color = t.text().hsla();
254        let dimmed = t.dimmed().hsla();
255        let surface = t.surface().hsla();
256        let interior = Line::new(cx.entity()).placeholder(self.placeholder.clone(), dimmed);
257
258        // While hidden the eye offers "reveal"; while revealed it offers "hide".
259        let eye_icon = if self.visible {
260            IconName::EyeOff
261        } else {
262            IconName::Eye
263        };
264        let eye = div()
265            .id("guise-password-eye")
266            .flex()
267            .items_center()
268            .justify_center()
269            .w(px(height - 16.0))
270            .h(px(height - 16.0))
271            .rounded(px(4.0))
272            .text_color(dimmed)
273            .cursor_pointer()
274            .hover(move |s| s.text_color(text_color))
275            .child(Icon::new(eye_icon).size(Size::Xs))
276            .on_click(cx.listener(|this, _ev, _window, cx| {
277                if !this.disabled {
278                    this.visible = !this.visible;
279                    cx.notify();
280                }
281            }));
282
283        let field = line::wire(div().id("guise-passwordinput"), &self.focus, cx)
284            .on_key_down(cx.listener(Self::on_key))
285            .flex()
286            .items_center()
287            .justify_between()
288            .gap(px(8.0))
289            .w_full()
290            .overflow_hidden()
291            .h(px(height))
292            .px(px(pad_x))
293            .rounded(px(radius))
294            .border_1()
295            .border_color(border)
296            .bg(surface)
297            .text_size(px(font))
298            .line_height(px(font * 1.3))
299            .child(div().flex_1().min_w(px(0.0)).child(interior))
300            .child(eye);
301
302        let mut chrome = Field::new().child(if self.disabled {
303            field.opacity(0.6)
304        } else {
305            field
306        });
307        if let Some(label) = self.label.clone() {
308            chrome = chrome.label(label);
309        }
310        if let Some(error) = self.error.clone() {
311            chrome = chrome.error(error);
312        } else if let Some(description) = self.description.clone() {
313            chrome = chrome.description(description);
314        }
315        chrome.probe_any("PasswordInput")
316    }
317}
guise/input/password.rs

guise/input/
password.rs
