@onexapis/cli 1.1.38 → 1.1.40

package/dist/preview/preview-app.tsx

@@ -455,6 +455,14 @@ function PreviewApp() {
   >("disconnected");
   const [error, setError] = useState<string | null>(null);
   const wsRef = useRef<WebSocket | null>(null);
+  const [isEditing, setIsEditing] = useState(() => {
+    if (typeof window !== "undefined") {
+      return (
+        new URLSearchParams(window.location.search).get("editing") === "true"
+      );
+    }
+    return false;
+  });
 
   // Load theme bundle
   const loadTheme = useCallback(async (timestamp?: number) => {
@@ -701,7 +709,7 @@ function PreviewApp() {
         section={section}
         schema={schema}
         template={template}
-        isEditing={false}
+        isEditing={isEditing}
         data={sectionData}
       />
     );
@@ -712,16 +720,16 @@ function PreviewApp() {
       {/* Inject theme CSS variables (Gap 2) */}
       {themeCSS && <style dangerouslySetInnerHTML={{ __html: themeCSS }} />}
 
-      {/* Header (Gap 1) */}
-      {headerSections.length > 0 && (
+      {/* Header — hidden if page config sets hideHeader: true */}
+      {headerSections.length > 0 && !currentPage.config?.hideHeader && (
         <header>{headerSections.map(renderSection)}</header>
       )}
 
       {/* Page sections */}
       <main>{pageSections.map(renderSection)}</main>
 
-      {/* Footer (Gap 1) */}
-      {footerSections.length > 0 && (
+      {/* Footer — hidden if page config sets hideFooter: true */}
+      {footerSections.length > 0 && !currentPage.config?.hideFooter && (
         <footer>{footerSections.map(renderSection)}</footer>
       )}
     </>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onexapis/cli",
-  "version": "1.1.38",
+  "version": "1.1.40",
   "description": "CLI tool for OneX theme development - scaffolds themes using @onexapis/core",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -57,7 +57,6 @@
     "chalk": "^5.3.0",
     "chokidar": "^4.0.0",
     "commander": "^12.1.0",
-    "cross-spawn": "^7.0.6",
     "dotenv": "^17.3.1",
     "ejs": "^3.1.10",
     "esbuild": "^0.25.0",
@@ -78,7 +77,6 @@
   "devDependencies": {
     "@types/adm-zip": "^0.5.7",
     "@types/archiver": "^7.0.0",
-    "@types/cross-spawn": "^6.0.6",
     "@types/ejs": "^3.1.5",
     "@types/fs-extra": "^11.0.4",
     "@types/inquirer": "^9.0.7",

package/templates/default/AUTH_AND_PROFILE.md

@@ -0,0 +1,167 @@
+# Authentication & Profile — Default Theme
+
+This document covers the built-in authentication and profile sections included in the default theme template.
+
+## Overview
+
+When you initialize a theme with `onexthm init`, it comes with 5 auth/profile sections and their corresponding hooks ready to use:
+
+| Section              | Path               | Description                                  |
+| -------------------- | ------------------ | -------------------------------------------- |
+| Auth Login           | `/login`           | Username/email + password sign-in            |
+| Auth Register        | `/register`        | Email, username, password, confirm password  |
+| Auth Forgot Password | `/forgot-password` | Request verification code via email/username |
+| Auth Verify Code     | `/verify-code`     | 6-digit OTP input with resend + countdown    |
+| Profile              | `/profile`         | View/edit profile + change password          |
+
+## Architecture
+
+```
+Theme Section (UI only)
+  └── Theme Hook (form state, validation)
+        └── useAuth() from @onexapis/core/hooks (Zustand store)
+              └── AuthService (API calls)
+                    └── ApiClient (HTTP client with token management)
+```
+
+### Hooks
+
+All hooks live in `hooks/` and use `useAuth` from `@onexapis/core/hooks`:
+
+| Hook                    | Uses                                                          | Manages                                              |
+| ----------------------- | ------------------------------------------------------------- | ---------------------------------------------------- |
+| `useLoginForm`          | `useAuth().login()`                                           | Username, password, show/hide toggle, validation     |
+| `useRegisterForm`       | `useAuth().signup()`                                          | Email, username, password, confirm, validation       |
+| `useForgotPasswordForm` | `useAuth().forgotPassword()`                                  | Username/email input, validation                     |
+| `useVerifyCodeForm`     | `useAuth().verifyCode()`, `verifyCodeReset()`, `resendCode()` | 6-digit OTP, auto-focus, paste, countdown            |
+| `useProfileForm`        | `useAuth().updateProfile()`, `changePassword()`, `logout()`   | Profile fields, dirty tracking, change password form |
+
+### API Endpoints
+
+The `AuthService` in `@onexapis/core` handles all API calls:
+
+| Action              | Method | Endpoint                            |
+| ------------------- | ------ | ----------------------------------- |
+| Login               | POST   | `/auth/login`                       |
+| Register            | POST   | `/auth/register`                    |
+| Forgot Password     | POST   | `/auth/forgot`                      |
+| Verify Code         | POST   | `/auth/confirm`                     |
+| Verify Code (reset) | POST   | `/auth/confirm_reset_password_code` |
+| Resend Code         | POST   | `/auth/resend_code`                 |
+| Reset Password      | POST   | `/auth/new_password`                |
+| Change Password     | POST   | `/auth/change_password`             |
+| Get User Info       | GET    | `/auth/user_info`                   |
+| Update Profile      | POST   | `/auth/user_info`                   |
+
+### Token Handling
+
+- **IdToken** → `Authorization: Bearer {IdToken}` header
+- **AccessToken** → `?access_token={AccessToken}` query parameter
+- **Tokens stored** in `localStorage` under key `auth_tokens`
+- **Signup** auto-injects `company_id` (from `initializeOnex()` config) and `is_customer: true`
+
+## Editable Settings
+
+All sections expose these layout settings via the editor sidebar:
+
+| Setting            | Type   | Default   | Description                          |
+| ------------------ | ------ | --------- | ------------------------------------ |
+| `backgroundColor`  | color  | `#F9FAFB` | Page background                      |
+| `cardBackground`   | color  | `#FFFFFF` | Card/form container background       |
+| `primaryColor`     | color  | `#2563EB` | Buttons and links                    |
+| `textColor`        | color  | `#111827` | Heading text color                   |
+| `cardBorderRadius` | select | `2xl`     | Card corner rounding (lg/xl/2xl/3xl) |
+
+Plus all text labels, placeholders, button text, and URLs are customizable per section.
+
+## Auth Flow
+
+```
+Register → Verify Code → Login → Profile
+                ↑                    │
+Forgot Password → Verify Code (reset) → Reset Password
+```
+
+1. **Register**: User fills email, username, password → `signup()` → redirects to `/verify-code?username=...`
+2. **Verify Code**: User enters 6-digit OTP → `verifyCode()` → redirects to `/login`
+3. **Login**: User signs in → `login()` → tokens stored → redirects to `/`
+4. **Forgot Password**: User enters email → `forgotPassword()` → redirects to `/verify-code?mode=reset&username=...`
+5. **Verify Code (reset)**: OTP → `verifyCodeReset()` → returns session → redirects to `/reset-password?session=...`
+6. **Profile**: View/edit name, phone, address → `updateProfile()`. Change password → `changePassword()`
+
+## Configuration
+
+### Required Environment Variables
+
+```env
+NEXT_PUBLIC_API_URL=https://api-dev.onexeos.com
+NEXT_PUBLIC_COMPANY_ID=your-company-id
+```
+
+These are read by `initializeOnex()` which creates the `AuthService` and registers it with the `useAuth` Zustand store.
+
+## Testing Locally
+
+### Preview mode (UI only)
+
+```bash
+onexthm dev
+# Visit http://localhost:3456/login
+```
+
+### Preview with editing mode
+
+```bash
+onexthm dev
+# Visit http://localhost:3456/login?editing=true
+```
+
+### Preview with real API (requires .env)
+
+Create `.env` in your theme directory:
+
+```env
+NEXT_PUBLIC_API_URL=https://api-dev.onexeos.com
+NEXT_PUBLIC_COMPANY_ID=your-company-id
+```
+
+Then run `onexthm dev` — login/register/verify will make real API calls.
+
+## File Structure
+
+```
+hooks/
+  index.ts
+  use-login-form.ts
+  use-register-form.ts
+  use-forgot-password-form.ts
+  use-verify-code-form.ts
+  use-profile-form.ts
+sections/
+  auth-login/
+    auth-login-default.tsx    # Login form UI
+    auth-login.schema.ts      # Editable settings
+    index.ts
+  auth-register/
+    auth-register-default.tsx
+    auth-register.schema.ts
+    index.ts
+  auth-forgot-password/
+    auth-forgot-password-default.tsx
+    auth-forgot-password.schema.ts
+    index.ts
+  auth-verify-code/
+    auth-verify-code-default.tsx
+    auth-verify-code.schema.ts
+    index.ts
+  profile/
+    profile-default.tsx
+    profile.schema.ts
+    index.ts
+pages/
+  login.ts
+  register.ts
+  forgot-password.ts
+  verify-code.ts
+  profile.ts
+```