mirror of
https://github.com/R0m1k3/noteflow.git
synced 2026-10-14 02:36:55 +02:00
React: Application complète en React + TypeScript
Architecture: - Types TypeScript complets pour toutes les entités - Service API avec axios et intercepteurs JWT - AuthContext pour gestion authentification - Router avec routes protégées (login, dashboard) Composants: - Login: page de connexion avec formulaire - Dashboard: page principale avec 3 colonnes (notes, todos, rss) - Affichage conditionnel articles vs résumés RSS - Gestion todos en temps réel - Design moderne et responsive Configuration: - Vite avec proxy API vers backend (:3000) - Build vers /public-react - Configuration TypeScript stricte - CSS moderne avec variables et responsive Features: - Authentication complète - Notes affichées en grille - Todos sidebar avec CRUD - RSS sidebar avec articles ou résumés - Protection des routes - UX fluide et moderne
This commit is contained in:
10 files changed
+1202
-94
No files matched your search
+58
-31
@@ -1,35 +1,62 @@
|
||||
import { useState } from 'react'
|
||||
import reactLogo from './assets/react.svg'
|
||||
import viteLogo from '/vite.svg'
|
||||
import './App.css'
|
||||
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
|
||||
import { AuthProvider, useAuth } from './contexts/AuthContext';
|
||||
import Login from './pages/Login';
|
||||
import Dashboard from './pages/Dashboard';
|
||||
|
||||
function App() {
|
||||
const [count, setCount] = useState(0)
|
||||
// Protected Route Component
|
||||
function ProtectedRoute({ children }: { children: React.ReactNode }) {
|
||||
const { isAuthenticated } = useAuth();
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<a href="https://vite.dev" target="_blank">
|
||||
<img src={viteLogo} className="logo" alt="Vite logo" />
|
||||
</a>
|
||||
<a href="https://react.dev" target="_blank">
|
||||
<img src={reactLogo} className="logo react" alt="React logo" />
|
||||
</a>
|
||||
</div>
|
||||
<h1>Vite + React</h1>
|
||||
<div className="card">
|
||||
<button onClick={() => setCount((count) => count + 1)}>
|
||||
count is {count}
|
||||
</button>
|
||||
<p>
|
||||
Edit <code>src/App.tsx</code> and save to test HMR
|
||||
</p>
|
||||
</div>
|
||||
<p className="read-the-docs">
|
||||
Click on the Vite and React logos to learn more
|
||||
</p>
|
||||
</>
|
||||
)
|
||||
if (!isAuthenticated) {
|
||||
return <Navigate to="/login" replace />;
|
||||
}
|
||||
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
export default App
|
||||
// Public Route Component (redirect if already logged in)
|
||||
function PublicRoute({ children }: { children: React.ReactNode }) {
|
||||
const { isAuthenticated } = useAuth();
|
||||
|
||||
if (isAuthenticated) {
|
||||
return <Navigate to="/" replace />;
|
||||
}
|
||||
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
function AppRoutes() {
|
||||
return (
|
||||
<Routes>
|
||||
<Route
|
||||
path="/login"
|
||||
element={
|
||||
<PublicRoute>
|
||||
<Login />
|
||||
</PublicRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/"
|
||||
element={
|
||||
<ProtectedRoute>
|
||||
<Dashboard />
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
</Routes>
|
||||
);
|
||||
}
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<AuthProvider>
|
||||
<AppRoutes />
|
||||
</AuthProvider>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -0,0 +1,66 @@
|
||||
import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
|
||||
import { authApi } from '../services/api';
|
||||
import type { User, AuthContextType } from '../types';
|
||||
|
||||
const AuthContext = createContext<AuthContextType | null>(null);
|
||||
|
||||
export const AuthProvider = ({ children }: { children: ReactNode }) => {
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [token, setToken] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
// Récupérer le token et user du localStorage au démarrage
|
||||
const storedToken = localStorage.getItem('token');
|
||||
const storedUser = localStorage.getItem('user');
|
||||
|
||||
if (storedToken && storedUser) {
|
||||
setToken(storedToken);
|
||||
setUser(JSON.parse(storedUser));
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
const login = async (username: string, password: string) => {
|
||||
const data = await authApi.login(username, password);
|
||||
|
||||
setToken(data.token);
|
||||
setUser(data.user);
|
||||
|
||||
localStorage.setItem('token', data.token);
|
||||
localStorage.setItem('user', JSON.stringify(data.user));
|
||||
};
|
||||
|
||||
const logout = () => {
|
||||
setToken(null);
|
||||
setUser(null);
|
||||
|
||||
localStorage.removeItem('token');
|
||||
localStorage.removeItem('user');
|
||||
|
||||
authApi.logout().catch(() => {});
|
||||
};
|
||||
|
||||
const value: AuthContextType = {
|
||||
user,
|
||||
token,
|
||||
login,
|
||||
logout,
|
||||
isAuthenticated: !!token,
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="loading">Chargement...</div>;
|
||||
}
|
||||
|
||||
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
|
||||
};
|
||||
|
||||
export const useAuth = () => {
|
||||
const context = useContext(AuthContext);
|
||||
if (!context) {
|
||||
throw new Error('useAuth must be used within AuthProvider');
|
||||
}
|
||||
return context;
|
||||
};
|
||||
+32
-63
@@ -1,68 +1,37 @@
|
||||
:root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
color: #1a202c;
|
||||
background: #f7fafc;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
|
||||
:root {
|
||||
--color-primary: #667eea;
|
||||
--color-secondary: #764ba2;
|
||||
--color-text: #1a202c;
|
||||
--color-text-light: #718096;
|
||||
--color-border: #e2e8f0;
|
||||
--color-bg: #f7fafc;
|
||||
--color-card: #ffffff;
|
||||
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
#root {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,303 @@
|
||||
.dashboard {
|
||||
min-height: 100vh;
|
||||
background: #f7fafc;
|
||||
}
|
||||
|
||||
.dashboard-header {
|
||||
background: white;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
padding: 16px 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.header-left h1 {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
color: #1a202c;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
color: #4a5568;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-logout {
|
||||
padding: 8px 16px;
|
||||
background: #e2e8f0;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.btn-logout:hover {
|
||||
background: #cbd5e0;
|
||||
}
|
||||
|
||||
.dashboard-main {
|
||||
padding: 24px;
|
||||
max-width: 1800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 320px 320px;
|
||||
gap: 24px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #1a202c;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
padding: 8px 16px;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #5a67d8;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Notes Section */
|
||||
.notes-section {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.notes-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.note-card {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e2e8f0;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.note-card:hover {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.note-card h3 {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1a202c;
|
||||
}
|
||||
|
||||
.note-card p {
|
||||
margin: 0;
|
||||
color: #718096;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.note-todos-preview {
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
font-size: 13px;
|
||||
color: #667eea;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Todos Sidebar */
|
||||
.todos-sidebar,
|
||||
.rss-sidebar {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e2e8f0;
|
||||
padding: 20px;
|
||||
position: sticky;
|
||||
top: 88px;
|
||||
max-height: calc(100vh - 112px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.todo-input-container {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.todo-input-container input {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.todo-input-container input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.todos-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.todo-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
background: #f7fafc;
|
||||
border-radius: 6px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.todo-item:hover {
|
||||
background: #edf2f7;
|
||||
}
|
||||
|
||||
.todo-item input[type="checkbox"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.todo-item span {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: #2d3748;
|
||||
}
|
||||
|
||||
.todo-item span.completed {
|
||||
text-decoration: line-through;
|
||||
color: #a0aec0;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
padding: 4px 8px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #cbd5e0;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
background: #fed7d7;
|
||||
color: #c53030;
|
||||
}
|
||||
|
||||
/* RSS Sidebar */
|
||||
.rss-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.rss-article,
|
||||
.rss-summary {
|
||||
padding: 12px;
|
||||
background: #f7fafc;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.rss-article:hover {
|
||||
background: #edf2f7;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.rss-article h4,
|
||||
.rss-summary h4 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1a202c;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.rss-article p,
|
||||
.rss-summary p {
|
||||
margin: 8px 0 0 0;
|
||||
font-size: 13px;
|
||||
color: #718096;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.article-meta,
|
||||
.summary-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
color: #a0aec0;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
color: #a0aec0;
|
||||
font-size: 14px;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
font-size: 18px;
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 1400px) {
|
||||
.content-grid {
|
||||
grid-template-columns: 1fr 280px 280px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.content-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.todos-sidebar,
|
||||
.rss-sidebar {
|
||||
position: static;
|
||||
max-height: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,199 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import { notesApi, todosApi, rssApi, settingsApi } from '../services/api';
|
||||
import type { Note, GlobalTodo, RssArticle, RssSummary } from '../types';
|
||||
import './Dashboard.css';
|
||||
|
||||
export default function Dashboard() {
|
||||
const { user, logout } = useAuth();
|
||||
const [notes, setNotes] = useState<Note[]>([]);
|
||||
const [todos, setTodos] = useState<GlobalTodo[]>([]);
|
||||
const [rssContent, setRssContent] = useState<RssArticle[] | RssSummary[]>([]);
|
||||
const [showSummaries, setShowSummaries] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
const [notesData, todosData, settings] = await Promise.all([
|
||||
notesApi.getAll(false),
|
||||
todosApi.getAll(),
|
||||
settingsApi.getAll(),
|
||||
]);
|
||||
|
||||
setNotes(notesData);
|
||||
setTodos(todosData);
|
||||
|
||||
const summaryEnabled = settings.rss_summary_enabled === '1';
|
||||
setShowSummaries(summaryEnabled);
|
||||
|
||||
if (summaryEnabled) {
|
||||
const summaries = await rssApi.getSummaries();
|
||||
setRssContent(summaries);
|
||||
} else {
|
||||
const articles = await rssApi.getArticles();
|
||||
setRssContent(articles);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erreur chargement données:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const addTodo = async (text: string) => {
|
||||
if (!text.trim()) return;
|
||||
try {
|
||||
const newTodo = await todosApi.create(text);
|
||||
setTodos([...todos, newTodo]);
|
||||
} catch (error) {
|
||||
console.error('Erreur ajout todo:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleTodo = async (id: number, completed: boolean) => {
|
||||
try {
|
||||
await todosApi.update(id, completed);
|
||||
setTodos(todos.map(t => t.id === id ? { ...t, completed } : t));
|
||||
} catch (error) {
|
||||
console.error('Erreur toggle todo:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const deleteTodo = async (id: number) => {
|
||||
if (!window.confirm('Supprimer cette tâche ?')) return;
|
||||
try {
|
||||
await todosApi.delete(id);
|
||||
setTodos(todos.filter(t => t.id !== id));
|
||||
} catch (error) {
|
||||
console.error('Erreur suppression todo:', error);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="loading">Chargement...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="dashboard">
|
||||
{/* Header */}
|
||||
<header className="dashboard-header">
|
||||
<div className="header-left">
|
||||
<h1>📝 NoteFlow</h1>
|
||||
</div>
|
||||
<div className="header-right">
|
||||
<span className="user-name">{user?.username}</span>
|
||||
<button onClick={logout} className="btn-logout">
|
||||
Déconnexion
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="dashboard-main">
|
||||
<div className="content-grid">
|
||||
{/* Notes Section */}
|
||||
<section className="notes-section">
|
||||
<div className="section-header">
|
||||
<h2>Notes</h2>
|
||||
<button className="btn-primary">+ Nouvelle note</button>
|
||||
</div>
|
||||
<div className="notes-grid">
|
||||
{notes.length === 0 ? (
|
||||
<p className="empty-state">Aucune note</p>
|
||||
) : (
|
||||
notes.map(note => (
|
||||
<div key={note.id} className="note-card">
|
||||
<h3>{note.title}</h3>
|
||||
{note.content && <p>{note.content.substring(0, 150)}...</p>}
|
||||
{note.todos && note.todos.length > 0 && (
|
||||
<div className="note-todos-preview">
|
||||
{note.todos_completed}/{note.todos_count} tâches
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Todos Sidebar */}
|
||||
<aside className="todos-sidebar">
|
||||
<div className="section-header">
|
||||
<h2>✓ Todos</h2>
|
||||
</div>
|
||||
<div className="todo-input-container">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Nouvelle tâche..."
|
||||
onKeyPress={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
addTodo(e.currentTarget.value);
|
||||
e.currentTarget.value = '';
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="todos-list">
|
||||
{todos.map(todo => (
|
||||
<div key={todo.id} className="todo-item">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={todo.completed}
|
||||
onChange={(e) => toggleTodo(todo.id, e.target.checked)}
|
||||
/>
|
||||
<span className={todo.completed ? 'completed' : ''}>{todo.text}</span>
|
||||
<button onClick={() => deleteTodo(todo.id)} className="btn-delete">
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* RSS Sidebar */}
|
||||
<aside className="rss-sidebar">
|
||||
<div className="section-header">
|
||||
<h2>📰 Actualités</h2>
|
||||
</div>
|
||||
<div className="rss-content">
|
||||
{rssContent.length === 0 ? (
|
||||
<p className="empty-state">Aucun contenu</p>
|
||||
) : showSummaries ? (
|
||||
// Afficher les résumés
|
||||
(rssContent as RssSummary[]).map(summary => (
|
||||
<div key={summary.id} className="rss-summary">
|
||||
<h4>Résumé du {new Date(summary.created_at).toLocaleDateString('fr-FR')}</h4>
|
||||
<p>{summary.summary.substring(0, 200)}...</p>
|
||||
<div className="summary-meta">
|
||||
{summary.articles_count} articles • {summary.model.split('/')[1] || summary.model}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
// Afficher les articles
|
||||
(rssContent as RssArticle[]).map(article => (
|
||||
<div
|
||||
key={article.id}
|
||||
className="rss-article"
|
||||
onClick={() => window.open(article.link, '_blank')}
|
||||
>
|
||||
<h4>{article.title}</h4>
|
||||
<div className="article-meta">
|
||||
<span>{article.feed_title}</span>
|
||||
<span>{new Date(article.pub_date).toLocaleDateString('fr-FR')}</span>
|
||||
</div>
|
||||
{article.description && <p>{article.description.substring(0, 100)}...</p>}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,120 @@
|
||||
.login-page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
max-width: 420px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login-header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.login-header h1 {
|
||||
font-size: 32px;
|
||||
margin: 0 0 8px 0;
|
||||
color: #1a202c;
|
||||
}
|
||||
|
||||
.login-header p {
|
||||
margin: 0;
|
||||
color: #718096;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #2d3748;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
padding: 12px 16px;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
font-size: 15px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
.form-group input:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background: #fed7d7;
|
||||
color: #c53030;
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #fc8181;
|
||||
}
|
||||
|
||||
.btn-login {
|
||||
padding: 14px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.btn-login:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.btn-login:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.login-footer {
|
||||
text-align: center;
|
||||
margin-top: 24px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.login-footer p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #718096;
|
||||
}
|
||||
|
||||
.login-footer strong {
|
||||
color: #2d3748;
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
import { useState, FormEvent } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import './Login.css';
|
||||
|
||||
export default function Login() {
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const { login } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleSubmit = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
await login(username, password);
|
||||
navigate('/');
|
||||
} catch (err: any) {
|
||||
setError(err.response?.data?.error || 'Erreur de connexion');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="login-page">
|
||||
<div className="login-container">
|
||||
<div className="login-header">
|
||||
<h1>📝 NoteFlow</h1>
|
||||
<p>Connectez-vous pour accéder à vos notes</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="login-form">
|
||||
{error && <div className="error-message">{error}</div>}
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="username">Nom d'utilisateur</label>
|
||||
<input
|
||||
type="text"
|
||||
id="username"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
required
|
||||
autoFocus
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="password">Mot de passe</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="btn-login" disabled={loading}>
|
||||
{loading ? 'Connexion...' : 'Se connecter'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="login-footer">
|
||||
<p>Compte par défaut : <strong>admin / admin</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,217 @@
|
||||
import axios, { AxiosInstance, AxiosError } from 'axios';
|
||||
import type {
|
||||
User,
|
||||
Note,
|
||||
Todo,
|
||||
GlobalTodo,
|
||||
RssFeed,
|
||||
RssArticle,
|
||||
RssSummary,
|
||||
OpenRouterModel,
|
||||
Settings,
|
||||
NoteFile
|
||||
} from '../types';
|
||||
|
||||
// Configuration Axios
|
||||
const api: AxiosInstance = axios.create({
|
||||
baseURL: '/api',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
|
||||
// Intercepteur pour ajouter le token JWT
|
||||
api.interceptors.request.use((config) => {
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
return config;
|
||||
});
|
||||
|
||||
// Intercepteur pour gérer les erreurs d'authentification
|
||||
api.interceptors.response.use(
|
||||
(response) => response,
|
||||
(error: AxiosError) => {
|
||||
if (error.response?.status === 401 || error.response?.status === 403) {
|
||||
localStorage.removeItem('token');
|
||||
localStorage.removeItem('user');
|
||||
window.location.href = '/login';
|
||||
}
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
// === AUTH ===
|
||||
export const authApi = {
|
||||
login: async (username: string, password: string) => {
|
||||
const { data } = await api.post('/auth/login', { username, password });
|
||||
return data;
|
||||
},
|
||||
register: async (username: string, password: string) => {
|
||||
const { data } = await api.post('/auth/register', { username, password });
|
||||
return data;
|
||||
},
|
||||
logout: async () => {
|
||||
const { data } = await api.post('/auth/logout');
|
||||
return data;
|
||||
},
|
||||
};
|
||||
|
||||
// === USERS ===
|
||||
export const usersApi = {
|
||||
getAll: async (): Promise<User[]> => {
|
||||
const { data } = await api.get('/users');
|
||||
return data;
|
||||
},
|
||||
create: async (username: string, password: string, is_admin: boolean): Promise<User> => {
|
||||
const { data } = await api.post('/users', { username, password, is_admin });
|
||||
return data;
|
||||
},
|
||||
update: async (id: number, password: string): Promise<void> => {
|
||||
await api.put(`/users/${id}`, { password });
|
||||
},
|
||||
delete: async (id: number): Promise<void> => {
|
||||
await api.delete(`/users/${id}`);
|
||||
},
|
||||
};
|
||||
|
||||
// === NOTES ===
|
||||
export const notesApi = {
|
||||
getAll: async (archived: boolean = false): Promise<Note[]> => {
|
||||
const { data } = await api.get(`/notes?archived=${archived}`);
|
||||
return Array.isArray(data) ? data : [];
|
||||
},
|
||||
getOne: async (id: number): Promise<Note> => {
|
||||
const { data } = await api.get(`/notes/${id}`);
|
||||
return data;
|
||||
},
|
||||
create: async (note: Partial<Note>): Promise<Note> => {
|
||||
const { data } = await api.post('/notes', note);
|
||||
return data;
|
||||
},
|
||||
update: async (id: number, note: Partial<Note>): Promise<void> => {
|
||||
await api.put(`/notes/${id}`, note);
|
||||
},
|
||||
delete: async (id: number): Promise<void> => {
|
||||
await api.delete(`/notes/${id}`);
|
||||
},
|
||||
archive: async (id: number, archived: boolean): Promise<void> => {
|
||||
await api.put(`/notes/${id}/archive`, { archived });
|
||||
},
|
||||
uploadImage: async (id: number, file: File): Promise<{ filename: string; url: string }> => {
|
||||
const formData = new FormData();
|
||||
formData.append('image', file);
|
||||
const { data } = await api.post(`/notes/${id}/image`, formData, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
});
|
||||
return data;
|
||||
},
|
||||
deleteImage: async (id: number): Promise<void> => {
|
||||
await api.delete(`/notes/${id}/image`);
|
||||
},
|
||||
uploadFile: async (id: number, file: File): Promise<NoteFile> => {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
const { data } = await api.post(`/notes/${id}/files`, formData, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
});
|
||||
return data;
|
||||
},
|
||||
downloadFile: async (fileId: number): Promise<void> => {
|
||||
window.open(`/api/notes/files/${fileId}/download`, '_blank');
|
||||
},
|
||||
deleteFile: async (fileId: number): Promise<void> => {
|
||||
await api.delete(`/api/notes/files/${fileId}`);
|
||||
},
|
||||
};
|
||||
|
||||
// === NOTE TODOS ===
|
||||
export const noteTodosApi = {
|
||||
create: async (noteId: number, text: string): Promise<Todo> => {
|
||||
const { data } = await api.post(`/notes/${noteId}/todos`, { text });
|
||||
return data;
|
||||
},
|
||||
update: async (id: number, completed: boolean): Promise<void> => {
|
||||
await api.put(`/notes/todos/${id}`, { completed });
|
||||
},
|
||||
delete: async (id: number): Promise<void> => {
|
||||
await api.delete(`/notes/todos/${id}`);
|
||||
},
|
||||
};
|
||||
|
||||
// === GLOBAL TODOS ===
|
||||
export const todosApi = {
|
||||
getAll: async (): Promise<GlobalTodo[]> => {
|
||||
const { data} = await api.get('/todos');
|
||||
return data;
|
||||
},
|
||||
create: async (text: string): Promise<GlobalTodo> => {
|
||||
const { data } = await api.post('/todos', { text });
|
||||
return data;
|
||||
},
|
||||
update: async (id: number, completed: boolean): Promise<void> => {
|
||||
await api.put(`/todos/${id}`, { completed });
|
||||
},
|
||||
delete: async (id: number): Promise<void> => {
|
||||
await api.delete(`/todos/${id}`);
|
||||
},
|
||||
};
|
||||
|
||||
// === RSS FEEDS ===
|
||||
export const rssApi = {
|
||||
getFeeds: async (): Promise<RssFeed[]> => {
|
||||
const { data } = await api.get('/rss/feeds');
|
||||
return data;
|
||||
},
|
||||
addFeed: async (url: string): Promise<RssFeed> => {
|
||||
const { data } = await api.post('/rss/feeds', { url });
|
||||
return data;
|
||||
},
|
||||
updateFeed: async (id: number, enabled: boolean): Promise<void> => {
|
||||
await api.put(`/rss/feeds/${id}`, { enabled });
|
||||
},
|
||||
deleteFeed: async (id: number): Promise<void> => {
|
||||
await api.delete(`/rss/feeds/${id}`);
|
||||
},
|
||||
fetchArticles: async (): Promise<{ message: string }> => {
|
||||
const { data } = await api.post('/rss/fetch');
|
||||
return data;
|
||||
},
|
||||
getArticles: async (): Promise<RssArticle[]> => {
|
||||
const { data } = await api.get('/rss/articles');
|
||||
return data || [];
|
||||
},
|
||||
getSummaries: async (): Promise<RssSummary[]> => {
|
||||
const { data } = await api.get('/rss/summaries');
|
||||
return data || [];
|
||||
},
|
||||
generateSummary: async (): Promise<{ summary: string; model: string; articles_count: number }> => {
|
||||
const { data } = await api.post('/rss/summarize');
|
||||
return data;
|
||||
},
|
||||
getModels: async (): Promise<OpenRouterModel[]> => {
|
||||
const { data } = await api.get('/rss/models');
|
||||
return data;
|
||||
},
|
||||
};
|
||||
|
||||
// === SETTINGS ===
|
||||
export const settingsApi = {
|
||||
getAll: async (): Promise<Settings> => {
|
||||
const { data } = await api.get('/settings');
|
||||
return data;
|
||||
},
|
||||
getOne: async (key: string): Promise<{ key: string; value: string }> => {
|
||||
const { data } = await api.get(`/settings/${key}`);
|
||||
return data;
|
||||
},
|
||||
update: async (key: string, value: string): Promise<void> => {
|
||||
await api.put(`/settings/${key}`, { value });
|
||||
},
|
||||
delete: async (key: string): Promise<void> => {
|
||||
await api.delete(`/settings/${key}`);
|
||||
},
|
||||
};
|
||||
|
||||
export default api;
|
||||
@@ -0,0 +1,114 @@
|
||||
// Types pour l'application NoteFlow
|
||||
|
||||
export interface User {
|
||||
id: number;
|
||||
username: string;
|
||||
is_admin: boolean;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export interface Note {
|
||||
id: number;
|
||||
user_id: number;
|
||||
title: string;
|
||||
content: string;
|
||||
image_filename?: string;
|
||||
archived: boolean;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
todos?: Todo[];
|
||||
files?: NoteFile[];
|
||||
todos_count?: number;
|
||||
todos_completed?: number;
|
||||
}
|
||||
|
||||
export interface Todo {
|
||||
id: number;
|
||||
note_id: number;
|
||||
text: string;
|
||||
completed: boolean;
|
||||
position: number;
|
||||
}
|
||||
|
||||
export interface GlobalTodo {
|
||||
id: number;
|
||||
user_id: number;
|
||||
text: string;
|
||||
completed: boolean;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export interface NoteFile {
|
||||
id: number;
|
||||
note_id: number;
|
||||
filename: string;
|
||||
original_name: string;
|
||||
file_size: number;
|
||||
mime_type: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export interface RssFeed {
|
||||
id: number;
|
||||
url: string;
|
||||
title: string;
|
||||
description: string;
|
||||
enabled: boolean;
|
||||
created_at: string;
|
||||
last_fetched_at?: string;
|
||||
}
|
||||
|
||||
export interface RssArticle {
|
||||
id: number;
|
||||
feed_id: number;
|
||||
title: string;
|
||||
link: string;
|
||||
description?: string;
|
||||
pub_date: string;
|
||||
content?: string;
|
||||
feed_title: string;
|
||||
feed_url: string;
|
||||
}
|
||||
|
||||
export interface RssSummary {
|
||||
id: number;
|
||||
summary: string;
|
||||
model: string;
|
||||
articles_count: number;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export interface OpenRouterModel {
|
||||
id: string;
|
||||
name: string;
|
||||
provider: string;
|
||||
context_length?: number;
|
||||
pricing?: {
|
||||
prompt: number;
|
||||
completion: number;
|
||||
};
|
||||
}
|
||||
|
||||
export interface Settings {
|
||||
[key: string]: string;
|
||||
openrouter_api_key?: string;
|
||||
openrouter_model?: string;
|
||||
rss_summary_enabled?: string;
|
||||
rss_summary_prompt?: string;
|
||||
}
|
||||
|
||||
export interface AuthContextType {
|
||||
user: User | null;
|
||||
token: string | null;
|
||||
login: (username: string, password: string) => Promise<void>;
|
||||
logout: () => void;
|
||||
isAuthenticated: boolean;
|
||||
}
|
||||
|
||||
export interface ApiError {
|
||||
error: string;
|
||||
details?: any;
|
||||
}
|
||||
|
||||
export type NoteView = 'active' | 'archived';
|
||||
export type TodoFilter = 'all' | 'active' | 'completed';
|
||||
@@ -4,4 +4,20 @@ import react from '@vitejs/plugin-react'
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
port: 5173,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:3000',
|
||||
changeOrigin: true,
|
||||
},
|
||||
'/uploads': {
|
||||
target: 'http://localhost:3000',
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
build: {
|
||||
outDir: '../public-react',
|
||||
},
|
||||
})
|
||||
Reference in new issue
Block a user