Skip to content

Ref : added show/hide password feature #63

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Chaitu7032 wants to merge 1 commit into from
Closed

Ref : added show/hide password feature #63

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 39 additions & 19 deletions frontend/app/login/page.tsx → frontend/app/login/page1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ export default function LoginPage() {
const [isNavigating, setIsNavigating] = useState(false);
const [socialLoading, setSocialLoading] = useState<"github" | "google" | null>(null);
const [isDark, setIsDark] = useState(false);
const [showPassword, setShowPassword] = useState(false);
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Sep 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

critical

This file was renamed from page.tsx to page1.tsx. In the Next.js App Router, page.tsx is a special file name that defines a route. Renaming it will break the /login route and cause a 404 error. Please rename this file back to page.tsx to ensure the login page is accessible.


// Initialize router
const router = useRouter();

// Detect initial theme on mount
Expand All @@ -23,14 +26,14 @@ export default function LoginPage() {
}, []);

const toggleTheme = () => {
setIsDark(!isDark);
if (typeof window !== "undefined") {
const root = window.document.documentElement;
if (isDark) {
root.classList.remove("dark");
} else {
root.classList.add("dark");
}
if (typeof window === "undefined") return;
const root = window.document.documentElement;
const newIsDark = !isDark;
setIsDark(newIsDark);
if (newIsDark) {
root.classList.add("dark");
} else {
root.classList.remove("dark");
}
};

Expand All @@ -42,7 +45,7 @@ export default function LoginPage() {
redirect: false,
email,
password,
});
} as any);
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Sep 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Using as any bypasses TypeScript's type safety and should be avoided. It can hide potential bugs and makes the code harder to maintain. Please investigate the correct type for the signIn function's options object for the 'credentials' provider and remove this type assertion.

setLoading(false);
if (res?.error) {
setError("Invalid email or password.");
Expand All @@ -61,10 +64,10 @@ export default function LoginPage() {
setError("");

try {
const result = await signIn(provider, {
const result = await signIn(provider, {
redirect: false,
callbackUrl: "/dashboard"
});
callbackUrl: "/dashboard",
} as any);
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Sep 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Similar to the other signIn call, as any is used here, which compromises type safety. The options object { redirect: false, callbackUrl: "/dashboard" } should be compatible with SignInOptions. Please remove the as any cast and ensure the types are correct to make the code more robust.


if (result?.error) {
setError(`Failed to sign in with ${provider}. Please try again.`);
Expand Down Expand Up @@ -110,21 +113,31 @@ export default function LoginPage() {
type="email"
placeholder="Email"
value={email}
onChange={e => setEmail(e.target.value)}
onChange={(e) => setEmail(e.target.value)}
className="w-full px-2 py-2 md:px-4 md:py-3 rounded-xl bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 transition-all duration-200"
required
/>
</div>
<div className="space-y-2">
<input
type="password"
type={showPassword ? "text" : "password"}
placeholder="Password"
value={password}
onChange={e => setPassword(e.target.value)}
onChange={(e) => setPassword(e.target.value)}
className="w-full px-2 py-2 md:px-4 md:py-3 rounded-xl bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 transition-all duration-200"
required
/>
</div>
<div className="flex items-center gap-2">
<input
type="checkbox"
id="show-password"
checked={showPassword}
onChange={() => setShowPassword(!showPassword)}
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Sep 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

To prevent potential issues with stale state in React's concurrent mode, it's safer to use the functional update form for setState. This is a more robust way to toggle boolean state.

For better readability, you could also extract this logic into a dedicated toggleShowPassword handler function.

Suggested change
onChange={() => setShowPassword(!showPassword)}
onChange={() => setShowPassword((prev) => !prev)}

className="cursor-pointer"
/>
<label htmlFor="show-password" className="text-sm text-gray-600 dark:text-gray-300 cursor-pointer select-none">
Show Password
</label>
</div>

{/* Forgot Password Link */}
<div className="text-right">
Expand All @@ -137,7 +150,11 @@ export default function LoginPage() {
</button>
</div>

{error && <div className="text-red-600 dark:text-red-400 text-sm text-center bg-red-50 dark:bg-red-900/20 px-4 py-2 rounded-lg border border-red-200 dark:border-red-800">{error}</div>}
{error && (
<div className="text-red-600 dark:text-red-400 text-sm text-center bg-red-50 dark:bg-red-900/20 px-4 py-2 rounded-lg border border-red-200 dark:border-red-800">
{error}
</div>
)}

<button
type="submit"
Expand Down Expand Up @@ -182,7 +199,10 @@ export default function LoginPage() {
</div>

<div className="text-center mt-6 text-gray-600 dark:text-gray-300">
Don't have an account? <button onClick={() => handleNavigation("/signup")} className="text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300 underline transition-colors">Sign Up</button>
Don't have an account?{" "}
<button onClick={() => handleNavigation("/signup")} className="text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300 underline transition-colors">
Sign Up
</button>
</div>
</div>
</main>
Expand Down
Loading