@roboticela/devkit 4.0.0 → 4.1.0

package/registry/components/auth/nextjs-compact/v1/files/app/auth/reset-password/page.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import { useState, Suspense } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+
+function ResetForm() {
+  const router = useRouter();
+  const params = useSearchParams();
+  const token = params.get("token") ?? "";
+  const [password, setPassword] = useState("");
+  const [confirm, setConfirm] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (password !== confirm) { setError("Passwords do not match"); return; }
+    setLoading(true);
+    setError("");
+    try {
+      const res = await fetch("/api/auth/reset-password", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ token, password }),
+      });
+      if (!res.ok) {
+        const d = await res.json();
+        throw new Error(d.message || "Failed to reset password");
+      }
+      router.push("/auth/login?reset=success");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Something went wrong");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  if (!token) {
+    return (
+      <p style={{ color: "var(--color-error)", textAlign: "center" }}>
+        Invalid or missing reset token.
+      </p>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: "var(--space-4)" }}>
+      {error && (
+        <div
+          style={{
+            padding: "var(--space-3) var(--space-4)",
+            borderRadius: "var(--radius-md)",
+            background: "var(--color-error-subtle)",
+            color: "var(--color-error-text)",
+            fontSize: "var(--text-sm)",
+          }}
+        >
+          {error}
+        </div>
+      )}
+      {(["New password", "Confirm password"] as const).map((label) => (
+        <div key={label} style={{ display: "flex", flexDirection: "column", gap: "var(--space-2)" }}>
+          <label style={{ fontSize: "var(--text-sm)", fontWeight: "var(--weight-medium)", color: "var(--color-text)" }}>
+            {label}
+          </label>
+          <input
+            type="password"
+            required
+            minLength={8}
+            value={label === "New password" ? password : confirm}
+            onChange={(e) => label === "New password" ? setPassword(e.target.value) : setConfirm(e.target.value)}
+            style={{
+              padding: "var(--space-3) var(--space-4)",
+              borderRadius: "var(--radius-md)",
+              border: "1px solid var(--color-border)",
+              background: "var(--color-bg)",
+              color: "var(--color-text)",
+              fontSize: "var(--text-base)",
+            }}
+          />
+        </div>
+      ))}
+      <button
+        type="submit"
+        disabled={loading}
+        style={{
+          padding: "var(--space-3) var(--space-4)",
+          borderRadius: "var(--radius-md)",
+          background: loading ? "var(--color-bg-muted)" : "var(--color-primary)",
+          color: "var(--color-primary-text)",
+          fontWeight: "var(--weight-semibold)",
+          border: "none",
+          cursor: loading ? "not-allowed" : "pointer",
+        }}
+      >
+        {loading ? "Resetting…" : "Reset password"}
+      </button>
+    </form>
+  );
+}
+
+export default function ResetPasswordPage() {
+  return (
+    <main
+      style={{
+        minHeight: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "var(--color-bg-subtle)",
+        padding: "var(--space-4)",
+      }}
+    >
+      <div
+        style={{
+          width: "100%",
+          maxWidth: "420px",
+          background: "var(--color-bg)",
+          borderRadius: "var(--radius-xl)",
+          border: "1px solid var(--color-border)",
+          padding: "var(--space-8)",
+          boxShadow: "var(--shadow-lg)",
+        }}
+      >
+        <div style={{ textAlign: "center", marginBottom: "var(--space-8)" }}>
+          <h1 style={{ fontSize: "var(--text-2xl)", fontWeight: "var(--weight-bold)", color: "var(--color-text)" }}>
+            Reset password
+          </h1>
+          <p style={{ marginTop: "var(--space-2)", fontSize: "var(--text-sm)", color: "var(--color-text-muted)" }}>
+            Choose a new password for your account.
+          </p>
+        </div>
+        <Suspense fallback={<p>Loading…</p>}>
+          <ResetForm />
+        </Suspense>
+      </div>
+    </main>
+  );
+}

