@kendevelops/auth-flow-kit 1.5.0 → 1.5.5

package/dist/index.cjs

@@ -34,9 +34,7 @@ var import_react = require("react");
 
 // src/http.ts
 function makeURL(baseURL, path) {
-  const base = baseURL.replace(/\/$/, "");
-  const suffix = path.startsWith("/") ? path : `/${path}`;
-  return `${base}${suffix}`;
+  return `${baseURL.replace(/\/$/, "")}${path.startsWith("/") ? path : `/${path}`}`;
 }
 function getStoredAccessToken() {
   try {
@@ -47,11 +45,8 @@ function getStoredAccessToken() {
 }
 function setStoredAccessToken(token) {
   try {
-    if (token) {
-      localStorage.setItem("afk_access_token", token);
-      return;
-    }
-    localStorage.removeItem("afk_access_token");
+    if (token) localStorage.setItem("afk_access_token", token);
+    else localStorage.removeItem("afk_access_token");
   } catch {
   }
 }
@@ -60,27 +55,20 @@ async function httpJSON(url, opts = {}, withAuth = false) {
     "Content-Type": "application/json"
   };
   if (withAuth) {
-    const storedToken = getStoredAccessToken();
-    if (storedToken) {
-      headers["Authorization"] = `Bearer ${storedToken}`;
-    }
+    const tok = getStoredAccessToken();
+    if (tok) headers["Authorization"] = `Bearer ${tok}`;
   }
   const res = await fetch(url, {
     ...opts,
-    headers: {
-      ...headers,
-      ...opts.headers || {}
-    }
+    headers: { ...headers, ...opts.headers || {} }
   });
   if (!res.ok) {
     let message = `Request failed (${res.status})`;
     const contentType = res.headers.get("content-type") || "";
     if (contentType.includes("application/json")) {
       try {
-        const body = await res.json();
-        if (body?.message) {
-          message = body.message;
-        }
+        const data = await res.json();
+        if (data?.message) message = data.message;
       } catch {
       }
     }
@@ -175,59 +163,43 @@ function AuthProvider({
 }
 
 // src/Protected.tsx
+var import_react2 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function Protected({
-  children,
-  redirectTo,
-  fallback = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: "Loading..." })
-}) {
+function Protected({ children, redirectTo }) {
   const { user, loading } = useAuth();
-  if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: fallback });
-  }
-  if (!user) {
-    if (redirectTo && typeof window !== "undefined") {
-      window.location.replace(redirectTo);
+  (0, import_react2.useEffect)(() => {
+    if (!loading && !user && redirectTo) {
+      window.location.href = redirectTo;
     }
-    return null;
-  }
+  }, [loading, user, redirectTo]);
+  if (loading) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: "Loading..." });
+  if (!user) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children });
 }
 
 // src/screens/LoginScreen.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/screens/PasswordResetScreen.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function PasswordResetScreen() {
   const { config } = useAuth();
