From 0e714b8ca1e82648ed7ad7ffb74686d904c83cb4 Mon Sep 17 00:00:00 2001
From: david <njorogedavid13@gmail.com>
Date: Sun, 15 Mar 2026 18:05:19 +0300
Subject: [PATCH] clean up frontend icon, app name and refresh bug on login

---
 backend/app/routes/home.py                | 13 +++--
 frontend/favicon.svg                      | 29 ++++++++++
 frontend/index.html                       |  6 +--
 frontend/src/App.tsx                      | 13 ++---
 frontend/src/components/Navbar.tsx        | 59 ++++++++++----------
 frontend/src/components/TaskboardLogo.tsx | 55 +++++++++++++++++++
 frontend/src/hooks/useApi.ts              |  5 +-
 frontend/src/hooks/useAuth.ts             | 14 +++--
 frontend/src/pages/Home.tsx               | 24 +++++----
 frontend/src/pages/Login.tsx              | 66 +++++++++++++----------
 frontend/src/pages/Register.tsx           | 10 +---
 11 files changed, 189 insertions(+), 105 deletions(-)
 create mode 100644 frontend/favicon.svg
 create mode 100644 frontend/src/components/TaskboardLogo.tsx

diff --git a/backend/app/routes/home.py b/backend/app/routes/home.py
index 6da8cb3..04789f8 100644
--- a/backend/app/routes/home.py
+++ b/backend/app/routes/home.py
@@ -1,16 +1,19 @@
 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.route('/')
+@home_bp.route("/")
 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):
     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, 'index.html')
+    return send_from_directory(app.static_folder, "index.html")
diff --git a/frontend/favicon.svg b/frontend/favicon.svg
new file mode 100644
index 0000000..7d70c3c
--- /dev/null
+++ b/frontend/favicon.svg
@@ -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>
\ No newline at end of file
diff --git a/frontend/index.html b/frontend/index.html
index 2e13e82..b39aa8e 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
   <head>
     <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="description" content="Crafting Shop - Your one-stop shop for crafting supplies" />
-    <title>Crafting Shop</title>
+    <meta name="description" content="Taskboard - Organize your projects and boost productivity with powerful task management" />
+    <title>Taskboard</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 7e3dfb9..4bfe05f 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -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 { ModalRoot } from './context/modals/ModalRoot';
 import { ToastProvider } from './context/toasts/useToast';
 import { ToastRoot } from './context/toasts/ToastRoot';
 import { LoaderProvider } from './context/loaders/useLoader';
 import { LoaderRoot } from './context/loaders/LoaderRoot';
-import Cart from './pages/Cart';
 import { Navbar } from './components/Navbar';
 import { Home } from './pages/Home';
-import { Products } from './pages/Products';
 import Login from './pages/Login';
 import { Register } from './pages/Register';
-import { Orders } from './pages/Orders';
 import { ProtectedRoute } from './components/ProtectedRoute';
 import { Boards } from './pages/Boards';
 import { BoardCreate } from './pages/BoardCreate';