package/registry/components/auth/nextjs-compact/v1/files/components/auth/AuthProvider.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { createContext, useContext, useEffect, useState } from "react";
+
+interface User {
+  id: string;
+  email: string;
+  name: string;
+  avatar?: string;
+}
+
+interface AuthContextValue {
+  user: User | null;
+  loading: boolean;
+  login: (email: string, password: string) => Promise<void>;
+  register: (name: string, email: string, password: string) => Promise<void>;
+  logout: () => Promise<void>;
+  refresh: () => Promise<void>;
+}
+
+const AuthContext = createContext<AuthContextValue | null>(null);
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    refresh().finally(() => setLoading(false));
+  }, []);
+
+  async function refresh() {
+    try {
+      const res = await fetch("/api/auth/me");
+      if (res.ok) {
+        const data = await res.json();
+        setUser(data.user);
+      } else {
+        setUser(null);
+      }
+    } catch {
+      setUser(null);
+    }
+  }
+
+  async function login(email: string, password: string) {
+    const res = await fetch("/api/auth/login", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ email, password }),
+    });
+    if (!res.ok) {
+      const err = await res.json();
+      throw new Error(err.message || "Login failed");
+    }
+    const data = await res.json();
+    setUser(data.user);
+  }
+
+  async function register(name: string, email: string, password: string) {
+    const res = await fetch("/api/auth/register", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ name, email, password }),
+    });
+    if (!res.ok) {
+      const err = await res.json();
+      throw new Error(err.message || "Registration failed");
+    }
+    const data = await res.json();
+    setUser(data.user);
+  }
+
+  async function logout() {
+    await fetch("/api/auth/logout", { method: "POST" });
+    setUser(null);
+  }
+
+  return (
+    <AuthContext.Provider value={{ user, loading, login, register, logout, refresh }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const ctx = useContext(AuthContext);
+  if (!ctx) throw new Error("useAuth must be used inside <AuthProvider>");
+  return ctx;
+}

package/registry/components/auth/nextjs-compact/v1/files/components/auth/LoginForm.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "./AuthProvider";
+
+export function LoginForm() {
+  const { login } = useAuth();
+  const router = useRouter();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+    try {
+      await login(email, password);
+      router.push("/");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Login failed");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: "var(--space-4)" }}>
+      {error && (
+        <div
+          role="alert"
+          style={{
+            padding: "var(--space-3) var(--space-4)",
+            borderRadius: "var(--radius-md)",
+            background: "var(--color-error-subtle)",
+            color: "var(--color-error-text)",
+            fontSize: "var(--text-sm)",
+          }}
+        >
+          {error}
+        </div>
+      )}
+
+      <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-2)" }}>
+        <label htmlFor="email" style={{ fontSize: "var(--text-sm)", fontWeight: "var(--weight-medium)", color: "var(--color-text)" }}>
+          Email
+        </label>
+        <input
+          id="email"
+          type="email"
+          required
+          autoComplete="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          style={{
+            padding: "var(--space-3) var(--space-4)",
+            borderRadius: "var(--radius-md)",
+            border: "1px solid var(--color-border)",
+            background: "var(--color-bg)",
+            color: "var(--color-text)",
+            fontSize: "var(--text-base)",
+            outline: "none",
+          }}
+        />
+      </div>
+
+      <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-2)" }}>
+        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+          <label htmlFor="password" style={{ fontSize: "var(--text-sm)", fontWeight: "var(--weight-medium)", color: "var(--color-text)" }}>
+            Password
+          </label>
+          <a href="/auth/forgot-password" style={{ fontSize: "var(--text-sm)", color: "var(--color-primary)" }}>
+            Forgot password?
+          </a>
+        </div>
+        <input
+          id="password"
+          type="password"
+          required
+          autoComplete="current-password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          style={{
+            padding: "var(--space-3) var(--space-4)",
+            borderRadius: "var(--radius-md)",
+            border: "1px solid var(--color-border)",
+            background: "var(--color-bg)",
+            color: "var(--color-text)",
+            fontSize: "var(--text-base)",
+            outline: "none",
+          }}
+        />
+      </div>
+
+      <button
+        type="submit"
+        disabled={loading}
+        style={{
+          padding: "var(--space-3) var(--space-4)",
+          borderRadius: "var(--radius-md)",
+          background: loading ? "var(--color-bg-muted)" : "var(--color-primary)",
+          color: "var(--color-primary-text)",
+          fontSize: "var(--text-base)",
+          fontWeight: "var(--weight-semibold)",
+          border: "none",
+          cursor: loading ? "not-allowed" : "pointer",
+          transition: "background var(--transition-fast)",
+        }}
+      >
+        {loading ? "Signing in…" : "Sign in"}
+      </button>
+
+      <p style={{ textAlign: "center", fontSize: "var(--text-sm)", color: "var(--color-text-muted)" }}>
+        No account?{" "}
+        <a href="/auth/register" style={{ color: "var(--color-primary)", fontWeight: "var(--weight-medium)" }}>
+          Create one
+        </a>
+      </p>
+    </form>
+  );
+}

