@kendevelops/auth-flow-kit 1.3.1 → 1.3.3

package/dist/index.cjs

@@ -34,7 +34,9 @@ var import_react = require("react");
 
 // src/http.ts
 function makeURL(baseURL, path) {
-  return `${baseURL.replace(/\/$/, "")}${path.startsWith("/") ? path : `/${path}`}`;
+  const base = baseURL.replace(/\/$/, "");
+  const suffix = path.startsWith("/") ? path : `/${path}`;
+  return `${base}${suffix}`;
 }
 function getStoredAccessToken() {
   try {
@@ -45,8 +47,11 @@ function getStoredAccessToken() {
 }
 function setStoredAccessToken(token) {
   try {
-    if (token) localStorage.setItem("afk_access_token", token);
-    else localStorage.removeItem("afk_access_token");
+    if (token) {
+      localStorage.setItem("afk_access_token", token);
+      return;
+    }
+    localStorage.removeItem("afk_access_token");
   } catch {
   }
 }
@@ -55,20 +60,27 @@ async function httpJSON(url, opts = {}, withAuth = false) {
     "Content-Type": "application/json"
   };
   if (withAuth) {
-    const tok = getStoredAccessToken();
-    if (tok) headers["Authorization"] = `Bearer ${tok}`;
+    const storedToken = getStoredAccessToken();
+    if (storedToken) {
+      headers["Authorization"] = `Bearer ${storedToken}`;
+    }
   }
   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 data = await res.json();
-        if (data?.message) message = data.message;
+        const body = await res.json();
+        if (body?.message) {
+          message = body.message;
+        }
       } catch {
       }
     }
@@ -188,18 +200,29 @@ function PasswordResetScreen() {
   const [email, setEmail] = (0, import_react3.useState)("");
   const [sent, setSent] = (0, import_react3.useState)(false);
   const [error, setError] = (0, import_react3.useState)(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 })
+        body: JSON.stringify({ email: trimmedEmail })
       });
       setSent(true);
     } catch (err) {
-      setError(err?.message || "Failed to request reset");
+      const message = err instanceof Error ? err.message : "Failed to request reset";
+      setError(message);
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
@@ -239,6 +262,7 @@ function PasswordResetScreen() {
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "label",
             {
+              htmlFor: "afk-reset-email",
               style: {
                 position: "absolute",
                 top: sent ? "-18px" : "-10px",
@@ -255,6 +279,7 @@ function PasswordResetScreen() {
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "input",
             {
+              id: "afk-reset-email",
               value: email,
               onChange: (e) => setEmail(e.target.value),
               type: "email",
@@ -317,6 +342,8 @@ function PasswordResetScreen() {
         error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "p",
           {
+            role: "alert",
+            "aria-live": "polite",
             style: {
               marginTop: 20,
               color: "crimson",
@@ -367,15 +394,26 @@ function LoginScreen() {
     setError(null);
     const trimmedEmail = email.trim();
     const trimmedPassword = password.trim();
-    if (!trimmedEmail || !trimmedPassword) {
-      setError("Email and password cannot be empty.");
+    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.");
       setSubmitting(false);
       return;
     }
     try {
       await login(trimmedEmail, trimmedPassword);
     } catch (err) {
-      setError(err?.message || "Login failed");
+      const message = err instanceof Error ? err.message : "Login failed";
+      setError(message);
     } finally {
       setSubmitting(false);
     }
@@ -416,6 +454,7 @@ function LoginScreen() {
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "label",
             {
+              htmlFor: "afk-login-email",
               style: {
                 position: "absolute",
                 top: "-10px",
@@ -432,6 +471,7 @@ function LoginScreen() {
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "input",
             {
+              id: "afk-login-email",
               value: email,
               onChange: (e) => setEmail(e.target.value),
               type: "email",
@@ -461,6 +501,7 @@ function LoginScreen() {
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "label",
             {
+              htmlFor: "afk-login-password",
               style: {
                 position: "absolute",
                 top: "-10px",
@@ -477,6 +518,7 @@ function LoginScreen() {
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "input",
             {
+              id: "afk-login-password",
               value: password,
               onChange: (e) => setPassword(e.target.value),
               type: "password",
@@ -503,17 +545,28 @@ function LoginScreen() {
           )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "p",
+          "div",
           {
-            onClick: () => setShowReset(true),
             style: {
-              textAlign: "right",
-              fontSize: 13,
-              color: "#4b4bff",
-              cursor: "pointer",
-              marginBottom: 24
+              textAlign: "right"
             },
-            children: "Forgot password?"
+            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?"
+              }
+            )
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -541,6 +594,8 @@ function LoginScreen() {
         error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "p",
           {
+            role: "alert",
+            "aria-live": "polite",
             style: {
               marginTop: 18,
               color: "crimson",
@@ -564,8 +619,21 @@ function SignupScreen() {
   const [name, setName] = (0, import_react5.useState)("");
   const [email, setEmail] = (0, import_react5.useState)("");
   const [password, setPassword] = (0, import_react5.useState)("");
+  const [confirmPassword, setConfirmPassword] = (0, import_react5.useState)("");
   const [submitting, setSubmitting] = (0, import_react5.useState)(false);
   const [error, setError] = (0, import_react5.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 onSubmit = async (e) => {
     e.preventDefault();
     setSubmitting(true);
@@ -573,15 +641,47 @@ function SignupScreen() {
     const trimmedEmail = email.trim();
     const trimmedPassword = password.trim();
     const trimmedName = name.trim();
-    if (!trimmedEmail || !trimmedPassword || !trimmedName) {
-      setError("Email and password cannot be empty.");
+    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.");
       setSubmitting(false);
       return;
     }
     try {
-      await signup({ name, email, password });
+      await signup({ name: trimmedName, email: trimmedEmail, password: trimmedPassword });
     } catch (err) {
-      setError(err?.message || "Signup failed");
+      const message = err instanceof Error ? err.message : "Signup failed";
+      setError(message);
     } finally {
       setSubmitting(false);
     }
@@ -623,6 +723,7 @@ function SignupScreen() {
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "label",
             {
+              htmlFor: "afk-signup-name",
               style: {
                 position: "absolute",
                 top: "-10px",
@@ -639,6 +740,7 @@ function SignupScreen() {
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "input",
             {
+              id: "afk-signup-name",
               value: name,
               onChange: (e) => setName(e.target.value),
               placeholder: "Your name",
@@ -667,6 +769,7 @@ function SignupScreen() {
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "label",
             {
+              htmlFor: "afk-signup-email",
               style: {
                 position: "absolute",
                 top: "-10px",
@@ -683,6 +786,7 @@ function SignupScreen() {
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "input",
             {
+              id: "afk-signup-email",
               value: email,
               onChange: (e) => setEmail(e.target.value),
               type: "email",
@@ -712,6 +816,7 @@ function SignupScreen() {
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "label",
             {
+              htmlFor: "afk-signup-password",
               style: {
                 position: "absolute",
                 top: "-10px",
@@ -728,6 +833,7 @@ function SignupScreen() {
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "input",
             {
+              id: "afk-signup-password",
               value: password,
               onChange: (e) => setPassword(e.target.value),
               type: "password",
@@ -753,6 +859,95 @@ 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",
           {
@@ -778,6 +973,8 @@ function SignupScreen() {
         error && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "p",
           {
+            role: "alert",
+            "aria-live": "polite",
             style: {
               marginTop: 18,
               color: "crimson",