@kendevelops/auth-flow-kit 1.5.0 → 1.5.5

package/dist/index.js

@@ -9,9 +9,7 @@ import {
 
 // 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 {
@@ -22,11 +20,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 {
   }
 }
@@ -35,27 +30,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 {
       }
     }
@@ -150,22 +138,17 @@ function AuthProvider({
 }
 
 // src/Protected.tsx
+import { useEffect as useEffect2 } from "react";
 import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
-function Protected({
-  children,
-  redirectTo,
-  fallback = /* @__PURE__ */ jsx2("div", { children: "Loading..." })
-}) {
+function Protected({ children, redirectTo }) {
   const { user, loading } = useAuth();
-  if (loading) {
-    return /* @__PURE__ */ jsx2(Fragment, { children: fallback });
-  }
-  if (!user) {
-    if (redirectTo && typeof window !== "undefined") {
-      window.location.replace(redirectTo);
+  useEffect2(() => {
+    if (!loading && !user && redirectTo) {
+      window.location.href = redirectTo;
     }
-    return null;
-  }
+  }, [loading, user, redirectTo]);
+  if (loading) return /* @__PURE__ */ jsx2("div", { children: "Loading..." });
+  if (!user) return null;
   return /* @__PURE__ */ jsx2(Fragment, { children });
 }
 
@@ -180,29 +163,18 @@ function PasswordResetScreen() {
   const [email, setEmail] = useState2("");
   const [sent, setSent] = useState2(false);
   const [error, setError] = useState2(null);
-  const isValidEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
   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__ */ jsxs(
@@ -242,7 +214,6 @@ function PasswordResetScreen() {
           /* @__PURE__ */ jsx3(
             "label",
             {
-              htmlFor: "afk-reset-email",
               style: {
                 position: "absolute",
                 top: sent ? "-18px" : "-10px",
@@ -259,7 +230,6 @@ function PasswordResetScreen() {
           /* @__PURE__ */ jsx3(
             "input",
             {
-              id: "afk-reset-email",
               value: email,
               onChange: (e) => setEmail(e.target.value),
               type: "email",
@@ -322,8 +292,6 @@ function PasswordResetScreen() {
         error && /* @__PURE__ */ jsx3(
           "p",
           {
-            role: "alert",
-            "aria-live": "polite",
             style: {
               marginTop: 20,
               color: "crimson",
@@ -374,26 +342,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);
     }
@@ -434,7 +391,6 @@ function LoginScreen() {
           /* @__PURE__ */ jsx4(
             "label",
             {
-              htmlFor: "afk-login-email",
               style: {
                 position: "absolute",
                 top: "-10px",
@@ -451,7 +407,6 @@ function LoginScreen() {
           /* @__PURE__ */ jsx4(
             "input",
             {
-              id: "afk-login-email",
               value: email,
               onChange: (e) => setEmail(e.target.value),
               type: "email",
@@ -481,7 +436,6 @@ function LoginScreen() {
           /* @__PURE__ */ jsx4(
             "label",
             {
-              htmlFor: "afk-login-password",
               style: {
                 position: "absolute",
                 top: "-10px",
@@ -498,7 +452,6 @@ function LoginScreen() {
           /* @__PURE__ */ jsx4(
             "input",
             {
-              id: "afk-login-password",
               value: password,
               onChange: (e) => setPassword(e.target.value),
               type: "password",
@@ -525,28 +478,17 @@ function LoginScreen() {
           )
         ] }),
         /* @__PURE__ */ jsx4(
-          "div",
+          "p",
           {
+            onClick: () => setShowReset(true),
             style: {
-              textAlign: "right"
+              textAlign: "right",
+              fontSize: 13,
+              color: "#4b4bff",
+              cursor: "pointer",
+              marginBottom: 24
             },
-            children: /* @__PURE__ */ jsx4(
-              "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__ */ jsx4(
@@ -574,8 +516,6 @@ function LoginScreen() {
         error && /* @__PURE__ */ jsx4(
           "p",
           {
-            role: "alert",
-            "aria-live": "polite",
             style: {
               marginTop: 18,
               color: "crimson",
@@ -599,21 +539,8 @@ function SignupScreen() {
   const [name, setName] = useState4("");
   const [email, setEmail] = useState4("");
   const [password, setPassword] = useState4("");
-  const [confirmPassword, setConfirmPassword] = useState4("");
   const [submitting, setSubmitting] = useState4(false);
   const [error, setError] = useState4(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 onSubmit = async (e) => {
     e.preventDefault();
     setSubmitting(true);
@@ -621,47 +548,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);
     }
@@ -703,7 +598,6 @@ function SignupScreen() {
           /* @__PURE__ */ jsx5(
             "label",
             {
-              htmlFor: "afk-signup-name",
               style: {
                 position: "absolute",
                 top: "-10px",
@@ -720,7 +614,6 @@ function SignupScreen() {
           /* @__PURE__ */ jsx5(
             "input",
             {
-              id: "afk-signup-name",
               value: name,
               onChange: (e) => setName(e.target.value),
               placeholder: "Your name",
@@ -749,7 +642,6 @@ function SignupScreen() {
           /* @__PURE__ */ jsx5(
             "label",
             {
-              htmlFor: "afk-signup-email",
               style: {
                 position: "absolute",
                 top: "-10px",
@@ -766,7 +658,6 @@ function SignupScreen() {
           /* @__PURE__ */ jsx5(
             "input",
             {
-              id: "afk-signup-email",
               value: email,
               onChange: (e) => setEmail(e.target.value),
               type: "email",
@@ -796,7 +687,6 @@ function SignupScreen() {
           /* @__PURE__ */ jsx5(
             "label",
             {
-              htmlFor: "afk-signup-password",
               style: {
                 position: "absolute",
                 top: "-10px",
@@ -813,7 +703,6 @@ function SignupScreen() {
           /* @__PURE__ */ jsx5(
             "input",
             {
-              id: "afk-signup-password",
               value: password,
               onChange: (e) => setPassword(e.target.value),
               type: "password",
@@ -839,95 +728,6 @@ function SignupScreen() {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs3("div", { style: { position: "relative", marginBottom: 18 }, children: [
-          /* @__PURE__ */ jsx5(
-            "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__ */ jsx5(
-            "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__ */ jsxs3(
-          "div",
-          {
-            style: {
-              marginBottom: 20,
-              fontSize: 12,
-              color: "#555"
-            },
-            children: [
-              /* @__PURE__ */ jsx5("p", { style: { marginBottom: 6 }, children: "Use at least 8 characters, including letters, numbers, and symbols." }),
-              password && /* @__PURE__ */ jsxs3(
-                "p",
-                {
-                  style: {
-                    fontWeight: 600,
-                    color: getPasswordStrength(password).color
-                  },
-                  children: [
-                    "Password strength: ",
-                    getPasswordStrength(password).label
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx5(
-          "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__ */ jsx5(
           "button",
           {
@@ -953,8 +753,6 @@ function SignupScreen() {
         error && /* @__PURE__ */ jsx5(
           "p",
           {
-            role: "alert",
-            "aria-live": "polite",
             style: {
               marginTop: 18,
               color: "crimson",