@promakeai/cli 0.3.0 → 0.3.2

package/template/src/components/GoogleAnalytics.tsx

@@ -1,34 +1,34 @@
-import { useEffect, useRef } from "react";
-import constants from "@/constants/constants.json";
-
-export function GoogleAnalytics() {
-  const injected = useRef(false);
-  const gaId = constants.scripts.gaId;
-
-  useEffect(() => {
-    if (!gaId || injected.current) return;
-    if (document.querySelector(`[data-injected="gtag"]`)) return;
-
-    injected.current = true;
-
-    // Inject gtag.js script
-    const script = document.createElement("script");
-    script.async = true;
-    script.src = `https://www.googletagmanager.com/gtag/js?id=${gaId}`;
-    script.setAttribute("data-injected", "gtag");
-    document.head.appendChild(script);
-
-    // Inject inline config script
-    const inlineScript = document.createElement("script");
-    inlineScript.setAttribute("data-injected", "gtag-config");
-    inlineScript.innerHTML = `
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-      gtag('config', '${gaId}');
-    `;
-    document.head.appendChild(inlineScript);
-  }, []);
-
-  return null;
-}
+import { useEffect, useRef } from "react";
+import constants from "@/constants/constants.json";
+
+export function GoogleAnalytics() {
+  const injected = useRef(false);
+  const gaId = constants.scripts.gaId;
+
+  useEffect(() => {
+    if (!gaId || injected.current) return;
+    if (document.querySelector(`[data-injected="gtag"]`)) return;
+
+    injected.current = true;
+
+    // Inject gtag.js script
+    const script = document.createElement("script");
+    script.async = true;
+    script.src = `https://www.googletagmanager.com/gtag/js?id=${gaId}`;
+    script.setAttribute("data-injected", "gtag");
+    document.head.appendChild(script);
+
+    // Inject inline config script
+    const inlineScript = document.createElement("script");
+    inlineScript.setAttribute("data-injected", "gtag-config");
+    inlineScript.innerHTML = `
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', '${gaId}');
+    `;
+    document.head.appendChild(inlineScript);
+  }, []);
+
+  return null;
+}

package/template/src/components/LanguageSwitcher.tsx

