Fixed amplitude bugs, and added staging environment

client/components/pages/auth/components/RegisterForm.vue

@@ -2,10 +2,10 @@
   <div>
     <form class="mt-4" @submit.prevent="register" @keydown="form.onKeydown($event)">
       <!-- Name -->
-      <text-input name="name" :form="form" label="Name" placeholder="Your name" :required="true" />
+      <text-input name="name" :form="form" label="Name" placeholder="Your name" :required="true"/>
 
       <!-- Email -->
-      <text-input name="email" :form="form" label="Email" :required="true" placeholder="Your email address" />
+      <text-input name="email" :form="form" label="Email" :required="true" placeholder="Your email address"/>
 
       <select-input name="hear_about_us" :options="hearAboutUsOptions" :form="form" placeholder="Select option"
                     label="How did you hear about us?" :required="true"
@@ -23,11 +23,15 @@
 
       <checkbox-input :form="form" name="agree_terms" :required="true">
         <template #label>
-          I agree with the <NuxtLink :to="{name:'terms-conditions'}" target="_blank">
+          I agree with the
+          <NuxtLink :to="{name:'terms-conditions'}" target="_blank">
             Terms and conditions
-          </NuxtLink> and <NuxtLink :to="{name:'privacy-policy'}" target="_blank">
+          </NuxtLink>
+          and
+          <NuxtLink :to="{name:'privacy-policy'}" target="_blank">
             Privacy policy
-          </NuxtLink> of the website and I accept them.
+          </NuxtLink>
+          of the website and I accept them.
         </template>
       </checkbox-input>
 
@@ -48,6 +52,9 @@
 </template>
 
 <script>
+import {opnFetch} from "~/composables/useOpnApi.js";
+import {fetchAllWorkspaces} from "~/stores/workspaces.js";
+
 export default {
   name: 'RegisterForm',
   components: {},
@@ -59,12 +66,12 @@ export default {
     }
   },
 
-  setup () {
-    const authStore = useAuthStore()
-    const amplitude = useAmplitude()
+  setup() {
     return {
-      authStore,
-      logEvent: amplitude.logEvent
+      authStore: useAuthStore(),
+      formsStore: useFormsStore(),
+      workspaceStore: useWorkspacesStore(),
+      logEvent: useAmplitude().logEvent
     }
   },
 
@@ -77,28 +84,27 @@ export default {
       agree_terms: false,
       appsumo_license: null
     }),
-    mustVerifyEmail: false
   }),
 
   computed: {
-    hearAboutUsOptions () {
+    hearAboutUsOptions() {
       const options = [
-        { name: 'Facebook', value: 'facebook' },
-        { name: 'Twitter', value: 'twitter' },
-        { name: 'Reddit', value: 'reddit' },
-        { name: 'Github', value: 'github' },
-        { name: 'Search Engine (Google, DuckDuckGo...)', value: 'search_engine' },
-        { name: 'Friend or Colleague', value: 'friend_colleague' },
-        { name: 'Blog/Article', value: 'blog_article' }
-      ].map((value) => ({ value, sort: Math.random() }))
+        {name: 'Facebook', value: 'facebook'},
+        {name: 'Twitter', value: 'twitter'},
+        {name: 'Reddit', value: 'reddit'},
+        {name: 'Github', value: 'github'},
+        {name: 'Search Engine (Google, DuckDuckGo...)', value: 'search_engine'},
+        {name: 'Friend or Colleague', value: 'friend_colleague'},
+        {name: 'Blog/Article', value: 'blog_article'}
+      ].map((value) => ({value, sort: Math.random()}))
         .sort((a, b) => a.sort - b.sort)
-        .map(({ value }) => value)
-      options.push({ name: 'Other', value: 'other' })
+        .map(({value}) => value)
+      options.push({name: 'Other', value: 'other'})
       return options
     }
   },
 
