src/components/ui/password-input.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import * as React from "react";
+import { Eye, EyeOff } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+interface PasswordInputProps
+    extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+export const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
+    ({ className, ...props }, ref) => {
+        const [showPassword, setShowPassword] = React.useState(false);
+
+        return (
+            <div className="relative w-full">
+                <Input
+                    ref={ref}
+                    type={showPassword ? "text" : "password"}
+                    className={cn("h-11 text-base pr-12", className)} // extra padding-right
+                    {...props}
+                />
+                <button
+                    type="button"
+                    onClick={() => setShowPassword((prev) => !prev)}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition"
+                    aria-label={showPassword ? "Hide password" : "Show password"}
+                >
+                    {showPassword ? (
+                        <EyeOff className="h-5 w-5" />
+                    ) : (
+                        <Eye className="h-5 w-5" />
+                    )}
+                </button>
+            </div>
+        );
+    }
+);
+
+PasswordInput.displayName = "PasswordInput";

src/ui/Mobile/Homepage/HomepageAuth.tsx

@@ -20,6 +20,7 @@ import {
     verifyTOTPLogin,
     setCookie
 } from "@/ui/main-axios.ts";
+import {PasswordInput} from "@/components/ui/password-input.tsx";
 
 function getCookie(name: string) {
     return document.cookie.split('; ').reduce((r, v) => {
@@ -743,14 +744,14 @@ export function HomepageAuth({
                             </div>
                             <div className="flex flex-col gap-2">
                                 <Label htmlFor="password">{t('common.password')}</Label>
-                                <Input id="password" type="password" required className="h-11 text-base"
+                                <PasswordInput id="password" type="password" required className="h-55 text-base"
                                        value={password} onChange={e => setPassword(e.target.value)}
                                        disabled={loading || internalLoggedIn}/>
                             </div>
                             {tab === "signup" && (
                                 <div className="flex flex-col gap-2">
                                     <Label htmlFor="signup-confirm-password">{t('common.confirmPassword')}</Label>
-                                    <Input id="signup-confirm-password" type="password" required
+                                    <PasswordInput id="signup-confirm-password" type="password" required
                                            className="h-11 text-base"
                                            value={signupConfirmPassword}
                                            onChange={e => setSignupConfirmPassword(e.target.value)}