flowlink-auth 2.8.4 → 2.8.6

package/dist/SignIn.js

@@ -1,8 +1,11 @@
 "use client";
 import React, { useEffect, useRef, useState } from "react";
+import Image from "next/image";
 import Link from "next/link";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 import { useAuth } from "./provider.js";
-function SignIn({ onSuccess } = {}) {
+function SignIn({ agency = { name: "chest", logo: "/logo.png" }, onSuccess } = {}) {
   const {
     publishableKey,
     baseUrl,
@@ -14,13 +17,10 @@ function SignIn({ onSuccess } = {}) {
     fetchMe,
     setUser
   } = (typeof useAuth === "function" ? useAuth() : {}) || {};
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
+  const [form2, setForm] = useState({ email: "", password: "" });
   const [loading, setLoading] = useState(false);
   const [loadingOauth, setLoadingOauth] = useState({ google: false, github: false });
   const redirectTimer = useRef(null);
-  const toastId = useRef(0);
-  const [toasts, setToasts] = useState([]);
   useEffect(() => {
     const meta = document.createElement("meta");
     meta.name = "viewport";
@@ -30,40 +30,23 @@ function SignIn({ onSuccess } = {}) {
       if (redirectTimer.current) clearTimeout(redirectTimer.current);
       const existing = document.querySelector('meta[name="viewport"]');
       if (existing && existing.content === meta.content) document.head.removeChild(existing);
-      toasts.forEach((t) => {
-        if (t._timer) clearTimeout(t._timer);
-      });
     };
   }, []);
-  function showToast(type, message, ms = 5e3) {
-    const id = ++toastId.current;
-    const t = { id, type, message, _timer: null };
-    setToasts((prev) => [t, ...prev].slice(0, 6));
-    const timer = setTimeout(() => {
-      setToasts((prev) => prev.filter((x) => x.id !== id));
-    }, ms);
-    t._timer = timer;
-  }
-  function removeToast(id) {
-    setToasts((prev) => {
-      prev.forEach((t) => {
-        if (t.id === id && t._timer) clearTimeout(t._timer);
-      });
-      return prev.filter((x) => x.id !== id);
-    });
-  }
   if (loadingUser) return null;
   if (user && redirect) {
     if (typeof redirectTo === "function") redirectTo(redirect);
     else if (typeof window !== "undefined") window.location.assign(redirect);
     return null;
   }
+  function handleChange(e) {
+    setForm((prev) => ({ ...prev, [e.target.id]: e.target.value }));
+  }
   async function submit(e) {
     e.preventDefault();
     if (loading) return;
     setLoading(true);
-    if (!email || !password) {
-      showToast("error", "Email and password are required");
+    if (!form2.email || !form2.password) {
+      toast.error("Email and password are required", { toastId: "missing-creds", toastStyle: { background: "#000", color: "#fff" } });
       setLoading(false);
       return;
     }
@@ -76,7 +59,7 @@ function SignIn({ onSuccess } = {}) {
           "Content-Type": "application/json",
           "x-publishable-key": publishableKey || ""
         },
-        body: JSON.stringify({ email, password })
+        body: JSON.stringify({ email: form2.email, password: form2.password })
       });
       const ct = res.headers.get("content-type") || "";
       let data = {};
@@ -108,7 +91,7 @@ function SignIn({ onSuccess } = {}) {
         } catch (_) {
         }
       }
-      showToast("success", "Signed in. Redirecting...");
+      toast.success("Signed in. Redirecting...", { toastStyle: { background: "#000", color: "#fff" } });
       if (redirect) {
         redirectTimer.current = setTimeout(() => {
           if (typeof redirectTo === "function") redirectTo(redirect);
@@ -116,7 +99,7 @@ function SignIn({ onSuccess } = {}) {
         }, 250);
       }
     } catch (err) {
-      showToast("error", err?.message || "Network error");
+      toast.error(err?.message || "Network error", { toastStyle: { background: "#000", color: "#fff" } });
       console.error("Signin error:", err);
     } finally {
       setLoading(false);
@@ -130,9 +113,7 @@ function SignIn({ onSuccess } = {}) {
       const callbackUrl = encodeURIComponent(`${typeof window !== "undefined" ? window.location.origin : ""}/signin`);
       const sdkBase = baseUrl || (typeof window !== "undefined" ? window.location.origin.replace(/\/+$/, "") : "");
       const startUrl = `${sdkBase.replace(/\/+$/, "")}/sdk/auth/start?rid=${rid}&source=${encodeURIComponent(provider)}&callbackUrl=${callbackUrl}`;
-      if (!publishableKey) {
-        throw new Error("Missing publishable key (client side). Set NEXT_PUBLIC_FLOWLINK_PUBLISHABLE_KEY or provide publishableKey in provider.");
-      }
+      if (!publishableKey) throw new Error("Missing publishable key (client side).");
       const res = await fetch(startUrl, {
         method: "GET",
         headers: { "x-publishable-key": publishableKey },
@@ -143,165 +124,208 @@ function SignIn({ onSuccess } = {}) {
       if (!data?.oauthUrl) throw new Error("SDK start did not return oauthUrl");
       if (typeof window !== "undefined") window.location.href = data.oauthUrl;
     } catch (err) {
-      showToast("error", err?.message || "OAuth start failed");
+      toast.error(err?.message || "OAuth start failed", { toastStyle: { background: "#000", color: "#fff" } });
       console.error("OAuth start error:", err);
       setLoadingOauth((prev) => ({ ...prev, [provider]: false }));
     }
   }
   const handleGoogle = (e) => {
-    if (e && typeof e.preventDefault === "function") e.preventDefault();
+    if (e?.preventDefault) e.preventDefault();
     startOAuthFlow("google");
   };
   const handleGithub = (e) => {
-    if (e && typeof e.preventDefault === "function") e.preventDefault();
+    if (e?.preventDefault) e.preventDefault();
     startOAuthFlow("github");
   };
-  return /* @__PURE__ */ React.createElement("div", { style: overlay }, /* @__PURE__ */ React.createElement("div", { style: toastContainer, "aria-live": "polite", "aria-atomic": "true" }, toasts.map((t) => /* @__PURE__ */ React.createElement(
-    "div",
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    ToastContainer,
     {
-      key: t.id,
-      role: "status",
-      style: {
-        ...toastBase,
-        ...t.type === "error" ? toastError : t.type === "success" ? toastSuccess : toastInfo
-      },
-      onMouseEnter: () => {
-        if (t._timer) clearTimeout(t._timer);
-      },
-      onMouseLeave: () => {
-        const timer = setTimeout(() => removeToast(t.id), 3e3);
-        setToasts((prev) => prev.map((x) => x.id === t.id ? { ...x, _timer: timer } : x));
-      }
+      position: "top-right",
+      newestOnTop: true,
+      autoClose: 3e3,
+      hideProgressBar: false,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: true,
+      theme: "dark"
+    }
+  ), /* @__PURE__ */ React.createElement("div", { style: page }, /* @__PURE__ */ React.createElement("div", { style: cardWrap }, /* @__PURE__ */ React.createElement("div", { style: card }, /* @__PURE__ */ React.createElement("div", { style: cardInner }, /* @__PURE__ */ React.createElement("div", { style: brand }, /* @__PURE__ */ React.createElement("div", { style: brandRow }, /* @__PURE__ */ React.createElement("div", { style: logoWrap }, /* @__PURE__ */ React.createElement(Image, { src: agency.logo, width: 30, height: 30, alt: agency.name, style: logoImgStyle })), /* @__PURE__ */ React.createElement("h1", { style: brandTitle }, agency.name)), /* @__PURE__ */ React.createElement("div", { style: brandText }, /* @__PURE__ */ React.createElement("div", { style: brandLead }, "Sign in to ", agency.name), /* @__PURE__ */ React.createElement("div", { style: brandSub }, "Welcome back! Let's get you signed in."))), /* @__PURE__ */ React.createElement("div", { style: oauthRow }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      onClick: handleGoogle,
+      type: "button",
+      style: { ...oauthButton, ...oauthGoogle },
+      disabled: loading || loadingOauth.google,
+      "aria-disabled": loading || loadingOauth.google
     },
-    /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }, t.message),
-    /* @__PURE__ */ React.createElement("button", { "aria-label": "Dismiss", onClick: () => removeToast(t.id), style: toastCloseBtn }, "\u2715")
-  ))), /* @__PURE__ */ React.createElement("div", { style: modal }, /* @__PURE__ */ React.createElement("h2", { style: title }, "Sign in"), /* @__PURE__ */ React.createElement("p", { style: subtitle }, "Welcome back \u2014 enter your credentials."), /* @__PURE__ */ React.createElement("form", { onSubmit: submit, style: { width: "100%" } }, /* @__PURE__ */ React.createElement("label", { style: label }, "Email"), /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("svg", { width: 18, style: { marginRight: 10 }, viewBox: "-3 0 262 262", xmlns: "http://www.w3.org/2000/svg", fill: "#000000", "aria-hidden": true }, /* @__PURE__ */ React.createElement("path", { d: "M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027", fill: "#4285F4" }), /* @__PURE__ */ React.createElement("path", { d: "M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1", fill: "#34A853" }), /* @__PURE__ */ React.createElement("path", { d: "M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782", fill: "#FBBC05" }), /* @__PURE__ */ React.createElement("path", { d: "M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251", fill: "#EB4335" })),
+    /* @__PURE__ */ React.createElement("span", null, loadingOauth.google ? "Loading..." : "Google")
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      onClick: handleGithub,
+      type: "button",
+      style: { ...oauthButton, ...oauthGithub },
+      disabled: loading || loadingOauth.github,
+      "aria-disabled": loading || loadingOauth.github
+    },
+    /* @__PURE__ */ React.createElement("svg", { width: 18, style: { marginRight: 10 }, xmlns: "http://www.w3.org/2000/svg", fill: "white", viewBox: "0 0 20 20", "aria-hidden": true }, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", d: "M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z", clipRule: "evenodd" })),
+    /* @__PURE__ */ React.createElement("span", null, loadingOauth.github ? "Loading..." : "Github")
+  )), /* @__PURE__ */ React.createElement("div", { style: dividerRow }, /* @__PURE__ */ React.createElement("div", { style: line }), /* @__PURE__ */ React.createElement("div", { style: orText }, "or"), /* @__PURE__ */ React.createElement("div", { style: line })), /* @__PURE__ */ React.createElement("form", { onSubmit: submit, style: form2 }, /* @__PURE__ */ React.createElement("label", { style: label }, /* @__PURE__ */ React.createElement("span", { style: labelSmall }, "Email address"), /* @__PURE__ */ React.createElement(
     "input",
     {
-      style: input,
-      value: email,
-      onChange: (e) => setEmail(e.target.value),
+      id: "email",
       type: "email",
-      required: true
+      onChange: handleChange,
+      value: form2.email,
+      required: true,
+      placeholder: "you@example.com",
+      style: input
     }
-  ), /* @__PURE__ */ React.createElement("label", { style: label }, "Password"), /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement("label", { style: label }, /* @__PURE__ */ React.createElement("span", { style: labelSmall }, "Password"), /* @__PURE__ */ React.createElement(
     "input",
     {
-      style: input,
+      id: "password",
       type: "password",
-      value: password,
-      onChange: (e) => setPassword(e.target.value),
-      required: true
+      onChange: handleChange,
+      value: form2.password,
+      required: true,
+      placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
+      style: input
     }
-  ), /* @__PURE__ */ React.createElement("div", { style: { marginTop: 12 } }, /* @__PURE__ */ React.createElement("button", { style: button, type: "submit", disabled: loading }, loading ? "Signing in\u2026" : "Sign in")), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: 8, marginTop: 16 } }, /* @__PURE__ */ React.createElement("button", { type: "button", onClick: handleGoogle, style: oauthButtonGoogle, disabled: loading || loadingOauth.google }, /* @__PURE__ */ React.createElement("svg", { width: 18, style: { marginRight: 8 }, viewBox: "-3 0 262 262", xmlns: "http://www.w3.org/2000/svg", fill: "#000000", "aria-hidden": true }, /* @__PURE__ */ React.createElement("path", { d: "M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027", fill: "#4285F4" }), /* @__PURE__ */ React.createElement("path", { d: "M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1", fill: "#34A853" }), /* @__PURE__ */ React.createElement("path", { d: "M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782", fill: "#FBBC05" }), /* @__PURE__ */ React.createElement("path", { d: "M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251", fill: "#EB4335" })), /* @__PURE__ */ React.createElement("span", null, loadingOauth.google ? "Loading..." : "Google")), /* @__PURE__ */ React.createElement("button", { type: "button", onClick: handleGithub, style: oauthButtonGithub, disabled: loading || loadingOauth.github }, /* @__PURE__ */ React.createElement("svg", { width: 18, style: { marginRight: 8 }, xmlns: "http://www.w3.org/2000/svg", fill: "white", viewBox: "0 0 20 20", "aria-hidden": true }, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", d: "M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z", clipRule: "evenodd" })), /* @__PURE__ */ React.createElement("span", null, loadingOauth.github ? "Loading..." : "GitHub"))))));
+  )), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "submit",
+      style: submitBtn,
+      "aria-disabled": loading,
+      disabled: loading
+    },
+    loading ? "Signing in..." : "Sign In"
+  ))), /* @__PURE__ */ React.createElement("div", { style: cardFooter }, /* @__PURE__ */ React.createElement("div", { style: smallText }, /* @__PURE__ */ React.createElement("span", { style: muted }, "Don't have an account? "), /* @__PURE__ */ React.createElement(Link, { href: "/signup", style: link }, "Create one")), /* @__PURE__ */ React.createElement("div", { style: thinDivider }), /* @__PURE__ */ React.createElement("div", { style: { textAlign: "center", marginTop: 8 } }, /* @__PURE__ */ React.createElement("div", { style: securedText }, "Secured by auth")))))));
 }
