hansjone/netx
1
0
Fork 0
mirror of https://github.com/hansjone/netx.git synced 2026-10-19 06:43:15 +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 { .login-card__password {
position: relative; position: relative;
display: block; display: block;
width: 100%;
} }
.login-card__password input { .login-card__password input {
padding-right: 44px; padding-right: 44px !important;
} }
.login-card__eye { .login-card__eye {
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 6px; right: 6px;
z-index: 2;
transform: translateY(-50%); transform: translateY(-50%);
width: 34px; width: 34px;
height: 34px; height: 34px;
@ -8969,6 +8971,12 @@ pre {
color: #93c5fd; 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 { .login-card__eye svg {
display: block; display: block;
pointer-events: none; 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 { useState, type FormEvent } from "react";
import { Navigate, useSearchParams } from "react-router-dom"; import { Navigate, useSearchParams } from "react-router-dom";
import { useAuth } from "../auth/AuthContext"; import { useAuth } from "../auth/AuthContext";
@ -57,27 +57,25 @@ export function LoginPage() {
<Input placeholder={t("auth.username")} /> <Input placeholder={t("auth.username")} />
</TextField> </TextField>
<div className="login-card__password">
<TextField <TextField
fullWidth fullWidth
name="password" name="password"
type={showPassword ? "text" : "password"}
value={password} value={password}
onChange={setPassword} onChange={setPassword}
isDisabled={busy || !ready} isDisabled={busy || !ready}
autoComplete="current-password" autoComplete="current-password"
> >
<Label className="login-card__sr">{t("auth.password")}</Label> <Label className="login-card__sr">{t("auth.password")}</Label>
<InputGroup fullWidth> <Input placeholder={t("auth.password")} />
<InputGroup.Input </TextField>
type={showPassword ? "text" : "password"} <button
placeholder={t("auth.password")} type="button"
/> className="login-card__eye"
<InputGroup.Suffix>
<Button
isIconOnly
size="sm"
variant="ghost"
aria-label={showPassword ? "Hide password" : "Show password"} aria-label={showPassword ? "Hide password" : "Show password"}
onPress={() => setShowPassword((v) => !v)} tabIndex={-1}
onClick={() => setShowPassword((v) => !v)}
> >
{showPassword ? ( {showPassword ? (
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" aria-hidden="true"> <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" /> <circle cx="12" cy="12.8" r="3" stroke="currentColor" strokeWidth="1.75" />
</svg> </svg>
)} )}
</Button> </button>
</InputGroup.Suffix> </div>
</InputGroup>
</TextField>
{error ? ( {error ? (
<Alert status="danger" className="login-card__error"> <Alert status="danger" className="login-card__error">