@promakeai/cli 0.0.5 → 0.1.0

package/template/src/modules/auth/USAGE.md

@@ -1,248 +0,0 @@
-# Auth Module Usage Guide
-
-## Overview
-
-Auth module manages user authentication with Zustand state, automatic token refresh, and axios interceptors. Provides secure authentication integrated with the customer backend client.
-
-**Important**: UI components (pages, forms) are customizable, but the core auth logic (`auth-store.ts`, `use-auth.ts`) and API integration should remain unchanged to ensure proper token management and security.
-
-## Module Structure
-
-```
-src/modules/auth/
-├── auth-store.ts          # [CORE] Zustand store - DO NOT MODIFY
-├── use-auth.ts            # [CORE] Auth hook with token refresh - DO NOT MODIFY
-├── login-page.tsx         # [UI] Customizable
-├── register-page.tsx      # [UI] Customizable
-├── forgot-password-page.tsx # [UI] Customizable
-└── auth-header-menu.tsx   # [UI] Customizable
-```
-
-## Requirements & Dependencies
-
-### Required NPM Packages
-
-```json
-{
-  "zustand": "^5.0.9", // State management (CORE)
-  "react-router-dom": "^6.30.1", // Navigation (UI)
-  "sonner": "^1.7.4", // Toast notifications (UI)
-  "lucide-react": "^0.462.0" // Icons (UI)
-}
-```
-
-### Required Project Modules
-
-- **`@/modules/api/customer-client`** - API client instance (CORE)
-- **`@/modules/api/get-error-message`** - Error handling utility (CORE)
-
-### Required Project Files
-
-**Hooks** (CORE - Must exist):
-
-- `@/hooks/useStaticText` - Translation system
-- `@/hooks/usePageTitle` - Page title management
-- `@/hooks/useSiteConfig` - Site configuration (used by useStaticText)
-
-**Components** (UI - Customizable):
-
-- `@/components/Layout` - Page layout wrapper
-- `@/components/ui/button` - Button component
-- `@/components/ui/input` - Input component
-- `@/components/ui/label` - Label component
-- `@/components/ui/card` - Card components
-- `@/components/ui/dropdown-menu` - Dropdown menu (for header menu)
-
-**Language Files** (Required structure):
-
-```
-src/lang/
-  ├── en/
-  │   ├── login.json           # Login page translations
-  │   ├── register.json        # Register page translations
-  │   ├── forgotPassword.json  # Password reset translations
-  │   └── header.json          # Header menu translations
-  └── tr/
-      ├── login.json
-      ├── register.json
-      ├── forgotPassword.json
-      └── header.json
-```
-
-**Language File Naming Convention**:
-
-- Use camelCase: `forgotPassword.json` (NOT `forgot-password.json`)
-- Match the component name passed to `useStaticText("forgotPassword")`
-
-### Environment Variables
-
-None required (inherits from API module)
-
-## Quick Start
-
-### 1. Add Routes to App.tsx
-
-```tsx
-import Login from "./modules/auth/login-page";
-import Register from "./modules/auth/register-page";
-import ForgotPassword from "./modules/auth/forgot-password-page";
-
-<Route path="/login" element={<Login />} />
-<Route path="/register" element={<Register />} />
-<Route path="/forgot-password" element={<ForgotPassword />} />
-```
-
-### 2. Use in Components
-
-```tsx
-import { useAuth } from "@/modules/auth/use-auth";
-
-function MyComponent() {
-  const { user, isAuthenticated, login, logout, api } = useAuth();
-
-  return isAuthenticated ? (
-    <div>
-      Welcome, {user?.username} <button onClick={logout}>Logout</button>
-    </div>
-  ) : (
-    <button onClick={() => login("username", "password")}>Login</button>
-  );
-}
-```
-
-### 3. Add to Header
-
-```tsx
-import { AuthHeaderMenu } from "@/modules/auth/auth-header-menu";
-
-<AuthHeaderMenu variant="desktop" />  {/* or "mobile" */}
-```
-
-## useAuth Hook API
-
-```tsx
-const {
-  user, // User: { username, email? }
-  isAuthenticated, // boolean
-  tokens, // AuthTokens object
-  api, // customerClient with token
-  login, // (username, password) => Promise<void>
-  register, // (username, email, password) => Promise<void>
-  confirmEmail, // (username, code) => Promise<void>
-  forgotPassword, // (username) => Promise<void>
-  resetPassword, // (username, code, newPassword) => Promise<void>
-  logout, // () => void
-  refreshAccessToken, // () => Promise<boolean>
-} = useAuth();
-```
-
-## Key Features
-
-**Automatic Token Refresh**: Tokens refresh 1 minute before expiration  
-**LocalStorage Persistence**: Auth state survives page reloads (key: `auth-storage`)  
-**401 Auto-Recovery**: Failed requests auto-retry after token refresh  
-**Axios Integration**: Token automatically added to all API calls
-
-## Auth Flow Examples
-
-### Login & Auto Token Setup
-
-```tsx
-await login(username, password);
-// Automatically: stores tokens, updates API client, sets auth state
-```
-
-### Registration with Email Confirmation
-
-```tsx
-await register(username, email, password);
-await confirmEmail(username, code); // Code sent to email
-```
-
-### Password Reset
-
-```tsx
-await forgotPassword(username); // Request code
-await resetPassword(username, code, newPassword); // Set new password
-```
-
-### Using API with Token
-
-```tsx
-const { api } = useAuth();
-const response = await api.orders.getMyOrders(); // Token auto-included
-```
-
-## Error Handling
-
-```tsx
-import { getErrorMessage } from "@/modules/api/get-error-message";
-
-try {
-  await login(username, password);
-} catch (err) {
-  const message = getErrorMessage(err, "Login failed");
-  toast.error(message);
-}
-```
-
-## Translations
-
-Language files must follow this naming convention:
-
-```
-src/lang/en/
-  ├── login.json           # useStaticText("login")
-  ├── register.json        # useStaticText("register")
-  └── forgotPassword.json  # useStaticText("forgotPassword")
-```
-
-Usage in components:
-
-```tsx
-const { t } = useStaticText("login"); // File name without .json
-<h1>{t("title")}</h1>;
-```
-
-## Direct Store Access
-
-```tsx
-import { useAuthStore } from "@/modules/auth/auth-store";
-
-const isExpired = useAuthStore((state) => state.isTokenExpired());
-const timeLeft = useAuthStore((state) => state.getTimeUntilExpiry());
-```
-
-## Customization
-
-**UI Pages**: Fully customizable (login, register, forgot-password pages)  
-**Auth Logic**: Should NOT be modified (token refresh, interceptors)  
-**Token Timing**: Edit `REFRESH_BUFFER_MS` in `use-auth.ts` (default: 60000ms)
-
-## Module Integration Checklist
-
-Before using this module, ensure:
-
-- ✅ API module is configured (`customer-client.ts`)
-- ✅ `zustand` package installed
-- ✅ All required hooks exist (`useStaticText`, `usePageTitle`)
-- ✅ Language files created (login, register, forgotPassword)
-- ✅ UI components available (Button, Input, Card, etc.)
-- ✅ Routes added to `App.tsx`
-
-## Dependencies Summary
-
-**Core** (Must not modify):
-
-- `zustand` - State management
-- `@/modules/api/customer-client` - API integration
-- `@/hooks/useStaticText` - Translations
-- `auth-store.ts`, `use-auth.ts` - Auth logic
-
-**UI** (Customizable):
-
-- `react-router-dom` - Navigation
-- `sonner` - Toast notifications
-- `lucide-react` - Icons
-- shadcn/ui components - UI elements
-- Language JSON files - Text content