@@ -1,53 +1,53 @@
-import { useTranslation } from "react-i18next";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { changeLanguage } from "@/lang";
-import { cn } from "@/lib/utils";
-import constants from "@/constants/constants.json";
-
-interface LanguageSwitcherProps {
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-const languages: Record<string, string> =
-  constants?.site?.availableLanguages || {};
-
-export function LanguageSwitcher({ className, style }: LanguageSwitcherProps) {
-  const { i18n } = useTranslation();
-  const currentLang = i18n.language;
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant="ghost"
-          size="sm"
-          className={cn("h-9 px-2 text-sm font-medium", className)}
-          style={style}
-        >
-          {languages?.[currentLang] || currentLang.toUpperCase()}
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        {Object.entries(languages).map(([lang, label]) => (
-          <DropdownMenuItem
-            key={lang}
-            onClick={() => changeLanguage(lang)}
-            className={cn(
-              currentLang === lang ? "bg-accent" : "",
-              "hover:text-primary focus:text-primary",
-            )}
-          >
-            {label || lang.toUpperCase()}
-          </DropdownMenuItem>
-        ))}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { changeLanguage } from "@/lang";
+import { cn } from "@/lib/utils";
+import constants from "@/constants/constants.json";
+
+interface LanguageSwitcherProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const languages: Record<string, string> =
+  constants?.site?.availableLanguages || {};
+
+export function LanguageSwitcher({ className, style }: LanguageSwitcherProps) {
+  const { i18n } = useTranslation();
+  const currentLang = i18n.language;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className={cn("h-9 px-2 text-sm font-medium", className)}
+          style={style}
+        >
+          {languages?.[currentLang] || currentLang.toUpperCase()}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {Object.entries(languages).map(([lang, label]) => (
+          <DropdownMenuItem
+            key={lang}
+            onClick={() => changeLanguage(lang)}
+            className={cn(
+              currentLang === lang ? "bg-accent" : "",
+              "hover:text-primary focus:text-primary",
+            )}
+          >
+            {label || lang.toUpperCase()}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/template/src/components/ScriptInjector.tsx

@@ -1,62 +1,62 @@
-import { useEffect, useRef } from "react";
-import constants from "@/constants/constants.json";
-
-function injectScript(html: string, target: "head" | "body", position: "start" | "end", marker: string) {
-  if (!html) return;
-
-  // Check if already injected
-  if (document.querySelector(`[data-injected="${marker}"]`)) return;
-
-  const container = document.createElement("div");
-  container.innerHTML = html;
-
-  const targetElement = target === "head" ? document.head : document.body;
-
-  // Create wrapper with marker
-  const wrapper = document.createDocumentFragment();
-
-  Array.from(container.childNodes).forEach((node) => {
-    if (node.nodeName === "SCRIPT") {
-      // Recreate script for execution
-      const script = node as HTMLScriptElement;
-      const newScript = document.createElement("script");
-      newScript.setAttribute("data-injected", marker);
-      Array.from(script.attributes).forEach((attr) => {
-        newScript.setAttribute(attr.name, attr.value);
-      });
-      if (script.innerHTML) {
-        newScript.innerHTML = script.innerHTML;
-      }
-      wrapper.appendChild(newScript);
-    } else {
-      const clone = node.cloneNode(true) as HTMLElement;
-      if (clone.setAttribute) {
-        clone.setAttribute("data-injected", marker);
-      }
-      wrapper.appendChild(clone);
-    }
-  });
-
-  if (position === "start") {
-    targetElement.insertBefore(wrapper, targetElement.firstChild);
-  } else {
-    targetElement.appendChild(wrapper);
-  }
-}
-
-export function ScriptInjector() {
-  const injected = useRef(false);
-  const { headStart, headEnd, bodyStart, bodyEnd } = constants.scripts;
-
-  useEffect(() => {
-    if (injected.current) return;
-    injected.current = true;
-
-    injectScript(headStart, "head", "start", "head-start");
-    injectScript(headEnd, "head", "end", "head-end");
-    injectScript(bodyStart, "body", "start", "body-start");
-    injectScript(bodyEnd, "body", "end", "body-end");
-  }, []);
-
-  return null;
-}
+import { useEffect, useRef } from "react";
+import constants from "@/constants/constants.json";
+
+function injectScript(html: string, target: "head" | "body", position: "start" | "end", marker: string) {
+  if (!html) return;
+
+  // Check if already injected
+  if (document.querySelector(`[data-injected="${marker}"]`)) return;
+
+  const container = document.createElement("div");
+  container.innerHTML = html;
+
+  const targetElement = target === "head" ? document.head : document.body;
+
+  // Create wrapper with marker
+  const wrapper = document.createDocumentFragment();
+
+  Array.from(container.childNodes).forEach((node) => {
+    if (node.nodeName === "SCRIPT") {
+      // Recreate script for execution
+      const script = node as HTMLScriptElement;
+      const newScript = document.createElement("script");
+      newScript.setAttribute("data-injected", marker);
+      Array.from(script.attributes).forEach((attr) => {
+        newScript.setAttribute(attr.name, attr.value);
+      });
+      if (script.innerHTML) {
+        newScript.innerHTML = script.innerHTML;
+      }
+      wrapper.appendChild(newScript);
+    } else {
+      const clone = node.cloneNode(true) as HTMLElement;
+      if (clone.setAttribute) {
+        clone.setAttribute("data-injected", marker);
+      }
+      wrapper.appendChild(clone);
+    }
+  });
+
+  if (position === "start") {
+    targetElement.insertBefore(wrapper, targetElement.firstChild);
+  } else {
+    targetElement.appendChild(wrapper);
+  }
+}
+
+export function ScriptInjector() {
+  const injected = useRef(false);
+  const { headStart, headEnd, bodyStart, bodyEnd } = constants.scripts;
+
+  useEffect(() => {
+    if (injected.current) return;
+    injected.current = true;
+
+    injectScript(headStart, "head", "start", "head-start");
+    injectScript(headEnd, "head", "end", "head-end");
+    injectScript(bodyStart, "body", "start", "body-start");
+    injectScript(bodyEnd, "body", "end", "body-end");
+  }, []);
+
+  return null;
+}

package/template/src/lib/env.ts

@@ -1,20 +1,20 @@
-// Environment değişkenlerini window'a export et
-declare global {
-  interface Window {
-    ENV: {
-      [key: string]: any;
-    };
-  }
-}
-
-window.ENV = {
-  ...Object.keys(import.meta.env)
-    .filter((key) => key.startsWith('VITE_'))
-    .reduce(
-      (acc, key) => ({
-        ...acc,
-        [key]: import.meta.env[key],
-      }),
-      {},
-    ),
+// Environment değişkenlerini window'a export et
+declare global {
+  interface Window {
+    ENV: {
+      [key: string]: any;
+    };
+  }
+}
+
+window.ENV = {
+  ...Object.keys(import.meta.env)
+    .filter((key) => key.startsWith('VITE_'))
+    .reduce(
+      (acc, key) => ({
+        ...acc,
+        [key]: import.meta.env[key],
+      }),
+      {},
+    ),
 }; 

package/template/src/router.tsx

@@ -1,14 +1,14 @@
-import { BrowserRouter, Routes, Route } from "react-router";
-import Index from "./pages/Index";
-import NotFound from "./pages/NotFound";
-
-export const Router = () => {
-  return (
-    <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<Index />} />
-        <Route path="*" element={<NotFound />} />
-      </Routes>
-    </BrowserRouter>
-  );
-};
+import { BrowserRouter, Routes, Route } from "react-router";
+import Index from "./pages/Index";
+import NotFound from "./pages/NotFound";
+
+export const Router = () => {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Index />} />
+        <Route path="*" element={<NotFound />} />
+      </Routes>
+    </BrowserRouter>
+  );
+};

package/template/src/vite-env.d.ts

@@ -1 +1 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />

package/dist/registry/auth.json

@@ -1,70 +0,0 @@
-{
-  "name": "auth",
-  "type": "registry:module",
-  "title": "Authentication Module",
-  "description": "Complete authentication system with Zustand store, JWT token management with auto-refresh, login/register/forgot-password pages, and header menu component. Includes secure token storage, automatic 401 handling, and seamless API integration.",
-  "dependencies": [
-    "zustand"
-  ],
-  "registryDependencies": [
-    "api"
-  ],
-  "files": [
-    {
-      "path": "auth/index.ts",
-      "type": "registry:index",
-      "target": "$modules$/auth/index.ts",
-      "content": "// Store\r\nexport { useAuthStore } from \"./auth-store\";\r\nexport type { User, AuthTokens } from \"./auth-store\";\r\n\r\n// Hook\r\nexport { useAuth } from \"./use-auth\";\r\n\r\n// Components\r\nexport { AuthHeaderMenu } from \"./auth-header-menu\";\r\nexport { default as LoginPage } from \"./login-page\";\r\nexport { default as RegisterPage } from \"./register-page\";\r\nexport { default as ForgotPasswordPage } from \"./forgot-password-page\";\r\n"
-    },
-    {
-      "path": "auth/auth-store.ts",
-      "type": "registry:store",
-      "target": "$modules$/auth/auth-store.ts",
-      "content": "import { create } from \"zustand\";\nimport { persist } from \"zustand/middleware\";\n\nexport interface User {\n  username: string;\n  email?: string;\n}\n\nexport interface AuthTokens {\n  accessToken: string;\n  refreshToken?: string;\n  idToken?: string;\n  encryptionKey?: string;\n  expiresAt?: number; // Unix timestamp in milliseconds\n}\n\ninterface AuthState {\n  user: User | null;\n  tokens: AuthTokens | null;\n  isAuthenticated: boolean;\n  setAuth: (user: User, tokens: AuthTokens) => void;\n  updateTokens: (tokens: AuthTokens) => void;\n  clearAuth: () => void;\n  isTokenExpired: () => boolean;\n  getTimeUntilExpiry: () => number | null;\n}\n\nexport const useAuthStore = create<AuthState>()(\n  persist(\n    (set, get) => ({\n      user: null,\n      tokens: null,\n      isAuthenticated: false,\n\n      setAuth: (user, tokens) => set({ user, tokens, isAuthenticated: true }),\n\n      updateTokens: (tokens) => set({ tokens }),\n\n      clearAuth: () =>\n        set({ user: null, tokens: null, isAuthenticated: false }),\n\n      isTokenExpired: () => {\n        const { tokens } = get();\n        if (!tokens?.expiresAt) return false;\n        // Consider token expired 30 seconds before actual expiry for safety margin\n        return Date.now() >= tokens.expiresAt - 30000;\n      },\n\n      getTimeUntilExpiry: () => {\n        const { tokens } = get();\n        if (!tokens?.expiresAt) return null;\n        return tokens.expiresAt - Date.now();\n      },\n    }),\n    { name: \"auth-storage\" },\n  ),\n);\n"
-    },
-    {
-      "path": "auth/use-auth.ts",
-      "type": "registry:hook",
-      "target": "$modules$/auth/use-auth.ts",
-      "content": "import { useCallback, useEffect, useRef } from \"react\";\nimport {\n  useAuthStore,\n  type User,\n  type AuthTokens,\n} from \"@/modules/auth/auth-store\";\nimport { customerClient } from \"@/modules/api/customer-client\";\n\n// Refresh token 1 minute before expiry\nconst REFRESH_BUFFER_MS = 60 * 1000;\n\nexport function useAuth() {\n  const {\n    user,\n    tokens,\n    isAuthenticated,\n    setAuth,\n    updateTokens,\n    clearAuth,\n    isTokenExpired,\n    getTimeUntilExpiry,\n  } = useAuthStore();\n\n  const refreshTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const isRefreshingRef = useRef(false);\n\n  // Refresh token using the refresh token\n  const refreshAccessToken = useCallback(async (): Promise<boolean> => {\n    const currentTokens = useAuthStore.getState().tokens;\n\n    // Don't refresh if no refresh token exists\n    if (!currentTokens?.refreshToken || isRefreshingRef.current) {\n      console.log(\"⚠️ No refresh token available, skipping refresh\");\n      return false;\n    }\n\n    isRefreshingRef.current = true;\n\n    try {\n      // Make a refresh request using the axios instance directly\n      const response = await customerClient.axios.post<{\n        accessToken: string;\n        refreshToken?: string;\n        expiresIn?: number;\n      }>(\"/auth/refresh\", {\n        refreshToken: currentTokens.refreshToken,\n      });\n\n      const { accessToken, refreshToken, expiresIn } = response.data;\n\n      // Validate response has required data\n      if (!accessToken) {\n        console.error(\"❌ Refresh response missing accessToken\");\n        return false;\n      }\n\n      const newTokens: AuthTokens = {\n        accessToken,\n        refreshToken: refreshToken || currentTokens.refreshToken,\n        idToken: currentTokens.idToken, // Preserve existing idToken\n        encryptionKey: currentTokens.encryptionKey, // Preserve existing encryptionKey\n        expiresAt: expiresIn ? Date.now() + expiresIn * 1000 : undefined,\n      };\n\n      customerClient.setToken(accessToken);\n      updateTokens(newTokens);\n\n      console.log(\"✅ Token refreshed successfully\");\n      return true;\n    } catch (error) {\n      console.error(\"❌ Token refresh failed:\", error);\n      // DON'T clear auth on refresh failure - just return false\n      // User can still use their existing token until it expires\n      return false;\n    } finally {\n      isRefreshingRef.current = false;\n    }\n  }, [updateTokens]);\n\n  // Schedule automatic token refresh\n  const scheduleTokenRefresh = useCallback(() => {\n    // Clear any existing timeout\n    if (refreshTimeoutRef.current) {\n      clearTimeout(refreshTimeoutRef.current);\n      refreshTimeoutRef.current = null;\n    }\n\n    const timeUntilExpiry = getTimeUntilExpiry();\n\n    // Only schedule if we have an expiry time and a refresh token\n    if (timeUntilExpiry === null || !tokens?.refreshToken) {\n      return;\n    }\n\n    // Calculate when to refresh (REFRESH_BUFFER_MS before expiry)\n    const refreshIn = Math.max(timeUntilExpiry - REFRESH_BUFFER_MS, 0);\n\n    // Don't schedule if expiry is too far in the future (> 24 hours)\n    if (refreshIn > 24 * 60 * 60 * 1000) {\n      return;\n    }\n\n    refreshTimeoutRef.current = setTimeout(async () => {\n      const success = await refreshAccessToken();\n      if (success) {\n        // Reschedule for the new token\n        scheduleTokenRefresh();\n      }\n    }, refreshIn);\n  }, [getTimeUntilExpiry, tokens?.refreshToken, refreshAccessToken]);\n\n  // Sync token with API client and set up refresh on mount and token changes\n  useEffect(() => {\n    if (tokens?.accessToken) {\n      console.log(\"🔑 Setting token in API client\");\n      customerClient.setToken(tokens.accessToken);\n\n      // Only try to refresh if we have a refresh token AND token is expired\n      if (isTokenExpired() && tokens.refreshToken) {\n        console.log(\"⏰ Token expired, attempting refresh...\");\n        refreshAccessToken().then((success) => {\n          if (success) {\n            scheduleTokenRefresh();\n          } else {\n            console.log(\"⚠️ Refresh failed, but keeping existing token\");\n          }\n        });\n      } else if (tokens.refreshToken) {\n        // Only schedule refresh if we have a refresh token\n        scheduleTokenRefresh();\n      }\n    } else if (tokens && Object.keys(tokens).length === 0) {\n      // tokens is empty object {} - this shouldn't happen, log it\n      console.warn(\"⚠️ Tokens object is empty, this may indicate a bug\");\n    } else {\n      customerClient.setToken(null);\n    }\n\n    // Cleanup timeout on unmount\n    return () => {\n      if (refreshTimeoutRef.current) {\n        clearTimeout(refreshTimeoutRef.current);\n      }\n    };\n  }, [\n    tokens?.accessToken,\n    tokens?.refreshToken,\n    isTokenExpired,\n    refreshAccessToken,\n    scheduleTokenRefresh,\n  ]);\n\n  // Set up axios interceptor for 401 responses (token expired during request)\n  useEffect(() => {\n    const interceptorId = customerClient.axios.interceptors.response.use(\n      (response) => response,\n      async (error) => {\n        const originalRequest = error.config;\n\n        // Skip refresh for auth endpoints to prevent infinite loops\n        const isAuthEndpoint = originalRequest?.url?.includes(\"/auth/\");\n\n        // If we get a 401 and haven't retried yet, try to refresh\n        if (\n          error.response?.status === 401 &&\n          !originalRequest._retry &&\n          tokens?.refreshToken &&\n          !isAuthEndpoint\n        ) {\n          originalRequest._retry = true;\n\n          const success = await refreshAccessToken();\n          if (success) {\n            // Retry the original request with new token\n            const newTokens = useAuthStore.getState().tokens;\n            if (newTokens?.accessToken) {\n              originalRequest.headers.Authorization = `Bearer ${newTokens.accessToken}`;\n              return customerClient.axios(originalRequest);\n            }\n          }\n        }\n\n        return Promise.reject(error);\n      },\n    );\n\n    return () => {\n      customerClient.axios.interceptors.response.eject(interceptorId);\n    };\n  }, [tokens?.refreshToken, refreshAccessToken]);\n\n  const login = useCallback(async (username: string, password: string) => {\n    const response = await customerClient.auth.login({ username, password });\n\n    console.log(\"🔐 Login response:\", response);\n    console.log(\"🔐 accessToken:\", response.accessToken);\n    console.log(\"🔐 refreshToken:\", response.refreshToken);\n    console.log(\"🔐 encryptionKey:\", response.encryptionKey);\n\n    const newTokens: AuthTokens = {\n      accessToken: response.accessToken,\n      refreshToken: response.refreshToken,\n      idToken: response.idToken,\n      encryptionKey: response.encryptionKey,\n      expiresAt: response.expiresIn\n        ? Date.now() + response.expiresIn * 1000\n        : undefined,\n    };\n\n    console.log(\"🔐 newTokens object:\", newTokens);\n\n    const newUser: User = {\n      username,\n      email: (response as any).email || (response as any).user?.email,\n    };\n\n    customerClient.setToken(newTokens.accessToken);\n    setAuth(newUser, newTokens);\n\n    console.log(\n      \"🔐 Auth set complete, checking store:\",\n      useAuthStore.getState().tokens,\n    );\n  }, []);\n\n  const register = useCallback(\n    async (username: string, email: string, password: string) => {\n      await customerClient.auth.register({ username, email, password });\n    },\n    [],\n  );\n\n  const confirmEmail = useCallback(async (username: string, code: string) => {\n    await customerClient.auth.confirm({ username, code });\n  }, []);\n\n  const forgotPassword = useCallback(async (username: string) => {\n    await customerClient.auth.forgotPassword({ username });\n  }, []);\n\n  const resetPassword = useCallback(\n    async (username: string, code: string, newPassword: string) => {\n      await customerClient.auth.resetPassword({ username, code, newPassword });\n    },\n    [],\n  );\n\n  const logout = useCallback(() => {\n    // Clear any scheduled refresh\n    if (refreshTimeoutRef.current) {\n      clearTimeout(refreshTimeoutRef.current);\n      refreshTimeoutRef.current = null;\n    }\n\n    customerClient.setToken(null);\n    clearAuth();\n  }, [clearAuth]);\n\n  return {\n    user,\n    token: tokens?.accessToken ?? null,\n    tokens,\n    isAuthenticated,\n    api: customerClient,\n    login,\n    register,\n    confirmEmail,\n    forgotPassword,\n    resetPassword,\n    logout,\n    refreshAccessToken,\n  };\n}\n"
-    },
-    {
-      "path": "auth/auth-header-menu.tsx",
-      "type": "registry:component",
-      "target": "$modules$/auth/auth-header-menu.tsx",
-      "content": "import type { ReactNode } from \"react\";\nimport { Link } from \"react-router\";\nimport { User, LogOut } from \"lucide-react\";\nimport { useAuth } from \"@/modules/auth/use-auth\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { useTranslation } from \"react-i18next\";\nimport { toast } from \"sonner\";\n\ninterface AuthHeaderMenuProps {\n  children?: ReactNode;\n  variant: \"desktop\" | \"mobile\";\n  onMenuClose?: () => void;\n}\n\nexport function AuthHeaderMenu({\n  children,\n  variant,\n  onMenuClose,\n}: AuthHeaderMenuProps) {\n  const { isAuthenticated, user, logout } = useAuth();\n  const { t } = useTranslation(\"header\");\n\n  const handleLogout = () => {\n    logout();\n    toast.success(t(\"logoutToastTitle\", \"Goodbye!\"), {\n      description: t(\n        \"logoutToastDesc\",\n        \"You have been logged out successfully.\",\n      ),\n    });\n    onMenuClose?.();\n  };\n\n  if (variant === \"desktop\") {\n    if (isAuthenticated) {\n      return (\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"h-10 w-10\">\n              <User className=\"h-5 w-5\" />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" className=\"w-56\">\n            <DropdownMenuLabel className=\"font-normal\">\n              <div className=\"flex flex-col space-y-1\">\n                <p className=\"text-sm font-medium\">{user?.username}</p>\n                {user?.email && (\n                  <p className=\"text-xs text-muted-foreground\">{user.email}</p>\n                )}\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            {children}\n            {children && <DropdownMenuSeparator />}\n            <DropdownMenuItem\n              onClick={handleLogout}\n              className=\"text-red-600 focus:text-red-600 focus:bg-red-50 cursor-pointer\"\n            >\n              <LogOut className=\"mr-2 h-4 w-4\" />\n              {t(\"logout\", \"Logout\")}\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      );\n    }\n\n    return (\n      <Link to=\"/login\">\n        <Button variant=\"ghost\" size=\"icon\" className=\"h-10 w-10\">\n          <User className=\"h-5 w-5\" />\n        </Button>\n      </Link>\n    );\n  }\n\n  // Mobile variant\n  if (isAuthenticated) {\n    return (\n      <div className=\"space-y-3\">\n        <div className=\"flex items-center space-x-3 p-3 bg-muted/50 rounded-lg\">\n          <div className=\"h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center\">\n            <User className=\"h-5 w-5 text-primary\" />\n          </div>\n          <div className=\"flex-1 min-w-0\">\n            <p className=\"text-sm font-medium truncate\">{user?.username}</p>\n            {user?.email && (\n              <p className=\"text-xs text-muted-foreground truncate\">\n                {user.email}\n              </p>\n            )}\n          </div>\n        </div>\n        {children}\n        <button\n          onClick={handleLogout}\n          className=\"flex items-center space-x-2 text-lg font-medium text-red-600 hover:text-red-700 transition-colors w-full\"\n        >\n          <LogOut className=\"h-5 w-5\" />\n          <span>{t(\"logout\", \"Logout\")}</span>\n        </button>\n      </div>\n    );\n  }\n\n  return (\n    <Link\n      to=\"/login\"\n      className=\"flex items-center space-x-2 text-lg font-medium hover:text-primary transition-colors\"\n      onClick={onMenuClose}\n    >\n      <User className=\"h-5 w-5\" />\n      <span>{t(\"login\", \"Login\")}</span>\n    </Link>\n  );\n}\n"
-    },
-    {
-      "path": "auth/login-page.tsx",
-      "type": "registry:page",
-      "target": "$modules$/auth/login-page.tsx",
-      "content": "import { useState, useEffect } from \"react\";\nimport { Link, useNavigate } from \"react-router\";\nimport { toast } from \"sonner\";\nimport { Layout } from \"@/components/Layout\";\nimport { usePageTitle } from \"@/hooks/use-page-title\";\nimport { useTranslation } from \"react-i18next\";\nimport { useAuth } from \"@/modules/auth/use-auth\";\nimport { getErrorMessage } from \"@/modules/api/get-error-message\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { LogIn, Eye, EyeOff } from \"lucide-react\";\n\nexport default function LoginPage() {\n  const { t } = useTranslation(\"login\");\n  usePageTitle({ title: t(\"title\") });\n\n  const navigate = useNavigate();\n  const { login, isAuthenticated } = useAuth();\n\n  const [formData, setFormData] = useState({\n    username: \"\",\n    password: \"\",\n  });\n  const [showPassword, setShowPassword] = useState(false);\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  // Redirect when authenticated (works for both initial load and after login)\n  useEffect(() => {\n    if (isAuthenticated) {\n      navigate(\"/\", { replace: true });\n    }\n  }, [isAuthenticated, navigate]);\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    setIsSubmitting(true);\n    setError(null);\n\n    try {\n      await login(formData.username, formData.password);\n      toast.success(t(\"toastSuccessTitle\", \"Welcome back!\"), {\n        description: t(\"toastSuccessDesc\", \"You have successfully logged in.\"),\n      });\n      navigate(\"/\", { replace: true });\n    } catch (err) {\n      const errorMessage = getErrorMessage(err, t(\"errorGeneric\"));\n      setError(errorMessage);\n      toast.error(t(\"toastErrorTitle\", \"Login failed\"), {\n        description: errorMessage,\n      });\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setFormData((prev) => ({\n      ...prev,\n      [e.target.name]: e.target.value,\n    }));\n  };\n\n  return (\n    <Layout>\n      <div className=\"min-h-screen bg-muted/30 py-12\">\n        <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4\">\n          {/* Hero Section */}\n          <div className=\"text-center mb-12\">\n            <h1 className=\"text-4xl font-bold text-foreground mb-4\">\n              {t(\"title\")}\n            </h1>\n            <div className=\"w-16 h-1 bg-primary mx-auto mb-6\"></div>\n            <p className=\"text-lg text-muted-foreground max-w-xl mx-auto\">\n              {t(\"description\")}\n            </p>\n          </div>\n\n          <div className=\"max-w-md mx-auto\">\n            <Card>\n              <CardHeader>\n                <CardTitle className=\"flex items-center gap-2\">\n                  <LogIn className=\"w-5 h-5 text-primary\" />\n                  {t(\"cardTitle\")}\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <form onSubmit={handleSubmit} className=\"space-y-6\">\n                  <div>\n                    <Label htmlFor=\"username\">{t(\"username\")} *</Label>\n                    <Input\n                      id=\"username\"\n                      name=\"username\"\n                      type=\"text\"\n                      value={formData.username}\n                      onChange={handleChange}\n                      placeholder={t(\"usernamePlaceholder\")}\n                      required\n                      className=\"mt-1\"\n                      autoComplete=\"username\"\n                    />\n                  </div>\n\n                  <div>\n                    <div className=\"flex items-center justify-between\">\n                      <Label htmlFor=\"password\">{t(\"password\")} *</Label>\n                      <Link\n                        to=\"/forgot-password\"\n                        className=\"text-sm text-primary hover:underline\"\n                      >\n                        {t(\"forgotPassword\", \"Forgot password?\")}\n                      </Link>\n                    </div>\n                    <div className=\"relative\">\n                      <Input\n                        id=\"password\"\n                        name=\"password\"\n                        type={showPassword ? \"text\" : \"password\"}\n                        value={formData.password}\n                        onChange={handleChange}\n                        placeholder={t(\"passwordPlaceholder\")}\n                        required\n                        className=\"mt-1 pr-10\"\n                        autoComplete=\"current-password\"\n                      />\n                      <button\n                        type=\"button\"\n                        onClick={() => setShowPassword(!showPassword)}\n                        className=\"absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground\"\n                      >\n                        {showPassword ? (\n                          <EyeOff className=\"w-4 h-4\" />\n                        ) : (\n                          <Eye className=\"w-4 h-4\" />\n                        )}\n                      </button>\n                    </div>\n                  </div>\n\n                  {error && (\n                    <div className=\"p-4 bg-red-50 border border-red-200 rounded-lg\">\n                      <p className=\"text-red-800 text-sm font-medium\">\n                        {error}\n                      </p>\n                    </div>\n                  )}\n\n                  <Button\n                    type=\"submit\"\n                    size=\"lg\"\n                    className=\"w-full\"\n                    disabled={isSubmitting}\n                  >\n                    {isSubmitting ? (\n                      <>\n                        <div className=\"w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2\" />\n                        {t(\"submitting\")}\n                      </>\n                    ) : (\n                      t(\"submit\")\n                    )}\n                  </Button>\n\n                  <div className=\"text-center text-sm text-muted-foreground\">\n                    {t(\"noAccount\")}{\" \"}\n                    <Link\n                      to=\"/register\"\n                      className=\"text-primary hover:underline font-medium\"\n                    >\n                      {t(\"registerLink\")}\n                    </Link>\n                  </div>\n                </form>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </div>\n    </Layout>\n  );\n}\n"
-    },
-    {
-      "path": "auth/register-page.tsx",
-      "type": "registry:page",
-      "target": "$modules$/auth/register-page.tsx",
-      "content": "import { useState, useEffect } from \"react\";\nimport { Link, useNavigate } from \"react-router\";\nimport { toast } from \"sonner\";\nimport { Layout } from \"@/components/Layout\";\nimport { usePageTitle } from \"@/hooks/use-page-title\";\nimport { useTranslation } from \"react-i18next\";\nimport { useAuth } from \"@/modules/auth/use-auth\";\nimport { getErrorMessage } from \"@/modules/api/get-error-message\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { UserPlus, Eye, EyeOff, CheckCircle } from \"lucide-react\";\n\nexport default function RegisterPage() {\n  const { t } = useTranslation(\"register\");\n  usePageTitle({ title: t(\"title\") });\n\n  const navigate = useNavigate();\n  const { register, isAuthenticated } = useAuth();\n\n  const [formData, setFormData] = useState({\n    username: \"\",\n    email: \"\",\n    password: \"\",\n    confirmPassword: \"\",\n  });\n  const [showPassword, setShowPassword] = useState(false);\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const [success, setSuccess] = useState(false);\n\n  // Redirect if already authenticated\n  useEffect(() => {\n    if (isAuthenticated) {\n      navigate(\"/\", { replace: true });\n    }\n  }, [isAuthenticated, navigate]);\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    setIsSubmitting(true);\n    setError(null);\n\n    // Validate passwords match\n    if (formData.password !== formData.confirmPassword) {\n      setError(t(\"passwordMismatch\"));\n      toast.error(t(\"toastErrorTitle\", \"Registration failed\"), {\n        description: t(\"passwordMismatch\"),\n      });\n      setIsSubmitting(false);\n      return;\n    }\n\n    try {\n      await register(formData.username, formData.email, formData.password);\n      setSuccess(true);\n      toast.success(t(\"toastSuccessTitle\", \"Account created!\"), {\n        description: t(\n          \"toastSuccessDesc\",\n          \"Please check your email to verify your account.\",\n        ),\n      });\n    } catch (err) {\n      const errorMessage = getErrorMessage(err, t(\"errorGeneric\"));\n      setError(errorMessage);\n      toast.error(t(\"toastErrorTitle\", \"Registration failed\"), {\n        description: errorMessage,\n      });\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setFormData((prev) => ({\n      ...prev,\n      [e.target.name]: e.target.value,\n    }));\n  };\n\n  if (success) {\n    return (\n      <Layout>\n        <div className=\"min-h-screen bg-muted/30 py-12\">\n          <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4\">\n            <div className=\"max-w-md mx-auto\">\n              <Card>\n                <CardContent className=\"pt-6\">\n                  <div className=\"text-center space-y-4\">\n                    <CheckCircle className=\"w-16 h-16 text-green-500 mx-auto\" />\n                    <h2 className=\"text-2xl font-bold text-foreground\">\n                      {t(\"successTitle\")}\n                    </h2>\n                    <p className=\"text-muted-foreground\">\n                      {t(\"successMessage\")}\n                    </p>\n                    <Button asChild className=\"mt-4\">\n                      <Link to=\"/login\">{t(\"goToLogin\")}</Link>\n                    </Button>\n                  </div>\n                </CardContent>\n              </Card>\n            </div>\n          </div>\n        </div>\n      </Layout>\n    );\n  }\n\n  return (\n    <Layout>\n      <div className=\"min-h-screen bg-muted/30 py-12\">\n        <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4\">\n          {/* Hero Section */}\n          <div className=\"text-center mb-12\">\n            <h1 className=\"text-4xl font-bold text-foreground mb-4\">\n              {t(\"title\")}\n            </h1>\n            <div className=\"w-16 h-1 bg-primary mx-auto mb-6\"></div>\n            <p className=\"text-lg text-muted-foreground max-w-xl mx-auto\">\n              {t(\"description\")}\n            </p>\n          </div>\n\n          <div className=\"max-w-md mx-auto\">\n            <Card>\n              <CardHeader>\n                <CardTitle className=\"flex items-center gap-2\">\n                  <UserPlus className=\"w-5 h-5 text-primary\" />\n                  {t(\"cardTitle\")}\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <form onSubmit={handleSubmit} className=\"space-y-6\">\n                  <div>\n                    <Label htmlFor=\"username\">{t(\"username\")} *</Label>\n                    <Input\n                      id=\"username\"\n                      name=\"username\"\n                      type=\"text\"\n                      value={formData.username}\n                      onChange={handleChange}\n                      placeholder={t(\"usernamePlaceholder\")}\n                      required\n                      className=\"mt-1\"\n                      autoComplete=\"username\"\n                    />\n                  </div>\n\n                  <div>\n                    <Label htmlFor=\"email\">{t(\"email\")} *</Label>\n                    <Input\n                      id=\"email\"\n                      name=\"email\"\n                      type=\"email\"\n                      value={formData.email}\n                      onChange={handleChange}\n                      placeholder={t(\"emailPlaceholder\")}\n                      required\n                      className=\"mt-1\"\n                      autoComplete=\"email\"\n                    />\n                  </div>\n\n                  <div>\n                    <Label htmlFor=\"password\">{t(\"password\")} *</Label>\n                    <div className=\"relative\">\n                      <Input\n                        id=\"password\"\n                        name=\"password\"\n                        type={showPassword ? \"text\" : \"password\"}\n                        value={formData.password}\n                        onChange={handleChange}\n                        placeholder={t(\"passwordPlaceholder\")}\n                        required\n                        className=\"mt-1 pr-10\"\n                        autoComplete=\"new-password\"\n                      />\n                      <button\n                        type=\"button\"\n                        onClick={() => setShowPassword(!showPassword)}\n                        className=\"absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground\"\n                      >\n                        {showPassword ? (\n                          <EyeOff className=\"w-4 h-4\" />\n                        ) : (\n                          <Eye className=\"w-4 h-4\" />\n                        )}\n                      </button>\n                    </div>\n                  </div>\n\n                  <div>\n                    <Label htmlFor=\"confirmPassword\">\n                      {t(\"confirmPassword\")} *\n                    </Label>\n                    <Input\n                      id=\"confirmPassword\"\n                      name=\"confirmPassword\"\n                      type={showPassword ? \"text\" : \"password\"}\n                      value={formData.confirmPassword}\n                      onChange={handleChange}\n                      placeholder={t(\"confirmPasswordPlaceholder\")}\n                      required\n                      className=\"mt-1\"\n                      autoComplete=\"new-password\"\n                    />\n                  </div>\n\n                  {error && (\n                    <div className=\"p-4 bg-red-50 border border-red-200 rounded-lg\">\n                      <p className=\"text-red-800 text-sm font-medium\">\n                        {error}\n                      </p>\n                    </div>\n                  )}\n\n                  <Button\n                    type=\"submit\"\n                    size=\"lg\"\n                    className=\"w-full\"\n                    disabled={isSubmitting}\n                  >\n                    {isSubmitting ? (\n                      <>\n                        <div className=\"w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2\" />\n                        {t(\"submitting\")}\n                      </>\n                    ) : (\n                      t(\"submit\")\n                    )}\n                  </Button>\n\n                  <div className=\"text-center text-sm text-muted-foreground\">\n                    {t(\"hasAccount\")}{\" \"}\n                    <Link\n                      to=\"/login\"\n                      className=\"text-primary hover:underline font-medium\"\n                    >\n                      {t(\"loginLink\")}\n                    </Link>\n                  </div>\n                </form>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </div>\n    </Layout>\n  );\n}\n"
-    },
-    {
-      "path": "auth/forgot-password-page.tsx",
-      "type": "registry:page",
-      "target": "$modules$/auth/forgot-password-page.tsx",
-      "content": "import { useState } from \"react\";\nimport { Link } from \"react-router\";\nimport { toast } from \"sonner\";\nimport { Layout } from \"@/components/Layout\";\nimport { usePageTitle } from \"@/hooks/use-page-title\";\nimport { useTranslation } from \"react-i18next\";\nimport { useAuth } from \"@/modules/auth/use-auth\";\nimport { getErrorMessage } from \"@/modules/api/get-error-message\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n  CardDescription,\n} from \"@/components/ui/card\";\nimport { KeyRound, ArrowLeft, Eye, EyeOff, CheckCircle2 } from \"lucide-react\";\n\ntype Step = \"request\" | \"reset\" | \"success\";\n\nexport default function ForgotPasswordPage() {\n  const { t } = useTranslation(\"forgotPassword\");\n  usePageTitle({ title: t(\"title\", \"Forgot Password\") });\n\n  const { forgotPassword, resetPassword } = useAuth();\n\n  const [step, setStep] = useState<Step>(\"request\");\n  const [username, setUsername] = useState(\"\");\n  const [code, setCode] = useState(\"\");\n  const [newPassword, setNewPassword] = useState(\"\");\n  const [confirmPassword, setConfirmPassword] = useState(\"\");\n  const [showPassword, setShowPassword] = useState(false);\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  const handleRequestCode = async (e: React.FormEvent) => {\n    e.preventDefault();\n    setIsSubmitting(true);\n    setError(null);\n\n    try {\n      await forgotPassword(username);\n      toast.success(t(\"codeSentTitle\", \"Code Sent!\"), {\n        description: t(\n          \"codeSentDesc\",\n          \"A password reset code has been sent to your email.\",\n        ),\n      });\n      setStep(\"reset\");\n    } catch (err) {\n      const errorMessage = getErrorMessage(\n        err,\n        t(\"errorGeneric\", \"Failed to send reset code. Please try again.\"),\n      );\n      setError(errorMessage);\n      toast.error(t(\"errorTitle\", \"Error\"), {\n        description: errorMessage,\n      });\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  const handleResetPassword = async (e: React.FormEvent) => {\n    e.preventDefault();\n    setError(null);\n\n    // Validate passwords match\n    if (newPassword !== confirmPassword) {\n      setError(t(\"passwordMismatch\", \"Passwords do not match\"));\n      return;\n    }\n\n    setIsSubmitting(true);\n\n    try {\n      await resetPassword(username, code, newPassword);\n      toast.success(t(\"resetSuccessTitle\", \"Password Reset!\"), {\n        description: t(\n          \"resetSuccessDesc\",\n          \"Your password has been successfully reset.\",\n        ),\n      });\n      setStep(\"success\");\n    } catch (err) {\n      const errorMessage = getErrorMessage(\n        err,\n        t(\"errorResetGeneric\", \"Failed to reset password. Please try again.\"),\n      );\n      setError(errorMessage);\n      toast.error(t(\"errorTitle\", \"Error\"), {\n        description: errorMessage,\n      });\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  // Success step\n  if (step === \"success\") {\n    return (\n      <Layout>\n        <div className=\"min-h-screen bg-muted/30 py-12\">\n          <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4\">\n            <div className=\"max-w-md mx-auto\">\n              <Card>\n                <CardContent className=\"pt-8 pb-8 text-center\">\n                  <CheckCircle2 className=\"w-16 h-16 text-green-500 mx-auto mb-4\" />\n                  <h1 className=\"text-2xl font-bold mb-2\">\n                    {t(\"successTitle\", \"Password Reset Successfully!\")}\n                  </h1>\n                  <p className=\"text-muted-foreground mb-6\">\n                    {t(\n                      \"successDescription\",\n                      \"Your password has been changed. You can now login with your new password.\",\n                    )}\n                  </p>\n                  <Button asChild className=\"w-full\">\n                    <Link to=\"/login\">{t(\"goToLogin\", \"Go to Login\")}</Link>\n                  </Button>\n                </CardContent>\n              </Card>\n            </div>\n          </div>\n        </div>\n      </Layout>\n    );\n  }\n\n  return (\n    <Layout>\n      <div className=\"min-h-screen bg-muted/30 py-12\">\n        <div className=\"w-full max-w-[var(--container-max-width)] mx-auto px-4\">\n          {/* Hero Section */}\n          <div className=\"text-center mb-12\">\n            <h1 className=\"text-4xl font-bold text-foreground mb-4\">\n              {t(\"title\", \"Forgot Password\")}\n            </h1>\n            <div className=\"w-16 h-1 bg-primary mx-auto mb-6\"></div>\n            <p className=\"text-lg text-muted-foreground max-w-xl mx-auto\">\n              {step === \"request\"\n                ? t(\n                    \"descriptionRequest\",\n                    \"Enter your username and we'll send you a code to reset your password.\",\n                  )\n                : t(\n                    \"descriptionReset\",\n                    \"Enter the code sent to your email and your new password.\",\n                  )}\n            </p>\n          </div>\n\n          <div className=\"max-w-md mx-auto\">\n            <Card>\n              <CardHeader>\n                <CardTitle className=\"flex items-center gap-2\">\n                  <KeyRound className=\"w-5 h-5 text-primary\" />\n                  {step === \"request\"\n                    ? t(\"cardTitleRequest\", \"Request Reset Code\")\n                    : t(\"cardTitleReset\", \"Reset Password\")}\n                </CardTitle>\n                <CardDescription>\n                  {step === \"request\"\n                    ? t(\"cardDescRequest\", \"Step 1 of 2: Request a reset code\")\n                    : t(\n                        \"cardDescReset\",\n                        \"Step 2 of 2: Enter code and new password\",\n                      )}\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                {step === \"request\" ? (\n                  // Step 1: Request Code\n                  <form onSubmit={handleRequestCode} className=\"space-y-6\">\n                    <div>\n                      <Label htmlFor=\"username\">\n                        {t(\"username\", \"Username\")} *\n                      </Label>\n                      <Input\n                        id=\"username\"\n                        type=\"text\"\n                        value={username}\n                        onChange={(e) => setUsername(e.target.value)}\n                        placeholder={t(\n                          \"usernamePlaceholder\",\n                          \"Enter your username\",\n                        )}\n                        required\n                        className=\"mt-1\"\n                        autoComplete=\"username\"\n                      />\n                    </div>\n\n                    {error && (\n                      <div className=\"p-4 bg-red-50 border border-red-200 rounded-lg\">\n                        <p className=\"text-red-800 text-sm font-medium\">\n                          {error}\n                        </p>\n                      </div>\n                    )}\n\n                    <Button\n                      type=\"submit\"\n                      size=\"lg\"\n                      className=\"w-full\"\n                      disabled={isSubmitting}\n                    >\n                      {isSubmitting ? (\n                        <>\n                          <div className=\"w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2\" />\n                          {t(\"sending\", \"Sending...\")}\n                        </>\n                      ) : (\n                        t(\"sendCode\", \"Send Reset Code\")\n                      )}\n                    </Button>\n\n                    <div className=\"text-center\">\n                      <Link\n                        to=\"/login\"\n                        className=\"text-sm text-muted-foreground hover:text-primary inline-flex items-center gap-1\"\n                      >\n                        <ArrowLeft className=\"w-4 h-4\" />\n                        {t(\"backToLogin\", \"Back to Login\")}\n                      </Link>\n                    </div>\n                  </form>\n                ) : (\n                  // Step 2: Reset Password\n                  <form onSubmit={handleResetPassword} className=\"space-y-6\">\n                    <div className=\"p-3 bg-muted rounded-lg text-sm\">\n                      <span className=\"text-muted-foreground\">\n                        {t(\"codeFor\", \"Reset code for:\")}{\" \"}\n                      </span>\n                      <span className=\"font-medium\">{username}</span>\n                    </div>\n\n                    <div>\n                      <Label htmlFor=\"code\">{t(\"code\", \"Reset Code\")} *</Label>\n                      <Input\n                        id=\"code\"\n                        type=\"text\"\n                        value={code}\n                        onChange={(e) => setCode(e.target.value)}\n                        placeholder={t(\"codePlaceholder\", \"Enter 6-digit code\")}\n                        required\n                        className=\"mt-1\"\n                        maxLength={6}\n                      />\n                    </div>\n\n                    <div>\n                      <Label htmlFor=\"newPassword\">\n                        {t(\"newPassword\", \"New Password\")} *\n                      </Label>\n                      <div className=\"relative\">\n                        <Input\n                          id=\"newPassword\"\n                          type={showPassword ? \"text\" : \"password\"}\n                          value={newPassword}\n                          onChange={(e) => setNewPassword(e.target.value)}\n                          placeholder={t(\n                            \"newPasswordPlaceholder\",\n                            \"Enter new password\",\n                          )}\n                          required\n                          className=\"mt-1 pr-10\"\n                          autoComplete=\"new-password\"\n                        />\n                        <button\n                          type=\"button\"\n                          onClick={() => setShowPassword(!showPassword)}\n                          className=\"absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground\"\n                        >\n                          {showPassword ? (\n                            <EyeOff className=\"w-4 h-4\" />\n                          ) : (\n                            <Eye className=\"w-4 h-4\" />\n                          )}\n                        </button>\n                      </div>\n                      <p className=\"text-xs text-muted-foreground mt-1\">\n                        {t(\n                          \"passwordRequirements\",\n                          \"At least 8 characters, 1 letter and 1 number\",\n                        )}\n                      </p>\n                    </div>\n\n                    <div>\n                      <Label htmlFor=\"confirmPassword\">\n                        {t(\"confirmPassword\", \"Confirm Password\")} *\n                      </Label>\n                      <Input\n                        id=\"confirmPassword\"\n                        type={showPassword ? \"text\" : \"password\"}\n                        value={confirmPassword}\n                        onChange={(e) => setConfirmPassword(e.target.value)}\n                        placeholder={t(\n                          \"confirmPasswordPlaceholder\",\n                          \"Confirm new password\",\n                        )}\n                        required\n                        className=\"mt-1\"\n                        autoComplete=\"new-password\"\n                      />\n                    </div>\n\n                    {error && (\n                      <div className=\"p-4 bg-red-50 border border-red-200 rounded-lg\">\n                        <p className=\"text-red-800 text-sm font-medium\">\n                          {error}\n                        </p>\n                      </div>\n                    )}\n\n                    <Button\n                      type=\"submit\"\n                      size=\"lg\"\n                      className=\"w-full\"\n                      disabled={isSubmitting}\n                    >\n                      {isSubmitting ? (\n                        <>\n                          <div className=\"w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2\" />\n                          {t(\"resetting\", \"Resetting...\")}\n                        </>\n                      ) : (\n                        t(\"resetPassword\", \"Reset Password\")\n                      )}\n                    </Button>\n\n                    <div className=\"flex justify-between\">\n                      <button\n                        type=\"button\"\n                        onClick={() => {\n                          setStep(\"request\");\n                          setCode(\"\");\n                          setNewPassword(\"\");\n                          setConfirmPassword(\"\");\n                          setError(null);\n                        }}\n                        className=\"text-sm text-muted-foreground hover:text-primary\"\n                      >\n                        {t(\"changeUsername\", \"Change username\")}\n                      </button>\n                      <button\n                        type=\"button\"\n                        onClick={() =>\n                          handleRequestCode({\n                            preventDefault: () => {},\n                          } as React.FormEvent)\n                        }\n                        className=\"text-sm text-primary hover:underline\"\n                        disabled={isSubmitting}\n                      >\n                        {t(\"resendCode\", \"Resend code\")}\n                      </button>\n                    </div>\n                  </form>\n                )}\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </div>\n    </Layout>\n  );\n}\n"
-    }
-  ],
-  "exports": {
-    "types": [
-      "AuthTokens",
-      "User"
-    ],
-    "variables": [
-      "AuthHeaderMenu",
-      "ForgotPasswordPage",
-      "LoginPage",
-      "RegisterPage",
-      "useAuth",
-      "useAuthStore"
-    ]
-  }
-}

package/dist/registry/docs/reset-password-page.md

@@ -1,36 +0,0 @@
-# Reset Password Page
-
-Split-screen password reset page with form on the left and full-height image on the right. Features new password input with confirmation, validates reset code from URL. Clean minimal design with API integration and responsive layout.
-
-## Files
-
-| Target | Type |
-|--------|------|
-| `$modules$/reset-password-page/index.ts` | index |
-| `$modules$/reset-password-page/reset-password-page.tsx` | page |
-| `$modules$/reset-password-page/lang/en.json` | lang |
-| `$modules$/reset-password-page/lang/tr.json` | lang |
-
-## Usage
-
-```
-import ResetPasswordPage from '@/modules/reset-password-page';
-
-<ResetPasswordPage
-  image="/images/reset-bg.jpg"
-/>
-
-• Installed at: src/modules/reset-password-page/
-• Customize text: src/modules/reset-password-page/lang/*.json
-• Uses customerClient.auth.resetPassword() for API
-• Expects ?code= URL parameter from email link
-• Add to your router as a page component
-```
-
-## Dependencies
-
-This component requires:
-- `button`
-- `input`
-- `auth`
-- `api`

package/dist/registry/reset-password-page.json

@@ -1,39 +0,0 @@
-{
-  "name": "reset-password-page",
-  "type": "registry:page",
-  "title": "Reset Password Page",
-  "description": "Split-screen password reset page with form on the left and full-height image on the right. Features new password input with confirmation, validates reset code from URL. Clean minimal design with API integration and responsive layout.",
-  "registryDependencies": [
-    "button",
-    "input",
-    "auth",
-    "api"
-  ],
-  "usage": "import ResetPasswordPage from '@/modules/reset-password-page';\n\n<ResetPasswordPage\n  image=\"/images/reset-bg.jpg\"\n/>\n\n• Installed at: src/modules/reset-password-page/\n• Customize text: src/modules/reset-password-page/lang/*.json\n• Uses customerClient.auth.resetPassword() for API\n• Expects ?code= URL parameter from email link\n• Add to your router as a page component",
-  "route": {
-    "path": "/reset-password",
-    "componentName": "ResetPasswordPage"
-  },
-  "files": [
-    {
-      "path": "reset-password-page/index.ts",
-      "type": "registry:index",
-      "target": "$modules$/reset-password-page/index.ts"
-    },
-    {
-      "path": "reset-password-page/reset-password-page.tsx",
-      "type": "registry:page",
-      "target": "$modules$/reset-password-page/reset-password-page.tsx"
-    },
-    {
-      "path": "reset-password-page/lang/en.json",
-      "type": "registry:lang",
-      "target": "$modules$/reset-password-page/lang/en.json"
-    },
-    {
-      "path": "reset-password-page/lang/tr.json",
-      "type": "registry:lang",
-      "target": "$modules$/reset-password-page/lang/tr.json"
-    }
-  ]
-}