henry/Studia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ADD: card component and login behavior

Browse Source
This commit is contained in:
hwinkel
2025-12-16 23:14:40 +01:00
parent 435ad8e6e6
commit f4eb2efb33
16 changed files with 361 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
frontend/studia/package-lock.json generated
View File

@@ -9,6 +9,7 @@
"version": "0.0.0",
"dependencies": {
"@tailwindcss/vite": "^4.1.18",
"framer-motion": "^12.23.26",
"jwt-decode": "^4.0.0",
"react": "^19.2.0",
"react-dom": "^19.2.0",
@@ -2553,6 +2554,33 @@
"dev": true,
"license": "ISC"
},
"node_modules/framer-motion": {
"version": "12.23.26",
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.26.tgz",
"integrity": "sha512-cPcIhgR42xBn1Uj+PzOyheMtZ73H927+uWPDVhUMqxy8UHt6Okavb6xIz9J/phFUHUj0OncR6UvMfJTXoc/LKA==",
"license": "MIT",
"dependencies": {
"motion-dom": "^12.23.23",
"motion-utils": "^12.23.6",
"tslib": "^2.4.0"
},
"peerDependencies": {
"@emotion/is-prop-valid": "*",
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"peerDependenciesMeta": {
"@emotion/is-prop-valid": {
"optional": true
},
"react": {
"optional": true
},
"react-dom": {
"optional": true
}
}
},
"node_modules/fsevents": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -3116,6 +3144,21 @@
"node": "*"
}
},
"node_modules/motion-dom": {
"version": "12.23.23",
"resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.23.tgz",
"integrity": "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==",
"license": "MIT",
"dependencies": {
"motion-utils": "^12.23.6"
}
},
"node_modules/motion-utils": {
"version": "12.23.6",
"resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
"integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
"license": "MIT"
},
"node_modules/ms": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -3568,6 +3611,12 @@
"typescript": ">=4.8.4"
}
},
"node_modules/tslib": {
"version": "2.8.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
"license": "0BSD"
},
"node_modules/type-check": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",

1
frontend/studia/package.json
View File

