feat(backend): implemented self delete for users

20 create a controller layer on backend side

7project/backend/app/api/auth.py

@@ -1,10 +1,28 @@
-from fastapi import APIRouter
+from fastapi import APIRouter, Depends, status
+from fastapi_users import models
+from fastapi_users.manager import BaseUserManager
 
 from app.schemas.user import UserCreate, UserRead, UserUpdate
 from app.services.user_service import auth_backend, fastapi_users
 
 router = APIRouter()
 
+@router.delete(
+    "/users/me",
+    status_code=status.HTTP_204_NO_CONTENT,
+    tags=["users"],
+    summary="Delete current user",
+    response_description="The user has been successfully deleted.",
+)
+async def delete_me(
+    user: models.UserProtocol = Depends(fastapi_users.current_user(active=True)),
+    user_manager: BaseUserManager = Depends(fastapi_users.get_user_manager),
+):
+    """
+    Delete the currently authenticated user.
+    """
+    await user_manager.delete(user)
+
 # Keep existing paths as-is under /auth/* and /users/*
 router.include_router(
     fastapi_users.get_auth_router(auth_backend), prefix="/auth/jwt", tags=["auth"]

7project/backend/app/app.py

@@ -23,9 +23,9 @@ fastApi.add_middleware(
     allow_headers=["*"],
 )
 
-app.include_router(auth_router)
-app.include_router(categories_router)
-app.include_router(transactions_router)
+fastApi.include_router(auth_router)
+fastApi.include_router(categories_router)
+fastApi.include_router(transactions_router)
 
 fastApi.include_router(
     fastapi_users.get_oauth_router(

7project/frontend/src/App.css

@@ -1,42 +1 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
+/* App-level styles moved to ui.css for a cleaner layout. */

7project/frontend/src/App.tsx

@@ -1,39 +1,39 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
-import { BACKEND_URL } from './config'
+import { useEffect, useState } from 'react';
+import './App.css';
+import LoginRegisterPage from './pages/LoginRegisterPage';
+import Dashboard from './pages/Dashboard';
+import { logout } from './api';
 
 function App() {
-  const [count, setCount] = useState(0)
+  const [hasToken, setHasToken] = useState<boolean>(!!localStorage.getItem('token'));
+
+  useEffect(() => {
+    // Handle OAuth callback: /oauth-callback?access_token=...&token_type=...
+    if (window.location.pathname === '/oauth-callback') {
+      const params = new URLSearchParams(window.location.search);
+      const token = params.get('access_token');
+      if (token) {
+        localStorage.setItem('token', token);
+        setHasToken(true);
+      }
+      // Clean URL and redirect to home
+      window.history.replaceState({}, '', '/');
+    }
+
+    const onStorage = (e: StorageEvent) => {
+      if (e.key === 'token') setHasToken(!!e.newValue);
+    };
+    window.addEventListener('storage', onStorage);
+    return () => window.removeEventListener('storage', onStorage);
+  }, []);
+
+  if (!hasToken) {
+    return <LoginRegisterPage onLoggedIn={() => setHasToken(true)} />;
+  }
 
   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>
-        <p style={{ fontSize: 12, color: '#888' }}>
-          Backend URL: <code>{BACKEND_URL || '(not configured)'}</code>
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  )
+    <Dashboard onLogout={() => { logout(); setHasToken(false); }} />
+  );
 }
 
-export default App
+export default App;

7project/frontend/src/api.ts

@@ -0,0 +1,143 @@
+import { BACKEND_URL } from './config';
+
+export type LoginResponse = {
+  access_token: string;
+  token_type: string;
+};
+
+export type Category = {
+  id: number;
+  name: string;
+  description?: string | null;
+};
+
+export type Transaction = {
+  id: number;
+  amount: number;
+  description?: string | null;
+  category_ids: number[];
+};
+
+function getBaseUrl() {
+  const base = BACKEND_URL?.replace(/\/$/, '') || '';
+  return base || '';
+}
+
+function authHeaders() {
+  const token = localStorage.getItem('token');
+  return token ? { Authorization: `Bearer ${token}` } : {};
+}
+
+export async function login(email: string, password: string): Promise<void> {
+  const body = new URLSearchParams();
+  body.set('username', email);
+  body.set('password', password);
+
+  const res = await fetch(`${getBaseUrl()}/auth/jwt/login`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    body: body.toString(),
+  });
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text || 'Login failed');
+  }
+  const data: LoginResponse = await res.json();
+  localStorage.setItem('token', data.access_token);
+}
+
+export async function register(email: string, password: string, first_name?: string, last_name?: string): Promise<void> {
+  const res = await fetch(`${getBaseUrl()}/auth/register`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ email, password, first_name, last_name }),
+  });
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text || 'Registration failed');
+  }
+}
+
+export async function getCategories(): Promise<Category[]> {
+  const res = await fetch(`${getBaseUrl()}/categories/`, {
+    headers: { 'Content-Type': 'application/json', ...authHeaders() },
+  });
+  if (!res.ok) throw new Error('Failed to load categories');
+  return res.json();
+}
+
+export type CreateTransactionInput = {
+  amount: number;
+  description?: string;
+  category_ids?: number[];
+};
+
+export async function createTransaction(input: CreateTransactionInput): Promise<Transaction> {
+  const res = await fetch(`${getBaseUrl()}/transactions/create`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', ...authHeaders() },
+    body: JSON.stringify(input),
+  });
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text || 'Failed to create transaction');
+  }
+  return res.json();
+}
+
+export async function getTransactions(): Promise<Transaction[]> {
+    const res = await fetch(`${getBaseUrl()}/transactions/`, {
+    headers: { 'Content-Type': 'application/json', ...authHeaders() },
+  });
+  if (!res.ok) throw new Error('Failed to load transactions');
+  return res.json();
+}
+
+export type User = {
+  id: string;
+  email: string;
+  first_name?: string | null;
+  last_name?: string | null;
+  is_active: boolean;
+  is_superuser: boolean;
+  is_verified: boolean;
+};
+
+export async function getMe(): Promise<User> {
+  const res = await fetch(`${getBaseUrl()}/users/me`, {
+    headers: { 'Content-Type': 'application/json', ...authHeaders() },
+  });
+  if (!res.ok) throw new Error('Failed to load user');
+  return res.json();
+}
+
+export type UpdateMeInput = Partial<Pick<User, 'first_name' | 'last_name'>> & { password?: string };
+export async function updateMe(input: UpdateMeInput): Promise<User> {
+  const res = await fetch(`${getBaseUrl()}/users/me`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json', ...authHeaders() },
+    body: JSON.stringify(input),
+  });
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text || 'Failed to update user');
+  }
+  return res.json();
+}
+
+export async function deleteMe(): Promise<void> {
+  const res = await fetch(`${getBaseUrl()}/users/me`, {
+    method: 'DELETE',
+    headers: { ...authHeaders() },
+  });
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text || 'Failed to delete account');
+  }
+}
+
+export function logout() {
+  localStorage.removeItem('token');
+}

