Skip to content

updated signup and login page #19

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

Open
611Abhinav wants to merge 1 commit into
base: main
Choose a base branch
from
Open

updated signup and login page #19

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
2 changes: 1 addition & 1 deletion Frontend/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion Frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"locomotive-scroll": "^4.1.4",
"lucide-react": "^0.553.0",
"motion": "^12.23.24",
"react": "^19.1.1",
"react": "^19.2.0",
"react-dom": "^19.1.1",
"react-parallax-tilt": "^1.7.313",
"react-router-dom": "^7.9.5",
Expand Down
15 changes: 9 additions & 6 deletions Frontend/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { useEffect } from "react";
import { ThemeProvider } from "./context/ThemeContext";

import Home from "./pages/Home";
import Signup from "./pages/SignupLoginPage";
Expand All @@ -14,11 +15,13 @@ export default function App() {
}, []);

return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/signup" element={<Signup />} />
</Routes>
</Router>
<ThemeProvider>
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/signup" element={<Signup />} />
</Routes>
</Router>
</ThemeProvider>
);
}
59 changes: 35 additions & 24 deletions Frontend/src/components/LoginForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import React, { useState } from "react";
import axios from "axios";
import { Chrome } from "lucide-react";
import { useTheme } from "../context/ThemeContext";

export default function LoginForm() {
const API_URL = import.meta.env.VITE_Backend_API_URL;
const { isDark } = useTheme();

const [data, setData] = useState({
email: "",
Expand All @@ -29,7 +32,11 @@ export default function LoginForm() {
name="email"
onChange={handle}
placeholder="Enter your email"
className="w-full px-4 py-3 rounded-lg bg-black/30 border border-white/10 text-white"
className={`w-full px-4 py-3 rounded-lg border transition ${
isDark
? 'bg-black/30 border-white/10 text-white placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500'
: 'bg-white/60 border-blue-200/50 text-black placeholder-gray-600 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500'
}`}
required
/>

Expand All @@ -38,37 +45,41 @@ export default function LoginForm() {
name="password"
onChange={handle}
placeholder="Password"
className="w-full px-4 py-3 rounded-lg bg-black/30 border border-white/10 text-white"
className={`w-full px-4 py-3 rounded-lg border transition ${
isDark
? 'bg-black/30 border-white/10 text-white placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500'
: 'bg-white/60 border-blue-200/50 text-black placeholder-gray-600 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500'
}`}
required
/>

<button className="w-full py-3 bg-white text-black rounded-lg font-medium">
<button className={`w-full py-3 rounded-lg font-medium transition-colors ${
isDark
? 'bg-white text-black hover:bg-neutral-200'
: 'bg-blue-600 text-white hover:bg-blue-700'
}`}>
Sign in
</button>

<div className="flex items-center gap-4 my-4 text-neutral-400">
<div className="flex-1 h-px bg-white/10" />
OR SIGN IN WITH
<div className="flex-1 h-px bg-white/10" />
<div className={`flex items-center gap-4 my-4 text-sm uppercase font-semibold ${
isDark ? 'text-neutral-400' : 'text-gray-600'
}`}>
<div className={`flex-1 h-px ${isDark ? 'bg-white/10' : 'bg-blue-200/30'}`} />
OR CONTINUE WITH
<div className={`flex-1 h-px ${isDark ? 'bg-white/10' : 'bg-blue-200/30'}`} />
</div>

<div className="grid grid-cols-2 gap-4">
<button
type="button"
className="py-3 rounded-lg bg-black/40 border border-white/10 text-white flex items-center justify-center gap-2"
>
<img src="/google-icon.png" className="h-5" />
Google
</button>

<button
type="button"
className="py-3 rounded-lg bg-black/40 border border-white/10 text-white flex items-center justify-center gap-2"
>
<img src="/apple-icon.png" className="h-5" />
Apple
</button>
</div>
<button
type="button"
className={`w-full py-3 rounded-lg border transition flex items-center justify-center gap-2 font-medium ${
isDark
? 'bg-black/40 border-white/10 text-white hover:bg-white/5'
: 'bg-white/50 border-blue-200/30 text-black hover:bg-blue-50'
}`}
>
<Chrome size={18} />
Google
</button>
</form>
);
}
Expand Down
20 changes: 4 additions & 16 deletions Frontend/src/components/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
import React, { useState, useEffect } from "react";
import React, { useState } from "react";
import { Link } from "react-router-dom";
import { Menu, X, ShieldCheck } from "lucide-react";
import { Classic } from "@theme-toggles/react";
import "@theme-toggles/react/css/Classic.css";
import { LiquidButton } from "@/components/ui/shadcn-io/liquid-button";
import { useTheme } from "@/context/ThemeContext";

export default function Navbar({ locoScrollRef }) {
const [isOpen, setIsOpen] = useState(false);
const [isDark, setIsDark] = useState(() => {
const savedTheme = localStorage.getItem("theme");
return savedTheme === "dark";
});
const { isDark, toggleTheme } = useTheme();

const navLinks = [
{ name: "Features", target: "#features" },
Expand All @@ -25,18 +23,8 @@ export default function Navbar({ locoScrollRef }) {
}
};

useEffect(() => {
if (isDark) {
document.body.setAttribute("data-theme", "dark");
localStorage.setItem("theme", "dark");
} else {
document.body.setAttribute("data-theme", "light");
localStorage.setItem("theme", "light");
}
}, [isDark]);

function handleTheme() {
setIsDark((prev) => !prev);
toggleTheme();
}

return (
Expand Down
19 changes: 11 additions & 8 deletions Frontend/src/components/RoleSelector.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import React from "react";
import { User, BriefcaseMedical, Hospital } from "lucide-react";
import { useTheme } from "../context/ThemeContext";

export default function RoleSelector({ role, setRole }) {
const { isDark } = useTheme();
const items = [
{ key: "patient", label: "Patient", icon: <User size={26} /> },
{ key: "doctor", label: "Doctor", icon: <BriefcaseMedical size={26} /> },
Expand All @@ -14,16 +16,17 @@ export default function RoleSelector({ role, setRole }) {
<div
key={r.key}
onClick={() => setRole(r.key)}
className={`cursor-pointer px-4 py-5 rounded-xl flex flex-col items-center gap-2
backdrop-blur-lg border transition-all
${
role === r.key
className={`cursor-pointer px-4 py-5 rounded-xl flex flex-col items-center gap-2 backdrop-blur-lg border transition-all ${
role === r.key
? isDark
? "bg-white/10 border-white/30 text-white shadow-lg scale-[1.02]"
: "bg-black/40 border-white/10 text-neutral-300 hover:bg-black/50"
}
`}
: "bg-blue-600/20 border-blue-400/50 text-blue-700 shadow-lg scale-[1.02]"
: isDark
? "bg-black/40 border-white/10 text-neutral-300 hover:bg-black/50"
: "bg-white/40 border-blue-200/30 text-gray-700 hover:bg-white/60"
}`}
>
<div className="text-blue-400">{r.icon}</div>
<div className={isDark ? "text-blue-400" : "text-blue-600"}>{r.icon}</div>
<div className="text-sm font-medium">{r.label}</div>
</div>
))}
Expand Down
Loading