@ma7moudsalama/falak-app 1.0.0

package/template/src/views/ProfileView.vue

@@ -0,0 +1,134 @@
+<template>
+  <AppLayout>
+    <div class="max-w-2xl mx-auto space-y-6">
+      <h2 class="text-xl font-bold text-gray-900 dark:text-white">{{ $t('user.profile') }}</h2>
+
+      <!-- Profile card -->
+      <div class="card space-y-6">
+        <!-- Avatar -->
+        <div class="flex items-center gap-4">
+          <Avatar
+            :image="currentUser?.photoURL || undefined"
+            :label="!currentUser?.photoURL ? initials : undefined"
+            shape="circle"
+            size="xlarge"
+            class="shrink-0"
+          />
+          <div>
+            <p class="font-semibold text-gray-900 dark:text-white">{{ currentUser?.displayName || '—' }}</p>
+            <p class="text-sm text-gray-500">{{ currentUser?.email }}</p>
+            <span class="badge-info badge mt-1">{{ $t(`user.roles.${userRole}`) }}</span>
+          </div>
+        </div>
+
+        <!-- Edit form -->
+        <form @submit.prevent="saveProfile" class="space-y-4">
+          <div>
+            <label class="label">{{ $t('auth.displayName') }}</label>
+            <InputText v-model="form.displayName" class="w-full" />
+          </div>
+          <div>
+            <label class="label">{{ $t('auth.email') }}</label>
+            <InputText :value="currentUser?.email" disabled class="w-full opacity-60" />
+          </div>
+          <div class="flex justify-end">
+            <Button type="submit" :label="$t('common.save')" :loading="isLoading" />
+          </div>
+        </form>
+      </div>
+
+      <!-- Change password card -->
+      <div class="card space-y-4">
+        <h3 class="font-semibold text-gray-900 dark:text-white">{{ $t('user.changePassword') }}</h3>
+
+        <Message v-if="pwError" severity="error" :closable="false">{{ pwError }}</Message>
+        <Message v-if="pwSuccess" severity="success" :closable="false">Password updated!</Message>
+
+        <form @submit.prevent="savePassword" class="space-y-4">
+          <div>
+            <label class="label">Current Password</label>
+            <Password v-model="pw.current" :feedback="false" toggleMask class="w-full" inputClass="w-full" />
+          </div>
+          <div>
+            <label class="label">New Password</label>
+            <Password v-model="pw.next" toggleMask class="w-full" inputClass="w-full" />
+          </div>
+          <div class="flex justify-end">
+            <Button type="submit" :label="$t('common.save')" :loading="isLoading" severity="secondary" />
+          </div>
+        </form>
+      </div>
+
+      <!-- Danger zone -->
+      <div class="card border-red-200 dark:border-red-900 space-y-3">
+        <h3 class="font-semibold text-red-600">Danger Zone</h3>
+        <p class="text-sm text-gray-500">{{ $t('user.deleteAccountConfirm') }}</p>
+        <Button
+          :label="$t('user.deleteAccount')"
+          severity="danger"
+          outlined
+          @click="confirmDelete"
+        />
+      </div>
+    </div>
+  </AppLayout>
+</template>
+
+<script setup>
+import { reactive, ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useToast } from 'primevue/usetoast'
+import { useConfirm } from 'primevue/useconfirm'
+import InputText from 'primevue/inputtext'
+import Password from 'primevue/password'
+import Button from 'primevue/button'
+import Avatar from 'primevue/avatar'
+import Message from 'primevue/message'
+import AppLayout from '@/components/layout/AppLayout.vue'
+import { useAuth } from '@/composables/useAuth.js'
+
+const { t }       = useI18n()
+const router      = useRouter()
+const toast       = useToast()
+const confirm     = useConfirm()
+const { currentUser, userRole, isLoading, updateUserProfile, changePassword, deleteAccount } = useAuth()
+
+const form     = reactive({ displayName: currentUser.value?.displayName || '' })
+const pw       = reactive({ current: '', next: '' })
+const pwError   = ref('')
+const pwSuccess = ref(false)
+
+const initials = computed(() => {
+  const n = currentUser.value?.displayName || currentUser.value?.email || '?'
+  return n.slice(0, 2).toUpperCase()
+})
+
+async function saveProfile() {
+  const result = await updateUserProfile({ displayName: form.displayName })
+  if (result.success) toast.add({ severity: 'success', summary: t('common.success'), life: 2000 })
+}
+
+async function savePassword() {
+  pwError.value   = ''
+  pwSuccess.value = false
+  const result = await changePassword({ currentPassword: pw.current, newPassword: pw.next })
+  if (result.success) { pwSuccess.value = true; pw.current = ''; pw.next = '' }
+  else pwError.value = result.error
+}
+
+function confirmDelete() {
+  confirm.require({
+    message: t('user.deleteAccountConfirm'),
+    header:  t('user.deleteAccount'),
+    icon:    'pi pi-exclamation-triangle',
+    rejectLabel: t('common.cancel'),
+    acceptLabel: t('common.delete'),
+    acceptClass: 'p-button-danger',
+    accept: async () => {
+      await deleteAccount()
+      router.push('/')
+    }
+  })
+}
+</script>

