@create-flow/auth-ui 0.0.1 → 0.0.4

package/dist/index.modern.js

@@ -1,13 +1,893 @@
-import { createElement } from 'react';
-
-var styles = {"test":"_3mAYe"};
+"use client";
+import React__default, { createElement, useState, useRef, useEffect } from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 
+var helloStyle = {
+  margin: '2em',
+  padding: '0.5em',
+  border: '2px solid #000',
+  fontSize: '2em',
+  textAlign: 'center'
+};
 var Hello = function Hello(_ref) {
   var text = _ref.text;
   return createElement("div", {
-    className: styles.test
+    style: helloStyle
   }, "Hello, ", text);
 };
 
-export { Hello };
+var _iteratorSymbol = /*#__PURE__*/typeof Symbol !== "undefined" ? Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator")) : "@@iterator";
+var _asyncIteratorSymbol = /*#__PURE__*/typeof Symbol !== "undefined" ? Symbol.asyncIterator || (Symbol.asyncIterator = Symbol("Symbol.asyncIterator")) : "@@asyncIterator";
+function _catch(body, recover) {
+  try {
+    var result = body();
+  } catch (e) {
+    return recover(e);
+  }
+  if (result && result.then) {
+    return result.then(void 0, recover);
+  }
+  return result;
+}
+function _finallyRethrows(body, finalizer) {
+  try {
+    var result = body();
+  } catch (e) {
+    return finalizer(true, e);
+  }
+  if (result && result.then) {
+    return result.then(finalizer.bind(null, false), finalizer.bind(null, true));
+  }
+  return finalizer(false, result);
+}
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+
+var _process$env$NEXT_PUB2, _process$env$NEXT_PUB3;
+var getAuthJson = function getAuthJson(path, host, query) {
+  try {
+    var url = buildAuthUrl(path, host, query);
+    return fetchWithCredentials(url, {
+      method: 'GET'
+    });
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+var postAuthJson = function postAuthJson(path, body, host) {
+  try {
+    var url = buildAuthUrl(path, host);
+    return fetchWithCredentials(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(body)
+    });
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+var fetchWithCredentials = function fetchWithCredentials(url, init) {
+  if (init === void 0) {
+    init = {};
+  }
+  try {
+    return Promise.resolve(fetch(url.toString(), _extends({
+      credentials: 'include',
+      cache: 'no-store'
+    }, init))).then(function (response) {
+      function _temp2() {
+        return {
+          response: response,
+          data: data
+        };
+      }
+      var data = null;
+      var _temp = _catch(function () {
+        return Promise.resolve(response.json()).then(function (_response$json) {
+          data = _response$json;
+        });
+      }, function () {});
+      return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
+    });
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+var DEFAULT_AUTH_HOST = function (_process$env$NEXT_PUB) {
+  var envHost = (_process$env$NEXT_PUB = process.env.NEXT_PUBLIC_AUTH_API_HOST) === null || _process$env$NEXT_PUB === void 0 ? void 0 : _process$env$NEXT_PUB.trim();
+  if (envHost && envHost.length > 0) {
+    return envHost;
+  }
+  return 'https://auth.create-flow.ai';
+}();
+var DEFAULT_APP_ID = (_process$env$NEXT_PUB2 = (_process$env$NEXT_PUB3 = process.env.NEXT_PUBLIC_AUTH_APP_ID) === null || _process$env$NEXT_PUB3 === void 0 ? void 0 : _process$env$NEXT_PUB3.trim()) != null ? _process$env$NEXT_PUB2 : '';
+function normalizeHost(host) {
+  var value = (host != null ? host : DEFAULT_AUTH_HOST).trim();
+  if (!value) {
+    throw new Error('Auth host is not configured');
+  }
+  if (/^https?:\/\//i.test(value)) {
+    return value.replace(/\/+$/g, '');
+  }
+  return ("https://" + value).replace(/\/+$/g, '');
+}
+function buildAuthUrl(path, host, query) {
+  var normalizedHost = normalizeHost(host);
+  var normalizedPath = path.startsWith('/') ? path : "/" + path;
+  var url = new URL(normalizedPath, normalizedHost);
+  if (query) {
+    for (var _i = 0, _Object$entries = Object.entries(query); _i < _Object$entries.length; _i++) {
+      var _Object$entries$_i = _Object$entries[_i],
+        key = _Object$entries$_i[0],
+        value = _Object$entries$_i[1];
+      if (value !== undefined && value !== null) {
+        url.searchParams.set(key, value);
+      }
+    }
+  }
+  return url;
+}
+function getResolvedAppId(appId) {
+  return (appId != null ? appId : DEFAULT_APP_ID).trim();
+}
+
+var DEFAULT_PROVIDERS = ['google', 'github'];
+function GoogleIcon() {
+  return createElement("svg", {
+    viewBox: "0 0 24 24",
+    className: 'h-4 w-4',
+    "aria-hidden": 'true'
+  }, createElement("path", {
+    d: 'M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z',
+    fill: '#4285F4'
+  }), createElement("path", {
+    d: 'M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z',
+    fill: '#34A853'
+  }), createElement("path", {
+    d: 'M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z',
+    fill: '#FBBC05'
+  }), createElement("path", {
+    d: 'M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z',
+    fill: '#EA4335'
+  }));
+}
+function GitHubIcon() {
+  return createElement("svg", {
+    role: 'img',
+    viewBox: '0 0 24 24',
+    className: 'h-4 w-4',
+    "aria-hidden": 'true',
+    fill: 'currentColor'
+  }, createElement("path", {
+    d: 'M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.93.58.11.79-.25.79-.56 0-.28-.01-1.02-.02-2-3.2.7-3.87-1.53-3.87-1.53-.53-1.35-1.3-1.71-1.3-1.71-1.06-.73.08-.72.08-.72 1.17.08 1.78 1.2 1.78 1.2 1.04 1.78 2.72 1.27 3.38.97.11-.75.41-1.27.74-1.56-2.56-.29-5.25-1.28-5.25-5.69 0-1.26.45-2.29 1.2-3.09-.12-.29-.52-1.47.11-3.06 0 0 .97-.31 3.18 1.18.92-.26 1.9-.39 2.88-.39.98 0 1.96.13 2.88.39 2.2-1.49 3.18-1.18 3.18-1.18.63 1.59.23 2.77.11 3.06.75.8 1.2 1.83 1.2 3.09 0 4.42-2.69 5.39-5.26 5.68.42.36.79 1.09.79 2.2 0 1.59-.01 2.87-.01 3.26 0 .31.21.68.8.56C20.71 21.39 24 17.08 24 12c0-6.35-5.15-11.5-11.5-11.5z'
+  }));
+}
+function OAuthButtons(_ref) {
+  var appId = _ref.appId,
+    authHost = _ref.authHost,
+    _ref$redirectTo = _ref.redirectTo,
+    redirectTo = _ref$redirectTo === void 0 ? '/dashboard' : _ref$redirectTo,
+    providers = _ref.providers,
+    className = _ref.className;
+  var _React$useState = useState(null),
+    loadingProvider = _React$useState[0],
+    setLoadingProvider = _React$useState[1];
+  var resolvedAppId = getResolvedAppId(appId);
+  var providerList = providers && providers.length > 0 ? providers : DEFAULT_PROVIDERS;
+  if (!resolvedAppId || providerList.length === 0) {
+    return null;
+  }
+  function buildRedirectUrl(provider) {
+    var url = buildAuthUrl('api/auth/oauth', authHost, {
+      provider: provider,
+      appId: resolvedAppId,
+      redirectTo: redirectTo
+    });
+    return url.toString();
+  }
+  function handleOAuth(provider) {
+    setLoadingProvider(provider);
+    window.location.assign(buildRedirectUrl(provider));
+  }
+  return createElement("div", {
+    className: className != null ? className : 'space-y-3'
+  }, createElement("div", {
+    className: 'relative'
+  }, createElement("div", {
+    className: 'absolute inset-0 flex items-center'
+  }, createElement("div", {
+    className: 'w-full border-t border-zinc-200 dark:border-zinc-700'
+  })), createElement("div", {
+    className: 'relative flex justify-center text-xs'
+  }, createElement("span", {
+    className: 'bg-white dark:bg-zinc-900 px-3 text-zinc-400'
+  }, "or continue with"))), createElement("div", {
+    className: 'grid gap-2',
+    style: {
+      gridTemplateColumns: providerList.length > 1 ? 'repeat(2, minmax(0, 1fr))' : '1fr'
+    }
+  }, providerList.map(function (provider) {
+    return createElement("button", {
+      key: provider,
+      type: 'button',
+      onClick: function onClick() {
+        return handleOAuth(provider);
+      },
+      disabled: loadingProvider !== null,
+      className: 'flex items-center justify-center gap-2 rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-4 py-2.5 text-sm font-medium text-zinc-700 dark:text-zinc-300 transition hover:bg-zinc-50 dark:hover:bg-zinc-700 disabled:opacity-50 disabled:cursor-not-allowed'
+    }, loadingProvider === provider ? createElement("span", {
+      className: 'h-4 w-4 animate-spin rounded-full border-2 border-zinc-300 border-t-zinc-600'
+    }) : provider === 'github' ? createElement(GitHubIcon, null) : createElement(GoogleIcon, null), provider === 'github' ? 'GitHub' : 'Google');
+  })));
+}
+
+var defaultRedirect = '/dashboard';
+var getLoginError = function getLoginError(status) {
+  switch (status) {
+    case 'invalid_data':
+      return 'Please provide a valid email and password.';
+    case 'failed':
+    default:
+      return 'Invalid email or password.';
+  }
+};
+var Login = function Login(_ref) {
+  var handleSubmit = function handleSubmit(e) {
+    try {
+      e.preventDefault();
+      setError('');
+      setIsLoading(true);
+      var resolvedAppId = getResolvedAppId(appId);
+      if (!resolvedAppId) {
+        setError('Missing appId configuration for login.');
+        setIsLoading(false);
+        return Promise.resolve();
+      }
+      return Promise.resolve(_finallyRethrows(function () {
+        return _catch(function () {
+          return Promise.resolve(postAuthJson('api/auth/login', {
+            email: email,
+            password: password,
+            appId: resolvedAppId
+          }, authHost)).then(function (_ref2) {
+            var response = _ref2.response,
+              data = _ref2.data;
+            if (!response.ok) {
+              setError(getLoginError(data === null || data === void 0 ? void 0 : data.status));
+              return;
+            }
+            if (onSuccess) {
+              onSuccess();
+            } else {
+              router.push(redirectTo);
+              router.refresh();
+            }
+          });
+        }, function (err) {
+          console.error(err);
+          setError('Something went wrong. Please try again.');
+        });
+      }, function (_wasThrown, _result) {
+        setIsLoading(false);
+        if (_wasThrown) throw _result;
+        return _result;
+      }));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var appId = _ref.appId,
+    authHost = _ref.authHost,
+    _ref$redirectTo = _ref.redirectTo,
+    redirectTo = _ref$redirectTo === void 0 ? defaultRedirect : _ref$redirectTo,
+    onSuccess = _ref.onSuccess;
+  var router = useRouter();
+  var _useState = useState(''),
+    email = _useState[0],
+    setEmail = _useState[1];
+  var _useState2 = useState(''),
+    password = _useState2[0],
+    setPassword = _useState2[1];
+  var _useState3 = useState(''),
+    error = _useState3[0],
+    setError = _useState3[1];
+  var _useState4 = useState(false),
+    isLoading = _useState4[0],
+    setIsLoading = _useState4[1];
+  return React__default.createElement("div", {
+    className: 'w-full max-w-sm'
+  }, React__default.createElement("div", {
+    className: 'bg-white dark:bg-zinc-900 rounded-2xl shadow-xl border border-zinc-200 dark:border-zinc-800 p-8'
+  }, React__default.createElement("div", {
+    className: 'mb-8'
+  }, React__default.createElement("div", {
+    className: 'w-9 h-9 rounded-xl bg-zinc-100 dark:bg-zinc-900 mb-5 flex items-center justify-center'
+  }, React__default.createElement("span", {
+    className: 'text-zinc-900 dark:text-white font-bold text-sm'
+  }, "W")), React__default.createElement("h1", {
+    className: 'text-2xl font-semibold text-zinc-900 dark:text-white tracking-tight'
+  }, "Welcome back"), React__default.createElement("p", {
+    className: 'text-zinc-500 dark:text-zinc-400 text-sm mt-1'
+  }, "Sign in to your account")), React__default.createElement("form", {
+    onSubmit: handleSubmit,
+    className: 'space-y-4'
+  }, React__default.createElement("div", null, React__default.createElement("label", {
+    className: 'block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5'
+  }, "Email"), React__default.createElement("input", {
+    type: 'email',
+    value: email,
+    onChange: function onChange(e) {
+      return setEmail(e.target.value);
+    },
+    placeholder: 'you@example.com',
+    required: true,
+    autoComplete: 'email',
+    className: 'w-full px-3 py-2 rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-zinc-900 dark:focus:ring-zinc-300 focus:border-transparent text-sm transition-colors'
+  })), React__default.createElement("div", null, React__default.createElement("label", {
+    className: 'block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5'
+  }, "Password"), React__default.createElement("input", {
+    type: 'password',
+    value: password,
+    onChange: function onChange(e) {
+      return setPassword(e.target.value);
+    },
+    placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022",
+    required: true,
+    autoComplete: 'current-password',
+    className: 'w-full px-3 py-2 rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-zinc-900 dark:focus:ring-zinc-300 focus:border-transparent text-sm transition-colors'
+  })), error && React__default.createElement("p", {
+    className: 'text-sm text-red-500 dark:text-red-400 bg-red-50 dark:bg-red-950/20 px-3 py-2 rounded-lg'
+  }, error), React__default.createElement("button", {
+    type: 'submit',
+    disabled: isLoading,
+    className: 'w-full py-2.5 px-4 bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 rounded-lg text-sm font-medium hover:bg-zinc-700 dark:hover:bg-zinc-100 focus:outline-none focus:ring-2 focus:ring-zinc-900 dark:focus:ring-zinc-300 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors'
+  }, isLoading ? 'Signing in…' : 'Sign in')), React__default.createElement("div", {
+    className: 'mt-4'
+  }, React__default.createElement(OAuthButtons, {
+    appId: appId,
+    authHost: authHost,
+    redirectTo: redirectTo
+  })), React__default.createElement("p", {
+    className: 'mt-6 text-center text-sm text-zinc-500 dark:text-zinc-400'
+  }, "Don't have an account?", ' ', React__default.createElement(Link, {
+    href: '/signup',
+    className: 'font-medium text-zinc-900 dark:text-white hover:underline underline-offset-4'
+  }, "Sign up"))));
+};
+
+var defaultError = 'Something went wrong. Please try again.';
+var statusMessage = function statusMessage(status) {
+  switch (status) {
+    case 'invalid_data':
+      return 'Please fill out all required fields.';
+    case 'user_exists':
+      return 'An account with that email already exists.';
+    case 'sign_up_disabled':
+      return 'Sign ups are disabled for this app.';
+    case 'app_not_found':
+      return 'We could not find the app configuration.';
+    default:
+      return defaultError;
+  }
+};
+var Signup = function Signup(_ref) {
+  var handleSubmit = function handleSubmit(e) {
+    try {
+      e.preventDefault();
+      setError('');
+      setIsLoading(true);
+      var resolvedAppId = getResolvedAppId(appId);
+      if (!resolvedAppId) {
+        setError('Missing appId configuration for sign up.');
+        setIsLoading(false);
+        return Promise.resolve();
+      }
+      return Promise.resolve(_finallyRethrows(function () {
+        return _catch(function () {
+          return Promise.resolve(postAuthJson('api/auth/register', {
+            name: name,
+            email: email,
+            password: password,
+            appId: resolvedAppId
+          }, authHost)).then(function (_ref2) {
+            var response = _ref2.response,
+              data = _ref2.data;
+            if (!response.ok) {
+              setError(statusMessage(data === null || data === void 0 ? void 0 : data.status));
+              return;
+            }
+            setRegistered(true);
+            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
+          });
+        }, function (err) {
+          console.error(err);
+          setError(defaultError);
+        });
+      }, function (_wasThrown, _result) {
+        setIsLoading(false);
+        if (_wasThrown) throw _result;
+        return _result;
+      }));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var appId = _ref.appId,
+    authHost = _ref.authHost,
+    onSuccess = _ref.onSuccess;
+  var _useState = useState(''),
+    name = _useState[0],
+    setName = _useState[1];
+  var _useState2 = useState(''),
+    email = _useState2[0],
+    setEmail = _useState2[1];
+  var _useState3 = useState(''),
+    password = _useState3[0],
+    setPassword = _useState3[1];
+  var _useState4 = useState(''),
+    error = _useState4[0],
+    setError = _useState4[1];
+  var _useState5 = useState(false),
+    isLoading = _useState5[0],
+    setIsLoading = _useState5[1];
+  var _useState6 = useState(false),
+    registered = _useState6[0],
+    setRegistered = _useState6[1];
+  if (registered) {
+    return React__default.createElement("div", {
+      className: 'w-full max-w-sm'
+    }, React__default.createElement("div", {
+      className: 'bg-white dark:bg-zinc-900 rounded-2xl shadow-xl border border-zinc-200 dark:border-zinc-800 p-8 text-center'
+    }, React__default.createElement("div", {
+      className: 'flex justify-center mb-5'
+    }, React__default.createElement("div", {
+      className: 'w-14 h-14 rounded-2xl bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center text-2xl'
+    }, "\u2709\uFE0F")), React__default.createElement("h1", {
+      className: 'text-xl font-semibold text-zinc-900 dark:text-white tracking-tight mb-2'
+    }, "Check your email"), React__default.createElement("p", {
+      className: 'text-zinc-500 dark:text-zinc-400 text-sm leading-relaxed mb-6'
+    }, "We sent a verification link to", ' ', React__default.createElement("span", {
+      className: 'font-medium text-zinc-700 dark:text-zinc-300'
+    }, email), ". Click it to activate your account."), React__default.createElement("p", {
+      className: 'text-xs text-zinc-400'
+    }, "Already verified?", ' ', React__default.createElement(Link, {
+      href: '/login',
+      className: 'text-zinc-600 dark:text-zinc-300 underline underline-offset-2 hover:text-zinc-900 dark:hover:text-white'
+    }, "Sign in"))));
+  }
+  return React__default.createElement("div", {
+    className: 'w-full max-w-sm'
+  }, React__default.createElement("div", {
+    className: 'bg-white dark:bg-zinc-900 rounded-2xl shadow-xl border border-zinc-200 dark:border-zinc-800 p-8'
+  }, React__default.createElement("div", {
+    className: 'mb-8'
+  }, React__default.createElement("h1", {
+    className: 'text-2xl font-semibold text-zinc-900 dark:text-white tracking-tight'
+  }, "Create an account"), React__default.createElement("p", {
+    className: 'text-zinc-500 dark:text-zinc-400 text-sm mt-1'
+  }, "Get started for free today")), React__default.createElement("form", {
+    onSubmit: handleSubmit,
+    className: 'space-y-4'
+  }, React__default.createElement("div", null, React__default.createElement("label", {
+    className: 'block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5'
+  }, "Name"), React__default.createElement("input", {
+    type: 'text',
+    value: name,
+    onChange: function onChange(e) {
+      return setName(e.target.value);
+    },
+    placeholder: 'Jane Smith',
+    autoComplete: 'name',
+    className: 'w-full px-3 py-2 rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-zinc-900 dark:focus:ring-zinc-300 focus:border-transparent text-sm transition-colors'
+  })), React__default.createElement("div", null, React__default.createElement("label", {
+    className: 'block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5'
+  }, "Email"), React__default.createElement("input", {
+    type: 'email',
+    value: email,
+    onChange: function onChange(e) {
+      return setEmail(e.target.value);
+    },
+    placeholder: 'you@example.com',
+    required: true,
+    autoComplete: 'email',
+    className: 'w-full px-3 py-2 rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-zinc-900 dark:focus:ring-zinc-300 focus:border-transparent text-sm transition-colors'
+  })), React__default.createElement("div", null, React__default.createElement("label", {
+    className: 'block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5'
+  }, "Password"), React__default.createElement("input", {
+    type: 'password',
+    value: password,
+    onChange: function onChange(e) {
+      return setPassword(e.target.value);
+    },
+    placeholder: 'Min. 6 characters',
+    required: true,
+    autoComplete: 'new-password',
+    className: 'w-full px-3 py-2 rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-zinc-900 dark:focus:ring-zinc-300 focus:border-transparent text-sm transition-colors'
+  })), error && React__default.createElement("p", {
+    className: 'text-sm text-red-500 dark:text-red-400 bg-red-50 dark:bg-red-950/20 px-3 py-2 rounded-lg'
+  }, error), React__default.createElement("button", {
+    type: 'submit',
+    disabled: isLoading,
+    className: 'w-full py-2.5 px-4 bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 rounded-lg text-sm font-medium hover:bg-zinc-700 dark:hover:bg-zinc-100 focus:outline-none focus:ring-2 focus:ring-zinc-900 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors'
+  }, isLoading ? 'Creating account…' : 'Create account')), React__default.createElement("div", {
+    className: 'mt-4'
+  }, React__default.createElement(OAuthButtons, {
+    appId: appId,
+    authHost: authHost
+  })), React__default.createElement("p", {
+    className: 'mt-6 text-center text-sm text-zinc-500 dark:text-zinc-400'
+  }, "Already have an account?", ' ', React__default.createElement(Link, {
+    href: '/login',
+    className: 'font-medium text-zinc-900 dark:text-white hover:underline underline-offset-4'
+  }, "Sign in"))));
+};
+
+var VerifyEmail = function VerifyEmail(_ref) {
+  var searchParams = _ref.searchParams,
+    appId = _ref.appId,
+    authHost = _ref.authHost;
+  return Promise.resolve(searchParams).then(function (_ref2) {
+    var _exit = false;
+    var token = _ref2.token;
+    function _temp2(_result) {
+      return _exit ? _result : React__default.createElement(VerifyResult, {
+        status: 'success'
+      });
+    }
+    if (!token) {
+      return React__default.createElement(VerifyResult, {
+        status: 'invalid'
+      });
+    }
+    var resolvedAppId = getResolvedAppId(appId);
+    if (!resolvedAppId) {
+      return React__default.createElement(VerifyResult, {
+        status: 'error',
+        message: 'Missing appId configuration for verification.'
+      });
+    }
+    var _temp = _catch(function () {
+      return Promise.resolve(getAuthJson('api/auth/verify-email', authHost, {
+        token: token,
+        appId: resolvedAppId
+      })).then(function (_ref3) {
+        var response = _ref3.response,
+          data = _ref3.data;
+        if (!response.ok) {
+          var _ref4, _data$message;
+          var message = (_ref4 = (_data$message = data === null || data === void 0 ? void 0 : data.message) != null ? _data$message : data === null || data === void 0 ? void 0 : data.status) != null ? _ref4 : 'Verification failed.';
+          var _React$createElement = React__default.createElement(VerifyResult, {
+            status: 'error',
+            message: message
+          });
+          _exit = true;
+          return _React$createElement;
+        }
+      });
+    }, function (err) {
+      console.error(err);
+      var _React$createElement2 = React__default.createElement(VerifyResult, {
+        status: 'error',
+        message: 'Unable to reach the verification service.'
+      });
+      _exit = true;
+      return _React$createElement2;
+    });
+    return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
+  });
+};
+function VerifyResult(_ref5) {
+  var status = _ref5.status,
+    message = _ref5.message;
+  var isSuccess = status === 'success';
+  return React__default.createElement("div", {
+    className: 'fixed inset-0 flex flex-col md:flex-row bg-white dark:bg-zinc-950 overflow-auto'
+  }, React__default.createElement("div", {
+    className: 'hidden md:flex md:w-5/12 lg:w-[42%] flex-col bg-zinc-900 relative overflow-hidden'
+  }, React__default.createElement("div", {
+    className: 'absolute -top-32 -left-32 w-96 h-96 rounded-full bg-zinc-800 opacity-60'
+  }), React__default.createElement("div", {
+    className: 'absolute -bottom-24 -right-24 w-80 h-80 rounded-full bg-zinc-800 opacity-60'
+  }), React__default.createElement("div", {
+    className: 'absolute inset-0 opacity-[0.03]',
+    style: {
+      backgroundImage: 'radial-gradient(circle, #ffffff 1px, transparent 1px)',
+      backgroundSize: '28px 28px'
+    }
+  }), React__default.createElement("div", {
+    className: 'relative z-10 p-8'
+  }, React__default.createElement("div", {
+    className: 'flex items-center gap-2.5'
+  }, React__default.createElement("div", {
+    className: 'w-8 h-8 rounded-lg bg-white flex items-center justify-center'
+  }, React__default.createElement("span", {
+    className: 'text-zinc-900 font-bold text-sm'
+  }, "W")), React__default.createElement("span", {
+    className: 'text-white font-semibold tracking-tight'
+  }, "YourApp"))), React__default.createElement("div", {
+    className: 'relative z-10 flex-1 flex flex-col items-center justify-center px-12 pb-16 text-center'
+  }, React__default.createElement("div", {
+    className: "mb-8 flex h-24 w-24 items-center justify-center rounded-3xl text-4xl font-bold shadow-2xl " + (isSuccess ? 'bg-emerald-500 text-white' : 'bg-red-500 text-white')
+  }, isSuccess ? '✓' : '✕'), React__default.createElement("p", {
+    className: 'mb-3 text-xs font-semibold uppercase tracking-widest text-zinc-500'
+  }, "Email Verification"), React__default.createElement("h2", {
+    className: 'text-2xl font-bold leading-snug text-white max-w-xs'
+  }, isSuccess ? "You're all verified and ready to go." : 'Something went wrong with your link.'))), React__default.createElement("div", {
+    className: 'flex flex-1 flex-col items-center justify-center px-8 py-12 md:px-16 lg:px-24'
+  }, React__default.createElement("div", {
+    className: 'mb-10 flex items-center gap-2.5 md:hidden'
+  }, React__default.createElement("div", {
+    className: 'w-8 h-8 rounded-lg bg-zinc-900 dark:bg-white flex items-center justify-center'
+  }, React__default.createElement("span", {
+    className: 'text-white dark:text-zinc-900 font-bold text-sm'
+  }, "W")), React__default.createElement("span", {
+    className: 'font-semibold tracking-tight text-zinc-900 dark:text-white'
+  }, "YourApp")), React__default.createElement("div", {
+    className: 'w-full max-w-md'
+  }, React__default.createElement("div", {
+    className: 'mb-7 flex justify-start md:hidden'
+  }, React__default.createElement("div", {
+    className: "flex h-16 w-16 items-center justify-center rounded-2xl text-3xl font-bold " + (isSuccess ? 'bg-emerald-500 text-white' : 'bg-red-500 text-white')
+  }, isSuccess ? '✓' : '✕')), React__default.createElement("p", {
+    className: 'mb-3 text-xs font-semibold uppercase tracking-widest text-zinc-400 dark:text-zinc-500 hidden md:block'
+  }, "Email Verification"), React__default.createElement("h1", {
+    className: 'mb-4 text-4xl font-bold tracking-tight text-zinc-900 dark:text-white leading-tight'
+  }, isSuccess ? 'Email verified!' : 'Verification failed'), React__default.createElement("p", {
+    className: 'mb-10 text-base leading-relaxed text-zinc-500 dark:text-zinc-400 max-w-sm'
+  }, isSuccess ? 'Your email address has been confirmed and your account is active. Sign in to get started.' : message != null ? message : 'This verification link is invalid or has expired. Links are only valid for 24 hours.'), React__default.createElement(Link, {
+    href: '/login',
+    className: 'block w-full rounded-xl bg-zinc-900 dark:bg-white px-6 py-3.5 text-center text-sm font-semibold text-white dark:text-zinc-900 transition hover:bg-zinc-700 dark:hover:bg-zinc-100'
+  }, isSuccess ? 'Sign in to your account →' : 'Back to login'), !isSuccess && React__default.createElement("p", {
+    className: 'mt-5 text-sm text-zinc-400 dark:text-zinc-500'
+  }, "Need a new link?", ' ', React__default.createElement(Link, {
+    href: '/signup',
+    className: 'text-zinc-600 dark:text-zinc-300 underline underline-offset-2 hover:text-zinc-900 dark:hover:text-white'
+  }, "Sign up again")), isSuccess && React__default.createElement("p", {
+    className: 'mt-5 text-sm text-zinc-400 dark:text-zinc-500'
+  }, "Check your inbox \u2014 we've sent you a welcome email."))));
+}
+
+function UserIcon(_ref) {
+  var className = _ref.className;
+  return React__default.createElement("svg", {
+    className: className,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.75",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, React__default.createElement("circle", {
+    cx: "12",
+    cy: "8",
+    r: "4"
+  }), React__default.createElement("path", {
+    d: "M4 20c0-4 3.6-7 8-7s8 3 8 7"
+  }));
+}
+function SettingsIcon(_ref2) {
+  var className = _ref2.className;
+  return React__default.createElement("svg", {
+    className: className,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.75",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, React__default.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "3"
+  }), React__default.createElement("path", {
+    d: "M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"
+  }));
+}
+function LogOutIcon(_ref3) {
+  var className = _ref3.className;
+  return React__default.createElement("svg", {
+    className: className,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.75",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, React__default.createElement("path", {
+    d: "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"
+  }), React__default.createElement("polyline", {
+    points: "16,17 21,12 16,7"
+  }), React__default.createElement("line", {
+    x1: "21",
+    y1: "12",
+    x2: "9",
+    y2: "12"
+  }));
+}
+function ChevronsUpDownIcon(_ref4) {
+  var className = _ref4.className;
+  return React__default.createElement("svg", {
+    className: className,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, React__default.createElement("path", {
+    d: "M7 15l5 5 5-5M7 9l5-5 5 5"
+  }));
+}
+var AVATAR_COLORS = ["bg-violet-600", "bg-indigo-600", "bg-sky-600", "bg-emerald-600", "bg-amber-600", "bg-rose-600"];
+function getAvatarColor(name) {
+  var hash = 0;
+  for (var i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
+}
+function getInitials(name) {
+  return name.split(" ").filter(Boolean).map(function (w) {
+    return w[0];
+  }).join("").toUpperCase().slice(0, 2);
+}
+var UserMenu = function UserMenu(_ref5) {
+  var _user$email;
+  var handleLogout = function handleLogout() {
+    try {
+      var _temp3 = function _temp3() {
+        if (onLogout) {
+          onLogout();
+        } else {
+          router.push(logoutRedirectTo);
+          router.refresh();
+        }
+      };
+      var resolvedAppId = getResolvedAppId(appId);
+      var _temp2 = _catch(function () {
+        return Promise.resolve(getAuthJson("api/auth/logout", authHost, resolvedAppId ? {
+          appId: resolvedAppId
+        } : undefined)).then(function () {});
+      }, function (err) {
+        console.error("Logout error:", err);
+      });
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(_temp3) : _temp3(_temp2));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var userProp = _ref5.user,
+    appId = _ref5.appId,
+    authHost = _ref5.authHost,
+    _ref5$logoutRedirectT = _ref5.logoutRedirectTo,
+    logoutRedirectTo = _ref5$logoutRedirectT === void 0 ? "/" : _ref5$logoutRedirectT,
+    _ref5$profileHref = _ref5.profileHref,
+    profileHref = _ref5$profileHref === void 0 ? "/profile" : _ref5$profileHref,
+    _ref5$settingsHref = _ref5.settingsHref,
+    settingsHref = _ref5$settingsHref === void 0 ? "/settings" : _ref5$settingsHref,
+    onLogout = _ref5.onLogout;
+  var _useState = useState(false),
+    isOpen = _useState[0],
+    setIsOpen = _useState[1];
+  var _useState2 = useState(null),
+    fetchedUser = _useState2[0],
+    setFetchedUser = _useState2[1];
+  var _useState3 = useState(!userProp),
+    isLoading = _useState3[0],
+    setIsLoading = _useState3[1];
+  var router = useRouter();
+  var menuRef = useRef(null);
+  useEffect(function () {
+    var fetchSession = function fetchSession() {
+      try {
+        var _temp = _finallyRethrows(function () {
+          return _catch(function () {
+            return Promise.resolve(getAuthJson("api/auth/session", authHost)).then(function (_ref6) {
+              var response = _ref6.response,
+                data = _ref6.data;
+              if (!cancelled && response.ok && data !== null && data !== void 0 && data.user) {
+                setFetchedUser(data.user);
+              }
+            });
+          }, function (err) {
+            console.error("Failed to fetch session:", err);
+          });
+        }, function (_wasThrown, _result) {
+          if (!cancelled) setIsLoading(false);
+          if (_wasThrown) throw _result;
+          return _result;
+        });
+        return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
+    if (userProp) return;
+    var cancelled = false;
+    fetchSession();
+    return function () {
+      cancelled = true;
+    };
+  }, [authHost, userProp]);
+  useEffect(function () {
+    function handleClickOutside(e) {
+      if (menuRef.current && !menuRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return function () {
+      return document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  var user = userProp || fetchedUser;
+  if (isLoading || !user) return null;
+  var displayName = user.name || ((_user$email = user.email) === null || _user$email === void 0 ? void 0 : _user$email.split("@")[0]) || "User";
+  var initials = getInitials(displayName);
+  var avatarColor = getAvatarColor(displayName);
+  return React__default.createElement("div", {
+    ref: menuRef,
+    className: "relative inline-block"
+  }, isOpen && React__default.createElement("div", {
+    className: "absolute bottom-full mb-1 left-0 z-50 w-52\n            bg-white border border-zinc-200\n            rounded-xl shadow-lg shadow-zinc-200/50\n            overflow-hidden"
+  }, React__default.createElement("div", {
+    className: "px-3.5 py-3 border-b border-zinc-100"
+  }, React__default.createElement("p", {
+    className: "text-sm font-medium text-zinc-900 truncate"
+  }, displayName), user.email && React__default.createElement("p", {
+    className: "text-xs text-zinc-500 truncate mt-0.5"
+  }, user.email)), React__default.createElement("div", {
+    className: "p-1"
+  }, React__default.createElement(Link, {
+    href: profileHref,
+    onClick: function onClick() {
+      return setIsOpen(false);
+    },
+    className: "flex items-center gap-2.5 w-full px-3 py-2 text-sm text-zinc-700 hover:bg-zinc-50 rounded-lg transition-colors"
+  }, React__default.createElement(UserIcon, {
+    className: "w-4 h-4 text-zinc-400"
+  }), "Profile"), React__default.createElement(Link, {
+    href: settingsHref,
+    onClick: function onClick() {
+      return setIsOpen(false);
+    },
+    className: "flex items-center gap-2.5 w-full px-3 py-2 text-sm text-zinc-700 hover:bg-zinc-50 rounded-lg transition-colors"
+  }, React__default.createElement(SettingsIcon, {
+    className: "w-4 h-4 text-zinc-400"
+  }), "Settings"), React__default.createElement("button", {
+    onClick: handleLogout,
+    className: "flex items-center gap-2.5 w-full px-3 py-2 text-sm text-zinc-700 hover:bg-zinc-50 rounded-lg transition-colors text-left"
+  }, React__default.createElement(LogOutIcon, {
+    className: "w-4 h-4 text-zinc-400"
+  }), "Log out"))), React__default.createElement("button", {
+    onClick: function onClick() {
+      return setIsOpen(function (o) {
+        return !o;
+      });
+    },
+    title: displayName,
+    className: "flex items-center gap-2.5 p-2 rounded-lg\n          hover:bg-zinc-50 transition-colors text-left"
+  }, React__default.createElement("div", {
+    className: "w-7 h-7 rounded-full flex items-center justify-center flex-shrink-0 " + avatarColor
+  }, React__default.createElement("span", {
+    className: "text-xs font-semibold text-white leading-none"
+  }, initials)), React__default.createElement("div", {
+    className: "flex-1 min-w-0"
+  }, React__default.createElement("p", {
+    className: "text-sm font-medium text-zinc-900 truncate leading-tight"
+  }, displayName)), React__default.createElement(ChevronsUpDownIcon, {
+    className: "w-3.5 h-3.5 text-zinc-400 flex-shrink-0"
+  })));
+};
+
+export { Hello, Login, OAuthButtons, Signup, UserMenu, VerifyEmail };
 //# sourceMappingURL=index.modern.js.map