easy-starter 1.2.1 → 2.0.0

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,29 @@ 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." });
+    // --- OGIMAGE START ---
+    const ogImage = typeof window !== "undefined"
+        ? `${window.location.origin}/og-image.png?path=${encodeURIComponent(window.location.pathname)}`
+        : undefined;
+    // --- OGIMAGE END ---
+
+    useHead({
+        title: "Welcome to easy-starter",
+        description: "The ultimate foundation for your next project."
+        // --- OGIMAGE START ---
+        , image: ogImage
+        // --- OGIMAGE END ---
+    });
+
+    // --- 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 +68,35 @@ export default function Index() {
 
     return (
         <main>
+            {/* --- AUTH START --- */}
+            <div style={{ display: "flex", justifyContent: "flex-end", padding: "10px 0", borderBottom: "1px solid var(--border)", marginBottom: 20 }}>
+                {isLoggedIn ? (
+                    <div style={{ display: "flex", alignItems: "center", gap: 15 }}>
+                        <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 style={{ marginTop: 20 }}>
+                    <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/ResetPassword.tsx

@@ -0,0 +1,126 @@
+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 style={{ maxWidth: 450, margin: "60px auto" }}>
+            <h2 className="easy-user-auth-title" style={{ marginBottom: 20 }}>🔑 {dict.userForgottenPasswordChange}</h2>
+            
+            {error && !token && (
+                <div className="easy-user-auth-alert" style={{ marginBottom: 20 }}>{error}</div>
+            )}
+
+            {success ? (
+                <div className="easy-user-auth-alert" style={{ background: "rgba(16, 185, 129, 0.1)", border: "1px solid rgba(16, 185, 129, 0.2)", color: "#34d399", marginBottom: 20 }}>
+                    {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" style={{ color: "#ef4444" }}>{validationError}</p>}
+
+                        <div style={{ display: "flex", gap: 15, marginTop: 10 }}>
+                            <button
+                                type="submit"
+                                className="easy-user-auth-submit-btn"
+                                disabled={!!validationError || !password || !passwordAgain || loading}
+                                style={{ flex: 1 }}
+                            >
+                                {loading ? "Updating..." : dict.change}
+                            </button>
+                            <button
+                                type="button"
+                                className="easy-user-auth-back-btn"
+                                onClick={() => push("/")}
+                                disabled={loading}
+                                style={{ flex: 1 }}
+                            >
+                                Cancel
+                            </button>
+                        </div>
+                    </form>
+                )
+            )}
+        </main>
+    );
+}