diff --git a/frontend/src/components/login.rs b/frontend/src/components/login.rs index 174823f..ca345eb 100644 --- a/frontend/src/components/login.rs +++ b/frontend/src/components/login.rs @@ -23,6 +23,9 @@ pub fn Login(props: &LoginProps) -> Html { // Remember checkboxes state - default to checked let remember_server = use_state(|| true); let remember_username = use_state(|| true); + + // Password visibility toggle + let show_password = use_state(|| false); let server_url_ref = use_node_ref(); let username_ref = use_node_ref(); @@ -97,6 +100,13 @@ pub fn Login(props: &LoginProps) -> Html { } }) }; + + let on_toggle_password_visibility = { + let show_password = show_password.clone(); + Callback::from(move |_| { + show_password.set(!*show_password); + }) + }; let on_submit = { let server_url = server_url.clone(); @@ -242,16 +252,27 @@ pub fn Login(props: &LoginProps) -> Html {
- +
+ + +
{ diff --git a/frontend/styles.css b/frontend/styles.css index bf825c5..17dae3e 100644 --- a/frontend/styles.css +++ b/frontend/styles.css @@ -534,6 +534,41 @@ body { font-weight: 400; } +.password-input-container { + position: relative; + display: flex; + align-items: center; +} + +.password-input-container input { + padding-right: 3rem !important; +} + +.password-toggle-btn { + position: absolute; + right: 0.75rem; + background: transparent; + border: none; + color: #888; + cursor: pointer; + padding: 0.25rem; + font-size: 1rem; + display: flex; + align-items: center; + justify-content: center; + transition: color 0.2s ease; + z-index: 1; +} + +.password-toggle-btn:hover { + color: #555; +} + +.password-toggle-btn:focus { + outline: none; + color: #667eea; +} + .login-button, .register-button { width: 100%; padding: var(--control-padding);