@kendevelops/auth-flow-kit 1.3.2 → 1.3.3

package/dist/index.js

@@ -9,7 +9,9 @@ import {
 
 // 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 {
@@ -20,8 +22,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 {
   }
 }
@@ -30,20 +35,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 {
       }
     }
@@ -163,18 +175,29 @@ 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 })
+        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__ */ jsxs(
@@ -214,6 +237,7 @@ function PasswordResetScreen() {
           /* @__PURE__ */ jsx3(
             "label",
             {
+              htmlFor: "afk-reset-email",
               style: {
                 position: "absolute",
                 top: sent ? "-18px" : "-10px",
@@ -230,6 +254,7 @@ function PasswordResetScreen() {
           /* @__PURE__ */ jsx3(
             "input",
             {
+              id: "afk-reset-email",
               value: email,
               onChange: (e) => setEmail(e.target.value),
               type: "email",
@@ -292,6 +317,8 @@ function PasswordResetScreen() {
         error && /* @__PURE__ */ jsx3(
           "p",
           {
+            role: "alert",
+            "aria-live": "polite",
             style: {
               marginTop: 20,
               color: "crimson",
@@ -342,15 +369,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);
     }
@@ -391,6 +429,7 @@ function LoginScreen() {
           /* @__PURE__ */ jsx4(
             "label",
             {
+              htmlFor: "afk-login-email",
               style: {
                 position: "absolute",
                 top: "-10px",
@@ -407,6 +446,7 @@ function LoginScreen() {
           /* @__PURE__ */ jsx4(
             "input",
             {
+              id: "afk-login-email",
               value: email,
               onChange: (e) => setEmail(e.target.value),
               type: "email",
@@ -436,6 +476,7 @@ function LoginScreen() {
           /* @__PURE__ */ jsx4(
             "label",
             {
+              htmlFor: "afk-login-password",
               style: {
                 position: "absolute",
                 top: "-10px",
@@ -452,6 +493,7 @@ function LoginScreen() {
           /* @__PURE__ */ jsx4(
             "input",
             {
+              id: "afk-login-password",
               value: password,
               onChange: (e) => setPassword(e.target.value),
               type: "password",
@@ -478,17 +520,28 @@ function LoginScreen() {
           )
         ] }),
         /* @__PURE__ */ jsx4(
-          "p",
+          "div",
           {
-            onClick: () => setShowReset(true),
             style: {
-              textAlign: "right",
-              fontSize: 13,
-              color: "#4b4bff",
-              cursor: "pointer",
-              marginBottom: 24
+              textAlign: "right"
             },
-            children: "Forgot password?"
+            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?"
+              }
+            )
           }
         ),
         /* @__PURE__ */ jsx4(
@@ -516,6 +569,8 @@ function LoginScreen() {
         error && /* @__PURE__ */ jsx4(
           "p",
           {
+            role: "alert",
+            "aria-live": "polite",
             style: {
               marginTop: 18,
               color: "crimson",
@@ -539,8 +594,21 @@ 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);
@@ -548,15 +616,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);
     }
@@ -598,6 +698,7 @@ function SignupScreen() {
           /* @__PURE__ */ jsx5(
             "label",
             {
+              htmlFor: "afk-signup-name",
               style: {
                 position: "absolute",
                 top: "-10px",
@@ -614,6 +715,7 @@ function SignupScreen() {
           /* @__PURE__ */ jsx5(
             "input",
             {
+              id: "afk-signup-name",
               value: name,
               onChange: (e) => setName(e.target.value),
               placeholder: "Your name",
@@ -642,6 +744,7 @@ function SignupScreen() {
           /* @__PURE__ */ jsx5(
             "label",
             {
+              htmlFor: "afk-signup-email",
               style: {
                 position: "absolute",
                 top: "-10px",
@@ -658,6 +761,7 @@ function SignupScreen() {
           /* @__PURE__ */ jsx5(
             "input",
             {
+              id: "afk-signup-email",
               value: email,
               onChange: (e) => setEmail(e.target.value),
               type: "email",
@@ -687,6 +791,7 @@ function SignupScreen() {
           /* @__PURE__ */ jsx5(
             "label",
             {
+              htmlFor: "afk-signup-password",
               style: {
                 position: "absolute",
                 top: "-10px",
@@ -703,6 +808,7 @@ function SignupScreen() {
           /* @__PURE__ */ jsx5(
             "input",
             {
+              id: "afk-signup-password",
               value: password,
               onChange: (e) => setPassword(e.target.value),
               type: "password",
@@ -728,6 +834,95 @@ 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",
           {
@@ -753,6 +948,8 @@ function SignupScreen() {
         error && /* @__PURE__ */ jsx5(
           "p",
           {
+            role: "alert",
+            "aria-live": "polite",
             style: {
               marginTop: 18,
               color: "crimson",