easy-starter 1.2.1 → 2.0.0

package/template/server/index.tsx

@@ -5,13 +5,27 @@ import cors from "cors";
 import express from "express";
 
 import easyDBNode from "easy-db-node";
-import { renderToHTML } from "ssr-hook/server";
 import { setAPIBackend } from "typed-client-server-api";
 
+// --- SSR START ---
+import { renderToHTML } from "ssr-hook/server";
+// --- SSR END ---
+
+// --- ANALYTICS START ---
 import { postEasyAnalytics, getEasyAnalytics } from "easy-analytics/server";
+// --- ANALYTICS END ---
 
-import App from "../src/App";
+// --- AUTH START ---
+import { EasyLoginServer } from "easy-user-auth/server";
+import { sendMailForgottenPassword } from "./mail";
+import { UserProfile } from "../types";
+// --- AUTH END ---
 
+// --- OGIMAGE START ---
+import puppeteer from "puppeteer";
+// --- OGIMAGE END ---
+
+import App from "../src/App";
 import { API, Database } from "../types";
 
 const PORT = process.env.SERVER_PORT || 1111;
@@ -20,7 +34,7 @@ const LOCALHOST = `http://localhost:${PORT}`;
 // The ORIGIN is used for SEO and by ssr-hook to know where the requests are coming from.
 const ORIGIN = process.env.NODE_ENV === "development"
     ? LOCALHOST
-    : process.env.SERVER_URL;
+    : process.env.SERVER_URL || LOCALHOST;
 
 const INDEX_HTML_PATH = resolve(__dirname, "..", "dist", "index.html");
 
@@ -36,23 +50,48 @@ const app = express();
 
 if (process.env.NODE_ENV === "development") {
     console.log("Starting development server...");
-    app.use(cors());
+    app.use(cors({
+        origin: ["http://localhost:5173", "http://localhost:1111"],
+        credentials: true
+    }));
+} else {
+    app.use(cors({
+        origin: ORIGIN,
+        credentials: true
+    }));
 }
 
