From a847a8768d143be0f08fc8cc94eb3113013243d7 Mon Sep 17 00:00:00 2001
From: Andrii Solianyk <asolianik2015@gmail.com>
Date: Sun, 26 Apr 2026 11:04:04 +0200
Subject: [PATCH] ADD: Registration page and update image handling in notices

---
 src/App.jsx                   |   2 +
 src/api/notices.js            |  14 +--
 src/components/NoticeCard.jsx |  50 ++++++++--
 src/pages/EditNotice.jsx      |   2 +-
 src/pages/NoticeDetails.jsx   |  55 +++++++---
 src/pages/Registration.jsx    | 183 ++++++++++++++++++++++++++++++++++
 src/store/noticesStore.js     |   4 +-
 7 files changed, 279 insertions(+), 31 deletions(-)
 create mode 100644 src/pages/Registration.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 0848865..98f379a 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -7,6 +7,7 @@ import MyNotices from "./pages/MyNotices";
 import NoticeDetails from "./pages/NoticeDetails";
 import NoticesPage from "./pages/NoticesPage";
 import { useAuthStore } from "./store/authStore";
+import Registration from "@/pages/Registration.jsx";
 
 const ProtectedRoute = ({ children }) => {
   const token = useAuthStore((state) => state.token);
@@ -21,6 +22,7 @@ function App() {
     <Router>
       <Routes>
         <Route path="/login" element={<Login />} />
+        <Route path="/registration" element={<Registration />} />
         <Route
           element={
             <ProtectedRoute>
diff --git a/src/api/notices.js b/src/api/notices.js
index 648b6ca..af4c657 100644
--- a/src/api/notices.js
+++ b/src/api/notices.js
@@ -2,7 +2,6 @@ import axios from "axios";
 import { useAuthStore } from "../store/authStore";
 
 const API_URL = "/api/v1";
-const FALLBACK_IMAGE_URL = "https://http.cat/404.jpg";
 
 const getAuthHeaders = () => {
   const { token } = useAuthStore.getState();
@@ -88,11 +87,11 @@ export async function getImageByNoticeId(noticeId) {
     });
     const imageName = listResponse.data[0];
     if (!imageName) {
-      return FALLBACK_IMAGE_URL;
+      return null;
     }
     return await fetchImageAsBlobUrl(buildImageUrl(imageName));
   } catch {
-    return FALLBACK_IMAGE_URL;
+    return null;
   }
 }
 
@@ -104,19 +103,20 @@ export async function getAllImagesByNoticeId(noticeId) {
     });
 
     if (listResponse.data && listResponse.data.length > 0) {
-      return await Promise.all(
+      const imageUrls = await Promise.all(
         listResponse.data.map(async (imageName) => {
           try {
             return await fetchImageAsBlobUrl(buildImageUrl(imageName));
           } catch {
-            return FALLBACK_IMAGE_URL;
+            return null;
           }
         })
       );
+      return imageUrls.filter((url) => typeof url === "string" && url.trim());
     }
-    return [FALLBACK_IMAGE_URL];
+    return [];
   } catch {
-    return [FALLBACK_IMAGE_URL];
+    return [];
   }
 }
 
