falak-app-duo 1.0.0

package/README.md

@@ -0,0 +1,100 @@
+# falak-app-duo
+
+Vue 3 boilerplate scaffolder. Firebase-free, with Groq moved fully to the
+backend and Paymob dropped for good. "Duo" = the two remaining bundled
+integrations on the frontend side: **Ably** (realtime) and **Brevo**
+(email/SMS, proxied through Laravel).
+
+| | Status |
+|---|---|
+| Firebase | Removed |
+| Groq (AI) | Removed from frontend — backend-only now, no client code here |
+| Paymob (payments) | Removed for good |
+| Ably (realtime) | **New** — via Laravel Echo, authorized through the same API-key + user-token headers as the rest of the app |
+| Brevo (email/SMS) | Kept — calls go through Laravel, key never ships to the browser |
+| Laravel API auth | `X-API-Key` (app) + `Authorization: Bearer <token>` (user) |
+| AES-256 | Kept — encrypts the cached user token in localStorage |
+| Arabic/RTL | Kept — baked in via vue-i18n + postcss-rtlcss |
+
+## Auth model
+
+Every request from `src/services/api.js` carries two headers:
+
+- `X-API-Key` — identifies this client app, set once per environment in `.env`.
+- `Authorization: Bearer <user token>` — identifies the logged-in user, issued
+  by your Laravel `/auth/login` endpoint and stored AES-256 encrypted in
+  `localStorage` (see `src/utils/crypto.js` and `src/stores/auth.js`).
+
+## Ably (realtime)
+
+`src/services/ably.js` wraps Laravel Echo with the `ably` broadcaster. Private
+and presence channels are authorized via a custom `authorizer` that routes
+through the shared `api` axios client (`POST /broadcasting/auth`) instead of
+a bare fetch — so the same `X-API-Key` + bearer token gate realtime auth too.
+
+Backend needs:
+```php
+// config/broadcasting.php
+'default' => 'ably',
+'connections' => ['ably' => ['driver' => 'ably', 'key' => env('ABLY_KEY')]],
+```
+plus `BroadcastServiceProvider` registered so `/broadcasting/auth` exists.
+Only the **public** half of your Ably key goes in the frontend `.env`
+(`VITE_ABLY_PUBLIC_KEY`) — the secret half stays server-side.
+
+```js
+import { listenPrivate, joinPresence } from "@/services/ably";
+
+listenPrivate(`App.Models.User.${userId}`, ".OrderUpdated", (e) => { ... });
+joinPresence("chat-room-1", { here: (users) => { ... } });
+```
+
+## Brevo (email/SMS)
+
+`src/services/brevo.js` only calls your own Laravel routes — Brevo's API key
+is a backend secret and never ships to the browser.
+
+## Groq
+
+No frontend code at all now — the backend calls Groq directly and exposes
+whatever endpoint(s) your app needs (e.g. `POST /api/ai/chat`). Call that
+endpoint through the shared `api` client wherever you need it; there's
+nothing to scaffold on the client side for it.
+
+## Backend routes this frontend expects
+
+```
+POST /api/auth/login   -> { token, user }
+POST /api/auth/logout
+GET  /api/auth/me      -> user
+POST /api/broadcasting/auth   (Ably/Echo channel authorization)
+POST /api/brevo/email  | /api/brevo/sms | /api/brevo/contacts
+```
+plus an `X-API-Key` middleware gating all of the above, and Sanctum (or
+similar) validating the bearer token for user-scoped routes.
+
+## Usage
+
+```bash
+node bin/falak-app-duo my-project        # interactive prompts
+node bin/falak-app-duo my-project --yes  # defaults: Ably + Brevo, localhost API
+```
+
+Once published to npm you'd run it as `npx falak-app-duo my-project`.
+
+The CLI:
+1. Copies `templates/default` into `my-project/`.
+2. Strips out `ably.js` and/or `brevo.js` if you didn't select them.
+3. Generates a real `.env` from `.env.example` with a fresh random AES-256
+   key + IV, and your chosen API base URL.
+
+Then:
+
+```bash
+cd my-project
+npm install
+npm run dev
+```
+
+Fill in `VITE_API_KEY` and `VITE_ABLY_PUBLIC_KEY` in `.env` before running
+against a real backend.

package/bin/falak-app-duo