-// ---------------------------- SSR for index ----------------------------------
-app.get(["/", "/index.html"], async (req, res) => {
-    try {
-        const indexHtml = await readFile(INDEX_HTML_PATH, "utf-8");
-        const html = await renderToHTML(ORIGIN, req.url, indexHtml, <App />);
-        res.set("Content-Type", "text/html");
-        res.send(html);
-    } catch (e) {
-        console.error("SSR error:", e);
-        res.status(500);
-        res.json({ message: "Internal server error" });
-    }
+// Parse incoming JSON payloads.
+app.use(express.json({ limit: "1MB" }));
+
+// --- AUTH START ---
+const authServer = new EasyLoginServer<UserProfile>({
+    jwtSecret: process.env.JWT_SECRET || "fallback-secret-key-change-me",
+    secureCookies: process.env.NODE_ENV === "production",
+    db: {
+        insertUser: async (user) => insert("user", user),
+        getUserById: async (id) => select("user", id),
+        getUserByMail: async (mail) => {
+            const users = await selectArray("user");
+            return users.find(u => u.mail.toLowerCase() === mail.toLowerCase()) || null;
+        },
+        getUserByRecoveryToken: async (token) => {
+            const users = await selectArray("user");
+            return users.find(u => u.passwordRecovery?.token === token) || null;
+        },
+        updateUser: async (id, user) => {
+            await update("user", id, user);
+        },
+    },
+    mailSender: async (lang, mailTo, token) => {
+        await sendMailForgottenPassword(lang, mailTo, token, ORIGIN);
+    },
 });
 
+// Register all user authentication routes (/api/login, /api/register, /api/user, etc.)
+authServer.registerExpressRoutes(app);
+// --- AUTH END ---
+
 // Serve static files generated by the bundler (JS, CSS)
 app.use(express.static("dist"));
 // Serve any public assets (like images, fonts)
@@ -60,41 +99,95 @@ app.use(express.static("public"));
 // Serve the database files (e.g. uploaded images or PDF files from easy-db-node)
 app.use("/files", express.static("easy-db-files"));
 
+// ------------------------------ og:image -------------------------------------
+// --- OGIMAGE START ---
+app.get("/og-image.png", async (req, res) => {
+    const path = req.query.path as string;
+    if (!path) {
+        return res.sendFile(resolve(__dirname, "..", "public", "images", "icon.png"));
+    }
 
-// --------------------------------- SEO ---------------------------------------
-// Basic configuration for search engine crawlers.
-app.get("/robots.txt", (_, res) => {
-    res.type("text/plain");
-    res.send(`User-agent: *\nAllow: /\n\nSitemap: ${ORIGIN}/sitemap.xml`);
-});
+    const image = await select("og-image", path);
+    if (image) {
+        return res.redirect(302, image.file.url);
+    }
 
-// Sitemap helps search engines index your site. You should dynamically generate this
-// based on your application's routes and database content.
-app.get("/sitemap.xml", async (_, res) => {
-    // TODO: add all pages
-    const sitemap = [{
-        url: ORIGIN + "/",
-        lastModified: "2026-01-01",
-        changeFrequency: "weekly",
-        priority: 1,
-    }];
+    try {
+        const now = Date.now();
+        const browser = await puppeteer.launch({
+            headless: true,
+            args: [
+                '--no-sandbox',
+                '--disable-setuid-sandbox',
+                '--disable-gpu',
+                '--disable-dev-shm-usage',
+                '--no-first-run',
+                '--no-zygote',
+                '--single-process',
+            ]
+        });
 
-    res.set("Content-Type", "text/xml");
-    res.send(`<?xml version="1.0" encoding="UTF-8" ?>
-<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">${sitemap.map(s => `<url>
-        <loc>${s.url}</loc>
-        <lastmod>${s.lastModified}</lastmod>
-        ${s.changeFrequency ? `<changefreq>${s.changeFrequency}</changefreq>` : ""}
-        <priority>${s.priority}</priority>
-    </url>`).join("\n")}</urlset>`);
-});
+        const page = await browser.newPage();
+        // --- SSR START ---
+        await page.setJavaScriptEnabled(false);
+        // --- SSR END ---
+        // --- NO_SSR START ---
+        await page.setJavaScriptEnabled(true);
+        // --- NO_SSR END ---
+        await page.setViewport({ width: 600, height: 500 });
+        
+        // Render target page
+        await page.goto(`${LOCALHOST}${path}`, { waitUntil: 'networkidle0' });
+        const base64 = await page.screenshot({ type: "png", encoding: "base64" });
+        await browser.close();
 
+        await update("og-image", path, {
+            dateCreated: new Date().toISOString(),
+            file: {
+                type: "EASY_DB_FILE",
+                url: `data:image/png;base64,${base64}`,
+            },
+        } as any);
 
-// This parses incoming JSON payloads for the API and analytics.
-app.use(express.json({ limit: "1MB" }));
+        console.log(`Render og:image for ${path} took ${Date.now() - now} ms.`);
+
+        const img = await select("og-image", path);
+        return res.redirect(302, img!.file.url);
+
+    } catch (e) {
+        console.error("og:image rendering error:", e);
+        return res.sendFile(resolve(__dirname, "..", "public", "images", "icon.png"));
+    }
+});
+// --- OGIMAGE END ---
+
+// ---------------------------- SSR for index ----------------------------------
+// --- SSR START ---
+app.get(["/", "/index.html"], async (req, res) => {
+    try {
+        const indexHtml = await readFile(INDEX_HTML_PATH, "utf-8");
+        const html = await renderToHTML(ORIGIN, req.url, indexHtml, <App />);
+        res.set("Content-Type", "text/html");
+        res.send(html);
+    } catch (e) {
+        console.error("SSR error:", e);
+        res.status(500).json({ message: "Internal server error" });
+    }
+});
+// --- SSR END ---
+// --- NO_SSR START ---
+app.get(["/", "/index.html"], async (req, res) => {
+    try {
+        res.sendFile(INDEX_HTML_PATH);
+    } catch (e) {
+        console.error("Error serving index.html:", e);
+        res.status(500).json({ message: "Internal server error" });
+    }
+});
+// --- NO_SSR END ---
 
 // --------------------------- Easy analytics ----------------------------------
-// Endpoint to receive analytics data from the client.
+// --- ANALYTICS START ---
 app.post("/api/easy-analytics", async (req, res) => {
     const userAgent = req.headers['user-agent'] || "";
     const ip = req.headers['x-forwarded-for'] || req.socket.remoteAddress || "";
@@ -107,10 +200,9 @@ app.post("/api/easy-analytics", async (req, res) => {
         res.status(400).json({ message: e.message || "Bad request" });
     }
 });
+// --- ANALYTICS END ---
 
 // --------------------------------- API ---------------------------------------
-// Set up our type-safe API backend. All functions defined here map directly to the
-// API type defined in types.d.ts, and can be called from the frontend using by api., useApi., or useSSRApi.
 setAPIBackend<API>(app, {
     async getItems() {
         return await selectArray("item");
@@ -118,7 +210,7 @@ setAPIBackend<API>(app, {
     async getItem({ id }) {
         const item = await select("item", id);
         if (!item) throw new Error("Item not found");
-        return item; // easy-db-node select returns the object
+        return item;
     },
     async addItem({ name, value }) {
         const id = await insert("item", { name, value });
@@ -128,19 +220,119 @@ setAPIBackend<API>(app, {
         await remove("item", id);
         return true;
     },
-    // --- ADMIN START ---
+    
+    // --- ADMIN_NO_AUTH START ---
     async getEasyAnalyticsData({ password, month }) {
         const validPassword = process.env.ADMIN_PASSWORD;
         if (!validPassword || password !== validPassword) {
             throw new Error("Invalid password or server error");
         }
+        // --- ANALYTICS START ---
         return await getEasyAnalytics(month);
-    }
-    // --- ADMIN END ---
+        // --- ANALYTICS END ---
+        // --- NO_ANALYTICS START ---
+        return [];
+        // --- NO_ANALYTICS END ---
+    },
+    // --- ADMIN_NO_AUTH END ---
+
+    // --- ADMIN_WITH_AUTH START ---
+    async getEasyAnalyticsData({ month }, req, res) {
+        const session = await authServer.checkLogin(req!, res!);
+        const user = await select("user", session.userId);
+        if (!user || user.role !== "admin") {
+            throw new Error("Forbidden");
+        }
+        // --- ANALYTICS START ---
+        return await getEasyAnalytics(month);
+        // --- ANALYTICS END ---
+        // --- NO_ANALYTICS START ---
+        return [];
+        // --- NO_ANALYTICS END ---
+    },
+    // --- ADMIN_WITH_AUTH END ---
+
+    // --- ADMIN_ERRORS_NO_AUTH START ---
+    async getEasyAnalyticsErrors({ password, month }) {
+        const validPassword = process.env.ADMIN_PASSWORD;
+        if (!validPassword || password !== validPassword) {
+            throw new Error("Invalid password or server error");
+        }
+        return await selectArray(`easyAnalyticsError-${month}`);
+    },
+    // --- ADMIN_ERRORS_NO_AUTH END ---
+
+    // --- ADMIN_ERRORS_WITH_AUTH START ---
+    async getEasyAnalyticsErrors({ month }, req, res) {
+        const session = await authServer.checkLogin(req!, res!);
+        const user = await select("user", session.userId);
+        if (!user || user.role !== "admin") {
+            throw new Error("Forbidden");
+        }
+        return await selectArray(`easyAnalyticsError-${month}`);
+    },
+    // --- ADMIN_ERRORS_WITH_AUTH END ---
+
+    // --- ADMIN_USERS START ---
+    async getUsers(params, req, res) {
+        const session = await authServer.checkLogin(req!, res!);
+        const user = await select("user", session.userId);
+        if (!user || user.role !== "admin") {
+            throw new Error("Forbidden");
+        }
+        const allUsers = await selectArray("user");
+        return allUsers.map(u => ({
+            _id: u._id,
+            email: u.mail,
+            name: u.name || u.profile?.name || "",
+            role: u.profile?.role || u.role || "user"
+        }));
+    },
+    async updateUserRole({ userId, role }, req, res) {
+        const session = await authServer.checkLogin(req!, res!);
+        const user = await select("user", session.userId);
+        if (!user || user.role !== "admin") {
+            throw new Error("Forbidden");
+        }
+        const targetUser = await select("user", userId);
+        if (!targetUser) {
+            throw new Error("User not found");
+        }
+        targetUser.role = role;
+        targetUser.profile = targetUser.profile || { name: targetUser.name || "", role: "user" };
+        targetUser.profile.role = role;
+        await update("user", userId, targetUser);
+        return true;
+    },
+    // --- ADMIN_USERS END ---
+});
+
+// --------------------------------- SEO ---------------------------------------
+app.get("/robots.txt", (_, res) => {
+    res.type("text/plain");
+    res.send(`User-agent: *\nAllow: /\n\nSitemap: ${ORIGIN}/sitemap.xml`);
 });
 
+app.get("/sitemap.xml", async (_, res) => {
+    const sitemap = [{
+        url: ORIGIN + "/",
+        lastModified: new Date().toISOString().slice(0, 10),
+        changeFrequency: "weekly",
+        priority: 1,
+    }];
+
+    res.set("Content-Type", "text/xml");
+    res.send(`<?xml version="1.0" encoding="UTF-8" ?>
+<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">${sitemap.map(s => `<url>
+        <loc>${s.url}</loc>
+        <lastmod>${s.lastModified}</lastmod>
+        ${s.changeFrequency ? `<changefreq>${s.changeFrequency}</changefreq>` : ""}
+        <priority>${s.priority}</priority>
+    </url>`).join("\n")}</urlset>`);
+});
 
 // --------------------------------- SSR ---------------------------------------
+// --- SSR START ---
 app.get(/.*/, async (req, res) => {
     try {
         const indexHtml = await readFile(INDEX_HTML_PATH, "utf-8");
@@ -149,11 +341,15 @@ app.get(/.*/, async (req, res) => {
         res.send(html);
     } catch (e) {
         console.error("SSR error:", e);
-        res.status(500);
-        res.json({ message: "Internal server error" });
+        res.status(500).json({ message: "Internal server error" });
     }
 });
-
+// --- SSR END ---
+// --- NO_SSR START ---
+app.get(/.*/, async (req, res) => {
+    res.sendFile(INDEX_HTML_PATH);
+});
+// --- NO_SSR END ---
 
 // Start listening for incoming requests.
 app.listen(PORT, () => {

package/template/server/mail.tsx

@@ -0,0 +1,120 @@
+import nodemailer from "nodemailer";
+import React from "react";
+import { renderToString } from "react-dom/server";
+
+const mailHost = process.env.MAIL_SMTP;
+const mailUser = process.env.MAIL_USER;
+const mailPort = Number(process.env.MAIL_PORT || 587);
+const mailPass = process.env.MAIL_PASSWORD;
+
+const transporter = (mailHost && mailUser && mailPass) ? nodemailer.createTransport({
+    host: mailHost,
+    port: mailPort,
+    secure: mailPort === 465,
+    auth: {
+        user: mailUser,
+        pass: mailPass,
+    },
+}) : null;
+
+async function sendMail(mailTo: string, subject: string, html: string) {
+    if (!transporter) {
+        console.warn("\n⚠️  SMTP is not configured. Email was not sent.");
+        console.log(`To: ${mailTo}`);
+        console.log(`Subject: ${subject}`);
+        console.log(`Content HTML preview:\n${html}\n`);
+        return true; // Simulate success in dev if not configured
+    }
+
+    try {
+        const info = await transporter.sendMail({
+            from: `"My App" <${mailUser}>`,
+            to: mailTo,
+            subject,
+            html,
+        });
+
+        return info.accepted.includes(mailTo);
+    } catch (err) {
+        console.error("Error sending email:", err);
+        return false;
+    }
+}
+
+const mailTranslations: Record<string, {
+    subject: string;
+    title: string;
+    instruction: string;
+    button: string;
+    fallback: string;
+    disclaimer: string;
+    signoff: string;
+}> = {
+    cs: {
+        subject: "Zapomenuté heslo",
+        title: "Zapomenuté heslo",
+        instruction: "Pro nastavení nového hesla klikněte na následující tlačítko:",
+        button: "Změnit heslo",
+        fallback: "Pokud tlačítko nefunguje, zkopírujte tento odkaz do prohlížeče:",
+        disclaimer: "Pokud jste o změnu hesla nežádali, tento e-mail prosím ignorujte.",
+        signoff: "S pozdravem,",
+    },
+    en: {
+        subject: "Forgotten Password",
+        title: "Forgotten Password",
+        instruction: "To set your new password, click the following button:",
+        button: "Change password",
+        fallback: "If the button does not work, try copying this link into your browser:",
+        disclaimer: "If you did not request a password change, please ignore this email.",
+        signoff: "Kind regards,",
+    },
+    es: {
+        subject: "Contraseña olvidada",
+        title: "Contraseña olvidada",
+        instruction: "Para configurar tu nueva contraseña, haz clic en el siguiente botón:",
+        button: "Cambiar contraseña",
+        fallback: "Si el botón no funciona, prueba copiando este enlace en tu navegador:",
+        disclaimer: "Si no solicitaste un cambio de contraseña, ignora este correo electrónico.",
+        signoff: "Saludos cordiales,",
+    }
+};
+
+export async function sendMailForgottenPassword(lang: string, mailTo: string, token: string, origin: string) {
+    const link = `${origin}/reset-password?token=${encodeURIComponent(token)}`;
+    const t = mailTranslations[lang] || mailTranslations.en;
+
+    const isMailSent = await sendMail(mailTo, t.subject, renderToString(
+        <div style={{ fontFamily: "sans-serif", padding: 20, color: "#333" }}>
+            <div style={{ backgroundColor: "#333", padding: "20px", color: "#fff", fontSize: "24px", fontWeight: "bold", textAlign: "center", borderRadius: "8px 8px 0 0" }}>
+                My App
+            </div>
+            <div style={{ padding: "20px", border: "1px solid #ddd", borderRadius: "0 0 8px 8px", backgroundColor: "#fafafa" }}>
+                <h2>{t.title}</h2>
+                <p>{t.instruction}</p>
+                <a href={link} target="_blank" rel="noopener noreferrer" style={{
+                    display: "inline-block",
+                    margin: "16px 0px",
+                    padding: "12px 24px",
+                    borderRadius: "6px",
+                    backgroundColor: "#6366f1",
+                    color: "#ffffff",
+                    textDecoration: "none",
+                    fontWeight: "bold",
+                }}>
+                    {t.button}
+                </a>
+                <p style={{ fontSize: "12px", color: "#777" }}>{t.fallback}</p>
+                <pre style={{ backgroundColor: "#eee", padding: 10, borderRadius: 4, overflowX: "auto", fontSize: "11px" }}>{link}</pre>
+                <p style={{ fontSize: "12px", color: "#999", marginTop: 20 }}>{t.disclaimer}</p>
+                <p style={{ borderTop: "1px solid #eee", paddingTop: 15, marginTop: 20 }}>
+                    {t.signoff}<br />
+                    <strong>My App Team</strong>
+                </p>
+            </div>
+        </div>
+    ));
+
+    if (!isMailSent) {
+        throw new Error("Failed to send forgotten password email.");
+    }
+}

package/template/src/App.tsx

@@ -1,15 +1,41 @@
-import { init } from "easy-analytics/client";
+import React from "react";
 import { RouterProvider } from "easy-page-router";
 
 import Router from "./Router";
 
+// --- ANALYTICS START ---
+import { init } from "easy-analytics/client";
+
 // Initialize analytics. It sends data to our backend endpoint.
-init(process.env.NODE_ENV === "development"
-    ? "http://localhost:1111/api/easy-analytics"
-    : "/api/easy-analytics");
+// In development, Vite proxies this relative path to the Express server.
+init("/api/easy-analytics");
+// --- ANALYTICS END ---
+
+// --- AUTH START ---
+import { UserProvider } from "easy-user-auth/react";
+import { UserProfile } from "../types";
+// --- AUTH END ---
 
 export default function App() {
-    return <RouterProvider>
-        <Router />
-    </RouterProvider>;
+    // --- AUTH START ---
+    const defaultUser: UserProfile = {
+        name: "",
+        role: "user",
+    };
+
+    return (
+        <UserProvider<UserProfile> defaultUser={defaultUser}>
+            <RouterProvider>
+                <Router />
+            </RouterProvider>
+        </UserProvider>
+    );
+    // --- AUTH END ---
+    // --- NO_AUTH START ---
+    return (
+        <RouterProvider>
+            <Router />
+        </RouterProvider>
+    );
+    // --- NO_AUTH END ---
 }

package/template/src/Router.tsx

@@ -1,13 +1,18 @@
+import React from "react";
 import { Router } from "easy-page-router/react";
 
 import Index from "./pages/Index";
 import NotFound from "./pages/NotFound";
-// --- ADMIN START ---
 
+// --- ADMIN START ---
 import { lazy, Suspense } from "react";
 const Admin = lazy(() => import("./pages/admin/Admin"));
 // --- ADMIN END ---
 
+// --- AUTH START ---
+import ResetPassword from "./pages/ResetPassword";
+// --- AUTH END ---
+
 export default function AppRouter() {
     return <Router
         renderPage={({ path }) => {
@@ -20,11 +25,15 @@ export default function AppRouter() {
             // --- ADMIN START ---
             if (path[0] === 'admin') return (
                 <Suspense fallback={<div style={{ padding: 40, textAlign: 'center' }}>Loading admin...</div>}>
-                    <Admin />
+                    <Admin path={path} />
                 </Suspense>
             );
             // --- ADMIN END ---
 
+            // --- AUTH START ---
+            if (path[0] === 'reset-password') return <ResetPassword />;
+            // --- AUTH END ---
+
             // You can add more routes here, for example:
             // if (path[0] === 'about') return <AboutPage />;
             // if (path[0] === 'users' && path[1]) return <UserPage id={path[1]} />;

package/template/src/index.tsx

@@ -1,12 +1,35 @@
 import React from "react";
-import { createRoot, hydrateRoot } from "react-dom/client";
+import { createRoot } from "react-dom/client";
+// --- SSR START ---
+import { hydrateRoot } from "react-dom/client";
+// --- SSR END ---
 
 import { handleError } from "./services/api";
 
 import App from "./App";
+import "./styles.css";
+
+// --- VIEWPORT START ---
+// Fix iOS safari issues with viewport
+if (typeof window !== "undefined" && typeof document !== "undefined") {
+    const updateViewport = () => {
+        const metaViewport = document.querySelector('meta[name="viewport"]');
+        if (metaViewport) {
+            if (window.screen.width <= 600) {
+                metaViewport.setAttribute('content', 'width=600, user-scalable=no');
+            } else {
+                metaViewport.setAttribute('content', 'width=device-width');
+            }
+        }
+    }
+    updateViewport();
+    window.addEventListener('resize', updateViewport);
+}
+// --- VIEWPORT END ---
 
 const rootElement = document.getElementById("root") as HTMLElement;
 
+// --- SSR START ---
 if (process.env.NODE_ENV === "development") {
     // We use createRoot because we often don't want to deal with full SSR hydration quirks 
     // during local frontend development (like Hot Module Replacement causing mismatches).
@@ -21,3 +44,7 @@ if (process.env.NODE_ENV === "development") {
         onRecoverableError: handleError,
     });
 }
+// --- SSR END ---
+// --- NO_SSR START ---
+createRoot(rootElement).render(<App />);
+// --- NO_SSR END ---