From 2d41b183231870de266c889f233a3e33c76dfc2a Mon Sep 17 00:00:00 2001
From: Julien Nahum <julien@nahum.net>
Date: Wed, 3 Jan 2024 19:03:45 +0100
Subject: [PATCH] Fixed amplitude bugs, and added staging environment

---
 .../pages/auth/components/RegisterForm.vue    | 117 +++++++++---------
 client/composables/useAmplitude.js            |   6 +-
 client/runtimeConfig.js                       |   1 +
 vapor.yml                                     |  60 +++++----
 4 files changed, 105 insertions(+), 79 deletions(-)

diff --git a/client/components/pages/auth/components/RegisterForm.vue b/client/components/pages/auth/components/RegisterForm.vue
index fbedb70..6020aba 100644
--- a/client/components/pages/auth/components/RegisterForm.vue
+++ b/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,42 +112,41 @@ 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
+      // Log in the user.
+      const tokenData = await this.form.post('/login')
+
+      // Save the token.
+      this.authStore.setToken(tokenData.token)
+
+      const userData = await opnFetch('user')
+      this.authStore.setUser(userData)
+
+      const workspaces = await fetchAllWorkspaces()
+      this.workspaceStore.set(workspaces.data.value)
+
+      // Load forms
+      this.formsStore.loadAll(this.workspaceStore.currentId)
+
+      this.logEvent('register', {source: this.form.hear_about_us})
+
+      // AppSumo License
+      if (data.appsumo_license === false) {
+        useAlert().error('Invalid AppSumo license. This probably happened because this license was already' +
+          ' attached to another OpnForm account. Please contact support.')
+      } else if (data.appsumo_license === true) {
+        useAlert().success('Your AppSumo license was successfully activated! You now have access to all the' +
+          ' features of the AppSumo deal.')
+      }
+
+      // Redirect
+      if (this.isQuick) {
+        this.$emit('afterQuickLogin')
       } else {
-        // Log in the user.
-        const { data: { token } } = await this.form.post('/api/login')
-
-        // Save the token.
-        this.authStore.saveToken(token)
-
-        // Update the user.
-        await this.authStore.updateUser(data)
-
-        // Track event
-
-        logEvent('register', { source: this.form.hear_about_us })
-
-        // AppSumo License
-        if (data.appsumo_license === false) {
-          useAlert().error('Invalid AppSumo license. This probably happened because this license was already' +
-            ' attached to another OpnForm account. Please contact support.')
-        } else if (data.appsumo_license === true) {
-          useAlert().success('Your AppSumo license was successfully activated! You now have access to all the' +
-            ' features of the AppSumo deal.')
-        }
-
-        // Redirect
-        if (this.isQuick) {
-          this.$emit('afterQuickLogin')
-        } else {
-          this.$router.push({ name: 'forms-create' })
-        }
+        this.$router.push({name: 'forms-create'})
       }
     }
   }
diff --git a/client/composables/useAmplitude.js b/client/composables/useAmplitude.js
index 3f3245b..1bb2b05 100644
--- a/client/composables/useAmplitude.js
+++ b/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') {
diff --git a/client/runtimeConfig.js b/client/runtimeConfig.js
index 8284073..bfb4240 100644
--- a/client/runtimeConfig.js
+++ b/client/runtimeConfig.js
@@ -3,6 +3,7 @@ export default {
   public: {
     apiBase: '',
     appUrl: '',
+    env: 'local',
     hCaptchaSiteKey: null,
     googleAnalyticsCode: null,
     amplitudeCode: null,
diff --git a/vapor.yml b/vapor.yml
index e1e9abc..4b3d3ff 100644
--- a/vapor.yml
+++ b/vapor.yml
@@ -1,25 +1,43 @@
 id: 34225
 name: OpnForm
 ignore:
-  - 'storage/clockwork'
-  - 'storage/logs'
+    - storage/clockwork
+    - storage/logs
+    - client
 environments:
-  production:
-    warm: 5
-    memory: 1024
-    cli-memory: 512
-    cli-timeout: 900
-    runtime: 'php-8.2:al2-arm'
-    storage: 'opnforms-prod'
-    database: 'JuPersoDb'
-    domain: 'opnform.com'
-    build:
-      - 'COMPOSER_MIRROR_PATH_REPOS=1 composer install --no-dev'
-      - 'php artisan event:cache'
-      - 'php artisan disposable:update'
-      - 'npm ci && npm run build && rm -rf node_modules'
-    deploy:
-      - 'php artisan migrate --force'
-    firewall:
-      rate-limit: 1000
-    timeout: 30
+    production:
+        warm: 5
+        memory: 1024
+        cli-memory: 512
+        cli-timeout: 900
+        runtime: 'php-8.2:al2-arm'
+        storage: opnforms-prod
+        database: JuPersoDb
+        domain: opnform.com
+        build:
+            - 'COMPOSER_MIRROR_PATH_REPOS=1 composer install --no-dev'
+            - 'php artisan event:cache'
+            - 'php artisan disposable:update'
+            - 'npm ci && npm run build && rm -rf node_modules'
+        deploy:
+            - 'php artisan migrate --force'
+        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