@thetechfossil/auth2 1.2.1 → 1.2.3

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.
@@ -1,11 +1,12 @@
1
- import { useState, useEffect, useCallback } from 'react';
1
+ "use client";
2
+ import { createContext, useState, useEffect, useRef, useCallback, useContext } from 'react';
2
3
  import axios from 'axios';
3
4
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
4
5
 
5
- // src/react/components/LoginForm.tsx
6
6
  var HttpClient = class {
7
7
  constructor(baseUrl, defaultHeaders = {}) {
8
8
  this.csrfToken = null;
9
+ this.frontendBaseUrl = null;
9
10
  this.axiosInstance = axios.create({
10
11
  baseURL: baseUrl.replace(/\/$/, ""),
11
12
  headers: {
@@ -22,6 +23,9 @@ var HttpClient = class {
22
23
  if (this.csrfToken && ["post", "put", "delete", "patch"].includes(config.method?.toLowerCase() || "")) {
23
24
  config.headers["x-csrf-token"] = this.csrfToken;
24
25
  }
26
+ if (this.frontendBaseUrl) {
27
+ config.headers["X-Frontend-URL"] = this.frontendBaseUrl;
28
+ }
25
29
  return config;
26
30
  },
27
31
  (error) => Promise.reject(error)
@@ -77,6 +81,15 @@ var HttpClient = class {
77
81
  removeCsrfToken() {
78
82
  this.csrfToken = null;
79
83
  }
84
+ setFrontendBaseUrl(url) {
85
+ this.frontendBaseUrl = url;
86
+ }
87
+ getFrontendBaseUrl() {
88
+ return this.frontendBaseUrl;
89
+ }
90
+ removeFrontendBaseUrl() {
91
+ this.frontendBaseUrl = null;
92
+ }
80
93
  async refreshCsrfToken() {
81
94
  try {
82
95
  const response = await this.axiosInstance.get("/api/v1/auth/csrf-token");
@@ -99,6 +112,12 @@ var AuthService = class {
99
112
  };
100
113
  this.httpClient = new HttpClient(this.config.baseUrl);
101
114
  this.loadTokenFromStorage();
115
+ if (typeof window !== "undefined") {
116
+ const frontendBaseUrl = process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || process.env.NEXT_PUBLIC_APP_URL || window.location.origin;
117
+ if (frontendBaseUrl) {
118
+ this.httpClient.setFrontendBaseUrl(frontendBaseUrl);
119
+ }
120
+ }
102
121
  if (this.config.csrfEnabled && typeof window !== "undefined") {
103
122
  this.refreshCsrfToken();
104
123
  }
@@ -215,11 +234,7 @@ var AuthService = class {
215
234
  throw new Error(response.message || "Login failed");
216
235
  }
217
236
  async register(data) {
218
- const registerData = { ...data };
219
- if (!registerData.frontendBaseUrl && typeof window !== "undefined") {
220
- registerData.frontendBaseUrl = process.env.FRONTEND_BASE_URL || process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || process.env.NEXT_PUBLIC_APP_URL || window.location.origin;
221
- }
222
- const response = await this.httpClient.post("/api/v1/auth/register", registerData);
237
+ const response = await this.httpClient.post("/api/v1/auth/register", data);
223
238
  if (response.success && response.message === "Registration data saved. Verification email sent. Please check your inbox.") {
224
239
  return response;
225
240
  }
@@ -235,15 +250,33 @@ var AuthService = class {
235
250
  return response;
236
251
  }
237
252
  async verifyEmailToken(token) {
238
- const response = await this.httpClient.get(`/api/v1/auth/verify-email?token=${token}`);
239
- if (response.success && response.token) {
240
- this.token = response.token;
241
- this.httpClient.setAuthToken(response.token);
242
- this.saveTokenToStorage(response.token);
253
+ try {
254
+ const response = await this.httpClient.get(`/api/v1/auth/verify-email?token=${token}`);
255
+ if (response.success && response.token) {
256
+ this.token = response.token;
257
+ this.httpClient.setAuthToken(response.token);
258
+ this.saveTokenToStorage(response.token);
259
+ }
260
+ return response;
261
+ } catch (error) {
262
+ if (error.response?.data) {
263
+ return {
264
+ success: false,
265
+ message: error.response.data.message || "Email verification failed"
266
+ };
267
+ }
268
+ return {
269
+ success: false,
270
+ message: error.message || "Network error occurred"
271
+ };
243
272
  }
244
- return response;
245
273
  }
246
274
  async logout() {
275
+ try {
276
+ await this.httpClient.post("/api/v1/auth/logout", {});
277
+ } catch (error) {
278
+ console.warn("Failed to call logout endpoint:", error);
279
+ }
247
280
  this.token = null;
248
281
  this.httpClient.removeAuthToken();
249
282
  this.httpClient.removeCsrfToken();
@@ -280,9 +313,6 @@ var AuthService = class {
280
313
  return response.user;
281
314
  }
282
315
  async forgotPassword(email) {
283
- if (typeof window !== "undefined") {
284
- process.env.FRONTEND_BASE_URL || process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || process.env.NEXT_PUBLIC_APP_URL || window.location.origin;
285
- }
286
316
  const response = await this.httpClient.post("/api/v1/auth/forgot-password", { email });
287
317
  return response;
288
318
  }
@@ -290,6 +320,142 @@ var AuthService = class {
290
320
  const response = await this.httpClient.post("/api/v1/auth/reset-password", { token, password });
291
321
  return response;
292
322
  }
323
+ async changePassword(oldPassword, newPassword) {
324
+ if (!this.token) {
325
+ throw new Error("Not authenticated");
326
+ }
327
+ const response = await this.httpClient.post("/api/v1/user/change-password", {
328
+ oldPassword,
329
+ newPassword
330
+ });
331
+ return response;
332
+ }
333
+ async updateAvatar(avatar) {
334
+ if (!this.token) {
335
+ throw new Error("Not authenticated");
336
+ }
337
+ const response = await this.httpClient.post("/api/v1/user/update/avatar", { avatar });
338
+ if (response.success && response.token) {
339
+ this.token = response.token;
340
+ this.httpClient.setAuthToken(response.token);
341
+ this.saveTokenToStorage(response.token);
342
+ }
343
+ return response;
344
+ }
345
+ async requestEmailChange(newEmail) {
346
+ if (!this.token) {
347
+ throw new Error("Not authenticated");
348
+ }
349
+ const response = await this.httpClient.post("/api/v1/user/request-email-change", {
350
+ newEmail
351
+ });
352
+ return response;
353
+ }
354
+ async verifyEmailChange(token) {
355
+ const response = await this.httpClient.get(`/api/v1/user/verify-email-change?token=${token}`);
356
+ if (response.success && response.token) {
357
+ this.token = response.token;
358
+ this.httpClient.setAuthToken(response.token);
359
+ this.saveTokenToStorage(response.token);
360
+ }
361
+ return response;
362
+ }
363
+ // 2FA / MFA Methods
364
+ async generate2FA() {
365
+ if (!this.token) {
366
+ throw new Error("Not authenticated");
367
+ }
368
+ const response = await this.httpClient.post(
369
+ "/api/v1/mfa/generate",
370
+ {}
371
+ );
372
+ return response;
373
+ }
374
+ async enable2FA(token) {
375
+ if (!this.token) {
376
+ throw new Error("Not authenticated");
377
+ }
378
+ const response = await this.httpClient.post("/api/v1/mfa/enable", { token });
379
+ return response;
380
+ }
381
+ async disable2FA(token) {
382
+ if (!this.token) {
383
+ throw new Error("Not authenticated");
384
+ }
385
+ const response = await this.httpClient.post("/api/v1/mfa/disable", { token });
386
+ return response;
387
+ }
388
+ async validate2FA(token) {
389
+ if (!this.token) {
390
+ throw new Error("Not authenticated");
391
+ }
392
+ const response = await this.httpClient.post("/api/v1/mfa/validate", { token });
393
+ return response;
394
+ }
395
+ // Session Management Methods
396
+ async getSessions() {
397
+ if (!this.token) {
398
+ throw new Error("Not authenticated");
399
+ }
400
+ const response = await this.httpClient.get("/api/v1/sessions");
401
+ return response;
402
+ }
403
+ async revokeSession(sessionId) {
404
+ if (!this.token) {
405
+ throw new Error("Not authenticated");
406
+ }
407
+ const response = await this.httpClient.delete(`/api/v1/sessions/${sessionId}`);
408
+ return response;
409
+ }
410
+ async revokeAllSessions() {
411
+ if (!this.token) {
412
+ throw new Error("Not authenticated");
413
+ }
414
+ const response = await this.httpClient.delete("/api/v1/sessions/revoke/all");
415
+ this.token = null;
416
+ this.httpClient.removeAuthToken();
417
+ this.removeTokenFromStorage();
418
+ return response;
419
+ }
420
+ // Admin Methods
421
+ async getAuditLogs(filters) {
422
+ if (!this.token) {
423
+ throw new Error("Not authenticated");
424
+ }
425
+ const response = await this.httpClient.get(
426
+ "/api/v1/admin/audit-logs",
427
+ filters
428
+ );
429
+ return response;
430
+ }
431
+ async adminVerifyUser(userId) {
432
+ if (!this.token) {
433
+ throw new Error("Not authenticated");
434
+ }
435
+ const response = await this.httpClient.post(`/api/v1/admin/verify-user/${userId}`, {});
436
+ return response;
437
+ }
438
+ async adminForcePasswordReset(userId) {
439
+ if (!this.token) {
440
+ throw new Error("Not authenticated");
441
+ }
442
+ const response = await this.httpClient.post(`/api/v1/admin/force-password-reset/${userId}`, {});
443
+ return response;
444
+ }
445
+ async adminSuspendUser(userId) {
446
+ if (!this.token) {
447
+ throw new Error("Not authenticated");
448
+ }
449
+ const response = await this.httpClient.post(`/api/v1/admin/suspend-user/${userId}`, {});
450
+ return response;
451
+ }
452
+ async adminActivateUser(userId) {
453
+ if (!this.token) {
454
+ throw new Error("Not authenticated");
455
+ }
456
+ const response = await this.httpClient.post(`/api/v1/admin/activate-user/${userId}`, {});
457
+ return response;
458
+ }
293
459
  };
294
460
 
295
461
  // src/react/use-auth.ts
@@ -315,11 +481,7 @@ var useAuth = (config) => {
315
481
  const register = useCallback(async (data) => {
316
482
  setLoading(true);
317
483
  try {
318
- const registerData = { ...data };
319
- if (!registerData.frontendBaseUrl && typeof window !== "undefined") {
320
- registerData.frontendBaseUrl = process.env.REACT_APP_FRONTEND_BASE_URL || process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.NEXT_PUBLIC_APP_URL || window.location.origin;
321
- }
322
- const response = await authService.register(registerData);
484
+ const response = await authService.register(data);
323
485
  return response;
324
486
  } finally {
325
487
  setLoading(false);
@@ -1741,7 +1903,1810 @@ var EmailVerificationPage = ({
1741
1903
  ] })
1742
1904
  ] }) });
1743
1905
  };
1906
+ var AuthContext = createContext(void 0);
1907
+ var useAuth2 = () => {
1908
+ const context = useContext(AuthContext);
1909
+ if (context === void 0) {
1910
+ throw new Error("useAuth must be used within an AuthProvider");
1911
+ }
1912
+ return context;
1913
+ };
1914
+ var SignIn = ({ redirectUrl, appearance }) => {
1915
+ const { signIn, isSignedIn, loading: authLoading } = useAuth2();
1916
+ const [email, setEmail] = useState("");
1917
+ const [password, setPassword] = useState("");
1918
+ const [otp, setOtp] = useState("");
1919
+ const [usePassword, setUsePassword] = useState(false);
1920
+ const [showPassword, setShowPassword] = useState(false);
1921
+ const [isLoading, setIsLoading] = useState(false);
1922
+ const [error, setError] = useState(null);
1923
+ const [needsOtp, setNeedsOtp] = useState(false);
1924
+ const [success, setSuccess] = useState(null);
1925
+ useEffect(() => {
1926
+ if (isSignedIn && redirectUrl) {
1927
+ const redirect = redirectUrl || process.env.NEXT_PUBLIC_AUTH_REDIRECT_AFTER_LOGIN || process.env.REACT_APP_AUTH_REDIRECT_AFTER_LOGIN || "/dashboard";
1928
+ const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || (typeof window !== "undefined" ? window.location.origin : "");
1929
+ window.location.href = `${baseUrl}${redirect}`;
1930
+ }
1931
+ }, [isSignedIn, redirectUrl]);
1932
+ const handleSubmit = async (e) => {
1933
+ e.preventDefault();
1934
+ setIsLoading(true);
1935
+ setError(null);
1936
+ setSuccess(null);
1937
+ try {
1938
+ if (needsOtp) {
1939
+ const response = await signIn({ email, otp });
1940
+ if (response.success) {
1941
+ setSuccess("Login successful!");
1942
+ } else {
1943
+ setError(response.message || "OTP verification failed");
1944
+ }
1945
+ } else if (usePassword) {
1946
+ const response = await signIn({ email, password });
1947
+ if (response.success) {
1948
+ setSuccess("Login successful!");
1949
+ } else {
1950
+ setError(response.message || "Login failed");
1951
+ }
1952
+ } else {
1953
+ const response = await signIn({ email });
1954
+ if (response.success && response.message === "OTP sent to your email.") {
1955
+ setNeedsOtp(true);
1956
+ setSuccess("OTP sent to your email. Please check your inbox.");
1957
+ } else {
1958
+ setError(response.message || "Failed to send OTP");
1959
+ }
1960
+ }
1961
+ } catch (err) {
1962
+ setError(err instanceof Error ? err.message : "An error occurred");
1963
+ } finally {
1964
+ setIsLoading(false);
1965
+ }
1966
+ };
1967
+ const toggleAuthMethod = () => {
1968
+ setUsePassword(!usePassword);
1969
+ setNeedsOtp(false);
1970
+ setError(null);
1971
+ setSuccess(null);
1972
+ setOtp("");
1973
+ };
1974
+ if (authLoading) {
1975
+ return /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: "40px" }, children: /* @__PURE__ */ jsx("div", { children: "Loading..." }) });
1976
+ }
1977
+ return /* @__PURE__ */ jsx("div", { style: {
1978
+ maxWidth: "400px",
1979
+ margin: "0 auto",
1980
+ padding: "30px",
1981
+ borderRadius: "12px",
1982
+ boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
1983
+ backgroundColor: "#ffffff",
1984
+ border: "1px solid #eaeaea",
1985
+ ...appearance?.elements?.card
1986
+ }, children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
1987
+ /* @__PURE__ */ jsx("h2", { style: {
1988
+ textAlign: "center",
1989
+ marginBottom: "24px",
1990
+ color: "#1f2937",
1991
+ fontSize: "24px",
1992
+ fontWeight: 600,
1993
+ ...appearance?.elements?.headerTitle
1994
+ }, children: needsOtp ? "Enter OTP" : usePassword ? "Sign in with password" : "Sign in" }),
1995
+ error && /* @__PURE__ */ jsx("div", { style: {
1996
+ padding: "12px 16px",
1997
+ marginBottom: "20px",
1998
+ backgroundColor: "#fee",
1999
+ color: "#c33",
2000
+ border: "1px solid #fcc",
2001
+ borderRadius: "8px",
2002
+ fontSize: "14px"
2003
+ }, children: error }),
2004
+ success && /* @__PURE__ */ jsx("div", { style: {
2005
+ padding: "12px 16px",
2006
+ marginBottom: "20px",
2007
+ backgroundColor: "#efe",
2008
+ color: "#3c3",
2009
+ border: "1px solid #cfc",
2010
+ borderRadius: "8px",
2011
+ fontSize: "14px"
2012
+ }, children: success }),
2013
+ !needsOtp && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
2014
+ /* @__PURE__ */ jsx("label", { htmlFor: "email", style: {
2015
+ display: "block",
2016
+ marginBottom: "8px",
2017
+ fontWeight: 500,
2018
+ color: "#374151",
2019
+ fontSize: "14px"
2020
+ }, children: "Email" }),
2021
+ /* @__PURE__ */ jsx(
2022
+ "input",
2023
+ {
2024
+ id: "email",
2025
+ type: "email",
2026
+ value: email,
2027
+ onChange: (e) => setEmail(e.target.value),
2028
+ required: true,
2029
+ disabled: isLoading,
2030
+ style: {
2031
+ width: "100%",
2032
+ padding: "12px 16px",
2033
+ border: "1px solid #ddd",
2034
+ borderRadius: "8px",
2035
+ fontSize: "16px",
2036
+ boxSizing: "border-box",
2037
+ ...appearance?.elements?.formFieldInput
2038
+ },
2039
+ placeholder: "Enter your email"
2040
+ }
2041
+ )
2042
+ ] }),
2043
+ usePassword && !needsOtp && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px", position: "relative" }, children: [
2044
+ /* @__PURE__ */ jsx("label", { htmlFor: "password", style: {
2045
+ display: "block",
2046
+ marginBottom: "8px",
2047
+ fontWeight: 500,
2048
+ color: "#374151",
2049
+ fontSize: "14px"
2050
+ }, children: "Password" }),
2051
+ /* @__PURE__ */ jsx(
2052
+ "input",
2053
+ {
2054
+ id: "password",
2055
+ type: showPassword ? "text" : "password",
2056
+ value: password,
2057
+ onChange: (e) => setPassword(e.target.value),
2058
+ required: true,
2059
+ disabled: isLoading,
2060
+ style: {
2061
+ width: "100%",
2062
+ padding: "12px 16px",
2063
+ border: "1px solid #ddd",
2064
+ borderRadius: "8px",
2065
+ fontSize: "16px",
2066
+ boxSizing: "border-box",
2067
+ ...appearance?.elements?.formFieldInput
2068
+ },
2069
+ placeholder: "Enter your password"
2070
+ }
2071
+ ),
2072
+ /* @__PURE__ */ jsx(
2073
+ "button",
2074
+ {
2075
+ type: "button",
2076
+ onClick: () => setShowPassword(!showPassword),
2077
+ style: {
2078
+ position: "absolute",
2079
+ right: "12px",
2080
+ top: "38px",
2081
+ background: "none",
2082
+ border: "none",
2083
+ cursor: "pointer",
2084
+ color: "#666",
2085
+ fontSize: "14px"
2086
+ },
2087
+ children: showPassword ? "Hide" : "Show"
2088
+ }
2089
+ )
2090
+ ] }),
2091
+ needsOtp && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
2092
+ /* @__PURE__ */ jsx("label", { htmlFor: "otp", style: {
2093
+ display: "block",
2094
+ marginBottom: "8px",
2095
+ fontWeight: 500,
2096
+ color: "#374151",
2097
+ fontSize: "14px"
2098
+ }, children: "One-Time Password" }),
2099
+ /* @__PURE__ */ jsx(
2100
+ "input",
2101
+ {
2102
+ id: "otp",
2103
+ type: "text",
2104
+ value: otp,
2105
+ onChange: (e) => setOtp(e.target.value),
2106
+ required: true,
2107
+ disabled: isLoading,
2108
+ maxLength: 6,
2109
+ style: {
2110
+ width: "100%",
2111
+ padding: "12px 16px",
2112
+ border: "1px solid #ddd",
2113
+ borderRadius: "8px",
2114
+ fontSize: "16px",
2115
+ boxSizing: "border-box",
2116
+ letterSpacing: "0.5em",
2117
+ textAlign: "center",
2118
+ ...appearance?.elements?.formFieldInput
2119
+ },
2120
+ placeholder: "000000"
2121
+ }
2122
+ )
2123
+ ] }),
2124
+ /* @__PURE__ */ jsx(
2125
+ "button",
2126
+ {
2127
+ type: "submit",
2128
+ disabled: isLoading,
2129
+ style: {
2130
+ width: "100%",
2131
+ padding: "14px",
2132
+ backgroundColor: "#007bff",
2133
+ color: "white",
2134
+ border: "none",
2135
+ borderRadius: "8px",
2136
+ fontSize: "16px",
2137
+ fontWeight: 600,
2138
+ cursor: "pointer",
2139
+ transition: "all 0.2s ease",
2140
+ ...appearance?.elements?.formButtonPrimary
2141
+ },
2142
+ children: isLoading ? "Please wait..." : needsOtp ? "Verify OTP" : usePassword ? "Sign in" : "Continue with email"
2143
+ }
2144
+ ),
2145
+ !needsOtp && /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginTop: "16px" }, children: /* @__PURE__ */ jsx(
2146
+ "button",
2147
+ {
2148
+ type: "button",
2149
+ onClick: toggleAuthMethod,
2150
+ disabled: isLoading,
2151
+ style: {
2152
+ background: "none",
2153
+ border: "none",
2154
+ color: "#007bff",
2155
+ cursor: "pointer",
2156
+ fontSize: "14px",
2157
+ fontWeight: 600
2158
+ },
2159
+ children: usePassword ? "Use email code instead" : "Use password instead"
2160
+ }
2161
+ ) }),
2162
+ needsOtp && /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginTop: "16px" }, children: /* @__PURE__ */ jsx(
2163
+ "button",
2164
+ {
2165
+ type: "button",
2166
+ onClick: () => {
2167
+ setNeedsOtp(false);
2168
+ setOtp("");
2169
+ setError(null);
2170
+ setSuccess(null);
2171
+ },
2172
+ disabled: isLoading,
2173
+ style: {
2174
+ background: "none",
2175
+ border: "none",
2176
+ color: "#007bff",
2177
+ cursor: "pointer",
2178
+ fontSize: "14px",
2179
+ fontWeight: 600
2180
+ },
2181
+ children: "Back to sign in"
2182
+ }
2183
+ ) })
2184
+ ] }) });
2185
+ };
2186
+ var SignUp = ({ redirectUrl, appearance }) => {
2187
+ const { signUp, isSignedIn } = useAuth2();
2188
+ const [name, setName] = useState("");
2189
+ const [email, setEmail] = useState("");
2190
+ const [password, setPassword] = useState("");
2191
+ const [confirmPassword, setConfirmPassword] = useState("");
2192
+ const [showPassword, setShowPassword] = useState(false);
2193
+ const [isLoading, setIsLoading] = useState(false);
2194
+ const [error, setError] = useState(null);
2195
+ const [success, setSuccess] = useState(null);
2196
+ useEffect(() => {
2197
+ if (isSignedIn && redirectUrl) {
2198
+ const redirect = redirectUrl || process.env.NEXT_PUBLIC_AUTH_REDIRECT_AFTER_REGISTER || process.env.REACT_APP_AUTH_REDIRECT_AFTER_REGISTER || "/dashboard";
2199
+ const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || (typeof window !== "undefined" ? window.location.origin : "");
2200
+ window.location.href = `${baseUrl}${redirect}`;
2201
+ }
2202
+ }, [isSignedIn, redirectUrl]);
2203
+ const getPasswordStrength = (pwd) => {
2204
+ if (!pwd)
2205
+ return { strength: "weak", color: "#ddd" };
2206
+ let score = 0;
2207
+ if (pwd.length >= 6)
2208
+ score++;
2209
+ if (pwd.length >= 8)
2210
+ score++;
2211
+ if (/[a-z]/.test(pwd) && /[A-Z]/.test(pwd))
2212
+ score++;
2213
+ if (/\d/.test(pwd))
2214
+ score++;
2215
+ if (/[^a-zA-Z\d]/.test(pwd))
2216
+ score++;
2217
+ if (score <= 2)
2218
+ return { strength: "weak", color: "#f44" };
2219
+ if (score <= 3)
2220
+ return { strength: "medium", color: "#fa4" };
2221
+ return { strength: "strong", color: "#4f4" };
2222
+ };
2223
+ const passwordStrength = getPasswordStrength(password);
2224
+ const handleSubmit = async (e) => {
2225
+ e.preventDefault();
2226
+ setIsLoading(true);
2227
+ setError(null);
2228
+ setSuccess(null);
2229
+ if (password !== confirmPassword) {
2230
+ setError("Passwords do not match");
2231
+ setIsLoading(false);
2232
+ return;
2233
+ }
2234
+ if (password.length < 6) {
2235
+ setError("Password must be at least 6 characters");
2236
+ setIsLoading(false);
2237
+ return;
2238
+ }
2239
+ try {
2240
+ const response = await signUp({ name, email, password });
2241
+ if (response.success) {
2242
+ setSuccess("Registration successful! Please check your email to verify your account.");
2243
+ } else {
2244
+ setError(response.message || "Registration failed");
2245
+ }
2246
+ } catch (err) {
2247
+ setError(err instanceof Error ? err.message : "An error occurred");
2248
+ } finally {
2249
+ setIsLoading(false);
2250
+ }
2251
+ };
2252
+ return /* @__PURE__ */ jsx("div", { style: {
2253
+ maxWidth: "400px",
2254
+ margin: "0 auto",
2255
+ padding: "30px",
2256
+ borderRadius: "12px",
2257
+ boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
2258
+ backgroundColor: "#ffffff",
2259
+ border: "1px solid #eaeaea",
2260
+ ...appearance?.elements?.card
2261
+ }, children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
2262
+ /* @__PURE__ */ jsx("h2", { style: {
2263
+ textAlign: "center",
2264
+ marginBottom: "24px",
2265
+ color: "#1f2937",
2266
+ fontSize: "24px",
2267
+ fontWeight: 600,
2268
+ ...appearance?.elements?.headerTitle
2269
+ }, children: "Create your account" }),
2270
+ error && /* @__PURE__ */ jsx("div", { style: {
2271
+ padding: "12px 16px",
2272
+ marginBottom: "20px",
2273
+ backgroundColor: "#fee",
2274
+ color: "#c33",
2275
+ border: "1px solid #fcc",
2276
+ borderRadius: "8px",
2277
+ fontSize: "14px"
2278
+ }, children: error }),
2279
+ success && /* @__PURE__ */ jsx("div", { style: {
2280
+ padding: "12px 16px",
2281
+ marginBottom: "20px",
2282
+ backgroundColor: "#efe",
2283
+ color: "#3c3",
2284
+ border: "1px solid #cfc",
2285
+ borderRadius: "8px",
2286
+ fontSize: "14px"
2287
+ }, children: success }),
2288
+ /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
2289
+ /* @__PURE__ */ jsx("label", { htmlFor: "name", style: {
2290
+ display: "block",
2291
+ marginBottom: "8px",
2292
+ fontWeight: 500,
2293
+ color: "#374151",
2294
+ fontSize: "14px"
2295
+ }, children: "Full name" }),
2296
+ /* @__PURE__ */ jsx(
2297
+ "input",
2298
+ {
2299
+ id: "name",
2300
+ type: "text",
2301
+ value: name,
2302
+ onChange: (e) => setName(e.target.value),
2303
+ required: true,
2304
+ disabled: isLoading,
2305
+ style: {
2306
+ width: "100%",
2307
+ padding: "12px 16px",
2308
+ border: "1px solid #ddd",
2309
+ borderRadius: "8px",
2310
+ fontSize: "16px",
2311
+ boxSizing: "border-box",
2312
+ ...appearance?.elements?.formFieldInput
2313
+ },
2314
+ placeholder: "Enter your full name"
2315
+ }
2316
+ )
2317
+ ] }),
2318
+ /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
2319
+ /* @__PURE__ */ jsx("label", { htmlFor: "email", style: {
2320
+ display: "block",
2321
+ marginBottom: "8px",
2322
+ fontWeight: 500,
2323
+ color: "#374151",
2324
+ fontSize: "14px"
2325
+ }, children: "Email" }),
2326
+ /* @__PURE__ */ jsx(
2327
+ "input",
2328
+ {
2329
+ id: "email",
2330
+ type: "email",
2331
+ value: email,
2332
+ onChange: (e) => setEmail(e.target.value),
2333
+ required: true,
2334
+ disabled: isLoading,
2335
+ style: {
2336
+ width: "100%",
2337
+ padding: "12px 16px",
2338
+ border: "1px solid #ddd",
2339
+ borderRadius: "8px",
2340
+ fontSize: "16px",
2341
+ boxSizing: "border-box",
2342
+ ...appearance?.elements?.formFieldInput
2343
+ },
2344
+ placeholder: "Enter your email"
2345
+ }
2346
+ )
2347
+ ] }),
2348
+ /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px", position: "relative" }, children: [
2349
+ /* @__PURE__ */ jsx("label", { htmlFor: "password", style: {
2350
+ display: "block",
2351
+ marginBottom: "8px",
2352
+ fontWeight: 500,
2353
+ color: "#374151",
2354
+ fontSize: "14px"
2355
+ }, children: "Password" }),
2356
+ /* @__PURE__ */ jsx(
2357
+ "input",
2358
+ {
2359
+ id: "password",
2360
+ type: showPassword ? "text" : "password",
2361
+ value: password,
2362
+ onChange: (e) => setPassword(e.target.value),
2363
+ required: true,
2364
+ disabled: isLoading,
2365
+ minLength: 6,
2366
+ style: {
2367
+ width: "100%",
2368
+ padding: "12px 16px",
2369
+ border: "1px solid #ddd",
2370
+ borderRadius: "8px",
2371
+ fontSize: "16px",
2372
+ boxSizing: "border-box",
2373
+ ...appearance?.elements?.formFieldInput
2374
+ },
2375
+ placeholder: "Create a password"
2376
+ }
2377
+ ),
2378
+ /* @__PURE__ */ jsx(
2379
+ "button",
2380
+ {
2381
+ type: "button",
2382
+ onClick: () => setShowPassword(!showPassword),
2383
+ style: {
2384
+ position: "absolute",
2385
+ right: "12px",
2386
+ top: "38px",
2387
+ background: "none",
2388
+ border: "none",
2389
+ cursor: "pointer",
2390
+ color: "#666",
2391
+ fontSize: "14px"
2392
+ },
2393
+ children: showPassword ? "Hide" : "Show"
2394
+ }
2395
+ ),
2396
+ password && /* @__PURE__ */ jsxs("div", { style: { marginTop: "8px" }, children: [
2397
+ /* @__PURE__ */ jsx("div", { style: {
2398
+ height: "4px",
2399
+ backgroundColor: "#eee",
2400
+ borderRadius: "2px",
2401
+ overflow: "hidden"
2402
+ }, children: /* @__PURE__ */ jsx("div", { style: {
2403
+ height: "100%",
2404
+ width: passwordStrength.strength === "weak" ? "33%" : passwordStrength.strength === "medium" ? "66%" : "100%",
2405
+ backgroundColor: passwordStrength.color,
2406
+ transition: "all 0.3s ease"
2407
+ } }) }),
2408
+ /* @__PURE__ */ jsxs("p", { style: {
2409
+ fontSize: "12px",
2410
+ color: passwordStrength.color,
2411
+ marginTop: "4px",
2412
+ textTransform: "capitalize"
2413
+ }, children: [
2414
+ passwordStrength.strength,
2415
+ " password"
2416
+ ] })
2417
+ ] })
2418
+ ] }),
2419
+ /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
2420
+ /* @__PURE__ */ jsx("label", { htmlFor: "confirmPassword", style: {
2421
+ display: "block",
2422
+ marginBottom: "8px",
2423
+ fontWeight: 500,
2424
+ color: "#374151",
2425
+ fontSize: "14px"
2426
+ }, children: "Confirm password" }),
2427
+ /* @__PURE__ */ jsx(
2428
+ "input",
2429
+ {
2430
+ id: "confirmPassword",
2431
+ type: showPassword ? "text" : "password",
2432
+ value: confirmPassword,
2433
+ onChange: (e) => setConfirmPassword(e.target.value),
2434
+ required: true,
2435
+ disabled: isLoading,
2436
+ style: {
2437
+ width: "100%",
2438
+ padding: "12px 16px",
2439
+ border: "1px solid #ddd",
2440
+ borderRadius: "8px",
2441
+ fontSize: "16px",
2442
+ boxSizing: "border-box",
2443
+ ...appearance?.elements?.formFieldInput
2444
+ },
2445
+ placeholder: "Confirm your password"
2446
+ }
2447
+ )
2448
+ ] }),
2449
+ /* @__PURE__ */ jsx(
2450
+ "button",
2451
+ {
2452
+ type: "submit",
2453
+ disabled: isLoading,
2454
+ style: {
2455
+ width: "100%",
2456
+ padding: "14px",
2457
+ backgroundColor: "#007bff",
2458
+ color: "white",
2459
+ border: "none",
2460
+ borderRadius: "8px",
2461
+ fontSize: "16px",
2462
+ fontWeight: 600,
2463
+ cursor: "pointer",
2464
+ transition: "all 0.2s ease",
2465
+ ...appearance?.elements?.formButtonPrimary
2466
+ },
2467
+ children: isLoading ? "Creating account..." : "Sign up"
2468
+ }
2469
+ )
2470
+ ] }) });
2471
+ };
2472
+ var SignOut = ({ redirectUrl }) => {
2473
+ const { signOut } = useAuth2();
2474
+ useEffect(() => {
2475
+ const performSignOut = async () => {
2476
+ await signOut();
2477
+ const redirect = redirectUrl || process.env.NEXT_PUBLIC_AUTH_REDIRECT_AFTER_LOGOUT || process.env.REACT_APP_AUTH_REDIRECT_AFTER_LOGOUT || "/";
2478
+ const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || (typeof window !== "undefined" ? window.location.origin : "");
2479
+ window.location.href = `${baseUrl}${redirect}`;
2480
+ };
2481
+ performSignOut();
2482
+ }, [signOut, redirectUrl]);
2483
+ return /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: "40px" }, children: /* @__PURE__ */ jsx("div", { children: "Signing out..." }) });
2484
+ };
2485
+ var UserButton = ({ showName = false, appearance }) => {
2486
+ const { user, signOut } = useAuth2();
2487
+ const [isOpen, setIsOpen] = useState(false);
2488
+ const dropdownRef = useRef(null);
2489
+ useEffect(() => {
2490
+ const handleClickOutside = (event) => {
2491
+ if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
2492
+ setIsOpen(false);
2493
+ }
2494
+ };
2495
+ document.addEventListener("mousedown", handleClickOutside);
2496
+ return () => document.removeEventListener("mousedown", handleClickOutside);
2497
+ }, []);
2498
+ if (!user)
2499
+ return null;
2500
+ const getInitials = (name) => {
2501
+ return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
2502
+ };
2503
+ const handleSignOut = async () => {
2504
+ await signOut();
2505
+ const redirect = process.env.NEXT_PUBLIC_AUTH_REDIRECT_AFTER_LOGOUT || process.env.REACT_APP_AUTH_REDIRECT_AFTER_LOGOUT || "/";
2506
+ const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || (typeof window !== "undefined" ? window.location.origin : "");
2507
+ window.location.href = `${baseUrl}${redirect}`;
2508
+ };
2509
+ return /* @__PURE__ */ jsxs("div", { style: { position: "relative", ...appearance?.elements?.userButtonBox }, ref: dropdownRef, children: [
2510
+ /* @__PURE__ */ jsxs(
2511
+ "button",
2512
+ {
2513
+ onClick: () => setIsOpen(!isOpen),
2514
+ style: {
2515
+ display: "flex",
2516
+ alignItems: "center",
2517
+ gap: "8px",
2518
+ padding: "6px",
2519
+ backgroundColor: "transparent",
2520
+ border: "none",
2521
+ borderRadius: "8px",
2522
+ cursor: "pointer",
2523
+ transition: "background-color 0.2s",
2524
+ ...appearance?.elements?.userButtonTrigger
2525
+ },
2526
+ onMouseEnter: (e) => {
2527
+ e.currentTarget.style.backgroundColor = "#f5f5f5";
2528
+ },
2529
+ onMouseLeave: (e) => {
2530
+ e.currentTarget.style.backgroundColor = "transparent";
2531
+ },
2532
+ children: [
2533
+ /* @__PURE__ */ jsx("div", { style: {
2534
+ width: "36px",
2535
+ height: "36px",
2536
+ borderRadius: "50%",
2537
+ backgroundColor: "#007bff",
2538
+ color: "white",
2539
+ display: "flex",
2540
+ alignItems: "center",
2541
+ justifyContent: "center",
2542
+ fontSize: "14px",
2543
+ fontWeight: 600
2544
+ }, children: getInitials(user.name) }),
2545
+ showName && /* @__PURE__ */ jsx("span", { style: { fontSize: "14px", fontWeight: 500, color: "#333" }, children: user.name })
2546
+ ]
2547
+ }
2548
+ ),
2549
+ isOpen && /* @__PURE__ */ jsxs("div", { style: {
2550
+ position: "absolute",
2551
+ top: "100%",
2552
+ right: 0,
2553
+ marginTop: "8px",
2554
+ width: "240px",
2555
+ backgroundColor: "white",
2556
+ borderRadius: "12px",
2557
+ boxShadow: "0 4px 20px rgba(0, 0, 0, 0.15)",
2558
+ border: "1px solid #eaeaea",
2559
+ zIndex: 1e3,
2560
+ ...appearance?.elements?.userButtonPopoverCard
2561
+ }, children: [
2562
+ /* @__PURE__ */ jsx("div", { style: {
2563
+ padding: "16px",
2564
+ borderBottom: "1px solid #eee"
2565
+ }, children: /* @__PURE__ */ jsxs("div", { style: {
2566
+ display: "flex",
2567
+ alignItems: "center",
2568
+ gap: "12px"
2569
+ }, children: [
2570
+ /* @__PURE__ */ jsx("div", { style: {
2571
+ width: "48px",
2572
+ height: "48px",
2573
+ borderRadius: "50%",
2574
+ backgroundColor: "#007bff",
2575
+ color: "white",
2576
+ display: "flex",
2577
+ alignItems: "center",
2578
+ justifyContent: "center",
2579
+ fontSize: "18px",
2580
+ fontWeight: 600
2581
+ }, children: getInitials(user.name) }),
2582
+ /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
2583
+ /* @__PURE__ */ jsx("div", { style: {
2584
+ fontSize: "14px",
2585
+ fontWeight: 600,
2586
+ color: "#333",
2587
+ overflow: "hidden",
2588
+ textOverflow: "ellipsis",
2589
+ whiteSpace: "nowrap"
2590
+ }, children: user.name }),
2591
+ /* @__PURE__ */ jsx("div", { style: {
2592
+ fontSize: "12px",
2593
+ color: "#666",
2594
+ overflow: "hidden",
2595
+ textOverflow: "ellipsis",
2596
+ whiteSpace: "nowrap"
2597
+ }, children: user.email })
2598
+ ] })
2599
+ ] }) }),
2600
+ /* @__PURE__ */ jsx("div", { style: { padding: "8px" }, children: /* @__PURE__ */ jsx(
2601
+ "button",
2602
+ {
2603
+ onClick: handleSignOut,
2604
+ style: {
2605
+ width: "100%",
2606
+ padding: "10px 16px",
2607
+ backgroundColor: "transparent",
2608
+ border: "none",
2609
+ borderRadius: "8px",
2610
+ textAlign: "left",
2611
+ cursor: "pointer",
2612
+ fontSize: "14px",
2613
+ color: "#333",
2614
+ fontWeight: 500,
2615
+ transition: "background-color 0.2s"
2616
+ },
2617
+ onMouseEnter: (e) => {
2618
+ e.currentTarget.style.backgroundColor = "#f5f5f5";
2619
+ },
2620
+ onMouseLeave: (e) => {
2621
+ e.currentTarget.style.backgroundColor = "transparent";
2622
+ },
2623
+ children: "Sign out"
2624
+ }
2625
+ ) })
2626
+ ] })
2627
+ ] });
2628
+ };
2629
+ var ProtectedRoute = ({
2630
+ children,
2631
+ fallback,
2632
+ redirectTo
2633
+ }) => {
2634
+ const { isSignedIn, isLoaded } = useAuth2();
2635
+ useEffect(() => {
2636
+ if (isLoaded && !isSignedIn) {
2637
+ const loginPath = redirectTo || process.env.NEXT_PUBLIC_AUTH_REDIRECT_TO_LOGIN || process.env.REACT_APP_AUTH_REDIRECT_TO_LOGIN || "/auth/login";
2638
+ const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || (typeof window !== "undefined" ? window.location.origin : "");
2639
+ window.location.href = `${baseUrl}${loginPath}`;
2640
+ }
2641
+ }, [isSignedIn, isLoaded, redirectTo]);
2642
+ if (!isLoaded) {
2643
+ return fallback || /* @__PURE__ */ jsx("div", { style: {
2644
+ display: "flex",
2645
+ justifyContent: "center",
2646
+ alignItems: "center",
2647
+ minHeight: "100vh"
2648
+ }, children: /* @__PURE__ */ jsx("div", { children: "Loading..." }) });
2649
+ }
2650
+ if (!isSignedIn) {
2651
+ return fallback || null;
2652
+ }
2653
+ return /* @__PURE__ */ jsx(Fragment, { children });
2654
+ };
2655
+ var PublicRoute = ({
2656
+ children,
2657
+ redirectTo
2658
+ }) => {
2659
+ const { isSignedIn, isLoaded } = useAuth2();
2660
+ useEffect(() => {
2661
+ if (isLoaded && isSignedIn) {
2662
+ const dashboardPath = redirectTo || process.env.NEXT_PUBLIC_AUTH_REDIRECT_AFTER_LOGIN || process.env.REACT_APP_AUTH_REDIRECT_AFTER_LOGIN || "/dashboard";
2663
+ const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || (typeof window !== "undefined" ? window.location.origin : "");
2664
+ window.location.href = `${baseUrl}${dashboardPath}`;
2665
+ }
2666
+ }, [isSignedIn, isLoaded, redirectTo]);
2667
+ if (!isLoaded) {
2668
+ return /* @__PURE__ */ jsx("div", { style: {
2669
+ display: "flex",
2670
+ justifyContent: "center",
2671
+ alignItems: "center",
2672
+ minHeight: "100vh"
2673
+ }, children: /* @__PURE__ */ jsx("div", { children: "Loading..." }) });
2674
+ }
2675
+ if (isSignedIn) {
2676
+ return null;
2677
+ }
2678
+ return /* @__PURE__ */ jsx(Fragment, { children });
2679
+ };
2680
+ var VerifyEmail = ({ token, onSuccess, onError }) => {
2681
+ const { verifyEmailToken } = useAuth2();
2682
+ const [status, setStatus] = useState("loading");
2683
+ const [message, setMessage] = useState("");
2684
+ useEffect(() => {
2685
+ const verify = async () => {
2686
+ const verifyToken = token || (typeof window !== "undefined" ? new URLSearchParams(window.location.search).get("token") : null);
2687
+ if (!verifyToken) {
2688
+ setStatus("error");
2689
+ setMessage("No verification token provided");
2690
+ onError?.("No verification token provided");
2691
+ return;
2692
+ }
2693
+ try {
2694
+ const response = await verifyEmailToken(verifyToken);
2695
+ if (response.success) {
2696
+ setStatus("success");
2697
+ setMessage("Email verified successfully! Redirecting...");
2698
+ onSuccess?.();
2699
+ setTimeout(() => {
2700
+ const redirect = process.env.NEXT_PUBLIC_AUTH_REDIRECT_AFTER_VERIFY || process.env.REACT_APP_AUTH_REDIRECT_AFTER_VERIFY || "/dashboard";
2701
+ const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || (typeof window !== "undefined" ? window.location.origin : "");
2702
+ window.location.href = `${baseUrl}${redirect}`;
2703
+ }, 2e3);
2704
+ } else {
2705
+ setStatus("error");
2706
+ setMessage(response.message || "Verification failed");
2707
+ onError?.(response.message || "Verification failed");
2708
+ }
2709
+ } catch (err) {
2710
+ setStatus("error");
2711
+ const errorMsg = err instanceof Error ? err.message : "An error occurred";
2712
+ setMessage(errorMsg);
2713
+ onError?.(errorMsg);
2714
+ }
2715
+ };
2716
+ verify();
2717
+ }, [token, verifyEmailToken, onSuccess, onError]);
2718
+ return /* @__PURE__ */ jsxs("div", { style: {
2719
+ maxWidth: "400px",
2720
+ margin: "40px auto",
2721
+ padding: "30px",
2722
+ borderRadius: "12px",
2723
+ boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
2724
+ backgroundColor: "#ffffff",
2725
+ border: "1px solid #eaeaea",
2726
+ textAlign: "center"
2727
+ }, children: [
2728
+ status === "loading" && /* @__PURE__ */ jsxs(Fragment, { children: [
2729
+ /* @__PURE__ */ jsx("div", { style: {
2730
+ width: "48px",
2731
+ height: "48px",
2732
+ margin: "0 auto 20px",
2733
+ border: "4px solid #f3f3f3",
2734
+ borderTop: "4px solid #007bff",
2735
+ borderRadius: "50%",
2736
+ animation: "spin 1s linear infinite"
2737
+ } }),
2738
+ /* @__PURE__ */ jsx("style", { children: `
2739
+ @keyframes spin {
2740
+ 0% { transform: rotate(0deg); }
2741
+ 100% { transform: rotate(360deg); }
2742
+ }
2743
+ ` }),
2744
+ /* @__PURE__ */ jsx("h2", { style: {
2745
+ fontSize: "20px",
2746
+ fontWeight: 600,
2747
+ color: "#333",
2748
+ marginBottom: "12px"
2749
+ }, children: "Verifying your email..." }),
2750
+ /* @__PURE__ */ jsx("p", { style: { fontSize: "14px", color: "#666" }, children: "Please wait while we verify your email address." })
2751
+ ] }),
2752
+ status === "success" && /* @__PURE__ */ jsxs(Fragment, { children: [
2753
+ /* @__PURE__ */ jsx("div", { style: {
2754
+ width: "64px",
2755
+ height: "64px",
2756
+ margin: "0 auto 20px",
2757
+ backgroundColor: "#4caf50",
2758
+ borderRadius: "50%",
2759
+ display: "flex",
2760
+ alignItems: "center",
2761
+ justifyContent: "center"
2762
+ }, children: /* @__PURE__ */ jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "3", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }) }),
2763
+ /* @__PURE__ */ jsx("h2", { style: {
2764
+ fontSize: "20px",
2765
+ fontWeight: 600,
2766
+ color: "#333",
2767
+ marginBottom: "12px"
2768
+ }, children: "Email Verified!" }),
2769
+ /* @__PURE__ */ jsx("p", { style: { fontSize: "14px", color: "#666" }, children: message })
2770
+ ] }),
2771
+ status === "error" && /* @__PURE__ */ jsxs(Fragment, { children: [
2772
+ /* @__PURE__ */ jsx("div", { style: {
2773
+ width: "64px",
2774
+ height: "64px",
2775
+ margin: "0 auto 20px",
2776
+ backgroundColor: "#f44336",
2777
+ borderRadius: "50%",
2778
+ display: "flex",
2779
+ alignItems: "center",
2780
+ justifyContent: "center"
2781
+ }, children: /* @__PURE__ */ jsxs("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "3", children: [
2782
+ /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
2783
+ /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
2784
+ ] }) }),
2785
+ /* @__PURE__ */ jsx("h2", { style: {
2786
+ fontSize: "20px",
2787
+ fontWeight: 600,
2788
+ color: "#333",
2789
+ marginBottom: "12px"
2790
+ }, children: "Verification Failed" }),
2791
+ /* @__PURE__ */ jsx("p", { style: { fontSize: "14px", color: "#666", marginBottom: "20px" }, children: message }),
2792
+ /* @__PURE__ */ jsx(
2793
+ "button",
2794
+ {
2795
+ onClick: () => {
2796
+ const loginPath = process.env.NEXT_PUBLIC_AUTH_REDIRECT_TO_LOGIN || process.env.REACT_APP_AUTH_REDIRECT_TO_LOGIN || "/auth/login";
2797
+ const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || (typeof window !== "undefined" ? window.location.origin : "");
2798
+ window.location.href = `${baseUrl}${loginPath}`;
2799
+ },
2800
+ style: {
2801
+ padding: "10px 20px",
2802
+ backgroundColor: "#007bff",
2803
+ color: "white",
2804
+ border: "none",
2805
+ borderRadius: "8px",
2806
+ fontSize: "14px",
2807
+ fontWeight: 600,
2808
+ cursor: "pointer"
2809
+ },
2810
+ children: "Go to Login"
2811
+ }
2812
+ )
2813
+ ] })
2814
+ ] });
2815
+ };
2816
+ var ForgotPassword = ({ appearance }) => {
2817
+ const { forgotPassword } = useAuth2();
2818
+ const [email, setEmail] = useState("");
2819
+ const [isLoading, setIsLoading] = useState(false);
2820
+ const [error, setError] = useState(null);
2821
+ const [success, setSuccess] = useState(null);
2822
+ const handleSubmit = async (e) => {
2823
+ e.preventDefault();
2824
+ setIsLoading(true);
2825
+ setError(null);
2826
+ setSuccess(null);
2827
+ try {
2828
+ const response = await forgotPassword(email);
2829
+ if (response.success) {
2830
+ setSuccess("Password reset link sent! Please check your email.");
2831
+ setEmail("");
2832
+ } else {
2833
+ setError(response.message || "Failed to send reset link");
2834
+ }
2835
+ } catch (err) {
2836
+ setError(err instanceof Error ? err.message : "An error occurred");
2837
+ } finally {
2838
+ setIsLoading(false);
2839
+ }
2840
+ };
2841
+ return /* @__PURE__ */ jsx("div", { style: {
2842
+ maxWidth: "400px",
2843
+ margin: "0 auto",
2844
+ padding: "30px",
2845
+ borderRadius: "12px",
2846
+ boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
2847
+ backgroundColor: "#ffffff",
2848
+ border: "1px solid #eaeaea",
2849
+ ...appearance?.elements?.card
2850
+ }, children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
2851
+ /* @__PURE__ */ jsx("h2", { style: {
2852
+ textAlign: "center",
2853
+ marginBottom: "12px",
2854
+ color: "#1f2937",
2855
+ fontSize: "24px",
2856
+ fontWeight: 600,
2857
+ ...appearance?.elements?.headerTitle
2858
+ }, children: "Forgot password?" }),
2859
+ /* @__PURE__ */ jsx("p", { style: {
2860
+ textAlign: "center",
2861
+ marginBottom: "24px",
2862
+ color: "#666",
2863
+ fontSize: "14px"
2864
+ }, children: "Enter your email address and we'll send you a link to reset your password." }),
2865
+ error && /* @__PURE__ */ jsx("div", { style: {
2866
+ padding: "12px 16px",
2867
+ marginBottom: "20px",
2868
+ backgroundColor: "#fee",
2869
+ color: "#c33",
2870
+ border: "1px solid #fcc",
2871
+ borderRadius: "8px",
2872
+ fontSize: "14px"
2873
+ }, children: error }),
2874
+ success && /* @__PURE__ */ jsx("div", { style: {
2875
+ padding: "12px 16px",
2876
+ marginBottom: "20px",
2877
+ backgroundColor: "#efe",
2878
+ color: "#3c3",
2879
+ border: "1px solid #cfc",
2880
+ borderRadius: "8px",
2881
+ fontSize: "14px"
2882
+ }, children: success }),
2883
+ /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
2884
+ /* @__PURE__ */ jsx("label", { htmlFor: "email", style: {
2885
+ display: "block",
2886
+ marginBottom: "8px",
2887
+ fontWeight: 500,
2888
+ color: "#374151",
2889
+ fontSize: "14px"
2890
+ }, children: "Email" }),
2891
+ /* @__PURE__ */ jsx(
2892
+ "input",
2893
+ {
2894
+ id: "email",
2895
+ type: "email",
2896
+ value: email,
2897
+ onChange: (e) => setEmail(e.target.value),
2898
+ required: true,
2899
+ disabled: isLoading,
2900
+ style: {
2901
+ width: "100%",
2902
+ padding: "12px 16px",
2903
+ border: "1px solid #ddd",
2904
+ borderRadius: "8px",
2905
+ fontSize: "16px",
2906
+ boxSizing: "border-box",
2907
+ ...appearance?.elements?.formFieldInput
2908
+ },
2909
+ placeholder: "Enter your email"
2910
+ }
2911
+ )
2912
+ ] }),
2913
+ /* @__PURE__ */ jsx(
2914
+ "button",
2915
+ {
2916
+ type: "submit",
2917
+ disabled: isLoading,
2918
+ style: {
2919
+ width: "100%",
2920
+ padding: "14px",
2921
+ backgroundColor: "#007bff",
2922
+ color: "white",
2923
+ border: "none",
2924
+ borderRadius: "8px",
2925
+ fontSize: "16px",
2926
+ fontWeight: 600,
2927
+ cursor: "pointer",
2928
+ transition: "all 0.2s ease",
2929
+ marginBottom: "16px",
2930
+ ...appearance?.elements?.formButtonPrimary
2931
+ },
2932
+ children: isLoading ? "Sending..." : "Send reset link"
2933
+ }
2934
+ ),
2935
+ /* @__PURE__ */ jsx("div", { style: { textAlign: "center" }, children: /* @__PURE__ */ jsx(
2936
+ "button",
2937
+ {
2938
+ type: "button",
2939
+ onClick: () => {
2940
+ const loginPath = process.env.NEXT_PUBLIC_AUTH_REDIRECT_TO_LOGIN || process.env.REACT_APP_AUTH_REDIRECT_TO_LOGIN || "/auth/login";
2941
+ const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || (typeof window !== "undefined" ? window.location.origin : "");
2942
+ window.location.href = `${baseUrl}${loginPath}`;
2943
+ },
2944
+ disabled: isLoading,
2945
+ style: {
2946
+ background: "none",
2947
+ border: "none",
2948
+ color: "#007bff",
2949
+ cursor: "pointer",
2950
+ fontSize: "14px",
2951
+ fontWeight: 600
2952
+ },
2953
+ children: "Back to sign in"
2954
+ }
2955
+ ) })
2956
+ ] }) });
2957
+ };
2958
+ var ResetPassword = ({ token, appearance }) => {
2959
+ const { resetPassword } = useAuth2();
2960
+ const [resetToken, setResetToken] = useState(token || "");
2961
+ const [password, setPassword] = useState("");
2962
+ const [confirmPassword, setConfirmPassword] = useState("");
2963
+ const [showPassword, setShowPassword] = useState(false);
2964
+ const [isLoading, setIsLoading] = useState(false);
2965
+ const [error, setError] = useState(null);
2966
+ const [success, setSuccess] = useState(false);
2967
+ useEffect(() => {
2968
+ if (!resetToken && typeof window !== "undefined") {
2969
+ const urlToken = new URLSearchParams(window.location.search).get("token");
2970
+ if (urlToken) {
2971
+ setResetToken(urlToken);
2972
+ }
2973
+ }
2974
+ }, [resetToken]);
2975
+ const getPasswordStrength = (pwd) => {
2976
+ if (!pwd)
2977
+ return { strength: "weak", color: "#ddd" };
2978
+ let score = 0;
2979
+ if (pwd.length >= 6)
2980
+ score++;
2981
+ if (pwd.length >= 8)
2982
+ score++;
2983
+ if (/[a-z]/.test(pwd) && /[A-Z]/.test(pwd))
2984
+ score++;
2985
+ if (/\d/.test(pwd))
2986
+ score++;
2987
+ if (/[^a-zA-Z\d]/.test(pwd))
2988
+ score++;
2989
+ if (score <= 2)
2990
+ return { strength: "weak", color: "#f44" };
2991
+ if (score <= 3)
2992
+ return { strength: "medium", color: "#fa4" };
2993
+ return { strength: "strong", color: "#4f4" };
2994
+ };
2995
+ const passwordStrength = getPasswordStrength(password);
2996
+ const handleSubmit = async (e) => {
2997
+ e.preventDefault();
2998
+ setIsLoading(true);
2999
+ setError(null);
3000
+ if (password !== confirmPassword) {
3001
+ setError("Passwords do not match");
3002
+ setIsLoading(false);
3003
+ return;
3004
+ }
3005
+ if (password.length < 6) {
3006
+ setError("Password must be at least 6 characters");
3007
+ setIsLoading(false);
3008
+ return;
3009
+ }
3010
+ if (!resetToken) {
3011
+ setError("Invalid reset token");
3012
+ setIsLoading(false);
3013
+ return;
3014
+ }
3015
+ try {
3016
+ const response = await resetPassword(resetToken, password);
3017
+ if (response.success) {
3018
+ setSuccess(true);
3019
+ setTimeout(() => {
3020
+ const loginPath = process.env.NEXT_PUBLIC_AUTH_REDIRECT_TO_LOGIN || process.env.REACT_APP_AUTH_REDIRECT_TO_LOGIN || "/auth/login";
3021
+ const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_BASE_URL || process.env.REACT_APP_FRONTEND_BASE_URL || (typeof window !== "undefined" ? window.location.origin : "");
3022
+ window.location.href = `${baseUrl}${loginPath}`;
3023
+ }, 2e3);
3024
+ } else {
3025
+ setError(response.message || "Failed to reset password");
3026
+ }
3027
+ } catch (err) {
3028
+ setError(err instanceof Error ? err.message : "An error occurred");
3029
+ } finally {
3030
+ setIsLoading(false);
3031
+ }
3032
+ };
3033
+ if (success) {
3034
+ return /* @__PURE__ */ jsxs("div", { style: {
3035
+ maxWidth: "400px",
3036
+ margin: "40px auto",
3037
+ padding: "30px",
3038
+ borderRadius: "12px",
3039
+ boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
3040
+ backgroundColor: "#ffffff",
3041
+ border: "1px solid #eaeaea",
3042
+ textAlign: "center"
3043
+ }, children: [
3044
+ /* @__PURE__ */ jsx("div", { style: {
3045
+ width: "64px",
3046
+ height: "64px",
3047
+ margin: "0 auto 20px",
3048
+ backgroundColor: "#4caf50",
3049
+ borderRadius: "50%",
3050
+ display: "flex",
3051
+ alignItems: "center",
3052
+ justifyContent: "center"
3053
+ }, children: /* @__PURE__ */ jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "3", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }) }),
3054
+ /* @__PURE__ */ jsx("h2", { style: {
3055
+ fontSize: "20px",
3056
+ fontWeight: 600,
3057
+ color: "#333",
3058
+ marginBottom: "12px"
3059
+ }, children: "Password Reset Successful!" }),
3060
+ /* @__PURE__ */ jsx("p", { style: { fontSize: "14px", color: "#666" }, children: "Your password has been reset. Redirecting to login..." })
3061
+ ] });
3062
+ }
3063
+ return /* @__PURE__ */ jsx("div", { style: {
3064
+ maxWidth: "400px",
3065
+ margin: "0 auto",
3066
+ padding: "30px",
3067
+ borderRadius: "12px",
3068
+ boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
3069
+ backgroundColor: "#ffffff",
3070
+ border: "1px solid #eaeaea",
3071
+ ...appearance?.elements?.card
3072
+ }, children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
3073
+ /* @__PURE__ */ jsx("h2", { style: {
3074
+ textAlign: "center",
3075
+ marginBottom: "12px",
3076
+ color: "#1f2937",
3077
+ fontSize: "24px",
3078
+ fontWeight: 600,
3079
+ ...appearance?.elements?.headerTitle
3080
+ }, children: "Reset your password" }),
3081
+ /* @__PURE__ */ jsx("p", { style: {
3082
+ textAlign: "center",
3083
+ marginBottom: "24px",
3084
+ color: "#666",
3085
+ fontSize: "14px"
3086
+ }, children: "Enter your new password below." }),
3087
+ error && /* @__PURE__ */ jsx("div", { style: {
3088
+ padding: "12px 16px",
3089
+ marginBottom: "20px",
3090
+ backgroundColor: "#fee",
3091
+ color: "#c33",
3092
+ border: "1px solid #fcc",
3093
+ borderRadius: "8px",
3094
+ fontSize: "14px"
3095
+ }, children: error }),
3096
+ /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px", position: "relative" }, children: [
3097
+ /* @__PURE__ */ jsx("label", { htmlFor: "password", style: {
3098
+ display: "block",
3099
+ marginBottom: "8px",
3100
+ fontWeight: 500,
3101
+ color: "#374151",
3102
+ fontSize: "14px"
3103
+ }, children: "New password" }),
3104
+ /* @__PURE__ */ jsx(
3105
+ "input",
3106
+ {
3107
+ id: "password",
3108
+ type: showPassword ? "text" : "password",
3109
+ value: password,
3110
+ onChange: (e) => setPassword(e.target.value),
3111
+ required: true,
3112
+ disabled: isLoading,
3113
+ minLength: 6,
3114
+ style: {
3115
+ width: "100%",
3116
+ padding: "12px 16px",
3117
+ border: "1px solid #ddd",
3118
+ borderRadius: "8px",
3119
+ fontSize: "16px",
3120
+ boxSizing: "border-box",
3121
+ ...appearance?.elements?.formFieldInput
3122
+ },
3123
+ placeholder: "Enter new password"
3124
+ }
3125
+ ),
3126
+ /* @__PURE__ */ jsx(
3127
+ "button",
3128
+ {
3129
+ type: "button",
3130
+ onClick: () => setShowPassword(!showPassword),
3131
+ style: {
3132
+ position: "absolute",
3133
+ right: "12px",
3134
+ top: "38px",
3135
+ background: "none",
3136
+ border: "none",
3137
+ cursor: "pointer",
3138
+ color: "#666",
3139
+ fontSize: "14px"
3140
+ },
3141
+ children: showPassword ? "Hide" : "Show"
3142
+ }
3143
+ ),
3144
+ password && /* @__PURE__ */ jsxs("div", { style: { marginTop: "8px" }, children: [
3145
+ /* @__PURE__ */ jsx("div", { style: {
3146
+ height: "4px",
3147
+ backgroundColor: "#eee",
3148
+ borderRadius: "2px",
3149
+ overflow: "hidden"
3150
+ }, children: /* @__PURE__ */ jsx("div", { style: {
3151
+ height: "100%",
3152
+ width: passwordStrength.strength === "weak" ? "33%" : passwordStrength.strength === "medium" ? "66%" : "100%",
3153
+ backgroundColor: passwordStrength.color,
3154
+ transition: "all 0.3s ease"
3155
+ } }) }),
3156
+ /* @__PURE__ */ jsxs("p", { style: {
3157
+ fontSize: "12px",
3158
+ color: passwordStrength.color,
3159
+ marginTop: "4px",
3160
+ textTransform: "capitalize"
3161
+ }, children: [
3162
+ passwordStrength.strength,
3163
+ " password"
3164
+ ] })
3165
+ ] })
3166
+ ] }),
3167
+ /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
3168
+ /* @__PURE__ */ jsx("label", { htmlFor: "confirmPassword", style: {
3169
+ display: "block",
3170
+ marginBottom: "8px",
3171
+ fontWeight: 500,
3172
+ color: "#374151",
3173
+ fontSize: "14px"
3174
+ }, children: "Confirm password" }),
3175
+ /* @__PURE__ */ jsx(
3176
+ "input",
3177
+ {
3178
+ id: "confirmPassword",
3179
+ type: showPassword ? "text" : "password",
3180
+ value: confirmPassword,
3181
+ onChange: (e) => setConfirmPassword(e.target.value),
3182
+ required: true,
3183
+ disabled: isLoading,
3184
+ style: {
3185
+ width: "100%",
3186
+ padding: "12px 16px",
3187
+ border: "1px solid #ddd",
3188
+ borderRadius: "8px",
3189
+ fontSize: "16px",
3190
+ boxSizing: "border-box",
3191
+ ...appearance?.elements?.formFieldInput
3192
+ },
3193
+ placeholder: "Confirm new password"
3194
+ }
3195
+ )
3196
+ ] }),
3197
+ /* @__PURE__ */ jsx(
3198
+ "button",
3199
+ {
3200
+ type: "submit",
3201
+ disabled: isLoading,
3202
+ style: {
3203
+ width: "100%",
3204
+ padding: "14px",
3205
+ backgroundColor: "#007bff",
3206
+ color: "white",
3207
+ border: "none",
3208
+ borderRadius: "8px",
3209
+ fontSize: "16px",
3210
+ fontWeight: 600,
3211
+ cursor: "pointer",
3212
+ transition: "all 0.2s ease",
3213
+ ...appearance?.elements?.formButtonPrimary
3214
+ },
3215
+ children: isLoading ? "Resetting..." : "Reset password"
3216
+ }
3217
+ )
3218
+ ] }) });
3219
+ };
3220
+ var ChangePassword = ({ onSuccess, appearance }) => {
3221
+ const { changePassword } = useAuth2();
3222
+ const [oldPassword, setOldPassword] = useState("");
3223
+ const [newPassword, setNewPassword] = useState("");
3224
+ const [confirmPassword, setConfirmPassword] = useState("");
3225
+ const [showPasswords, setShowPasswords] = useState(false);
3226
+ const [isLoading, setIsLoading] = useState(false);
3227
+ const [error, setError] = useState(null);
3228
+ const [success, setSuccess] = useState(false);
3229
+ const getPasswordStrength = (pwd) => {
3230
+ if (!pwd)
3231
+ return { strength: "weak", color: "#ddd" };
3232
+ let score = 0;
3233
+ if (pwd.length >= 6)
3234
+ score++;
3235
+ if (pwd.length >= 8)
3236
+ score++;
3237
+ if (/[a-z]/.test(pwd) && /[A-Z]/.test(pwd))
3238
+ score++;
3239
+ if (/\d/.test(pwd))
3240
+ score++;
3241
+ if (/[^a-zA-Z\d]/.test(pwd))
3242
+ score++;
3243
+ if (score <= 2)
3244
+ return { strength: "weak", color: "#f44" };
3245
+ if (score <= 3)
3246
+ return { strength: "medium", color: "#fa4" };
3247
+ return { strength: "strong", color: "#4f4" };
3248
+ };
3249
+ const passwordStrength = getPasswordStrength(newPassword);
3250
+ const handleSubmit = async (e) => {
3251
+ e.preventDefault();
3252
+ setIsLoading(true);
3253
+ setError(null);
3254
+ setSuccess(false);
3255
+ if (newPassword !== confirmPassword) {
3256
+ setError("New passwords do not match");
3257
+ setIsLoading(false);
3258
+ return;
3259
+ }
3260
+ if (newPassword.length < 6) {
3261
+ setError("New password must be at least 6 characters");
3262
+ setIsLoading(false);
3263
+ return;
3264
+ }
3265
+ try {
3266
+ const response = await changePassword(oldPassword, newPassword);
3267
+ if (response.success) {
3268
+ setSuccess(true);
3269
+ setOldPassword("");
3270
+ setNewPassword("");
3271
+ setConfirmPassword("");
3272
+ onSuccess?.();
3273
+ } else {
3274
+ setError(response.message || "Failed to change password");
3275
+ }
3276
+ } catch (err) {
3277
+ setError(err instanceof Error ? err.message : "An error occurred");
3278
+ } finally {
3279
+ setIsLoading(false);
3280
+ }
3281
+ };
3282
+ return /* @__PURE__ */ jsx("div", { style: {
3283
+ maxWidth: "400px",
3284
+ margin: "0 auto",
3285
+ padding: "30px",
3286
+ borderRadius: "12px",
3287
+ boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
3288
+ backgroundColor: "#ffffff",
3289
+ border: "1px solid #eaeaea",
3290
+ ...appearance?.elements?.card
3291
+ }, children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
3292
+ /* @__PURE__ */ jsx("h2", { style: {
3293
+ textAlign: "center",
3294
+ marginBottom: "24px",
3295
+ color: "#1f2937",
3296
+ fontSize: "24px",
3297
+ fontWeight: 600,
3298
+ ...appearance?.elements?.headerTitle
3299
+ }, children: "Change Password" }),
3300
+ error && /* @__PURE__ */ jsx("div", { style: {
3301
+ padding: "12px 16px",
3302
+ marginBottom: "20px",
3303
+ backgroundColor: "#fee",
3304
+ color: "#c33",
3305
+ border: "1px solid #fcc",
3306
+ borderRadius: "8px",
3307
+ fontSize: "14px"
3308
+ }, children: error }),
3309
+ success && /* @__PURE__ */ jsx("div", { style: {
3310
+ padding: "12px 16px",
3311
+ marginBottom: "20px",
3312
+ backgroundColor: "#efe",
3313
+ color: "#3c3",
3314
+ border: "1px solid #cfc",
3315
+ borderRadius: "8px",
3316
+ fontSize: "14px"
3317
+ }, children: "Password changed successfully!" }),
3318
+ /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
3319
+ /* @__PURE__ */ jsx("label", { htmlFor: "oldPassword", style: {
3320
+ display: "block",
3321
+ marginBottom: "8px",
3322
+ fontWeight: 500,
3323
+ color: "#374151",
3324
+ fontSize: "14px"
3325
+ }, children: "Current password" }),
3326
+ /* @__PURE__ */ jsx(
3327
+ "input",
3328
+ {
3329
+ id: "oldPassword",
3330
+ type: showPasswords ? "text" : "password",
3331
+ value: oldPassword,
3332
+ onChange: (e) => setOldPassword(e.target.value),
3333
+ required: true,
3334
+ disabled: isLoading,
3335
+ style: {
3336
+ width: "100%",
3337
+ padding: "12px 16px",
3338
+ border: "1px solid #ddd",
3339
+ borderRadius: "8px",
3340
+ fontSize: "16px",
3341
+ boxSizing: "border-box",
3342
+ ...appearance?.elements?.formFieldInput
3343
+ },
3344
+ placeholder: "Enter current password"
3345
+ }
3346
+ )
3347
+ ] }),
3348
+ /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
3349
+ /* @__PURE__ */ jsx("label", { htmlFor: "newPassword", style: {
3350
+ display: "block",
3351
+ marginBottom: "8px",
3352
+ fontWeight: 500,
3353
+ color: "#374151",
3354
+ fontSize: "14px"
3355
+ }, children: "New password" }),
3356
+ /* @__PURE__ */ jsx(
3357
+ "input",
3358
+ {
3359
+ id: "newPassword",
3360
+ type: showPasswords ? "text" : "password",
3361
+ value: newPassword,
3362
+ onChange: (e) => setNewPassword(e.target.value),
3363
+ required: true,
3364
+ disabled: isLoading,
3365
+ minLength: 6,
3366
+ style: {
3367
+ width: "100%",
3368
+ padding: "12px 16px",
3369
+ border: "1px solid #ddd",
3370
+ borderRadius: "8px",
3371
+ fontSize: "16px",
3372
+ boxSizing: "border-box",
3373
+ ...appearance?.elements?.formFieldInput
3374
+ },
3375
+ placeholder: "Enter new password"
3376
+ }
3377
+ ),
3378
+ newPassword && /* @__PURE__ */ jsxs("div", { style: { marginTop: "8px" }, children: [
3379
+ /* @__PURE__ */ jsx("div", { style: {
3380
+ height: "4px",
3381
+ backgroundColor: "#eee",
3382
+ borderRadius: "2px",
3383
+ overflow: "hidden"
3384
+ }, children: /* @__PURE__ */ jsx("div", { style: {
3385
+ height: "100%",
3386
+ width: passwordStrength.strength === "weak" ? "33%" : passwordStrength.strength === "medium" ? "66%" : "100%",
3387
+ backgroundColor: passwordStrength.color,
3388
+ transition: "all 0.3s ease"
3389
+ } }) }),
3390
+ /* @__PURE__ */ jsxs("p", { style: {
3391
+ fontSize: "12px",
3392
+ color: passwordStrength.color,
3393
+ marginTop: "4px",
3394
+ textTransform: "capitalize"
3395
+ }, children: [
3396
+ passwordStrength.strength,
3397
+ " password"
3398
+ ] })
3399
+ ] })
3400
+ ] }),
3401
+ /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
3402
+ /* @__PURE__ */ jsx("label", { htmlFor: "confirmPassword", style: {
3403
+ display: "block",
3404
+ marginBottom: "8px",
3405
+ fontWeight: 500,
3406
+ color: "#374151",
3407
+ fontSize: "14px"
3408
+ }, children: "Confirm new password" }),
3409
+ /* @__PURE__ */ jsx(
3410
+ "input",
3411
+ {
3412
+ id: "confirmPassword",
3413
+ type: showPasswords ? "text" : "password",
3414
+ value: confirmPassword,
3415
+ onChange: (e) => setConfirmPassword(e.target.value),
3416
+ required: true,
3417
+ disabled: isLoading,
3418
+ style: {
3419
+ width: "100%",
3420
+ padding: "12px 16px",
3421
+ border: "1px solid #ddd",
3422
+ borderRadius: "8px",
3423
+ fontSize: "16px",
3424
+ boxSizing: "border-box",
3425
+ ...appearance?.elements?.formFieldInput
3426
+ },
3427
+ placeholder: "Confirm new password"
3428
+ }
3429
+ )
3430
+ ] }),
3431
+ /* @__PURE__ */ jsx("div", { style: { marginBottom: "20px" }, children: /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", cursor: "pointer" }, children: [
3432
+ /* @__PURE__ */ jsx(
3433
+ "input",
3434
+ {
3435
+ type: "checkbox",
3436
+ checked: showPasswords,
3437
+ onChange: (e) => setShowPasswords(e.target.checked),
3438
+ style: { marginRight: "8px" }
3439
+ }
3440
+ ),
3441
+ /* @__PURE__ */ jsx("span", { style: { fontSize: "14px", color: "#666" }, children: "Show passwords" })
3442
+ ] }) }),
3443
+ /* @__PURE__ */ jsx(
3444
+ "button",
3445
+ {
3446
+ type: "submit",
3447
+ disabled: isLoading,
3448
+ style: {
3449
+ width: "100%",
3450
+ padding: "14px",
3451
+ backgroundColor: "#007bff",
3452
+ color: "white",
3453
+ border: "none",
3454
+ borderRadius: "8px",
3455
+ fontSize: "16px",
3456
+ fontWeight: 600,
3457
+ cursor: "pointer",
3458
+ transition: "all 0.2s ease",
3459
+ ...appearance?.elements?.formButtonPrimary
3460
+ },
3461
+ children: isLoading ? "Changing password..." : "Change password"
3462
+ }
3463
+ )
3464
+ ] }) });
3465
+ };
3466
+ var UserProfile = ({
3467
+ showAvatar = true,
3468
+ showEmailChange = true,
3469
+ showPasswordChange = true
3470
+ }) => {
3471
+ const { user, updateProfile, updateAvatar, requestEmailChange } = useAuth2();
3472
+ const [name, setName] = useState(user?.name || "");
3473
+ const [avatar, setAvatar] = useState("");
3474
+ const [newEmail, setNewEmail] = useState("");
3475
+ const [isLoading, setIsLoading] = useState(false);
3476
+ const [error, setError] = useState(null);
3477
+ const [success, setSuccess] = useState(null);
3478
+ const handleUpdateName = async (e) => {
3479
+ e.preventDefault();
3480
+ setIsLoading(true);
3481
+ setError(null);
3482
+ setSuccess(null);
3483
+ try {
3484
+ const response = await updateProfile({ name });
3485
+ if (response.success) {
3486
+ setSuccess("Name updated successfully!");
3487
+ } else {
3488
+ setError(response.message || "Failed to update name");
3489
+ }
3490
+ } catch (err) {
3491
+ setError(err instanceof Error ? err.message : "An error occurred");
3492
+ } finally {
3493
+ setIsLoading(false);
3494
+ }
3495
+ };
3496
+ const handleUpdateAvatar = async (e) => {
3497
+ e.preventDefault();
3498
+ setIsLoading(true);
3499
+ setError(null);
3500
+ setSuccess(null);
3501
+ try {
3502
+ const response = await updateAvatar(avatar);
3503
+ if (response.success) {
3504
+ setSuccess("Avatar updated successfully!");
3505
+ setAvatar("");
3506
+ } else {
3507
+ setError(response.message || "Failed to update avatar");
3508
+ }
3509
+ } catch (err) {
3510
+ setError(err instanceof Error ? err.message : "An error occurred");
3511
+ } finally {
3512
+ setIsLoading(false);
3513
+ }
3514
+ };
3515
+ const handleRequestEmailChange = async (e) => {
3516
+ e.preventDefault();
3517
+ setIsLoading(true);
3518
+ setError(null);
3519
+ setSuccess(null);
3520
+ try {
3521
+ const response = await requestEmailChange(newEmail);
3522
+ if (response.success) {
3523
+ setSuccess("Verification email sent! Please check your inbox.");
3524
+ setNewEmail("");
3525
+ } else {
3526
+ setError(response.message || "Failed to request email change");
3527
+ }
3528
+ } catch (err) {
3529
+ setError(err instanceof Error ? err.message : "An error occurred");
3530
+ } finally {
3531
+ setIsLoading(false);
3532
+ }
3533
+ };
3534
+ if (!user)
3535
+ return null;
3536
+ return /* @__PURE__ */ jsxs("div", { style: { maxWidth: "600px", margin: "0 auto", padding: "20px" }, children: [
3537
+ /* @__PURE__ */ jsx("h2", { style: { marginBottom: "24px", fontSize: "24px", fontWeight: 600 }, children: "Profile Settings" }),
3538
+ error && /* @__PURE__ */ jsx("div", { style: {
3539
+ padding: "12px 16px",
3540
+ marginBottom: "20px",
3541
+ backgroundColor: "#fee",
3542
+ color: "#c33",
3543
+ border: "1px solid #fcc",
3544
+ borderRadius: "8px",
3545
+ fontSize: "14px"
3546
+ }, children: error }),
3547
+ success && /* @__PURE__ */ jsx("div", { style: {
3548
+ padding: "12px 16px",
3549
+ marginBottom: "20px",
3550
+ backgroundColor: "#efe",
3551
+ color: "#3c3",
3552
+ border: "1px solid #cfc",
3553
+ borderRadius: "8px",
3554
+ fontSize: "14px"
3555
+ }, children: success }),
3556
+ /* @__PURE__ */ jsxs("div", { style: {
3557
+ padding: "20px",
3558
+ backgroundColor: "#fff",
3559
+ borderRadius: "8px",
3560
+ boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
3561
+ marginBottom: "20px"
3562
+ }, children: [
3563
+ /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontSize: "18px", fontWeight: 600 }, children: "Update Name" }),
3564
+ /* @__PURE__ */ jsxs("form", { onSubmit: handleUpdateName, children: [
3565
+ /* @__PURE__ */ jsx(
3566
+ "input",
3567
+ {
3568
+ type: "text",
3569
+ value: name,
3570
+ onChange: (e) => setName(e.target.value),
3571
+ required: true,
3572
+ disabled: isLoading,
3573
+ style: {
3574
+ width: "100%",
3575
+ padding: "12px 16px",
3576
+ border: "1px solid #ddd",
3577
+ borderRadius: "8px",
3578
+ fontSize: "16px",
3579
+ boxSizing: "border-box",
3580
+ marginBottom: "12px"
3581
+ },
3582
+ placeholder: "Your name"
3583
+ }
3584
+ ),
3585
+ /* @__PURE__ */ jsx(
3586
+ "button",
3587
+ {
3588
+ type: "submit",
3589
+ disabled: isLoading,
3590
+ style: {
3591
+ padding: "10px 20px",
3592
+ backgroundColor: "#007bff",
3593
+ color: "white",
3594
+ border: "none",
3595
+ borderRadius: "8px",
3596
+ fontSize: "14px",
3597
+ fontWeight: 600,
3598
+ cursor: "pointer"
3599
+ },
3600
+ children: "Update Name"
3601
+ }
3602
+ )
3603
+ ] })
3604
+ ] }),
3605
+ showAvatar && /* @__PURE__ */ jsxs("div", { style: {
3606
+ padding: "20px",
3607
+ backgroundColor: "#fff",
3608
+ borderRadius: "8px",
3609
+ boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
3610
+ marginBottom: "20px"
3611
+ }, children: [
3612
+ /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontSize: "18px", fontWeight: 600 }, children: "Update Avatar" }),
3613
+ /* @__PURE__ */ jsxs("form", { onSubmit: handleUpdateAvatar, children: [
3614
+ /* @__PURE__ */ jsx(
3615
+ "input",
3616
+ {
3617
+ type: "url",
3618
+ value: avatar,
3619
+ onChange: (e) => setAvatar(e.target.value),
3620
+ required: true,
3621
+ disabled: isLoading,
3622
+ style: {
3623
+ width: "100%",
3624
+ padding: "12px 16px",
3625
+ border: "1px solid #ddd",
3626
+ borderRadius: "8px",
3627
+ fontSize: "16px",
3628
+ boxSizing: "border-box",
3629
+ marginBottom: "12px"
3630
+ },
3631
+ placeholder: "Avatar URL"
3632
+ }
3633
+ ),
3634
+ /* @__PURE__ */ jsx(
3635
+ "button",
3636
+ {
3637
+ type: "submit",
3638
+ disabled: isLoading,
3639
+ style: {
3640
+ padding: "10px 20px",
3641
+ backgroundColor: "#007bff",
3642
+ color: "white",
3643
+ border: "none",
3644
+ borderRadius: "8px",
3645
+ fontSize: "14px",
3646
+ fontWeight: 600,
3647
+ cursor: "pointer"
3648
+ },
3649
+ children: "Update Avatar"
3650
+ }
3651
+ )
3652
+ ] })
3653
+ ] }),
3654
+ showEmailChange && /* @__PURE__ */ jsxs("div", { style: {
3655
+ padding: "20px",
3656
+ backgroundColor: "#fff",
3657
+ borderRadius: "8px",
3658
+ boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
3659
+ marginBottom: "20px"
3660
+ }, children: [
3661
+ /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontSize: "18px", fontWeight: 600 }, children: "Change Email" }),
3662
+ /* @__PURE__ */ jsxs("p", { style: { fontSize: "14px", color: "#666", marginBottom: "12px" }, children: [
3663
+ "Current email: ",
3664
+ /* @__PURE__ */ jsx("strong", { children: user.email })
3665
+ ] }),
3666
+ /* @__PURE__ */ jsxs("form", { onSubmit: handleRequestEmailChange, children: [
3667
+ /* @__PURE__ */ jsx(
3668
+ "input",
3669
+ {
3670
+ type: "email",
3671
+ value: newEmail,
3672
+ onChange: (e) => setNewEmail(e.target.value),
3673
+ required: true,
3674
+ disabled: isLoading,
3675
+ style: {
3676
+ width: "100%",
3677
+ padding: "12px 16px",
3678
+ border: "1px solid #ddd",
3679
+ borderRadius: "8px",
3680
+ fontSize: "16px",
3681
+ boxSizing: "border-box",
3682
+ marginBottom: "12px"
3683
+ },
3684
+ placeholder: "New email address"
3685
+ }
3686
+ ),
3687
+ /* @__PURE__ */ jsx(
3688
+ "button",
3689
+ {
3690
+ type: "submit",
3691
+ disabled: isLoading,
3692
+ style: {
3693
+ padding: "10px 20px",
3694
+ backgroundColor: "#007bff",
3695
+ color: "white",
3696
+ border: "none",
3697
+ borderRadius: "8px",
3698
+ fontSize: "14px",
3699
+ fontWeight: 600,
3700
+ cursor: "pointer"
3701
+ },
3702
+ children: "Request Email Change"
3703
+ }
3704
+ )
3705
+ ] })
3706
+ ] })
3707
+ ] });
3708
+ };
1744
3709
 
1745
- export { AuthFlow, EmailVerificationPage, LoginForm, OtpForm, RegisterForm };
3710
+ export { AuthFlow, ChangePassword, EmailVerificationPage, ForgotPassword, LoginForm, OtpForm, ProtectedRoute, PublicRoute, RegisterForm, ResetPassword, SignIn, SignOut, SignUp, UserButton, UserProfile, VerifyEmail };
1746
3711
  //# sourceMappingURL=out.js.map
1747
3712
  //# sourceMappingURL=index.components.mjs.map