matt/opnform-host-nginx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Team functionality (#459)

Browse Source 
* add api enpoints for adding, removing, updating user to workspace and leaving workspace

* feat: updates client site workspace settings

* refactor and add domain setting ui in modal

* move workspace user functionality to its own component

* adds tests

* fix linting

* updates select input to FlatSelectInput

* moves workspace user role edit to seperated component

* move user adding to its own component

* adds check to usure users exist before checking is admin

* fix loading users

* feat: invite user to team functionality

* fix token coulmn

* fix self host mode changes

* tests for  user invite

* Refactor back-end

* Rename variables

* Improve some styling elements + refactor workspace settings

* More styling

* More UI polishing

* More UI fixes

* PHP linting

* Implemented most of the logic for team-functionnality

* Fix user avatar URL

* WIP remove users on cancellation

* Finished pricing for team functionality

* Fix tests

* Fix linting

* Added pricing_enabled helper

* Fix pricing_enabled shortcut

* Debug CI

* Disable pricing when testing

---------

Co-authored-by: LL-Etiane <lukongleinyuyetiane@gmail.com>
Co-authored-by: Lukong Etiane <83535251+LL-Etiane@users.noreply.github.com>
Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
Favour Olayinka
2024-07-04 16:21:36 +01:00
committed by GitHub
parent 383fff7b2c
commit 90ff91b1e9
64 changed files with 2503 additions and 596 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
client/pages/forms/[slug]/index.vue
View File

@@ -1,5 +1,8 @@
<template>
<div class="flex flex-col">
<div
id="public-form"
class="flex flex-col"
>
<div v-if="form && !isIframe && (form.logo_picture || form.cover_picture)">
<div v-if="form.cover_picture">
<div
@@ -235,3 +238,19 @@ useHead({
script: [{ src: '/widgets/iframeResizer.contentWindow.min.js' } ]
})
</script>
<style lang="scss">
#public-form {
p, div {
@apply text-gray-900 dark:text-white;
}
h1, h2, h3, h4, h5, h6 {
@apply text-gray-900 dark:text-white;
}
a {
@apply text-blue-600 hover:underline;
}
}
</style>

44
client/pages/home.vue
View File