package/registry/components/auth/nextjs-compact/v1/files/components/auth/RegisterForm.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "./AuthProvider";
+
+export function RegisterForm() {
+  const { register } = useAuth();
+  const router = useRouter();
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+    try {
+      await register(name, email, password);
+      router.push("/");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Registration failed");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const inputStyle: React.CSSProperties = {
+    padding: "var(--space-3) var(--space-4)",
+    borderRadius: "var(--radius-md)",
+    border: "1px solid var(--color-border)",
+    background: "var(--color-bg)",
+    color: "var(--color-text)",
+    fontSize: "var(--text-base)",
+    outline: "none",
+  };
+
+  return (
+    <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: "var(--space-4)" }}>
+      {error && (
+        <div
+          role="alert"
+          style={{
+            padding: "var(--space-3) var(--space-4)",
+            borderRadius: "var(--radius-md)",
+            background: "var(--color-error-subtle)",
+            color: "var(--color-error-text)",
+            fontSize: "var(--text-sm)",
+          }}
+        >
+          {error}
+        </div>
+      )}
+
+      {(["Name", "Email", "Password"] as const).map((field) => (
+        <div key={field} style={{ display: "flex", flexDirection: "column", gap: "var(--space-2)" }}>
+          <label
+            htmlFor={field.toLowerCase()}
+            style={{ fontSize: "var(--text-sm)", fontWeight: "var(--weight-medium)", color: "var(--color-text)" }}
+          >
+            {field}
+          </label>
+          <input
+            id={field.toLowerCase()}
+            type={field === "Password" ? "password" : field === "Email" ? "email" : "text"}
+            required
+            value={field === "Name" ? name : field === "Email" ? email : password}
+            onChange={(e) => {
+              if (field === "Name") setName(e.target.value);
+              else if (field === "Email") setEmail(e.target.value);
+              else setPassword(e.target.value);
+            }}
+            style={inputStyle}
+          />
+        </div>
+      ))}
+
+      <button
+        type="submit"
+        disabled={loading}
+        style={{
+          padding: "var(--space-3) var(--space-4)",
+          borderRadius: "var(--radius-md)",
+          background: loading ? "var(--color-bg-muted)" : "var(--color-primary)",
+          color: "var(--color-primary-text)",
+          fontSize: "var(--text-base)",
+          fontWeight: "var(--weight-semibold)",
+          border: "none",
+          cursor: loading ? "not-allowed" : "pointer",
+          transition: "background var(--transition-fast)",
+        }}
+      >
+        {loading ? "Creating account…" : "Create account"}
+      </button>
+
+      <p style={{ textAlign: "center", fontSize: "var(--text-sm)", color: "var(--color-text-muted)" }}>
+        Already have an account?{" "}
+        <a href="/auth/login" style={{ color: "var(--color-primary)", fontWeight: "var(--weight-medium)" }}>
+          Sign in
+        </a>
+      </p>
+    </form>
+  );
+}

package/registry/components/auth/nextjs-compact/v1/files/lib/auth/authService.ts