package/template/src/views/auth/ForgotView.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="min-h-screen bg-gradient-to-br from-primary-50 to-blue-100 dark:from-gray-950 dark:to-gray-900
+              flex items-center justify-center p-4">
+    <div class="w-full max-w-md">
+      <div class="card">
+        <div class="text-center mb-8">
+          <div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-primary-600 mb-4">
+            <i class="pi pi-lock-open text-white text-2xl" />
+          </div>
+          <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ $t('auth.resetPassword') }}</h1>
+          <p class="text-sm text-gray-500 mt-1">{{ $t('auth.resetPasswordDesc') }}</p>
+        </div>
+
+        <Message v-if="sent" severity="success" :closable="false" class="mb-4">
+          ✅ Reset link sent! Check your inbox.
+        </Message>
+        <Message v-if="authError" severity="error" :closable="false" class="mb-4">
+          {{ authError }}
+        </Message>
+
+        <form v-if="!sent" @submit.prevent="handleReset" class="space-y-4">
+          <div>
+            <label class="label">{{ $t('auth.email') }}</label>
+            <InputText v-model="email" type="email" class="w-full" :placeholder="$t('auth.email')" />
+          </div>
+          <Button type="submit" :label="$t('auth.resetPassword')" :loading="isLoading" class="w-full" />
+        </form>
+
+        <RouterLink to="/login" class="flex items-center justify-center gap-2 text-sm text-primary-600
+                                       hover:underline mt-6">
+          <i class="pi pi-arrow-left text-xs" />
+          {{ $t('auth.backToLogin') }}
+        </RouterLink>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import InputText from 'primevue/inputtext'
+import Button from 'primevue/button'
+import Message from 'primevue/message'
+import { useAuth } from '@/composables/useAuth.js'
+
+const { t }                            = useI18n()
+const { resetPassword, authError, isLoading } = useAuth()
+const email = ref('')
+const sent  = ref(false)
+
+async function handleReset() {
+  if (!email.value) return
+  const result = await resetPassword(email.value)
+  if (result.success) sent.value = true
+}
+</script>

