@edgedev/create-edge-app 1.1.25 → 1.1.27

package/README.md

@@ -1,36 +1,71 @@
 # Edge Firebase Starter
-## Setup
 
+Nuxt 3 + Vue 3 (SPA mode) starter with Edge components and Firebase integration.
+
+## Requirements
+- Node.js (LTS recommended)
+- pnpm (recommended) or npm
+
+## Create a new app
 ```bash
-#Run this under current version of node once:
+# Run once under your current Node version:
 npm install -g --ignore-scripts @edgedev/create-edge-app
 
-#Then run this whenever you want to create a new app:
+# Create a new app:
 npx @edgedev/create-edge-app yourappname
+```
+
+## Install and run
+```bash
+# Install dependencies
+pnpm install
+
+# Start dev server
+pnpm dev
+```
 
-#Besides other insturtions for deep links also this:
-Need to add this to Info.plist:
+## Repo structure
+- `edge/` shared Edge framework subtree (do not edit directly unless absolutely required)
+- `pages/` app routes (use `/pages/app/...` for authenticated app pages)
+- `components/` local app components
+- `functions/` Firebase Functions (add new files, do not edit shared config files)
+- `firestore.rules`, `storage.rules` Firebase rules (do not modify here)
 
+## Keeping the Edge subtree in sync
+Use the provided scripts instead of manual edits:
+```bash
+./edge-status.sh
+./edge-pull.sh
+./edge-push.sh
+```
+
+## Deep links (iOS)
+Add URL types to your `Info.plist` when configuring deep links:
+```xml
+<key>CFBundleURLTypes</key>
+<array>
+  <dict>
+    <key>CFBundleURLSchemes</key>
+    <array>
+      <string>com.edgemarketingdesign.offcall</string>
+    </array>
+    <key>CFBundleURLName</key>
+    <string>Offcall App URL</string>
     <key>CFBundleURLTypes</key>
     <array>
-    <dict>
+      <dict>
         <key>CFBundleURLSchemes</key>
         <array>
-        <string>com.edgemarketingdesign.offcall</string>
+          <string>*</string>
         </array>
         <key>CFBundleURLName</key>
-        <string>Offcall App URL</string>
-        <key>CFBundleURLTypes</key>
-        <array>
-        <dict>
-            <key>CFBundleURLSchemes</key>
-            <array>
-            <string>*</string>
-            </array>
-            <key>CFBundleURLName</key>
-            <string>Wildcard</string>
-        </dict>
-        </array>
-    </dict>
+        <string>Wildcard</string>
+      </dict>
     </array>
+  </dict>
+</array>
 ```
+
+## Notes
+- Auth/Firestore/Functions/Storage access should go through the injected `edgeFirebase` plugin, not direct SDK imports.
+- Prefer Edge components (`edge-dashboard`, `edge-editor`, and `edge/components/shad` wrappers) for UI and data flows.

package/{agent.md → agents.md}

@@ -70,8 +70,10 @@ Adjust props (search, filters, pagination, save overrides) using the existing co
 ## Do/Don't
 - Do reuse Edge components (`dashboard`, `editor`, `cms` blocks, auth widgets) before adding new ones.
 - Do keep Firestore paths, queries, and role checks consistent with `edgeGlobal` helpers (`isAdminGlobal`, `getRoleName`, etc.).
+- Do use the `edge-*.sh` scripts (like `edge-pull.sh` and `edge-components-update.sh`) to sync/update the `edge` subtree instead of manual edits.
 - Don’t introduce TypeScript, Options API, raw Firebase SDK calls, or ad-hoc forms/tables when an Edge component exists.
 - Don’t edit code inside the `edge` folder unless absolutely required; it is a shared repo. If a change is unavoidable, keep it generic (no project-specific hacks) and call out the suggestion instead of making the edit when possible.
+- Don’t modify `storage.rules` or `firestore.rules`.
 
 ## Firebase Functions guidance
 - Review `functions/config.js`, `functions/edgeFirebase.js`, and `functions/cms.js` to mirror established patterns, but do not edit those files.

package/bin/cli.js

@@ -67,7 +67,7 @@ const gitCheckoutCommand = `git clone --depth 1 https://github.com/Edge-Marketin
 const removeGitDirCommand = `rm -rf ${repoName}/.git`
 const installDependenciesCommand = `cd ${repoName} && pnpm store prune && pnpm install --force --ignore-scripts=false`
 const installFunctionDependenciesCommand = `cd ${repoName}/functions && npm install`
-const cloneFirebaseFrameworkCommand = `cd ${repoName} && git clone https://github.com/Edge-Marketing-and-Design/edge-vue-components.git edge`
+// const cloneFirebaseFrameworkCommand = `cd ${repoName} && git clone https://github.com/Edge-Marketing-and-Design/edge-vue-components.git edge`
 
 console.log(`Cloning with name ${repoName}...`)
 const checkedOut = runCommand(gitCheckoutCommand)