7project/frontend/src/main.tsx

@@ -1,7 +1,11 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
+import './ui.css'
 import App from './App.tsx'
+import { applyAppearanceFromStorage } from './appearance'
+
+applyAppearanceFromStorage()
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>

7project/frontend/src/pages/Dashboard.tsx

@@ -0,0 +1,172 @@
+import { useEffect, useMemo, useState } from 'react';
+import { type Category, type Transaction, createTransaction, getCategories, getTransactions } from '../api';
+import AccountPage from './AccountPage';
+import AppearancePage from './AppearancePage';
+
+function formatAmount(n: number) {
+  return new Intl.NumberFormat(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(n);
+}
+
+export default function Dashboard({ onLogout }: { onLogout: () => void }) {
+  const [current, setCurrent] = useState<'home' | 'account' | 'appearance'>('home');
+  const [transactions, setTransactions] = useState<Transaction[]>([]);
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // New transaction form state
+  const [amount, setAmount] = useState<string>('');
+  const [description, setDescription] = useState('');
+  const [selectedCategoryId, setSelectedCategoryId] = useState<number | ''>('');
+
+  // Filters
+  const [minAmount, setMinAmount] = useState<string>('');
+  const [maxAmount, setMaxAmount] = useState<string>('');
+  const [filterCategoryId, setFilterCategoryId] = useState<number | ''>('');
+  const [searchText, setSearchText] = useState('');
+
+  async function loadAll() {
+    setLoading(true);
+    setError(null);
+    try {
+      const [txs, cats] = await Promise.all([getTransactions(), getCategories()]);
+      setTransactions(txs);
+      setCategories(cats);
+    } catch (err: any) {
+      setError(err?.message || 'Failed to load data');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => { loadAll(); }, []);
+
+  const last10 = useMemo(() => {
+    const sorted = [...transactions].sort((a, b) => b.id - a.id);
+    return sorted.slice(0, 10);
+  }, [transactions]);
+
+  const filtered = useMemo(() => {
+    let arr = last10;
+    const min = minAmount !== '' ? Number(minAmount) : undefined;
+    const max = maxAmount !== '' ? Number(maxAmount) : undefined;
+    if (min !== undefined) arr = arr.filter(t => t.amount >= min);
+    if (max !== undefined) arr = arr.filter(t => t.amount <= max);
+    if (filterCategoryId !== '') arr = arr.filter(t => t.category_ids.includes(filterCategoryId as number));
+    if (searchText.trim()) arr = arr.filter(t => (t.description || '').toLowerCase().includes(searchText.toLowerCase()));
+    return arr;
+  }, [last10, minAmount, maxAmount, filterCategoryId, searchText]);
+
+  function categoryNameById(id: number) { return categories.find(c => c.id === id)?.name || `#${id}`; }
+
+  async function handleCreate(e: React.FormEvent) {
+    e.preventDefault();
+    if (!amount) return;
+    const payload = {
+      amount: Number(amount),
+      description: description || undefined,
+      category_ids: selectedCategoryId !== '' ? [Number(selectedCategoryId)] : undefined,
+    };
+    try {
+      const created = await createTransaction(payload);
+      setTransactions(prev => [created, ...prev]);
+      setAmount(''); setDescription(''); setSelectedCategoryId('');
+    } catch (err: any) {
+      alert(err?.message || 'Failed to create transaction');
+    }
+  }
+
+  return (
+    <div className="app-layout">
+      <aside className="sidebar">
+        <div className="logo">7Project</div>
+        <nav className="nav">
+          <button className={current === 'home' ? 'active' : ''} onClick={() => setCurrent('home')}>Home</button>
+          <button className={current === 'account' ? 'active' : ''} onClick={() => setCurrent('account')}>Account</button>
+          <button className={current === 'appearance' ? 'active' : ''} onClick={() => setCurrent('appearance')}>Appearance</button>
+        </nav>
+      </aside>
+      <div className="content">
+        <div className="topbar">
+          <h2 style={{ margin: 0 }}>{current === 'home' ? 'Dashboard' : current === 'account' ? 'Account' : 'Appearance'}</h2>
+          <div className="actions">
+            <span className="user muted">Signed in</span>
+            <button className="btn" onClick={onLogout}>Logout</button>
+          </div>
+        </div>
+        <main className="page space-y">
+          {current === 'home' && (
+            <>
+              <section className="card">
+                <h3>Add Transaction</h3>
+                <form onSubmit={handleCreate} className="form-row">
+                  <input className="input" type="number" step="0.01" placeholder="Amount" value={amount} onChange={(e) => setAmount(e.target.value)} required />
+                  <input className="input" type="text" placeholder="Description (optional)" value={description} onChange={(e) => setDescription(e.target.value)} />
+                  <select className="input" value={selectedCategoryId} onChange={(e) => setSelectedCategoryId(e.target.value ? Number(e.target.value) : '')}>
+                    <option value="">No category</option>
+                    {categories.map(c => (<option key={c.id} value={c.id}>{c.name}</option>))}
+                  </select>
+                  <button className="btn primary" type="submit">Add</button>
+                </form>
+              </section>
+
+              <section className="card">
+                <h3>Filters</h3>
+                <div className="form-row">
+                  <input className="input" type="number" step="0.01" placeholder="Min amount" value={minAmount} onChange={(e) => setMinAmount(e.target.value)} />
+                  <input className="input" type="number" step="0.01" placeholder="Max amount" value={maxAmount} onChange={(e) => setMaxAmount(e.target.value)} />
+                  <select className="input" value={filterCategoryId} onChange={(e) => setFilterCategoryId(e.target.value ? Number(e.target.value) : '')}>
+                    <option value="">All categories</option>
+                    {categories.map(c => (<option key={c.id} value={c.id}>{c.name}</option>))}
+                  </select>
+                  <input className="input" type="text" placeholder="Search in description" value={searchText} onChange={(e) => setSearchText(e.target.value)} />
+                </div>
+              </section>
+
+              <section className="card">
+                <h3>Latest Transactions (last 10)</h3>
+                {loading ? (
+                  <div>Loading…</div>
+                ) : error ? (
+                  <div style={{ color: 'crimson' }}>{error}</div>
+                ) : filtered.length === 0 ? (
+                  <div>No transactions</div>
+                ) : (
+                  <table className="table">
+                    <thead>
+                      <tr>
+                        <th>ID</th>
+                        <th style={{ textAlign: 'right' }}>Amount</th>
+                        <th>Description</th>
+                        <th>Categories</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {filtered.map(t => (
+                        <tr key={t.id}>
+                          <td>{t.id}</td>
+                          <td className="amount">{formatAmount(t.amount)}</td>
+                          <td>{t.description || ''}</td>
+                          <td>{t.category_ids.map(id => categoryNameById(id)).join(', ')}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                )}
+              </section>
+            </>
+          )}
+
+          {current === 'account' && (
+            // lazy import avoided for simplicity
+            <AccountPage onDeleted={onLogout} />
+          )}
+
+          {current === 'appearance' && (
+            <AppearancePage />
+          )}
+        </main>
+      </div>
+    </div>
+  );
+}

7project/frontend/src/pages/LoginRegisterPage.tsx

@@ -0,0 +1,96 @@
+import { useState, useEffect } from 'react';
+import { login, register } from '../api';
+import { BACKEND_URL } from '../config';
+
+function oauthUrl(provider: 'mojeid' | 'bankid') {
+  const base = BACKEND_URL.replace(/\/$/, '');
+  const redirect = encodeURIComponent(window.location.origin + '/oauth-callback');
+  return `${base}/auth/${provider}/authorize?redirect_url=${redirect}`;
+}
+
+export default function LoginRegisterPage({ onLoggedIn }: { onLoggedIn: () => void }) {
+  const [mode, setMode] = useState<'login' | 'register'>('login');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    try {
+      if (mode === 'login') {
+        await login(email, password);
+        onLoggedIn();
+      } else {
+        await register(email, password, firstName || undefined, lastName || undefined);
+        // After register, prompt login automatically
+        await login(email, password);
+        onLoggedIn();
+      }
+    } catch (err: any) {
+      setError(err?.message || 'Operation failed');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  // Add this useEffect hook
+  useEffect(() => {
+    // When the component mounts, add a class to the body
+    document.body.classList.add('auth-page');
+
+    // When the component unmounts, remove the class
+    return () => {
+      document.body.classList.remove('auth-page');
+    };
+  }, []); // The empty array ensures this runs only once
+
+  // The JSX no longer needs the wrapper div
+  return (
+    <div className="card" style={{ width: 420 }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
+        <h2 style={{ margin: 0 }}>{mode === 'login' ? 'Welcome back' : 'Create your account'}</h2>
+        <div className="segmented">
+          <button className={mode === 'login' ? 'active' : ''} type="button" onClick={() => setMode('login')}>Login</button>
+          <button className={mode === 'register' ? 'active' : ''} type="button" onClick={() => setMode('register')}>Register</button>
+        </div>
+      </div>
+      <form onSubmit={handleSubmit} className="space-y">
+        <div>
+            <label className="muted">Email</label>
+            <input className="input" type="email" required value={email} onChange={(e) => setEmail(e.target.value)} />
+          </div>
+          <div>
+            <label className="muted">Password</label>
+            <input className="input" type="password" required value={password} onChange={(e) => setPassword(e.target.value)} />
+          </div>
+          {mode === 'register' && (
+            <div className="form-row">
+              <div>
+                <label className="muted">First name (optional)</label>
+                <input className="input" type="text" value={firstName} onChange={(e) => setFirstName(e.target.value)} />
+              </div>
+              <div>
+                <label className="muted">Last name (optional)</label>
+                <input className="input" type="text" value={lastName} onChange={(e) => setLastName(e.target.value)} />
+              </div>
+            </div>
+          )}
+          {error && <div style={{ color: 'crimson' }}>{error}</div>}
+          <div className="actions" style={{ justifyContent: 'space-between' }}>
+            <div className="muted">Or continue with</div>
+            <div className="actions">
+              <a className="btn" href={oauthUrl('mojeid')}>MojeID</a>
+              <a className="btn" href={oauthUrl('bankid')}>BankID</a>
+              <button className="btn primary" type="submit" disabled={loading}>{loading ? 'Please wait…' : (mode === 'login' ? 'Login' : 'Register')}</button>
+            </div>
+          </div>
+      </form>
+    </div>
+  );
+}
+