@@ -34,7 +34,7 @@
</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">
<div class="mt-8 pb-0">
<div class="mt-4 pb-0">
<text-input
v-if="forms.length > 0"
v-model="search"
@@ -180,6 +180,40 @@
/>
</div>
</div>
<div
v-if="!workspace.is_pro"
class="px-4"
>
<UAlert
class="mt-4"
icon="i-heroicons-command-line"
color="primary"
variant="subtle"
description="You can add components to your app using the cli."
>
<template #title>
<h2 class="font-medium text-lg -mt-2">
Discover our Pro plan
</h2>
</template>
<template #description>
<div class="flex flex-wrap sm:flex-nowrap gap-2 items-start">
<p class="flex-grow">
Remove NoteForms branding, customize forms further, use your custom domain, integrate with your
favorite tools, invite users, and more!
</p>
<UButton
v-track.upgrade_banner_home_click
:to="{name:'pricing'}"
color="white"
class="block"
>
Upgrade Now
</UButton>
</div>
</template>
</UAlert>
</div>
</div>
<div
v-if="formsLoading"
@@ -195,12 +229,12 @@
</template>
<script setup>
import { useFormsStore } from "../stores/forms"
import { useWorkspacesStore } from "../stores/workspaces"
import {useFormsStore} from "../stores/forms"
import {useWorkspacesStore} from "../stores/workspaces"
import Fuse from "fuse.js"
import TextInput from "../components/forms/TextInput.vue"
import ExtraMenu from "../components/pages/forms/show/ExtraMenu.vue"
import { refDebounced } from "@vueuse/core"
import {refDebounced} from "@vueuse/core"
definePageMeta({
middleware: "auth",
@@ -216,6 +250,8 @@ const formsStore = useFormsStore()
const workspacesStore = useWorkspacesStore()
formsStore.startLoading()
const workspace = computed(() => workspacesStore.getCurrent)
onMounted(() => {
if (!formsStore.allLoaded) {
formsStore.loadAll(workspacesStore.currentId)

22
client/pages/pricing.vue
View File

@@ -20,7 +20,19 @@
</div>
</section>
<pricing-table />
<pricing-table>
<template #pricing-table="{isYearly}">
<div class="flex gap-x-2 items-center">
<Icon
class="inline w-5 h-5 text-blue-500"
name="heroicons:user-plus-16-solid"
/>
<p>
Extra users for {{ isYearly?'$5/month':'$6/month' }}
</p>
</div>
</template>
</pricing-table>
<section class="py-12 bg-white sm:py-16 lg:py-24 xl:py-24">
<div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
@@ -387,12 +399,12 @@
</template>
<script>
import { computed } from "vue"
import { useAuthStore } from "../stores/auth"
import {computed} from "vue"
import {useAuthStore} from "../stores/auth"
import PricingTable from "../components/pages/pricing/PricingTable.vue"
export default {
components: { PricingTable },
components: {PricingTable},
layout: "default",
setup() {
@@ -408,7 +420,7 @@ export default {
// Custom inline middleware
if (!useRuntimeConfig().public.paidPlansEnabled) {
// If no paid plan so no need this page
return navigateTo("/", { redirectCode: 301 })
return navigateTo("/", {redirectCode: 301})
}
},
],

20
client/pages/register.vue
View File

@@ -11,7 +11,15 @@
Create an account
</h2>
<small>Sign up in less than 2 minutes.</small>
<register-form />
<template v-if="!isSelfHosted || isInvited">
<register-form />
</template>
<div
v-else
class="my-6 p-3 rounded-lg border border-yellow-600 bg-yellow-200 text-yellow-600"
>
Registration is not allowed in self host mode.
</div>
</div>
</div>
<div class="w-full hidden lg:block lg:w-1/2 md:p-6 mt-8 md:mt-0">
@@ -108,7 +116,15 @@ export default {
data: () => ({}),
computed: {},
computed: {
isSelfHosted(){
return useRuntimeConfig().public.selfHosted
},
isInvited(){
return this.$route.query?.email && this.$route.query?.invite_token
}
},
methods: {},
}

8
client/pages/settings.vue
View File

@@ -1,7 +1,7 @@
<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="w-full md:w-4/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">
@@ -12,7 +12,7 @@
<li>{{ user.email }}</li>
</ul>
<div class="mt-4 border-b border-gray-200 dark:border-gray-700">
<div class="mt-4 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"
@@ -33,8 +33,8 @@
</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">
<div class="w-full md:w-4/5 md:mx-auto md:max-w-4xl px-4">
<div class="mt-4 pb-0">
<NuxtPage />
</div>
</div>

37
client/pages/settings/billing.vue
View File

@@ -8,15 +8,21 @@
<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
<div class="mt-4 flex flex-wrap gap-2 w-full border shadow rounded-lg p-4 items-center">
<p
v-if="usersCount"
class="text-gray-500 flex-grow"
>
You currently have <span class="font-medium">{{ usersCount }} users</span> in your different workspaces.
</p>
<UButton
color="gray"
shade="light"
icon="i-heroicons-credit-card"
:loading="billingLoading"
@click.prevent="openBillingDashboard"
@click="openBillingDashboard"
>
Manage Subscription
</v-button>
</UButton>
</div>
</template>
@@ -38,10 +44,25 @@ definePageMeta({
const authStore = useAuthStore()
const user = computed(() => authStore.user)
let billingLoading = false
const billingLoading = ref(false)
const usersCount = ref(0)
onMounted(() => {
loadUsersCount()
})
const loadUsersCount = () => {
opnFetch("/subscription/users-count")
.then((data) => {
usersCount.value = data.count
})
.catch((error) => {
useAlert().error(error.data.message)
})
}
const openBillingDashboard = () => {
billingLoading = true
billingLoading.value = true
opnFetch("/subscription/billing-portal")
.then((data) => {
const url = data.portal_url
@@ -51,7 +72,7 @@ const openBillingDashboard = () => {
useAlert().error(error.data.message)
})
.finally(() => {
billingLoading = false
billingLoading.value = false
})
}
</script>

23
client/pages/settings/connections.vue
View File

@@ -7,27 +7,12 @@
</h3>
<small class="text-gray-600">Manage your external connections.</small>
</div>
<v-button
color="outline-blue"
<UButton
label="Connect new account"
icon="i-heroicons-plus"
:loading="loading"
@click="providerModal = 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>
Connect new account
</v-button>
/>
</div>
<div

211
client/pages/settings/workspace.vue
View File

@@ -1,33 +1,22 @@
<template>
<div>
<div class="flex flex-wrap items-center gap-y-4 flex-wrap-reverse">
<div class="flex flex-wrap items-center gap-y-4">
<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>
<small class="text-gray-500">You're currently editing the settings for the workspace "{{ workspace.name }}".
You can switch to another workspace in top left corner of the page.</small>
</div>
<div class="w-full flex flex-wrap justify-between gap-2">
<WorkSpaceCustomDomains v-if="customDomainsEnabled && !loading" />
<UButton
label="New Workspace"
icon="i-heroicons-plus"
:loading="loading"
@click="workspaceModal = true"
/>
</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
@@ -36,98 +25,11 @@
>
<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
:form="customDomainsForm"
name="custom_domains"
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
v-else-if="workspace"
class="my-4"
>
<WorkSpaceUser />
</div>
<!-- Workspace modal -->
@@ -192,8 +94,8 @@
</template>
<script setup>
import { watch } from "vue"
import { fetchAllWorkspaces } from "~/stores/workspaces.js"
import {watch, ref} from "vue"
import {fetchAllWorkspaces} from "~/stores/workspaces.js"
const crisp = useCrisp()
const workspacesStore = useWorkspacesStore()
@@ -212,91 +114,16 @@ const form = useForm({
emoji: "",
})
const workspaceModal = ref(false)
const customDomainsForm = useForm({
custom_domain: "",
})
const customDomainsLoading = ref(false)
const workspace = computed(() => workspacesStore.getCurrent)
const 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
customDomainsForm
.put("/open/workspaces/" + workspace.value.id + "/custom-domains", {
data: {
custom_domains: customDomainsForm?.custom_domains
?.split("\n")
.map((domain) => (domain ? domain.trim() : null))
.filter((domain) => domain && domain.length > 0),
},
})
.then((data) => {
workspacesStore.save(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
customDomainsForm.custom_domains = 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(
() => {
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((data) => {
workspacesStore.save(data.workspace)

11
client/pages/subscriptions/success.vue
View File

@@ -31,8 +31,10 @@ export default {
})
const authStore = useAuthStore()
const confetti = useConfetti()
return {
authStore,
confetti,
authenticated: computed(() => authStore.check),
user: computed(() => authStore.user),
crisp: useCrisp(),
@@ -53,6 +55,12 @@ export default {
beforeUnmount() {
clearInterval(this.interval)
},
unmounted() {
// stop confettis after 2 sec
setTimeout(() => {
this.confetti.stop()
}, 2000)
},
methods: {
async checkSubscription() {
@@ -73,6 +81,7 @@ export default {
} catch (error) {
console.error(error)
}
this.confetti.play()
this.$router.push({name: "home"})
if (this.user.has_enterprise_subscription) {
@@ -88,6 +97,6 @@ export default {
}
}
},
},
}
}
</script>