-  mounted () {
+  mounted() {
     // Set appsumo license
     if (this.$route.query.appsumo_license !== undefined && this.$route.query.appsumo_license) {
       this.form.appsumo_license = this.$route.query.appsumo_license
@@ -106,26 +112,26 @@ export default {
   },
 
   methods: {
-    async register () {
+    async register() {
       // Register the user.
-      const { data } = await this.form.post('/api/register')
+      const data = await this.form.post('/register')
 
-      // Must verify email fist.
-      if (data.status) {
-        this.mustVerifyEmail = true
-      } else {
       // Log in the user.
-        const { data: { token } } = await this.form.post('/api/login')
+      const tokenData = await this.form.post('/login')
 
       // Save the token.
-        this.authStore.saveToken(token)
+      this.authStore.setToken(tokenData.token)
 
-        // Update the user.
-        await this.authStore.updateUser(data)
+      const userData = await opnFetch('user')
+      this.authStore.setUser(userData)
 
-        // Track event
+      const workspaces = await fetchAllWorkspaces()
+      this.workspaceStore.set(workspaces.data.value)
 
-        logEvent('register', { source: this.form.hear_about_us })
+      // Load forms
+      this.formsStore.loadAll(this.workspaceStore.currentId)
+
+      this.logEvent('register', {source: this.form.hear_about_us})
 
       // AppSumo License
       if (data.appsumo_license === false) {
@@ -140,8 +146,7 @@ export default {
       if (this.isQuick) {
         this.$emit('afterQuickLogin')
       } else {
-          this.$router.push({ name: 'forms-create' })
-        }
+        this.$router.push({name: 'forms-create'})
       }
     }
   }

client/composables/useAmplitude.js

@@ -1,15 +1,17 @@
 import amplitude from 'amplitude-js'
 
 export const useAmplitude = () => {
-  const amplitudeCode = useRuntimeConfig().public.amplitudeCode
+  const config = useRuntimeConfig()
+  const amplitudeCode = config.public.amplitudeCode
   const amplitudeClient = amplitudeCode ? amplitude.getInstance() : null;
   if (amplitudeClient) {
     amplitudeClient.init(amplitudeCode)
   }
 
   const logEvent = function (eventName, eventData) {
-    if (!config.production || !amplitudeClient) {
+    if (!config.public.env === 'production' || !amplitudeClient) {
       console.log('[DEBUG] Amplitude logged event:', eventName, eventData)
+      return
     }
 
     if (eventData && typeof eventData !== 'object') {

client/runtimeConfig.js

@@ -3,6 +3,7 @@ export default {
   public: {
     apiBase: '',
     appUrl: '',
+    env: 'local',
     hCaptchaSiteKey: null,
     googleAnalyticsCode: null,
     amplitudeCode: null,

vapor.yml

@@ -1,8 +1,9 @@
 id: 34225
 name: OpnForm
 ignore:
-  - 'storage/clockwork'
-  - 'storage/logs'
+    - storage/clockwork
+    - storage/logs
+    - client
 environments:
     production:
         warm: 5
@@ -10,9 +11,9 @@ environments:
         cli-memory: 512
         cli-timeout: 900
         runtime: 'php-8.2:al2-arm'
-    storage: 'opnforms-prod'
-    database: 'JuPersoDb'
-    domain: 'opnform.com'
+        storage: opnforms-prod
+        database: JuPersoDb
+        domain: opnform.com
         build:
             - 'COMPOSER_MIRROR_PATH_REPOS=1 composer install --no-dev'
             - 'php artisan event:cache'
@@ -23,3 +24,20 @@ environments:
         firewall:
             rate-limit: 1000
         timeout: 30
+    staging:
+      memory: 1024
+      cli-memory: 512
+      cli-timeout: 900
+      runtime: 'php-8.2:al2-arm'
+      storage: opnforms-staging
+      database: JuPersoDb
+      domain: stg.opnform.com
+      build:
+        - 'COMPOSER_MIRROR_PATH_REPOS=1 composer install --no-dev'
+        - 'php artisan event:cache'
+        - 'php artisan disposable:update'
+      deploy:
+        - 'php artisan migrate --force'
+      firewall:
+        rate-limit: 1000
+      timeout: 30