easy-starter 1.2.1 → 2.1.0

package/template/src/components/Img.tsx

@@ -0,0 +1,127 @@
+import React from "react";
+
+export type ImgProps = React.ImgHTMLAttributes<HTMLImageElement> & {
+    /** Target width in pixels */
+    w?: number | string;
+    /** Target height in pixels */
+    h?: number | string;
+    /** Max width in pixels */
+    mw?: number | string;
+    /** Max height in pixels */
+    mh?: number | string;
+    /** Max width in pixels (alias) */
+    maxWidth?: number | string;
+    /** Max height in pixels (alias) */
+    maxHeight?: number | string;
+    /** Output image format (default: "webp") */
+    format?: "webp" | "jpeg" | "png";
+    /** Output image format (alias) */
+    type?: "webp" | "jpeg" | "png";
+    /** Quality from 1 to 100 */
+    quality?: number;
+    /** Quality from 1 to 100 (alias) */
+    q?: number;
+    /** Smooth resize processing */
+    smooth?: boolean;
+    /** Smooth resize processing (alias) */
+    s?: boolean;
+};
+
+export function imgSrc(
+    src: string,
+    options: {
+        w?: number | string;
+        h?: number | string;
+        mw?: number | string;
+        mh?: number | string;
+        format?: "webp" | "jpeg" | "png";
+        quality?: number;
+        smooth?: boolean;
+    }
+): string | undefined {
+    if (!src) return src;
+
+    const targetFormat = options.format || "webp";
+
+    try {
+        const [base, queryString] = src.split("?");
+        const params = new URLSearchParams(queryString || "");
+
+        if (options.w !== undefined && !params.has("w") && !params.has("width")) {
+            params.set("w", String(options.w));
+        }
+        if (options.h !== undefined && !params.has("h") && !params.has("height")) {
+            params.set("h", String(options.h));
+        }
+        if (options.mw !== undefined && !params.has("mw") && !params.has("maxWidth")) {
+            params.set("mw", String(options.mw));
+        }
+        if (options.mh !== undefined && !params.has("mh") && !params.has("maxHeight")) {
+            params.set("mh", String(options.mh));
+        }
+        if (options.quality !== undefined && !params.has("q") && !params.has("quality")) {
+            params.set("q", String(options.quality));
+        }
+        if (options.smooth !== undefined && !params.has("s") && !params.has("smooth")) {
+            params.set("s", String(options.smooth));
+        }
+        if (targetFormat && !params.has("format") && !params.has("type") && !params.has("ext")) {
+            params.set("format", targetFormat);
+        }
+
+        const finalQuery = params.toString();
+        return finalQuery ? `${base}?${finalQuery}` : base;
+    } catch {
+        return src;
+    }
+}
+
+/**
+ * Smart image component wrapping HTML <img> with automatic easy-image-resizer URL formatting.
+ * Defaults to WebP format with optional width/height/quality scaling options.
+ */
+export function Img({
+    src,
+    width,
+    height,
+    w,
+    h,
+    mw,
+    mh,
+    maxWidth,
+    maxHeight,
+    format,
+    type,
+    quality,
+    q,
+    smooth,
+    s,
+    ...restProps
+}: ImgProps) {
+    const finalW = w ?? width;
+    const finalH = h ?? height;
+    const finalMw = mw ?? maxWidth;
+    const finalMh = mh ?? maxHeight;
+    const finalFormat = format ?? type ?? "webp";
+    const finalQuality = q ?? quality;
+    const finalSmooth = s ?? smooth;
+
+    const finalSrc = imgSrc(src || "", {
+        w: finalW,
+        h: finalH,
+        mw: finalMw,
+        mh: finalMh,
+        format: finalFormat,
+        quality: finalQuality,
+        smooth: finalSmooth,
+    });
+
+    return <img
+        src={finalSrc}
+        width={finalW}
+        height={finalH}
+        {...restProps}
+    />;
+};
+
+export default Img;

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 ---

package/template/src/pages/Index.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import { Link } from "easy-page-router/react";
 
 import { api, useSSRApi } from "../services/api";
@@ -6,8 +6,20 @@ import { useHead } from "../services/common";
 
 import { Item } from "../../types";
 