-  const [email, setEmail] = (0, import_react2.useState)("");
-  const [sent, setSent] = (0, import_react2.useState)(false);
-  const [error, setError] = (0, import_react2.useState)(null);
-  const isValidEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+  const [email, setEmail] = (0, import_react3.useState)("");
+  const [sent, setSent] = (0, import_react3.useState)(false);
+  const [error, setError] = (0, import_react3.useState)(null);
   const requestReset = async (e) => {
     e.preventDefault();
     setError(null);
-    const trimmedEmail = email.trim();
-    if (!trimmedEmail) {
-      setError("Email is required.");
-      return;
-    }
-    if (!isValidEmail(trimmedEmail)) {
-      setError("Enter a valid email address.");
-      return;
-    }
     try {
       const url = makeURL(config.baseURL, config.endpoints.forgot);
       await httpJSON(url, {
         method: "POST",
-        body: JSON.stringify({ email: trimmedEmail })
+        body: JSON.stringify({ email })
       });
       setSent(true);
     } catch (err) {
-      const message = err instanceof Error ? err.message : "Failed to request reset";
-      setError(message);
+      setError(err?.message || "Failed to request reset");
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
@@ -267,7 +239,6 @@ function PasswordResetScreen() {
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "label",
             {
-              htmlFor: "afk-reset-email",
               style: {
                 position: "absolute",
                 top: sent ? "-18px" : "-10px",
@@ -284,7 +255,6 @@ function PasswordResetScreen() {
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "input",
             {
-              id: "afk-reset-email",
               value: email,
               onChange: (e) => setEmail(e.target.value),
               type: "email",
@@ -347,8 +317,6 @@ function PasswordResetScreen() {
         error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "p",
           {
-            role: "alert",
-            "aria-live": "polite",
             style: {
               marginTop: 20,
               color: "crimson",
@@ -368,11 +336,11 @@ function PasswordResetScreen() {
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function LoginScreen() {
   const { login } = useAuth();
-  const [email, setEmail] = (0, import_react3.useState)("");
-  const [password, setPassword] = (0, import_react3.useState)("");
-  const [submitting, setSubmitting] = (0, import_react3.useState)(false);
-  const [error, setError] = (0, import_react3.useState)(null);
-  const [showReset, setShowReset] = (0, import_react3.useState)(false);
+  const [email, setEmail] = (0, import_react4.useState)("");
+  const [password, setPassword] = (0, import_react4.useState)("");
+  const [submitting, setSubmitting] = (0, import_react4.useState)(false);
+  const [error, setError] = (0, import_react4.useState)(null);
+  const [showReset, setShowReset] = (0, import_react4.useState)(false);
   if (showReset) {
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { animation: "fade .2s" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PasswordResetScreen, {}),
@@ -399,26 +367,15 @@ function LoginScreen() {
     setError(null);
     const trimmedEmail = email.trim();
     const trimmedPassword = password.trim();
-    if (!trimmedEmail) {
-      setError("Email is required.");
-      setSubmitting(false);
-      return;
-    }
-    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmedEmail)) {
-      setError("Enter a valid email address.");
-      setSubmitting(false);
-      return;
-    }
-    if (!trimmedPassword) {
-      setError("Password is required.");
+    if (!trimmedEmail || !trimmedPassword) {
+      setError("Email and password cannot be empty.");
       setSubmitting(false);
       return;
     }
     try {
       await login(trimmedEmail, trimmedPassword);
     } catch (err) {
-      const message = err instanceof Error ? err.message : "Login failed";
-      setError(message);
+      setError(err?.message || "Login failed");
     } finally {
       setSubmitting(false);
     }
@@ -459,7 +416,6 @@ function LoginScreen() {
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "label",
             {
-              htmlFor: "afk-login-email",
               style: {
                 position: "absolute",
                 top: "-10px",
@@ -476,7 +432,6 @@ function LoginScreen() {
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "input",
             {
-              id: "afk-login-email",
               value: email,
               onChange: (e) => setEmail(e.target.value),
               type: "email",
@@ -506,7 +461,6 @@ function LoginScreen() {
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "label",
             {
-              htmlFor: "afk-login-password",
               style: {
                 position: "absolute",
                 top: "-10px",
@@ -523,7 +477,6 @@ function LoginScreen() {
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "input",
             {
-              id: "afk-login-password",
               value: password,
               onChange: (e) => setPassword(e.target.value),
               type: "password",
@@ -550,28 +503,17 @@ function LoginScreen() {
           )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "div",
+          "p",
           {
+            onClick: () => setShowReset(true),
             style: {
-              textAlign: "right"
+              textAlign: "right",
+              fontSize: 13,
+              color: "#4b4bff",
+              cursor: "pointer",
+              marginBottom: 24
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-              "button",
-              {
-                onClick: () => setShowReset(true),
-                style: {
-                  textAlign: "right",
-                  fontSize: 13,
-                  color: "#4b4bff",
-                  cursor: "pointer",
-                  marginBottom: 24,
-                  width: "fit-content",
-                  border: "none",
-                  background: "none"
-                },
-                children: "Forgot password?"
-              }
-            )
+            children: "Forgot password?"
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -599,8 +541,6 @@ function LoginScreen() {
         error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "p",
           {
-            role: "alert",
-            "aria-live": "polite",
             style: {
               marginTop: 18,
               color: "crimson",
@@ -617,28 +557,15 @@ function LoginScreen() {
 }
 
 // src/screens/SignupScreen.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function SignupScreen() {
   const { signup } = useAuth();
-  const [name, setName] = (0, import_react4.useState)("");
-  const [email, setEmail] = (0, import_react4.useState)("");
-  const [password, setPassword] = (0, import_react4.useState)("");
-  const [confirmPassword, setConfirmPassword] = (0, import_react4.useState)("");
-  const [submitting, setSubmitting] = (0, import_react4.useState)(false);
-  const [error, setError] = (0, import_react4.useState)(null);
-  const isValidEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
-  const getPasswordStrength = (value) => {
-    let score = 0;
-    if (value.length >= 8) score++;
-    if (/[A-Z]/.test(value)) score++;
-    if (/[0-9]/.test(value)) score++;
-    if (/[^A-Za-z0-9]/.test(value)) score++;
-    if (!value) return { label: "", color: "" };
-    if (score <= 1) return { label: "Weak", color: "crimson" };
-    if (score === 2) return { label: "Medium", color: "#f39c12" };
-    return { label: "Strong", color: "#2ecc71" };
-  };
+  const [name, setName] = (0, import_react5.useState)("");
+  const [email, setEmail] = (0, import_react5.useState)("");
+  const [password, setPassword] = (0, import_react5.useState)("");
+  const [submitting, setSubmitting] = (0, import_react5.useState)(false);
+  const [error, setError] = (0, import_react5.useState)(null);
   const onSubmit = async (e) => {
     e.preventDefault();
     setSubmitting(true);
@@ -646,47 +573,15 @@ function SignupScreen() {
     const trimmedEmail = email.trim();
     const trimmedPassword = password.trim();
     const trimmedName = name.trim();
-    const trimmedConfirm = confirmPassword.trim();
-    if (!trimmedName) {
-      setError("Name is required.");
-      setSubmitting(false);
-      return;
-    }
-    if (!trimmedEmail) {
-      setError("Email is required.");
-      setSubmitting(false);
-      return;
-    }
-    if (!isValidEmail(trimmedEmail)) {
-      setError("Enter a valid email address.");
-      setSubmitting(false);
-      return;
-    }
-    if (!trimmedPassword) {
-      setError("Password is required.");
-      setSubmitting(false);
-      return;
-    }
-    if (trimmedPassword.length < 8) {
-      setError("Password must be at least 8 characters long.");
-      setSubmitting(false);
-      return;
-    }
-    if (!trimmedConfirm) {
-      setError("Please confirm your password.");
-      setSubmitting(false);
-      return;
-    }
-    if (trimmedPassword !== trimmedConfirm) {
-      setError("Passwords do not match.");
+    if (!trimmedEmail || !trimmedPassword || !trimmedName) {
+      setError("Email and password cannot be empty.");
       setSubmitting(false);
       return;
     }
     try {
-      await signup({ name: trimmedName, email: trimmedEmail, password: trimmedPassword });
+      await signup({ name, email, password });
     } catch (err) {
-      const message = err instanceof Error ? err.message : "Signup failed";
-      setError(message);
+      setError(err?.message || "Signup failed");
     } finally {
       setSubmitting(false);
     }
@@ -728,7 +623,6 @@ function SignupScreen() {
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "label",
             {
-              htmlFor: "afk-signup-name",
               style: {
                 position: "absolute",
                 top: "-10px",
@@ -745,7 +639,6 @@ function SignupScreen() {
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "input",
             {
-              id: "afk-signup-name",
               value: name,
               onChange: (e) => setName(e.target.value),
               placeholder: "Your name",
@@ -774,7 +667,6 @@ function SignupScreen() {
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "label",
             {
-              htmlFor: "afk-signup-email",
               style: {
                 position: "absolute",
                 top: "-10px",
@@ -791,7 +683,6 @@ function SignupScreen() {
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "input",
             {
-              id: "afk-signup-email",
               value: email,
               onChange: (e) => setEmail(e.target.value),
               type: "email",
@@ -821,7 +712,6 @@ function SignupScreen() {
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "label",
             {
-              htmlFor: "afk-signup-password",
               style: {
                 position: "absolute",
                 top: "-10px",
@@ -838,7 +728,6 @@ function SignupScreen() {
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "input",
             {
-              id: "afk-signup-password",
               value: password,
               onChange: (e) => setPassword(e.target.value),
               type: "password",
@@ -864,95 +753,6 @@ function SignupScreen() {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { position: "relative", marginBottom: 18 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            "label",
-            {
-              htmlFor: "afk-signup-confirm-password",
-              style: {
-                position: "absolute",
-                top: "-10px",
-                left: "14px",
-                background: "rgba(255,255,255,0.85)",
-                padding: "0 6px",
-                fontSize: 13,
-                color: "#444",
-                borderRadius: 6
-              },
-              children: "Confirm password"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            "input",
-            {
-              id: "afk-signup-confirm-password",
-              value: confirmPassword,
-              onChange: (e) => setConfirmPassword(e.target.value),
-              type: "password",
-              placeholder: "Repeat your password",
-              style: {
-                width: "80%",
-                padding: "14px 16px",
-                borderRadius: 12,
-                border: "1px solid #d2d2d2",
-                fontSize: 15,
-                outline: "none",
-                transition: "0.25s",
-                background: "rgba(255,255,255,0.85)"
-              },
-              onFocus: (e) => {
-                e.currentTarget.style.border = "1px solid #4b4bff";
-                e.currentTarget.style.boxShadow = "0 0 0 3px rgba(75,75,255,0.25)";
-              },
-              onBlur: (e) => {
-                e.currentTarget.style.border = "1px solid #d2d2d2";
-                e.currentTarget.style.boxShadow = "0 0 0 transparent";
-              }
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-          "div",
-          {
-            style: {
-              marginBottom: 20,
-              fontSize: 12,
-              color: "#555"
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { style: { marginBottom: 6 }, children: "Use at least 8 characters, including letters, numbers, and symbols." }),
-              password && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-                "p",
-                {
-                  style: {
-                    fontWeight: 600,
-                    color: getPasswordStrength(password).color
-                  },
-                  children: [
-                    "Password strength: ",
-                    getPasswordStrength(password).label
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          "p",
-          {
-            style: {
-              textAlign: "center",
-              fontSize: 13,
-              color: "#4b4bff",
-              cursor: "pointer",
-              marginBottom: 24
-            },
-            onClick: () => {
-              window.dispatchEvent(new CustomEvent("auth-flow-kit:navigate-to-login"));
-            },
-            children: "Already have an account? Sign in"
-          }
-        ),
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "button",
           {
@@ -978,8 +778,6 @@ function SignupScreen() {
         error && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "p",
           {
-            role: "alert",
-            "aria-live": "polite",
             style: {
               marginTop: 18,
               color: "crimson",