package/template/src/views/auth/LoginView.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="min-h-screen bg-gradient-to-br from-primary-50 to-blue-100 dark:from-gray-950 dark:to-gray-900
+              flex items-center justify-center p-4">
+    <div class="w-full max-w-md">
+      <!-- Card -->
+      <div class="card">
+        <!-- Header -->
+        <div class="text-center mb-8">
+          <div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-primary-600 mb-4">
+            <span class="text-white font-bold text-2xl">F</span>
+          </div>
+          <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ $t('nav.login') }}</h1>
+          <p class="text-sm text-gray-500 mt-1">{{ $t('app.tagline') }}</p>
+        </div>
+
+        <!-- Error alert -->
+        <Message v-if="authError" severity="error" :closable="false" class="mb-4">
+          {{ authError }}
+        </Message>
+
+        <!-- Email/Password Form -->
+        <form @submit.prevent="handleLogin" class="space-y-4">
+          <div>
+            <label class="label">{{ $t('auth.email') }}</label>
+            <InputText
+              v-model="form.email"
+              type="email"
+              :placeholder="$t('auth.email')"
+              class="w-full"
+              :invalid="!!errors.email"
+              autocomplete="email"
+            />
+            <small v-if="errors.email" class="text-red-500 text-xs mt-1">{{ errors.email }}</small>
+          </div>
+
+          <div>
+            <div class="flex items-center justify-between mb-1">
+              <label class="label !mb-0">{{ $t('auth.password') }}</label>
+              <RouterLink to="/forgot-password" class="text-xs text-primary-600 hover:underline">
+                {{ $t('auth.forgotPassword') }}
+              </RouterLink>
+            </div>
+            <Password
+              v-model="form.password"
+              :placeholder="$t('auth.password')"
+              :feedback="false"
+              toggleMask
+              class="w-full"
+              inputClass="w-full"
+              :invalid="!!errors.password"
+              autocomplete="current-password"
+            />
+            <small v-if="errors.password" class="text-red-500 text-xs mt-1">{{ errors.password }}</small>
+          </div>
+
+          <div class="flex items-center gap-2">
+            <Checkbox v-model="form.remember" inputId="remember" binary />
+            <label for="remember" class="text-sm text-gray-600 dark:text-gray-400 cursor-pointer">
+              {{ $t('auth.rememberMe') }}
+            </label>
+          </div>
+
+          <Button
+            type="submit"
+            :label="$t('nav.login')"
+            :loading="isLoading"
+            class="w-full"
+          />
+        </form>
+
+        <!-- Divider -->
+        <div class="flex items-center gap-3 my-6">
+          <div class="flex-1 border-t" />
+          <span class="text-xs text-gray-400">{{ $t('auth.orContinueWith') }}</span>
+          <div class="flex-1 border-t" />
+        </div>
+
+        <!-- OAuth Buttons -->
+        <div class="grid grid-cols-2 gap-3">
+          <Button
+            @click="handleGoogle"
+            :loading="isLoading"
+            outlined
+            class="w-full"
+          >
+            <template #icon>
+              <svg class="w-4 h-4" viewBox="0 0 24 24">
+                <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+                <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+                <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+                <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+              </svg>
+            </template>
+            Google
+          </Button>
+
+          <Button
+            @click="handleFacebook"
+            :loading="isLoading"
+            outlined
+            class="w-full"
+          >
+            <template #icon>
+              <svg class="w-4 h-4" fill="#1877F2" viewBox="0 0 24 24">
+                <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
+              </svg>
+            </template>
+            Facebook
+          </Button>
+        </div>
+
+        <!-- Register link -->
+        <p class="text-center text-sm text-gray-600 dark:text-gray-400 mt-6">
+          {{ $t('auth.noAccount') }}
+          <RouterLink to="/register" class="text-primary-600 font-medium hover:underline ms-1">
+            {{ $t('nav.register') }}
+          </RouterLink>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useToast } from 'primevue/usetoast'
+import InputText from 'primevue/inputtext'
+import Password from 'primevue/password'
+import Button from 'primevue/button'
+import Checkbox from 'primevue/checkbox'
+import Message from 'primevue/message'
+import { useAuth } from '@/composables/useAuth.js'
+
+const { t }               = useI18n()
+const router              = useRouter()
+const route               = useRoute()
+const toast               = useToast()
+const { login, loginWithGoogle, loginWithFacebook, authError, isLoading } = useAuth()
+
+const form = reactive({ email: '', password: '', remember: false })
+const errors = reactive({ email: '', password: '' })
+
+function validate() {
+  errors.email    = !form.email    ? t('common.required') : ''
+  errors.password = !form.password ? t('common.required') : ''
+  return !errors.email && !errors.password
+}
+
+async function handleLogin() {
+  if (!validate()) return
+  const result = await login({ email: form.email, password: form.password })
+  if (result.success) {
+    toast.add({ severity: 'success', summary: t('auth.loginSuccess'), life: 2000 })
+    router.push(route.query.redirect || '/dashboard')
+  }
+}
+
+async function handleGoogle() {
+  const result = await loginWithGoogle()
+  if (result.success) router.push(route.query.redirect || '/dashboard')
+}
+
+async function handleFacebook() {
+  const result = await loginWithFacebook()
+  if (result.success) router.push(route.query.redirect || '/dashboard')
+}
+</script>

