release: 1.1.0

web-next/src/pages/auth/StarterAuth.tsx

@@ -0,0 +1,58 @@
+import { useState } from "react";
+import AccessibleInput from "../../components/AccessibleInput";
+import { Eye, EyeOff, LockKeyhole, UserRound, X } from "lucide-react";
+
+export interface StarterPasswordInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder: string;
+  ariaLabel: string;
+  autocomplete?: string;
+  disabled?: boolean;
+  ariaInvalid?: boolean;
+  ariaDescribedby?: string;
+}
+
+/** Starter-style password field with clear and show/hide affordances. */
+export function StarterPasswordInput({
+  value,
+  onChange,
+  placeholder,
+  ariaLabel,
+  autocomplete,
+  disabled = false,
+  ariaInvalid,
+  ariaDescribedby,
+}: StarterPasswordInputProps) {
+  const [visible, setVisible] = useState(false);
+  const toggle = () => setVisible((current) => !current);
+
+  return (
+    <AccessibleInput
+      inputAriaLabel={ariaLabel}
+      inputAriaInvalid={ariaInvalid}
+      inputAriaDescribedby={ariaDescribedby}
+      size="large"
+      value={value}
+      onChange={(next) => onChange(String(next))}
+      type={visible ? "text" : "password"}
+      disabled={disabled}
+      autocomplete={autocomplete}
+      prefixIcon={<LockKeyhole className="tn-login-input-icon" size={18} />}
+      // A defined (empty) suffix prevents TDesign's password icon from being
+      // added in addition to the Starter-style control below.
+      suffixIcon={<span className="tn-login-suffix-placeholder" aria-hidden="true" />}
+      suffix={<span className="tn-login-suffix-actions">
+        {value && <button type="button" className="tn-login-clear" aria-label="清空密码" onMouseDown={(event) => event.preventDefault()} onClick={() => onChange("")}><X size={15} /></button>}
+        <button type="button" className="tn-login-password-toggle" aria-label={visible ? "隐藏密码" : "显示密码"} aria-pressed={visible} onMouseDown={(event) => event.preventDefault()} onClick={toggle}>
+          {visible ? <Eye size={17} /> : <EyeOff size={17} />}
+        </button>
+      </span>}
+      placeholder={placeholder}
+    />
+  );
+}
+
+export function LoginUserIcon() {
+  return <UserRound className="tn-login-prefix-icon" aria-hidden="true" size={18} />;
+}