@@ -28,7 +25,8 @@ const App = () => {
             <Navbar />
             <main className="flex-1 p-8 max-w-7xl mx-auto w-full">
               <Routes>
-                <Route path="/" element={<Home />} />
+                <Route path="/" element={<Navigate to="/boards" replace />} />
+                <Route path="/home" element={<Home />} />
                 <Route path="/login" element={<Login />} />
                 <Route path="/register" element={<Register />} />
 
@@ -73,11 +71,6 @@ const App = () => {
                     </ProtectedRoute>
                   }
                 />
-
-                {/* Legacy Routes */}
-                <Route path="/products" element={<Products />} />
-                <Route path="/cart" element={<Cart />} />
-                <Route path="/orders" element={<Orders />} />
               </Routes>
             </main>
             {/* Order matters for Z-Index: Loader (70) > Toast (60) > Modal (50) */}
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index e4991f3..ca3cab1 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -1,60 +1,55 @@
 import { Link } from 'react-router-dom';
 import { useApp } from '../context/AppContext';
+import { useAuth } from '../hooks/useAuth';
+import { TaskboardLogo } from './TaskboardLogo';
 
 export function Navbar() {
   const { user } = useApp();
+  const { logout } = useAuth();
 
   return (
     <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="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
-              to="/"
+              to="/boards"
               className="text-xl font-bold text-white hover:text-blue-400 transition-colors"
             >
-              Crafting Shop
+              Taskboard
             </Link>
             <div className="ml-10 flex items-baseline space-x-4">
               <Link
-                to="/"
+                to="/home"
                 className="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
               >
                 Home
               </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 && (
-                <>
-                  <Link
-                    to="/boards"
-                    className="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
-                  >
-                    Boards
-                  </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>
-                </>
+                <Link
+                  to="/boards"
+                  className="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
+                >
+                  Boards
+                </Link>
               )}
             </div>
           </div>
-          <div className="flex items-center">
+          <div className="flex items-center gap-3">
             {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
diff --git a/frontend/src/components/TaskboardLogo.tsx b/frontend/src/components/TaskboardLogo.tsx
new file mode 100644
index 0000000..64095eb
--- /dev/null
+++ b/frontend/src/components/TaskboardLogo.tsx
@@ -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>
+);
diff --git a/frontend/src/hooks/useApi.ts b/frontend/src/hooks/useApi.ts
index 58f87d5..b61923a 100644
--- a/frontend/src/hooks/useApi.ts
+++ b/frontend/src/hooks/useApi.ts
@@ -40,7 +40,10 @@ api.interceptors.response.use(
       // Token expired or invalid
       localStorage.removeItem('token');
       localStorage.removeItem('user');
-      window.location.href = '/login';
+
+      if (!['/login', '/register'].includes(window.location.pathname)) {
+        window.location.href = '/login';
+      }
     }
     return Promise.reject(error);
   }
diff --git a/frontend/src/hooks/useAuth.ts b/frontend/src/hooks/useAuth.ts
index 149f5cc..3360625 100644
--- a/frontend/src/hooks/useAuth.ts
+++ b/frontend/src/hooks/useAuth.ts
@@ -23,7 +23,6 @@ export function useAuth() {
         email: response.user.email,
       };
 
-      // debugger
       // Store in localStorage first
       localStorage.setItem('token', response.access_token);
       localStorage.setItem('user', JSON.stringify(user));
@@ -43,9 +42,10 @@ export function useAuth() {
       navigate('/boards');
 
       return user;
-    } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : 'Login failed. Please try again.';
-
+    } catch (err: any) {
+      const errorMessage =
+        err.response?.data.error || err.message || 'Login failed. Please try again.';
+      // debugger
       // Show error toast
       addNotification({
         type: 'error',
@@ -95,10 +95,8 @@ export function useAuth() {
       navigate('/boards');
 
       return user;
-    } catch (err) {
-      const errorMessage =
-        err instanceof Error ? err.message : 'Registration failed. Please try again.';
-
+    } catch (err: any) {
+      const errorMessage = err.response?.data.error || err.message || 'Registration failed.';
       // Show error toast
       addNotification({
         type: 'error',
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index f44ba7c..506502f 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -2,35 +2,39 @@ import { Link } from 'react-router-dom';
 import { ModalExample } from '../context/modals/ModalExample';
 import { ToastExample } from '../context/toasts/ToastExample';
 import { LoaderExample } from '../context/loaders/LoaderExample';
+import { TaskboardLogo } from '../components/TaskboardLogo';
 
 export function Home() {
   return (
     <div className="space-y-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">
-          Your one-stop shop for premium crafting supplies
+          Organize your projects and boost productivity with powerful task management
         </p>
         <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"
         >
-          Browse Products
+          View Boards
         </Link>
       </div>
 
       <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">
-          <h3 className="text-xl font-semibold text-white mb-2">Quality Products</h3>
-          <p className="text-gray-400">Premium crafting supplies for all your projects</p>
+          <h3 className="text-xl font-semibold text-white mb-2">Visual Workflow</h3>
+          <p className="text-gray-400">Drag and drop cards to manage your tasks efficiently</p>
         </div>
         <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>
-          <p className="text-gray-400">Quick and reliable shipping to your doorstep</p>
+          <h3 className="text-xl font-semibold text-white mb-2">Personal Organization</h3>
+          <p className="text-gray-400">Your personal space to organize and track your tasks</p>
         </div>
         <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>
-          <p className="text-gray-400">Safe and secure payment processing</p>
+          <h3 className="text-xl font-semibold text-white mb-2">Customizable Boards</h3>
+          <p className="text-gray-400">Create and organize boards to fit your workflow</p>
         </div>
       </div>
 
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index 7d87cd8..4f5508f 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -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 { 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() {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
   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) => {
-    e.preventDefault();
+  const onSubmit = async (data: LoginFormData) => {
     try {
-      await handleLogin(email, password);
+      await handleLogin(data.email, data.password);
     } catch (err) {
       // Error is handled by the hook (toast shown)
-      const errorMessage = err instanceof Error ? err.message : 'Failed to create card';
-      addNotification({
-        type: 'error',
-        title: 'Error Login',
-        message: errorMessage,
-        duration: 5000,
-      });
+      console.error(err);
     }
   };
 
@@ -30,45 +39,48 @@ export default function Login() {
     <div className="max-w-md mx-auto">
       <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>
           <label htmlFor="email" className="block text-sm font-medium text-gray-300 mb-2">
-            Email
+            Email <span className="text-red-400">*</span>
           </label>
           <input
             id="email"
             type="email"
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-            required
+            {...register('email')}
             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>
           <label htmlFor="password" className="block text-sm font-medium text-gray-300 mb-2">
-            Password
+            Password <span className="text-red-400">*</span>
           </label>
           <input
             id="password"
             type="password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            required
+            {...register('password')}
             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>
 
         <button
           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>
       </form>
 
       <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">
           Register
         </Link>
diff --git a/frontend/src/pages/Register.tsx b/frontend/src/pages/Register.tsx
index db26265..ef8c3cb 100644
--- a/frontend/src/pages/Register.tsx
+++ b/frontend/src/pages/Register.tsx
@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useAuth } from '../hooks/useAuth';
-import { useToast } from '../context/toasts/useToast';
 
 interface FormData {
   email: string;
@@ -23,7 +22,6 @@ export function Register() {
   });
 
   const { register: handleRegister } = useAuth();
-  const { addNotification } = useToast();
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setFormData({
@@ -52,13 +50,7 @@ export function Register() {
         last_name: formData.last_name,
       });
     } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : 'Failed to register';
-      addNotification({
-        type: 'error',
-        title: 'Registration Error',
-        message: errorMessage,
-        duration: 5000,
-      });
+      console.error(err);
     }
   };