@@ -0,0 +1,123 @@
+#!/usr/bin/env node
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import fs from "fs-extra";
+import prompts from "prompts";
+import chalk from "chalk";
+import { Command } from "commander";
+import crypto from "node:crypto";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const TEMPLATE_DIR = path.join(__dirname, "..", "templates", "default");
+
+const program = new Command();
+program
+  .name("falak-app")
+  .description("Scaffold a Vue 3 app with Ably, Brevo, AES-256 and a Laravel API client baked in.")
+  .argument("[project-name]", "Directory to create the project in")
+  .option("-y, --yes", "Skip prompts and use defaults (all services enabled)")
+  .parse(process.argv);
+
+const [argProjectName] = program.args;
+const opts = program.opts();
+
+function randomHex(bytes) {
+  return crypto.randomBytes(bytes).toString("hex");
+}
+
+async function main() {
+  console.log(chalk.cyanBright("\n  falak-app \u2014 Vue 3 scaffolder\n"));
+
+  const answers = opts.yes
+    ? {
+        projectName: argProjectName || "falak-app-duo",
+        services: ["ably", "brevo"],
+        apiBaseUrl: "http://localhost:8000/api",
+      }
+    : await prompts(
+        [
+          {
+            type: argProjectName ? null : "text",
+            name: "projectName",
+            message: "Project name / folder:",
+            initial: "falak-app-duo",
+          },
+          {
+            type: "multiselect",
+            name: "services",
+            message: "Which services do you want wired up?",
+            choices: [
+              { title: "Ably (realtime, via Laravel Echo)", value: "ably", selected: true },
+              { title: "Brevo (email/SMS, via backend)", value: "brevo", selected: true },
+            ],
+            hint: "Space to toggle, Enter to confirm",
+          },
+          {
+            type: "text",
+            name: "apiBaseUrl",
+            message: "Laravel API base URL:",
+            initial: "http://localhost:8000/api",
+          },
+        ],
+        { onCancel: () => process.exit(1) }
+      );
+
+  const projectName = argProjectName || answers.projectName;
+  const services = answers.services || [];
+  const targetDir = path.resolve(process.cwd(), projectName);
+
+  if (await fs.pathExists(targetDir)) {
+    const files = await fs.readdir(targetDir);
+    if (files.length > 0) {
+      console.log(chalk.red(`\n  Directory "${projectName}" already exists and is not empty.\n`));
+      process.exit(1);
+    }
+  }
+
+  console.log(chalk.gray(`\n  Scaffolding into ./${projectName} ...\n`));
+  await fs.copy(TEMPLATE_DIR, targetDir);
+
+  // Rename the app's package.json placeholder and set the real project name
+  const pkgPath = path.join(targetDir, "package.json");
+  const pkg = await fs.readJson(pkgPath);
+  pkg.name = projectName
+    .toLowerCase()
+    .replace(/[^a-z0-9-]/g, "-")
+    .replace(/-+/g, "-");
+  await fs.writeJson(pkgPath, pkg, { spaces: 2 });
+
+  // Remove service files the user didn't select
+  const serviceFiles = {
+    ably: "src/services/ably.js",
+    brevo: "src/services/brevo.js",
+  };
+  for (const [key, relPath] of Object.entries(serviceFiles)) {
+    if (!services.includes(key)) {
+      await fs.remove(path.join(targetDir, relPath));
+    }
+  }
+
+  // Generate a real .env from .env.example with a fresh encryption key
+  const envExamplePath = path.join(targetDir, ".env.example");
+  let envContent = await fs.readFile(envExamplePath, "utf-8");
+  envContent = envContent
+    .replace("__API_BASE_URL__", answers.apiBaseUrl || "http://localhost:8000/api")
+    .replace("__AES_KEY__", randomHex(32)) // 256-bit key, hex-encoded
+    .replace("__AES_IV__", randomHex(16)); // 128-bit IV, hex-encoded
+  await fs.writeFile(path.join(targetDir, ".env"), envContent);
+
+  console.log(chalk.green("  Done! Next steps:\n"));
+  console.log(chalk.white(`    cd ${projectName}`));
+  console.log(chalk.white("    npm install"));
+  console.log(chalk.white("    npm run dev\n"));
+  console.log(
+    chalk.gray(
+      "  Fill in VITE_API_KEY, VITE_ABLY_PUBLIC_KEY, Brevo backend routes, and review .env before shipping.\n"
+    )
+  );
+}
+
+main().catch((err) => {
+  console.error(chalk.red(err));
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "falak-app-duo",
+  "version": "1.0.0",
+  "description": "Vue 3 boilerplate scaffolder — Ably (realtime), Brevo, AES-256, Arabic/RTL, and a Laravel API client (API key + user token auth). No Firebase, no Groq/Paymob on the frontend (Groq is backend-only; Paymob dropped).",
+  "type": "module",
+  "bin": {
+    "falak-app-duo": "bin/falak-app-duo"
+  },
+  "files": [
+    "bin",
+    "templates"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "commander": "^12.1.0",
+    "fs-extra": "^11.2.0",
+    "prompts": "^2.4.2"
+  },
+  "keywords": [
+    "vue3",
+    "boilerplate",
+    "scaffolder",
+    "arabic",
+    "rtl",
+    "laravel",
+    "brevo",
+    "ably",
+    "realtime"
+  ],
+  "license": "MIT"
+}

package/templates/default/.env.example

@@ -0,0 +1,23 @@
+# --- Laravel API (Falak Bridge or your own backend) ---
+# Base URL of your Laravel API
+VITE_API_BASE_URL=__API_BASE_URL__
+# Static API key issued to this client app (sent as X-API-Key on every request)
+VITE_API_KEY=replace-with-your-app-api-key
+
+# --- Ably (realtime, via Laravel Echo) ---
+# Public/client half of your Ably key only. Private channels are authorized
+# through your Laravel /broadcasting/auth route (see src/services/ably.js) —
+# the secret half of the Ably key stays server-side.
+VITE_ABLY_PUBLIC_KEY=
+
+# --- Brevo (email / SMS) ---
+# Brevo's API key must never live in the frontend. Sending is done by the
+# Laravel backend; the client only calls your own /brevo/* endpoints.
+# Nothing to configure here — this exists for documentation purposes.
+
+# --- AI (Groq) ---
+# Handled entirely by the backend now — no client-side key or service here.
+
+# --- AES-256 client-side encryption (e.g. for local storage of sensitive fields) ---
+VITE_AES_KEY=__AES_KEY__
+VITE_AES_IV=__AES_IV__

package/templates/default/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="ar" dir="rtl">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Falak App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/templates/default/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "falak-app-duo",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "ably": "^2.5.0",
+    "axios": "^1.7.7",
+    "crypto-js": "^4.2.0",
+    "laravel-echo": "^1.16.1",
+    "pinia": "^2.2.2",
+    "vue": "^3.5.0",
+    "vue-i18n": "^9.14.0",
+    "vue-router": "^4.4.5"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.1.4",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.47",
+    "postcss-rtlcss": "^4.0.9",
+    "tailwindcss": "^3.4.13",
+    "vite": "^5.4.8"
+  }
+}

