david/kanban-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

clean up frontend icon, app name and refresh bug on login

Browse source
This commit is contained in:
david 2026-03-15 18:05:19 +03:00
parent c8999d4cd5
commit 0e714b8ca1
11 changed files with 189 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
backend/app/routes/home.py
View file

@ -1,16 +1,19 @@
import os import os
from flask import Blueprint, jsonify, send_from_directory, current_app as app from flask import Blueprint
from flask import current_app as app
from flask import send_from_directory
home_bp = Blueprint("home", __name__) home_bp = Blueprint("home", __name__)
@home_bp.route('/') @home_bp.route("/")
def serve_root(): def serve_root():
return send_from_directory(app.static_folder, 'index.html') return send_from_directory(app.static_folder, "index.html")
@home_bp.route('/<path:path>')
@home_bp.route("/<path:path>")
def serve_spa(path): def serve_spa(path):
if os.path.exists(os.path.join(app.static_folder, path)): if os.path.exists(os.path.join(app.static_folder, path)):
return send_from_directory(app.static_folder, path) return send_from_directory(app.static_folder, path)
return send_from_directory(app.static_folder, 'index.html') return send_from_directory(app.static_folder, "index.html")

29
frontend/favicon.svg Normal file
View file

@ -0,0 +1,29 @@
<svg viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
<!-- Column 1: To Do -->
<rect x="10" y="10" width="50" height="100" fill="none" stroke="#4A90D9" stroke-width="3" rx="5"/>
<rect x="20" y="30" width="30" height="15" fill="#E0E0E0" rx="3"/>
<rect x="20" y="50" width="30" height="15" fill="#E0E0E0" rx="3"/>
<rect x="20" y="70" width="30" height="15" fill="#E0E0E0" rx="3"/>
<!-- Column 2: In Progress -->
<rect x="75" y="10" width="50" height="100" fill="none" stroke="#4A90D9" stroke-width="3" rx="5"/>
<rect x="85" y="30" width="30" height="15" fill="#4A90D9" rx="3"/>
<circle cx="112" cy="37" r="5" fill="#4A90D9"/>
<path d="M109 37 L111 39 L115 35" stroke="white" stroke-width="1.5" fill="none"/>
<rect x="85" y="50" width="30" height="15" fill="#4A90D9" rx="3"/>
<circle cx="112" cy="57" r="5" fill="#4A90D9"/>
<path d="M109 57 L111 59 L115 55" stroke="white" stroke-width="1.5" fill="none"/>
<rect x="85" y="70" width="30" height="15" fill="#E0E0E0" rx="3"/>
<!-- Column 3: Done -->
<rect x="140" y="10" width="50" height="100" fill="none" stroke="#4A90D9" stroke-width="3" rx="5"/>
<rect x="150" y="30" width="30" height="15" fill="#7FB3E5" rx="3"/>
<circle cx="177" cy="37" r="5" fill="#7FB3E5"/>
<path d="M174 37 L176 39 L180 35" stroke="white" stroke-width="1.5" fill="none"/>
<rect x="150" y="50" width="30" height="15" fill="#7FB3E5" rx="3"/>
<circle cx="177" cy="57" r="5" fill="#7FB3E5"/>
<path d="M174 57 L176 59 L180 55" stroke="white" stroke-width="1.5" fill="none"/>
<rect x="150" y="70" width="30" height="15" fill="#7FB3E5" rx="3"/>
<circle cx="177" cy="77" r="5" fill="#7FB3E5"/>
<path d="M174 77 L176 79 L180 75" stroke="white" stroke-width="1.5" fill="none"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

6
frontend/index.html
View file

@ -2,10 +2,10 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Crafting Shop - Your one-stop shop for crafting supplies" /> <meta name="description" content="Taskboard - Organize your projects and boost productivity with powerful task management" />
<title>Crafting Shop</title> <title>Taskboard</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

13
frontend/src/App.tsx
View file