diff --git a/src/components/NoticeCard.jsx b/src/components/NoticeCard.jsx
index c496395..754a6dc 100644
--- a/src/components/NoticeCard.jsx
+++ b/src/components/NoticeCard.jsx
@@ -31,7 +31,8 @@ const getCategoryLabelMap = async () => {
 };
 
 export default function NoticeCard({ notice, actions }) {
-  const [imageUrl, setImageUrl] = useState("https://http.cat/404.jpg");
+  const [imageUrl, setImageUrl] = useState(null);
+  const [isImageLoading, setIsImageLoading] = useState(true);
   const [categoryLabel, setCategoryLabel] = useState(notice?.category || "");
 
   useEffect(() => {
@@ -39,18 +40,32 @@ export default function NoticeCard({ notice, actions }) {
 
     const loadImage = async () => {
       if (!notice?.noticeId) {
+        if (isMounted) {
+          setImageUrl(null);
+          setIsImageLoading(false);
+        }
         return;
       }
+
+      if (isMounted) {
+        setIsImageLoading(true);
+      }
+
       try {
         const image = await getImageByNoticeId(notice.noticeId);
         if (isMounted) {
-          setImageUrl(image);
+          const normalizedImage =
+            typeof image === "string" && image.trim() ? image : null;
+
+          setImageUrl(normalizedImage);
+          setIsImageLoading(false);
         } else if (typeof image === "string" && image.startsWith("blob:")) {
           URL.revokeObjectURL(image);
         }
       } catch {
         if (isMounted) {
-          setImageUrl("https://http.cat/404.jpg");
+          setImageUrl(null);
+          setIsImageLoading(false);
         }
       }
     };
@@ -99,11 +114,30 @@ export default function NoticeCard({ notice, actions }) {
   return (
     <article className="overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm">
       <Link to={`/notices/${notice.noticeId}`}>
-        <img
-          alt={notice.title}
-          className="aspect-square w-full bg-gray-100 object-cover"
-          src={imageUrl}
-        />
+        {isImageLoading || !imageUrl ? (
+          isImageLoading ? (
+            <div className="flex aspect-square w-full items-center justify-center bg-gray-100">
+              <span
+                aria-label="Loading image"
+                className="h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-primary"
+                role="status"
+              />
+            </div>
+          ) : (
+            <div className="flex aspect-square w-full items-center justify-center bg-gray-100">
+              <span className="rounded-md bg-gray-200 px-3 py-1 text-sm font-medium text-gray-600">
+                No Image
+              </span>
+            </div>
+          )
+        ) : (
+          <img
+            alt={notice.title}
+            className="aspect-square w-full bg-gray-100 object-cover"
+            onError={() => setImageUrl(null)}
+            src={imageUrl}
+          />
+        )}
       </Link>
       <div className="space-y-3 p-4">
         <div className="flex items-start justify-between gap-3">
diff --git a/src/pages/EditNotice.jsx b/src/pages/EditNotice.jsx
index f0a4131..cc2bfa6 100644
--- a/src/pages/EditNotice.jsx
+++ b/src/pages/EditNotice.jsx
@@ -57,7 +57,7 @@ export default function EditNotice() {
           setCategories(categoriesData);
           setCurrentNotice({
             ...notice,
-            images: imageUrls.filter((url) => !url.includes("http.cat/404.jpg")),
+            images: imageUrls,
           });
         }
       } finally {
diff --git a/src/pages/NoticeDetails.jsx b/src/pages/NoticeDetails.jsx
index 2a22047..ba604dd 100644
--- a/src/pages/NoticeDetails.jsx
+++ b/src/pages/NoticeDetails.jsx
@@ -12,21 +12,33 @@ export default function NoticeDetails() {
   const [notice, setNotice] = useState(null);
   const [images, setImages] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
+  const [isImagesLoading, setIsImagesLoading] = useState(true);
 
   useEffect(() => {
     let isMounted = true;
 
-    const loadData = async () => {
+    const loadNotice = async () => {
       setIsLoading(true);
       try {
         let found = notices.find((item) => String(item.noticeId) === String(id));
         if (!found) {
           found = await getNoticeById(id);
         }
-
-        const imageUrls = await getAllImagesByNoticeId(id);
         if (isMounted) {
           setNotice(found);
+        }
+      } finally {
+        if (isMounted) {
+          setIsLoading(false);
+        }
+      }
+    };
+
+    const loadImages = async () => {
+      setIsImagesLoading(true);
+      try {
+        const imageUrls = await getAllImagesByNoticeId(id);
+        if (isMounted) {
           setImages(imageUrls);
         } else {
           imageUrls.forEach((imageUrl) => {
@@ -37,12 +49,13 @@ export default function NoticeDetails() {
         }
       } finally {
         if (isMounted) {
-          setIsLoading(false);
+          setIsImagesLoading(false);
         }
       }
     };
 
-    loadData();
+    loadNotice();
+    loadImages();
 
     return () => {
       isMounted = false;
@@ -104,14 +117,30 @@ export default function NoticeDetails() {
       </div>
 
       <div className="grid gap-3 sm:grid-cols-2">
-        {images.map((image, index) => (
-          <img
-            alt={`${notice.title} ${index + 1}`}
-            className="aspect-[4/3] w-full rounded-lg border border-gray-200 bg-gray-100 object-cover"
-            key={`${image}-${index}`}
-            src={image}
-          />
-        ))}
+        {isImagesLoading ? (
+          <div className="flex aspect-4/3 w-full items-center justify-center rounded-lg border border-gray-200 bg-gray-100 sm:col-span-2">
+            <span
+              aria-label="Loading images"
+              className="h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-primary"
+              role="status"
+            />
+          </div>
+        ) : images.length > 0 ? (
+          images.map((image, index) => (
+            <img
+              alt={`${notice.title} ${index + 1}`}
+              className="aspect-4/3 w-full rounded-lg border border-gray-200 bg-gray-100 object-cover"
+              key={`${image}-${index}`}
+              src={image}
+            />
+          ))
+        ) : (
+          <div className="flex aspect-4/3 w-full items-center justify-center rounded-lg border border-gray-200 bg-gray-100 sm:col-span-2">
+            <span className="rounded-md bg-gray-200 px-3 py-1 text-sm font-medium text-gray-600">
+              No Image
+            </span>
+          </div>
+        )}
            <div className="rounded-lg border border-gray-200 bg-white p-4">
         <h2 className="mb-2 text-sm font-semibold uppercase tracking-wide text-gray-500">Opis</h2>
         <p className="whitespace-pre-wrap text-gray-700">{notice.description}</p>
diff --git a/src/pages/Registration.jsx b/src/pages/Registration.jsx
new file mode 100644
index 0000000..6925c1c
--- /dev/null
+++ b/src/pages/Registration.jsx
@@ -0,0 +1,183 @@
+import { useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { useAuthStore } from '../store/authStore';
+import { Eye, EyeOff, ArrowRight } from 'lucide-react';
+
+export default function Registration() {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [confirmPassword, setConfirmPassword] = useState('');
+    const [emailError, setEmailError] = useState('');
+    const [passwordError, setPasswordError] = useState('');
+    const [formError, setFormError] = useState('');
+    const [showPassword, setShowPassword] = useState(false);
+    const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+    const { signUp, isLoading } = useAuthStore();
+    const navigate = useNavigate();
+
+    const validateEmail = (email) => {
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return emailRegex.test(email);
+    };
+
+    const handleRegistration = async (e) => {
+        e.preventDefault();
+        setFormError('');
+
+        if (!email || !password || !confirmPassword) {
+            setFormError('Proszę uzupełnić wszystkie pola.');
+            return;
+        }
+
+        if (!validateEmail(email)) {
+            setEmailError('Nieprawidłowy format adresu email');
+            return;
+        }
+
+        if (password !== confirmPassword) {
+            setPasswordError('Hasła nie są takie same');
+            return;
+        }
+
+        try {
+            await signUp({ email, password });
+            navigate('/');
+        } catch (e) {
+            setFormError(e.response?.data?.message || e.message || 'Błąd rejestracji');
+        }
+    };
+
+    if (isLoading) {
+        return (
+            <div className="flex items-center justify-center min-h-screen">
+                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex items-center justify-center min-h-screen bg-gray-50 px-4">
+            <div className="w-full max-w-md p-8 bg-white border border-gray-200 rounded-2xl shadow-sm">
+                <div className="mb-6">
+                    <h1 className="text-3xl font-bold text-gray-900 mb-2">Rejestracja</h1>
+                    <div className="flex items-center text-sm">
+                        <span className="text-gray-500 mr-1">Masz już konto?</span>
+                        <Link to="/login" className="text-primary hover:underline font-medium flex items-center">
+                            Zaloguj się
+                            <ArrowRight size={16} className="ml-1" />
+                        </Link>
+                    </div>
+                </div>
+
+                <form onSubmit={handleRegistration} className="space-y-4">
+                    {formError && <p className="text-red-500 text-sm">{formError}</p>}
+
+                    <div>
+                        {emailError && <p className="text-red-500 text-xs mb-1">{emailError}</p>}
+                        <input
+                            type="email"
+                            placeholder="Email"
+                            value={email}
+                            onChange={(e) => {
+                                setEmail(e.target.value);
+                                setFormError('');
+                                if (e.target.value && !validateEmail(e.target.value)) {
+                                    setEmailError('Nieprawidłowy format adresu email');
+                                } else {
+                                    setEmailError('');
+                                }
+                            }}
+                            className={`w-full px-4 py-3 rounded-lg border ${emailError ? 'border-red-500' : 'border-gray-300'} focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all`}
+                            required
+                        />
+                    </div>
+
+                    <div className="relative">
+                        <input
+                            type={showPassword ? "text" : "password"}
+                            placeholder="Hasło"
+                            value={password}
+                            onChange={(e) => {
+                                const nextPassword = e.target.value;
+                                setPassword(nextPassword);
+                                setFormError('');
+                                if (confirmPassword && nextPassword !== confirmPassword) {
+                                    setPasswordError('Hasła nie są takie same');
+                                } else {
+                                    setPasswordError('');
+                                }
+                            }}
+                            className={`w-full px-4 py-3 rounded-lg border ${passwordError ? 'border-red-500' : 'border-gray-300'} focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all`}
+                            required
+                        />
+                        <button
+                            type="button"
+                            onClick={() => setShowPassword(!showPassword)}
+                            className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
+                        >
+                            {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
+                        </button>
+                    </div>
+
+                    <div className="relative">
+                        {passwordError && <p className="text-red-500 text-xs mb-1">{passwordError}</p>}
+                        <input
+                            type={showConfirmPassword ? "text" : "password"}
+                            placeholder="Potwierdź hasło"
+                            value={confirmPassword}
+                            onChange={(e) => {
+                                const nextConfirmPassword = e.target.value;
+                                setConfirmPassword(nextConfirmPassword);
+                                setFormError('');
+                                if (password && password !== nextConfirmPassword) {
+                                    setPasswordError('Hasła nie są takie same');
+                                } else {
+                                    setPasswordError('');
+                                }
+                            }}
+                            className={`w-full px-4 py-3 rounded-lg border ${passwordError ? 'border-red-500' : 'border-gray-300'} focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all`}
+                            required
+                        />
+                        <button
+                            type="button"
+                            onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                            className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
+                        >
+                            {showConfirmPassword ? <EyeOff size={20} /> : <Eye size={20} />}
+                        </button>
+                    </div>
+
+                    <button
+                        type="submit"
+                        disabled={Boolean(emailError || passwordError)}
+                        className="w-full bg-primary text-white font-bold py-3 rounded-lg hover:bg-primary/90 transition-colors shadow-md shadow-primary/20"
+                    >
+                        Zarejestruj się
+                    </button>
+                </form>
+
+                <div className="relative my-8">
+                    <div className="absolute inset-0 flex items-center">
+                        <div className="w-full border-t border-gray-200"></div>
+                    </div>
+                    <div className="relative flex justify-center text-sm">
+                        <span className="px-2 bg-white text-gray-400 font-medium">lub</span>
+                    </div>
+                </div>
+
+                <button
+                    onClick={() => alert("Google Login placeholder")}
+                    className="w-full flex items-center justify-center gap-2 border border-gray-300 py-3 rounded-lg hover:bg-gray-50 transition-colors"
+                >
+                    <svg className="w-5 h-5" viewBox="0 0 24 24">
+                        <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+                        <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+                        <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"/>
+                        <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+                    </svg>
+                    Zarejestruj się przez Google
+                </button>
+            </div>
+        </div>
+    );
+}
diff --git a/src/store/noticesStore.js b/src/store/noticesStore.js
index 5038a7e..363779a 100644
--- a/src/store/noticesStore.js
+++ b/src/store/noticesStore.js
@@ -46,7 +46,7 @@ export const useNoticesStore = create((set, get) => ({
       const updatedNotice = await api.editNotice(noticeId, notice);
       set((state) => ({
         notices: state.notices.map((n) =>
-          n.noticeId == noticeId ? updatedNotice : n
+          n.noticeId === noticeId ? updatedNotice : n
         ),
       }));
       return updatedNotice;
@@ -67,7 +67,7 @@ export const useNoticesStore = create((set, get) => ({
     try {
       return await api.getAllImagesByNoticeId(noticeId);
     } catch {
-      return ["https://http.cat/404.jpg"];
+      return [];
     }
   },