Migrate front-end to Nuxt app (#284)

* wip * Managed to load a page * Stuck at changing routes * Fixed the router, and editable div * WIP * Fix app loader * WIP * Fix check-auth middleware * Started to refactor input components * WIP * Added select input, v-click-outside for vselect * update vselect & phone input * Fixed the mixin * input component updates * Fix signature input import * input component updates in vue3 * image input in vue3 * small fixes * fix useFormInput watcher * scale input in vue3 * Vue3: migrating from vuex to Pinia (#249) * Vue3: migrating from vuex to Pinia * toggle input fixes * update configureCompat --------- Co-authored-by: Forms Dev <chirag+new@notionforms.io> * support vue3 query builder * Refactor inpus * fix: Vue3 Query Builder - Logic Editor (#251) * support vue3 query builder * upgrade * remove local from middleware * Submission table pagination & migrate chart to vue3 (#254) * Submission table Pagination in background * migrate chart to vue3 * Form submissions pagination * Form submissions * Fix form starts * Fix openSelect key issue --------- Co-authored-by: Forms Dev <chirag+new@notionforms.io> Co-authored-by: Julien Nahum <julien@nahum.net> * Vue 3 better animation (#257) * vue-3-better-animation * Working on migration to vueuse/motion * Form sidebar animations * Clean code * Added animations for modal * Finished implementing better animations --------- Co-authored-by: Forms Dev <chirag+new@notionforms.io> * Work in progress * Migrating amplitude and crisp plugin/composable * Started to refactor pages * WIP * vue3-scroll-shadow-fixes (#260) * WIP * WIP * WIP * Figured out auth & middlewares * WI * Refactoring stores and templates pages to comp. api * Finishing the templates pages * fix collapsible * Finish reworking most templates pages * Reworked workspaces store * Working on home page and modal * Fix dropdown * Fix modal * Fixed form creation * Fixed most of the form/show pages * Updated cors dependency * fix custom domain warning * NuxtLink migration (#262) Co-authored-by: Forms Dev <chirag+new@notionforms.io> * Tiny fixes + start pre-rendering * migrate-to-nuxt-useappconfig (#263) * migrate-to-nuxt-useappconfig * defineAppConfig --------- Co-authored-by: Forms Dev <chirag+new@notionforms.io> * Working on form/show and editor * Globally import form inputs to fix resolve * Remove vform - working on form public page * Remove initform mixin * Work in progress for form create guess user * Nuxt Migration notifications (#265) * Nuxt Migration notifications * @input to @update:model-value * change field type fixes * @update:model-value * Enable form-block-logic-editor * vue-confetti migration * PR request changes * useAlert in setup * Migrate to nuxt settings page AND remove axios (#266) * Settings pages migration * remove axios and use opnFetch * Make created form reactive (#267) * Remove verify pages and axios lib --------- Co-authored-by: Julien Nahum <julien@nahum.net> * Fix alert styling + bug fixes and cleaning * Refactor notifications + add shadow * Fix vselect issue * Working on page pre-rendering * Created NotionPages store * Added sitemap on nuxt side * Sitemap done, working on aws amplify * Adding missing module * Remove axios and commit backend changes to sitemap * Fix notifications * fix guestpage editor (#269) Co-authored-by: Julien Nahum <julien@nahum.net> * Remove appconfig in favor of runtimeconfig * Fixed amplitude bugs, and added staging environment * Added amplify file * Change basdirectory amplify * Fix loading bar position * Fix custom redirect (#273) * Dirty form handling - nuxt migration (#272) * SEO meta nuxt migration (#274) * SEO meta nuxt migration * Polish seo metas, add defaults for OG and twitter --------- Co-authored-by: Julien Nahum <julien@nahum.net> * migrate to nuxt useClipboard (#268) * Set middleware on pages (#278) * Se middleware on pages * Se middleware on account page * add robots.txt (#276) * 404 page migration (#277) * Templates pages migration (#275) * NuxtImg Migration (#279) Co-authored-by: Julien Nahum <julien@nahum.net> * Update package json * Fix build script * Add loglevel param * Disable page pre-rendering * Attempt to allow svgs * Fix SVGs with NuxtImage * Add .env file at AWS build time * tRGIGGER deploy * Fix issue * ANother attrempt * Fix typo * Fix env? * Attempt to simplify build * Enable swr caching instead of prerenderign * Better image compression * Last attempt at nuxt images efficiency * Improve image optimization again * Remove NuxtImg for non asset files * Restore templates pages cache * Remove useless images + fix templates show page * image optimization caching + fix hydratation issue form template page * URL generation (front&back) + fixed authJWT for SSR * Fix composable issue * Fix form share page * Embeddable form as a nuxt middleware * Fix URL for embeddable middleware * Debugging embeddable on amplify * Add custom domain support * No follow for non-production env * Fix sentry nuxt and custom domain redirect * remove api prefix from routes (#280) * remove api prefix from routes * PR changes --------- Co-authored-by: Julien Nahum <julien@nahum.net> * nuxt migration -file upload - WIP (#271) Co-authored-by: Julien Nahum <julien@nahum.net> * Fix local file upload * Fix file submissions preview * API redirect to back-end from nuxt * API redirect to back-end from nuxt * Remove old JS app, update deploy script * Fix tests, added gh action nuxt step * Updated package-lock.json * Setup node in GH Nuxt action * Setup client directory for GH workflow --------- Co-authored-by: Forms Dev <chirag+new@notionforms.io> Co-authored-by: Chirag Chhatrala <60499540+chiragchhatrala@users.noreply.github.com> Co-authored-by: Rishi Raj Jain <rishi18304@iiitd.ac.in> Co-authored-by: formsdev <136701234+formsdev@users.noreply.github.com>
2024-01-15 12:14:47 +01:00
parent c01f566ba9
commit 0adce5a2ff
478 changed files with 27676 additions and 34120 deletions
--- a/client/pages/settings/account.vue
+++ b/client/pages/settings/account.vue
@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <h3 class="font-semibold text-2xl text-gray-900">Danger zone</h3>
+    <p class="text-gray-600 text-sm mt-2">
+      This will permanently delete your entire account. All your forms, submissions and workspaces will be deleted.
+    <span class="text-red-500">
+      This cannot be undone.
+    </span>
+    </p>
+
+    <!-- Submit Button -->
+    <v-button :loading="loading" class="mt-4" color="red" @click="useAlert().confirm('Do you really want to delete your account?',deleteAccount)">
+      Delete account
+    </v-button>
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router';
+
+const router = useRouter()
+const authStore = useAuthStore()
+let loading = false
+
+useOpnSeoMeta({
+  title: 'Account'
+})
+definePageMeta({
+  middleware: "auth"
+})
+
+const deleteAccount = () => {
+  loading = true
+  opnFetch('/user', {method:'DELETE'}).then(async (data) => {
+    loading = false
+    useAlert().success(data.message)
+
+    // Log out the user.
+    await authStore.logout()
+
+    // Redirect to login.
+    router.push({ name: 'login' })
+  }).catch((error) => {
+    useAlert().error(error.response.data.message)
+    loading = false
+  })
+}
+</script>
--- a/client/pages/settings/admin.vue
+++ b/client/pages/settings/admin.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <h3 class="font-semibold text-2xl text-gray-900">Admin settings</h3>
+    <small class="text-gray-600">Manage settings.</small>
+
+
+    <h3 class="mt-3 text-lg font-semibold mb-4">
+      Tools
+    </h3>
+    <div class="flex flex-wrap mb-5">
+      <a :href="statsUrl" target="_blank">
+        <v-button class="mx-1" color="gray" shade="lighter">
+          Stats
+        </v-button>
+      </a>
+      <a :href="horizonUrl" target="_blank">
+        <v-button class="mx-1" color="gray" shade="lighter">
+          Horizon
+        </v-button>
+      </a>
+    </div>
+    <h3 class="text-lg font-semibold mb-4">
+      Impersonate User
+    </h3>
+    <form @submit.prevent="impersonate" @keydown="form.onKeydown($event)">
+      <!-- Password -->
+      <text-input name="identifier" :form="form" label="Identifier"
+                  :required="true" help="User Id, User Email or Form Slug"
+      />
+
+      <!-- Submit Button -->
+      <v-button :loading="loading" class="mt-4">Impersonate User</v-button>
+    </form>
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router';
+
+definePageMeta({
+  middleware: "admin"
+})
+
+useOpnSeoMeta({
+  title: 'Admin'
+})
+
+const authStore = useAuthStore()
+const workspacesStore = useWorkspacesStore()
+const router = useRouter()
+let form = useForm({
+  identifier: ''
+})
+let loading = false
+
+const runtimeConfig = useRuntimeConfig()
+const statsUrl = runtimeConfig.public.apiBase + '/stats'
+const horizonUrl = runtimeConfig.public.apiBase + '/horizon'
+
+const impersonate = () => {
+  loading = true
+  authStore.startImpersonating()
+  opnFetch('/admin/impersonate/' + encodeURI(form.identifier)).then(async (data) => {
+    loading = false
+
+    // Save the token.
+    authStore.saveToken(data.token, false)
+
+    // Fetch the user.
+    await authStore.fetchUser()
+
+    // Redirect to the dashboard.
+    workspacesStore.set([])
+    router.push({ name: 'home' })
+  }).catch((error) => {
+    useAlert().error(error.response.data.message)
+    loading = false
+  })
+}
+</script>
--- a/client/pages/settings/billing.vue
+++ b/client/pages/settings/billing.vue
@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <h3 class="font-semibold text-2xl text-gray-900">
+      Billing details
+    </h3>
+
+    <template v-if="user.has_customer_id">
+      <small class="text-gray-600">Manage your billing. Download invoices, update your plan, or cancel it at any
+        time.</small>
+
+      <div class="mt-4">
+        <v-button color="gray" shade="light" :loading="billingLoading" @click.prevent="openBillingDashboard">
+          Manage Subscription
+        </v-button>
+      </div>
+    </template>
+
+    <app-sumo-billing class="mt-4" />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useAuthStore } from '../../stores/auth'
+import AppSumoBilling from '../../components/vendor/appsumo/AppSumoBilling.vue'
+
+useOpnSeoMeta({
+  title: 'Billing'
+})
+definePageMeta({
+  middleware: "auth"
+})
+
+const authStore = useAuthStore()
+let user = computed(() => authStore.user)
+let billingLoading = false
+
+const openBillingDashboard = () => {
+  billingLoading = true
+  opnFetch('/subscription/billing-portal').then((data) => {
+    const url = data.portal_url
+    window.location = url
+  }).catch((error) => {
+    useAlert().error(error.response.data.message)
+  }).finally(() => {
+    billingLoading = false
+  })
+}
+</script>
--- a/client/pages/settings/index.vue
+++ b/client/pages/settings/index.vue
@@ -0,0 +1,7 @@
+<script setup>
+definePageMeta({
+  redirect: to => {
+    return { name: 'settings-profile'}
+  }
+})
+</script>
--- a/client/pages/settings/password.vue
+++ b/client/pages/settings/password.vue
@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <h3 class="font-semibold text-2xl text-gray-900">
+      Password
+    </h3>
+    <small class="text-gray-600">Manage your password.</small>
+
+    <form class="mt-3" @submit.prevent="update" @keydown="form.onKeydown($event)">
+      <!-- Password -->
+      <text-input native-type="password"
+                  name="password" :form="form" label="Password" :required="true"
+      />
+
+      <!-- Password Confirmation-->
+      <text-input native-type="password"
+                  name="password_confirmation" :form="form" label="Confirm Password" :required="true"
+      />
+
+      <!-- Submit Button -->
+      <v-button :loading="form.busy" class="mt-4">
+        Update password
+      </v-button>
+    </form>
+  </div>
+</template>
+
+<script setup>
+useOpnSeoMeta({
+  title: 'Password'
+})
+definePageMeta({
+  middleware: "auth"
+})
+
+let form = useForm({
+  password: '',
+  password_confirmation: ''
+})
+
+const update = () => {
+  form.patch('/settings/password').then((response) => {
+    form.reset()
+    useAlert().success('Password updated.')
+  })
+}
+</script>
--- a/client/pages/settings/profile.vue
+++ b/client/pages/settings/profile.vue
@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <h3 class="font-semibold text-2xl text-gray-900">
+      Profile details
+    </h3>
+    <small class="text-gray-600">Update your username and manage your account details.</small>
+
+    <form class="mt-3" @submit.prevent="update" @keydown="form.onKeydown($event)">
+      <!-- Name -->
+      <text-input name="name" :form="form" label="Name" :required="true" />
+
+      <!-- Email -->
+      <text-input name="email" :form="form" label="Email" :required="true" />
+
+      <!-- Submit Button -->
+      <v-button :loading="form.busy" class="mt-4">
+        Save changes
+      </v-button>
+    </form>
+  </div>
+</template>
+
+<script setup>
+const authStore = useAuthStore()
+const user = computed(() => authStore.user)
+
+useOpnSeoMeta({
+  title: 'Profile'
+})
+definePageMeta({
+  middleware: "auth"
+})
+
+let form = useForm({
+  name: '',
+  email: ''
+})
+
+const update = () => {
+  form.patch('/settings/profile').then((response) => {
+    authStore.updateUser(response)
+    useAlert().success('Your info has been updated!')
+  })
+}
+
+onBeforeMount(() => {
+  // Fill the form with user data.
+  form.keys().forEach(key => {
+    form[key] = user.value[key]
+  })
+})
+</script>
--- a/client/pages/settings/workspace.vue
+++ b/client/pages/settings/workspace.vue
@@ -0,0 +1,207 @@
+<template>
+  <div>
+    <div class="flex flex-wrap items-center gap-y-4 flex-wrap-reverse">
+      <div class="flex-grow">
+        <h3 class="font-semibold text-2xl text-gray-900">
+          Workspace settings
+        </h3>
+        <small class="text-gray-600">Manage your workspaces.</small>
+      </div>
+      <v-button color="outline-blue" :loading="loading" @click="workspaceModal=true">
+        <svg class="inline -mt-1 mr-1 h-4 w-4" viewBox="0 0 14 14" fill="none"
+             xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M6.99996 1.16699V12.8337M1.16663 7.00033H12.8333" stroke="currentColor" stroke-width="1.67"
+                stroke-linecap="round" stroke-linejoin="round"
+          />
+        </svg>
+        Create new workspace
+      </v-button>
+    </div>
+
+    <div v-if="loading" class="w-full text-blue-500 text-center">
+      <Loader class="h-10 w-10 p-5" />
+    </div>
+    <div v-else-if="workspace">
+      <div class="mt-4 flex group bg-white items-center">
+        <div class="flex space-x-4 flex-grow items-center">
+          <img v-if="isUrl(workspace.icon)" :src="workspace.icon" :alt="workspace.name + ' icon'"
+               class="rounded-full h-12 w-12"
+          />
+          <div v-else class="rounded-2xl bg-gray-100 h-12 w-12 text-2xl pt-2 text-center overflow-hidden"
+               v-text="workspace.icon"
+          />
+          <div class="space-y-4 py-1">
+            <div class="font-bold truncate">
+              {{ workspace.name }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <template v-if="customDomainsEnabled">
+        <text-area-input v-model="customDomains" name="custom_domain" class="mt-4" :required="false"
+                         :disabled="!workspace.is_pro"
+                         label="Workspace Custom Domains" wrapper-class="" placeholder="yourdomain.com - 1 per line"
+        />
+        <p class="text-gray-500 text-sm">
+          Read our <a href="#"
+                      @click.prevent="crisp.openHelpdeskArticle('how-to-use-my-own-domain-9m77g7')"
+        >custom domain instructions</a> to learn how to use your own domain.
+        </p>
+      </template>
+
+      <div class="flex flex-wrap justify-between gap-2 mt-4">
+        <v-button v-if="customDomainsEnabled" class="w-full sm:w-auto" :loading="customDomainsLoading"
+                  @click="saveChanges">
+          <svg class="w-4 h-4 text-white inline mr-1 -mt-1" viewBox="0 0 24 24" fill="none"
+               xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M17 21V13H7V21M7 3V8H15M19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H16L21 8V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21Z"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+            />
+          </svg>
+          Save Domains
+        </v-button>
+        <v-button v-if="workspaces.length > 1" color="white" class="group w-full sm:w-auto" :loading="loading"
+                  @click="deleteWorkspace(workspace.id)"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 -mt-1 inline group-hover:text-red-700" fill="none"
+               viewBox="0 0 24 24" stroke="currentColor"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+            />
+          </svg>
+          Remove workspace
+        </v-button>
+      </div>
+    </div>
+
+    <!--  Workspace modal  -->
+    <modal :show="workspaceModal" max-width="lg" @close="workspaceModal=false">
+      <template #icon>
+        <svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M12 8V16M8 12H16M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+          />
+        </svg>
+      </template>
+      <template #title>
+        Create Workspace
+      </template>
+      <div class="px-4">
+        <form @submit.prevent="createWorkspace" @keydown="form.onKeydown($event)">
+          <div>
+            <text-input name="name" class="mt-4" :form="form" :required="true"
+                        label="Workspace Name"
+            />
+            <text-input name="emoji" class="mt-4" :form="form" :required="false"
+                        label="Emoji"
+            />
+          </div>
+
+          <div class="w-full mt-6">
+            <v-button :loading="form.busy" class="w-full my-3">
+              Save
+            </v-button>
+          </div>
+        </form>
+      </div>
+    </modal>
+  </div>
+</template>
+
+<script setup>
+import {watch} from "vue";
+import {fetchAllWorkspaces} from "~/stores/workspaces.js";
+
+const crisp = useCrisp()
+const workspacesStore = useWorkspacesStore()
+const workspaces = computed(() => workspacesStore.getAll)
+let loading = computed(() => workspacesStore.loading)
+
+useOpnSeoMeta({
+  title: 'Workspaces'
+})
+definePageMeta({
+  middleware: "auth"
+})
+
+let form = useForm({
+  name: '',
+  emoji: ''
+})
+let workspaceModal = ref(false)
+let customDomains = ''
+let customDomainsLoading = ref(false)
+
+let workspace = computed(() => workspacesStore.getCurrent)
+let customDomainsEnabled = computed(() => useRuntimeConfig().public.customDomainsEnabled)
+
+watch(() => workspace, () => {
+  initCustomDomains()
+})
+
+onMounted(() => {
+  fetchAllWorkspaces()
+  initCustomDomains()
+})
+
+const saveChanges = () => {
+  if (customDomainsLoading.value) return
+  customDomainsLoading.value = true
+  // Update the workspace custom domain
+  opnFetch('/open/workspaces/' + workspace.value.id + '/custom-domains', {
+    method: 'PUT',
+    custom_domains: customDomains.split('\n')
+      .map(domain => domain ? domain.trim() : null)
+      .filter(domain => domain && domain.length > 0)
+  }).then((data) => {
+    workspacesStore.addOrUpdate(data)
+    useAlert().success('Custom domains saved.')
+  }).catch((error) => {
+    useAlert().error('Failed to update custom domains: ' + error.response.data.message)
+  }).finally(() => {
+    customDomainsLoading.value = false
+  })
+}
+
+const initCustomDomains = () => {
+  if (!workspace || !workspace.value.custom_domains) return
+  customDomains = workspace.value.custom_domains.join('\n')
+}
+
+const deleteWorkspace = (workspaceId) => {
+  if (workspaces.length <= 1) {
+    useAlert().error('You cannot delete your only workspace.')
+    return
+  }
+  useAlert().confirm('Do you really want to delete this workspace? All forms created in this workspace will be removed.', () => {
+    opnFetch('/open/workspaces/' + workspaceId, {method: 'DELETE'}).then((data) => {
+      useAlert().success('Workspace successfully removed.')
+      workspacesStore.remove(workspaceId)
+    })
+  })
+}
+
+const isUrl = (str) => {
+  const pattern = new RegExp('^(https?:\\/\\/)?' + // protocol
+    '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
+    '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
+    '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
+    '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
+    '(\\#[-a-z\\d_]*)?$', 'i') // fragment locator
+  return !!pattern.test(str)
+}
+const createWorkspace = () => {
+  form.post('/open/workspaces/create').then((response) => {
+    fetchAllWorkspaces()
+    workspaceModal.value = false
+    useAlert().success('Workspace successfully created.')
+  })
+}
+
+</script>