@ -1,17 +1,14 @@
import { Routes, Route } from 'react-router-dom'; import { Routes, Route, Navigate } from 'react-router-dom';
import { ModalProvider } from './context/modals/useModal'; import { ModalProvider } from './context/modals/useModal';
import { ModalRoot } from './context/modals/ModalRoot'; import { ModalRoot } from './context/modals/ModalRoot';
import { ToastProvider } from './context/toasts/useToast'; import { ToastProvider } from './context/toasts/useToast';
import { ToastRoot } from './context/toasts/ToastRoot'; import { ToastRoot } from './context/toasts/ToastRoot';
import { LoaderProvider } from './context/loaders/useLoader'; import { LoaderProvider } from './context/loaders/useLoader';
import { LoaderRoot } from './context/loaders/LoaderRoot'; import { LoaderRoot } from './context/loaders/LoaderRoot';
import Cart from './pages/Cart';
import { Navbar } from './components/Navbar'; import { Navbar } from './components/Navbar';
import { Home } from './pages/Home'; import { Home } from './pages/Home';
import { Products } from './pages/Products';
import Login from './pages/Login'; import Login from './pages/Login';
import { Register } from './pages/Register'; import { Register } from './pages/Register';
import { Orders } from './pages/Orders';
import { ProtectedRoute } from './components/ProtectedRoute'; import { ProtectedRoute } from './components/ProtectedRoute';
import { Boards } from './pages/Boards'; import { Boards } from './pages/Boards';
import { BoardCreate } from './pages/BoardCreate'; import { BoardCreate } from './pages/BoardCreate';
@ -28,7 +25,8 @@ const App = () => {
<Navbar /> <Navbar />
<main className="flex-1 p-8 max-w-7xl mx-auto w-full"> <main className="flex-1 p-8 max-w-7xl mx-auto w-full">
<Routes> <Routes>
<Route path="/" element={<Home />} /> <Route path="/" element={<Navigate to="/boards" replace />} />
<Route path="/home" element={<Home />} />
<Route path="/login" element={<Login />} /> <Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} /> <Route path="/register" element={<Register />} />
@ -73,11 +71,6 @@ const App = () => {
</ProtectedRoute> </ProtectedRoute>
} }
/> />
{/* Legacy Routes */}
<Route path="/products" element={<Products />} />
<Route path="/cart" element={<Cart />} />
<Route path="/orders" element={<Orders />} />
</Routes> </Routes>
</main> </main>
{/* Order matters for Z-Index: Loader (70) > Toast (60) > Modal (50) */} {/* Order matters for Z-Index: Loader (70) > Toast (60) > Modal (50) */}

45
frontend/src/components/Navbar.tsx
View file

