add auth window

src/pages/LoginPage.jsx

@@ -0,0 +1,82 @@
+import { useState } from "react";
+import MagnifierLogo from "../components/MagnifierLogo";
+import { useAuth } from "../hooks/useAuth";
+import { FLOAT_ICONS } from "../config/constants";
+import { s } from "../styles/loginStyles";
+import "../styles/global.css";
+
+export default function LoginPage() {
+  const [email,    setEmail]    = useState("");
+  const [password, setPassword] = useState("");
+  const [showPass, setShowPass] = useState(false);
+
+  const { login, loginGoogle, loginYandex, loginVK, loading, error } = useAuth();
+
+  return (
+
+      <div style={s.page}>
+        <div style={s.bgGlow} />
+
+        {FLOAT_ICONS.map(({ icon, delay, size, ...pos }, i) => (
+            <img key={i} src={icon} alt="" className="fi" style={{ ...pos, animationDelay: delay, width: size || "7rem", height: size || "7rem", filter: "grayscale(100%) " }} />
+        ))}
+
+        <div style={s.card} className="card-in">
+          <button style={s.dotsBtn}>⋮</button>
+
+          <div style={s.logoWrap}>
+            <MagnifierLogo />
+          </div>
+
+          <h1 style={s.title}>Находка</h1>
+
+          <form onSubmit={(e) => { e.preventDefault(); login(email, password); }} noValidate>
+            <div style={s.inputWrap}>
+              <input
+                  type="email" placeholder="Введите email"
+                  value={email} onChange={(e) => setEmail(e.target.value)}
+                  style={s.input} className="li"
+                  autoComplete="off" name="naidishchey-email-x7k"
+                  readOnly onFocus={(e) => e.target.removeAttribute("readOnly")}
+              />
+            </div>
+
+            <div style={{ ...s.inputWrap, position: "relative" }}>
+              <input
+                  type={showPass ? "text" : "password"} placeholder="Введите пароль"
+                  value={password} onChange={(e) => setPassword(e.target.value)}
+                  style={{ ...s.input, paddingRight: "44px" }} className="li"
+                  autoComplete="off" name="naidishchey-pass-x7k"
+                  readOnly onFocus={(e) => e.target.removeAttribute("readOnly")}
+              />
+              <button type="button" style={s.eyeBtn} onClick={() => setShowPass(v => !v)}>
+                {showPass ? "🙈" : "👁"}
+              </button>
+            </div>
+
+            {error && <p style={s.errMsg}>{error}</p>}
+
+            <button type="submit" style={s.btnLogin} className="btn-l" disabled={loading}>
+              {loading ? "Входим..." : "Войти"}
+            </button>
+          </form>
+
+          <button style={s.forgotBtn}>Забыли пароль?</button>
+
+          <p style={s.regRow}>
+            Нет аккаунта? <a href="/register" style={s.link}>Зарегистрироваться</a>
+          </p>
+
+          <div style={s.divider} className="div-line">
+            <span style={s.divText}>или</span>
+          </div>
+
+          <div style={s.socials}>
+            <button onClick={loginGoogle} style={s.socBtn} className="soc">Google</button>
+            <button onClick={loginYandex} style={{ ...s.socBtn, color: "#ffcc00" }} className="soc">Яндекс</button>
+            <button onClick={loginVK}     style={{ ...s.socBtn, color: "#5b9bd5" }} className="soc">ВК</button>
+          </div>
+        </div>
+      </div>
+  );
+}