flowlink-auth 2.8.0 → 2.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/SignUp.js CHANGED
@@ -22,15 +22,24 @@ function SignUp({ agency = { name: "MyApp", logo: "" } }) {
22
22
  const toastId = useRef(0);
23
23
  const [toasts, setToasts] = useState([]);
24
24
  useEffect(() => {
25
+ const meta = document.createElement("meta");
26
+ meta.name = "viewport";
27
+ meta.content = "width=device-width, initial-scale=1, maximum-scale=1";
28
+ document.head.appendChild(meta);
25
29
  return () => {
26
30
  if (redirectTimer.current) clearTimeout(redirectTimer.current);
27
- toasts.forEach((t) => clearTimeout(t._timer));
31
+ const existing = document.querySelector('meta[name="viewport"]');
32
+ if (existing && existing.content === meta.content) {
33
+ document.head.removeChild(existing);
34
+ }
35
+ toasts.forEach((t) => {
36
+ if (t._timer) clearTimeout(t._timer);
37
+ });
28
38
  };
29
39
  }, []);
30
40
  function showToast(type, message, ms = 5e3) {
31
41
  const id = ++toastId.current;
32
- const created = Date.now();
33
- const t = { id, type, message, created, _timer: null };
42
+ const t = { id, type, message, _timer: null };
34
43
  setToasts((prev) => {
35
44
  const next = [t, ...prev].slice(0, 6);
36
45
  return next;
@@ -43,7 +52,7 @@ function SignUp({ agency = { name: "MyApp", logo: "" } }) {
43
52
  function removeToast(id) {
44
53
  setToasts((prev) => {
45
54
  prev.forEach((t) => {
46
- if (t.id === id) clearTimeout(t._timer);
55
+ if (t.id === id && t._timer) clearTimeout(t._timer);
47
56
  });
48
57
  return prev.filter((x) => x.id !== id);
49
58
  });
@@ -142,7 +151,7 @@ function SignUp({ agency = { name: "MyApp", logo: "" } }) {
142
151
  if (e && typeof e.preventDefault === "function") e.preventDefault();
143
152
  startOAuthFlow("github");
144
153
  };
145
- return /* @__PURE__ */ React.createElement("div", { style: overlay }, /* @__PURE__ */ React.createElement("div", { style: toastContainer }, toasts.map((t) => /* @__PURE__ */ React.createElement(
154
+ 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(
146
155
  "div",
147
156
  {
148
157
  key: t.id,
@@ -153,7 +162,7 @@ function SignUp({ agency = { name: "MyApp", logo: "" } }) {
153
162
  ...t.type === "error" ? toastError : t.type === "success" ? toastSuccess : toastInfo
154
163
  },
155
164
  onMouseEnter: () => {
156
- clearTimeout(t._timer);
165
+ if (t._timer) clearTimeout(t._timer);
157
166
  },
158
167
  onMouseLeave: () => {
159
168
  const timer = setTimeout(() => removeToast(t.id), 3e3);
@@ -233,34 +242,36 @@ function SignUp({ agency = { name: "MyApp", logo: "" } }) {
233
242
  const overlay = {
234
243
  position: "fixed",
235
244
  inset: 0,
236
- display: "flex",
237
- alignItems: "center",
238
- justifyContent: "center",
245
+ display: "block",
246
+ // page scroll model
239
247
  padding: 20,
240
248
  background: "linear-gradient(180deg, rgba(2,6,23,0.22), rgba(2,6,23,0.32))",
241
249
  backdropFilter: "blur(6px)",
250
+ overflowY: "auto",
251
+ WebkitOverflowScrolling: "touch",
242
252
  minHeight: "100vh",
243
253
  zIndex: 9999
244
254
  };
245
255
  const modal = {
246
256
  width: "100%",
247
- maxWidth: 560,
257
+ maxWidth: 460,
258
+ // reduced width per request
259
+ margin: "40px auto",
248
260
  borderRadius: 14,
249
261
  background: "linear-gradient(180deg, rgba(15,19,24,0.6), rgba(10,12,16,0.6))",
250
- // translucent neutral so background peeks through
251
262
  border: "1px solid rgba(99,102,106,0.12)",
252
- // slightly stronger neutral border
253
263
  boxShadow: "0 20px 50px rgba(2,6,23,0.55), inset 0 1px 0 rgba(255,255,255,0.02)",
254
264
  overflow: "hidden",
255
265
  display: "flex",
256
266
  flexDirection: "column",
257
- transform: "translateY(-6px)"
267
+ maxHeight: "calc(100vh - 80px)"
258
268
  };
259
269
  const modalInner = {
260
270
  padding: 18,
261
271
  display: "flex",
262
272
  flexDirection: "column",
263
- gap: 12
273
+ gap: 12,
274
+ overflowY: "auto"
264
275
  };
265
276
  const header = {
266
277
  paddingBottom: 6,