Work in progress

client/pages/settings/account.vue

@@ -0,0 +1,61 @@
+<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="alertConfirm('Do you really want to delete your account?',deleteAccount)">
+      Delete account
+    </v-button>
+  </div>
+</template>
+
+<script>
+import Form from 'vform'
+import axios from 'axios'
+import { useAuthStore } from '../../stores/auth'
+import SeoMeta from '../../mixins/seo-meta.js'
+
+export default {
+  scrollToTop: false,
+  mixins: [SeoMeta],
+
+  setup () {
+    const authStore = useAuthStore()
+    return {
+      authStore
+    }
+  },
+
+  data: () => ({
+    metaTitle: 'Account',
+    form: new Form({
+      identifier: ''
+    }),
+    loading: false
+  }),
+
+  methods: {
+    async deleteAccount () {
+      this.loading = true
+      axios.delete('/api/user').then(async (response) => {
+        this.loading = false
+        this.alertSuccess(response.data.message)
+        // Log out the user.
+        await this.authStore.logout()
+
+        // Redirect to login.
+        this.$router.push({ name: 'login' })
+      }).catch((error) => {
+        this.alertError(error.response.data.message)
+        this.loading = false
+      })
+    }
+  }
+}
+</script>

client/pages/settings/admin.vue

@@ -0,0 +1,92 @@
+<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="/stats">
+        <v-button class="mx-1" color="gray" shade="lighter">
+          Stats
+        </v-button>
+      </a>
+      <a href="/horizon">
+        <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>
+import Form from 'vform'
+import axios from 'axios'
+import { useAuthStore } from '../../stores/auth'
+import { useWorkspacesStore } from '../../stores/workspaces'
+import SeoMeta from '../../mixins/seo-meta.js'
+
+export default {
+  components: { },
+  middleware: 'admin',
+  scrollToTop: false,
+  mixins: [SeoMeta],
+
+  setup () {
+    const authStore = useAuthStore()
+    const workspacesStore = useWorkspacesStore()
+    return {
+      authStore,
+      workspacesStore
+    }
+  },
+
+  data: () => ({
+    metaTitle: 'Admin',
+    form: new Form({
+      identifier: ''
+    }),
+    loading: false
+  }),
+
+  methods: {
+    async impersonate () {
+      this.loading = true
+      this.authStore.startImpersonating()
+      axios.get('/api/admin/impersonate/' + encodeURI(this.form.identifier)).then(async (response) => {
+        this.loading = false
+
+        // Save the token.
+        this.authStore.saveToken(response.data.token, false)
+
+        // Fetch the user.
+        await this.authStore.fetchUser()
+
+        // Redirect to the dashboard.
+        this.workspacesStore.set([])
+        this.$router.push({ name: 'home' })
+      }).catch((error) => {
+        this.alertError(error.response.data.message)
+        this.loading = false
+      })
+
+      // this.form.reset()
+    }
+  }
+}
+</script>

client/pages/settings/billing.vue

@@ -0,0 +1,63 @@
+<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>
+import axios from 'axios'
+import { computed } from 'vue'
+import { useAuthStore } from '../../stores/auth'
+import VButton from '~/components/global/VButton.vue'
+import SeoMeta from '../../mixins/seo-meta.js'
+import AppSumoBilling from '../../components/vendor/appsumo/AppSumoBilling.vue'
+
+export default {
+  components: { AppSumoBilling, VButton },
+  mixins: [SeoMeta],
+  scrollToTop: false,
+
+  setup () {
+    const authStore = useAuthStore()
+    return {
+      user : computed(() => authStore.user)
+    }
+  },
+
+  data: () => ({
+    metaTitle: 'Billing',
+    billingLoading: false
+  }),
+
+  methods: {
+    openBillingDashboard () {
+      this.billingLoading = true
+      axios.get('/api/subscription/billing-portal').then((response) => {
+        const url = response.data.portal_url
+        window.location = url
+      }).catch((error) => {
+        this.alertError(error.response.data.message)
+      }).finally(() => {
+        this.billingLoading = false
+      })
+    }
+  },
+
+  computed: {}
+}
+</script>

client/pages/settings/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="bg-white">
+    <div class="flex bg-gray-50">
+      <div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl px-4">
+        <div class="pt-4 pb-0">
+          <div class="flex">
+            <h2 class="flex-grow text-gray-900">
+              My Account
+            </h2>
+          </div>
+          <ul class="flex text-gray-500">
+            <li>{{ user.email }}</li>
+          </ul>
+
+          <div class="mt-4 border-b border-gray-200 dark:border-gray-700">
+            <ul class="flex flex-wrap -mb-px text-sm font-medium text-center">
+              <li v-for="(tab, i) in tabsList" :key="i+1" class="mr-6">
+                <router-link :to="{ name: tab.route }"
+                             class="hover:no-underline inline-block py-4 rounded-t-lg border-b-2 text-gray-500 hover:text-gray-600"
+                             active-class="text-blue-600 hover:text-blue-900 dark:text-blue-500 dark:hover:text-blue-500 border-blue-600 dark:border-blue-500"
+                >
+                  {{ tab.name }}
+                </router-link>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="flex bg-white">
+      <div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl px-4">
+        <div class="mt-8 pb-0">
+          <router-view v-slot="{ Component }">
+            <transition name="page" mode="out-in">
+              <component :is="Component" />
+            </transition>
+          </router-view>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed } from 'vue'
+import { useAuthStore } from '../../stores/auth'
+
+export default {
+  middleware: 'auth',
+
+  setup () {
+    const authStore = useAuthStore()
+    return {
+      user: computed(() => authStore.user)
+    }
+  },
+
+  data () {
+    return {
+    }
+  },
+
+  computed: {
+    tabsList () {
+      const tabs = [
+        {
+          name: 'Profile',
+          route: 'settings.profile'
+        },
+        {
+          name: 'Workspace Settings',
+          route: 'settings.workspaces'
+        },
+        {
+          name: 'Password',
+          route: 'settings.password'
+        },
+        {
+          name: 'Delete Account',
+          route: 'settings.account'
+        }
+      ]
+
+      if (this.user.is_subscribed) {
+        tabs.splice(1, 0, {
+          name: 'Billing',
+          route: 'settings.billing'
+        })
+      }
+
+      if (this.user.admin) {
+        tabs.push({
+          name: 'Admin',
+          route: 'settings.admin'
+        })
+      }
+
+      return tabs
+    }
+  },
+
+  methods: {
+  }
+}
+</script>

