feat: add login page
This commit is contained in:
d3m0k1d
58
frontend/package-lock.json
generated
58
frontend/package-lock.json
generated
@@ -11,6 +11,7 @@
|
||||
"@tailwindcss/vite": "^4.1.18",
|
||||
"react": "^19.2.0",
|
||||
"react-dom": "^19.2.0",
|
||||
"react-router-dom": "^7.13.0",
|
||||
"tailwindcss": "^4.1.18"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -2155,6 +2156,19 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/cookie": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
|
||||
"integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/express"
|
||||
}
|
||||
},
|
||||
"node_modules/cross-spawn": {
|
||||
"version": "7.0.6",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
|
||||
@@ -3351,6 +3365,44 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router": {
|
||||
"version": "7.13.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.13.0.tgz",
|
||||
"integrity": "sha512-PZgus8ETambRT17BUm/LL8lX3Of+oiLaPuVTRH3l1eLvSPpKO3AvhAEb5N7ihAFZQrYDqkvvWfFh9p0z9VsjLw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"cookie": "^1.0.1",
|
||||
"set-cookie-parser": "^2.6.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18",
|
||||
"react-dom": ">=18"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-router-dom": {
|
||||
"version": "7.13.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.13.0.tgz",
|
||||
"integrity": "sha512-5CO/l5Yahi2SKC6rGZ+HDEjpjkGaG/ncEP7eWFTvFxbHP8yeeI0PxTDjimtpXYlR3b3i9/WIL4VJttPrESIf2g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"react-router": "7.13.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18",
|
||||
"react-dom": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/resolve-from": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
|
||||
@@ -3421,6 +3473,12 @@
|
||||
"semver": "bin/semver.js"
|
||||
}
|
||||
},
|
||||
"node_modules/set-cookie-parser": {
|
||||
"version": "2.7.2",
|
||||
"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
|
||||
"integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/shebang-command": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
|
||||
|
||||
@@ -13,6 +13,7 @@
|
||||
"@tailwindcss/vite": "^4.1.18",
|
||||
"react": "^19.2.0",
|
||||
"react-dom": "^19.2.0",
|
||||
"react-router-dom": "^7.13.0",
|
||||
"tailwindcss": "^4.1.18"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@@ -1,18 +1,33 @@
|
||||
import "./App.css";
|
||||
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
||||
import Navigation from "./components/Navigation.tsx";
|
||||
import Footer from "./components/Footer.tsx";
|
||||
import Home from "./pages/Home.tsx";
|
||||
import About from "./components/Skills.tsx";
|
||||
import Login from "./pages/Login.tsx";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col">
|
||||
<Navigation />
|
||||
<main className="flex-grow">
|
||||
<Home />
|
||||
<About />
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
<BrowserRouter>
|
||||
<div className="min-h-screen flex flex-col">
|
||||
<Navigation />
|
||||
<main className="flex-grow">
|
||||
<Routes>
|
||||
<Route
|
||||
path="/"
|
||||
element={
|
||||
<>
|
||||
<Home />
|
||||
<About />
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<Route path="/login" element={<Login />} />
|
||||
</Routes>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,12 +1,100 @@
|
||||
import { useState } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
interface User {
|
||||
name?: string;
|
||||
email?: string;
|
||||
avatar?: string;
|
||||
}
|
||||
|
||||
export default function Navigation() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
checkAuth();
|
||||
}, []);
|
||||
|
||||
const checkAuth = async () => {
|
||||
try {
|
||||
const response = await fetch("/api/auth/session");
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setUser(data.user);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Auth check failed:", error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getInitials = (user: User): string => {
|
||||
if (user.name) {
|
||||
return user.name.substring(0, 2).toUpperCase();
|
||||
}
|
||||
if (user.email) {
|
||||
return user.email.substring(0, 2).toUpperCase();
|
||||
}
|
||||
return "?";
|
||||
};
|
||||
|
||||
const AccountAvatar = () => {
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="w-10 h-10 rounded-full bg-gray-200 animate-pulse" />
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{user ? (
|
||||
<div className="relative cursor-pointer">
|
||||
{user.avatar ? (
|
||||
<img
|
||||
src={user.avatar}
|
||||
alt={user.name || user.email || "User"}
|
||||
className="w-10 h-10 rounded-full object-cover border-2 border-[hsl(270,73%,63%)]"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-white font-semibold text-sm">
|
||||
{getInitials(user)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<a
|
||||
href="/login"
|
||||
className="w-10 h-10 rounded-full bg-gray-300 flex items-center justify-center hover:bg-gray-400 transition-colors"
|
||||
>
|
||||
<svg
|
||||
className="w-6 h-6 text-gray-600"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Account Avatar - Fixed position, synced with nav */}
|
||||
<div className="hidden md:block fixed right-4 lg:right-8 top-3 z-50">
|
||||
<AccountAvatar />
|
||||
</div>
|
||||
|
||||
<nav className="sticky top-0 z-50 py-3">
|
||||
{/* Desktop */}
|
||||
{/* Desktop Navigation */}
|
||||
<div className="hidden md:flex gap-8 lg:gap-12 justify-center">
|
||||
<a
|
||||
href="/"
|
||||
@@ -28,34 +116,37 @@ export default function Navigation() {
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Mobile Burger Button */}
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="md:hidden fixed left-4 top-4 z-50 btn btn-ghost btn-sm"
|
||||
>
|
||||
<svg
|
||||
className="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
{/* Mobile */}
|
||||
<div className="md:hidden flex justify-between items-center px-4">
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="z-50 btn btn-ghost btn-sm"
|
||||
>
|
||||
{isOpen ? (
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
) : (
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M4 6h16M4 12h16M4 18h16"
|
||||
/>
|
||||
)}
|
||||
</svg>
|
||||
</button>
|
||||
<svg
|
||||
className="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
{isOpen ? (
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
) : (
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M4 6h16M4 12h16M4 18h16"
|
||||
/>
|
||||
)}
|
||||
</svg>
|
||||
</button>
|
||||
<AccountAvatar />
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
@@ -88,6 +179,22 @@ export default function Navigation() {
|
||||
>
|
||||
Guestbook
|
||||
</a>
|
||||
|
||||
{user && (
|
||||
<>
|
||||
<hr className="my-2" />
|
||||
<div className="py-3 px-4 text-sm text-gray-600">
|
||||
{user.name || user.email}
|
||||
</div>
|
||||
<a
|
||||
href="/logout"
|
||||
className="py-3 px-4 hover:bg-gray-100 rounded-lg transition-all text-red-600"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
Logout
|
||||
</a>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
79
frontend/src/pages/Login.tsx
Normal file
79
frontend/src/pages/Login.tsx
Normal file
@@ -0,0 +1,79 @@
|
||||
export default function Login() {
|
||||
const handleGitHubLogin = () => {
|
||||
window.location.href = "/api/v1/auth/github";
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-center px-4 py-12 md:py-0 md:min-h-[calc(100vh-200px)]">
|
||||
<div className="max-w-md w-full">
|
||||
{/* ASCII Art Header */}
|
||||
<pre className="text-center mb-8 text-[10px] sm:text-xs lg:text-sm opacity-80 font-mono leading-tight select-none">
|
||||
{`
|
||||
██╗ ██████╗ ██████╗ ██╗███╗ ██╗
|
||||
██║ ██╔═══██╗██╔════╝ ██║████╗ ██║
|
||||
██║ ██║ ██║██║ ███╗██║██╔██╗ ██║
|
||||
██║ ██║ ██║██║ ██║██║██║╚██╗██║
|
||||
███████╗╚██████╔╝╚██████╔╝██║██║ ╚████║
|
||||
╚══════╝ ╚═════╝ ╚═════╝ ╚═╝╚═╝ ╚═══╝
|
||||
|
||||
╔════════════════════════════════════╗
|
||||
║ Secure GitHub Authentication ║
|
||||
╚════════════════════════════════════╝
|
||||
`}
|
||||
</pre>
|
||||
|
||||
{/* Login Card */}
|
||||
<div className="border border-gray-700 rounded-lg p-6 sm:p-8 bg-black/30 backdrop-blur-sm shadow-xl">
|
||||
<h1 className="text-xl sm:text-2xl font-bold mb-2 text-center">
|
||||
Welcome Back
|
||||
</h1>
|
||||
<p className="text-gray-400 text-center mb-6 sm:mb-8 text-sm">
|
||||
Sign in to continue to your account
|
||||
</p>
|
||||
|
||||
{/* GitHub Login Button */}
|
||||
<button
|
||||
onClick={handleGitHubLogin}
|
||||
className="w-full bg-white text-black hover:bg-gray-200 active:scale-95 transition-all duration-300 py-3 sm:py-4 px-6 rounded-lg font-semibold flex items-center justify-center gap-3 group shadow-lg hover:shadow-xl"
|
||||
>
|
||||
<svg
|
||||
className="w-5 h-5 sm:w-6 sm:h-6 group-hover:scale-110 transition-transform"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<span className="text-sm sm:text-base">Login via GitHub</span>
|
||||
</button>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="relative my-6">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<div className="w-full border-t border-gray-700"></div>
|
||||
</div>
|
||||
<div className="relative flex justify-center text-xs">
|
||||
<span className="bg-black/30 px-2 text-gray-500">
|
||||
secure authentication
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer note */}
|
||||
<p className="text-gray-500 text-xs text-center">
|
||||
By signing in, you agree to our{" "}
|
||||
<a
|
||||
href="/terms"
|
||||
className="text-[hsl(270,73%,63%)] hover:underline"
|
||||
>
|
||||
terms of service
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user