Base project structure

2025-08-27 18:57:12 +03:00
parent bb4603628c
commit b6c0fec2da
44 changed files with 4765 additions and 0 deletions
--- a/src/pages/login/login.tsx
+++ b/src/pages/login/login.tsx
@ -0,0 +1,116 @@
+import { useState } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+
+import { toast } from "react-toastify"
+
+import useAuth from "../../auth/auth";
+
+import FormField from "../../components/FormField"
+import "./login.css"
+
+
+const Login = () => {
+  const { setToken } = useAuth();
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+
+  const navigate = useNavigate();
+  const location = useLocation();
+  const searchPath = new URLSearchParams(location.search);
+  const redirectPath = searchPath.get("to") || "/";
+
+  const [usernameEmpty, setUsernameEmpty] = useState(false);
+  const [passwordEmpty, setPasswordEmpty] = useState(false);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    setUsernameEmpty(!username);
+    setPasswordEmpty(!password);
+
+    if (!username || !password) {
+      return;
+    }
+
+    // TODO: request to API - login
+    if (username === "a" && password === "a") {
+      const token = "todo.jwt.token";
+      setToken(token);
+      navigate(redirectPath, { replace: true });
+    } else {
+      toast.error("Wrong login or password");
+    }
+  };
+
+  return (
+    <div className="login">
+      <div className="login-overlay-text">
+        <h3>
+          Welcome to Picrinth Web-Admin!<br/>
+          Picrinth is an open source app for scrolling synchronized<br/>
+          feeds of pictures from different sources together with your friends<br/>
+          Enjoy [#]
+        </h3>
+      </div>
+      <div className="login-left">
+        <video className="login-video" autoPlay loop muted>
+          <source src={"./login-video.mp4"} type="video/mp4" />
+        </video>
+      </div>
+      <div className="login-right">
+        <h2 className="login-logo-block">
+          <img className="login-logo" src="./logo.png" alt="Picrinth logo" />
+        </h2>
+        <div className="login-login-block">
+          <form onSubmit={handleSubmit}
+            style={{
+              flexDirection: "column",
+              display: "flex",
+              gap: "10px",
+              alignItems: "center",
+            }}
+            noValidate
+          >
+            <FormField
+              type="text"
+              placeholder="Username"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              required
+              showError={usernameEmpty}
+              errorMessage="Please enter your username"
+            />
+            <FormField
+              type="password"
+              placeholder="Password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              showError={passwordEmpty}
+              errorMessage="Please enter your password"
+            />
+            <button type="submit" className="login-button">
+              Login
+            </button>
+          </form>
+          <h3 style={{textAlign: "center"}}>
+            <a href={`/register?to=${redirectPath}`} className="login-link">Create account</a>
+          </h3>
+        </div>
+        <div className="login-links-block">
+          <h2>
+            <a href="https://git.frik.su/Beesquit/picrinth-admin" className="login-link">Frontend</a>
+          </h2>
+          <h2>
+            <a href="https://git.frik.su/Beesquit/picrinth-server" className="login-link">Backend</a>
+          </h2>
+          <h2>
+            <a href="https://git.frik.su/Beesquit" className="login-link">Author</a>
+          </h2>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Login;