@@ -0,0 +1,43 @@
+import { SignJWT, jwtVerify } from "jose";
+
+const ACCESS_SECRET = new TextEncoder().encode(
+  process.env.JWT_ACCESS_SECRET ?? "change-me-in-production-min-32-chars!!"
+);
+const REFRESH_SECRET = new TextEncoder().encode(
+  process.env.JWT_REFRESH_SECRET ?? "change-me-refresh-in-production-32chars"
+);
+
+export interface TokenPayload {
+  sub: string;
+  email: string;
+  iat?: number;
+  exp?: number;
+}
+
+export async function signToken(
+  payload: { sub: string; email: string },
+  type: "access" | "refresh" = "access"
+): Promise<string> {
+  const secret = type === "access" ? ACCESS_SECRET : REFRESH_SECRET;
+  const expiresIn = type === "access" ? "15m" : "30d";
+  return new SignJWT({ email: payload.email })
+    .setProtectedHeader({ alg: "HS256" })
+    .setSubject(payload.sub)
+    .setIssuedAt()
+    .setExpirationTime(expiresIn)
+    .sign(secret);
+}
+
+export async function verifyToken(
+  token: string,
+  type: "access" | "refresh" = "access"
+): Promise<TokenPayload> {
+  const secret = type === "access" ? ACCESS_SECRET : REFRESH_SECRET;
+  const { payload } = await jwtVerify(token, secret);
+  return {
+    sub: payload.sub as string,
+    email: payload["email"] as string,
+    iat: payload.iat,
+    exp: payload.exp,
+  };
+}

package/registry/components/auth/nextjs-compact/v1/manifest.json

@@ -0,0 +1,37 @@
+{
+  "version": "1.0.0",
+  "template": "nextjs-compact",
+  "files": [
+    { "source": "files/app/auth/login/page.tsx",              "destination": "app/auth/login/page.tsx" },
+    { "source": "files/app/auth/register/page.tsx",           "destination": "app/auth/register/page.tsx" },
+    { "source": "files/app/auth/forgot-password/page.tsx",    "destination": "app/auth/forgot-password/page.tsx" },
+    { "source": "files/app/auth/reset-password/page.tsx",     "destination": "app/auth/reset-password/page.tsx" },
+    { "source": "files/app/api/auth/[...route]/route.ts",     "destination": "app/api/auth/[...route]/route.ts" },
+    { "source": "files/components/auth/LoginForm.tsx",        "destination": "components/auth/LoginForm.tsx" },
+    { "source": "files/components/auth/RegisterForm.tsx",     "destination": "components/auth/RegisterForm.tsx" },
+    { "source": "files/components/auth/AuthProvider.tsx",     "destination": "components/auth/AuthProvider.tsx" },
+    { "source": "files/lib/auth/authService.ts",              "destination": "lib/auth/authService.ts" }
+  ],
+  "injections": [
+    {
+      "file": "app/layout.tsx",
+      "marker": "{/* devkit:auth:provider */}",
+      "wrap": { "open": "<AuthProvider>", "close": "</AuthProvider>" },
+      "importLine": "import { AuthProvider } from '@/components/auth/AuthProvider';"
+    }
+  ],
+  "dependencies": {
+    "frontend": ["jsonwebtoken", "js-cookie"],
+    "devFrontend": ["@types/js-cookie"]
+  },
+  "envVars": [
+    "JWT_ACCESS_SECRET",
+    "JWT_REFRESH_SECRET",
+    "GOOGLE_CLIENT_ID",
+    "GOOGLE_CLIENT_SECRET",
+    "SMTP_HOST",
+    "SMTP_PORT",
+    "SMTP_USER",
+    "SMTP_PASSWORD"
+  ]
+}

package/registry/components/auth/vite-express-tauri/v1/files/server/middleware/requireAuth.ts

@@ -0,0 +1,14 @@
+import { Request, Response, NextFunction } from "express";
+import { verifyToken } from "../services/jwtService.js";
+
+export function requireAuth(req: Request, res: Response, next: NextFunction) {
+  const token = req.headers.authorization?.replace("Bearer ", "");
+  if (!token) { res.status(401).json({ message: "Unauthorized" }); return; }
+  try {
+    const payload = verifyToken(token);
+    (req as Request & { user: { id: string; email: string } }).user = { id: payload.sub, email: payload.email };
+    next();
+  } catch {
+    res.status(401).json({ message: "Invalid or expired token" });
+  }
+}

package/registry/components/auth/vite-express-tauri/v1/files/server/routes/auth.ts