-const overlay = {
-  position: "fixed",
-  inset: 0,
-  display: "block",
-  // allow page scroll
-  padding: 20,
-  background: "linear-gradient(180deg, rgba(2,6,23,0.22), rgba(2,6,23,0.32))",
-  backdropFilter: "blur(6px)",
-  overflowY: "auto",
-  WebkitOverflowScrolling: "touch",
+const page = {
   minHeight: "100vh",
-  zIndex: 9999
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "24px",
+  background: "linear-gradient(to bottom, #0f1724, #0b1220 40%, #02040a 100%)",
+  color: "#fef3c7"
+};
+const cardWrap = {
+  width: "100%",
+  maxWidth: 420
 };
-const modal = {
+const card = {
   width: "100%",
-  maxWidth: 460,
-  margin: "40px auto",
-  borderRadius: 14,
-  background: "linear-gradient(180deg, rgba(15,19,24,0.85), rgba(10,12,16,0.85))",
-  border: "1px solid rgba(99,102,106,0.12)",
-  boxShadow: "0 18px 48px rgba(2,6,23,0.55), inset 0 1px 0 rgba(255,255,255,0.02)",
-  padding: 22,
+  borderRadius: 20,
+  background: "linear-gradient(180deg, rgba(15,17,20,0.88), rgba(6,8,12,0.92))",
+  border: "1px solid rgba(148,163,184,0.06)",
+  backdropFilter: "blur(8px)",
+  boxShadow: "0 18px 50px rgba(2,6,23,0.6)",
+  overflow: "hidden",
+  display: "flex",
+  flexDirection: "column"
+};
+const cardInner = {
+  padding: "28px",
+  display: "flex",
+  flexDirection: "column",
+  gap: 14,
+  background: "linear-gradient(180deg, rgba(12,14,18,0.02), rgba(0,0,0,0.02))",
+  borderRadius: "20px"
+};
+const brand = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 8,
+  alignItems: "center",
+  textAlign: "center"
+};
+const brandRow = {
+  display: "flex",
+  alignItems: "center",
+  gap: 10,
+  justifyContent: "center"
+};
+const logoWrap = {
+  width: 30,
+  height: 30,
+  borderRadius: 999,
+  overflow: "hidden",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  background: "linear-gradient(135deg,#2b313a,#0f1724)"
+};
+const logoImgStyle = { borderRadius: 999, objectFit: "cover" };
+const brandTitle = { margin: 0, fontSize: 20, fontWeight: 500, color: "#fff" };
+const brandLead = { fontSize: 15, color: "#f8fafc" };
+const brandSub = { fontSize: 13, color: "rgba(255,255,255,0.7)", marginTop: 2 };
+const brandText = { display: "flex", flexDirection: "column", gap: 2, alignItems: "center" };
+const oauthRow = { display: "flex", gap: 10, marginTop: 10 };
+const oauthButton = {
+  flex: 1,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "10px 12px",
+  borderRadius: 12,
+  border: "1px solid rgba(148,163,184,0.06)",
+  fontSize: 14,
+  cursor: "pointer",
+  userSelect: "none",
+  gap: 8,
+  minHeight: 40,
+  background: "transparent",
   color: "#fff"
 };
-const title = { margin: 0, fontSize: 20, fontWeight: 600 };
-const subtitle = { marginTop: 6, marginBottom: 14, color: "#cbd5e1", fontSize: 13 };
-const label = { display: "block", color: "#cbd5e1", fontSize: 13, marginTop: 8 };
+const oauthGoogle = { background: "rgba(255,255,255,0.02)" };
+const oauthGithub = { background: "rgba(255,255,255,0.01)" };
+const dividerRow = { display: "flex", alignItems: "center", gap: 12, marginTop: 14 };
+const line = { flex: 1, height: 1, background: "rgba(148,163,184,0.04)" };
+const orText = { fontSize: 13, color: "rgba(255,255,255,0.65)", padding: "0 8px" };
+const form = { display: "flex", flexDirection: "column", gap: 12, width: "100%", marginTop: 4 };
+const label = { display: "flex", flexDirection: "column", gap: 6 };
+const labelSmall = { fontSize: 13, color: "rgba(255,255,255,0.75)" };
 const input = {
   width: "100%",
   padding: "10px 12px",
-  marginTop: 6,
-  borderRadius: 10,
-  border: "1px solid rgba(148,163,184,0.10)",
+  borderRadius: 12,
   background: "rgba(255,255,255,0.02)",
-  color: "#e6e6e6",
+  color: "#fef3c7",
+  border: "1px solid rgba(148,163,184,0.06)",
+  fontSize: 14,
+  outline: "none",
   boxSizing: "border-box"
 };
-const button = {
+const submitBtn = {
+  marginTop: 6,
   width: "100%",
   padding: "10px 12px",
-  borderRadius: 10,
-  background: "linear-gradient(90deg,#06b6d4,#2563eb)",
-  color: "#0b1220",
+  borderRadius: 12,
+  background: "linear-gradient(180deg,#2563eb,#60a5fa)",
   border: "none",
-  fontWeight: 700,
-  cursor: "pointer"
-};
-const oauthButtonGoogle = {
-  flex: 1,
-  padding: "10px 12px",
-  borderRadius: 10,
-  background: "linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01))",
   color: "#fff",
-  border: "1px solid rgba(148,163,184,0.08)",
+  fontWeight: 600,
   cursor: "pointer",
+  fontSize: 15,
   display: "inline-flex",
   alignItems: "center",
   justifyContent: "center",
-  gap: 8
+  minHeight: 44
 };
-const oauthButtonGithub = {
-  flex: 1,
-  padding: "10px 12px",
-  borderRadius: 10,
-  background: "linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00))",
-  color: "#fff",
-  border: "1px solid rgba(148,163,184,0.08)",
-  cursor: "pointer",
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  gap: 8
-};
-const toastContainer = {
-  position: "fixed",
-  top: 18,
-  right: 18,
-  width: 360,
-  maxWidth: "calc(100% - 36px)",
-  display: "flex",
-  flexDirection: "column",
-  gap: 10,
-  zIndex: 6e4
-};
-const toastBase = {
-  display: "flex",
-  gap: 10,
-  alignItems: "center",
-  padding: "10px 12px",
-  borderRadius: 10,
-  boxShadow: "0 8px 20px rgba(2,6,23,0.6)",
-  color: "#fff",
-  fontSize: 13,
-  minWidth: 120
-};
-const toastError = { background: "#000", border: "1px solid rgba(255,255,255,0.06)" };
-const toastSuccess = { background: "#000", border: "1px solid rgba(255,255,255,0.06)" };
-const toastInfo = { background: "#000", border: "1px solid rgba(255,255,255,0.06)" };
-const toastCloseBtn = {
-  marginLeft: 8,
-  background: "transparent",
-  border: "none",
-  color: "rgba(255,255,255,0.7)",
-  cursor: "pointer",
-  fontSize: 14,
-  lineHeight: 1
+const cardFooter = {
+  padding: "18px",
+  borderTop: "1px solid rgba(148,163,184,0.03)",
+  background: "transparent"
 };
+const smallText = { textAlign: "center", fontSize: 13 };
+const muted = { color: "rgba(255,255,255,0.75)" };
+const link = { color: "#60a5fa", textDecoration: "none", fontWeight: 600 };
+const thinDivider = { height: 1, background: "rgba(148,163,184,0.04)", margin: "12px 0" };
+const securedText = { color: "rgba(255,255,255,0.9)", fontWeight: 600 };
 export {
   SignIn as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowlink-auth",
-  "version": "2.8.4",
+  "version": "2.8.6",
   "description": "Custom auth library",
   "main": "dist/index.js",
   "types": "src/index.d.ts",

package/src/SignIn.jsx

@@ -1,9 +1,13 @@
+// src/signin.jsx
 'use client'
 import React, { useEffect, useRef, useState } from 'react'
+import Image from 'next/image'
 import Link from 'next/link'
+import { ToastContainer, toast } from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
 import { useAuth } from './provider.js'
 
-export default function SignIn({ onSuccess } = {}) {
+export default function SignIn({ agency = { name: 'chest', logo: '/logo.png' }, onSuccess } = {}) {
   const {
     publishableKey,
     baseUrl,
@@ -16,50 +20,24 @@ export default function SignIn({ onSuccess } = {}) {
     setUser
   } = (typeof useAuth === 'function' ? useAuth() : {}) || {}
 
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
+  const [form, setForm] = useState({ email: '', password: '' })
   const [loading, setLoading] = useState(false)
   const [loadingOauth, setLoadingOauth] = useState({ google: false, github: false })
-
   const redirectTimer = useRef(null)
-  const toastId = useRef(0)
-  const [toasts, setToasts] = useState([])
 
+  // soft-disable pinch-zoom on mobile while mounted (SDK-safe)
   useEffect(() => {
-    // soft-disable pinch-zoom on mobile while mounted
     const meta = document.createElement('meta')
     meta.name = 'viewport'
     meta.content = 'width=device-width, initial-scale=1, maximum-scale=1'
     document.head.appendChild(meta)
-
     return () => {
       if (redirectTimer.current) clearTimeout(redirectTimer.current)
       const existing = document.querySelector('meta[name="viewport"]')
       if (existing && existing.content === meta.content) document.head.removeChild(existing)
-      // clear timers for toasts
-      toasts.forEach(t => { if (t._timer) clearTimeout(t._timer) })
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  // Toast helpers (black background)
-  function showToast(type, message, ms = 5000) {
-    const id = ++toastId.current
-    const t = { id, type, message, _timer: null }
-    setToasts(prev => [t, ...prev].slice(0, 6))
-    const timer = setTimeout(() => {
-      setToasts(prev => prev.filter(x => x.id !== id))
-    }, ms)
-    t._timer = timer
-  }
-
-  function removeToast(id) {
-    setToasts(prev => {
-      prev.forEach(t => { if (t.id === id && t._timer) clearTimeout(t._timer) })
-      return prev.filter(x => x.id !== id)
-    })
-  }
-
   if (loadingUser) return null
 
   if (user && redirect) {
@@ -68,13 +46,17 @@ export default function SignIn({ onSuccess } = {}) {
     return null
   }
 
+  function handleChange(e) {
+    setForm(prev => ({ ...prev, [e.target.id]: e.target.value }))
+  }
+
   async function submit(e) {
     e.preventDefault()
     if (loading) return
     setLoading(true)
 
-    if (!email || !password) {
-      showToast('error', 'Email and password are required')
+    if (!form.email || !form.password) {
+      toast.error('Email and password are required', { toastId: 'missing-creds', toastStyle: { background: '#000', color: '#fff' } })
       setLoading(false)
       return
     }
@@ -89,7 +71,7 @@ export default function SignIn({ onSuccess } = {}) {
           'Content-Type': 'application/json',
           'x-publishable-key': publishableKey || ''
         },
-        body: JSON.stringify({ email, password })
+        body: JSON.stringify({ email: form.email, password: form.password })
       })
 
       const ct = res.headers.get('content-type') || ''
@@ -121,7 +103,8 @@ export default function SignIn({ onSuccess } = {}) {
         try { onSuccess(data) } catch (_) {}
       }
 
-      showToast('success', 'Signed in. Redirecting...')
+      toast.success('Signed in. Redirecting...', { toastStyle: { background: '#000', color: '#fff' } })
+
       if (redirect) {
         redirectTimer.current = setTimeout(() => {
           if (typeof redirectTo === 'function') redirectTo(redirect)
@@ -129,7 +112,7 @@ export default function SignIn({ onSuccess } = {}) {
         }, 250)
       }
     } catch (err) {
-      showToast('error', err?.message || 'Network error')
+      toast.error(err?.message || 'Network error', { toastStyle: { background: '#000', color: '#fff' } })
       console.error('Signin error:', err)
     } finally {
       setLoading(false)
@@ -137,9 +120,9 @@ export default function SignIn({ onSuccess } = {}) {
   }
 
   async function startOAuthFlow(provider) {
-    // prevent double start
     if (loading || loadingOauth[provider]) return
     setLoadingOauth(prev => ({ ...prev, [provider]: true }))
+
     try {
       const rid =
         (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function')
@@ -150,9 +133,7 @@ export default function SignIn({ onSuccess } = {}) {
       const sdkBase = baseUrl || (typeof window !== 'undefined' ? window.location.origin.replace(/\/+$/, '') : '')
       const startUrl = `${sdkBase.replace(/\/+$/, '')}/sdk/auth/start?rid=${rid}&source=${encodeURIComponent(provider)}&callbackUrl=${callbackUrl}`
 
-      if (!publishableKey) {
-        throw new Error('Missing publishable key (client side). Set NEXT_PUBLIC_FLOWLINK_PUBLISHABLE_KEY or provide publishableKey in provider.')
-      }
+      if (!publishableKey) throw new Error('Missing publishable key (client side).')
 
       const res = await fetch(startUrl, {
         method: 'GET',
@@ -164,212 +145,280 @@ export default function SignIn({ onSuccess } = {}) {
       if (!res.ok) throw new Error(data?.error || `OAuth start failed (${res.status})`)
       if (!data?.oauthUrl) throw new Error('SDK start did not return oauthUrl')
 
+      // navigate to provider (unloads page, so no need to unset loading)
       if (typeof window !== 'undefined') window.location.href = data.oauthUrl
     } catch (err) {
-      showToast('error', err?.message || 'OAuth start failed')
+      toast.error(err?.message || 'OAuth start failed', { toastStyle: { background: '#000', color: '#fff' } })
       console.error('OAuth start error:', err)
       setLoadingOauth(prev => ({ ...prev, [provider]: false }))
     }
   }
 
-  const handleGoogle = (e) => {
-    if (e && typeof e.preventDefault === 'function') e.preventDefault()
-    startOAuthFlow('google')
-  }
-
-  const handleGithub = (e) => {
-    if (e && typeof e.preventDefault === 'function') e.preventDefault()
-    startOAuthFlow('github')
-  }
+  const handleGoogle = (e) => { if (e?.preventDefault) e.preventDefault(); startOAuthFlow('google') }
+  const handleGithub = (e) => { if (e?.preventDefault) e.preventDefault(); startOAuthFlow('github') }
 
   return (
-    <div style={overlay}>
-      {/* Toasts */}
-      <div style={toastContainer} aria-live="polite" aria-atomic="true">
-        {toasts.map(t => (
-          <div
-            key={t.id}
-            role="status"
-            style={{
-              ...toastBase,
-              ...(t.type === 'error' ? toastError : t.type === 'success' ? toastSuccess : toastInfo)
-            }}
-            onMouseEnter={() => { if (t._timer) clearTimeout(t._timer) }}
-            onMouseLeave={() => {
-              const timer = setTimeout(() => removeToast(t.id), 3000)
-              setToasts(prev => prev.map(x => x.id === t.id ? { ...x, _timer: timer } : x))
-            }}
-          >
-            <div style={{ flex: 1 }}>{t.message}</div>
-            <button aria-label="Dismiss" onClick={() => removeToast(t.id)} style={toastCloseBtn}>✕</button>
-          </div>
-        ))}
-      </div>
-
-      <div style={modal}>
-        <h2 style={title}>Sign in</h2>
-        <p style={subtitle}>Welcome back — enter your credentials.</p>
-
-        <form onSubmit={submit} style={{ width: '100%' }}>
-          <label style={label}>Email</label>
-          <input
-            style={input}
-            value={email}
-            onChange={e => setEmail(e.target.value)}
-            type="email"
-            required
-          />
-
-          <label style={label}>Password</label>
-          <input
-            style={input}
-            type="password"
-            value={password}
-            onChange={e => setPassword(e.target.value)}
-            required
-          />
-
-          <div style={{ marginTop: 12 }}>
-            <button style={button} type="submit" disabled={loading}>
-              {loading ? 'Signing in…' : 'Sign in'}
-            </button>
-          </div>
-
-          <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
-            <button type="button" onClick={handleGoogle} style={oauthButtonGoogle} disabled={loading || loadingOauth.google}>
-              <svg width={18} style={{ marginRight: 8 }} viewBox="-3 0 262 262" xmlns="http://www.w3.org/2000/svg" fill="#000000" aria-hidden>
-                <path d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027" fill="#4285F4"></path>
-                <path d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1" fill="#34A853"></path>
-                <path d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782" fill="#FBBC05"></path>
-                <path d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251" fill="#EB4335"></path>
-              </svg>
-              <span>{loadingOauth.google ? 'Loading...' : 'Google'}</span>
-            </button>
-
-            <button type="button" onClick={handleGithub} style={oauthButtonGithub} disabled={loading || loadingOauth.github}>
-              <svg width={18} style={{ marginRight: 8 }} xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 20 20" aria-hidden>
-                <path fillRule="evenodd" d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z" clipRule="evenodd" />
-              </svg>
-              <span>{loadingOauth.github ? 'Loading...' : 'GitHub'}</span>
-            </button>
+    <>
+      <ToastContainer
+        position="top-right"
+        newestOnTop
+        autoClose={3000}
+        hideProgressBar={false}
+        closeOnClick
+        pauseOnHover
+        draggable
+        theme="dark"
+      />
+
+      <div style={page}>
+        <div style={cardWrap}>
+          <div style={card}>
+            <div style={cardInner}>
+              <div style={brand}>
+                <div style={brandRow}>
+                  <div style={logoWrap}>
+                    <Image src={agency.logo} width={30} height={30} alt={agency.name} style={logoImgStyle} />
+                  </div>
+                  <h1 style={brandTitle}>{agency.name}</h1>
+                </div>
+                <div style={brandText}>
+                  <div style={brandLead}>Sign in to {agency.name}</div>
+                  <div style={brandSub}>Welcome back! Let's get you signed in.</div>
+                </div>
+              </div>
+
+              <div style={oauthRow}>
+                <button
+                  onClick={handleGoogle}
+                  type="button"
+                  style={{ ...oauthButton, ...oauthGoogle }}
+                  disabled={loading || loadingOauth.google}
+                  aria-disabled={loading || loadingOauth.google}
+                >
+                  <svg width={18} style={{ marginRight: 10 }} viewBox="-3 0 262 262" xmlns="http://www.w3.org/2000/svg" fill="#000000" aria-hidden>
+                    <path d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027" fill="#4285F4"></path>
+                    <path d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1" fill="#34A853"></path>
+                    <path d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782" fill="#FBBC05"></path>
+                    <path d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251" fill="#EB4335"></path>
+                  </svg>
+                  <span>{loadingOauth.google ? 'Loading...' : 'Google'}</span>
+                </button>
+
+                <button
+                  onClick={handleGithub}
+                  type="button"
+                  style={{ ...oauthButton, ...oauthGithub }}
+                  disabled={loading || loadingOauth.github}
+                  aria-disabled={loading || loadingOauth.github}
+                >
+                  <svg width={18} style={{ marginRight: 10 }} xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 20 20" aria-hidden>
+                    <path fillRule="evenodd" d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z" clipRule="evenodd" />
+                  </svg>
+                  <span>{loadingOauth.github ? 'Loading...' : 'Github'}</span>
+                </button>
+              </div>
+
+              <div style={dividerRow}>
+                <div style={line} />
+                <div style={orText}>or</div>
+                <div style={line} />
+              </div>
+
+              <form onSubmit={submit} style={form}>
+                <label style={label}>
+                  <span style={labelSmall}>Email address</span>
+                  <input
+                    id="email"
+                    type="email"
+                    onChange={handleChange}
+                    value={form.email}
+                    required
+                    placeholder="you@example.com"
+                    style={input}
+                  />
+                </label>
+
+                <label style={label}>
+                  <span style={labelSmall}>Password</span>
+                  <input
+                    id="password"
+                    type="password"
+                    onChange={handleChange}
+                    value={form.password}
+                    required
+                    placeholder="••••••••"
+                    style={input}
+                  />
+                </label>
+
+                <button
+                  type="submit"
+                  style={submitBtn}
+                  aria-disabled={loading}
+                  disabled={loading}
+                >
+                  {loading ? 'Signing in...' : 'Sign In'}
+                </button>
+              </form>
+            </div>
+
+            <div style={cardFooter}>
+              <div style={smallText}>
+                <span style={muted}>Don't have an account? </span>
+                <Link href="/signup" style={link}>Create one</Link>
+              </div>
+
+              <div style={thinDivider} />
+
+              <div style={{ textAlign: 'center', marginTop: 8 }}>
+                <div style={securedText}>Secured by auth</div>
+              </div>
+            </div>
           </div>
-        </form>
+        </div>
       </div>
-    </div>
+    </>
   )
 }
 
-/* styles */
-const overlay = {
-  position: 'fixed',
-  inset: 0,
-  display: 'block', // allow page scroll
-  padding: 20,
-  background: 'linear-gradient(180deg, rgba(2,6,23,0.22), rgba(2,6,23,0.32))',
-  backdropFilter: 'blur(6px)',
-  overflowY: 'auto',
-  WebkitOverflowScrolling: 'touch',
+/* ---------- styles (JS objects) to match the provided UI exactly ---------- */
+
+const page = {
   minHeight: '100vh',
-  zIndex: 9999
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: '24px',
+  background: 'linear-gradient(to bottom, #0f1724, #0b1220 40%, #02040a 100%)',
+  color: '#fef3c7'
 }
 
-const modal = {
+const cardWrap = {
   width: '100%',
-  maxWidth: 460,
-  margin: '40px auto',
-  borderRadius: 14,
-  background: 'linear-gradient(180deg, rgba(15,19,24,0.85), rgba(10,12,16,0.85))',
-  border: '1px solid rgba(99,102,106,0.12)',
-  boxShadow: '0 18px 48px rgba(2,6,23,0.55), inset 0 1px 0 rgba(255,255,255,0.02)',
-  padding: 22,
-  color: '#fff'
+  maxWidth: 420
 }
 
-const title = { margin: 0, fontSize: 20, fontWeight: 600 }
-const subtitle = { marginTop: 6, marginBottom: 14, color: '#cbd5e1', fontSize: 13 }
-const label = { display: 'block', color: '#cbd5e1', fontSize: 13, marginTop: 8 }
-const input = {
-  width: '100%',
-  padding: '10px 12px',
-  marginTop: 6,
-  borderRadius: 10,
-  border: '1px solid rgba(148,163,184,0.10)',
-  background: 'rgba(255,255,255,0.02)',
-  color: '#e6e6e6',
-  boxSizing: 'border-box'
-}
-const button = {
+const card = {
   width: '100%',
-  padding: '10px 12px',
-  borderRadius: 10,
-  background: 'linear-gradient(90deg,#06b6d4,#2563eb)',
-  color: '#0b1220',
-  border: 'none',
-  fontWeight: 700,
-  cursor: 'pointer'
+  borderRadius: 20,
+  background: 'linear-gradient(180deg, rgba(15,17,20,0.88), rgba(6,8,12,0.92))',
+  border: '1px solid rgba(148,163,184,0.06)',
+  backdropFilter: 'blur(8px)',
+  boxShadow: '0 18px 50px rgba(2,6,23,0.6)',
+  overflow: 'hidden',
+  display: 'flex',
+  flexDirection: 'column'
 }
-const oauthButtonGoogle = {
-  flex: 1,
-  padding: '10px 12px',
-  borderRadius: 10,
-  background: 'linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01))',
-  color: '#fff',
-  border: '1px solid rgba(148,163,184,0.08)',
-  cursor: 'pointer',
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  gap: 8
+
+const cardInner = {
+  padding: '28px',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 14,
+  background: 'linear-gradient(180deg, rgba(12,14,18,0.02), rgba(0,0,0,0.02))',
+  borderRadius: '20px'
 }
-const oauthButtonGithub = {
-  flex: 1,
-  padding: '10px 12px',
-  borderRadius: 10,
-  background: 'linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00))',
-  color: '#fff',
-  border: '1px solid rgba(148,163,184,0.08)',
-  cursor: 'pointer',
-  display: 'inline-flex',
+
+const brand = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 8,
   alignItems: 'center',
-  justifyContent: 'center',
-  gap: 8
+  textAlign: 'center'
 }
 
-/* Toast styles (black) */
-const toastContainer = {
-  position: 'fixed',
-  top: 18,
-  right: 18,
-  width: 360,
-  maxWidth: 'calc(100% - 36px)',
+const brandRow = {
   display: 'flex',
-  flexDirection: 'column',
+  alignItems: 'center',
   gap: 10,
-  zIndex: 60000
+  justifyContent: 'center'
 }
 
-const toastBase = {
+const logoWrap = {
+  width: 30,
+  height: 30,
+  borderRadius: 999,
+  overflow: 'hidden',
   display: 'flex',
-  gap: 10,
   alignItems: 'center',
-  padding: '10px 12px',
-  borderRadius: 10,
-  boxShadow: '0 8px 20px rgba(2,6,23,0.6)',
-  color: '#fff',
-  fontSize: 13,
-  minWidth: 120
+  justifyContent: 'center',
+  background: 'linear-gradient(135deg,#2b313a,#0f1724)'
 }
 
-const toastError = { background: '#000', border: '1px solid rgba(255,255,255,0.06)' }
-const toastSuccess = { background: '#000', border: '1px solid rgba(255,255,255,0.06)' }
-const toastInfo = { background: '#000', border: '1px solid rgba(255,255,255,0.06)' }
+const logoImgStyle = { borderRadius: 999, objectFit: 'cover' }
 
-const toastCloseBtn = {
-  marginLeft: 8,
+const brandTitle = { margin: 0, fontSize: 20, fontWeight: 500, color: '#fff' }
+const brandLead = { fontSize: 15, color: '#f8fafc' }
+const brandSub = { fontSize: 13, color: 'rgba(255,255,255,0.7)', marginTop: 2 }
+const brandText = { display: 'flex', flexDirection: 'column', gap: 2, alignItems: 'center' }
+
+const oauthRow = { display: 'flex', gap: 10, marginTop: 10 }
+
+const oauthButton = {
+  flex: 1,
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: '10px 12px',
+  borderRadius: 12,
+  border: '1px solid rgba(148,163,184,0.06)',
+  fontSize: 14,
+  cursor: 'pointer',
+  userSelect: 'none',
+  gap: 8,
+  minHeight: 40,
   background: 'transparent',
+  color: '#fff'
+}
+
+const oauthGoogle = { background: 'rgba(255,255,255,0.02)' }
+const oauthGithub = { background: 'rgba(255,255,255,0.01)' }
+
+const dividerRow = { display: 'flex', alignItems: 'center', gap: 12, marginTop: 14 }
+const line = { flex: 1, height: 1, background: 'rgba(148,163,184,0.04)' }
+const orText = { fontSize: 13, color: 'rgba(255,255,255,0.65)', padding: '0 8px' }
+
+const form = { display: 'flex', flexDirection: 'column', gap: 12, width: '100%', marginTop: 4 }
+const label = { display: 'flex', flexDirection: 'column', gap: 6 }
+const labelSmall = { fontSize: 13, color: 'rgba(255,255,255,0.75)' }
+
+const input = {
+  width: '100%',
+  padding: '10px 12px',
+  borderRadius: 12,
+  background: 'rgba(255,255,255,0.02)',
+  color: '#fef3c7',
+  border: '1px solid rgba(148,163,184,0.06)',
+  fontSize: 14,
+  outline: 'none',
+  boxSizing: 'border-box'
+}
+
+const submitBtn = {
+  marginTop: 6,
+  width: '100%',
+  padding: '10px 12px',
+  borderRadius: 12,
+  background: 'linear-gradient(180deg,#2563eb,#60a5fa)',
   border: 'none',
-  color: 'rgba(255,255,255,0.7)',
+  color: '#fff',
+  fontWeight: 600,
   cursor: 'pointer',
-  fontSize: 14,
-  lineHeight: 1
+  fontSize: 15,
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minHeight: 44
 }
+
+const cardFooter = {
+  padding: '18px',
+  borderTop: '1px solid rgba(148,163,184,0.03)',
+  background: 'transparent'
+}
+
+const smallText = { textAlign: 'center', fontSize: 13 }
+const muted = { color: 'rgba(255,255,255,0.75)' }
+const link = { color: '#60a5fa', textDecoration: 'none', fontWeight: 600 }
+const thinDivider = { height: 1, background: 'rgba(148,163,184,0.04)', margin: '12px 0' }
+const securedText = { color: 'rgba(255,255,255,0.9)', fontWeight: 600 }