package/templates/default/postcss.config.js

@@ -0,0 +1,7 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+    "postcss-rtlcss": {}, // mirrors utility classes when dir="rtl" is set on <html>
+  },
+};

package/templates/default/src/App.vue

@@ -0,0 +1,36 @@
+<script setup>
+import { useI18n } from "vue-i18n";
+import { setLocale } from "@/i18n";
+import { useAuthStore } from "@/stores/auth";
+import { RouterLink, RouterView } from "vue-router";
+
+const { t, locale } = useI18n();
+const auth = useAuthStore();
+
+function toggleLocale() {
+  setLocale(locale.value === "ar" ? "en" : "ar");
+}
+</script>
+
+<template>
+  <div class="min-h-screen bg-gray-50 text-gray-900">
+    <nav class="flex items-center justify-between px-6 py-4 bg-white shadow-sm">
+      <span class="font-bold text-lg">{{ t("app.name") }}</span>
+      <div class="flex items-center gap-4">
+        <RouterLink to="/" class="hover:underline">{{ t("nav.home") }}</RouterLink>
+        <RouterLink v-if="!auth.userToken" to="/login" class="hover:underline">{{
+          t("nav.login")
+        }}</RouterLink>
+        <button v-else @click="auth.logout()" class="text-sm text-red-600 hover:underline">
+          {{ t("nav.login") === "Login" ? "Logout" : "خروج" }}
+        </button>
+        <button @click="toggleLocale" class="text-sm px-2 py-1 border rounded">
+          {{ locale === "ar" ? "EN" : "AR" }}
+        </button>
+      </div>
+    </nav>
+    <main class="p-6">
+      <RouterView />
+    </main>
+  </div>
+</template>

package/templates/default/src/assets/main.css

@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body {
+  font-family: "Almarai", "IBM Plex Sans Arabic", sans-serif;
+}

package/templates/default/src/i18n/index.js

