ADD: Registration page and update image handling in notices

2026-04-26 11:04:04 +02:00
parent a8fc268932
commit a847a8768d
7 changed files with 279 additions and 31 deletions
@@ -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>
@@ -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 [];
  }
 }

@@ -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}`}>
+        {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">
@@ -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 {
@@ -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) => (
+        {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"
+              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>
@@ -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>
+    );
+}
@@ -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 [];
    }
  },