authtara-sdk 1.1.15 → 1.1.18
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/react.d.mts +18 -3
- package/dist/react.d.ts +18 -3
- package/dist/react.js +299 -172
- package/dist/react.mjs +299 -172
- package/package.json +1 -1
package/dist/react.d.mts
CHANGED
|
@@ -37,21 +37,36 @@ declare function useAuth(): AuthTaraContextValue;
|
|
|
37
37
|
* AuthTaraAuth Component
|
|
38
38
|
*
|
|
39
39
|
* Embeddable login/register component
|
|
40
|
-
* Renders social login buttons and
|
|
40
|
+
* Renders social login buttons and email/password form
|
|
41
|
+
* Handles OAuth popup flow and credentials authentication
|
|
41
42
|
*/
|
|
43
|
+
type AuthMode = 'oauth' | 'credentials';
|
|
42
44
|
interface AuthTaraAuthProps {
|
|
45
|
+
/** Display mode: 'modal' for popup, 'redirect' for full page redirect */
|
|
43
46
|
mode?: 'modal' | 'redirect';
|
|
47
|
+
/** Initial auth mode: 'oauth' for social buttons, 'credentials' for email/password */
|
|
48
|
+
initialAuthMode?: AuthMode;
|
|
49
|
+
/** Show email/password option */
|
|
50
|
+
showCredentials?: boolean;
|
|
51
|
+
/** Appearance customization */
|
|
44
52
|
appearance?: {
|
|
45
53
|
theme?: 'light' | 'dark';
|
|
46
54
|
variables?: Record<string, string>;
|
|
47
55
|
};
|
|
56
|
+
/** URL to redirect after successful auth */
|
|
48
57
|
redirectUrl?: string;
|
|
58
|
+
/** Callback when auth succeeds */
|
|
49
59
|
onSuccess?: (session: {
|
|
50
60
|
user: any;
|
|
51
61
|
}) => void;
|
|
62
|
+
/** Callback when auth fails */
|
|
52
63
|
onError?: (error: Error) => void;
|
|
64
|
+
/** Custom API URL for credentials login (defaults to /api/auth/login) */
|
|
65
|
+
credentialsApiUrl?: string;
|
|
66
|
+
/** Custom API URL for registration (defaults to /api/auth/register) */
|
|
67
|
+
registerApiUrl?: string;
|
|
53
68
|
}
|
|
54
|
-
declare function AuthTaraAuth({ appearance, redirectUrl, onSuccess, onError, }: AuthTaraAuthProps): react_jsx_runtime.JSX.Element;
|
|
69
|
+
declare function AuthTaraAuth({ showCredentials, appearance, redirectUrl, onSuccess, onError, credentialsApiUrl, }: AuthTaraAuthProps): react_jsx_runtime.JSX.Element;
|
|
55
70
|
|
|
56
71
|
interface AuthTaraBillingProps {
|
|
57
72
|
tenantId: string;
|
|
@@ -74,4 +89,4 @@ interface AuthTaraPricingProps {
|
|
|
74
89
|
}
|
|
75
90
|
declare function AuthTaraPricing({ appearance, onPlanSelect, }: AuthTaraPricingProps): react_jsx_runtime.JSX.Element;
|
|
76
91
|
|
|
77
|
-
export { AuthTaraAuth, type AuthTaraAuthProps, AuthTaraBilling, type AuthTaraBillingProps, type AuthTaraConfig, type AuthTaraContextValue, AuthTaraPricing, type AuthTaraPricingProps, AuthTaraProvider, type SignInOptions, type User, useAuth };
|
|
92
|
+
export { type AuthMode, AuthTaraAuth, type AuthTaraAuthProps, AuthTaraBilling, type AuthTaraBillingProps, type AuthTaraConfig, type AuthTaraContextValue, AuthTaraPricing, type AuthTaraPricingProps, AuthTaraProvider, type SignInOptions, type User, useAuth };
|
package/dist/react.d.ts
CHANGED
|
@@ -37,21 +37,36 @@ declare function useAuth(): AuthTaraContextValue;
|
|
|
37
37
|
* AuthTaraAuth Component
|
|
38
38
|
*
|
|
39
39
|
* Embeddable login/register component
|
|
40
|
-
* Renders social login buttons and
|
|
40
|
+
* Renders social login buttons and email/password form
|
|
41
|
+
* Handles OAuth popup flow and credentials authentication
|
|
41
42
|
*/
|
|
43
|
+
type AuthMode = 'oauth' | 'credentials';
|
|
42
44
|
interface AuthTaraAuthProps {
|
|
45
|
+
/** Display mode: 'modal' for popup, 'redirect' for full page redirect */
|
|
43
46
|
mode?: 'modal' | 'redirect';
|
|
47
|
+
/** Initial auth mode: 'oauth' for social buttons, 'credentials' for email/password */
|
|
48
|
+
initialAuthMode?: AuthMode;
|
|
49
|
+
/** Show email/password option */
|
|
50
|
+
showCredentials?: boolean;
|
|
51
|
+
/** Appearance customization */
|
|
44
52
|
appearance?: {
|
|
45
53
|
theme?: 'light' | 'dark';
|
|
46
54
|
variables?: Record<string, string>;
|
|
47
55
|
};
|
|
56
|
+
/** URL to redirect after successful auth */
|
|
48
57
|
redirectUrl?: string;
|
|
58
|
+
/** Callback when auth succeeds */
|
|
49
59
|
onSuccess?: (session: {
|
|
50
60
|
user: any;
|
|
51
61
|
}) => void;
|
|
62
|
+
/** Callback when auth fails */
|
|
52
63
|
onError?: (error: Error) => void;
|
|
64
|
+
/** Custom API URL for credentials login (defaults to /api/auth/login) */
|
|
65
|
+
credentialsApiUrl?: string;
|
|
66
|
+
/** Custom API URL for registration (defaults to /api/auth/register) */
|
|
67
|
+
registerApiUrl?: string;
|
|
53
68
|
}
|
|
54
|
-
declare function AuthTaraAuth({ appearance, redirectUrl, onSuccess, onError, }: AuthTaraAuthProps): react_jsx_runtime.JSX.Element;
|
|
69
|
+
declare function AuthTaraAuth({ showCredentials, appearance, redirectUrl, onSuccess, onError, credentialsApiUrl, }: AuthTaraAuthProps): react_jsx_runtime.JSX.Element;
|
|
55
70
|
|
|
56
71
|
interface AuthTaraBillingProps {
|
|
57
72
|
tenantId: string;
|
|
@@ -74,4 +89,4 @@ interface AuthTaraPricingProps {
|
|
|
74
89
|
}
|
|
75
90
|
declare function AuthTaraPricing({ appearance, onPlanSelect, }: AuthTaraPricingProps): react_jsx_runtime.JSX.Element;
|
|
76
91
|
|
|
77
|
-
export { AuthTaraAuth, type AuthTaraAuthProps, AuthTaraBilling, type AuthTaraBillingProps, type AuthTaraConfig, type AuthTaraContextValue, AuthTaraPricing, type AuthTaraPricingProps, AuthTaraProvider, type SignInOptions, type User, useAuth };
|
|
92
|
+
export { type AuthMode, AuthTaraAuth, type AuthTaraAuthProps, AuthTaraBilling, type AuthTaraBillingProps, type AuthTaraConfig, type AuthTaraContextValue, AuthTaraPricing, type AuthTaraPricingProps, AuthTaraProvider, type SignInOptions, type User, useAuth };
|
package/dist/react.js
CHANGED
|
@@ -268,17 +268,21 @@ var React2 = __toESM(require("react"));
|
|
|
268
268
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
269
269
|
function AuthTaraAuth({
|
|
270
270
|
// mode = 'modal', // Reserved for future use
|
|
271
|
+
showCredentials = true,
|
|
271
272
|
appearance,
|
|
272
273
|
redirectUrl = "/dashboard",
|
|
273
274
|
onSuccess,
|
|
274
|
-
onError
|
|
275
|
+
onError,
|
|
276
|
+
credentialsApiUrl = "/api/auth/login"
|
|
275
277
|
}) {
|
|
276
|
-
const { signIn, isLoading, user } = useAuth();
|
|
278
|
+
const { signIn, isLoading: oauthLoading, user } = useAuth();
|
|
277
279
|
const [error, setError] = React2.useState(null);
|
|
278
|
-
const [
|
|
279
|
-
|
|
280
|
+
const [isCredentialsLoading, setIsCredentialsLoading] = React2.useState(false);
|
|
281
|
+
const [email, setEmail] = React2.useState("");
|
|
282
|
+
const [password, setPassword] = React2.useState("");
|
|
283
|
+
const isLoading = oauthLoading || isCredentialsLoading;
|
|
284
|
+
async function handleOAuthSignIn(selectedProvider) {
|
|
280
285
|
setError(null);
|
|
281
|
-
setProvider(selectedProvider);
|
|
282
286
|
try {
|
|
283
287
|
await signIn(selectedProvider, { redirectPath: redirectUrl });
|
|
284
288
|
onSuccess?.({ user });
|
|
@@ -289,195 +293,318 @@ function AuthTaraAuth({
|
|
|
289
293
|
const message = err instanceof Error ? err.message : "Authentication failed";
|
|
290
294
|
setError(message);
|
|
291
295
|
onError?.(err);
|
|
296
|
+
}
|
|
297
|
+
}
|
|
298
|
+
async function handleCredentialsSignIn(e) {
|
|
299
|
+
e.preventDefault();
|
|
300
|
+
setError(null);
|
|
301
|
+
setIsCredentialsLoading(true);
|
|
302
|
+
try {
|
|
303
|
+
if (!email || !password) {
|
|
304
|
+
throw new Error("Email and password are required");
|
|
305
|
+
}
|
|
306
|
+
const response = await fetch(credentialsApiUrl, {
|
|
307
|
+
method: "POST",
|
|
308
|
+
headers: { "Content-Type": "application/json" },
|
|
309
|
+
credentials: "include",
|
|
310
|
+
body: JSON.stringify({
|
|
311
|
+
email,
|
|
312
|
+
password,
|
|
313
|
+
redirectUrl
|
|
314
|
+
})
|
|
315
|
+
});
|
|
316
|
+
const result = await response.json();
|
|
317
|
+
if (!response.ok || !result.success) {
|
|
318
|
+
throw new Error(result.message || result.error?.message || "Login failed");
|
|
319
|
+
}
|
|
320
|
+
onSuccess?.({ user: result.data?.user || result.user });
|
|
321
|
+
if (redirectUrl) {
|
|
322
|
+
window.location.href = redirectUrl;
|
|
323
|
+
}
|
|
324
|
+
} catch (err) {
|
|
325
|
+
const message = err instanceof Error ? err.message : "Authentication failed";
|
|
326
|
+
setError(message);
|
|
327
|
+
onError?.(err);
|
|
292
328
|
} finally {
|
|
293
|
-
|
|
329
|
+
setIsCredentialsLoading(false);
|
|
294
330
|
}
|
|
295
331
|
}
|
|
296
|
-
const
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
332
|
+
const isDark = appearance?.theme === "dark";
|
|
333
|
+
const bgColor = isDark ? "#111111" : "#ffffff";
|
|
334
|
+
const cardBgColor = isDark ? "#111111" : "#ffffff";
|
|
335
|
+
const cardBorderColor = isDark ? "#222222" : "#e5e7eb";
|
|
336
|
+
const textColor = isDark ? "#ffffff" : "#111827";
|
|
337
|
+
const subtextColor = isDark ? "#888888" : "#6b7280";
|
|
338
|
+
const inputBgColor = isDark ? "#1a1a1a" : "#ffffff";
|
|
339
|
+
const inputBorderColor = isDark ? "#333333" : "#e5e7eb";
|
|
340
|
+
const socialBtnBg = isDark ? "#1a1a1a" : "#ffffff";
|
|
341
|
+
const socialBtnBorder = isDark ? "#333333" : "#e5e7eb";
|
|
342
|
+
const primaryBtnBg = isDark ? "#f3f4f6" : "#111111";
|
|
343
|
+
const primaryBtnText = isDark ? "#111111" : "#ffffff";
|
|
344
|
+
const dividerColor = isDark ? "#222222" : "#e5e7eb";
|
|
345
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
346
|
+
"div",
|
|
347
|
+
{
|
|
348
|
+
className: `authtara-auth-wrapper ${isDark ? "dark" : ""}`,
|
|
349
|
+
style: {
|
|
350
|
+
width: "100%",
|
|
351
|
+
display: "flex",
|
|
352
|
+
justifyContent: "center",
|
|
353
|
+
backgroundColor: bgColor,
|
|
354
|
+
padding: "2rem 1rem",
|
|
355
|
+
minHeight: "100vh",
|
|
356
|
+
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
|
|
357
|
+
},
|
|
358
|
+
children: [
|
|
359
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
360
|
+
"div",
|
|
361
|
+
{
|
|
362
|
+
className: "authtara-auth-card",
|
|
363
|
+
style: {
|
|
364
|
+
width: "100%",
|
|
365
|
+
maxWidth: "440px",
|
|
366
|
+
padding: "2.5rem",
|
|
367
|
+
borderRadius: "1rem",
|
|
368
|
+
backgroundColor: cardBgColor,
|
|
369
|
+
border: `1px solid ${cardBorderColor}`,
|
|
370
|
+
boxShadow: isDark ? "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)" : "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
|
|
371
|
+
display: "flex",
|
|
372
|
+
flexDirection: "column",
|
|
373
|
+
gap: "1.5rem"
|
|
374
|
+
},
|
|
375
|
+
children: [
|
|
376
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { textAlign: "center" }, children: [
|
|
377
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { style: { fontSize: "1.75rem", fontWeight: "700", color: textColor, marginBottom: "0.5rem" }, children: "Welcome back" }),
|
|
378
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: { fontSize: "0.9375rem", color: subtextColor }, children: "Login with your Google or GitHub account" })
|
|
379
|
+
] }),
|
|
380
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: {
|
|
325
381
|
padding: "0.75rem",
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
},
|
|
332
|
-
children:
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
382
|
+
backgroundColor: isDark ? "#451a1a" : "#fee2e2",
|
|
383
|
+
color: isDark ? "#ffcfcf" : "#991b1b",
|
|
384
|
+
borderRadius: "0.5rem",
|
|
385
|
+
fontSize: "0.875rem",
|
|
386
|
+
textAlign: "center"
|
|
387
|
+
}, children: error }),
|
|
388
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
|
|
389
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
390
|
+
"button",
|
|
391
|
+
{
|
|
392
|
+
onClick: () => handleOAuthSignIn("google"),
|
|
393
|
+
disabled: isLoading,
|
|
394
|
+
style: {
|
|
395
|
+
display: "flex",
|
|
396
|
+
alignItems: "center",
|
|
397
|
+
justifyContent: "center",
|
|
398
|
+
gap: "0.75rem",
|
|
399
|
+
padding: "0.75rem 1rem",
|
|
400
|
+
border: `1px solid ${socialBtnBorder}`,
|
|
401
|
+
borderRadius: "0.625rem",
|
|
402
|
+
backgroundColor: socialBtnBg,
|
|
403
|
+
color: textColor,
|
|
404
|
+
fontSize: "0.9375rem",
|
|
405
|
+
fontWeight: "600",
|
|
406
|
+
cursor: isLoading ? "not-allowed" : "pointer",
|
|
407
|
+
opacity: isLoading ? 0.7 : 1,
|
|
408
|
+
transition: "all 0.15s ease-in-out"
|
|
409
|
+
},
|
|
410
|
+
children: [
|
|
411
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", children: [
|
|
412
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { fill: "#4285F4", d: "M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.875 2.684-6.615z" }),
|
|
413
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { fill: "#34A853", d: "M9.003 18c2.43 0 4.467-.806 5.956-2.18L12.05 13.56c-.806.54-1.837.86-3.047.86-2.344 0-4.328-1.584-5.036-3.711H.96v2.332C2.44 15.983 5.485 18 9.003 18z" }),
|
|
414
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { fill: "#FBBC05", d: "M3.964 10.712c-.18-.54-.282-1.117-.282-1.71 0-.593.102-1.17.282-1.71V4.96H.957C.347 6.175 0 7.55 0 9.002c0 1.452.348 2.827.957 4.042l3.007-2.332z" }),
|
|
415
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { fill: "#EA4335", d: "M9.003 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.464.891 11.428 0 9.003 0 5.485 0 2.44 2.017.96 4.958L3.967 7.29c.708-2.127 2.692-3.71 5.036-3.71z" })
|
|
416
|
+
] }),
|
|
417
|
+
"Login with Google"
|
|
418
|
+
]
|
|
360
419
|
}
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
420
|
+
),
|
|
421
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
422
|
+
"button",
|
|
423
|
+
{
|
|
424
|
+
onClick: () => handleOAuthSignIn("github"),
|
|
425
|
+
disabled: isLoading,
|
|
426
|
+
style: {
|
|
427
|
+
display: "flex",
|
|
428
|
+
alignItems: "center",
|
|
429
|
+
justifyContent: "center",
|
|
430
|
+
gap: "0.75rem",
|
|
431
|
+
padding: "0.75rem 1rem",
|
|
432
|
+
border: `1px solid ${socialBtnBorder}`,
|
|
433
|
+
borderRadius: "0.625rem",
|
|
434
|
+
backgroundColor: socialBtnBg,
|
|
435
|
+
color: textColor,
|
|
436
|
+
fontSize: "0.9375rem",
|
|
437
|
+
fontWeight: "600",
|
|
438
|
+
cursor: isLoading ? "not-allowed" : "pointer",
|
|
439
|
+
opacity: isLoading ? 0.7 : 1,
|
|
440
|
+
transition: "all 0.15s ease-in-out"
|
|
441
|
+
},
|
|
442
|
+
children: [
|
|
443
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" }) }),
|
|
444
|
+
"Login with GitHub"
|
|
445
|
+
]
|
|
446
|
+
}
|
|
447
|
+
)
|
|
448
|
+
] }),
|
|
449
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "1rem", margin: "0.5rem 0" }, children: [
|
|
450
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { flex: 1, height: "1px", backgroundColor: dividerColor } }),
|
|
451
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: "0.8125rem", color: subtextColor }, children: "Or continue with" }),
|
|
452
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { flex: 1, height: "1px", backgroundColor: dividerColor } })
|
|
453
|
+
] }),
|
|
454
|
+
showCredentials && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("form", { onSubmit: handleCredentialsSignIn, style: { display: "flex", flexDirection: "column", gap: "1.25rem" }, children: [
|
|
455
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
|
|
456
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
457
|
+
"label",
|
|
368
458
|
{
|
|
459
|
+
htmlFor: "authtara-email",
|
|
369
460
|
style: {
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
461
|
+
display: "block",
|
|
462
|
+
marginBottom: "0.5rem",
|
|
463
|
+
fontSize: "0.9375rem",
|
|
464
|
+
fontWeight: "600",
|
|
465
|
+
color: textColor
|
|
466
|
+
},
|
|
467
|
+
children: "Email"
|
|
377
468
|
}
|
|
378
|
-
)
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
469
|
+
),
|
|
470
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
471
|
+
"input",
|
|
472
|
+
{
|
|
473
|
+
id: "authtara-email",
|
|
474
|
+
type: "email",
|
|
475
|
+
value: email,
|
|
476
|
+
onChange: (e) => setEmail(e.target.value),
|
|
477
|
+
placeholder: "m@example.com",
|
|
478
|
+
disabled: isLoading,
|
|
479
|
+
required: true,
|
|
480
|
+
style: {
|
|
481
|
+
width: "100%",
|
|
482
|
+
padding: "0.75rem 1rem",
|
|
483
|
+
border: `1px solid ${inputBorderColor}`,
|
|
484
|
+
borderRadius: "0.625rem",
|
|
485
|
+
backgroundColor: inputBgColor,
|
|
486
|
+
color: textColor,
|
|
487
|
+
fontSize: "0.9375rem",
|
|
488
|
+
outline: "none",
|
|
489
|
+
boxSizing: "border-box",
|
|
490
|
+
transition: "border-color 0.15s ease-in-out"
|
|
391
491
|
}
|
|
392
|
-
|
|
492
|
+
}
|
|
493
|
+
)
|
|
494
|
+
] }),
|
|
495
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
|
|
496
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "0.5rem" }, children: [
|
|
393
497
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
394
|
-
"
|
|
498
|
+
"label",
|
|
395
499
|
{
|
|
396
|
-
|
|
397
|
-
|
|
500
|
+
htmlFor: "authtara-password",
|
|
501
|
+
style: {
|
|
502
|
+
fontSize: "0.9375rem",
|
|
503
|
+
fontWeight: "600",
|
|
504
|
+
color: textColor
|
|
505
|
+
},
|
|
506
|
+
children: "Password"
|
|
398
507
|
}
|
|
399
508
|
),
|
|
400
509
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
401
|
-
"
|
|
510
|
+
"a",
|
|
402
511
|
{
|
|
403
|
-
|
|
404
|
-
|
|
512
|
+
href: "#forgot-password",
|
|
513
|
+
style: {
|
|
514
|
+
fontSize: "0.875rem",
|
|
515
|
+
color: textColor,
|
|
516
|
+
textDecoration: "underline",
|
|
517
|
+
fontWeight: "500"
|
|
518
|
+
},
|
|
519
|
+
children: "Forgot your password?"
|
|
405
520
|
}
|
|
406
521
|
)
|
|
407
522
|
] }),
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
}
|
|
411
|
-
),
|
|
412
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
413
|
-
"button",
|
|
414
|
-
{
|
|
415
|
-
onClick: () => handleSignIn("github"),
|
|
416
|
-
disabled: isLoading,
|
|
417
|
-
style: {
|
|
418
|
-
display: "flex",
|
|
419
|
-
alignItems: "center",
|
|
420
|
-
justifyContent: "center",
|
|
421
|
-
gap: "0.5rem",
|
|
422
|
-
padding: "0.75rem 1rem",
|
|
423
|
-
border: "1px solid #d1d5db",
|
|
424
|
-
borderRadius: "0.375rem",
|
|
425
|
-
backgroundColor: "#24292e",
|
|
426
|
-
color: "#ffffff",
|
|
427
|
-
fontSize: "0.875rem",
|
|
428
|
-
fontWeight: "500",
|
|
429
|
-
cursor: isLoading ? "not-allowed" : "pointer",
|
|
430
|
-
opacity: isLoading ? 0.6 : 1,
|
|
431
|
-
transition: "all 0.2s"
|
|
432
|
-
},
|
|
433
|
-
onMouseOver: (e) => {
|
|
434
|
-
if (!isLoading) {
|
|
435
|
-
e.currentTarget.style.backgroundColor = "#1b1f23";
|
|
436
|
-
}
|
|
437
|
-
},
|
|
438
|
-
onMouseOut: (e) => {
|
|
439
|
-
e.currentTarget.style.backgroundColor = "#24292e";
|
|
440
|
-
},
|
|
441
|
-
children: [
|
|
442
|
-
isProviderLoading("github") ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
443
|
-
"div",
|
|
523
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
524
|
+
"input",
|
|
444
525
|
{
|
|
526
|
+
id: "authtara-password",
|
|
527
|
+
type: "password",
|
|
528
|
+
value: password,
|
|
529
|
+
onChange: (e) => setPassword(e.target.value),
|
|
530
|
+
placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
|
|
531
|
+
disabled: isLoading,
|
|
532
|
+
required: true,
|
|
445
533
|
style: {
|
|
446
|
-
width: "
|
|
447
|
-
|
|
448
|
-
border:
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
534
|
+
width: "100%",
|
|
535
|
+
padding: "0.75rem 1rem",
|
|
536
|
+
border: `1px solid ${inputBorderColor}`,
|
|
537
|
+
borderRadius: "0.625rem",
|
|
538
|
+
backgroundColor: inputBgColor,
|
|
539
|
+
color: textColor,
|
|
540
|
+
fontSize: "0.9375rem",
|
|
541
|
+
outline: "none",
|
|
542
|
+
boxSizing: "border-box",
|
|
543
|
+
transition: "border-color 0.15s ease-in-out"
|
|
452
544
|
}
|
|
453
545
|
}
|
|
454
|
-
)
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
546
|
+
)
|
|
547
|
+
] }),
|
|
548
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
549
|
+
"button",
|
|
550
|
+
{
|
|
551
|
+
type: "submit",
|
|
552
|
+
disabled: isLoading,
|
|
553
|
+
style: {
|
|
554
|
+
width: "100%",
|
|
555
|
+
padding: "0.875rem 1rem",
|
|
556
|
+
border: "none",
|
|
557
|
+
borderRadius: "0.625rem",
|
|
558
|
+
backgroundColor: primaryBtnBg,
|
|
559
|
+
color: primaryBtnText,
|
|
560
|
+
fontSize: "0.9375rem",
|
|
561
|
+
fontWeight: "700",
|
|
562
|
+
cursor: isLoading ? "not-allowed" : "pointer",
|
|
563
|
+
opacity: isLoading ? 0.7 : 1,
|
|
564
|
+
transition: "all 0.15s ease-in-out",
|
|
565
|
+
marginTop: "0.5rem"
|
|
566
|
+
},
|
|
567
|
+
children: isCredentialsLoading ? "Logging in..." : "Login"
|
|
568
|
+
}
|
|
569
|
+
)
|
|
570
|
+
] }),
|
|
571
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { textAlign: "center", marginTop: "0.5rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { style: { fontSize: "0.875rem", color: subtextColor }, children: [
|
|
572
|
+
"Don't have an account?",
|
|
573
|
+
" ",
|
|
574
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
575
|
+
"a",
|
|
576
|
+
{
|
|
577
|
+
href: "#signup",
|
|
578
|
+
style: {
|
|
579
|
+
color: textColor,
|
|
580
|
+
textDecoration: "underline",
|
|
581
|
+
fontWeight: "600"
|
|
582
|
+
},
|
|
583
|
+
children: "Sign up"
|
|
584
|
+
}
|
|
585
|
+
)
|
|
586
|
+
] }) })
|
|
587
|
+
]
|
|
588
|
+
}
|
|
589
|
+
),
|
|
590
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: `
|
|
591
|
+
.authtara-auth-card button:hover:not(:disabled) {
|
|
592
|
+
filter: brightness(0.95);
|
|
593
|
+
transform: translateY(-1px);
|
|
594
|
+
}
|
|
595
|
+
.authtara-auth-card button:active:not(:disabled) {
|
|
596
|
+
transform: translateY(0);
|
|
597
|
+
}
|
|
598
|
+
.authtara-auth-card input:focus {
|
|
599
|
+
border-color: ${textColor} !important;
|
|
600
|
+
}
|
|
601
|
+
@keyframes spin {
|
|
602
|
+
to { transform: rotate(360deg); }
|
|
603
|
+
}
|
|
604
|
+
` })
|
|
605
|
+
]
|
|
606
|
+
}
|
|
607
|
+
);
|
|
481
608
|
}
|
|
482
609
|
|
|
483
610
|
// src/components/AuthTaraBilling.tsx
|
package/dist/react.mjs
CHANGED
|
@@ -232,17 +232,21 @@ import * as React2 from "react";
|
|
|
232
232
|
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
233
233
|
function AuthTaraAuth({
|
|
234
234
|
// mode = 'modal', // Reserved for future use
|
|
235
|
+
showCredentials = true,
|
|
235
236
|
appearance,
|
|
236
237
|
redirectUrl = "/dashboard",
|
|
237
238
|
onSuccess,
|
|
238
|
-
onError
|
|
239
|
+
onError,
|
|
240
|
+
credentialsApiUrl = "/api/auth/login"
|
|
239
241
|
}) {
|
|
240
|
-
const { signIn, isLoading, user } = useAuth();
|
|
242
|
+
const { signIn, isLoading: oauthLoading, user } = useAuth();
|
|
241
243
|
const [error, setError] = React2.useState(null);
|
|
242
|
-
const [
|
|
243
|
-
|
|
244
|
+
const [isCredentialsLoading, setIsCredentialsLoading] = React2.useState(false);
|
|
245
|
+
const [email, setEmail] = React2.useState("");
|
|
246
|
+
const [password, setPassword] = React2.useState("");
|
|
247
|
+
const isLoading = oauthLoading || isCredentialsLoading;
|
|
248
|
+
async function handleOAuthSignIn(selectedProvider) {
|
|
244
249
|
setError(null);
|
|
245
|
-
setProvider(selectedProvider);
|
|
246
250
|
try {
|
|
247
251
|
await signIn(selectedProvider, { redirectPath: redirectUrl });
|
|
248
252
|
onSuccess?.({ user });
|
|
@@ -253,195 +257,318 @@ function AuthTaraAuth({
|
|
|
253
257
|
const message = err instanceof Error ? err.message : "Authentication failed";
|
|
254
258
|
setError(message);
|
|
255
259
|
onError?.(err);
|
|
260
|
+
}
|
|
261
|
+
}
|
|
262
|
+
async function handleCredentialsSignIn(e) {
|
|
263
|
+
e.preventDefault();
|
|
264
|
+
setError(null);
|
|
265
|
+
setIsCredentialsLoading(true);
|
|
266
|
+
try {
|
|
267
|
+
if (!email || !password) {
|
|
268
|
+
throw new Error("Email and password are required");
|
|
269
|
+
}
|
|
270
|
+
const response = await fetch(credentialsApiUrl, {
|
|
271
|
+
method: "POST",
|
|
272
|
+
headers: { "Content-Type": "application/json" },
|
|
273
|
+
credentials: "include",
|
|
274
|
+
body: JSON.stringify({
|
|
275
|
+
email,
|
|
276
|
+
password,
|
|
277
|
+
redirectUrl
|
|
278
|
+
})
|
|
279
|
+
});
|
|
280
|
+
const result = await response.json();
|
|
281
|
+
if (!response.ok || !result.success) {
|
|
282
|
+
throw new Error(result.message || result.error?.message || "Login failed");
|
|
283
|
+
}
|
|
284
|
+
onSuccess?.({ user: result.data?.user || result.user });
|
|
285
|
+
if (redirectUrl) {
|
|
286
|
+
window.location.href = redirectUrl;
|
|
287
|
+
}
|
|
288
|
+
} catch (err) {
|
|
289
|
+
const message = err instanceof Error ? err.message : "Authentication failed";
|
|
290
|
+
setError(message);
|
|
291
|
+
onError?.(err);
|
|
256
292
|
} finally {
|
|
257
|
-
|
|
293
|
+
setIsCredentialsLoading(false);
|
|
258
294
|
}
|
|
259
295
|
}
|
|
260
|
-
const
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
296
|
+
const isDark = appearance?.theme === "dark";
|
|
297
|
+
const bgColor = isDark ? "#111111" : "#ffffff";
|
|
298
|
+
const cardBgColor = isDark ? "#111111" : "#ffffff";
|
|
299
|
+
const cardBorderColor = isDark ? "#222222" : "#e5e7eb";
|
|
300
|
+
const textColor = isDark ? "#ffffff" : "#111827";
|
|
301
|
+
const subtextColor = isDark ? "#888888" : "#6b7280";
|
|
302
|
+
const inputBgColor = isDark ? "#1a1a1a" : "#ffffff";
|
|
303
|
+
const inputBorderColor = isDark ? "#333333" : "#e5e7eb";
|
|
304
|
+
const socialBtnBg = isDark ? "#1a1a1a" : "#ffffff";
|
|
305
|
+
const socialBtnBorder = isDark ? "#333333" : "#e5e7eb";
|
|
306
|
+
const primaryBtnBg = isDark ? "#f3f4f6" : "#111111";
|
|
307
|
+
const primaryBtnText = isDark ? "#111111" : "#ffffff";
|
|
308
|
+
const dividerColor = isDark ? "#222222" : "#e5e7eb";
|
|
309
|
+
return /* @__PURE__ */ jsxs(
|
|
310
|
+
"div",
|
|
311
|
+
{
|
|
312
|
+
className: `authtara-auth-wrapper ${isDark ? "dark" : ""}`,
|
|
313
|
+
style: {
|
|
314
|
+
width: "100%",
|
|
315
|
+
display: "flex",
|
|
316
|
+
justifyContent: "center",
|
|
317
|
+
backgroundColor: bgColor,
|
|
318
|
+
padding: "2rem 1rem",
|
|
319
|
+
minHeight: "100vh",
|
|
320
|
+
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
|
|
321
|
+
},
|
|
322
|
+
children: [
|
|
323
|
+
/* @__PURE__ */ jsxs(
|
|
324
|
+
"div",
|
|
325
|
+
{
|
|
326
|
+
className: "authtara-auth-card",
|
|
327
|
+
style: {
|
|
328
|
+
width: "100%",
|
|
329
|
+
maxWidth: "440px",
|
|
330
|
+
padding: "2.5rem",
|
|
331
|
+
borderRadius: "1rem",
|
|
332
|
+
backgroundColor: cardBgColor,
|
|
333
|
+
border: `1px solid ${cardBorderColor}`,
|
|
334
|
+
boxShadow: isDark ? "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)" : "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
|
|
335
|
+
display: "flex",
|
|
336
|
+
flexDirection: "column",
|
|
337
|
+
gap: "1.5rem"
|
|
338
|
+
},
|
|
339
|
+
children: [
|
|
340
|
+
/* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
|
|
341
|
+
/* @__PURE__ */ jsx2("h2", { style: { fontSize: "1.75rem", fontWeight: "700", color: textColor, marginBottom: "0.5rem" }, children: "Welcome back" }),
|
|
342
|
+
/* @__PURE__ */ jsx2("p", { style: { fontSize: "0.9375rem", color: subtextColor }, children: "Login with your Google or GitHub account" })
|
|
343
|
+
] }),
|
|
344
|
+
error && /* @__PURE__ */ jsx2("div", { style: {
|
|
289
345
|
padding: "0.75rem",
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
},
|
|
296
|
-
children:
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
346
|
+
backgroundColor: isDark ? "#451a1a" : "#fee2e2",
|
|
347
|
+
color: isDark ? "#ffcfcf" : "#991b1b",
|
|
348
|
+
borderRadius: "0.5rem",
|
|
349
|
+
fontSize: "0.875rem",
|
|
350
|
+
textAlign: "center"
|
|
351
|
+
}, children: error }),
|
|
352
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
|
|
353
|
+
/* @__PURE__ */ jsxs(
|
|
354
|
+
"button",
|
|
355
|
+
{
|
|
356
|
+
onClick: () => handleOAuthSignIn("google"),
|
|
357
|
+
disabled: isLoading,
|
|
358
|
+
style: {
|
|
359
|
+
display: "flex",
|
|
360
|
+
alignItems: "center",
|
|
361
|
+
justifyContent: "center",
|
|
362
|
+
gap: "0.75rem",
|
|
363
|
+
padding: "0.75rem 1rem",
|
|
364
|
+
border: `1px solid ${socialBtnBorder}`,
|
|
365
|
+
borderRadius: "0.625rem",
|
|
366
|
+
backgroundColor: socialBtnBg,
|
|
367
|
+
color: textColor,
|
|
368
|
+
fontSize: "0.9375rem",
|
|
369
|
+
fontWeight: "600",
|
|
370
|
+
cursor: isLoading ? "not-allowed" : "pointer",
|
|
371
|
+
opacity: isLoading ? 0.7 : 1,
|
|
372
|
+
transition: "all 0.15s ease-in-out"
|
|
373
|
+
},
|
|
374
|
+
children: [
|
|
375
|
+
/* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", children: [
|
|
376
|
+
/* @__PURE__ */ jsx2("path", { fill: "#4285F4", d: "M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.875 2.684-6.615z" }),
|
|
377
|
+
/* @__PURE__ */ jsx2("path", { fill: "#34A853", d: "M9.003 18c2.43 0 4.467-.806 5.956-2.18L12.05 13.56c-.806.54-1.837.86-3.047.86-2.344 0-4.328-1.584-5.036-3.711H.96v2.332C2.44 15.983 5.485 18 9.003 18z" }),
|
|
378
|
+
/* @__PURE__ */ jsx2("path", { fill: "#FBBC05", d: "M3.964 10.712c-.18-.54-.282-1.117-.282-1.71 0-.593.102-1.17.282-1.71V4.96H.957C.347 6.175 0 7.55 0 9.002c0 1.452.348 2.827.957 4.042l3.007-2.332z" }),
|
|
379
|
+
/* @__PURE__ */ jsx2("path", { fill: "#EA4335", d: "M9.003 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.464.891 11.428 0 9.003 0 5.485 0 2.44 2.017.96 4.958L3.967 7.29c.708-2.127 2.692-3.71 5.036-3.71z" })
|
|
380
|
+
] }),
|
|
381
|
+
"Login with Google"
|
|
382
|
+
]
|
|
324
383
|
}
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
384
|
+
),
|
|
385
|
+
/* @__PURE__ */ jsxs(
|
|
386
|
+
"button",
|
|
387
|
+
{
|
|
388
|
+
onClick: () => handleOAuthSignIn("github"),
|
|
389
|
+
disabled: isLoading,
|
|
390
|
+
style: {
|
|
391
|
+
display: "flex",
|
|
392
|
+
alignItems: "center",
|
|
393
|
+
justifyContent: "center",
|
|
394
|
+
gap: "0.75rem",
|
|
395
|
+
padding: "0.75rem 1rem",
|
|
396
|
+
border: `1px solid ${socialBtnBorder}`,
|
|
397
|
+
borderRadius: "0.625rem",
|
|
398
|
+
backgroundColor: socialBtnBg,
|
|
399
|
+
color: textColor,
|
|
400
|
+
fontSize: "0.9375rem",
|
|
401
|
+
fontWeight: "600",
|
|
402
|
+
cursor: isLoading ? "not-allowed" : "pointer",
|
|
403
|
+
opacity: isLoading ? 0.7 : 1,
|
|
404
|
+
transition: "all 0.15s ease-in-out"
|
|
405
|
+
},
|
|
406
|
+
children: [
|
|
407
|
+
/* @__PURE__ */ jsx2("svg", { width: "18", height: "18", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx2("path", { d: "M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" }) }),
|
|
408
|
+
"Login with GitHub"
|
|
409
|
+
]
|
|
410
|
+
}
|
|
411
|
+
)
|
|
412
|
+
] }),
|
|
413
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "1rem", margin: "0.5rem 0" }, children: [
|
|
414
|
+
/* @__PURE__ */ jsx2("div", { style: { flex: 1, height: "1px", backgroundColor: dividerColor } }),
|
|
415
|
+
/* @__PURE__ */ jsx2("span", { style: { fontSize: "0.8125rem", color: subtextColor }, children: "Or continue with" }),
|
|
416
|
+
/* @__PURE__ */ jsx2("div", { style: { flex: 1, height: "1px", backgroundColor: dividerColor } })
|
|
417
|
+
] }),
|
|
418
|
+
showCredentials && /* @__PURE__ */ jsxs("form", { onSubmit: handleCredentialsSignIn, style: { display: "flex", flexDirection: "column", gap: "1.25rem" }, children: [
|
|
419
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
420
|
+
/* @__PURE__ */ jsx2(
|
|
421
|
+
"label",
|
|
332
422
|
{
|
|
423
|
+
htmlFor: "authtara-email",
|
|
333
424
|
style: {
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
425
|
+
display: "block",
|
|
426
|
+
marginBottom: "0.5rem",
|
|
427
|
+
fontSize: "0.9375rem",
|
|
428
|
+
fontWeight: "600",
|
|
429
|
+
color: textColor
|
|
430
|
+
},
|
|
431
|
+
children: "Email"
|
|
341
432
|
}
|
|
342
|
-
)
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
433
|
+
),
|
|
434
|
+
/* @__PURE__ */ jsx2(
|
|
435
|
+
"input",
|
|
436
|
+
{
|
|
437
|
+
id: "authtara-email",
|
|
438
|
+
type: "email",
|
|
439
|
+
value: email,
|
|
440
|
+
onChange: (e) => setEmail(e.target.value),
|
|
441
|
+
placeholder: "m@example.com",
|
|
442
|
+
disabled: isLoading,
|
|
443
|
+
required: true,
|
|
444
|
+
style: {
|
|
445
|
+
width: "100%",
|
|
446
|
+
padding: "0.75rem 1rem",
|
|
447
|
+
border: `1px solid ${inputBorderColor}`,
|
|
448
|
+
borderRadius: "0.625rem",
|
|
449
|
+
backgroundColor: inputBgColor,
|
|
450
|
+
color: textColor,
|
|
451
|
+
fontSize: "0.9375rem",
|
|
452
|
+
outline: "none",
|
|
453
|
+
boxSizing: "border-box",
|
|
454
|
+
transition: "border-color 0.15s ease-in-out"
|
|
355
455
|
}
|
|
356
|
-
|
|
456
|
+
}
|
|
457
|
+
)
|
|
458
|
+
] }),
|
|
459
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
460
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "0.5rem" }, children: [
|
|
357
461
|
/* @__PURE__ */ jsx2(
|
|
358
|
-
"
|
|
462
|
+
"label",
|
|
359
463
|
{
|
|
360
|
-
|
|
361
|
-
|
|
464
|
+
htmlFor: "authtara-password",
|
|
465
|
+
style: {
|
|
466
|
+
fontSize: "0.9375rem",
|
|
467
|
+
fontWeight: "600",
|
|
468
|
+
color: textColor
|
|
469
|
+
},
|
|
470
|
+
children: "Password"
|
|
362
471
|
}
|
|
363
472
|
),
|
|
364
473
|
/* @__PURE__ */ jsx2(
|
|
365
|
-
"
|
|
474
|
+
"a",
|
|
366
475
|
{
|
|
367
|
-
|
|
368
|
-
|
|
476
|
+
href: "#forgot-password",
|
|
477
|
+
style: {
|
|
478
|
+
fontSize: "0.875rem",
|
|
479
|
+
color: textColor,
|
|
480
|
+
textDecoration: "underline",
|
|
481
|
+
fontWeight: "500"
|
|
482
|
+
},
|
|
483
|
+
children: "Forgot your password?"
|
|
369
484
|
}
|
|
370
485
|
)
|
|
371
486
|
] }),
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
}
|
|
375
|
-
),
|
|
376
|
-
/* @__PURE__ */ jsxs(
|
|
377
|
-
"button",
|
|
378
|
-
{
|
|
379
|
-
onClick: () => handleSignIn("github"),
|
|
380
|
-
disabled: isLoading,
|
|
381
|
-
style: {
|
|
382
|
-
display: "flex",
|
|
383
|
-
alignItems: "center",
|
|
384
|
-
justifyContent: "center",
|
|
385
|
-
gap: "0.5rem",
|
|
386
|
-
padding: "0.75rem 1rem",
|
|
387
|
-
border: "1px solid #d1d5db",
|
|
388
|
-
borderRadius: "0.375rem",
|
|
389
|
-
backgroundColor: "#24292e",
|
|
390
|
-
color: "#ffffff",
|
|
391
|
-
fontSize: "0.875rem",
|
|
392
|
-
fontWeight: "500",
|
|
393
|
-
cursor: isLoading ? "not-allowed" : "pointer",
|
|
394
|
-
opacity: isLoading ? 0.6 : 1,
|
|
395
|
-
transition: "all 0.2s"
|
|
396
|
-
},
|
|
397
|
-
onMouseOver: (e) => {
|
|
398
|
-
if (!isLoading) {
|
|
399
|
-
e.currentTarget.style.backgroundColor = "#1b1f23";
|
|
400
|
-
}
|
|
401
|
-
},
|
|
402
|
-
onMouseOut: (e) => {
|
|
403
|
-
e.currentTarget.style.backgroundColor = "#24292e";
|
|
404
|
-
},
|
|
405
|
-
children: [
|
|
406
|
-
isProviderLoading("github") ? /* @__PURE__ */ jsx2(
|
|
407
|
-
"div",
|
|
487
|
+
/* @__PURE__ */ jsx2(
|
|
488
|
+
"input",
|
|
408
489
|
{
|
|
490
|
+
id: "authtara-password",
|
|
491
|
+
type: "password",
|
|
492
|
+
value: password,
|
|
493
|
+
onChange: (e) => setPassword(e.target.value),
|
|
494
|
+
placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
|
|
495
|
+
disabled: isLoading,
|
|
496
|
+
required: true,
|
|
409
497
|
style: {
|
|
410
|
-
width: "
|
|
411
|
-
|
|
412
|
-
border:
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
498
|
+
width: "100%",
|
|
499
|
+
padding: "0.75rem 1rem",
|
|
500
|
+
border: `1px solid ${inputBorderColor}`,
|
|
501
|
+
borderRadius: "0.625rem",
|
|
502
|
+
backgroundColor: inputBgColor,
|
|
503
|
+
color: textColor,
|
|
504
|
+
fontSize: "0.9375rem",
|
|
505
|
+
outline: "none",
|
|
506
|
+
boxSizing: "border-box",
|
|
507
|
+
transition: "border-color 0.15s ease-in-out"
|
|
416
508
|
}
|
|
417
509
|
}
|
|
418
|
-
)
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
510
|
+
)
|
|
511
|
+
] }),
|
|
512
|
+
/* @__PURE__ */ jsx2(
|
|
513
|
+
"button",
|
|
514
|
+
{
|
|
515
|
+
type: "submit",
|
|
516
|
+
disabled: isLoading,
|
|
517
|
+
style: {
|
|
518
|
+
width: "100%",
|
|
519
|
+
padding: "0.875rem 1rem",
|
|
520
|
+
border: "none",
|
|
521
|
+
borderRadius: "0.625rem",
|
|
522
|
+
backgroundColor: primaryBtnBg,
|
|
523
|
+
color: primaryBtnText,
|
|
524
|
+
fontSize: "0.9375rem",
|
|
525
|
+
fontWeight: "700",
|
|
526
|
+
cursor: isLoading ? "not-allowed" : "pointer",
|
|
527
|
+
opacity: isLoading ? 0.7 : 1,
|
|
528
|
+
transition: "all 0.15s ease-in-out",
|
|
529
|
+
marginTop: "0.5rem"
|
|
530
|
+
},
|
|
531
|
+
children: isCredentialsLoading ? "Logging in..." : "Login"
|
|
532
|
+
}
|
|
533
|
+
)
|
|
534
|
+
] }),
|
|
535
|
+
/* @__PURE__ */ jsx2("div", { style: { textAlign: "center", marginTop: "0.5rem" }, children: /* @__PURE__ */ jsxs("p", { style: { fontSize: "0.875rem", color: subtextColor }, children: [
|
|
536
|
+
"Don't have an account?",
|
|
537
|
+
" ",
|
|
538
|
+
/* @__PURE__ */ jsx2(
|
|
539
|
+
"a",
|
|
540
|
+
{
|
|
541
|
+
href: "#signup",
|
|
542
|
+
style: {
|
|
543
|
+
color: textColor,
|
|
544
|
+
textDecoration: "underline",
|
|
545
|
+
fontWeight: "600"
|
|
546
|
+
},
|
|
547
|
+
children: "Sign up"
|
|
548
|
+
}
|
|
549
|
+
)
|
|
550
|
+
] }) })
|
|
551
|
+
]
|
|
552
|
+
}
|
|
553
|
+
),
|
|
554
|
+
/* @__PURE__ */ jsx2("style", { children: `
|
|
555
|
+
.authtara-auth-card button:hover:not(:disabled) {
|
|
556
|
+
filter: brightness(0.95);
|
|
557
|
+
transform: translateY(-1px);
|
|
558
|
+
}
|
|
559
|
+
.authtara-auth-card button:active:not(:disabled) {
|
|
560
|
+
transform: translateY(0);
|
|
561
|
+
}
|
|
562
|
+
.authtara-auth-card input:focus {
|
|
563
|
+
border-color: ${textColor} !important;
|
|
564
|
+
}
|
|
565
|
+
@keyframes spin {
|
|
566
|
+
to { transform: rotate(360deg); }
|
|
567
|
+
}
|
|
568
|
+
` })
|
|
569
|
+
]
|
|
570
|
+
}
|
|
571
|
+
);
|
|
445
572
|
}
|
|
446
573
|
|
|
447
574
|
// src/components/AuthTaraBilling.tsx
|
package/package.json
CHANGED