@@ -0,0 +1,25 @@
+import { createI18n } from "vue-i18n";
+import ar from "./locales/ar.json";
+import en from "./locales/en.json";
+
+const STORAGE_KEY = "falak_locale";
+const savedLocale = localStorage.getItem(STORAGE_KEY) || "ar";
+
+const i18n = createI18n({
+  legacy: false,
+  locale: savedLocale,
+  fallbackLocale: "en",
+  messages: { ar, en },
+});
+
+export function setLocale(locale) {
+  i18n.global.locale.value = locale;
+  localStorage.setItem(STORAGE_KEY, locale);
+  document.documentElement.lang = locale;
+  document.documentElement.dir = locale === "ar" ? "rtl" : "ltr";
+}
+
+// Apply on load
+setLocale(savedLocale);
+
+export default i18n;

package/templates/default/src/i18n/locales/ar.json

@@ -0,0 +1,18 @@
+{
+  "app": {
+    "name": "فلك"
+  },
+  "nav": {
+    "home": "الرئيسية",
+    "login": "تسجيل الدخول"
+  },
+  "auth": {
+    "email": "البريد الإلكتروني",
+    "password": "كلمة المرور",
+    "submit": "دخول",
+    "error": "بيانات الدخول غير صحيحة"
+  },
+  "home": {
+    "welcome": "مرحبًا بك في فلك"
+  }
+}

package/templates/default/src/i18n/locales/en.json

@@ -0,0 +1,18 @@
+{
+  "app": {
+    "name": "Falak"
+  },
+  "nav": {
+    "home": "Home",
+    "login": "Login"
+  },
+  "auth": {
+    "email": "Email",
+    "password": "Password",
+    "submit": "Sign in",
+    "error": "Invalid credentials"
+  },
+  "home": {
+    "welcome": "Welcome to Falak"
+  }
+}

package/templates/default/src/main.js

@@ -0,0 +1,14 @@
+import { createApp } from "vue";
+import { createPinia } from "pinia";
+import App from "./App.vue";
+import router from "./router";
+import i18n from "./i18n";
+import "./assets/main.css";
+
+const app = createApp(App);
+
+app.use(createPinia());
+app.use(router);
+app.use(i18n);
+
+app.mount("#app");

package/templates/default/src/router/index.js

