fankes/beszel
2
0
Fork 0
mirror of https://github.com/fankes/beszel.git synced 2025-10-19 17:59:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

auth-form: red field border on error + firefox ux improvement (#24)

Browse Source
This commit is contained in:
Henry Dollman
2025-02-03 17:59:39 -05:00
parent 20cba1b695
commit fdbbbc77b0
1 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
beszel/site/src/components/login/auth-form.tsx
View File

@@ -14,7 +14,11 @@ import { Trans, t } from "@lingui/macro"
const honeypot = v.literal("")
const emailSchema = v.pipe(v.string(), v.email(t`Invalid email address.`))
const passwordSchema = v.pipe(v.string(), v.minLength(8, t`Password must be at least 8 characters.`), v.maxLength(72, t`Password must not exceed 72 characters.`))
const passwordSchema = v.pipe(
v.string(),
v.minLength(8, t`Password must be at least 8 characters.`),
v.maxBytes(72, t`Password must be less than 72 bytes.`)
)
const LoginSchema = v.looseObject({
name: honeypot,
@@ -132,12 +136,12 @@ export function UserAuthForm({
name="email"
required
placeholder="name@example.com"
type="email"
type="text"
autoCapitalize="none"
autoComplete="email"
autoCorrect="off"
disabled={isLoading || isOauthLoading}
className="ps-9"
className={cn("ps-9", errors?.email && "border-red-500")}
/>
{errors?.email && <p className="px-1 text-xs text-red-600">{errors.email}</p>}
</div>
@@ -154,7 +158,7 @@ export function UserAuthForm({
type="password"
autoComplete="current-password"
disabled={isLoading || isOauthLoading}
className="ps-9"
className={cn("ps-9", errors?.password && "border-red-500")}
/>
{errors?.password && <p className="px-1 text-xs text-red-600">{errors.password}</p>}
</div>
@@ -172,7 +176,7 @@ export function UserAuthForm({
type="password"
autoComplete="current-password"
disabled={isLoading || isOauthLoading}
className="ps-9"
className={cn("ps-9", errors?.password && "border-red-500")}
/>
{errors?.passwordConfirm && <p className="px-1 text-xs text-red-600">{errors.passwordConfirm}</p>}
</div>