@@ -105,11 +105,11 @@ if (!installedFunctionDeps) {
   process.exit(1)
 }
 
-console.log(`Cloning Firebase Framework inside ${repoName}...`)
-const clonedFirebaseFramework = runCommand(cloneFirebaseFrameworkCommand)
-if (!clonedFirebaseFramework) {
-  process.exit(1)
-}
+// console.log(`Cloning Firebase Framework inside ${repoName}...`)
+// const clonedFirebaseFramework = runCommand(cloneFirebaseFrameworkCommand)
+// if (!clonedFirebaseFramework) {
+//   process.exit(1)
+// }
 
 console.log(`Successfully created ${repoName}!`)
 console.log(`cd into ${repoName} and run 'sh firebase_init.sh' to initialize your firebase project.`)

package/edge/components/auth/login.vue

@@ -0,0 +1,384 @@
+<script setup>
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+const props = defineProps({
+  providers: {
+    type: Array,
+    default: () => ['email'],
+  },
+  primaryButtonClasses: {
+    type: String,
+    required: false,
+  },
+  secondaryButtonClasses: {
+    type: String,
+    reactive: false,
+  },
+})
+
+const route = useRoute()
+
+const edgeFirebase = inject('edgeFirebase')
+// const edgeGlobal = inject('edgeGlobal')
+
+const state = reactive({
+  form2: false,
+  phone: '',
+  email: '',
+  password: '',
+  passwordVisible: false,
+  passwordShow: false,
+  panel: '',
+  phoneConfirmDialog: false,
+  phoneNumber: null,
+  phoneCode: '',
+  forgotPasswordDialog: false,
+  passwordResetResult: { success: null, message: '' },
+  passwordResetSent: false,
+  passwordResetDialog: false,
+})
+
+const login = reactive({
+  email: '',
+  password: '',
+})
+
+const sendPhoneCode = async () => {
+  state.phoneNumber = await edgeFirebase.sendPhoneCode(`${state.phone}`)
+  if (state.phoneNumber !== false) {
+    state.phoneConfirmDialog = true
+  }
+}
+
+const phoneLogin = async () => {
+  await edgeFirebase.logInWithPhone(state.phoneNumber, state.phoneCode)
+  state.phoneConfirmDialog = false
+}
+
+const submitForgotPassword = async () => {
+  const result = await edgeFirebase.sendPasswordReset(login.email)
+  state.passwordResetResult = result
+  state.passwordResetSent = true
+}
+
+const resetPassword = async () => {
+  let result = null
+  if (route.query.mode === 'resetPassword') {
+    result = await edgeFirebase.passwordReset(login.password, route.query.oobCode)
+  }
+  if (route.query.mode !== 'resetPassword') {
+    result = await edgeFirebase.emailUpdate(route.query.oobCode)
+  }
+  state.passwordResetResult = result
+}
+
+const passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^\w\s]).{8,50}$/
+
+const loginSchema = toTypedSchema(z.object({
+  email: z.string().email().min(6).max(50),
+  password: z.string().superRefine((value, ctx) => {
+    if (value.length < 8 || value.length > 50 || !passwordPattern.test(value)) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Password must be 8–50 characters and include at least one uppercase letter, one lowercase letter, one number, and one special character (e.g., !@#$%^&*).',
+      })
+    }
+  }),
+}))
+
+const emailSchema = toTypedSchema(z.object({
+  email: z.string().email().min(6).max(50),
+}))
+
+const passwordSchema = toTypedSchema(z.object({
+  password: z.string().superRefine((value, ctx) => {
+    if (!passwordPattern.test(value)) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Password must be 8–50 characters and include at least one uppercase letter, one lowercase letter, one number, and one special character (e.g., !@#$%^&*).',
+      })
+    }
+  }),
+}))
+
+const phoneSchema = toTypedSchema(z.object({
+  phone: z.string().min(14, 'Not a valid phone number').max(14),
+}))
+
+const codeSchema = toTypedSchema(z.object({
+  phoneCode: z.string().min(1, 'Not a valid code'),
+}))
+
+const onSubmit = async (values) => {
+  await edgeFirebase.logIn(login)
+}
+
+const onPhoneSubmit = async (values) => {
+  console.log(values)
+  await sendPhoneCode()
+}
+
+onMounted(async () => {
+  state.panel = props.providers[0]
+  if (route.query.oobCode) {
+    await edgeFirebase.logOut()
+    state.passwordResetDialog = true
+  }
+})
+
+const registerPath = computed(() => {
+  const firstPart = route.path.split('/')[1]
+  return `/${firstPart}/signup`
+})
+</script>
+
+<template>
+  <edge-logging-in v-if="edgeFirebase.user.loggingIn !== false || edgeFirebase.user.loggedIn" />
+  <Card v-else>
+    <slot />
+    <CardContent>
+      <Accordion v-if="state.panel" v-model="state.panel" expand-icon="mdi-square-outline" :default-value="state.panel" collapse-icon="mdi-check">
+        <AccordionItem v-for="provider in props.providers" :key="provider" elevation="0" :value="provider">
+          <AccordionTrigger class="font-medium text-lg">
+            <template v-if="provider === 'email'">
+              Sign in with Email
+            </template>
+            <template v-if="provider === 'microsoft'">
+              Sign in with Microsoft
+            </template>
+            <template v-if="provider === 'phone'">
+              Sign in with Phone
+            </template>
+          </AccordionTrigger>
+          <AccordionContent>
+            <template v-if="provider === 'email'">
+              <edge-shad-form :schema="loginSchema" @submit="onSubmit">
+                <div class="grid gap-2 text-center">
+                  <p class="text-balance text-muted-foreground">
+                    Enter your email below to login to your account
+                  </p>
+                </div>
+                <div class="grid gap-4">
+                  <div class="grid gap-2">
+                    <edge-shad-input
+                      v-model="login.email"
+                      name="email"
+                      type="email"
+                      label="Email"
+                      placeholder="m@example.com"
+                    />
+                  </div>
+                  <div class="grid gap-2">
+                    <edge-shad-input
+                      v-model="login.password"
+                      name="password"
+                      type="password"
+                      label="Password"
+                    >
+                      <a
+                        class="text-sm underline cursor-pointer"
+                        @click="state.forgotPasswordDialog = true"
+                      >
+                        Forgot your password?
+                      </a>
+                    </edge-shad-input>
+                  </div>
+                  <edge-shad-button type="submit" :class="props.primaryButtonClasses">
+                    Login
+                  </edge-shad-button>
+                </div>
+              </edge-shad-form>
+            </template>
+            <template v-if="provider === 'phone'">
+              <edge-shad-form :schema="phoneSchema" @submit="onPhoneSubmit">
+                <edge-shad-input
+                  v-model="state.phone"
+                  name="phone"
+                  type="tel"
+                  label="Phone Number"
+                  placeholder="(555) 555-5555"
+                  :mask-options="{ mask: '(###) ###-####' }"
+                  class="mb-4"
+                />
+                <edge-shad-button type="submit" :class="props.primaryButtonClasses">
+                  Login
+                </edge-shad-button>
+              </edge-shad-form>
+            </template>
+            <template v-if="provider === 'microsoft'">
+              <edge-shad-button :class="props.primaryButtonClasses" class="w-full" @click="edgeFirebase.logInWithMicrosoft()">
+                Sign in with Microsoft
+              </edge-shad-button>
+            </template>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+      <edge-g-error v-if="edgeFirebase.user.logInError" :error="edgeFirebase.user.logInErrorMessage" />
+      <Separator
+        class="my-4 dark:bg-slate-600"
+      />
+      Don't have an account?
+      <edge-shad-button class="bg-secondary text-secondary-foreground" :class="props.secondaryButtonClasses" :to="registerPath">
+        Sign up here.
+      </edge-shad-button>
+      <edge-shad-dialog
+        v-model="state.passwordResetDialog"
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              <span v-if="route.query.mode === 'resetPassword'">
+                Reset Password
+
+              </span>
+              <span v-else>
+                Update Email Address
+              </span>
+            </DialogTitle>
+            <DialogDescription class="text-left mb-2">
+              <span v-if="route.query.mode === 'resetPassword'" class="mb-2">
+                Enter your new password below and click "Reset Password".
+              </span>
+              <template v-else>
+                <p class="mb-2">
+                  To update your email address, click "Update Email Address".
+                </p>
+                <p class="mb-2">
+                  This will change your email address to the address that received the email with the link you clicked on to get here.
+                </p>
+              </template>
+            </DialogDescription>
+          </DialogHeader>
+          <edge-shad-form
+            :schema="passwordSchema"
+            @submit="resetPassword"
+          >
+            <edge-shad-input
+              v-if="route.query.mode === 'resetPassword'"
+              v-model="login.password"
+              name="password"
+              type="password"
+              label="Password"
+            />
+            <edge-g-error v-if="state.passwordResetResult.success === false" :error="state.passwordResetResult.message" />
+            <Alert v-if="state.passwordResetResult.success === true" class="mt-2 bg-green-800">
+              <AlertDescription>
+                <span v-if="route.query.mode === 'resetPassword'">
+                  Your password has been reset. Close this dialog and log in with your new password.
+                </span>
+                <span v-else>
+                  Your email address has been updated. Close this dialog and log in with your updated address.
+                </span>
+              </AlertDescription>
+            </Alert>
+            <DialogFooter v-if="route.query.mode === 'resetPassword'" class="flex justify-between pt-6">
+              <edge-shad-button v-if="state.passwordResetResult.success === true" variant="destructive" @click="state.passwordResetDialog = false">
+                Close
+              </edge-shad-button>
+              <edge-shad-button v-else variant="destructive" @click="state.passwordResetDialog = false">
+                Cancel
+              </edge-shad-button>
+              <edge-shad-button v-if="state.passwordResetResult.success !== true" :class="props.primaryButtonClasses" type="submit">
+                Reset Password
+              </edge-shad-button>
+            </DialogFooter>
+          </edge-shad-form>
+          <edge-shad-form
+            v-if="route.query.mode !== 'resetPassword'"
+            @submit="resetPassword"
+          >
+            <DialogFooter class="pt-6 flex justify-between">
+              <edge-shad-button v-if="state.passwordResetResult.success === true" variant="destructive" @click="state.passwordResetDialog = false">
+                Close
+              </edge-shad-button>
+              <edge-shad-button v-else variant="destructive" @click="state.passwordResetDialog = false">
+                Cancel
+              </edge-shad-button>
+              <edge-shad-button v-if="state.passwordResetResult.success !== true" :class="props.primaryButtonClasses" type="submit">
+                Update Email Address
+              </edge-shad-button>
+            </DialogFooter>
+          </edge-shad-form>
+        </DialogContent>
+      </edge-shad-dialog>
+
+      <edge-shad-dialog
+        v-model="state.forgotPasswordDialog"
+      >
+        <DialogContent>
+          <edge-shad-form
+            :schema="emailSchema"
+            @submit="submitForgotPassword"
+          >
+            <DialogHeader>
+              <DialogTitle>Password Reset</DialogTitle>
+              <DialogDescription class="text-left mb-2">
+                If you forgot your password, please enter your email address below and click "Send Password Reset".
+              </DialogDescription>
+            </DialogHeader>
+            <edge-shad-input
+              v-model="login.email"
+              init-valu
+              name="email"
+              type="email"
+              label="Email"
+              placeholder="m@example.com"
+              class="mb-4"
+            />
+            <Alert v-if="state.passwordResetSent" class="my-2 bg-green-800">
+              <AlertDescription>
+                If you entered the correct email address, a password reset email has been sent to your email address. Please check your email and click the link to reset your password.
+              </AlertDescription>
+            </Alert>
+            <DialogFooter class="pt-0 flex justify-between">
+              <edge-shad-button v-if="state.passwordResetSent === true" variant="destructive" @click="state.forgotPasswordDialog = false; state.passwordResetSent = false;">
+                Close
+              </edge-shad-button>
+              <edge-shad-button v-else variant="destructive" @click="state.forgotPasswordDialog = false; state.passwordResetSent = false;">
+                Cancel
+              </edge-shad-button>
+              <edge-shad-button v-if="state.passwordResetSent === false" :class="props.primaryButtonClasses" type="submit">
+                Send Password Reset
+              </edge-shad-button>
+            </DialogFooter>
+          </edge-shad-form>
+        </DialogContent>
+      </edge-shad-dialog>
+      <edge-shad-dialog
+        v-model="state.phoneConfirmDialog"
+      >
+        <DialogContent>
+          <edge-shad-form
+            :schema="codeSchema"
+            @submit="phoneLogin"
+          >
+            <DialogHeader>
+              <DialogTitle>Enter Confirmation Code</DialogTitle>
+              <DialogDescription class="text-left mb-2">
+                Please enter the confirmation code that you received via text message. This code is used to verify your phone number. If you did not receive a text message, please confirm that your phone number is correct and request a new code.
+              </DialogDescription>
+            </DialogHeader>
+            <edge-shad-input
+              v-model="state.phoneCode"
+              name="phoneCode"
+              type="text"
+              label="Confirmation Code"
+            />
+
+            <DialogFooter class="pt-6 flex justify-between">
+              <edge-shad-button variant="destructive" @click="state.phoneConfirmDialog = false">
+                Cancel
+              </edge-shad-button>
+              <edge-shad-button :class="props.primaryButtonClasses" type="submit">
+                Submit
+              </edge-shad-button>
+            </DialogFooter>
+          </edge-shad-form>
+        </DialogContent>
+      </edge-shad-dialog>
+    </CardContent>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+</style>