@ -1,60 +1,55 @@
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { useApp } from '../context/AppContext'; import { useApp } from '../context/AppContext';
import { useAuth } from '../hooks/useAuth';
import { TaskboardLogo } from './TaskboardLogo';
export function Navbar() { export function Navbar() {
const { user } = useApp(); const { user } = useApp();
const { logout } = useAuth();
return ( return (
<nav className="bg-gray-800 border-b border-gray-700 shadow-md"> <nav className="bg-gray-800 border-b border-gray-700 shadow-md">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16"> <div className="flex items-center justify-between h-16">
<div className="flex items-center"> <div className="flex items-center gap-3">
<Link to="/boards" className="hover:opacity-80 transition-opacity">
<TaskboardLogo className="h-8 w-auto" />
</Link>
<Link <Link
to="/" to="/boards"
className="text-xl font-bold text-white hover:text-blue-400 transition-colors" className="text-xl font-bold text-white hover:text-blue-400 transition-colors"
> >
Crafting Shop Taskboard
</Link> </Link>
<div className="ml-10 flex items-baseline space-x-4"> <div className="ml-10 flex items-baseline space-x-4">
<Link <Link
to="/" to="/home"
className="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors" className="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
> >
Home Home
</Link> </Link>
<Link
to="/products"
className="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
>
Products
</Link>
<Link
to="/cart"
className="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
>
Cart
</Link>
{user && ( {user && (
<>
<Link <Link
to="/boards" to="/boards"
className="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors" className="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
> >
Boards Boards
</Link> </Link>
<Link
to="/orders"
className="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
>
Orders
</Link>
</>
)} )}
</div> </div>
</div> </div>
<div className="flex items-center"> <div className="flex items-center gap-3">
{user ? ( {user ? (
<>
<span className="text-gray-300 px-3 py-2">{user.username}</span> <span className="text-gray-300 px-3 py-2">{user.username}</span>
<button
onClick={logout}
className="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
>
Logout
</button>
</>
) : ( ) : (
<> <>
<Link <Link

55
frontend/src/components/TaskboardLogo.tsx Normal file
View file

@ -0,0 +1,55 @@
export const TaskboardLogo = ({ className = '' }: { className?: string }) => (
<svg viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg" className={className}>
<rect
x="10"
y="10"
width="50"
height="100"
fill="none"
stroke="#4A90D9"
strokeWidth="3"
rx="5"
/>
<rect x="20" y="30" width="30" height="15" fill="#E0E0E0" rx="3" />
<rect x="20" y="50" width="30" height="15" fill="#E0E0E0" rx="3" />
<rect x="20" y="70" width="30" height="15" fill="#E0E0E0" rx="3" />
<rect
x="75"
y="10"
width="50"
height="100"
fill="none"
stroke="#4A90D9"
strokeWidth="3"
rx="5"
/>
<rect x="85" y="30" width="30" height="15" fill="#4A90D9" rx="3" />
<circle cx="112" cy="37" r="5" fill="#4A90D9" />
<path d="M109 37 L111 39 L115 35" stroke="white" strokeWidth="1.5" fill="none" />
<rect x="85" y="50" width="30" height="15" fill="#4A90D9" rx="3" />
<circle cx="112" cy="57" r="5" fill="#4A90D9" />
<path d="M109 57 L111 59 L115 55" stroke="white" strokeWidth="1.5" fill="none" />
<rect x="85" y="70" width="30" height="15" fill="#E0E0E0" rx="3" />
<rect
x="140"
y="10"
width="50"
height="100"
fill="none"
stroke="#4A90D9"
strokeWidth="3"
rx="5"
/>
<rect x="150" y="30" width="30" height="15" fill="#7FB3E5" rx="3" />
<circle cx="177" cy="37" r="5" fill="#7FB3E5" />
<path d="M174 37 L176 39 L180 35" stroke="white" strokeWidth="1.5" fill="none" />
<rect x="150" y="50" width="30" height="15" fill="#7FB3E5" rx="3" />
<circle cx="177" cy="57" r="5" fill="#7FB3E5" />
<path d="M174 57 L176 59 L180 55" stroke="white" strokeWidth="1.5" fill="none" />
<rect x="150" y="70" width="30" height="15" fill="#7FB3E5" rx="3" />
<circle cx="177" cy="77" r="5" fill="#7FB3E5" />
<path d="M174 77 L176 79 L180 75" stroke="white" strokeWidth="1.5" fill="none" />
</svg>
);

3
frontend/src/hooks/useApi.ts
View file

@ -40,8 +40,11 @@ api.interceptors.response.use(
// Token expired or invalid // Token expired or invalid
localStorage.removeItem('token'); localStorage.removeItem('token');
localStorage.removeItem('user'); localStorage.removeItem('user');
if (!['/login', '/register'].includes(window.location.pathname)) {
window.location.href = '/login'; window.location.href = '/login';
} }
}
return Promise.reject(error); return Promise.reject(error);
} }
); );

14
frontend/src/hooks/useAuth.ts
View file

@ -23,7 +23,6 @@ export function useAuth() {
email: response.user.email, email: response.user.email,
}; };
// debugger
// Store in localStorage first // Store in localStorage first
localStorage.setItem('token', response.access_token); localStorage.setItem('token', response.access_token);
localStorage.setItem('user', JSON.stringify(user)); localStorage.setItem('user', JSON.stringify(user));
@ -43,9 +42,10 @@ export function useAuth() {
navigate('/boards'); navigate('/boards');
return user; return user;
} catch (err) { } catch (err: any) {
const errorMessage = err instanceof Error ? err.message : 'Login failed. Please try again.'; const errorMessage =
err.response?.data.error || err.message || 'Login failed. Please try again.';
// debugger
// Show error toast // Show error toast
addNotification({ addNotification({
type: 'error', type: 'error',
@ -95,10 +95,8 @@ export function useAuth() {
navigate('/boards'); navigate('/boards');
return user; return user;
} catch (err) { } catch (err: any) {
const errorMessage = const errorMessage = err.response?.data.error || err.message || 'Registration failed.';
err instanceof Error ? err.message : 'Registration failed. Please try again.';
// Show error toast // Show error toast
addNotification({ addNotification({
type: 'error', type: 'error',

24
frontend/src/pages/Home.tsx
View file

@ -2,35 +2,39 @@ import { Link } from 'react-router-dom';
import { ModalExample } from '../context/modals/ModalExample'; import { ModalExample } from '../context/modals/ModalExample';
import { ToastExample } from '../context/toasts/ToastExample'; import { ToastExample } from '../context/toasts/ToastExample';
import { LoaderExample } from '../context/loaders/LoaderExample'; import { LoaderExample } from '../context/loaders/LoaderExample';
import { TaskboardLogo } from '../components/TaskboardLogo';
export function Home() { export function Home() {
return ( return (
<div className="space-y-12"> <div className="space-y-12">
<div className="text-center py-12"> <div className="text-center py-12">
<h1 className="text-5xl font-bold text-white mb-4">Welcome to Crafting Shop</h1> <div className="flex justify-center mb-6">
<TaskboardLogo className="h-16 w-auto" />
</div>
<h1 className="text-5xl font-bold text-white mb-4">Welcome to Taskboard</h1>
<p className="text-xl text-gray-300 mb-8"> <p className="text-xl text-gray-300 mb-8">
Your one-stop shop for premium crafting supplies Organize your projects and boost productivity with powerful task management
</p> </p>
<Link <Link
to="/products" to="/boards"
className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg text-lg font-medium transition-colors inline-block" className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg text-lg font-medium transition-colors inline-block"
> >
Browse Products View Boards
</Link> </Link>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="bg-gray-800 rounded-lg p-6 border border-gray-700"> <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
<h3 className="text-xl font-semibold text-white mb-2">Quality Products</h3> <h3 className="text-xl font-semibold text-white mb-2">Visual Workflow</h3>
<p className="text-gray-400">Premium crafting supplies for all your projects</p> <p className="text-gray-400">Drag and drop cards to manage your tasks efficiently</p>
</div> </div>
<div className="bg-gray-800 rounded-lg p-6 border border-gray-700"> <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
<h3 className="text-xl font-semibold text-white mb-2">Fast Delivery</h3> <h3 className="text-xl font-semibold text-white mb-2">Personal Organization</h3>
<p className="text-gray-400">Quick and reliable shipping to your doorstep</p> <p className="text-gray-400">Your personal space to organize and track your tasks</p>
</div> </div>
<div className="bg-gray-800 rounded-lg p-6 border border-gray-700"> <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
<h3 className="text-xl font-semibold text-white mb-2">Secure Payments</h3> <h3 className="text-xl font-semibold text-white mb-2">Customizable Boards</h3>
<p className="text-gray-400">Safe and secure payment processing</p> <p className="text-gray-400">Create and organize boards to fit your workflow</p>
</div> </div>
</div> </div>

66
frontend/src/pages/Login.tsx
View file

@ -1,28 +1,37 @@
import { useState } from 'react'; import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { useAuth } from '../hooks/useAuth'; import { useAuth } from '../hooks/useAuth';
import { useToast } from '../context/toasts/useToast';
const loginSchema = z.object({
email: z.string().min(1, 'Email is required').email('Invalid email address'),
password: z
.string()
.min(1, 'Password is required')
.min(6, 'Password must be at least 6 characters'),
});
type LoginFormData = z.infer<typeof loginSchema>;
export default function Login() { export default function Login() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const { login: handleLogin } = useAuth(); const { login: handleLogin } = useAuth();
const { addNotification } = useToast(); const {
register,
handleSubmit,
formState: { errors, isSubmitting },
} = useForm<LoginFormData>({
resolver: zodResolver(loginSchema),
mode: 'onSubmit',
});
const handleSubmit = async (e: React.FormEvent) => { const onSubmit = async (data: LoginFormData) => {
e.preventDefault();
try { try {
await handleLogin(email, password); await handleLogin(data.email, data.password);
} catch (err) { } catch (err) {
// Error is handled by the hook (toast shown) // Error is handled by the hook (toast shown)
const errorMessage = err instanceof Error ? err.message : 'Failed to create card'; console.error(err);
addNotification({
type: 'error',
title: 'Error Login',
message: errorMessage,
duration: 5000,
});
} }
}; };
@ -30,45 +39,48 @@ export default function Login() {
<div className="max-w-md mx-auto"> <div className="max-w-md mx-auto">
<h1 className="text-3xl font-bold text-white mb-8 text-center">Login</h1> <h1 className="text-3xl font-bold text-white mb-8 text-center">Login</h1>
<form onSubmit={handleSubmit} className="space-y-6"> <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
<div> <div>
<label htmlFor="email" className="block text-sm font-medium text-gray-300 mb-2"> <label htmlFor="email" className="block text-sm font-medium text-gray-300 mb-2">
Email Email <span className="text-red-400">*</span>
</label> </label>
<input <input
id="email" id="email"
type="email" type="email"
value={email} {...register('email')}
onChange={(e) => setEmail(e.target.value)}
required
className="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="you@example.com"
/> />
{errors.email && <p className="mt-1 text-sm text-red-400">{errors.email.message}</p>}
</div> </div>
<div> <div>
<label htmlFor="password" className="block text-sm font-medium text-gray-300 mb-2"> <label htmlFor="password" className="block text-sm font-medium text-gray-300 mb-2">
Password Password <span className="text-red-400">*</span>
</label> </label>
<input <input
id="password" id="password"
type="password" type="password"
value={password} {...register('password')}
onChange={(e) => setPassword(e.target.value)}
required
className="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="••••••••"
/> />
{errors.password && (
<p className="mt-1 text-sm text-red-400">{errors.password.message}</p>
)}
</div> </div>
<button <button
type="submit" type="submit"
className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors" disabled={isSubmitting}
className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
> >
Login {isSubmitting ? 'Logging in...' : 'Login'}
</button> </button>
</form> </form>
<p className="mt-6 text-center text-gray-400"> <p className="mt-6 text-center text-gray-400">
Don&apos;t have an account? Don&lsquo;t have an account?
<Link to="/register" className="ml-2 text-blue-400 hover:text-blue-300"> <Link to="/register" className="ml-2 text-blue-400 hover:text-blue-300">
Register Register
</Link> </Link>

10
frontend/src/pages/Register.tsx
View file

@ -1,7 +1,6 @@
import { useState } from 'react'; import { useState } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { useAuth } from '../hooks/useAuth'; import { useAuth } from '../hooks/useAuth';
import { useToast } from '../context/toasts/useToast';
interface FormData { interface FormData {
email: string; email: string;
@ -23,7 +22,6 @@ export function Register() {
}); });
const { register: handleRegister } = useAuth(); const { register: handleRegister } = useAuth();
const { addNotification } = useToast();
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setFormData({ setFormData({
@ -52,13 +50,7 @@ export function Register() {
last_name: formData.last_name, last_name: formData.last_name,
}); });
} catch (err) { } catch (err) {
const errorMessage = err instanceof Error ? err.message : 'Failed to register'; console.error(err);
addNotification({
type: 'error',
title: 'Registration Error',
message: errorMessage,
duration: 5000,
});
} }
}; };