package/template/src/modules/auth/auth-header-menu.tsx

@@ -1,123 +0,0 @@
-import type { ReactNode } from "react";
-import { Link } from "react-router";
-import { User, LogOut } from "lucide-react";
-import { useAuth } from "@/modules/auth/use-auth";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
-
-interface AuthHeaderMenuProps {
-  children?: ReactNode;
-  variant: "desktop" | "mobile";
-  onMenuClose?: () => void;
-}
-
-export function AuthHeaderMenu({
-  children,
-  variant,
-  onMenuClose,
-}: AuthHeaderMenuProps) {
-  const { isAuthenticated, user, logout } = useAuth();
-  const { t } = useTranslation("header");
-
-  const handleLogout = () => {
-    logout();
-    toast.success(t("logoutToastTitle", "Goodbye!"), {
-      description: t(
-        "logoutToastDesc",
-        "You have been logged out successfully.",
-      ),
-    });
-    onMenuClose?.();
-  };
-
-  if (variant === "desktop") {
-    if (isAuthenticated) {
-      return (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon" className="h-10 w-10">
-              <User className="h-5 w-5" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-56">
-            <DropdownMenuLabel className="font-normal">
-              <div className="flex flex-col space-y-1">
-                <p className="text-sm font-medium">{user?.username}</p>
-                {user?.email && (
-                  <p className="text-xs text-muted-foreground">{user.email}</p>
-                )}
-              </div>
-            </DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            {children}
-            {children && <DropdownMenuSeparator />}
-            <DropdownMenuItem
-              onClick={handleLogout}
-              className="text-red-600 focus:text-red-600 focus:bg-red-50 cursor-pointer"
-            >
-              <LogOut className="mr-2 h-4 w-4" />
-              {t("logout", "Logout")}
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      );
-    }
-
-    return (
-      <Link to="/login">
-        <Button variant="ghost" size="icon" className="h-10 w-10">
-          <User className="h-5 w-5" />
-        </Button>
-      </Link>
-    );
-  }
-
-  // Mobile variant
-  if (isAuthenticated) {
-    return (
-      <div className="space-y-3">
-        <div className="flex items-center space-x-3 p-3 bg-muted/50 rounded-lg">
-          <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center">
-            <User className="h-5 w-5 text-primary" />
-          </div>
-          <div className="flex-1 min-w-0">
-            <p className="text-sm font-medium truncate">{user?.username}</p>
-            {user?.email && (
-              <p className="text-xs text-muted-foreground truncate">
-                {user.email}
-              </p>
-            )}
-          </div>
-        </div>
-        {children}
-        <button
-          onClick={handleLogout}
-          className="flex items-center space-x-2 text-lg font-medium text-red-600 hover:text-red-700 transition-colors w-full"
-        >
-          <LogOut className="h-5 w-5" />
-          <span>{t("logout", "Logout")}</span>
-        </button>
-      </div>
-    );
-  }
-
-  return (
-    <Link
-      to="/login"
-      className="flex items-center space-x-2 text-lg font-medium hover:text-primary transition-colors"
-      onClick={onMenuClose}
-    >
-      <User className="h-5 w-5" />
-      <span>{t("login", "Login")}</span>
-    </Link>
-  );
-}

