Pierwszy commit

2024-09-10 21:30:40 +02:00
commit a616741470
31 changed files with 1070 additions and 0 deletions
@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { pb } from '../lib/pocketbase';
+
+const CreatePost: React.FC = () => {
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      await pb.collection('posts').create({
+        title,
+        content,
+        user: pb.authStore.model!.id,
+        votes: 0,
+      });
+      navigate('/');
+    } catch (error) {
+      console.error('Błąd przy tworzeniu posta:', error);
+      alert('Nie udało się stworzyć posta');
+    }
+  };
+
+  return (
+    <div className="max-w-md mx-auto">
+      <h1 className="text-2xl font-bold mb-4">Stwórz post</h1>
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label htmlFor="title" className="block mb-1">Tytuł</label>
+          <input
+            type="text"
+            id="title"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            required
+            className="w-full px-3 py-2 border rounded"
+          />
+        </div>
+        <div>
+          <label htmlFor="content" className="block mb-1">Zawartość</label>
+          <textarea
+            id="content"
+            value={content}
+            onChange={(e) => setContent(e.target.value)}
+            required
+            className="w-full px-3 py-2 border rounded"
+            rows={5}
+          ></textarea>
+        </div>
+        <button type="submit" className="w-full bg-blue-500 text-white py-2 rounded">Stwórz post</button>
+      </form>
+    </div>
+  );
+};
+
+export default CreatePost;
+
+// Formularz dodawania posta.
@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import { pb } from '../lib/pocketbase';
+
+const ForgotPassword: React.FC = () => {
+  const [email, setEmail] = useState('');
+  const [message, setMessage] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      await pb.collection('users').requestPasswordReset(email);
+      setMessage('Mail z resetem hasła został wysłany.');
+    } catch (error) {
+      console.error('Błąd z resetem hasła:', error);
+      setMessage('Nie udało się wysłać maila z resetem hasła.');
+    }
+  };
+
+  return (
+    <div className="max-w-md mx-auto">
+      <h1 className="text-2xl font-bold mb-4">Zapomniałem hasła</h1>
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label htmlFor="email" className="block mb-1">Email</label>
+          <input
+            type="email"
+            id="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+            className="w-full px-3 py-2 border rounded"
+          />
+        </div>
+        <button type="submit" className="w-full bg-blue-500 text-white py-2 rounded">Rezetuj hasło</button>
+      </form>
+      {message && <p className="mt-4 text-center">{message}</p>}
+    </div>
+  );
+};
+
+export default ForgotPassword;
+
+// Formularz przypominania hasła.
@@ -0,0 +1,69 @@
+import React, { useState, useEffect } from 'react';
+import { pb } from '../lib/pocketbase';
+import Post from '../components/Post';
+
+interface PostType {
+  id: string;
+  title: string;
+  content: string;
+  user: string;
+  votes: number;
+  created: string;
+}
+
+const Home: React.FC = () => {
+  const [posts, setPosts] = useState<PostType[]>([]);
+
+  useEffect(() => {
+    const fetchPosts = async () => {
+      try {
+        const records = await pb.collection('posts').getFullList<PostType>({
+          sort: '-votes',
+          expand: 'user',
+        });
+        setPosts(records);
+      } catch (error) {
+        console.error('Błąd przy pobieraniu postów:', error);
+      }
+    };
+
+    fetchPosts();
+
+    pb.realtime.subscribe('posts', (e) => {
+      const updatedRecord = e.record as PostType;
+
+      if (e.action === 'create') {
+        setPosts((prevPosts) => [updatedRecord, ...prevPosts].sort((a, b) => b.votes - a.votes));
+      } else if (e.action === 'update') {
+        setPosts((prevPosts) => 
+          [...prevPosts.map((post) => 
+            post.id === updatedRecord.id ? updatedRecord : post
+          )].sort((a, b) => b.votes - a.votes)
+        );
+      } else if (e.action === 'delete') {
+        setPosts((prevPosts) =>
+          prevPosts.filter((post) => post.id !== updatedRecord.id)
+        );
+      }
+    });
+
+    return () => {
+      pb.realtime.unsubscribe();
+    };
+  }, []);
+
+  return (
+    <div>
+      <h1 className="text-2xl font-bold mb-4">Najwyżej oceniane posty</h1>
+      <div className="space-y-4">
+        {posts.map((post) => (
+          <Post key={post.id} post={post} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Home;
+
+// Strona głowna, tutaj wyświetlają się posty.
@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { pb } from '../lib/pocketbase';
+import { useAtom } from 'jotai';
+import { updateAuthAtom } from '../atoms/authAtom';
+
+const Login: React.FC = () => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [, updateAuth] = useAtom(updateAuthAtom);
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      await pb.collection('users').authWithPassword(email, password);
+      updateAuth();
+      navigate('/');
+    } catch (error) {
+      console.error('Błąd logowania:', error);
+      alert('Nie udało się zalogować');
+    }
+  };
+
+  return (
+    <div className="max-w-md mx-auto">
+      <h1 className="text-2xl font-bold mb-4">Login</h1>
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label htmlFor="email" className="block mb-1">Email</label>
+          <input
+            type="email"
+            id="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+            className="w-full px-3 py-2 border rounded"
+          />
+        </div>
+        <div>
+          <label htmlFor="password" className="block mb-1">Hasło</label>
+          <input
+            type="password"
+            id="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+            className="w-full px-3 py-2 border rounded"
+          />
+        </div>
+        <button type="submit" className="w-full bg-blue-500 text-white py-2 rounded">Zaloguj</button>
+      </form>
+      <div className="mt-4">
+        <Link to="/forgot-password" className="text-blue-500">Zapomniałeś hasła?</Link>
+      </div>
+    </div>
+  );
+};
+
+export default Login;
+
+// Formularz logowania się.
@@ -0,0 +1,99 @@
+import React, { useState, useEffect } from 'react';
+import { pb } from '../lib/pocketbase';
+import { useAtom } from 'jotai';
+import { updateAuthAtom } from '../atoms/authAtom';
+
+const Profile: React.FC = () => {
+  const [email, setEmail] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [, updateAuth] = useAtom(updateAuthAtom);
+
+  useEffect(() => {
+    if (pb.authStore.model) {
+      setEmail(pb.authStore.model.email);
+    }
+  }, []);
+
+  const handleUpdateProfile = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (newPassword && newPassword !== confirmPassword) {
+      alert("Hasła nie są takie same");
+      return;
+    }
+
+    try {
+      const data: Record<string, any> = { email };
+      if (newPassword) {
+        data.password = newPassword;
+        data.passwordConfirm = confirmPassword;
+      }
+
+      await pb.collection('users').update(pb.authStore.model!.id, data);
+      alert('Profile updated successfully');
+      updateAuth();
+    } catch (error) {
+      console.error('Profile update error:', error);
+      alert('Failed to update profile');
+    }
+  };
+
+  const handleDeleteAccount = async () => {
+    if (window.confirm('Jesteś pewien, że chcesz usunąć konto? Tej akcji nie da się cofnąć.')) {
+      try {
+        await pb.collection('users').delete(pb.authStore.model!.id);
+        pb.authStore.clear();
+        updateAuth();
+        alert('Konto poprawnie usunięte');
+      } catch (error) {
+        console.error('Błąd z usuwaniem konta:', error);
+        alert('Nie udało się usunąc konta.');
+      }
+    }
+  };
+
+  return (
+    <div className="max-w-md mx-auto">
+      <h1 className="text-2xl font-bold mb-4">Profile</h1>
+      <form onSubmit={handleUpdateProfile} className="space-y-4">
+        <div>
+          <label htmlFor="email" className="block mb-1">Email</label>
+          <input
+            type="email"
+            id="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+            className="w-full px-3 py-2 border rounded"
+          />
+        </div>
+        <div>
+          <label htmlFor="newPassword" className="block mb-1">Nowe hasło</label>
+          <input
+            type="password"
+            id="newPassword"
+            value={newPassword}
+            onChange={(e) => setNewPassword(e.target.value)}
+            className="w-full px-3 py-2 border rounded"
+          />
+        </div>
+        <div>
+          <label htmlFor="confirmPassword" className="block mb-1">Powtórz nowe hasło</label>
+          <input
+            type="password"
+            id="confirmPassword"
+            value={confirmPassword}
+            onChange={(e) => setConfirmPassword(e.target.value)}
+            className="w-full px-3 py-2 border rounded"
+          />
+        </div>
+        <button type="submit" className="w-full bg-blue-500 text-white py-2 rounded">Zaktualizuj profil</button>
+      </form>
+      <button onClick={handleDeleteAccount} className="w-full mt-4 bg-red-500 text-white py-2 rounded">Usuń konto</button>
+    </div>
+  );
+};
+
+export default Profile;
+
+// Formularz zmieniania profilu użytkownika
@@ -0,0 +1,97 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { pb } from '../lib/pocketbase';
+import { useAtom } from 'jotai';
+import { updateAuthAtom } from '../atoms/authAtom';
+
+const Register: React.FC = () => {
+  const [email, setEmail] = useState('');
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [passwordConfirm, setPasswordConfirm] = useState('');
+  const [, updateAuth] = useAtom(updateAuthAtom);
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (password !== passwordConfirm) {
+      alert("Hasła nie są takie same!");
+      return;
+    }
+    try {
+      const createdUser = await pb.collection('users').create({
+        email,
+        username,
+        password,
+        passwordConfirm,
+      });
+
+      if (createdUser) {
+        await pb.collection('users').requestVerification(email);
+        alert('Udana rejestracja. Sprawdź swój adres email aby aktywować konto.');
+      }
+
+      navigate('/login');
+    } catch (error) {
+      console.error('Błąd rejestracji:', error);
+      alert('Nieudana rejestracja');
+    }
+  };
+
+  return (
+    <div className="max-w-md mx-auto">
+      <h1 className="text-2xl font-bold mb-4">Zarejestruj się</h1>
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label htmlFor="email" className="block mb-1">Email</label>
+          <input
+            type="email"
+            id="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+            className="w-full px-3 py-2 border rounded"
+          />
+        </div>
+        <div>
+          <label htmlFor="username" className="block mb-1">Nazwa użytkownika</label>
+          <input
+            type="text"
+            id="username"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            required
+            className="w-full px-3 py-2 border rounded"
+          />
+        </div>
+        <div>
+          <label htmlFor="password" className="block mb-1">Hasło</label>
+          <input
+            type="password"
+            id="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+            className="w-full px-3 py-2 border rounded"
+          />
+        </div>
+        <div>
+          <label htmlFor="passwordConfirm" className="block mb-1">Powtórz hasło</label>
+          <input
+            type="password"
+            id="passwordConfirm"
+            value={passwordConfirm}
+            onChange={(e) => setPasswordConfirm(e.target.value)}
+            required
+            className="w-full px-3 py-2 border rounded"
+          />
+        </div>
+        <button type="submit" className="w-full bg-blue-500 text-white py-2 rounded">Zarejestruj się</button>
+      </form>
+    </div>
+  );
+};
+
+export default Register;
+
+// Formularz rejestracji.