package/template/src/views/auth/RegisterView.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="min-h-screen bg-gradient-to-br from-primary-50 to-blue-100 dark:from-gray-950 dark:to-gray-900
+              flex items-center justify-center p-4">
+    <div class="w-full max-w-md">
+      <div class="card">
+        <!-- Header -->
+        <div class="text-center mb-8">
+          <div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-primary-600 mb-4">
+            <span class="text-white font-bold text-2xl">F</span>
+          </div>
+          <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ $t('nav.register') }}</h1>
+        </div>
+
+        <Message v-if="authError" severity="error" :closable="false" class="mb-4">
+          {{ authError }}
+        </Message>
+
+        <form @submit.prevent="handleRegister" class="space-y-4">
+          <div>
+            <label class="label">{{ $t('auth.displayName') }}</label>
+            <InputText v-model="form.displayName" type="text" class="w-full"
+                       :placeholder="$t('auth.displayName')" :invalid="!!errors.displayName" />
+            <small v-if="errors.displayName" class="text-red-500 text-xs">{{ errors.displayName }}</small>
+          </div>
+
+          <div>
+            <label class="label">{{ $t('auth.email') }}</label>
+            <InputText v-model="form.email" type="email" class="w-full"
+                       :placeholder="$t('auth.email')" :invalid="!!errors.email" />
+            <small v-if="errors.email" class="text-red-500 text-xs">{{ errors.email }}</small>
+          </div>
+
+          <div>
+            <label class="label">{{ $t('auth.password') }}</label>
+            <Password v-model="form.password" toggleMask class="w-full" inputClass="w-full"
+                      :placeholder="$t('auth.password')" :invalid="!!errors.password" />
+            <small v-if="errors.password" class="text-red-500 text-xs">{{ errors.password }}</small>
+          </div>
+
+          <div>
+            <label class="label">{{ $t('auth.confirmPassword') }}</label>
+            <Password v-model="form.confirm" :feedback="false" toggleMask class="w-full" inputClass="w-full"
+                      :placeholder="$t('auth.confirmPassword')" :invalid="!!errors.confirm" />
+            <small v-if="errors.confirm" class="text-red-500 text-xs">{{ errors.confirm }}</small>
+          </div>
+
+          <Button type="submit" :label="$t('nav.register')" :loading="isLoading" class="w-full" />
+        </form>
+
+        <p class="text-center text-sm text-gray-600 dark:text-gray-400 mt-6">
+          {{ $t('auth.hasAccount') }}
+          <RouterLink to="/login" class="text-primary-600 font-medium hover:underline ms-1">
+            {{ $t('nav.login') }}
+          </RouterLink>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useToast } from 'primevue/usetoast'
+import InputText from 'primevue/inputtext'
+import Password from 'primevue/password'
+import Button from 'primevue/button'
+import Message from 'primevue/message'
+import { useAuth } from '@/composables/useAuth.js'
+import { useSubscription } from '@/composables/usePaymob.js'
+
+const { t }                          = useI18n()
+const router                         = useRouter()
+const toast                          = useToast()
+const { register, authError, isLoading } = useAuth()
+const { initFreeplan }               = useSubscription()
+
+const form   = reactive({ displayName: '', email: '', password: '', confirm: '' })
+const errors = reactive({ displayName: '', email: '', password: '', confirm: '' })
+
+function validate() {
+  errors.displayName = !form.displayName ? t('common.required') : ''
+  errors.email       = !form.email       ? t('common.required') : ''
+  errors.password    = form.password.length < 8 ? t('auth.weakPassword') : ''
+  errors.confirm     = form.password !== form.confirm ? t('auth.passwordMismatch') : ''
+  return !Object.values(errors).some(Boolean)
+}
+
+async function handleRegister() {
+  if (!validate()) return
+  const result = await register({
+    email:       form.email,
+    password:    form.password,
+    displayName: form.displayName
+  })
+  if (result.success) {
+    await initFreeplan(result.user.uid)
+    toast.add({ severity: 'success', summary: t('auth.registerSuccess'), life: 4000 })
+    router.push('/dashboard')
+  }
+}
+</script>

package/template/tailwind.config.js

@@ -0,0 +1,41 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    './index.html',
+    './src/**/*.{vue,js,ts,jsx,tsx}',
+    './node_modules/primevue/**/*.{vue,js,ts}'
+  ],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50:  '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          800: '#1e40af',
+          900: '#1e3a8a',
+          950: '#172554'
+        }
+      },
+      fontFamily: {
+        sans: ['Inter', 'ui-sans-serif', 'system-ui'],
+        arabic: ['Cairo', 'ui-sans-serif', 'system-ui']
+      }
+    }
+  },
+  plugins: [
+    // Uncomment if needed:
+    // require('@tailwindcss/forms'),
+    // require('@tailwindcss/typography'),
+  ],
+  // Prevent Tailwind from conflicting with PrimeVue
+  corePlugins: {
+    preflight: true
+  }
+}

package/template/vite.config.js

@@ -0,0 +1,29 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src')
+    }
+  },
+  server: {
+    port: 5173,
+    host: true
+  },
+  build: {
+    outDir: 'dist',
+    sourcemap: false,
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          'firebase': ['firebase/app', 'firebase/auth', 'firebase/database'],
+          'primevue': ['primevue'],
+          'vendor': ['vue', 'vue-router', 'pinia', 'vue-i18n']
+        }
+      }
+    }
+  }
+})