package/template/src/modules/auth/auth-store.ts

@@ -1,57 +0,0 @@
-import { create } from "zustand";
-import { persist } from "zustand/middleware";
-
-export interface User {
-  username: string;
-  email?: string;
-}
-
-export interface AuthTokens {
-  accessToken: string;
-  refreshToken?: string;
-  idToken?: string;
-  encryptionKey?: string;
-  expiresAt?: number; // Unix timestamp in milliseconds
-}
-
-interface AuthState {
-  user: User | null;
-  tokens: AuthTokens | null;
-  isAuthenticated: boolean;
-  setAuth: (user: User, tokens: AuthTokens) => void;
-  updateTokens: (tokens: AuthTokens) => void;
-  clearAuth: () => void;
-  isTokenExpired: () => boolean;
-  getTimeUntilExpiry: () => number | null;
-}
-
-export const useAuthStore = create<AuthState>()(
-  persist(
-    (set, get) => ({
-      user: null,
-      tokens: null,
-      isAuthenticated: false,
-
-      setAuth: (user, tokens) => set({ user, tokens, isAuthenticated: true }),
-
-      updateTokens: (tokens) => set({ tokens }),
-
-      clearAuth: () =>
-        set({ user: null, tokens: null, isAuthenticated: false }),
-
-      isTokenExpired: () => {
-        const { tokens } = get();
-        if (!tokens?.expiresAt) return false;
-        // Consider token expired 30 seconds before actual expiry for safety margin
-        return Date.now() >= tokens.expiresAt - 30000;
-      },
-
-      getTimeUntilExpiry: () => {
-        const { tokens } = get();
-        if (!tokens?.expiresAt) return null;
-        return tokens.expiresAt - Date.now();
-      },
-    }),
-    { name: "auth-storage" },
-  ),
-);