@@ -0,0 +1,21 @@
+import { createRouter, createWebHistory } from "vue-router";
+import { useAuthStore } from "@/stores/auth";
+
+const routes = [
+  { path: "/", name: "home", component: () => import("@/views/Home.vue") },
+  { path: "/login", name: "login", component: () => import("@/views/Login.vue") },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+router.beforeEach((to) => {
+  const auth = useAuthStore();
+  if (to.meta.requiresAuth && !auth.userToken) {
+    return { name: "login" };
+  }
+});
+
+export default router;

package/templates/default/src/services/ably.js

@@ -0,0 +1,66 @@
+import Echo from "laravel-echo";
+import Ably from "ably";
+import api from "./api";
+
+/**
+ * Realtime (Ably via Laravel Echo/Broadcasting).
+ *
+ * Private/presence channels are authorized by Laravel's broadcasting auth
+ * route (default: POST /broadcasting/auth), which must see the same
+ * X-API-Key + Authorization: Bearer <user token> headers as every other
+ * request — so we point Echo's authorizer at the shared `api` axios client
+ * instead of letting it make a bare fetch/XHR of its own.
+ *
+ * Backend needs (config/broadcasting.php):
+ *   'default' => 'ably',
+ *   'connections' => ['ably' => ['driver' => 'ably', 'key' => env('ABLY_KEY')]]
+ * and BroadcastServiceProvider registered so /broadcasting/auth exists.
+ */
+
+let echo = null;
+
+export function connect() {
+  if (echo) return echo;
+
+  echo = new Echo({
+    broadcaster: "ably",
+    key: import.meta.env.VITE_ABLY_PUBLIC_KEY, // Ably key's public/client half only
+    authorizer: (channel) => ({
+      authorize: (socketId, callback) => {
+        api
+          .post("/broadcasting/auth", {
+            socket_id: socketId,
+            channel_name: channel.name,
+          })
+          .then(({ data }) => callback(false, data))
+          .catch((err) => callback(true, err));
+      },
+    }),
+  });
+
+  return echo;
+}
+
+export function disconnect() {
+  echo?.disconnect();
+  echo = null;
+}
+
+/** Subscribe to a public channel, e.g. listenPublic('orders', '.OrderUpdated', cb) */
+export function listenPublic(channelName, eventName, callback) {
+  return connect().channel(channelName).listen(eventName, callback);
+}
+
+/** Subscribe to a private channel scoped to the current user, e.g. `App.Models.User.5` */
+export function listenPrivate(channelName, eventName, callback) {
+  return connect().private(channelName).listen(eventName, callback);
+}
+
+/** Subscribe to a presence channel (who's online), e.g. a shared room */
+export function joinPresence(channelName, { here, joining, leaving } = {}) {
+  const presence = connect().join(channelName);
+  if (here) presence.here(here);
+  if (joining) presence.joining(joining);
+  if (leaving) presence.leaving(leaving);
+  return presence;
+}

package/templates/default/src/services/api.js

@@ -0,0 +1,49 @@
+import axios from "axios";
+import { decrypt } from "@/utils/crypto";
+
+/**
+ * Central client for talking to the Laravel backend.
+ *
+ * Auth model (two headers on every request):
+ *   - X-API-Key    : static key identifying *this client app* (set per environment,
+ *                    checked by an app-level middleware before anything else runs).
+ *   - Authorization: `Bearer <user token>` issued at login, identifying the *user*.
+ *
+ * This mirrors a common Laravel Sanctum-style setup where the API key gates which
+ * apps may talk to the API at all, and the bearer token scopes the request to a user.
+ */
+const api = axios.create({
+  baseURL: import.meta.env.VITE_API_BASE_URL,
+  headers: {
+    Accept: "application/json",
+    "X-API-Key": import.meta.env.VITE_API_KEY,
+  },
+});
+
+api.interceptors.request.use((config) => {
+  // Read the token straight from storage (not the Pinia store) to avoid a
+  // circular import between this file and stores/auth.js.
+  const raw = localStorage.getItem("falak_user_token");
+  if (raw) {
+    const token = decrypt(raw);
+    if (token) config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+let onUnauthorized = null;
+export function registerUnauthorizedHandler(fn) {
+  onUnauthorized = fn;
+}
+
+api.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response?.status === 401 && onUnauthorized) {
+      onUnauthorized();
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default api;

package/templates/default/src/services/brevo.js

@@ -0,0 +1,35 @@
+import api from "./api";
+
+/**
+ * Brevo (formerly Sendinblue) — transactional email & SMS.
+ *
+ * This replaces Firebase (which the previous falak-app generation used for
+ * auth emails / push). Brevo's API key is a backend secret, so every call
+ * here goes through your Laravel API, authenticated the same way as the
+ * rest of the app (X-API-Key + user bearer token via the shared `api` client).
+ *
+ * Expected Laravel routes (implement server-side with brevo/brevo-php or a
+ * plain HTTP client against https://api.brevo.com/v3):
+ *   POST /brevo/email        { to, template_id, params }
+ *   POST /brevo/sms          { to, message }
+ *   POST /brevo/contacts     { email, attributes, list_ids }
+ */
+
+export async function sendTransactionalEmail({ to, templateId, params = {} }) {
+  const { data } = await api.post("/brevo/email", { to, template_id: templateId, params });
+  return data;
+}
+
+export async function sendSms({ to, message }) {
+  const { data } = await api.post("/brevo/sms", { to, message });
+  return data;
+}
+
+export async function upsertContact({ email, attributes = {}, listIds = [] }) {
+  const { data } = await api.post("/brevo/contacts", {
+    email,
+    attributes,
+    list_ids: listIds,
+  });
+  return data;
+}

package/templates/default/src/stores/auth.js

@@ -0,0 +1,53 @@
+import { defineStore } from "pinia";
+import { encrypt, decrypt } from "@/utils/crypto";
+import api from "@/services/api";
+
+const STORAGE_KEY = "falak_user_token";
+
+function loadToken() {
+  const raw = localStorage.getItem(STORAGE_KEY);
+  if (!raw) return null;
+  try {
+    return decrypt(raw) || null;
+  } catch {
+    return null;
+  }
+}
+
+export const useAuthStore = defineStore("auth", {
+  state: () => ({
+    userToken: loadToken(),
+    user: null,
+  }),
+  actions: {
+    setToken(token) {
+      this.userToken = token;
+      localStorage.setItem(STORAGE_KEY, encrypt(token));
+    },
+    clearToken() {
+      this.userToken = null;
+      this.user = null;
+      localStorage.removeItem(STORAGE_KEY);
+    },
+    // Two-header auth: X-API-Key identifies the *app*, Authorization Bearer
+    // identifies the *user*. Both are required by the Laravel API middleware.
+    async login(email, password) {
+      const { data } = await api.post("/auth/login", { email, password });
+      this.setToken(data.token);
+      this.user = data.user;
+      return data.user;
+    },
+    async logout() {
+      try {
+        await api.post("/auth/logout");
+      } finally {
+        this.clearToken();
+      }
+    },
+    async fetchProfile() {
+      const { data } = await api.get("/auth/me");
+      this.user = data;
+      return data;
+    },
+  },
+});

package/templates/default/src/utils/crypto.js

@@ -0,0 +1,30 @@
+import CryptoJS from "crypto-js";
+
+// AES-256-CBC, key/IV pulled from .env (generated fresh per-project by the CLI).
+// Use this for encrypting sensitive values you must keep in localStorage/sessionStorage
+// (e.g. a cached user token) — never for anything you'd rather the backend handle.
+const KEY = CryptoJS.enc.Hex.parse(import.meta.env.VITE_AES_KEY || "");
+const IV = CryptoJS.enc.Hex.parse(import.meta.env.VITE_AES_IV || "");
+
+export function encrypt(plainText) {
+  if (!KEY.words.length || !IV.words.length) {
+    console.warn("[crypto] VITE_AES_KEY / VITE_AES_IV are not set — refusing to encrypt.");
+    return plainText;
+  }
+  const encrypted = CryptoJS.AES.encrypt(plainText, KEY, {
+    iv: IV,
+    mode: CryptoJS.mode.CBC,
+    padding: CryptoJS.pad.Pkcs7,
+  });
+  return encrypted.toString();
+}
+
+export function decrypt(cipherText) {
+  if (!KEY.words.length || !IV.words.length) return cipherText;
+  const decrypted = CryptoJS.AES.decrypt(cipherText, KEY, {
+    iv: IV,
+    mode: CryptoJS.mode.CBC,
+    padding: CryptoJS.pad.Pkcs7,
+  });
+  return decrypted.toString(CryptoJS.enc.Utf8);
+}

package/templates/default/src/views/Home.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { useI18n } from "vue-i18n";
+import { useAuthStore } from "@/stores/auth";
+
+const { t } = useI18n();
+const auth = useAuthStore();
+</script>
+
+<template>
+  <div class="max-w-2xl mx-auto text-center py-16">
+    <h1 class="text-3xl font-bold mb-4">{{ t("home.welcome") }}</h1>
+    <p v-if="auth.userToken" class="text-gray-600">
+      {{ auth.user?.name || auth.userToken.slice(0, 12) + "..." }}
+    </p>
+  </div>
+</template>

package/templates/default/src/views/Login.vue

@@ -0,0 +1,49 @@
+<script setup>
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
+import { useAuthStore } from "@/stores/auth";
+
+const { t } = useI18n();
+const router = useRouter();
+const auth = useAuthStore();
+
+const email = ref("");
+const password = ref("");
+const error = ref("");
+const loading = ref(false);
+
+async function submit() {
+  error.value = "";
+  loading.value = true;
+  try {
+    await auth.login(email.value, password.value);
+    router.push({ name: "home" });
+  } catch (e) {
+    error.value = t("auth.error");
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <form @submit.prevent="submit" class="max-w-sm mx-auto flex flex-col gap-4">
+    <label class="flex flex-col gap-1">
+      <span>{{ t("auth.email") }}</span>
+      <input v-model="email" type="email" required class="border rounded px-3 py-2" />
+    </label>
+    <label class="flex flex-col gap-1">
+      <span>{{ t("auth.password") }}</span>
+      <input v-model="password" type="password" required class="border rounded px-3 py-2" />
+    </label>
+    <p v-if="error" class="text-red-600 text-sm">{{ error }}</p>
+    <button
+      type="submit"
+      :disabled="loading"
+      class="bg-gray-900 text-white rounded px-4 py-2 disabled:opacity-50"
+    >
+      {{ t("auth.submit") }}
+    </button>
+  </form>
+</template>

package/templates/default/tailwind.config.js

@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
+  theme: {
+    extend: {
+      fontFamily: {
+        arabic: ["'IBM Plex Sans Arabic'", "Almarai", "sans-serif"],
+        sans: ["Almarai", "'IBM Plex Sans Arabic'", "sans-serif"],
+      },
+    },
+  },
+  plugins: [],
+};

package/templates/default/vite.config.js

@@ -0,0 +1,18 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "src"),
+    },
+  },
+  server: {
+    port: 5173,
+  },
+});