+// --- AUTH START ---
+import { useUser, UserDialog } from "easy-user-auth/react";
+import { UserProfile } from "../../types";
+// --- AUTH END ---
+
 export default function Index() {
-    useHead({ title: "Welcome to easy-starter", description: "The ultimate foundation for your next project." });
+    useHead({
+        title: "Welcome to easy-starter",
+        description: "The ultimate foundation for your next project."
+    });
+
+    // --- AUTH START ---
+    const { isLoggedIn, user, loginUser, showUserDialog } = useUser<UserProfile>();
+    // --- AUTH END ---
 
     // This will run on the server, fetch the data, embed it in the HTML,
     // and hydrate perfectly on the client. Fully type-safe!
@@ -47,17 +59,35 @@ export default function Index() {
 
     return (
         <main>
+            {/* --- AUTH START --- */}
+            <div className="auth-bar">
+                {isLoggedIn ? (
+                    <div className="auth-user-info">
+                        <span>Logged in as: <strong>{user.name} ({user.role})</strong></span>
+                        <button onClick={() => loginUser(null)}>Log Out</button>
+                    </div>
+                ) : (
+                    <button onClick={showUserDialog}>Log In / Sign Up</button>
+                )}
+            </div>
+            {/* --- AUTH END --- */}
+
             <header>
                 <figure></figure>
                 <h1>Welcome to easy-starter!</h1>
                 <p>The ultimate foundation for your next project.</p>
-                <Link href="/admin">
-                    → Go to Admin Dashboard
-                </Link>
+
+                {/* --- ADMIN START --- */}
+                <div className="admin-link-wrapper">
+                    <Link href="/admin">
+                        → Go to Admin Dashboard
+                    </Link>
+                </div>
+                {/* --- ADMIN END --- */}
             </header>
 
             <section>
-                <h2>Items (SSR Hook)</h2>
+                <h2>Items</h2>
                 {loading && <p>Loading from server...</p>}
                 {error && <p>Error loading items: {error.message}</p>}
                 {items && (

package/template/src/pages/NotFound.tsx

@@ -6,7 +6,7 @@ export default function NotFound() {
     useHead({ title: "404 Not Found", description: "Page you are looking for does not exist." });
 
     return (
-        <div style={{ padding: "40px", textAlign: "center", fontFamily: "sans-serif" }}>
+        <div className="not-found">
             <h1>404</h1>
             <p>Oops, page not found.</p>
             <Link href="/">Go back home</Link>

package/template/src/pages/ResetPassword.tsx

@@ -0,0 +1,124 @@
+import React, { useState, useEffect } from "react";
+import { useRouter } from "easy-page-router/react";
+import { useUser } from "easy-user-auth/react";
+import { useHead } from "../services/common";
+import { UserProfile } from "../../types";
+
+export default function ResetPasswordPage() {
+    useHead({ title: "Reset Password", description: "Enter a new password for your account." });
+
+    const { api, loginUser, dict } = useUser<UserProfile>();
+    const { push } = useRouter();
+
+    const [token, setToken] = useState<string | null>(null);
+    const [password, setPassword] = useState("");
+    const [passwordAgain, setPasswordAgain] = useState("");
+    const [error, setError] = useState<string | null>(null);
+    const [success, setSuccess] = useState<boolean>(false);
+    const [loading, setLoading] = useState<boolean>(false);
+
+    useEffect(() => {
+        if (typeof window !== "undefined") {
+            const params = new URLSearchParams(window.location.search);
+            const tok = params.get("token");
+            if (tok) {
+                setToken(tok);
+            } else {
+                setError("Reset token is missing in the URL.");
+            }
+        }
+    }, []);
+
+    let validationError = "";
+    if (password.length > 0 && password.length < 6) {
+        validationError = dict.userWrongPasswordLength;
+    } else if (password && passwordAgain && password !== passwordAgain) {
+        validationError = dict.userWrongPasswordMatch;
+    }
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (validationError || !password || !passwordAgain || !token) return;
+
+        setLoading(true);
+        setError(null);
+
+        const [userResult, err] = await api.updateForgottenPassword({ token, password });
+
+        if (err) {
+            setError(dict.userForgottenPasswordErrorChange);
+        } else if (userResult) {
+            setSuccess(true);
+            setTimeout(() => {
+                loginUser(userResult);
+                push("/");
+            }, 2000);
+        }
+        setLoading(false);
+    };
+
+    return (
+        <main className="reset-password-main">
+            <h2 className="easy-user-auth-title">🔑 {dict.userForgottenPasswordChange}</h2>
+            
+            {error && !token && (
+                <div className="easy-user-auth-alert">{error}</div>
+            )}
+
+            {success ? (
+                <div className="easy-user-auth-alert alert-success">
+                    {dict.userForgottenPasswordSuccessChange}
+                </div>
+            ) : (
+                token && (
+                    <form onSubmit={handleSubmit} className="easy-user-auth-form">
+                        <div className="easy-user-auth-form-input">
+                            <label className="easy-user-auth-label">{dict.password}</label>
+                            <input
+                                type="password"
+                                className="easy-user-auth-input"
+                                value={password}
+                                onChange={(e) => setPassword(e.target.value)}
+                                required
+                                maxLength={50}
+                            />
+                        </div>
+
+                        <div className="easy-user-auth-form-input">
+                            <label className="easy-user-auth-label">{dict.passwordAgain}</label>
+                            <input
+                                type="password"
+                                className="easy-user-auth-input"
+                                value={passwordAgain}
+                                onChange={(e) => setPasswordAgain(e.target.value)}
+                                required
+                                maxLength={50}
+                            />
+                        </div>
+
+                        {error && <div className="easy-user-auth-alert">{error}</div>}
+                        {validationError && <p className="easy-user-auth-info text-error">{validationError}</p>}
+
+                        <div className="btn-group">
+                            <button
+                                type="submit"
+                                className="easy-user-auth-submit-btn"
+                                disabled={!!validationError || !password || !passwordAgain || loading}
+                            >
+                                {loading ? "Updating..." : dict.change}
+                            </button>
+                            <button
+                                type="button"
+                                className="easy-user-auth-back-btn"
+                                onClick={() => push("/")}
+                                disabled={loading}
+                            >
+                                Cancel
+                            </button>
+                        </div>
+                    </form>
+                )
+            )}
+        </main>
+    );
+}