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

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;

92
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,53 +57,49 @@ export function LoginPage() {
<Input placeholder={t("auth.username")} />
</TextField>
<TextField
fullWidth
name="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"
aria-label={showPassword ? "Hide password" : "Show password"}
onPress={() => setShowPassword((v) => !v)}
>
{showPassword ? (
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" aria-hidden="true">
<path
d="M3 3l18 18M10.6 10.6a2.5 2.5 0 0 0 3.5 3.5M9.9 5.1A10 10 0 0 1 12 4.8c5.5 0 9.2 5.3 10.2 6.7a1.2 1.2 0 0 1 0 1.4c-.4.6-1.3 1.8-2.7 3M6.1 6.1C4.2 7.5 2.9 9.3 2 11.1a1.2 1.2 0 0 0 0 1.4C3 13.9 6.7 19.2 12 19.2c1.4 0 2.7-.3 3.9-.8"
stroke="currentColor"
strokeWidth="1.75"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
) : (
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" aria-hidden="true">
<path
d="M2 12.2C3 10.5 6.7 4.8 12 4.8s9 5.7 10 7.4a1.2 1.2 0 0 1 0 1.2C21 15.1 17.3 20.8 12 20.8S3 15.1 2 13.4a1.2 1.2 0 0 1 0-1.2Z"
stroke="currentColor"
strokeWidth="1.75"
strokeLinejoin="round"
/>
<circle cx="12" cy="12.8" r="3" stroke="currentColor" strokeWidth="1.75" />
</svg>
)}
</Button>
</InputGroup.Suffix>
</InputGroup>
</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>
<Input placeholder={t("auth.password")} />
</TextField>
<button
type="button"
className="login-card__eye"
aria-label={showPassword ? "Hide password" : "Show password"}
tabIndex={-1}
onClick={() => setShowPassword((v) => !v)}
>
{showPassword ? (
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" aria-hidden="true">
<path
d="M3 3l18 18M10.6 10.6a2.5 2.5 0 0 0 3.5 3.5M9.9 5.1A10 10 0 0 1 12 4.8c5.5 0 9.2 5.3 10.2 6.7a1.2 1.2 0 0 1 0 1.4c-.4.6-1.3 1.8-2.7 3M6.1 6.1C4.2 7.5 2.9 9.3 2 11.1a1.2 1.2 0 0 0 0 1.4C3 13.9 6.7 19.2 12 19.2c1.4 0 2.7-.3 3.9-.8"
stroke="currentColor"
strokeWidth="1.75"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
) : (
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" aria-hidden="true">
<path
d="M2 12.2C3 10.5 6.7 4.8 12 4.8s9 5.7 10 7.4a1.2 1.2 0 0 1 0 1.2C21 15.1 17.3 20.8 12 20.8S3 15.1 2 13.4a1.2 1.2 0 0 1 0-1.2Z"
stroke="currentColor"
strokeWidth="1.75"
strokeLinejoin="round"
/>
<circle cx="12" cy="12.8" r="3" stroke="currentColor" strokeWidth="1.75" />
</svg>
)}
</button>
</div>
{error ? (
<Alert status="danger" className="login-card__error">