@@ -11,6 +11,7 @@
},
"dependencies": {
"@tailwindcss/vite": "^4.1.18",
"framer-motion": "^12.23.26",
"jwt-decode": "^4.0.0",
"react": "^19.2.0",
"react-dom": "^19.2.0",

26
frontend/studia/src/App.tsx
View File

@@ -1,29 +1,39 @@
import { useState } from "react";
import { useEffect, useState } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { AuthProvider } from "./components/AuthContext";
import { AuthProvider, useAuth } from "./components/AuthContext";
import ProtectedRoute from "./components/ProtectedRoute";
import Landing from "./pages/Landing";
import Dashboard from "./pages/Dashboard"
import LoginModal from "./components/LoginModal";
import Navigation from "./components/Navigation";
export default function App() {
const [token] = useState(localStorage.getItem("token"));
// const [token] = useState(localStorage.getItem("token"));
// const [showLogin, setShowLogin] = useState(false);
const [modalOpen, setModalOpen] = useState(false);
// const {token, logout } = useAuth();
if (!token)
// useEffect(() => {
// if (token) {
// // setShowLogin(false);
// setModalOpen(false);
// }
// }, [token]);
// if (!token)
return (
<AuthProvider>
<BrowserRouter>
<Navigation onLogin={() => setModalOpen(true)} />
<LoginModal isOpen={modalOpen} onClose={() => setModalOpen(false)} />
<Routes>
<Route path="/" element={<Landing onLogin={() => setModalOpen(true)} />} />
{/* <Route path="/signup" element={<SignUp/>} /> */}
<Route path="/dashboard" element={ <ProtectedRoute><Dashboard /></ProtectedRoute> }
/>
<Route path="/dashboard" element={ <ProtectedRoute><Dashboard /></ProtectedRoute> } />
</Routes>
</BrowserRouter>
</AuthProvider>
@@ -36,5 +46,5 @@ export default function App() {
// </>
);
return <Dashboard />;
// return <Dashboard />;
}

16
frontend/studia/src/api/user.tsx
View File

@@ -1,24 +1,24 @@
const API_URL = 'http://localhost:8080';
export async function loginUser(email:string, password: string) {
export async function loginUser(Email:string, Password: string) {
const res = await fetch(`${API_URL}/login`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email, password }),
body: JSON.stringify({ Email, Password }),
});
if (!res.ok) throw new Error('Login fehlgeschlagen');
return res.json(); // { token: string }
return res;
}
export async function registerUser(email:string, username:string, password: string){
export async function registerUser(request: { Email: string; Username: string; Password: string; }){
console.log(request);
const res = await fetch(`${API_URL}/register`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email,username, password }),
body: JSON.stringify(request),
});
if (!res.ok) throw new Error('Registrierung fehlgeschlagen');
return res.json(); // { token: string }
return res;
}
export async function fetchUserProfile(token: string) {

66
frontend/studia/src/components/AuthContext.tsx
View File

@@ -13,38 +13,74 @@ type AuthContextType = {
const AuthContext = createContext<AuthContextType | null>(null);
export const AuthProvider = ({ children }: { children: JSX.Element }) => {
export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
// export const AuthProvider = ({ children }: { children: JSX.Element }) => {
const [token, setToken] = useState<string | null>(null);
const [userId, setUserId] = useState<string | null>(null);
// const [userEmail, setuserEmail] = useState<string | null>(null);
// useEffect(() => {
// const storedToken = localStorage.getItem('token');
// console.log(storedToken);
// const storedUserId = localStorage.getItem('userId');
// if (!storedToken) {
// return;
// }
// // if (storedToken && storedUserId) {
// // setToken(storedToken);
// // setUserId(storedUserId);
// // }
// if (storedToken!==null) {
// setToken(storedToken);
// }
// if (storedUserId) {
// setUserId(storedUserId);
// }
// console.log(token);
// const user = getUserFromToken(storedToken);
// if (!user) {
// logout(); // z. B. localStorage.clear() + navigate("/login")
// return;
// }
// // ⏳ Logout bei Ablauf
// const timeout = setTimeout(() => {
// logout();
// }, user.exp * 1000 - Date.now());
// return () => clearTimeout(timeout);
// }, [token]);
useEffect(() => {
const storedToken = localStorage.getItem('token');
const storedUserId = localStorage.getItem('userId');
if (!storedToken) {
return;
return
}
if (storedToken && storedUserId) {
setToken(storedToken);
setUserId(storedUserId);
}
const user = getUserFromToken(storedToken);
if (!user) {
logout(); // z. B. localStorage.clear() + navigate("/login")
return;
}
const user = getUserFromToken(storedToken);
if (!user) {
logout(); // z.B. localStorage.clear() + navigate("/login")
return;
}
// ⏳ Logout bei Ablauf
const timeout = setTimeout(() => {
logout();
}, user.exp * 1000 - Date.now());
const timeout = setTimeout(() => {
logout();
}, user.exp * 1000 - Date.now());
return () => clearTimeout(timeout);
return () => clearTimeout(timeout);
}, []);
const login = (token: string, userId: string, role: string[] = []) => {
setToken(token);
setUserId(userId);
localStorage.setItem('token', token);
localStorage.setItem('userId', userId);
localStorage.setItem('role', JSON.stringify(role)); // Store array as string
@@ -55,6 +91,7 @@ export const AuthProvider = ({ children }: { children: JSX.Element }) => {
setUserId(null);
localStorage.removeItem('token');
localStorage.removeItem('userId');
localStorage.clear();
};
return (
@@ -64,4 +101,9 @@ export const AuthProvider = ({ children }: { children: JSX.Element }) => {
);
};
export const useAuth = () => useContext(AuthContext);
export function useAuth() {
const context = useContext(AuthContext);
if (!context) throw new Error('useAuth must be used within AuthProvider');
return context;
}
// export const useAuth = () => useContext(AuthContext);

71
frontend/studia/src/components/Card.tsx Normal file
View File

@@ -0,0 +1,71 @@
import { useState } from "react";
import { motion } from "framer-motion";
export default function FlipCard({ front, back }: { front: string; back: string }) {
const [flipped, setFlipped] = useState(false);
return (
<div
className="w-80 h-52 perspective cursor-pointer"
onClick={() => setFlipped(!flipped)}
onKeyDown={(e) => e.key === " " && setFlipped(!flipped)}
tabIndex={0}
role="button"
aria-label="Flip card"
>
<motion.div
className="relative w-full h-full"
animate={{ rotateY: flipped ? 180 : 0 }}
transition={{ duration: 0.45, ease: "easeInOut" }}
style={{ transformStyle: "preserve-3d" }}
>
{/* Front */}
<div className="absolute inset-0 flex items-center justify-center rounded-2xl bg-white shadow-lg backface-hidden">
<p className="text-xl font-semibold text-center px-4 text-black ">
{front}
</p>
</div>
{/* Back */}
<div className="absolute inset-0 flex items-center justify-center rounded-2xl bg-white shadow-lg backface-hidden rotate-y-180">
<p className="text-xl text-center px-4 text-black">
{back}
</p>
</div>
</motion.div>
{/* Tailwind can't handle these directly */}
<style>{`
.perspective {
perspective: 1000px;
}
.backface-hidden {
backface-visibility: hidden;
}
.rotate-y-180 {
transform: rotateY(180deg);
}
`}</style>
</div>
);
}
/*
USAGE (Vite + Tailwind):
<FlipCard
front="What is the capital of France?"
back="Paris"
/>
Stack:
- Vite
- React
- Tailwind CSS
- Framer Motion
Behavior:
- Quizlet-style flip
- Click or spacebar to flip
- Smooth 3D animation
*/

24
frontend/studia/src/components/LoginModal.tsx
View File

@@ -1,7 +1,11 @@
import {loginUser, registerUser} from "../api/user";
import { useState } from "react";
import { useNavigate } from 'react-router-dom';
import { useAuth } from './AuthContext';
export default function LoginModal({ isOpen, onClose, onSuccess }: any) {
const navigate = useNavigate(); // ← Navigation-Hook
const { login } = useAuth();
const [isRegistering, setIsRegistering] = useState(false);
if (!isOpen) return null; // 👈 THIS is the key
@@ -35,8 +39,10 @@ export default function LoginModal({ isOpen, onClose, onSuccess }: any) {
return;
}
// TODO: Call registerUser API
const res = await registerUser(email as string, username as string, password as string);
const res = await registerUser(
{ Email: email as string, Username: username as string, Password: password as string }
);
console.log(res);
if (!res.ok) {
alert("Registration failed!");
return;
@@ -98,12 +104,18 @@ export default function LoginModal({ isOpen, onClose, onSuccess }: any) {
const fd = new FormData(e.currentTarget);
const email = fd.get("email");
const password = fd.get("password");
const res = await loginUser(email as string, password as string);
if (!res.ok) {
alert("Login failed!");
return;
}
const data = await res.json();
localStorage.setItem("token", data.token);
onSuccess(data.token);
console.log(data);
login(data.token, data.userId,[]);
// localStorage.setItem("token", data.token);
onClose();
navigate("/");
}}
className="space-y-4"
>

39
frontend/studia/src/components/Navigation.tsx Normal file
View File

@@ -0,0 +1,39 @@
import { Link } from 'react-router-dom';
import { useAuth } from './AuthContext';
export default function Navigation({ onLogin }: { onLogin: () => void }) {
const { token, logout } = useAuth();
return (
<nav className="bg-white shadow p-4 flex justify-between items-center">
<div className="text-2xl font-bold text-indigo-700"><Link to="/">Studia</Link></div>
<div className="flex items-center space-x-4">
{token && (
<>
<a href="/dashboard" className="text-gray-600 hover:text-indigo-700">
Dashboard
</a>
<a href="#" className="text-gray-600 hover:text-indigo-700">
Settings
</a>
</>
)}
{token ? (
<button
onClick={logout}
className="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition"
>
Logout
</button>
) : (
<button
onClick={onLogin}
className="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition"
>
Login
</button>
)}
</div>
</nav>
);
}

11
frontend/studia/src/components/ProtectedRoute.tsx
View File

@@ -3,8 +3,15 @@ import { useAuth } from "../components/AuthContext";
import type { JSX } from 'react';
const ProtectedRoute = ({ children }: { children: JSX.Element }) => {
const { token } = useAuth() as { token?: string | null };
return token ? children : <Navigate to="/" />;
// const { token } = useAuth();
const token = localStorage.getItem('token');
// console.log(token);
if(token!=null)
return children;
else
console.log(token)
return <Navigate to="/" />;
// return token ? children : <Navigate to="/" />;
};
export default ProtectedRoute;

13
frontend/studia/src/pages/Dashboard.tsx
View File

@@ -1,14 +1,17 @@
import Builder from "./Builder";
import Learn from "./Learn";
import Admin from "./Admin";
// import { useAuth } from "../components/AuthContext";
export default function Dashboard() {
return (
<div className="min-h-screen bg-gray-100 p-6 space-y-10">
<Builder />
<Learn />
<Admin />
<div className="min-h-screen bg-gray-100">
<div className="p-6 space-y-10">
<Builder />
<Learn />
<Admin />
</div>
</div>
);
}

29
frontend/studia/src/pages/Landing.tsx
View File

@@ -1,27 +1,42 @@
import { useEffect } from "react";
import { useAuth } from "../components/AuthContext";
import Card from "../components/Card"
export default function Landing({ onLogin }: { onLogin: () => void }) {
const {token} = useAuth();
useEffect(() => {
console.log(token)
}, []);
return (
<div className="min-h-screen bg-gradient-to-br from-indigo-600 to-purple-700 text-white">
<div className="max-w-6xl mx-auto px-6 py-24 text-center">
<h1 className="text-5xl font-bold mb-6">Cardify</h1>
<h1 className="text-5xl font-bold mb-6">Studia</h1>
<p className="text-xl opacity-90 mb-12">
Learn smarter with flashcards & spaced repetition
</p>
<div className="grid md:grid-cols-3 gap-6 mb-12">
{["HTTP", "JWT", "REST"].map(t => (
<div key={t} className="bg-white/10 p-6 rounded-xl backdrop-blur">
<h3 className="font-semibold text-lg">{t}</h3>
<p className="opacity-80 mt-2">Sample definition</p>
</div>
// <div key={t} className="bg-white/10 p-6 rounded-xl backdrop-blur">
// <h3 className="font-semibold text-lg">{t}</h3>
// <p className="opacity-80 mt-2">Sample definition</p>
// </div>
<Card front={t} back="Sample definition"></Card>
))}
</div>
<button
{token? (
<div> </div>
) :
(
<button
onClick={onLogin}
className="bg-white text-indigo-700 px-8 py-3 rounded-xl font-semibold hover:scale-105 transition"
>
Get Started
</button>
) }
</div>
</div>
);