Skip to content

Feat(auth): Add theme toggle and adjust Back button on Login & Signup #240

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

Merged
MannuVilasara merged 5 commits into from
Oct 31, 2025
Merged

Feat(auth): Add theme toggle and adjust Back button on Login & Signup #240

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a4c59e5
feat(auth): left Back button and add theme toggle on Login & Signup
KhanjarSingh Oct 30, 2025
b0ee249
fix(auth): Back button falls back to / when no history (Login & Signup)
KhanjarSingh Oct 30, 2025
073dd67
Done the required Changes
KhanjarSingh Oct 30, 2025
e783b74
Runner Prettier
KhanjarSingh Oct 30, 2025
f1e6fe1
fixed the size
KhanjarSingh Oct 30, 2025
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
56 changes: 45 additions & 11 deletions frontend/src/pages/Login.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { ArrowLeft, Eye, EyeOff, FileText } from 'lucide-react';
import { authAPI } from '../utils/api';
import toast from 'react-hot-toast';
import authContext from '../context/AuthProvider';
import themeContext from '../context/ThemeProvider';
import OAuthButtons from '../components/OAuthButtons';
import Input from '../components/ui/Input';

Expand All @@ -16,6 +17,7 @@ const Login = () => {
const navigate = useNavigate();
const location = useLocation();
const { setuser } = useContext(authContext);
const { theme, settheme } = useContext(themeContext);

// Handle OAuth errors from URL parameters
useEffect(() => {
Expand Down Expand Up @@ -136,17 +138,49 @@ const Login = () => {
</div>
</div>

{/* Right Side - Login Form */}
<div className="w-full lg:w-1/2 flex flex-col justify-center px-8 sm:px-12 lg:px-16 py-5">
{/* Back Link */}
<div className="absolute top-6 left-6 lg:right-6 lg:left-auto">
<Link
to="/"
className="flex items-center gap-2 text-base-content/70 hover:text-base-content transition-colors"
>
<ArrowLeft size={20} />
<span>Home</span>
</Link>
<div className="w-full lg:w-1/2 flex flex-col justify-center px-8 sm:px-12 lg:px-16 py-5 relative">
<div className="w-full flex items-center justify-between mb-8 -mt-16">
<div>
<Link
to="#"
onClick={(e) => {
e.preventDefault();
if (window.history.length > 1) navigate(-1);
else navigate('/');
}}
className="flex items-center gap-2 text-base-content/70 hover:text-base-content transition-colors"
>
<ArrowLeft size={20} />
<span>Back</span>
</Link>
</div>

<div>
<label className="swap swap-rotate btn btn-ghost btn-circle">
<input
onChange={(e) => settheme(e.target.checked ? 'dark' : 'light')}
type="checkbox"
className="theme-controller"
checked={theme === 'dark'}
/>
{/* Sun icon */}
<svg
className="swap-off h-6 w-6 fill-current text-black"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Z" />
</svg>
{/* Moon icon */}
<svg
className="swap-on h-6 w-6 fill-current text-gray-300"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13ZM12.14,19.73A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
</svg>
</label>
</div>
</div>

{/* Mobile Logo (visible on small screens) */}
Expand Down
56 changes: 45 additions & 11 deletions frontend/src/pages/Signup.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { ArrowLeft, Eye, EyeOff, FileText } from 'lucide-react';
import { authAPI } from '../utils/api';
import toast from 'react-hot-toast';
import authContext from '../context/AuthProvider';
import themeContext from '../context/ThemeProvider';
import OAuthButtons from '../components/OAuthButtons';
import Input from '../components/ui/Input';

Expand All @@ -18,6 +19,7 @@ const Signup = () => {
const navigate = useNavigate();
const location = useLocation();
const { setuser } = useContext(authContext);
const { theme, settheme } = useContext(themeContext);

// Handle OAuth errors from URL params
useEffect(() => {
Expand Down Expand Up @@ -156,17 +158,49 @@ const Signup = () => {
</div>
</div>

{/* Right Side - Signup Form */}
<div className="w-full lg:w-1/2 flex flex-col justify-center px-8 sm:px-12 lg:px-16 py-5">
{/* Back Link */}
<div className="absolute top-6 left-6 lg:right-6 lg:left-auto">
<Link
to="/"
className="flex items-center gap-2 text-base-content/70 hover:text-base-content transition-colors"
>
<ArrowLeft size={20} />
<span>Home</span>
</Link>
<div className="w-full lg:w-1/2 flex flex-col justify-center px-8 sm:px-12 lg:px-16 py-5 relative">
<div className="w-full flex items-center justify-between mb-4">
<div>
<Link
to="#"
onClick={(e) => {
e.preventDefault();
if (window.history.length > 1) navigate(-1);
else navigate('/');
}}
className="flex items-center gap-2 text-base-content/70 hover:text-base-content transition-colors"
>
<ArrowLeft size={20} />
<span>Back</span>
</Link>
</div>

<div>
<label className="swap swap-rotate btn btn-ghost btn-circle">
<input
onChange={(e) => settheme(e.target.checked ? 'dark' : 'light')}
type="checkbox"
className="theme-controller"
checked={theme === 'dark'}
/>
{/* Sun icon */}
<svg
className="swap-off h-6 w-6 fill-current text-black"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Z" />
</svg>
{/* Moon icon */}
<svg
className="swap-on h-6 w-6 fill-current text-gray-300"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13ZM12.14,19.73A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
</svg>
</label>
</div>
</div>

{/* Mobile Logo (visible on small screens) */}
Expand Down