afront 1.0.18 → 1.0.20

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "afront",
-  "version": "1.0.18",
+  "version": "1.0.20",
   "description": "AFront is a front-end JavaScript library designed to create seamless server-side rendered (SSSR) websites.",
   "main": "webpack.dev.js",
   "scripts": {
-    "build": "webpack --config webpack.prod.js",
+    "build": "webpack --config webpack.prod.js && webpack --config webpack.post-prod.js",
     "build:ssr": "webpack --config webpack.ssr.prod.js",
-    "build:alt": "webpack --config webpack.build-prod.js",
+    "build:alt": "webpack --config webpack.build-prod.js && webpack --config webpack.post-prod-static.js --stats-error-details",
     "prod:ssr": "node build-prod-ssr/ssr.prod.js",
     "start": "webpack serve --config webpack.dev.js",
     "static": "node server.js"
@@ -42,6 +42,7 @@
     "asggen-headtags": "^1.0.3",
     "babel-plugin-css-modules-transform": "^1.6.2",
     "babel-plugin-dynamic-import-node": "^2.3.3",
+    "banner-webpack-after-content": "^1.0.3",
     "copy-webpack-plugin": "^12.0.2",
     "dotenv": "^16.4.5",
     "express-rate-limit": "^7.4.1",
@@ -53,7 +54,7 @@
     "json5": "^1.0.2",
     "loader-utils": "^1.4.2",
     "postcss": "^8.4.31",
-    "react-router": "^7.0.2",
+    "react-router": "^7.5.2",
     "readline-sync": "^1.4.10",
     "styled-components": "^6.1.13",
     "terser-webpack-plugin": "^5.3.10",
@@ -80,7 +81,7 @@
     "style-loader": "^4.0.0",
     "webpack": "^5.96.1",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.1.0",
+    "webpack-dev-server": "^5.2.1",
     "webpack-node-externals": "^3.0.0"
   },
   "resolutions": {

package/server.js

@@ -7,6 +7,8 @@ const app = express();
 const PORT = process.env.PORT;
 const HOST = process.env.HOST;
 
+app.set("trust proxy", 1);
+
 // Set up rate limiter: maximum of 100 requests per 15 minutes
 const limiter = RateLimit({
   windowMs: 15 * 60 * 1000, // 15 minutes

package/src/ARoutes/AFRoutes.js

@@ -1,11 +1,28 @@
 import { lazy } from "react";
 
-
 const routes = [
-  { path: "/", element: lazy(() => import("../Pages/Home.js")) },
-  { path: "/support", element: lazy(() => import("../Pages/Support.js")) },
-  { path: "/*", element: lazy(() => import("../PageNotFound.js")) }, // Page Not Found route
+  {
+    path: "/",
+    element: lazy(() => import("../Pages/Home.js")),
+    withHeaderFooter: true,
+  },
+  {
+    path: "/signup",
+    element: lazy(() => import("../Pages/Signup.js")),
+    withHeaderFooter: false,
+  },
+  {
+    path: "/support/s",
+    element: lazy(() => import("../Pages/Support.js")),
+    protected: true,
+    withHeaderFooter: true,
+  },
+  {
+    path: "/*",
+    element: lazy(() => import("../PageNotFound.js")),
+    withHeaderFooter: true,
+  }, // Page Not Found route
   // Add More Pages
 ];
 
-export default routes;
+export default routes;

package/src/Api/api.config.js

@@ -0,0 +1,266 @@
+// Lightweight fetch-based API instance with interceptors and retry helper
+const apiBase =
+  (typeof process !== "undefined" &&
+    process.env &&
+    process.env.REACT_APP_API_BASE) ||
+  (typeof window !== "undefined" &&
+    window.__env &&
+    window.__env.REACT_APP_API_BASE) ||
+  "http://localhost:4000/api/v1";
+
+function isAbsoluteUrl(u) {
+  return /^https?:\/\//i.test(u);
+}
+
+function buildUrl(base, url, params) {
+  const full = isAbsoluteUrl(url) ? url : `${base}${url}`;
+  if (!params) return full;
+  const search = new URLSearchParams(params).toString();
+  return search ? `${full}${full.includes("?") ? "&" : "?"}${search}` : full;
+}
+
+function createInstance({
+  baseURL = apiBase,
+  timeout = 60000,
+  headers = { "Content-Type": "application/json" },
+  withCredentials = true,
+} = {}) {
+  const requestHandlers = [];
+  const responseHandlers = [];
+
+  const interceptors = {
+    request: {
+      use: (fn) => {
+        requestHandlers.push(fn);
+        return requestHandlers.length - 1;
+      },
+    },
+    response: {
+      use: (onFulfilled, onRejected) => {
+        responseHandlers.push({ onFulfilled, onRejected });
+        return responseHandlers.length - 1;
+      },
+    },
+  };
+
+  async function runRequestHandlers(cfg) {
+    let c = { ...cfg };
+    for (const h of requestHandlers) {
+      // handlers may be sync or async
+      // allow them to modify/return the config
+      // if they return undefined, assume they mutated in place
+      // otherwise use returned value
+      // eslint-disable-next-line no-await-in-loop
+      const out = await h(c);
+      if (typeof out !== "undefined") c = out;
+    }
+    return c;
+  }
+
+  async function runResponseHandlers(resOrErr, success = true) {
+    let acc = resOrErr;
+    for (const h of responseHandlers) {
+      try {
+        if (success && typeof h.onFulfilled === "function") {
+          // eslint-disable-next-line no-await-in-loop
+          const out = await h.onFulfilled(acc);
+          if (typeof out !== "undefined") acc = out;
+        } else if (!success && typeof h.onRejected === "function") {
+          // eslint-disable-next-line no-await-in-loop
+          const out = await h.onRejected(acc);
+          if (typeof out !== "undefined") acc = out;
+        }
+      } catch (e) {
+        // if a handler throws, treat as rejection
+        acc = e;
+        success = false;
+      }
+    }
+    if (success) return acc;
+    throw acc;
+  }
+
+  async function request(cfg) {
+    const finalCfg = await runRequestHandlers({
+      baseURL,
+      timeout,
+      headers: { ...headers },
+      withCredentials,
+      ...cfg,
+    });
+
+    const url = buildUrl(
+      finalCfg.baseURL || baseURL,
+      finalCfg.url || finalCfg.path || "/",
+      finalCfg.params
+    );
+
+    const controller = new AbortController();
+    const to = finalCfg.timeout || timeout;
+    const timer = setTimeout(() => controller.abort(), to);
+
+    const fetchOpts = {
+      method: (finalCfg.method || "GET").toUpperCase(),
+      headers: finalCfg.headers || {},
+      signal: controller.signal,
+    };
+    if (finalCfg.withCredentials || finalCfg.withCredentials === undefined)
+      fetchOpts.credentials = "include";
+    if (finalCfg.body !== undefined && finalCfg.body !== null) {
+      fetchOpts.body = finalCfg.body;
+    }
+
+    try {
+      // log request for convenience
+      // allow user interceptors to already log as requested
+      const raw = await fetch(url, fetchOpts);
+      clearTimeout(timer);
+
+      // try to parse JSON, fallback to text
+      let data = null;
+      const ct = raw.headers.get("content-type") || "";
+      if (ct.includes("application/json")) {
+        try {
+          data = await raw.json();
+        } catch (e) {
+          data = null;
+        }
+      } else {
+        try {
+          data = await raw.text();
+        } catch (e) {
+          data = null;
+        }
+      }
+
+      const response = { ok: raw.ok, status: raw.status, data, raw };
+      return await runResponseHandlers(response, true);
+    } catch (err) {
+      clearTimeout(timer);
+      // network or abort
+      return await runResponseHandlers(err, false);
+    }
+  }
+
+  // convenience methods
+  const instance = {
+    interceptors,
+    request,
+    get: (url, cfg = {}) => request({ method: "GET", url, ...cfg }),
+    post: (url, body, cfg = {}) =>
+      request({
+        method: "POST",
+        url,
+        body:
+          typeof body === "object" && !(body instanceof FormData)
+            ? JSON.stringify(body)
+            : body,
+        headers: {
+          ...(cfg.headers || {}),
+          "Content-Type":
+            body instanceof FormData ? undefined : "application/json",
+        },
+        ...cfg,
+      }),
+    put: (url, body, cfg = {}) =>
+      request({
+        method: "PUT",
+        url,
+        body:
+          typeof body === "object" && !(body instanceof FormData)
+            ? JSON.stringify(body)
+            : body,
+        headers: {
+          ...(cfg.headers || {}),
+          "Content-Type":
+            body instanceof FormData ? undefined : "application/json",
+        },
+        ...cfg,
+      }),
+    patch: (url, body, cfg = {}) =>
+      request({
+        method: "PATCH",
+        url,
+        body:
+          typeof body === "object" && !(body instanceof FormData)
+            ? JSON.stringify(body)
+            : body,
+        headers: {
+          ...(cfg.headers || {}),
+          "Content-Type":
+            body instanceof FormData ? undefined : "application/json",
+        },
+        ...cfg,
+      }),
+    delete: (url, cfg = {}) => request({ method: "DELETE", url, ...cfg }),
+  };
+
+  return instance;
+}
+
+export function requestWithRetry(
+  fn,
+  { retries = 3, retryDelay = 1000, retryOn = (err) => true } = {}
+) {
+  return new Promise(async (resolve, reject) => {
+    let attempt = 0;
+    while (attempt < retries) {
+      try {
+        // fn should be a function returning a promise
+        const res = await fn();
+        return resolve(res);
+      } catch (err) {
+        attempt += 1;
+        if (attempt >= retries || !retryOn(err)) return reject(err);
+        // exponential backoff
+        // eslint-disable-next-line no-await-in-loop
+        await new Promise((r) => setTimeout(r, retryDelay * attempt));
+      }
+    }
+    reject(new Error("Retries exhausted"));
+  });
+}
+
+export const instance = createInstance({
+  baseURL: apiBase,
+  timeout: 60000,
+  headers: { "Content-Type": "application/json" },
+  withCredentials: true,
+});
+
+// expose defaults for logging/compatibility
+instance.defaults = { baseURL: apiBase, timeout: 60000 };
+
+// request logging interceptor
+instance.interceptors.request.use((config) => {
+  try {
+    console.log(
+      `API Request -> ${(
+        (config.method || "").toString() || "GET"
+      ).toUpperCase()} ${config.url || config.path} (base: ${
+        instance.defaults.baseURL
+      }) (timeout: ${config.timeout || instance.defaults.timeout}ms)`
+    );
+  } catch (e) {
+    /* ignore */
+  }
+  return config;
+});
+
+// response / error logging interceptor
+instance.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (!error || !error.status) {
+      console.error(
+        "Network or CORS error when calling API:",
+        error && error.message ? error.message : error
+      );
+    } else {
+      console.warn("API response error:", error.status, error.data);
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default instance;

package/src/Api/login.service.js

@@ -0,0 +1,44 @@
+import api from "./api.config.js";
+
+const BASE = "/auth";
+
+export async function login({ email, password }) {
+  return api.post(
+    `${BASE}/login`,
+    { email, password },
+    { withCredentials: true }
+  );
+}
+
+export async function signup({
+  email,
+  password,
+  name,
+  accountType,
+  companyName,
+}) {
+  return api.post(
+    `${BASE}/signup`,
+    { email, password, name, accountType, companyName },
+    { withCredentials: true }
+  );
+}
+
+export async function checkSignup({ email }) {
+  return api.post(`${BASE}/check`, { email }, { withCredentials: true });
+}
+
+export async function logout() {
+  try {
+    await api.post(`${BASE}/logout`, null, { withCredentials: true });
+  } catch (e) {
+    /* ignore */
+  }
+  try {
+    localStorage.setItem("auth-event", String(Date.now()));
+  } catch (e) {}
+  window.dispatchEvent(new Event("auth-changed"));
+  return { ok: true };
+}
+
+export default { login, signup, logout, checkSignup };

package/src/App.js

@@ -1,7 +1,6 @@
-import React from "react";
+import React, { useState } from "react";
 import ARoutes from "./Routes/ARoutes";
-import Header from "./Components/Header/Header.js";
-import Footer from "./Components/Footer/Footer.js";
+import LoadingContext from "./Utils/LoadingContext";
 
 const isProduction = process.env.NODE_ENV === "production";
 
@@ -9,20 +8,22 @@ const Tail = () => (
   <asggen
     style={{ display: "none" }}
     dangerouslySetInnerHTML={{
-      __html: `Rendering Asggen DOM...</asggen></asggenapp></body></html>`,
+      __html: `Rendering Asggen DOM...</asggen></asggenapp><script>window.addEventListener('load', () => { const loadingElement = document.getElementById('loading'); if (loadingElement) { setTimeout(() => { loadingElement.style.display = 'none'; }, 00);}});</script><script>if ("serviceWorker" in navigator) { window.addEventListener("load", () => { navigator.serviceWorker .register("/service-worker.js") .then((registration) => { registration.scope }) .catch((error) => { console.error("Service Worker registration failed:", error); }); }); }</script></body></html>`,
     }}
   />
 );
 
 function App({ context }) {
+  const [loading, setLoading] = useState(false);
   return (
     <>
-      <Header />
-      <ARoutes context={context} />
-      <Footer />
-      {isProduction ? <Tail /> : null}
+      <LoadingContext.Provider value={{ loading, setLoading }}>
+        {loading && <LoadingIndicator />}
+        <ARoutes context={context} />
+        {isProduction ? <Tail /> : null}
+      </LoadingContext.Provider>
     </>
   );
 }
 
-export default App;
+export default App;

package/src/Components/Loading/LoadingIndicator.js

@@ -0,0 +1,12 @@
+import React from "react";
+import * as styles from "./LoadingIndicator.module.css"; 
+
+const LoadingIndicator = () => {
+  return (
+    <div className={styles.loadingIndicator}>
+      <div className={styles.loadingLine}></div>
+    </div>
+  );
+};
+
+export default LoadingIndicator;

package/src/Components/Loading/LoadingIndicator.module.css

@@ -0,0 +1,34 @@
+.loadingIndicator {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 0.25rem;
+    background-color: #4287f5;
+    z-index: 9998;
+    overflow: hidden;
+}
+
+.loadingLine {
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, #84f9f1, transparent);
+    position: absolute;
+    animation: loadingAnimation 0.5s ease-in-out infinite;
+}
+
+@keyframes loadingAnimation {
+    0% {
+        transform: translateX(-100%);
+        opacity: 0;
+    }
+
+    50% {
+        opacity: 1;
+    }
+
+    100% {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+}

package/src/Components/Loading/LoadingSpinner.js

@@ -0,0 +1,27 @@
+import React from "react";
+import * as styles from "./LoadingSpinner.module.css";
+
+const LoadingSpinner = ({ size }) => {
+  const scaleFactor = size / 80;
+  return (
+      <div
+        style={{ transform: `scale(${scaleFactor})` }}
+        className={styles.ldsSpinner}
+      >
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+  );
+};
+
+export default LoadingSpinner;

package/src/Components/Loading/LoadingSpinner.module.css

@@ -0,0 +1,100 @@
+.ldsSpinner,
+.ldsSpinner div,
+.ldsSpinner div:after {
+    box-sizing: border-box;
+}
+
+.ldsSpinner {
+    color: currentColor;
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+}
+
+.ldsSpinner div {
+    transform-origin: 40px 40px;
+    animation: ldsSpinner 1.2s linear infinite;
+}
+
+.ldsSpinner div:after {
+    content: " ";
+    display: block;
+    position: absolute;
+    top: 3.2px;
+    left: 36.8px;
+    width: 6.4px;
+    height: 17.6px;
+    border-radius: 20%;
+    background: currentColor;
+}
+
+.ldsSpinner div:nth-child(1) {
+    transform: rotate(0deg);
+    animation-delay: -1.1s;
+}
+
+.ldsSpinner div:nth-child(2) {
+    transform: rotate(30deg);
+    animation-delay: -1s;
+}
+
+.ldsSpinner div:nth-child(3) {
+    transform: rotate(60deg);
+    animation-delay: -0.9s;
+}
+
+.ldsSpinner div:nth-child(4) {
+    transform: rotate(90deg);
+    animation-delay: -0.8s;
+}
+
+.ldsSpinner div:nth-child(5) {
+    transform: rotate(120deg);
+    animation-delay: -0.7s;
+}
+
+.ldsSpinner div:nth-child(6) {
+    transform: rotate(150deg);
+    animation-delay: -0.6s;
+}
+
+.ldsSpinner div:nth-child(7) {
+    transform: rotate(180deg);
+    animation-delay: -0.5s;
+}
+
+.ldsSpinner div:nth-child(8) {
+    transform: rotate(210deg);
+    animation-delay: -0.4s;
+}
+
+.ldsSpinner div:nth-child(9) {
+    transform: rotate(240deg);
+    animation-delay: -0.3s;
+}
+
+.ldsSpinner div:nth-child(10) {
+    transform: rotate(270deg);
+    animation-delay: -0.2s;
+}
+
+.ldsSpinner div:nth-child(11) {
+    transform: rotate(300deg);
+    animation-delay: -0.1s;
+}
+
+.ldsSpinner div:nth-child(12) {
+    transform: rotate(330deg);
+    animation-delay: 0s;
+}
+
+@keyframes ldsSpinner {
+    0% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}

package/src/Components/RequireAuth.js

@@ -0,0 +1,30 @@
+import React, { useEffect, useState } from "react";
+import { Navigate, Outlet, useLocation } from "react-router";
+import auth from "../Api/login.service";
+
+export default function RequireAuth({ children }) {
+  const location = useLocation();
+  const [status, setStatus] = useState("checking");
+
+  useEffect(() => {
+    let mounted = true;
+    (async () => {
+      try {
+        const res = await auth.getCurrentUser();
+        if (mounted && res?.data?.user) setStatus("authed");
+        else if (mounted) setStatus("unauth");
+      } catch (e) {
+        if (mounted) setStatus("unauth");
+      }
+    })();
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
+  if (status === "checking") return null;
+  if (status === "unauth")
+    return <Navigate to="/login" state={{ from: location }} replace />;
+  // If children are provided, render them; otherwise render nested routes via Outlet
+  return children ? children : <Outlet />;
+}

package/src/PageNotFound.js

@@ -17,4 +17,4 @@ const PageNotFound = () => {
   );
 };
 
-export default PageNotFound;
+export default PageNotFound;