apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-04-25 08:46:22 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Add eye toggle button for API Key and Password fields on Sign In page #415

Browse source
This commit is contained in:
sanwalsulehri 2025-10-20 16:20:03 +05:00
parent 4dc5cebb94
commit 084e773663
1 changed files with 15 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

16
surfsense_web/app/(home)/login/LocalLoginForm.tsx
View file

@ -4,11 +4,13 @@ import Link from "next/link";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { toast } from "sonner"; import { toast } from "sonner";
import { Eye, EyeOff } from "lucide-react";
import { getAuthErrorDetails, isNetworkError, shouldRetry } from "@/lib/auth-errors"; import { getAuthErrorDetails, isNetworkError, shouldRetry } from "@/lib/auth-errors";
export function LocalLoginForm() { export function LocalLoginForm() {
const [username, setUsername] = useState(""); const [username, setUsername] = useState("");
const [password, setPassword] = useState(""); const [password, setPassword] = useState("");
const [showPassword, setShowPassword] = useState(false);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const [errorTitle, setErrorTitle] = useState<string | null>(null); const [errorTitle, setErrorTitle] = useState<string | null>(null);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
@ -196,19 +198,29 @@ export function LocalLoginForm() {
> >
Password Password
</label> </label>
<div className="relative">
<input <input
id="password" id="password"
type="password" type={showPassword ? "text" : "password"}
required required
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
className={`mt-1 block w-full rounded-md border px-3 py-2 shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 dark:bg-gray-800 dark:text-white transition-colors ${ className={`mt-1 block w-full rounded-md border pr-10 px-3 py-2 shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 dark:bg-gray-800 dark:text-white transition-colors ${
error error
? "border-red-300 focus:border-red-500 focus:ring-red-500 dark:border-red-700" ? "border-red-300 focus:border-red-500 focus:ring-red-500 dark:border-red-700"
: "border-gray-300 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700" : "border-gray-300 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700"
}`} }`}
disabled={isLoading} disabled={isLoading}
/> />
<button
type="button"
onClick={() => setShowPassword((prev) => !prev)}
className="absolute inset-y-0 right-0 flex items-center pr-3 mt-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
aria-label={showPassword ? "Hide password" : "Show password"}
>
{showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
</button>
</div>
</div> </div>
<button <button