@@ -0,0 +1,83 @@
+import { Router, Request, Response } from "express";
+import { signToken, verifyToken } from "../services/jwtService.js";
+
+const router = Router();
+
+router.post("/login", async (req: Request, res: Response) => {
+  const { email, password } = req.body;
+  if (!email || !password) { res.status(400).json({ message: "Email and password required" }); return; }
+
+  // TODO: replace with real DB lookup + bcrypt.compare
+  const user = await findUserByCredentials(email, password);
+  if (!user) { res.status(401).json({ message: "Invalid email or password" }); return; }
+
+  const token = await signToken({ sub: user.id, email: user.email });
+  res.json({ user, token });
+});
+
+router.post("/register", async (req: Request, res: Response) => {
+  const { name, email, password } = req.body;
+  if (!name || !email || !password) { res.status(400).json({ message: "Name, email, and password required" }); return; }
+  if (password.length < 8) { res.status(400).json({ message: "Password must be at least 8 characters" }); return; }
+
+  // TODO: replace with real user creation
+  const user = await createUser(name, email, password);
+  const token = await signToken({ sub: user.id, email: user.email });
+  res.status(201).json({ user, token });
+});
+
+router.get("/me", async (req: Request, res: Response) => {
+  const authHeader = req.headers.authorization;
+  const token = authHeader?.replace("Bearer ", "");
+  if (!token) { res.status(401).json({ message: "Unauthorized" }); return; }
+  try {
+    const payload = await verifyToken(token);
+    const user = await findUserById(payload.sub);
+    if (!user) { res.status(404).json({ message: "User not found" }); return; }
+    res.json({ user });
+  } catch {
+    res.status(401).json({ message: "Invalid token" });
+  }
+});
+
+router.post("/forgot-password", async (req: Request, res: Response) => {
+  const { email } = req.body;
+  if (!email) { res.status(400).json({ message: "Email required" }); return; }
+  // TODO: generate reset token, store in DB, send email
+  await sendPasswordResetEmail(email);
+  res.json({ ok: true });
+});
+
+router.post("/reset-password", async (req: Request, res: Response) => {
+  const { token, password } = req.body;
+  if (!token || !password) { res.status(400).json({ message: "Token and password required" }); return; }
+  // TODO: verify token, update password in DB
+  await resetUserPassword(token, password);
+  res.json({ ok: true });
+});
+
+router.post("/logout", (_req: Request, res: Response) => {
+  res.clearCookie("refresh_token");
+  res.json({ ok: true });
+});
+
+// ── Stubs (replace with real DB calls) ───────────────────────────────────────
+
+async function findUserByCredentials(email: string, _password: string) {
+  void email;
+  return null as { id: string; name: string; email: string } | null;
+}
+
+async function createUser(name: string, email: string, _password: string) {
+  return { id: crypto.randomUUID(), name, email };
+}
+
+async function findUserById(id: string) {
+  void id;
+  return null as { id: string; name: string; email: string } | null;
+}
+
+async function sendPasswordResetEmail(email: string) { void email; }
+async function resetUserPassword(token: string, password: string) { void token; void password; }
+
+export default router;

package/registry/components/auth/vite-express-tauri/v1/files/server/services/jwtService.ts

@@ -0,0 +1,19 @@
+import jwt from "jsonwebtoken";
+
+const ACCESS_SECRET = process.env.JWT_ACCESS_SECRET ?? "change-me-min-32-chars-access!!";
+const REFRESH_SECRET = process.env.JWT_REFRESH_SECRET ?? "change-me-min-32-chars-refresh!";
+
+export interface TokenPayload { sub: string; email: string; iat?: number; exp?: number }
+
+export function signToken(payload: { sub: string; email: string }, type: "access" | "refresh" = "access"): string {
+  return jwt.sign(
+    { email: payload.email },
+    type === "access" ? ACCESS_SECRET : REFRESH_SECRET,
+    { subject: payload.sub, expiresIn: type === "access" ? "15m" : "30d" }
+  );
+}
+
+export function verifyToken(token: string, type: "access" | "refresh" = "access"): TokenPayload {
+  const decoded = jwt.verify(token, type === "access" ? ACCESS_SECRET : REFRESH_SECRET) as jwt.JwtPayload;
+  return { sub: decoded.sub as string, email: decoded["email"] as string, iat: decoded.iat, exp: decoded.exp };
+}