easy-starter 1.2.0 → 2.0.0

package/template/src/pages/admin/UsersTab.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+
+type UsersTabProps = {
+    users: any[];
+    loading: boolean;
+    errorMsg: string;
+    onRoleChange: (userId: string, role: "admin" | "user") => void;
+};
+
+export default function UsersTab({ users, loading, errorMsg, onRoleChange }: UsersTabProps) {
+    return (
+        <div>
+            <h3 style={{ marginBottom: 15 }}>User Management</h3>
+            {loading && <p>Loading users...</p>}
+            {errorMsg && <p style={{ color: "#ef4444" }}>{errorMsg}</p>}
+            {!loading && !errorMsg && (
+                <div style={{ overflowX: 'auto' }}>
+                    <table style={{ width: '100%', borderCollapse: 'collapse', textAlign: 'left' }}>
+                        <thead>
+                            <tr style={{ borderBottom: '2px solid var(--border)' }}>
+                                <th style={{ padding: 10 }}>Email</th>
+                                <th style={{ padding: 10 }}>Name</th>
+                                <th style={{ padding: 10 }}>Role</th>
+                                <th style={{ padding: 10 }}>Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {users.map((usr: any) => (
+                                <tr key={usr._id} style={{ borderBottom: '1px solid var(--border)' }}>
+                                    <td style={{ padding: 10 }}>{usr.email}</td>
+                                    <td style={{ padding: 10 }}>{usr.name || "N/A"}</td>
+                                    <td style={{ padding: 10 }}>
+                                        <span style={{ 
+                                            padding: '2px 6px', 
+                                            borderRadius: 4, 
+                                            fontSize: '0.85em', 
+                                            background: usr.role === 'admin' ? 'rgba(99, 102, 241, 0.2)' : 'rgba(255, 255, 255, 0.05)',
+                                            color: usr.role === 'admin' ? 'var(--primary-hover)' : 'var(--text-muted)'
+                                        }}>
+                                            {usr.role || "user"}
+                                        </span>
+                                    </td>
+                                    <td style={{ padding: 10 }}>
+                                        <select 
+                                            value={usr.role || "user"} 
+                                            onChange={(e) => onRoleChange(usr._id, e.target.value as any)}
+                                            style={{ padding: '4px 8px', background: 'var(--surface)', border: '1px solid var(--border)', color: 'var(--text)', borderRadius: 4 }}
+                                        >
+                                            <option value="user">User</option>
+                                            <option value="admin">Admin</option>
+                                        </select>
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            )}
+        </div>
+    );
+}

package/template/src/services/api.ts

@@ -1,8 +1,11 @@
 import { useEffect } from "react";
 import { sendError } from "easy-analytics/client";
 import { setServerUrl, getUseAPIFrontend, getAPIFrontend, setHeaders } from "typed-client-server-api/hooks";
+
+// --- SSR START ---
 import { useSSRHook } from "ssr-hook/client";
 import { setSSROrigin } from "ssr-hook";
+// --- SSR END ---
 
 import { API } from "../../types";
 
@@ -14,13 +17,6 @@ export type UseSSRAPIType = {
 };
 
 
-if (process.env.NODE_ENV === "development") {
-    // In development mode, the frontend (Parcel) and backend (Express) run on different ports.
-    // We explicitly tell ssr-hook where the API backend is located.
-    setSSROrigin("http://localhost:1111");
-    setServerUrl("http://localhost:1111");
-}
-
 let authorization = "";
 
 setHeaders(() => ({
@@ -34,6 +30,7 @@ export function setAuthorizationHeader(newAuthorization: string) {
 
 export const api = getAPIFrontend<API>();
 export const useApi = getUseAPIFrontend<API>();
+// --- SSR START ---
 export const useSSRApi = new Proxy({}, {
     get(target, prop: string) {
         return (params: any) => {
@@ -42,6 +39,7 @@ export const useSSRApi = new Proxy({}, {
         };
     }
 }) as UseSSRAPIType;
+// --- SSR END ---
 
 export function handleError(error?: unknown, errorInfo?: any) {
     if (!error) return;

package/template/src/services/common.ts

@@ -1,6 +1,12 @@
+// --- SSR START ---
 import { useHeaders } from "ssr-hook";
+// --- SSR END ---
 import { useTitle } from "easy-page-router/react";
 
+// --- NO_SSR START ---
+import { useEffect } from "react";
+// --- NO_SSR END ---
+
 type UseHeadProps = {
     title: string;
     description: string;
@@ -10,6 +16,7 @@ type UseHeadProps = {
 };
 
 export function useHead({ title, description, image, canonical, lang }: UseHeadProps) {
+    // --- SSR START ---
     useHeaders({
         title,
         description,
@@ -17,5 +24,21 @@ export function useHead({ title, description, image, canonical, lang }: UseHeadP
         canonical: canonical || (typeof window !== "undefined" ? window.location.origin + window.location.pathname : ""),
         lang,
     });
+    // --- SSR END ---
+    // --- NO_SSR START ---
+    useEffect(() => {
+        if (typeof document !== "undefined") {
+            const metaDesc = document.querySelector('meta[name="description"]');
+            if (metaDesc) {
+                metaDesc.setAttribute("content", description);
+            } else {
+                const meta = document.createElement("meta");
+                meta.name = "description";
+                meta.content = description;
+                document.head.appendChild(meta);
+            }
+        }
+    }, [description]);
+    // --- NO_SSR END ---
     useTitle(title);
 }

package/template/src/styles.css

@@ -0,0 +1,460 @@
+/* --- AUTH START --- */
+@import "easy-user-auth/style.css";
+/* --- AUTH END --- */
+
+/* Premium Dark Theme */
+:root {
+    --bg: #09090b;
+    --surface: #18181b;
+    --primary: #6366f1; /* Indigo */
+    --primary-hover: #818cf8;
+    --text: #f4f4f5;
+    --text-muted: #a1a1aa;
+    --border: #27272a;
+}
+
+body {
+    font-family: 'Inter', system-ui, sans-serif;
+    background-color: var(--bg);
+    color: var(--text);
+    margin: 0;
+    padding: 0;
+    line-height: 1.6;
+    /* --- VIEWPORT START --- */
+    min-width: 600px;
+    /* --- VIEWPORT END --- */
+}
+
+a {
+    color: var(--primary);
+    text-decoration: none;
+    font-weight: bold;
+    transition: color 0.2s;
+
+    &:hover {
+        color: var(--primary-hover);
+    }
+}
+
+main {
+    max-width: 800px;
+    margin: 50px auto;
+    padding: 40px;
+    background: var(--surface);
+    border-radius: 16px;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+    border: 1px solid var(--border);
+}
+
+header {
+    text-align: center;
+    margin-bottom: 40px;
+
+    h1 {
+        color: var(--primary);
+    }
+
+    p {
+        color: var(--text-muted);
+    }
+
+    figure {
+        width: 140px;
+        height: 140px;
+        margin: 0 auto 20px;
+        background-image: url("/images/icon.png");
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+    }
+}
+
+section {
+    margin-top: 40px;
+    padding: 30px;
+    background: rgba(255, 255, 255, 0.02);
+    border-radius: 12px;
+    border: 1px solid var(--border);
+
+    ul {
+        list-style: none;
+        padding: 0;
+
+        li {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 15px 20px;
+            background: var(--bg);
+            border-radius: 8px;
+            margin-bottom: 12px;
+            border: 1px solid var(--border);
+            transition: transform 0.2s, border-color 0.2s;
+
+            &:hover {
+                transform: translateY(-2px);
+                border-color: var(--primary);
+            }
+
+            nav {
+                display: flex;
+                gap: 8px;
+            }
+        }
+    }
+
+    article {
+        padding: 0px 20px 10px;
+        background: var(--bg);
+        border-radius: 8px;
+        border: 1px solid var(--primary);
+        box-shadow: 0 0 15px rgba(99, 102, 241, 0.15);
+
+        h3 {
+            color: var(--primary);
+        }
+
+        p {
+            margin: 5px 0;
+            color: var(--text);
+        }
+    }
+
+    form {
+        display: flex;
+        gap: 12px;
+        flex-wrap: wrap;
+    }
+}
+
+/* Global Controls */
+input {
+    padding: 12px 16px;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    color: var(--text);
+    outline: none;
+    transition: border-color 0.2s;
+    flex: 1;
+    min-width: 150px;
+
+    &:focus {
+        border-color: var(--primary);
+    }
+}
+
+button {
+    padding: 12px 24px;
+    background: var(--primary);
+    color: #fff;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-weight: bold;
+    transition: background 0.2s, transform 0.1s;
+
+    &:hover:not(:disabled) {
+        background: var(--primary-hover);
+        transform: scale(1.02);
+    }
+
+    &.btn-danger {
+        background: #ef4444;
+
+        &:hover:not(:disabled) {
+            background: #dc2626;
+        }
+    }
+}
+
+/* --- ADMIN START --- */
+/* --- ADMIN DASHBOARD --- */
+.admin-login {
+    padding: 40px;
+    max-width: 400px;
+    margin: 0 auto;
+    text-align: center;
+
+    h2 {
+        color: var(--text);
+    }
+
+    .back-link {
+        margin-bottom: 20px;
+    }
+
+    form {
+        display: flex;
+        flex-direction: column;
+        gap: 15px;
+        margin-top: 20px;
+    }
+}
+
+.admin-container {
+    padding: 40px;
+    max-width: 1200px;
+    margin: 0 auto;
+
+    .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 30px;
+
+        h2 {
+            margin: 0;
+            color: var(--text);
+        }
+
+        a {
+            color: var(--primary);
+            text-decoration: none;
+            font-weight: bold;
+        }
+    }
+
+    .controls {
+        display: flex;
+        gap: 15px;
+        align-items: center;
+        margin-bottom: 30px;
+        flex-wrap: wrap;
+
+        strong {
+            font-size: 1.1rem;
+            color: var(--text);
+        }
+
+        .btn-logout {
+            margin-left: auto;
+            background: #ef4444;
+
+            &:hover {
+                background: #dc2626;
+            }
+        }
+    }
+
+    .chart-container {
+        margin-bottom: 40px;
+        background: rgba(255, 255, 255, 0.02);
+        padding: 25px;
+        border-radius: 12px;
+        border: 1px solid var(--border);
+
+        h3 {
+            margin: 0 0 20px;
+            font-size: 1.1rem;
+            color: var(--text);
+        }
+
+        .chart {
+            display: flex;
+            align-items: flex-end;
+            height: 150px;
+            gap: 4px;
+
+            .bar-wrapper {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: flex-end;
+                height: 100%;
+
+                .count {
+                    font-size: 11px;
+                    color: var(--text);
+                    margin-bottom: 4px;
+                    font-weight: bold;
+                }
+
+                .date {
+                    font-size: 10px;
+                    margin-top: 8px;
+                    color: var(--text-muted);
+                }
+
+                .bar {
+                    width: 100%;
+                    max-width: 24px;
+                    border-radius: 4px 4px 0 0;
+                    transition: height 0.3s ease;
+                }
+
+                .bar.active {
+                    background: var(--primary);
+                }
+            }
+        }
+    }
+
+    .grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        gap: 20px;
+    }
+}
+/* --- ADMIN END --- */
+
+/* --- AUTH START --- */
+/* --- EASY-USER-AUTH STYLING OVERRIDES --- */
+.easy-user-auth-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(9, 9, 11, 0.8);
+    backdrop-filter: blur(8px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.easy-user-auth-modal {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
+    padding: 30px;
+    width: 100%;
+    max-width: 420px;
+    position: relative;
+    box-sizing: border-box;
+}
+
+.easy-user-auth-close-btn {
+    position: absolute;
+    top: 15px;
+    right: 20px;
+    background: transparent;
+    border: none;
+    font-size: 24px;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 0;
+    transition: color 0.2s;
+
+    &:hover {
+        color: var(--text);
+    }
+}
+
+.easy-user-auth-tabs {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 25px;
+    border-bottom: 1px solid var(--border);
+    padding-bottom: 10px;
+}
+
+.easy-user-auth-tab {
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    font-size: 16px;
+    padding: 8px 12px;
+    cursor: pointer;
+    font-weight: 500;
+    transition: color 0.2s;
+
+    &:hover {
+        color: var(--text);
+    }
+
+    &.easy-user-auth-tab-active {
+        color: var(--primary);
+        border-bottom: 2px solid var(--primary);
+        font-weight: bold;
+    }
+}
+
+.easy-user-auth-form {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.easy-user-auth-form-input {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.easy-user-auth-label {
+    font-size: 14px;
+    color: var(--text-muted);
+    font-weight: 500;
+}
+
+.easy-user-auth-input {
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.easy-user-auth-submit-btn {
+    width: 100%;
+    margin-top: 10px;
+}
+
+.easy-user-auth-back-btn {
+    width: 100%;
+    background: transparent;
+    border: 1px solid var(--border);
+    color: var(--text);
+
+    &:hover:not(:disabled) {
+        background: rgba(255, 255, 255, 0.05);
+    }
+}
+
+.easy-user-auth-forgot-link {
+    font-size: 14px;
+    color: var(--primary);
+    text-align: right;
+    align-self: flex-end;
+    cursor: pointer;
+    background: transparent;
+    border: none;
+    font-weight: bold;
+    padding: 0;
+
+    &:hover {
+        color: var(--primary-hover);
+        text-decoration: underline;
+    }
+}
+
+.easy-user-auth-title {
+    font-size: 20px;
+    font-weight: bold;
+    margin: 0 0 10px;
+    color: var(--text);
+}
+
+.easy-user-auth-text {
+    font-size: 14px;
+    color: var(--text-muted);
+    margin: 0 0 15px;
+}
+
+.easy-user-auth-alert {
+    padding: 12px;
+    border-radius: 8px;
+    font-size: 14px;
+    margin-bottom: 10px;
+    background: rgba(239, 68, 68, 0.1);
+    border: 1px solid rgba(239, 68, 68, 0.2);
+    color: #f87171;
+}
+
+.easy-user-auth-info {
+    font-size: 12px;
+    color: var(--text-muted);
+    margin-top: 4px;
+}
+/* --- AUTH END --- */

package/template/tsconfig.json

@@ -1,7 +1,8 @@
 {
   "compilerOptions": {
     "target": "ES2022",
-    "module": "CommonJS",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
     "lib": [
       "DOM",
       "DOM.Iterable",

package/template/types.ts

@@ -1,16 +1,51 @@
-import { APIDefinition, Endpoint, Token } from "typed-client-server-api";
+import { APIDefinition, Endpoint } from "typed-client-server-api";
+
+// --- AUTH START ---
+import { UserDB } from "easy-user-auth/types";
+
+export type UserProfile = {
+    name: string;
+    role: "admin" | "user";
+};
+// --- AUTH END ---
+
+// --- OGIMAGE START ---
+export type OgImageRecord = {
+    dateCreated: string;
+    file: {
+        type: "EASY_DB_FILE";
+        url: string;
+    };
+};
+// --- OGIMAGE END ---
 
 // The API type defines the contract between your React frontend and Express backend.
 // Every property here represents an endpoint. Both the client and server use this
-// to ensure type safety. If you change a parameter here, TypeScript will immediately
-// warn you if you forgot to update the frontend or backend!
+// to ensure type safety.
 export type API = APIDefinition<{
     getItems: Endpoint<{}, Item[]>;
     getItem: Endpoint<{ id: string }, Item>;
     addItem: Endpoint<Omit<Item, "_id">, string>;
     removeItem: Endpoint<{ id: string }, boolean>;
 
+    // --- ADMIN_NO_AUTH START ---
     getEasyAnalyticsData: Endpoint<{ password: string, month: string }, any[]>;
+    // --- ADMIN_NO_AUTH END ---
+    // --- ADMIN_WITH_AUTH START ---
+    getEasyAnalyticsData: Endpoint<{ month: string }, any[]>;
+    // --- ADMIN_WITH_AUTH END ---
+
+    // --- ADMIN_ERRORS_NO_AUTH START ---
+    getEasyAnalyticsErrors: Endpoint<{ password: string, month: string }, any[]>;
+    // --- ADMIN_ERRORS_NO_AUTH END ---
+    // --- ADMIN_ERRORS_WITH_AUTH START ---
+    getEasyAnalyticsErrors: Endpoint<{ month: string }, any[]>;
+    // --- ADMIN_ERRORS_WITH_AUTH END ---
+
+    // --- ADMIN_USERS START ---
+    getUsers: Endpoint<{}, { _id: string, email: string, name: string, role: "admin" | "user" }[]>;
+    updateUserRole: Endpoint<{ userId: string, role: "admin" | "user" }, boolean>;
+    // --- ADMIN_USERS END ---
 }>;
 
 export type Item = {
@@ -23,4 +58,10 @@ export type Item = {
 // Each property represents a 'table' (or a separate JSON file).
 export type Database = {
     item: Item;
+    // --- AUTH START ---
+    user: UserDB<UserProfile>;
+    // --- AUTH END ---
+    // --- OGIMAGE START ---
+    "og-image": OgImageRecord;
+    // --- OGIMAGE END ---
 };

package/template/vite.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { imagetools } from "vite-imagetools";
+
+export default defineConfig({
+  plugins: [react(), imagetools()],
+  define: {
+    "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || "development"),
+    "global": "globalThis",
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      "/api": {
+        target: "http://localhost:1111",
+        changeOrigin: true,
+      },
+      "/files": {
+        target: "http://localhost:1111",
+        changeOrigin: true,
+      },
+    },
+  },
+});

package/template/.parcelrc

@@ -1,6 +0,0 @@
-{
-    "extends": "@parcel/config-default",
-    "optimizers": {
-        "*.html": []
-    }
-}