hansjone/netx
1
0
Fork 0
mirror of https://github.com/hansjone/netx.git synced 2026-10-19 12:00:46 +08:00
Code Issues Projects Releases 1 Packages Wiki Activity Actions

Embed login password eye toggle inside the field.

Browse source 
EOF

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
oliver 2026-09-13 23:51:33 +08:00
parent b5da5948a8
commit 6d21d45185
2 changed files with 53 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

10
web/src/index.css
View file

@ -8941,16 +8941,18 @@ pre {
.login-card__password {
position: relative;
display: block;
width: 100%;
}
.login-card__password input {
padding-right: 44px;
padding-right: 44px !important;
}
.login-card__eye {
position: absolute;
top: 50%;
right: 6px;
z-index: 2;
transform: translateY(-50%);
width: 34px;
height: 34px;
@ -8969,6 +8971,12 @@ pre {
color: #93c5fd;
}
.login-card__eye:focus-visible {
outline: none;
color: #93c5fd;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
}
.login-card__eye svg {
display: block;
pointer-events: none;

28
web/src/pages/LoginPage.tsx
View file

@ -1,4 +1,4 @@
import { Alert, Button, Card, Form, Input, InputGroup, Label, TextField } from "@heroui/react";
import { Alert, Button, Card, Form, Input, Label, TextField } from "@heroui/react";
import { useState, type FormEvent } from "react";
import { Navigate, useSearchParams } from "react-router-dom";
import { useAuth } from "../auth/AuthContext";
@ -57,27 +57,25 @@ export function LoginPage() {
<Input placeholder={t("auth.username")} />
</TextField>
<div className="login-card__password">
<TextField
fullWidth
name="password"
type={showPassword ? "text" : "password"}
value={password}
onChange={setPassword}
isDisabled={busy || !ready}
autoComplete="current-password"
>
<Label className="login-card__sr">{t("auth.password")}</Label>
<InputGroup fullWidth>
<InputGroup.Input
type={showPassword ? "text" : "password"}
placeholder={t("auth.password")}
/>
<InputGroup.Suffix>
<Button
isIconOnly
size="sm"
variant="ghost"
<Input placeholder={t("auth.password")} />
</TextField>
<button
type="button"
className="login-card__eye"
aria-label={showPassword ? "Hide password" : "Show password"}
onPress={() => setShowPassword((v) => !v)}
tabIndex={-1}
onClick={() => setShowPassword((v) => !v)}
>
{showPassword ? (
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" aria-hidden="true">
@ -100,10 +98,8 @@ export function LoginPage() {
<circle cx="12" cy="12.8" r="3" stroke="currentColor" strokeWidth="1.75" />
</svg>
)}
</Button>
</InputGroup.Suffix>
</InputGroup>
</TextField>
</button>
</div>
{error ? (
<Alert status="danger" className="login-card__error">