client/pages/settings/password.vue

@@ -0,0 +1,53 @@
+<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)">
+      <alert-success class="mb-5" :form="form" message="Password updated." />
+
+      <!-- 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>
+import Form from 'vform'
+import SeoMeta from '../../mixins/seo-meta.js'
+
+export default {
+  mixins: [SeoMeta],
+  scrollToTop: false,
+
+  data: () => ({
+    metaTitle: 'Password',
+    form: new Form({
+      password: '',
+      password_confirmation: ''
+    })
+  }),
+
+  methods: {
+    async update () {
+      await this.form.patch('/api/settings/password')
+
+      this.form.reset()
+    }
+  }
+}
+</script>

client/pages/settings/profile.vue

@@ -0,0 +1,66 @@
+<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)">
+      <alert-success class="mb-5" :form="form" message="Your info has been updated!" />
+
+      <!-- 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>
+import Form from 'vform'
+import { computed } from 'vue'
+import { useAuthStore } from '../../stores/auth'
+import SeoMeta from '../../mixins/seo-meta.js'
+
+export default {
+  mixins: [SeoMeta],
+  scrollToTop: false,
+
+  setup () {
+    const authStore = useAuthStore()
+    return {
+      authStore,
+      user : computed(() => authStore.user)
+    }
+  },
+
+  data: () => ({
+    metaTitle: 'Profile',
+    form: new Form({
+      name: '',
+      email: ''
+    })
+  }),
+
+  created () {
+    // Fill the form with user data.
+    this.form.keys().forEach(key => {
+      this.form[key] = this.user[key]
+    })
+  },
+
+  methods: {
+    async update () {
+      const { data } = await this.form.patch('/api/settings/profile')
+
+      this.authStore.updateUser(data)
+    }
+  }
+}
+</script>

client/pages/settings/workspace.vue

@@ -0,0 +1,224 @@
+<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.push(['do', 'helpdesk:article:open', ['en', '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)"
+        >
+          <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>
+import { computed } from 'vue'
+import Form from 'vform'
+import { useFormsStore } from '../../stores/forms'
+import { useWorkspacesStore } from '../../stores/workspaces'
+import SeoMeta from '../../mixins/seo-meta.js'
+import TextAreaInput from '../../components/forms/TextAreaInput.vue'
+import axios from 'axios'
+import * as domain from 'domain'
+
+export default {
+  components: { TextAreaInput },
+  mixins: [SeoMeta],
+  scrollToTop: false,
+  mixins: [SeoMeta],
+
+  setup () {
+    const formsStore = useFormsStore()
+    const workspacesStore = useWorkspacesStore()
+    return {
+      formsStore,
+      workspacesStore,
+      workspaces: computed(() => workspacesStore.content),
+      loading: computed(() => workspacesStore.loading)
+    }
+  },
+
+  data: () => ({
+    metaTitle: 'Workspaces',
+    form: new Form({
+      name: '',
+      emoji: ''
+    }),
+    workspaceModal: false,
+    customDomains: '',
+    customDomainsLoading: false
+  }),
+
+  mounted () {
+    this.workspacesStore.loadIfEmpty()
+    this.initCustomDomains()
+  },
+
+  computed: {
+    workspace () {
+      return this.workspacesStore.getCurrent()
+    },
+    customDomainsEnabled () {
+      return this.$config.custom_domains_enabled
+    }
+  },
+
+  methods: {
+    saveChanges () {
+      if (this.customDomainsLoading) return
+      this.customDomainsLoading = true
+      // Update the workspace custom domain
+      axios.put('/api/open/workspaces/' + this.workspace.id + '/custom-domains', {
+        custom_domains: this.customDomains.split('\n')
+          .map(domain => domain.trim())
+          .filter(domain => domain && domain.length > 0)
+      }).then((response) => {
+        this.workspacesStore.addOrUpdate(response.data)
+        this.alertSuccess('Custom domains saved.')
+      }).catch((error) => {
+        this.alertError('Failed to update custom domains: ' + error.response.data.message)
+      }).finally(() => {
+        this.customDomainsLoading = false
+      })
+    },
+    initCustomDomains () {
+      if (!this.workspace) return
+      this.customDomains = this.workspace.custom_domains.join('\n')
+    },
+    deleteWorkspace (workspace) {
+      if (this.workspaces.length <= 1) {
+        this.alertError('You cannot delete your only workspace.')
+        return
+      }
+      this.alertConfirm('Do you really want to delete this workspace? All forms created in this workspace will be removed.', () => {
+        this.workspacesStore.delete(workspace.id).then(() => {
+          this.alertSuccess('Workspace successfully removed.')
+        })
+      })
+    },
+    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)
+    },
+    async createWorkspace() {
+      const {data} = await this.form.post('/api/open/workspaces/create')
+      this.workspacesStore.load()
+      this.workspaceModal = false
+    }
+  },
+
+  watch: {
+    workspace () {
+      this.initCustomDomains()
+    }
+  }
+}
+</script>