├── .yarnrc.yml
├── .npmrc
├── server
    ├── tsconfig.json
    ├── api
    │   ├── inngest.ts
    │   ├── me.ts
    │   ├── workspaces
    │   │   ├── index.get.ts
    │   │   ├── index.post.ts
    │   │   └── [workspaceId]
    │   │   │   └── index.get.ts
    │   ├── forms
    │   │   ├── [formId]
    │   │   │   ├── submissions
    │   │   │   │   ├── index.delete.ts
    │   │   │   │   ├── index.get.ts
    │   │   │   │   └── csv.get.ts
    │   │   │   ├── index.get.ts
    │   │   │   └── index.put.ts
    │   │   └── index.post.ts
    │   ├── stripe
    │   │   ├── portal.post.ts
    │   │   ├── checkout.post.ts
    │   │   └── webhook.post.ts
    │   └── auth
    │   │   └── [...].ts
    ├── middleware
    │   └── prisma.ts
    └── routes
    │   └── f
    │       └── [formId].ts
├── public
    ├── logo.png
    ├── react.png
    ├── favicon.png
    ├── feature1.png
    ├── featureHero.png
    ├── html.html
    ├── vue.svg
    └── html.svg
├── .yarn
    └── install-state.gz
├── tsconfig.json
├── inngest
    ├── client.ts
    └── functions
    │   ├── index.ts
    │   ├── webhook.ts
    │   ├── respondentEmailNotification.ts
    │   ├── selfEmailNotification.ts
    │   └── formBackgroundJob.ts
├── app.config.ts
├── prisma
    ├── migrations
    │   ├── 20240109041157_emails
    │   │   └── migration.sql
    │   ├── 20230911045224_add_closed_to_form_table
    │   │   └── migration.sql
    │   ├── migration_lock.toml
    │   ├── 20230916124324_add_spam_flag_to_submission_table
    │   │   └── migration.sql
    │   ├── 20230911051446_add_self_email_notification_to_form_table
    │   │   └── migration.sql
    │   ├── 20230914130042_add_webhook_to_form_table
    │   │   └── migration.sql
    │   ├── 20230913123110_add_settings_attributes_to_form_table
    │   │   └── migration.sql
    │   ├── 20230920124937_add_stripe_attributes
    │   │   └── migration.sql
    │   ├── 20230909054307_create_feature_tables
    │   │   └── migration.sql
    │   └── 20230908150845_create_user_account
    │   │   └── migration.sql
    └── schema.prisma
├── types
    ├── next-auth.d.ts
    └── index.ts
├── pages
    ├── settings
    │   ├── billing.vue
    │   └── index.vue
    ├── index.vue
    ├── test.vue
    ├── thank-you.vue
    ├── forms
    │   └── [formId].vue
    ├── dashboard.vue
    ├── workspaces
    │   └── [workspaceId].vue
    ├── contact.vue
    ├── pricing.vue
    ├── refund.vue
    ├── terms.vue
    └── privacy.vue
├── layouts
    ├── open.vue
    └── default.vue
├── utils
    ├── index.ts
    └── stripe.ts
├── .gitignore
├── app.vue
├── .env.example
├── components
    ├── Sidebar
    │   ├── FormRow.vue
    │   ├── WorkspaceRow.vue
    │   └── List.vue
    ├── TheSideBar.vue
    ├── Lp
    │   ├── FormCode.vue
    │   ├── Cta.vue
    │   ├── TopNav.vue
    │   ├── FeatureSection.vue
    │   ├── Footer.vue
    │   └── HeroSection.vue
    ├── icon
    │   └── Google.vue
    ├── Form
    │   ├── CsvDownload.vue
    │   ├── Integrations.vue
    │   ├── Setup.vue
    │   ├── Submissions.vue
    │   └── Settings.vue
    ├── workspace
    │   └── CreateForm.vue
    ├── TheProfileMenu.vue
    ├── CreateFormModal.vue
    └── Settings
    │   └── Billing.vue
├── docker-compose.yml
├── package.json
├── nuxt.config.ts
├── README.md
└── store
    └── workspace.ts


/.yarnrc.yml:
--------------------------------------------------------------------------------
1 | nodeLinker: node-modules
2 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | strict-peer-dependencies=false
3 | 


--------------------------------------------------------------------------------
/server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../.nuxt/tsconfig.server.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/naveennaidu/OpenformStack/HEAD/public/logo.png


--------------------------------------------------------------------------------
/public/react.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/naveennaidu/OpenformStack/HEAD/public/react.png


--------------------------------------------------------------------------------
/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/naveennaidu/OpenformStack/HEAD/public/favicon.png


--------------------------------------------------------------------------------
/public/feature1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/naveennaidu/OpenformStack/HEAD/public/feature1.png


--------------------------------------------------------------------------------
/.yarn/install-state.gz:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/naveennaidu/OpenformStack/HEAD/.yarn/install-state.gz


--------------------------------------------------------------------------------
/public/featureHero.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/naveennaidu/OpenformStack/HEAD/public/featureHero.png


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/inngest/client.ts:
--------------------------------------------------------------------------------
1 | import { Inngest } from "inngest";
2 | 
3 | export const inngest = new Inngest({ id: "OpenformStack" });
4 | 


--------------------------------------------------------------------------------
/inngest/functions/index.ts:
--------------------------------------------------------------------------------
1 | import formBackgroundJob from "./formBackgroundJob";
2 | 
3 | export default [formBackgroundJob];
4 | 


--------------------------------------------------------------------------------
/app.config.ts:
--------------------------------------------------------------------------------
1 | export default defineAppConfig({
2 |   ui: {
3 |     primary: "orange",
4 |     gray: "neutral",
5 |   },
6 | });
7 | 


--------------------------------------------------------------------------------
/prisma/migrations/20240109041157_emails/migration.sql:
--------------------------------------------------------------------------------
1 | -- AlterTable
2 | ALTER TABLE "Form" ADD COLUMN     "selfEmails" TEXT[];
3 | 


--------------------------------------------------------------------------------
/prisma/migrations/20230911045224_add_closed_to_form_table/migration.sql:
--------------------------------------------------------------------------------
1 | -- AlterTable
2 | ALTER TABLE "Form" ADD COLUMN     "closed" BOOLEAN NOT NULL DEFAULT false;
3 | 


--------------------------------------------------------------------------------
/prisma/migrations/migration_lock.toml:
--------------------------------------------------------------------------------
1 | # Please do not edit this file manually
2 | # It should be added in your version-control system (i.e. Git)
3 | provider = "postgresql"


--------------------------------------------------------------------------------
/prisma/migrations/20230916124324_add_spam_flag_to_submission_table/migration.sql:
--------------------------------------------------------------------------------
1 | -- AlterTable
2 | ALTER TABLE "Submission" ADD COLUMN     "isSpam" BOOLEAN NOT NULL DEFAULT false;
3 | 


--------------------------------------------------------------------------------
/prisma/migrations/20230911051446_add_self_email_notification_to_form_table/migration.sql:
--------------------------------------------------------------------------------
1 | -- AlterTable
2 | ALTER TABLE "Form" ADD COLUMN     "selfEmailNotification" BOOLEAN NOT NULL DEFAULT true;
3 | 


--------------------------------------------------------------------------------
/prisma/migrations/20230914130042_add_webhook_to_form_table/migration.sql:
--------------------------------------------------------------------------------
1 | -- AlterTable
2 | ALTER TABLE "Form" ADD COLUMN     "webhookEnabled" BOOLEAN NOT NULL DEFAULT false,
3 | ADD COLUMN     "webhookUrl" TEXT;
4 | 


--------------------------------------------------------------------------------
/types/next-auth.d.ts:
--------------------------------------------------------------------------------
 1 | import NextAuth from "next-auth";
 2 | 
 3 | declare module "next-auth" {
 4 |   interface Session {
 5 |     user: {
 6 |       id: string;
 7 |     } & DefaultSession["user"];
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/pages/settings/billing.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <SettingsBilling />
 3 | </template>
 4 | 
 5 | <script setup lang="ts">
 6 | definePageMeta({
 7 |   middleware: "auth",
 8 | });
 9 | </script>
10 | 
11 | <style scoped></style>
12 | 


--------------------------------------------------------------------------------
/server/api/inngest.ts:
--------------------------------------------------------------------------------
1 | import { serve } from "inngest/nuxt";
2 | import { inngest } from "@/inngest/client";
3 | import functions from "@/inngest/functions";
4 | 
5 | export default defineEventHandler(serve({ client: inngest, functions }));
6 | 


--------------------------------------------------------------------------------
/types/index.ts:
--------------------------------------------------------------------------------
 1 | import type { Form, Workspace } from "@prisma/client";
 2 | 
 3 | export type WorkspaceWithForms = Workspace & { forms: Form[] };
 4 | 
 5 | export interface Pagination {
 6 |   skip: number;
 7 |   take: number;
 8 |   total: number;
 9 | }
10 | 


--------------------------------------------------------------------------------
/layouts/open.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <LpTopNav />
 4 |     <div class="mt-20">
 5 |       <slot />
 6 |     </div>
 7 |     <LpFooter />
 8 |   </div>
 9 | </template>
10 | 
11 | <script setup lang="ts"></script>
12 | 
13 | <style scoped></style>
14 | 


--------------------------------------------------------------------------------
/public/html.html:
--------------------------------------------------------------------------------
1 | <form action="http://localhost:3000/f/clmkkd6tm00009vqmq7jy5ru9" method="POST">
2 |   <input type="email" name="email" />
3 |   <input name="name" />
4 |   <input name="_gotcha" />
5 |   <button type="submit">Join Waitlist</button>
6 | </form>
7 | 


--------------------------------------------------------------------------------
/utils/index.ts:
--------------------------------------------------------------------------------
1 | export function isEmail(email: string) {
2 |   const emailRegex =
3 |     /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
4 |   return emailRegex.test(email);
5 | }
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Nuxt dev/build outputs
 2 | .output
 3 | .data
 4 | .nuxt
 5 | .nitro
 6 | .cache
 7 | dist
 8 | 
 9 | # Node dependencies
10 | node_modules
11 | 
12 | # Logs
13 | logs
14 | *.log
15 | 
16 | # Misc
17 | .DS_Store
18 | .fleet
19 | .idea
20 | 
21 | # Local env files
22 | .env
23 | .env.*
24 | !.env.example
25 | .vercel
26 | 


--------------------------------------------------------------------------------
/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <NuxtLayout>
 3 |     <NuxtPage />
 4 |   </NuxtLayout>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 | useHead({
 9 |   script: [
10 |     {
11 |       src: "https://plausible.io/js/script.js",
12 |       defer: true,
13 |       "data-domain": "openformstack.com",
14 |     },
15 |   ],
16 | });
17 | </script>
18 | 


--------------------------------------------------------------------------------
/server/middleware/prisma.ts:
--------------------------------------------------------------------------------
 1 | import { PrismaClient } from "@prisma/client";
 2 | 
 3 | let prisma: PrismaClient;
 4 | 
 5 | declare module "h3" {
 6 |   interface H3EventContext {
 7 |     prisma: PrismaClient;
 8 |   }
 9 | }
10 | 
11 | export default eventHandler((event) => {
12 |   if (!prisma) {
13 |     prisma = new PrismaClient();
14 |   }
15 |   event.context.prisma = prisma;
16 | });
17 | 


--------------------------------------------------------------------------------
/prisma/migrations/20230913123110_add_settings_attributes_to_form_table/migration.sql:
--------------------------------------------------------------------------------
1 | -- AlterTable
2 | ALTER TABLE "Form" ADD COLUMN     "customRedirect" BOOLEAN NOT NULL DEFAULT false,
3 | ADD COLUMN     "customRedirectUrl" TEXT,
4 | ADD COLUMN     "fromName" TEXT,
5 | ADD COLUMN     "message" TEXT,
6 | ADD COLUMN     "respondentEmailNotification" BOOLEAN NOT NULL DEFAULT false,
7 | ADD COLUMN     "subject" TEXT;
8 | 


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
 1 | DEFAULT_DATABASE_HOSTNAME=localhost
 2 | DEFAULT_DATABASE_USER=postgres
 3 | DEFAULT_DATABASE_PASSWORD=postgres
 4 | DEFAULT_DATABASE_PORT=5436
 5 | DEFAULT_DATABASE_DB=headless_forms
 6 | 
 7 | DATABASE_URL="postgres://postgres:postgres@localhost:5436/headless_forms?schema=public"
 8 | 
 9 | # AUTH
10 | GOOGLE_CLIENT_ID=
11 | GOOGLE_CLIENT_SECRET=
12 | API_ROUTE_SECRET=
13 | 
14 | # EMAIL
15 | RESEND_API_KEY=
16 | FROM_MAIL=
17 | 
18 | BASE_URL=


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <LpHeroSection />
 4 |     <LpFeatureSection />
 5 |     <LpCta />
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script setup lang="ts">
10 | definePageMeta({
11 |   layout: "open",
12 | });
13 | 
14 | const { status } = useAuth();
15 | 
16 | watchEffect(async () => {
17 |   if (status.value === "authenticated") {
18 |     await useRouter().push("/dashboard");
19 |   }
20 | });
21 | </script>
22 | 
23 | <style scoped></style>
24 | 


--------------------------------------------------------------------------------
/public/vue.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <svg version="1.1" viewBox="0 0 261.76 226.69" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34)"><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-75.491l98.16-170.02 98.16 170.02z" fill="#41b883"/></g><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-36.227l58.896-102.01 58.896 102.01z" fill="#34495e"/></g></g></svg>
3 | 


--------------------------------------------------------------------------------
/server/api/me.ts:
--------------------------------------------------------------------------------
 1 | import { getServerSession } from "#auth";
 2 | 
 3 | export default defineEventHandler(async (event) => {
 4 |   const session = await getServerSession(event);
 5 | 
 6 |   if (!session) {
 7 |     throw createError({ statusMessage: "Unauthenticated", statusCode: 403 });
 8 |   }
 9 | 
10 |   const { prisma } = event.context;
11 | 
12 |   const user = await prisma.user.findUnique({
13 |     where: {
14 |       id: session.user.id,
15 |     },
16 |     include: {
17 |       Subscription: true,
18 |     },
19 |   });
20 | 
21 |   return { user };
22 | });
23 | 


--------------------------------------------------------------------------------
/components/Sidebar/FormRow.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     class="pl-8 text-sm py-1 cursor-pointer font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100 hover:dark:bg-gray-800/80 rounded mb-0.5"
 4 |     :class="{
 5 |       'text-gray-900  bg-gray-100 dark:bg-gray-800': active,
 6 |     }"
 7 |   >
 8 |     <slot />
 9 |   </div>
10 | </template>
11 | 
12 | <script setup lang="ts">
13 | defineProps({
14 |   active: {
15 |     type: Boolean,
16 |     required: false,
17 |     default: false,
18 |   },
19 | });
20 | </script>
21 | 
22 | <style scoped></style>
23 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="flex h-full">
 3 |     <TheSideBar />
 4 |     <div class="w-full">
 5 |       <div class="p-4 h-screen overflow-auto">
 6 |         <slot />
 7 |       </div>
 8 |     </div>
 9 |   </div>
10 | </template>
11 | 
12 | <script setup lang="ts">
13 | useHead({
14 |   htmlAttrs: {
15 |     lang: "en",
16 |     class: "antialiased [font-feature-settings:'ss01'] h-full",
17 |   },
18 |   bodyAttrs: {
19 |     class: "h-full",
20 |   },
21 | });
22 | </script>
23 | 
24 | <style>
25 | #__nuxt {
26 |   height: 100%;
27 | }
28 | </style>
29 | 


--------------------------------------------------------------------------------
/inngest/functions/webhook.ts:
--------------------------------------------------------------------------------
 1 | import { inngest } from "@/inngest/client";
 2 | 
 3 | export default inngest.createFunction(
 4 |   { id: "Webhook" },
 5 |   { event: "app/webhook" },
 6 |   async ({ event }) => {
 7 |     const webhookUrl = event.data.webhookUrl;
 8 |     const formName = event.data.formName;
 9 |     const submission = event.data.submission;
10 | 
11 |     await $fetch(webhookUrl, {
12 |       method: "POST",
13 |       body: JSON.stringify({
14 |         formName,
15 |         submission,
16 |       }),
17 |     });
18 | 
19 |     return { event };
20 |   }
21 | );
22 | 


--------------------------------------------------------------------------------
/components/TheSideBar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="px-0.5 py-2 dark:bg-neutral-900 bg-zinc-50 w-72">
 3 |     <TheProfileMenu class="mb-1" />
 4 |     <UVerticalNavigation :links="links" />
 5 |     <SidebarList />
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script setup lang="ts">
10 | const links = [
11 |   {
12 |     label: "Dashboard",
13 |     icon: "i-heroicons-home",
14 |     to: "/dashboard",
15 |   },
16 |   {
17 |     label: "Billing",
18 |     icon: "i-heroicons-credit-card",
19 |     to: "/settings/billing",
20 |   },
21 | ];
22 | </script>
23 | 
24 | <style scoped></style>
25 | 


--------------------------------------------------------------------------------
/components/Lp/FormCode.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <pre v-html="highlightedCode"></pre>
 3 | </template>
 4 | 
 5 | <script setup lang="ts">
 6 | import hljs from "highlight.js";
 7 | import "highlight.js/styles/stackoverflow-dark.css";
 8 | 
 9 | const props = defineProps({
10 |   code: {
11 |     type: String,
12 |     required: true,
13 |   },
14 |   lang: {
15 |     type: String,
16 |     default: "html",
17 |   },
18 | });
19 | 
20 | const highlightedCode = computed(() => {
21 |   return hljs.highlight(props.code, { language: props.lang }).value;
22 | });
23 | </script>
24 | 
25 | <style scoped></style>
26 | 


--------------------------------------------------------------------------------
/docker-compose.yml:
--------------------------------------------------------------------------------
 1 | version: "3.7"
 2 | 
 3 | # For local development, only database is running
 4 | #
 5 | # docker-compose up -d
 6 | #
 7 | 
 8 | services:
 9 |   default_database:
10 |     restart: unless-stopped
11 |     image: postgres:latest
12 |     volumes:
13 |       - default_database_data:/var/lib/postgresql/data
14 |     environment:
15 |       - POSTGRES_DB=${DEFAULT_DATABASE_DB}
16 |       - POSTGRES_USER=${DEFAULT_DATABASE_USER}
17 |       - POSTGRES_PASSWORD=${DEFAULT_DATABASE_PASSWORD}
18 |     env_file:
19 |       - .env
20 |     ports:
21 |       - "${DEFAULT_DATABASE_PORT}:5432"
22 | 
23 | volumes:
24 |   default_database_data:
25 | 


--------------------------------------------------------------------------------
/pages/test.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <form @submit.prevent="submitForm" class="h-screen mt-24">
 3 |     <input type="email" name="email" v-model="email" />
 4 |     <button type="submit">Join Waitlist</button>
 5 |   </form>
 6 | </template>
 7 | 
 8 | <script setup>
 9 | definePageMeta({
10 |   layout: "open",
11 | });
12 | const email = ref("");
13 | 
14 | async function submitForm() {
15 |   await fetch("http://localhost:3000/f/clmkkd6tm00009vqmq7jy5ru9", {
16 |     method: "POST",
17 |     headers: {
18 |       "Content-Type": "application/json",
19 |     },
20 |     body: JSON.stringify({ email: email.value }),
21 |   });
22 | }
23 | </script>
24 | 


--------------------------------------------------------------------------------
/public/html.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
2 |   <title>HTML5 Logo Badge</title>
3 |   <path fill="#E34F26" d="M71,460 L30,0 481,0 440,460 255,512"/>
4 |   <path fill="#EF652A" d="M256,472 L405,431 440,37 256,37"/>
5 |   <path fill="#EBEBEB" d="M256,208 L181,208 176,150 256,150 256,94 255,94 114,94 115,109 129,265 256,265zM256,355 L255,355 192,338 188,293 158,293 132,293 139,382 255,414 256,414z"/>
6 |   <path fill="#FFF" d="M255,208 L255,265 325,265 318,338 255,355 255,414 371,382 372,372 385,223 387,208 371,208zM255,94 L255,129 255,150 255,150 392,150 392,150 392,150 393,138 396,109 397,94z"/>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/server/api/workspaces/index.get.ts:
--------------------------------------------------------------------------------
 1 | import { getServerSession } from "#auth";
 2 | 
 3 | export default defineEventHandler(async (event) => {
 4 |   const session = await getServerSession(event);
 5 | 
 6 |   if (!session) {
 7 |     throw createError({ statusMessage: "Unauthenticated", statusCode: 403 });
 8 |   }
 9 | 
10 |   const { prisma } = event.context;
11 | 
12 |   const workspaces = await prisma.workspace.findMany({
13 |     where: {
14 |       users: {
15 |         some: {
16 |           id: session.user.id,
17 |         },
18 |       },
19 |     },
20 |     include: {
21 |       forms: true,
22 |     },
23 |   });
24 | 
25 |   return { workspaces };
26 | });
27 | 


--------------------------------------------------------------------------------
/components/icon/Google.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     xmlns="http://www.w3.org/2000/svg"
 4 |     viewBox="0 0 30 30"
 5 |     width="30px"
 6 |     height="30px"
 7 |     class="dark:fill-black fill-white"
 8 |   >
 9 |     <path
10 |       d="M 15.003906 3 C 8.3749062 3 3 8.373 3 15 C 3 21.627 8.3749062 27 15.003906 27 C 25.013906 27 27.269078 17.707 26.330078 13 L 25 13 L 22.732422 13 L 15 13 L 15 17 L 22.738281 17 C 21.848702 20.448251 18.725955 23 15 23 C 10.582 23 7 19.418 7 15 C 7 10.582 10.582 7 15 7 C 17.009 7 18.839141 7.74575 20.244141 8.96875 L 23.085938 6.1289062 C 20.951937 4.1849063 18.116906 3 15.003906 3 z"
11 |     />
12 |   </svg>
13 | </template>
14 | 


--------------------------------------------------------------------------------
/server/api/workspaces/index.post.ts:
--------------------------------------------------------------------------------
 1 | import { getServerSession } from "#auth";
 2 | import { z, parseBodyAs } from "@sidebase/nuxt-parse";
 3 | 
 4 | const bodySchema = z.object({
 5 |   name: z.string(),
 6 | });
 7 | 
 8 | export default defineEventHandler(async (event) => {
 9 |   const session = await getServerSession(event);
10 |   const { name } = await parseBodyAs(event, bodySchema);
11 | 
12 |   if (!session) {
13 |     throw createError({ statusMessage: "Unauthenticated", statusCode: 403 });
14 |   }
15 | 
16 |   const { prisma } = event.context;
17 | 
18 |   const workspace = await prisma.workspace.create({
19 |     data: {
20 |       name,
21 |       users: {
22 |         connect: {
23 |           id: session.user.id,
24 |         },
25 |       },
26 |     },
27 |   });
28 | 
29 |   return { workspace };
30 | });
31 | 


--------------------------------------------------------------------------------
/inngest/functions/respondentEmailNotification.ts:
--------------------------------------------------------------------------------
 1 | import { inngest } from "@/inngest/client";
 2 | import { Resend } from "resend";
 3 | 
 4 | const resend = new Resend(useRuntimeConfig().RESEND_API_KEY);
 5 | 
 6 | export default inngest.createFunction(
 7 |   { id: "Respondent Email Notification" },
 8 |   { event: "app/email.respondentNotification" },
 9 |   async ({ event }) => {
10 |     const fromName = event.data.fromName;
11 |     const to = event.data.to;
12 |     const subject = event.data.subject;
13 |     const message = event.data.message;
14 |     const reply_to = event.data.replyTo;
15 | 
16 |     await resend.emails.send({
17 |       from: `${fromName} <${useRuntimeConfig().public.FROM_MAIL}>`,
18 |       to,
19 |       subject: subject,
20 |       text: message,
21 |       reply_to,
22 |     });
23 |     return { event };
24 |   }
25 | );
26 | 


--------------------------------------------------------------------------------
/pages/thank-you.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="flex flex-col items-center justify-center h-screen">
 4 |       <div class="flex flex-col items-center justify-center space-y-4">
 5 |         <UIcon
 6 |           name="i-heroicons-check-circle"
 7 |           class="text-green-500 text-6xl"
 8 |         />
 9 |         <h1 class="text-4xl font-bold">Thank you!</h1>
10 |         <p class="text-lg">Your response has been recorded.</p>
11 |       </div>
12 |       <UButton
13 |         class="mt-8"
14 |         variant="ghost"
15 |         color="gray"
16 |         icon="i-heroicons-chevron-left"
17 |         @click="$router.go(-1)"
18 |       >
19 |         Go back
20 |       </UButton>
21 |     </div>
22 |   </div>
23 | </template>
24 | 
25 | <script setup lang="ts">
26 | definePageMeta({
27 |   layout: "open",
28 | });
29 | </script>
30 | 
31 | <style scoped></style>
32 | 


--------------------------------------------------------------------------------
/components/Sidebar/WorkspaceRow.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     class="group text-sm cursor-pointer font-medium text-gray-500 hover:text-gray-800 pl-4 hover:bg-gray-100 hover:dark:bg-gray-800/80 rounded mb-0.5 flex items-center justify-between"
 4 |     :class="{
 5 |       'bg-gray-100 text-gray-800 dark:bg-gray-900': active,
 6 |     }"
 7 |   >
 8 |     <div>
 9 |       <slot />
10 |     </div>
11 |     <UButton
12 |       icon="i-heroicons-plus"
13 |       color="gray"
14 |       variant="ghost"
15 |       size="xs"
16 |       class="invisible group-hover:visible"
17 |       @click.stop="emit('createForm')"
18 |     />
19 |   </div>
20 | </template>
21 | 
22 | <script setup lang="ts">
23 | defineProps({
24 |   active: {
25 |     type: Boolean,
26 |     required: false,
27 |     default: false,
28 |   },
29 | });
30 | 
31 | const emit = defineEmits(["createForm", "close"]);
32 | </script>
33 | 
34 | <style scoped></style>
35 | 


--------------------------------------------------------------------------------
/server/api/forms/[formId]/submissions/index.delete.ts:
--------------------------------------------------------------------------------
 1 | import { getServerSession } from "#auth";
 2 | import { z, parseBodyAs } from "@sidebase/nuxt-parse";
 3 | 
 4 | const bodySchema = z.object({
 5 |   ids: z.array(z.string()),
 6 | });
 7 | 
 8 | export default defineEventHandler(async (event) => {
 9 |   const session = await getServerSession(event);
10 |   const { ids } = await parseBodyAs(event, bodySchema);
11 | 
12 |   if (!session) {
13 |     throw createError({ statusMessage: "Unauthenticated", statusCode: 403 });
14 |   }
15 | 
16 |   const { prisma } = event.context;
17 | 
18 |   const data = await prisma.submission.deleteMany({
19 |     where: {
20 |       id: {
21 |         in: ids,
22 |       },
23 |       form: {
24 |         workspace: {
25 |           users: {
26 |             some: {
27 |               id: session.user.id,
28 |             },
29 |           },
30 |         },
31 |       },
32 |     },
33 |   });
34 |   return { data };
35 | });
36 | 


--------------------------------------------------------------------------------
/server/api/forms/[formId]/index.get.ts:
--------------------------------------------------------------------------------
 1 | import { getServerSession } from "#auth";
 2 | import { z, parseParamsAs } from "@sidebase/nuxt-parse";
 3 | 
 4 | const paramSchema = z.object({
 5 |   formId: z.string(),
 6 | });
 7 | 
 8 | export default defineEventHandler(async (event) => {
 9 |   const session = await getServerSession(event);
10 |   const { formId } = parseParamsAs(event, paramSchema);
11 | 
12 |   if (!session) {
13 |     throw createError({ statusMessage: "Unauthenticated", statusCode: 403 });
14 |   }
15 | 
16 |   const { prisma } = event.context;
17 | 
18 |   const form = await prisma.form.findUnique({
19 |     where: {
20 |       id: formId,
21 |       workspace: {
22 |         users: {
23 |           some: {
24 |             id: session.user.id,
25 |           },
26 |         },
27 |       },
28 |     },
29 |   });
30 |   if (!form) {
31 |     throw createError({ statusMessage: "Not Found", statusCode: 404 });
32 |   }
33 |   return { form };
34 | });
35 | 


--------------------------------------------------------------------------------
/inngest/functions/selfEmailNotification.ts:
--------------------------------------------------------------------------------
 1 | import { inngest } from "@/inngest/client";
 2 | import { Resend } from "resend";
 3 | import { isEmail } from "~/utils";
 4 | 
 5 | const resend = new Resend(useRuntimeConfig().RESEND_API_KEY);
 6 | 
 7 | export default inngest.createFunction(
 8 |   { id: "Self Email Notification" },
 9 |   { event: "app/email.selfNotification" },
10 |   async ({ event }) => {
11 |     const userEmails = event.data.emails;
12 |     const formName = event.data.formName;
13 |     const body = event.data.body;
14 | 
15 |     await resend.emails.send({
16 |       from: `OpenformStack <${useRuntimeConfig().public.FROM_MAIL}>`,
17 |       to: userEmails,
18 |       subject: `New submission for ${formName}`,
19 |       html: `
20 |     ${Object.entries(body)
21 |       .map(([key, value]) => `<div><b>${key}</b>: ${value}</div>`)
22 |       .join("")}
23 |     `,
24 |       ...(body.email && isEmail(body.email) ? { reply_to: body.email } : {}),
25 |     });
26 |     return { event };
27 |   }
28 | );
29 | 


--------------------------------------------------------------------------------
/components/Form/CsvDownload.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <UButton
 3 |     icon="i-heroicons-arrow-down-tray"
 4 |     variant="ghost"
 5 |     color="gray"
 6 |     size="xs"
 7 |     :loading="loading"
 8 |     @click="downloadCsv"
 9 |   >
10 |     Download CSV
11 |   </UButton>
12 | </template>
13 | 
14 | <script setup lang="ts">
15 | const props = defineProps({
16 |   formId: {
17 |     type: String,
18 |     required: true,
19 |   },
20 | });
21 | 
22 | const loading = ref(false);
23 | 
24 | async function downloadCsv() {
25 |   loading.value = true;
26 |   await useFetch(`/api/forms/${props.formId}/submissions/csv`, {
27 |     onResponse({ response }) {
28 |       const link = document.createElement("a");
29 |       link.href = window.URL.createObjectURL(new Blob([response._data]));
30 |       link.setAttribute("download", "submissions.csv");
31 |       document.body.appendChild(link);
32 |       link.click();
33 |       document.body.removeChild(link);
34 |     },
35 |   });
36 |   loading.value = false;
37 | }
38 | </script>
39 | 
40 | <style scoped></style>
41 | 


--------------------------------------------------------------------------------
/pages/settings/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <UTabs
 4 |       v-model="selectedTab"
 5 |       :items="tabs"
 6 |       :ui="{ list: { width: 'w-60' } }"
 7 |     >
 8 |       <template #settings="{ item }">
 9 |         <div class="text-black">Settings</div>
10 |       </template>
11 |       <template #billing="{ item }">
12 |         <SettingsBilling />
13 |       </template>
14 |     </UTabs>
15 |   </div>
16 | </template>
17 | 
18 | <script setup lang="ts">
19 | const tabs = [
20 |   {
21 |     slot: "settings",
22 |     label: "Settings",
23 |   },
24 |   {
25 |     slot: "billing",
26 |     label: "Billing",
27 |   },
28 | ];
29 | 
30 | const route = useRoute();
31 | const router = useRouter();
32 | 
33 | const selectedTab = computed({
34 |   get() {
35 |     const index = tabs.findIndex((item) => item.label === route.query.tab);
36 |     if (index === -1) {
37 |       return 0;
38 |     }
39 |     return index;
40 |   },
41 |   set(value) {
42 |     router.replace({
43 |       query: { tab: tabs[value].label },
44 |     });
45 |   },
46 | });
47 | </script>
48 | 
49 | <style scoped></style>
50 | 


--------------------------------------------------------------------------------
/server/api/stripe/portal.post.ts:
--------------------------------------------------------------------------------
 1 | import { getServerSession } from "#auth";
 2 | import { createOrRetrieveCustomer, stripe } from "@/utils/stripe";
 3 | 
 4 | export default defineEventHandler(async (event) => {
 5 |   const session = await getServerSession(event);
 6 |   if (!session) {
 7 |     throw createError({ statusMessage: "Unauthenticated", statusCode: 401 });
 8 |   }
 9 | 
10 |   const { prisma } = event.context;
11 | 
12 |   const user = await createOrRetrieveCustomer({
13 |     prisma,
14 |     userId: session.user.id,
15 |   });
16 | 
17 |   if (!user) {
18 |     throw createError({ statusMessage: "User not found", statusCode: 404 });
19 |   }
20 | 
21 |   try {
22 |     if (!user.stripeCustomerId) return;
23 |     const { url } = await stripe.billingPortal.sessions.create({
24 |       customer: user.stripeCustomerId,
25 |       return_url: `${useRuntimeConfig().public.BASE_URL}/settings/billing`,
26 |     });
27 |     return { url };
28 |   } catch (error: any) {
29 |     console.log(error);
30 |     throw createError({
31 |       statusMessage: "Stripe Portal error",
32 |       message: error.message,
33 |       statusCode: 500,
34 |     });
35 |   }
36 | });
37 | 


--------------------------------------------------------------------------------
/prisma/migrations/20230920124937_add_stripe_attributes/migration.sql:
--------------------------------------------------------------------------------
 1 | /*
 2 |   Warnings:
 3 | 
 4 |   - A unique constraint covering the columns `[stripeCustomerId]` on the table `User` will be added. If there are existing duplicate values, this will fail.
 5 | 
 6 | */
 7 | -- AlterTable
 8 | ALTER TABLE "User" ADD COLUMN     "stripeCustomerId" TEXT;
 9 | 
10 | -- CreateTable
11 | CREATE TABLE "Subscription" (
12 |     "id" TEXT NOT NULL,
13 |     "status" TEXT,
14 |     "priceId" TEXT,
15 |     "quantity" INTEGER,
16 |     "cancelAtPeriodEnd" BOOLEAN,
17 |     "created" TEXT NOT NULL,
18 |     "currentPeriodStart" TEXT NOT NULL,
19 |     "currentPeriodEnd" TEXT NOT NULL,
20 |     "endedAt" TEXT,
21 |     "cancelAt" TEXT,
22 |     "canceledAt" TEXT,
23 |     "trialStart" TEXT,
24 |     "trialEnd" TEXT,
25 |     "userId" TEXT NOT NULL,
26 | 
27 |     CONSTRAINT "Subscription_pkey" PRIMARY KEY ("id")
28 | );
29 | 
30 | -- CreateIndex
31 | CREATE UNIQUE INDEX "User_stripeCustomerId_key" ON "User"("stripeCustomerId");
32 | 
33 | -- AddForeignKey
34 | ALTER TABLE "Subscription" ADD CONSTRAINT "Subscription_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
35 | 


--------------------------------------------------------------------------------
/server/api/workspaces/[workspaceId]/index.get.ts:
--------------------------------------------------------------------------------
 1 | import { getServerSession } from "#auth";
 2 | import { z, parseParamsAs } from "@sidebase/nuxt-parse";
 3 | 
 4 | const paramSchema = z.object({
 5 |   workspaceId: z.string(),
 6 | });
 7 | 
 8 | export default defineEventHandler(async (event) => {
 9 |   const session = await getServerSession(event);
10 |   const { workspaceId } = parseParamsAs(event, paramSchema);
11 | 
12 |   if (!session) {
13 |     throw createError({ statusMessage: "Unauthenticated", statusCode: 403 });
14 |   }
15 | 
16 |   const { prisma } = event.context;
17 | 
18 |   const workspace = await prisma.workspace.findUnique({
19 |     where: {
20 |       id: workspaceId,
21 |       users: {
22 |         some: {
23 |           id: session.user.id,
24 |         },
25 |       },
26 |     },
27 |     include: {
28 |       forms: {
29 |         include: {
30 |           submissions: {
31 |             select: {
32 |               id: true,
33 |               createdAt: true,
34 |             },
35 |           },
36 |         },
37 |       },
38 |     },
39 |   });
40 |   if (!workspace) {
41 |     throw createError({ statusMessage: "Not Found", statusCode: 404 });
42 |   }
43 |   return { workspace };
44 | });
45 | 


--------------------------------------------------------------------------------
/server/api/forms/index.post.ts:
--------------------------------------------------------------------------------
 1 | import { getServerSession } from "#auth";
 2 | import { z, parseBodyAs } from "@sidebase/nuxt-parse";
 3 | 
 4 | const bodySchema = z.object({
 5 |   name: z.string(),
 6 |   workspaceId: z.string(),
 7 | });
 8 | 
 9 | export default defineEventHandler(async (event) => {
10 |   const session = await getServerSession(event);
11 |   const { name, workspaceId } = await parseBodyAs(event, bodySchema);
12 | 
13 |   if (!session) {
14 |     throw createError({ statusMessage: "Unauthenticated", statusCode: 403 });
15 |   }
16 | 
17 |   const { prisma } = event.context;
18 | 
19 |   // Check if user is a member of the workspace
20 |   const workspace = await prisma.workspace.findUnique({
21 |     where: {
22 |       id: workspaceId,
23 |       users: {
24 |         some: {
25 |           id: session.user.id,
26 |         },
27 |       },
28 |     },
29 |   });
30 | 
31 |   if (!workspace) {
32 |     throw createError({
33 |       statusMessage: "User is not a member of the workspace",
34 |       statusCode: 422,
35 |     });
36 |   }
37 | 
38 |   const form = await prisma.form.create({
39 |     data: {
40 |       name,
41 |       workspace: {
42 |         connect: {
43 |           id: workspaceId,
44 |         },
45 |       },
46 |     },
47 |   });
48 | 
49 |   return { form };
50 | });
51 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-app",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "build": "nuxt build",
 6 |     "dev": " nuxt dev --dotenv .env.development.local",
 7 |     "generate": "nuxt generate",
 8 |     "preview": "nuxt preview",
 9 |     "vercel-build": "prisma generate && prisma migrate deploy && nuxt build",
10 |     "postinstall": "nuxt prepare",
11 |     "prisma:migrate:dev": "npx prisma migrate dev",
12 |     "prisma:migrate:generate": "npx prisma generate",
13 |     "prisma:reset": "npx prisma migrate reset",
14 |     "prisma:studio": "npx prisma studio"
15 |   },
16 |   "devDependencies": {
17 |     "@nuxt/devtools": "latest",
18 |     "@nuxt/ui": "^2.11.1",
19 |     "@sidebase/nuxt-auth": "^0.6.3",
20 |     "dayjs-nuxt": "^2.1.9",
21 |     "nuxt": "^3.8.2",
22 |     "prisma": "^5.7.0"
23 |   },
24 |   "dependencies": {
25 |     "@heroicons/vue": "^2.0.18",
26 |     "@next-auth/prisma-adapter": "^1.0.7",
27 |     "@pinia/nuxt": "^0.5.1",
28 |     "@prisma/client": "5.7.0",
29 |     "@productdevbook/chatwoot": "^1.3.0",
30 |     "@sidebase/nuxt-parse": "^0.3.0",
31 |     "@stripe/stripe-js": "^2.2.1",
32 |     "@upstash/ratelimit": "^1.0.0",
33 |     "@vercel/kv": "^1.0.1",
34 |     "csv-stringify": "^6.4.5",
35 |     "highlight.js": "^11.9.0",
36 |     "inngest": "^3.7.1",
37 |     "next-auth": "4.21.1",
38 |     "pinia": "^2.1.7",
39 |     "resend": "^2.0.0",
40 |     "stripe": "^14.8.0"
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/server/api/auth/[...].ts:
--------------------------------------------------------------------------------
 1 | import { NuxtAuthHandler } from "#auth";
 2 | import GoogleProvider from "next-auth/providers/google";
 3 | import { PrismaAdapter } from "@next-auth/prisma-adapter";
 4 | import { PrismaClient } from "@prisma/client";
 5 | 
 6 | const runtimeConfig = useRuntimeConfig();
 7 | const prisma = new PrismaClient();
 8 | 
 9 | export default NuxtAuthHandler({
10 |   adapter: PrismaAdapter(prisma),
11 |   secret: useRuntimeConfig().API_ROUTE_SECRET,
12 |   session: {
13 |     strategy: "jwt",
14 |   },
15 |   debug: process.env.NODE_ENV === "development",
16 |   providers: [
17 |     // @ts-expect-error
18 |     GoogleProvider.default({
19 |       clientId: useRuntimeConfig().public.GOOGLE_CLIENT_ID,
20 |       clientSecret: runtimeConfig.GOOGLE_CLIENT_SECRET,
21 |     }),
22 |   ],
23 |   callbacks: {
24 |     session({ session, token }) {
25 |       session.user.id = token.id;
26 |       return session;
27 |     },
28 |     jwt({ token, account, user }) {
29 |       if (account) {
30 |         token.accessToken = account.access_token;
31 |         token.id = user?.id;
32 |       }
33 |       return token;
34 |     },
35 |   },
36 |   events: {
37 |     createUser: async (message) => {
38 |       await prisma.workspace.create({
39 |         data: {
40 |           name: "My workspace",
41 |           users: {
42 |             connect: {
43 |               id: message.user.id,
44 |             },
45 |           },
46 |         },
47 |       });
48 |     },
49 |   },
50 | });
51 | 


--------------------------------------------------------------------------------
/components/workspace/CreateForm.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <UModal v-model="showWorkspaceModal">
 3 |     <UCard>
 4 |       <template #header>
 5 |         <div class="flex items-center justify-between">
 6 |           <h2 class="text-xl font-semibold">Create Workspace</h2>
 7 |           <UButton
 8 |             icon="i-heroicons-x-mark"
 9 |             variant="ghost"
10 |             color="gray"
11 |             @click="showWorkspaceModal = false"
12 |           />
13 |         </div>
14 |       </template>
15 |       <form @submit.prevent="submit">
16 |         <UFormGroup label="Name" name="name">
17 |           <UInput v-model="formData.name" />
18 |         </UFormGroup>
19 |         <div class="flex justify-end">
20 |           <UButton type="submit" :loading="loading" class="mt-4">
21 |             Create
22 |           </UButton>
23 |         </div>
24 |       </form>
25 |     </UCard>
26 |   </UModal>
27 | </template>
28 | 
29 | <script setup lang="ts">
30 | import { storeToRefs } from "pinia";
31 | import { z } from "zod";
32 | import { useWorkspaceStore } from "~/store/workspace";
33 | 
34 | const workspaceStore = useWorkspaceStore();
35 | const { showWorkspaceModal } = storeToRefs(workspaceStore);
36 | 
37 | const schema = z.object({
38 |   name: z.string(),
39 | });
40 | 
41 | const formData = ref({ name: "" });
42 | const loading = ref(false);
43 | const submit = async () => {
44 |   loading.value = true;
45 |   await workspaceStore.createWorkspace(formData.value.name);
46 |   loading.value = false;
47 |   formData.value.name = "";
48 | };
49 | </script>
50 | 
51 | <style scoped></style>
52 | 


--------------------------------------------------------------------------------
/server/api/forms/[formId]/index.put.ts:
--------------------------------------------------------------------------------
 1 | import { getServerSession } from "#auth";
 2 | import z from "zod";
 3 | 
 4 | const bodySchema = z.object({
 5 |   name: z.string().optional(),
 6 |   closed: z.boolean().optional(),
 7 |   selfEmailNotification: z.boolean().optional(),
 8 |   selfEmails: z.array(z.string()).optional(),
 9 |   respondentEmailNotification: z.boolean().optional(),
10 |   fromName: z.string().nullable().optional(),
11 |   subject: z.string().nullable().optional(),
12 |   message: z.string().nullable().optional(),
13 |   customRedirect: z.boolean().optional(),
14 |   customRedirectUrl: z.string().optional(),
15 |   webhookEnabled: z.boolean().optional(),
16 |   webhookUrl: z.string().optional(),
17 | });
18 | 
19 | const paramSchema = z.object({
20 |   formId: z.string(),
21 | });
22 | 
23 | export default defineEventHandler(async (event) => {
24 |   const session = await getServerSession(event);
25 |   const body = await readValidatedBody(event, bodySchema.parse);
26 |   const { formId } = await getValidatedRouterParams(event, paramSchema.parse);
27 | 
28 |   if (!session) {
29 |     throw createError({ statusMessage: "Unauthenticated", statusCode: 403 });
30 |   }
31 | 
32 |   const { prisma } = event.context;
33 | 
34 |   const form = await prisma.form.update({
35 |     where: {
36 |       id: formId,
37 |       workspace: {
38 |         users: {
39 |           some: {
40 |             id: session.user.id,
41 |           },
42 |         },
43 |       },
44 |     },
45 |     data: body,
46 |   });
47 | 
48 |   if (!form) {
49 |     throw createError({ statusMessage: "Not Found", statusCode: 404 });
50 |   }
51 | 
52 |   return { form };
53 | });
54 | 


--------------------------------------------------------------------------------
/components/TheProfileMenu.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <UDropdown
 3 |     v-if="user"
 4 |     :items="items"
 5 |     :ui="{
 6 |       width: 'w-60',
 7 |       item: { disabled: 'cursor-text select-text' },
 8 |     }"
 9 |   >
10 |     <UButton color="gray" variant="ghost" class="flex items-center w-full">
11 |       <UAvatar :src="user.image" :alt="user.name" size="xs" />
12 |       <span
13 |         class="ml-2 text-sm font-medium text-gray-900 dark:text-white truncate"
14 |       >
15 |         {{ user.name }}
16 |       </span>
17 |     </UButton>
18 |     <template #account="{ item }">
19 |       <div class="text-left">
20 |         <p>{{ user.name }}</p>
21 |         <p class="text-sm font-medium text-gray-900 dark:text-white">
22 |           {{ item.label }}
23 |         </p>
24 |       </div>
25 |     </template>
26 |     <template #item="{ item }">
27 |       <UIcon
28 |         :name="item.icon"
29 |         class="h-4 w-4 text-gray-400 dark:text-gray-500"
30 |       />
31 |       <span class="truncate">{{ item.label }}</span>
32 |     </template>
33 |   </UDropdown>
34 | </template>
35 | 
36 | <script setup lang="ts">
37 | const { data, signOut } = useAuth();
38 | const user = computed(() => data.value?.user);
39 | 
40 | const items = computed(() => [
41 |   [
42 |     {
43 |       label: user.value?.email ?? "",
44 |       slot: "account",
45 |       disabled: true,
46 |     },
47 |   ],
48 |   [
49 |     {
50 |       label: "Sign out",
51 |       icon: "i-heroicons-arrow-left-on-rectangle",
52 |       click: async () => {
53 |         await signOut();
54 |         await useRouter().push("/login");
55 |       },
56 |     },
57 |   ],
58 | ]);
59 | </script>
60 | 
61 | <style scoped></style>
62 | 


--------------------------------------------------------------------------------
/components/CreateFormModal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <UModal
 3 |     :model-value="formModalWorkspaceId !== ''"
 4 |     @update:model-value="formModalWorkspaceId = ''"
 5 |   >
 6 |     <UCard>
 7 |       <template #header>
 8 |         <div class="flex items-center justify-between">
 9 |           <h2 class="text-xl font-semibold">Create Form</h2>
10 |           <UButton
11 |             icon="i-heroicons-x-mark"
12 |             variant="ghost"
13 |             color="gray"
14 |             @click="formModalWorkspaceId = ''"
15 |           />
16 |         </div>
17 |       </template>
18 |       <form @submit.prevent="submit">
19 |         <UFormGroup label="Name" name="name">
20 |           <UInput v-model="formData.name" />
21 |         </UFormGroup>
22 |         <div class="flex justify-end">
23 |           <UButton type="submit" :loading="loading" class="mt-4">
24 |             Create
25 |           </UButton>
26 |         </div>
27 |       </form>
28 |     </UCard>
29 |   </UModal>
30 | </template>
31 | 
32 | <script setup lang="ts">
33 | import { storeToRefs } from "pinia";
34 | import { z } from "zod";
35 | import { useWorkspaceStore } from "~/store/workspace";
36 | 
37 | const schema = z.object({
38 |   name: z.string(),
39 | });
40 | 
41 | const formData = ref({ name: "" });
42 | 
43 | const workspaceStore = useWorkspaceStore();
44 | const { formModalWorkspaceId } = storeToRefs(workspaceStore);
45 | 
46 | const loading = ref(false);
47 | const submit = async () => {
48 |   loading.value = true;
49 |   await workspaceStore.createForm(
50 |     formData.value.name,
51 |     formModalWorkspaceId.value
52 |   );
53 |   loading.value = false;
54 |   formData.value.name = "";
55 | };
56 | </script>
57 | 
58 | <style scoped></style>
59 | 


--------------------------------------------------------------------------------
/components/Sidebar/List.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div
 4 |       class="text-xs font-semibold text-gray-400 dark:text-gray-400 mb-1 pl-4 mt-8"
 5 |     >
 6 |       WORKSPACES
 7 |     </div>
 8 |     <div v-for="workspace in workspaceWithForms" :key="workspace.id">
 9 |       <SidebarWorkspaceRow
10 |         :active="workspace.id === useRoute().params.workspaceId"
11 |         @click="useRouter().push(`/workspaces/${workspace.id}`)"
12 |         @create-form="createForm(workspace.id)"
13 |       >
14 |         {{ workspace.name }}
15 |       </SidebarWorkspaceRow>
16 |       <SidebarFormRow
17 |         v-for="form in workspace.forms"
18 |         :key="form.id"
19 |         :active="form.id === useRoute().params.formId"
20 |         @click="useRouter().push(`/forms/${form.id}`)"
21 |       >
22 |         {{ form.name }}
23 |       </SidebarFormRow>
24 |     </div>
25 |     <UButton
26 |       icon="i-heroicons-plus"
27 |       color="gray"
28 |       variant="ghost"
29 |       size="xs"
30 |       block
31 |       class="mt-2"
32 |       @click="showWorkspaceModal = true"
33 |     >
34 |       Create new workspace
35 |     </UButton>
36 | 
37 |     <WorkspaceCreateForm />
38 |     <CreateFormModal />
39 |   </div>
40 | </template>
41 | 
42 | <script setup lang="ts">
43 | import { storeToRefs } from "pinia";
44 | import { useWorkspaceStore } from "~/store/workspace";
45 | 
46 | const workspaceStore = useWorkspaceStore();
47 | const { workspaceWithForms, formModalWorkspaceId, showWorkspaceModal } =
48 |   storeToRefs(workspaceStore);
49 | 
50 | await workspaceStore.getWorkspaceWithForms();
51 | 
52 | function createForm(wId: string) {
53 |   formModalWorkspaceId.value = wId;
54 | }
55 | </script>
56 | 
57 | <style scoped></style>
58 | 


--------------------------------------------------------------------------------
/components/Lp/Cta.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="bg-white">
 3 |     <div class="mx-auto max-w-7xl py-24 sm:px-6 sm:py-32 lg:px-8">
 4 |       <div
 5 |         class="relative isolate overflow-hidden bg-gray-900 px-6 pt-16 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0"
 6 |       >
 7 |         <div
 8 |           class="mx-auto max-w-md text-center lg:mx-0 lg:flex-auto lg:py-32 lg:text-left"
 9 |         >
10 |           <h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">
11 |             Ready to Simplify Your Form Management?
12 |           </h2>
13 |           <p class="mt-6 text-lg leading-8 text-gray-300">
14 |             Experience the power of seamless integration, real-time
15 |             notifications, spam filtering, and more.
16 |           </p>
17 |           <div
18 |             class="mt-10 flex items-center justify-center gap-x-6 lg:justify-start"
19 |           >
20 |             <UButton size="lg" @click="continueWithGoogle">
21 |               Get started
22 |             </UButton>
23 |           </div>
24 |         </div>
25 |         <div class="relative mt-16 h-80 lg:mt-8">
26 |           <img
27 |             class="absolute left-0 top-0 w-[57rem] max-w-none rounded-md bg-white/5 ring-1 ring-white/10"
28 |             src="/featureHero.png"
29 |             alt="App screenshot"
30 |             width="1824"
31 |             height="1080"
32 |           />
33 |         </div>
34 |       </div>
35 |     </div>
36 |   </div>
37 | </template>
38 | 
39 | <script setup lang="ts">
40 | const { signIn } = useAuth();
41 | async function continueWithGoogle() {
42 |   await signIn("google", { callbackUrl: "/dashboard" });
43 | }
44 | </script>
45 | 
46 | <style scoped></style>
47 | 


--------------------------------------------------------------------------------
/server/api/forms/[formId]/submissions/index.get.ts:
--------------------------------------------------------------------------------
 1 | import { getServerSession } from "#auth";
 2 | import { z, parseParamsAs, parseQueryAs } from "@sidebase/nuxt-parse";
 3 | 
 4 | const paramSchema = z.object({
 5 |   formId: z.string(),
 6 | });
 7 | 
 8 | const querySchema = z.object({
 9 |   skip: z.string().optional().default("0").transform(Number),
10 |   take: z.string().optional().default("10").transform(Number),
11 |   isSpam: z
12 |     .string()
13 |     .optional()
14 |     .default("false")
15 |     .transform((v) => v === "true"),
16 | });
17 | 
18 | export default defineEventHandler(async (event) => {
19 |   const session = await getServerSession(event);
20 |   const { formId } = parseParamsAs(event, paramSchema);
21 |   const { skip, take, isSpam } = parseQueryAs(event, querySchema);
22 |   if (!session) {
23 |     throw createError({ statusMessage: "Unauthenticated", statusCode: 403 });
24 |   }
25 | 
26 |   const { prisma } = event.context;
27 | 
28 |   const query = {
29 |     where: {
30 |       formId,
31 |       isSpam,
32 |       form: {
33 |         workspace: {
34 |           users: {
35 |             some: {
36 |               id: session.user.id,
37 |             },
38 |           },
39 |         },
40 |       },
41 |     },
42 |   };
43 |   const [submissions, total, result] = await prisma.$transaction([
44 |     prisma.submission.findMany({
45 |       where: query.where,
46 |       orderBy: {
47 |         createdAt: "desc",
48 |       },
49 |       skip: skip,
50 |       take: take,
51 |     }),
52 |     prisma.submission.count(query),
53 |     prisma.$queryRaw`SELECT jsonb_object_keys(data) AS key FROM public."Submission" WHERE "formId"=${formId} GROUP BY key`,
54 |   ]);
55 | 
56 |   const keys = ((result as any).map((r: any) => r.key) as string[]).filter(
57 |     (key) => !key.startsWith("_")
58 |   );
59 | 
60 |   return {
61 |     submissions,
62 |     keys,
63 |     pagination: { skip, take, total },
64 |   };
65 | });
66 | 


--------------------------------------------------------------------------------
/server/api/forms/[formId]/submissions/csv.get.ts:
--------------------------------------------------------------------------------
 1 | import { getServerSession } from "#auth";
 2 | import { z, parseParamsAs, parseQueryAs } from "@sidebase/nuxt-parse";
 3 | import { stringify } from "csv-stringify/sync";
 4 | 
 5 | const paramSchema = z.object({
 6 |   formId: z.string(),
 7 | });
 8 | 
 9 | const querySchema = z.object({
10 |   isSpam: z
11 |     .string()
12 |     .optional()
13 |     .default("false")
14 |     .transform((v) => v === "true"),
15 | });
16 | 
17 | export default defineEventHandler(async (event) => {
18 |   const session = await getServerSession(event);
19 |   const { formId } = parseParamsAs(event, paramSchema);
20 |   const { isSpam } = parseQueryAs(event, querySchema);
21 |   if (!session) {
22 |     throw createError({ statusMessage: "Unauthenticated", statusCode: 403 });
23 |   }
24 | 
25 |   const { prisma } = event.context;
26 | 
27 |   const query = {
28 |     where: {
29 |       formId,
30 |       isSpam,
31 |       form: {
32 |         workspace: {
33 |           users: {
34 |             some: {
35 |               id: session.user.id,
36 |             },
37 |           },
38 |         },
39 |       },
40 |     },
41 |   };
42 |   const submissions = await prisma.submission.findMany({
43 |     where: query.where,
44 |     orderBy: {
45 |       createdAt: "desc",
46 |     },
47 |     select: {
48 |       createdAt: true,
49 |       data: true,
50 |     },
51 |   });
52 | 
53 |   const formattedSubmissions = submissions.map((submission) => {
54 |     return {
55 |       createdAt: new Date(submission.createdAt).toISOString(),
56 |       ...(submission.data as object),
57 |     };
58 |   });
59 | 
60 |   // Convert submissions to CSV
61 |   const csv = stringify(formattedSubmissions, { header: true });
62 |   setResponseHeader(event, "Content-Type", "text/csv");
63 |   setResponseHeader(
64 |     event,
65 |     "Content-Disposition",
66 |     "attachment; filename=submissions.csv"
67 |   );
68 |   await send(event, csv, "text/csv");
69 | });
70 | 


--------------------------------------------------------------------------------
/server/api/stripe/checkout.post.ts:
--------------------------------------------------------------------------------
 1 | import { getServerSession } from "#auth";
 2 | import { z, parseBodyAs } from "@sidebase/nuxt-parse";
 3 | import { createOrRetrieveCustomer, stripe } from "@/utils/stripe";
 4 | 
 5 | const bodySchema = z.object({
 6 |   priceId: z.string(),
 7 | });
 8 | 
 9 | export default defineEventHandler(async (event) => {
10 |   const session = await getServerSession(event);
11 |   const { priceId } = await parseBodyAs(event, bodySchema);
12 | 
13 |   if (!session) {
14 |     throw createError({ statusMessage: "Unauthenticated", statusCode: 401 });
15 |   }
16 | 
17 |   const { prisma } = event.context;
18 | 
19 |   const user = await createOrRetrieveCustomer({
20 |     prisma,
21 |     userId: session.user.id,
22 |   });
23 | 
24 |   if (!user) {
25 |     throw createError({ statusMessage: "User not found", statusCode: 404 });
26 |   }
27 | 
28 |   try {
29 |     const stripeSession = await stripe.checkout.sessions.create({
30 |       mode: "subscription",
31 |       payment_method_types: ["card"],
32 |       client_reference_id: user.id,
33 |       customer: user.stripeCustomerId || undefined,
34 |       line_items: [
35 |         {
36 |           price: priceId,
37 |           quantity: 1,
38 |         },
39 |       ],
40 |       allow_promotion_codes: true,
41 |       success_url: `${useRuntimeConfig().public.BASE_URL}/settings/billing`,
42 |       cancel_url: `${useRuntimeConfig().public.BASE_URL}/settings/billing`,
43 |     });
44 |     if (stripeSession.url) {
45 |       return {
46 |         stripeSession,
47 |       };
48 |     } else {
49 |       throw createError({
50 |         statusMessage: "Stripe checkout session error",
51 |         message: "Stripe checkout session error",
52 |         statusCode: 500,
53 |       });
54 |     }
55 |   } catch (error: any) {
56 |     console.log(error);
57 | 
58 |     throw createError({
59 |       statusMessage: "Stripe checkout session error",
60 |       message: error.message,
61 |       statusCode: 500,
62 |     });
63 |   }
64 | });
65 | 


--------------------------------------------------------------------------------
/prisma/migrations/20230909054307_create_feature_tables/migration.sql:
--------------------------------------------------------------------------------
 1 | -- CreateTable
 2 | CREATE TABLE "Workspace" (
 3 |     "id" TEXT NOT NULL,
 4 |     "name" TEXT NOT NULL,
 5 |     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
 6 |     "updatedAt" TIMESTAMP(3) NOT NULL,
 7 | 
 8 |     CONSTRAINT "Workspace_pkey" PRIMARY KEY ("id")
 9 | );
10 | 
11 | -- CreateTable
12 | CREATE TABLE "Form" (
13 |     "id" TEXT NOT NULL,
14 |     "name" TEXT NOT NULL,
15 |     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
16 |     "updatedAt" TIMESTAMP(3) NOT NULL,
17 |     "workspaceId" TEXT NOT NULL,
18 | 
19 |     CONSTRAINT "Form_pkey" PRIMARY KEY ("id")
20 | );
21 | 
22 | -- CreateTable
23 | CREATE TABLE "Submission" (
24 |     "id" TEXT NOT NULL,
25 |     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
26 |     "data" JSONB NOT NULL,
27 |     "formId" TEXT NOT NULL,
28 | 
29 |     CONSTRAINT "Submission_pkey" PRIMARY KEY ("id")
30 | );
31 | 
32 | -- CreateTable
33 | CREATE TABLE "_UserToWorkspace" (
34 |     "A" TEXT NOT NULL,
35 |     "B" TEXT NOT NULL
36 | );
37 | 
38 | -- CreateIndex
39 | CREATE UNIQUE INDEX "_UserToWorkspace_AB_unique" ON "_UserToWorkspace"("A", "B");
40 | 
41 | -- CreateIndex
42 | CREATE INDEX "_UserToWorkspace_B_index" ON "_UserToWorkspace"("B");
43 | 
44 | -- AddForeignKey
45 | ALTER TABLE "Form" ADD CONSTRAINT "Form_workspaceId_fkey" FOREIGN KEY ("workspaceId") REFERENCES "Workspace"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
46 | 
47 | -- AddForeignKey
48 | ALTER TABLE "Submission" ADD CONSTRAINT "Submission_formId_fkey" FOREIGN KEY ("formId") REFERENCES "Form"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
49 | 
50 | -- AddForeignKey
51 | ALTER TABLE "_UserToWorkspace" ADD CONSTRAINT "_UserToWorkspace_A_fkey" FOREIGN KEY ("A") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
52 | 
53 | -- AddForeignKey
54 | ALTER TABLE "_UserToWorkspace" ADD CONSTRAINT "_UserToWorkspace_B_fkey" FOREIGN KEY ("B") REFERENCES "Workspace"("id") ON DELETE CASCADE ON UPDATE CASCADE;
55 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | // https://nuxt.com/docs/api/configuration/nuxt-config
 2 | export default defineNuxtConfig({
 3 |   devtools: { enabled: true },
 4 |   modules: [
 5 |     "@nuxt/ui",
 6 |     "@sidebase/nuxt-auth",
 7 |     "dayjs-nuxt",
 8 |     "@pinia/nuxt",
 9 |     "@productdevbook/chatwoot",
10 |   ],
11 |   app: {
12 |     head: {
13 |       title: "OpenformStack",
14 |       meta: [
15 |         {
16 |           name: "description",
17 |           content:
18 |             "Open source form backend that allows you to collect form submissions without writing any backend code",
19 |         },
20 |         { charset: "utf-8" },
21 |       ],
22 |     },
23 |   },
24 |   runtimeConfig: {
25 |     GOOGLE_CLIENT_SECRET: process.env.GOOGLE_CLIENT_SECRET,
26 |     API_ROUTE_SECRET: process.env.API_ROUTE_SECRET,
27 |     RESEND_API_KEY: process.env.RESEND_API_KEY,
28 |     STRIPE_SECRET_KEY: process.env.STRIPE_SECRET_KEY,
29 |     STRIPE_WEBHOOK_SECRET: process.env.STRIPE_WEBHOOK_SECRET,
30 |     PRO_MONTHLY_PRICE_ID: process.env.PRO_MONTHLY_PRICE_ID,
31 |     PRO_YEARLY_PRICE_ID: process.env.PRO_YEARLY_PRICE_ID,
32 |     BYESPAM_API_KEY: process.env.BYESPAM_API_KEY,
33 |     public: {
34 |       FROM_MAIL: process.env.FROM_MAIL,
35 |       GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,
36 |       BASE_URL: process.env.BASE_URL,
37 | 
38 |       // SEO
39 |       siteUrl: process.env.BASE_URL || "https://openformstack.com",
40 |       siteName: "OpenformStack",
41 |       siteDescription:
42 |         "Open source form backend that allows you to collect form submissions without writing any backend code",
43 |       language: "en",
44 |     },
45 |   },
46 |   pinia: {
47 |     autoImports: ["defineStore", ["defineStore", "definePiniaStore"]],
48 |   },
49 |   colorMode: {
50 |     preference: "light",
51 |   },
52 |   chatwoot: {
53 |     init: {
54 |       websiteToken: process.env.CHATWOOT_WEBSITE_TOKEN,
55 |     },
56 |     settings: {
57 |       locale: "en",
58 |       position: "left",
59 |       launcherTitle: "Chat",
60 |     },
61 |   },
62 | });
63 | 


--------------------------------------------------------------------------------
/prisma/migrations/20230908150845_create_user_account/migration.sql:
--------------------------------------------------------------------------------
 1 | -- CreateTable
 2 | CREATE TABLE "Account" (
 3 |     "id" TEXT NOT NULL,
 4 |     "userId" TEXT NOT NULL,
 5 |     "type" TEXT NOT NULL,
 6 |     "provider" TEXT NOT NULL,
 7 |     "providerAccountId" TEXT NOT NULL,
 8 |     "refresh_token" TEXT,
 9 |     "access_token" TEXT,
10 |     "expires_at" INTEGER,
11 |     "token_type" TEXT,
12 |     "scope" TEXT,
13 |     "id_token" TEXT,
14 |     "session_state" TEXT,
15 | 
16 |     CONSTRAINT "Account_pkey" PRIMARY KEY ("id")
17 | );
18 | 
19 | -- CreateTable
20 | CREATE TABLE "Session" (
21 |     "id" TEXT NOT NULL,
22 |     "sessionToken" TEXT NOT NULL,
23 |     "userId" TEXT NOT NULL,
24 |     "expires" TIMESTAMP(3) NOT NULL,
25 | 
26 |     CONSTRAINT "Session_pkey" PRIMARY KEY ("id")
27 | );
28 | 
29 | -- CreateTable
30 | CREATE TABLE "User" (
31 |     "id" TEXT NOT NULL,
32 |     "name" TEXT,
33 |     "email" TEXT,
34 |     "emailVerified" TIMESTAMP(3),
35 |     "image" TEXT,
36 |     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
37 | 
38 |     CONSTRAINT "User_pkey" PRIMARY KEY ("id")
39 | );
40 | 
41 | -- CreateTable
42 | CREATE TABLE "VerificationToken" (
43 |     "identifier" TEXT NOT NULL,
44 |     "token" TEXT NOT NULL,
45 |     "expires" TIMESTAMP(3) NOT NULL
46 | );
47 | 
48 | -- CreateIndex
49 | CREATE UNIQUE INDEX "Account_userId_key" ON "Account"("userId");
50 | 
51 | -- CreateIndex
52 | CREATE UNIQUE INDEX "Account_provider_providerAccountId_key" ON "Account"("provider", "providerAccountId");
53 | 
54 | -- CreateIndex
55 | CREATE UNIQUE INDEX "Session_sessionToken_key" ON "Session"("sessionToken");
56 | 
57 | -- CreateIndex
58 | CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
59 | 
60 | -- CreateIndex
61 | CREATE UNIQUE INDEX "VerificationToken_token_key" ON "VerificationToken"("token");
62 | 
63 | -- CreateIndex
64 | CREATE UNIQUE INDEX "VerificationToken_identifier_token_key" ON "VerificationToken"("identifier", "token");
65 | 
66 | -- AddForeignKey
67 | ALTER TABLE "Account" ADD CONSTRAINT "Account_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
68 | 
69 | -- AddForeignKey
70 | ALTER TABLE "Session" ADD CONSTRAINT "Session_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
71 | 


--------------------------------------------------------------------------------
/components/Form/Integrations.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1 class="text-2xl font-medium">Integrations</h1>
 4 |     <p class="text-sm text-gray-600 dark:text-gray-200">
 5 |       Connect OpenformStack with your favourite integrations
 6 |     </p>
 7 |     <div class="mt-4 grid grid-cols-3">
 8 |       <UCard>
 9 |         <div class="flex items-center justify-between">
10 |           <div class="text-lg font-medium">Webhooks</div>
11 |           <UToggle v-model="webbookEnabled" />
12 |         </div>
13 |         <div>Trigger webhook on new submission</div>
14 |         <form v-if="webbookEnabled" @submit.prevent="saveWebhook" class="mt-4">
15 |           <UFormGroup label="Webhook URL" required>
16 |             <UInput v-model="webhookUrl" required />
17 |           </UFormGroup>
18 |           <div v-if="showSave" class="flex justify-end">
19 |             <UButton type="submit" class="mt-4" :loading="loading">
20 |               Save
21 |             </UButton>
22 |           </div>
23 |         </form>
24 |       </UCard>
25 |     </div>
26 |   </div>
27 | </template>
28 | 
29 | <script setup lang="ts">
30 | import { useWorkspaceStore } from "~/store/workspace";
31 | 
32 | const props = defineProps({
33 |   formId: {
34 |     type: String,
35 |     required: true,
36 |   },
37 |   webbookEnabled: {
38 |     type: Boolean,
39 |     required: true,
40 |   },
41 |   webhookUrl: {
42 |     type: String,
43 |     required: false,
44 |     default: "",
45 |   },
46 | });
47 | 
48 | const webbookEnabled = ref(false);
49 | const webhookUrl = ref("");
50 | 
51 | onMounted(() => {
52 |   webbookEnabled.value = props.webbookEnabled;
53 |   webhookUrl.value = props.webhookUrl;
54 | });
55 | 
56 | const showSave = computed(() => {
57 |   return (
58 |     webbookEnabled.value !== props.webbookEnabled ||
59 |     webhookUrl.value !== props.webhookUrl
60 |   );
61 | });
62 | 
63 | const workspaceStore = useWorkspaceStore();
64 | const loading = ref(false);
65 | async function saveWebhook() {
66 |   loading.value = true;
67 |   await workspaceStore.updateForm(props.formId, {
68 |     webhookEnabled: webbookEnabled.value,
69 |     webhookUrl: webhookUrl.value,
70 |   });
71 |   loading.value = false;
72 | }
73 | 
74 | watch(
75 |   () => webbookEnabled.value,
76 |   async (val) => {
77 |     if (!val) {
78 |       await workspaceStore.updateForm(props.formId, {
79 |         webhookEnabled: false,
80 |       });
81 |     }
82 |   }
83 | );
84 | </script>
85 | 
86 | <style scoped></style>
87 | 


--------------------------------------------------------------------------------
/pages/forms/[formId].vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="p-4">
 3 |     <h1 class="text-2xl font-medium">
 4 |       {{ form?.name }}
 5 |     </h1>
 6 | 
 7 |     <UTabs v-model="selectedTab" :items="tabs" class="mt-4">
 8 |       <template #item="{ item }">
 9 |         <div>
10 |           <div v-if="item.key === 'submissions'">
11 |             <FormSubmissions :form-id="formId" />
12 |           </div>
13 |           <div v-if="item.key === 'setup'" class="mt-8">
14 |             <FormSetup :form-id="formId" />
15 |           </div>
16 |           <div v-if="item.key === 'integrations'" class="mt-8">
17 |             <FormIntegrations
18 |               v-if="form"
19 |               :form-id="formId"
20 |               :webbook-enabled="form.webhookEnabled"
21 |               :webhook-url="form.webhookUrl ?? undefined"
22 |             />
23 |           </div>
24 |           <div v-if="item.key === 'settings'" class="mt-8">
25 |             <FormSettings v-if="form" :form="form" />
26 |           </div>
27 |         </div>
28 |       </template>
29 |     </UTabs>
30 |   </div>
31 | </template>
32 | 
33 | <script setup lang="ts">
34 | import { storeToRefs } from "pinia";
35 | import { useWorkspaceStore } from "~/store/workspace";
36 | 
37 | definePageMeta({ middleware: "auth", title: "Forms" });
38 | 
39 | const route = useRoute();
40 | const router = useRouter();
41 | 
42 | const selectedTab = computed({
43 |   get() {
44 |     const index = tabs.findIndex((item) => item.label === route.query.tab);
45 |     if (index === -1) {
46 |       return 0;
47 |     }
48 |     return index;
49 |   },
50 |   set(value) {
51 |     router.replace({
52 |       query: { tab: tabs[value].label },
53 |     });
54 |   },
55 | });
56 | 
57 | const formId = computed(() => useRoute().params.formId as string);
58 | const { workspaceWithForms } = storeToRefs(useWorkspaceStore());
59 | 
60 | const form = computed(() => {
61 |   for (const workspace of workspaceWithForms.value) {
62 |     const foundForm = workspace.forms.find((form) => form.id === formId.value);
63 |     if (foundForm) {
64 |       return foundForm;
65 |     }
66 |   }
67 |   return undefined;
68 | });
69 | 
70 | const tabs = [
71 |   {
72 |     key: "submissions",
73 |     label: "Submissions",
74 |   },
75 |   {
76 |     key: "setup",
77 |     label: "Setup",
78 |   },
79 |   {
80 |     key: "integrations",
81 |     label: "Integrations",
82 |   },
83 |   {
84 |     key: "settings",
85 |     label: "Settings",
86 |   },
87 | ];
88 | </script>
89 | 
90 | <style scoped></style>
91 | 


--------------------------------------------------------------------------------
/pages/dashboard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="p-4">
 3 |     <div
 4 |       v-for="workspace in workspaceWithForms"
 5 |       :key="workspace.id"
 6 |       class="mb-12"
 7 |     >
 8 |       <div
 9 |         class="pb-2 border-b dark:border-gray-100/10 flex items-center justify-between"
10 |       >
11 |         <h2 class="text-2xl">
12 |           {{ workspace.name }}
13 |         </h2>
14 |         <UButton
15 |           icon="i-heroicons-plus"
16 |           color="gray"
17 |           variant="ghost"
18 |           size="xs"
19 |           @click="formModalWorkspaceId = workspace.id"
20 |         >
21 |           Create Form
22 |         </UButton>
23 |       </div>
24 | 
25 |       <div
26 |         v-if="workspace.forms.length > 0"
27 |         class="grid grid-cols-2 md:grid-cols-3 gap-4 my-4"
28 |       >
29 |         <UCard
30 |           v-for="form in workspace.forms"
31 |           :key="form.id"
32 |           class="cursor-pointer"
33 |           :ui="{ background: 'hover:bg-gray-50 hover:dark:bg-gray-800/60' }"
34 |           @click="useRouter().push(`/forms/${form.id}`)"
35 |         >
36 |           <div class="text-lg font-medium">
37 |             {{ form.name }}
38 |           </div>
39 |           <div class="dark:text-gray-400 text-gray-600">
40 |             <div class="text-sm">
41 |               Last updated:
42 |               {{ dayjs(form.updatedAt).format("MMM DD, YYYY HH:mm") }}
43 |             </div>
44 |           </div>
45 |         </UCard>
46 |       </div>
47 |       <div v-else>
48 |         <div class="flex items-center justify-center h-32 mt-8">
49 |           <div class="text-gray-400 text-center">
50 |             <UIcon name="i-heroicons-document-text" class="h-12 w-12" />
51 |             <p class="mt-2 text-sm">You don't have any forms yet.</p>
52 |             <p class="mt-2 text-sm">
53 |               <UButton
54 |                 icon="i-heroicons-plus"
55 |                 color="gray"
56 |                 variant="ghost"
57 |                 size="xs"
58 |                 @click="formModalWorkspaceId = workspace.id"
59 |               >
60 |                 Create Form
61 |               </UButton>
62 |             </p>
63 |           </div>
64 |         </div>
65 |       </div>
66 |     </div>
67 |   </div>
68 | </template>
69 | 
70 | <script setup lang="ts">
71 | import { storeToRefs } from "pinia";
72 | import { useWorkspaceStore } from "~/store/workspace";
73 | 
74 | definePageMeta({ middleware: "auth" });
75 | const dayjs = useDayjs();
76 | 
77 | const workspaceStore = useWorkspaceStore();
78 | const { workspaceWithForms, formModalWorkspaceId, showWorkspaceModal } =
79 |   storeToRefs(workspaceStore);
80 | </script>
81 | 
82 | <style scoped></style>
83 | 


--------------------------------------------------------------------------------
/pages/workspaces/[workspaceId].vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="p-4">
 3 |     <div class="flex items-center justify-between mb-8">
 4 |       <h1 class="text-2xl font-medium">
 5 |         {{ data?.workspace.name }}
 6 |       </h1>
 7 |       <UButton
 8 |         icon="i-heroicons-plus"
 9 |         @click="formModalWorkspaceId = workspaceId"
10 |       >
11 |         Create Form
12 |       </UButton>
13 |     </div>
14 |     <div
15 |       v-if="data && data.workspace.forms.length > 0"
16 |       class="grid grid-cols-2 md:grid-cols-3 gap-2"
17 |     >
18 |       <UCard
19 |         v-for="form in data?.workspace.forms"
20 |         :key="form.id"
21 |         class="cursor-pointer"
22 |         :ui="{ background: 'hover:bg-gray-50 hover:dark:bg-gray-800/60' }"
23 |         @click="useRouter().push(`/forms/${form.id}`)"
24 |       >
25 |         <div class="text-lg font-medium">
26 |           {{ form.name }}
27 |         </div>
28 |         <div class="dark:text-gray-400 text-gray-600">
29 |           <div>Submissions: {{ form.submissions.length }}</div>
30 |           <div class="text-sm">
31 |             Last updated:
32 |             {{ dayjs(form.updatedAt).format("MMM DD, YYYY HH:mm") }}
33 |           </div>
34 |         </div>
35 |       </UCard>
36 |     </div>
37 |     <div v-else>
38 |       <div class="flex items-center justify-center h-32 mt-8">
39 |         <div class="text-gray-400 text-center">
40 |           <UIcon name="i-heroicons-document-text" class="h-12 w-12" />
41 |           <p class="mt-2 text-sm">You don't have any forms yet.</p>
42 |           <p class="mt-2 text-sm">
43 |             <UButton
44 |               icon="i-heroicons-plus"
45 |               color="gray"
46 |               variant="ghost"
47 |               size="xs"
48 |               @click="formModalWorkspaceId = workspaceId"
49 |             >
50 |               Create Form
51 |             </UButton>
52 |           </p>
53 |         </div>
54 |       </div>
55 |     </div>
56 |   </div>
57 | </template>
58 | 
59 | <script setup lang="ts">
60 | import { storeToRefs } from "pinia";
61 | import { useWorkspaceStore } from "~/store/workspace";
62 | import type { WorkspaceWithForms } from "~/types";
63 | 
64 | definePageMeta({
65 |   middleware: "auth",
66 |   title: "Workspace",
67 | });
68 | const dayjs = useDayjs();
69 | const workspaceId = computed(() => useRoute().params.workspaceId as string);
70 | 
71 | const workspace = ref<WorkspaceWithForms | undefined>(undefined);
72 | const { data } = await useFetch(`/api/workspaces/${workspaceId.value}`);
73 | workspace.value = data.value?.workspace as WorkspaceWithForms | undefined;
74 | 
75 | const { formModalWorkspaceId } = storeToRefs(useWorkspaceStore());
76 | </script>
77 | 
78 | <style scoped></style>
79 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Openformstack
 2 | 
 3 | This repository contains a Nuxt 3 application for creating and managing headless forms. The application uses Prisma for ORM and provides a user interface for creating and managing workspaces and forms.
 4 | 
 5 | ## Requirements
 6 | 1. Node.js( ***version 18 or higher*** )
 7 | 
 8 | 2. Yarn package installer
 9 | 
10 | 3. Docker
11 | 
12 | 4. Docker compose.exe if the .exe file is not included in the docker setup installation then download it from the docker page
13 | 
14 | ## Setup Process
15 | 
16 | 1. Clone the repository
17 | 
18 | ```bash
19 | git clone https://github.com/your-repo/OpenformStack.git
20 | cd OpenformStack
21 | ```
22 | 2. Install Dependencies
23 |    
24 | ```bash
25 | yarn install
26 | ```
27 | 3. Create a `.env` file in the root directory of the project by copying the `.env.example` file:
28 | 
29 | for linux/macOS users
30 | ```bash
31 | cp .env.example .env
32 | ```
33 | for windows users
34 | ```bash
35 | copy .env.example .env
36 | ```
37 | 
38 | 4. Create a .env.developer.local file in the root folder of the project
39 |    
40 | For macOS/Linux 
41 | ```bash
42 | touch .env.development.local
43 | ```
44 | For windows
45 | ```bash
46 | type nul > .env.development.local
47 | ```
48 | 5. Copy the code into the .env.development.local file
49 | 
50 | ```bash
51 | GOOGLE_CLIENT_ID=508816847621-jd5rqskggrh7veqi4pqjtj3nfleqt405.apps.googleusercontent.com
52 | GOOGLE_CLIENT_SECRET={ask admin for secret}
53 | API_ROUTE_SECRET=(ask admin for secret}
54 | AUTH_ORIGIN="http://localhost:3000"
55 | BASE_URL="http://localhost:3000"
56 | ```
57 | 
58 | 6. Start the PostgreSQL database using Docker Compose:
59 | 
60 | ```bash
61 | docker-compose up -d
62 | ```
63 | 7. Run the prisma database migrations and generate the Prisma client:
64 | 
65 | ```bash
66 | yarn prisma:migrate:dev
67 | yarn prisma:migrate:generate
68 | ```
69 | 8. Start the development server:
70 | 
71 | ```bash
72 | yarn dev
73 | ```
74 | 
75 | If you are facing an error in signing up then delete yarn lock file and node_modules file and re-install the yarn packages.
76 | 
77 | Yarn commands are often used in the context of database migrations. Here's what each of the commands you mentioned typically does:
78 | 
79 | a) yarn prisma:migrate:dev:
80 | 
81 | This command is usually used to apply pending database migrations in a development environment.
82 | It runs the migrations that have been generated but not yet applied to the database.
83 | 
84 | 
85 | b) yarn prisma:migrate:generate:
86 | This command generates new Prisma migration files based on changes in your Prisma schema.
87 | It compares the current state of your database with the Prisma schema and generates migration files that represent the changes needed to bring the database schema in sync with the Prisma schema.
88 | 


--------------------------------------------------------------------------------
/server/api/stripe/webhook.post.ts:
--------------------------------------------------------------------------------
 1 | import { manageSubscriptionStatusChange, stripe } from "@/utils/stripe";
 2 | import Stripe from "stripe";
 3 | 
 4 | const relevantEvents = new Set([
 5 |   "checkout.session.completed",
 6 |   "customer.subscription.created",
 7 |   "customer.subscription.updated",
 8 |   "customer.subscription.deleted",
 9 | ]);
10 | 
11 | export default defineEventHandler(async (event) => {
12 |   const body = await readRawBody(event);
13 | 
14 |   const sig = event.headers.get("stripe-signature");
15 | 
16 |   const webhookSecret = useRuntimeConfig().STRIPE_WEBHOOK_SECRET;
17 |   let stripeEvent: Stripe.Event;
18 | 
19 |   try {
20 |     if (!sig || !webhookSecret || !body) return;
21 |     stripeEvent = stripe.webhooks.constructEvent(
22 |       body,
23 |       sig,
24 |       useRuntimeConfig().STRIPE_WEBHOOK_SECRET
25 |     );
26 |   } catch (err: any) {
27 |     console.log("err", err);
28 | 
29 |     throw createError({
30 |       statusMessage: "Webhook Error",
31 |       message: err.message,
32 |       statusCode: 400,
33 |     });
34 |   }
35 |   const { prisma } = event.context;
36 | 
37 |   if (relevantEvents.has(stripeEvent.type)) {
38 |     try {
39 |       switch (stripeEvent.type) {
40 |         case "customer.subscription.created":
41 |         case "customer.subscription.updated":
42 |         case "customer.subscription.deleted":
43 |           const subscription = stripeEvent.data.object as Stripe.Subscription;
44 |           await manageSubscriptionStatusChange(
45 |             prisma,
46 |             subscription.id,
47 |             subscription.customer as string
48 |           );
49 |           break;
50 |         case "checkout.session.completed":
51 |           const checkoutSession = stripeEvent.data
52 |             .object as Stripe.Checkout.Session;
53 |           if (checkoutSession.mode === "subscription") {
54 |             const user = await prisma.user.update({
55 |               where: {
56 |                 id: checkoutSession.client_reference_id as string,
57 |               },
58 |               data: {
59 |                 stripeCustomerId: checkoutSession.customer as string,
60 |               },
61 |             });
62 | 
63 |             const subscriptionId = checkoutSession.subscription;
64 |             await manageSubscriptionStatusChange(
65 |               prisma,
66 |               subscriptionId as string,
67 |               user?.stripeCustomerId as string
68 |             );
69 |           }
70 |           break;
71 |         default:
72 |           break;
73 |       }
74 |     } catch (error: any) {
75 |       throw createError({
76 |         statusMessage: "Webhook Error",
77 |         message: error.message,
78 |         statusCode: 400,
79 |       });
80 |     }
81 |   }
82 | 
83 |   return {
84 |     success: true,
85 |   };
86 | });
87 | 


--------------------------------------------------------------------------------
/store/workspace.ts:
--------------------------------------------------------------------------------
 1 | import type { WorkspaceWithForms } from "~/types";
 2 | 
 3 | export const useWorkspaceStore = defineStore("workspace", {
 4 |   state: () => ({
 5 |     workspaceWithForms: [] as WorkspaceWithForms[],
 6 |     showWorkspaceModal: false,
 7 |     formModalWorkspaceId: "",
 8 |   }),
 9 |   actions: {
10 |     async getWorkspaceWithForms() {
11 |       const { data } = await useFetch("/api/workspaces");
12 |       this.workspaceWithForms =
13 |         data.value?.workspaces.map((workspace) => ({
14 |           ...workspace,
15 |           createdAt: new Date(workspace.createdAt),
16 |           updatedAt: new Date(workspace.updatedAt),
17 |           forms: workspace.forms.map((form) => ({
18 |             ...form,
19 |             createdAt: new Date(form.createdAt),
20 |             updatedAt: new Date(form.updatedAt),
21 |           })),
22 |         })) ?? [];
23 |     },
24 | 
25 |     async createWorkspace(name: string) {
26 |       const { data } = await useFetch("/api/workspaces", {
27 |         method: "POST",
28 |         body: { name },
29 |       });
30 |       if (data.value) {
31 |         this.workspaceWithForms.push({
32 |           ...data.value.workspace,
33 |           createdAt: new Date(data.value.workspace.createdAt),
34 |           updatedAt: new Date(data.value.workspace.updatedAt),
35 |           forms: [],
36 |         });
37 |         this.showWorkspaceModal = false;
38 |         navigateTo(`/workspaces/${data.value.workspace.id}`);
39 |       }
40 |     },
41 | 
42 |     async createForm(name: string, workspaceId: string) {
43 |       const { data } = await useFetch(`/api/forms`, {
44 |         method: "POST",
45 |         body: { name, workspaceId },
46 |       });
47 |       if (data.value) {
48 |         const workspace = this.workspaceWithForms.find(
49 |           (workspace) => workspace.id === data.value?.form.workspaceId
50 |         );
51 |         if (workspace) {
52 |           workspace.forms.push({
53 |             ...data.value.form,
54 |             createdAt: new Date(data.value.form.createdAt),
55 |             updatedAt: new Date(data.value.form.updatedAt),
56 |           });
57 |         }
58 |         this.formModalWorkspaceId = "";
59 |         navigateTo(`/forms/${data.value.form.id}`);
60 |       }
61 |     },
62 | 
63 |     async updateForm(id: string, body: any) {
64 |       const { data } = await useFetch(`/api/forms/${id}`, {
65 |         method: "PUT",
66 |         body,
67 |       });
68 |       if (data.value) {
69 |         const workspace = this.workspaceWithForms.find(
70 |           (workspace) => workspace.id === data.value?.form.workspaceId
71 |         );
72 |         if (workspace) {
73 |           const formIndex = workspace.forms.findIndex(
74 |             (form) => form.id === data.value?.form.id
75 |           );
76 |           if (formIndex !== -1) {
77 |             workspace.forms[formIndex] = {
78 |               ...data.value.form,
79 |               createdAt: new Date(data.value.form.createdAt),
80 |               updatedAt: new Date(data.value.form.updatedAt),
81 |             };
82 |           }
83 |         }
84 |       }
85 |     },
86 |   },
87 | });
88 | 


--------------------------------------------------------------------------------
/pages/contact.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="py-24">
 3 |     <div class="px-6 py-12 mx-auto max-w-7xl lg:px-8">
 4 |       <div
 5 |         class="max-w-2xl mx-auto space-y-16 divide-y divide-gray-800 lg:mx-0 lg:max-w-none"
 6 |       >
 7 |         <div class="grid grid-cols-1 gap-x-8 gap-y-10 lg:grid-cols-3">
 8 |           <div>
 9 |             <h2
10 |               class="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-100"
11 |             >
12 |               Company
13 |             </h2>
14 |           </div>
15 |           <div
16 |             class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:col-span-2 lg:gap-8"
17 |           >
18 |             <div class="p-10 rounded-2xl bg-gray-200/50 dark:bg-gray-800/50">
19 |               <h3
20 |                 class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100"
21 |               >
22 |                 Zeitalabs
23 |               </h3>
24 |               <dl
25 |                 class="mt-3 space-y-1 text-sm leading-6 text-gray-600 dark:text-gray-400"
26 |               >
27 |                 <div class="mt-1">
28 |                   <dt class="sr-only">Address</dt>
29 |                   <dd>Door No: 14-164/2, Laxmi Nagar,</dd>
30 |                   <dd>
31 |                     Near Minerva School, Chinamushidivada Village, Pendurthi
32 |                     Mandal
33 |                   </dd>
34 |                   <dd>Visakhapatnam, Andhra Pradesh, India, 531173</dd>
35 |                 </div>
36 |               </dl>
37 |             </div>
38 |           </div>
39 |         </div>
40 |         <div class="grid grid-cols-1 pt-16 gap-x-8 gap-y-10 lg:grid-cols-3">
41 |           <div>
42 |             <h2
43 |               class="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-100"
44 |             >
45 |               Get in touch
46 |             </h2>
47 |           </div>
48 |           <div
49 |             class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:col-span-2 lg:gap-8"
50 |           >
51 |             <div class="p-10 rounded-2xl bg-gray-200/50 dark:bg-gray-800/50">
52 |               <h3
53 |                 class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100"
54 |               >
55 |                 Say Hello
56 |               </h3>
57 |               <dl
58 |                 class="mt-3 space-y-1 text-sm leading-6 text-gray-600 dark:text-gray-400"
59 |               >
60 |                 <div>
61 |                   <dt class="sr-only">Email</dt>
62 |                   <dd>
63 |                     <a
64 |                       class="font-semibold text-primary-600"
65 |                       href="mailto:naveen@zeitalabs.com"
66 |                     >
67 |                       naveen@zeitalabs.com
68 |                     </a>
69 |                   </dd>
70 |                 </div>
71 |                 <div class="mt-1">
72 |                   <dt class="sr-only">Phone number</dt>
73 |                   <dd>+91 88282-90468</dd>
74 |                 </div>
75 |               </dl>
76 |             </div>
77 |           </div>
78 |         </div>
79 |       </div>
80 |     </div>
81 |   </div>
82 | </template>
83 | 
84 | <script setup lang="ts">
85 | definePageMeta({
86 |   layout: "open",
87 | });
88 | </script>
89 | 
90 | <style scoped></style>
91 | 


--------------------------------------------------------------------------------
/components/Lp/TopNav.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <header class="absolute inset-x-0 top-0 z-50">
  3 |     <nav
  4 |       class="flex items-center justify-between p-6 lg:px-8"
  5 |       aria-label="Global"
  6 |     >
  7 |       <div class="flex lg:flex-1">
  8 |         <NuxtLink to="/" class="-m-1.5 p-1.5 flex items-center space-x-2">
  9 |           <img
 10 |             class="h-10 w-auto rounded"
 11 |             src="/logo.png"
 12 |             alt="OpenformStack logo"
 13 |           />
 14 |           <span class="font-semibold text-2xl">OpenformStack</span>
 15 |         </NuxtLink>
 16 |       </div>
 17 |       <div class="flex lg:hidden">
 18 |         <button
 19 |           type="button"
 20 |           class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-400"
 21 |           @click="mobileMenuOpen = true"
 22 |         >
 23 |           <span class="sr-only">Open main menu</span>
 24 |           <UIcon name="i-heroicons-bars-3" class="w-6 h-6" aria-hidden="true" />
 25 |         </button>
 26 |       </div>
 27 |       <div class="hidden lg:flex lg:gap-x-12">
 28 |         <NuxtLink
 29 |           v-for="item in navigation"
 30 |           :key="item.name"
 31 |           :to="item.href"
 32 |           class="text-sm font-semibold leading-6 text-gray-800"
 33 |         >
 34 |           {{ item.name }}
 35 |         </NuxtLink>
 36 |       </div>
 37 |       <div class="hidden lg:flex lg:flex-1 lg:justify-end"></div>
 38 |     </nav>
 39 |     <USlideover v-model="mobileMenuOpen" class="lg:hidden">
 40 |       <div class="h-full px-6 py-6 overflow-y-auto sm:ring-1 sm:ring-white/10">
 41 |         <div class="flex items-center justify-between">
 42 |           <NuxtLink to="/" class="-m-1.5 p-1.5">
 43 |             <span>OpenformStack</span>
 44 |           </NuxtLink>
 45 |           <button
 46 |             type="button"
 47 |             class="-m-2.5 rounded-md p-2.5 text-gray-400"
 48 |             @click="mobileMenuOpen = false"
 49 |           >
 50 |             <span class="sr-only">Close menu</span>
 51 |             <UIcon
 52 |               class="w-6 h-6"
 53 |               aria-hidden="true"
 54 |               name="i-heroicons-x-mark"
 55 |             />
 56 |           </button>
 57 |         </div>
 58 |         <div class="flow-root mt-6">
 59 |           <div class="-my-6 divide-y divide-gray-500/25">
 60 |             <div class="py-6 space-y-2">
 61 |               <a
 62 |                 v-for="item in navigation"
 63 |                 :key="item.name"
 64 |                 :href="item.href"
 65 |                 class="block px-3 py-2 -mx-3 text-base font-semibold leading-7 text-white rounded-lg hover:bg-gray-800"
 66 |               >
 67 |                 {{ item.name }}
 68 |               </a>
 69 |             </div>
 70 |             <div class="py-6"></div>
 71 |           </div>
 72 |         </div>
 73 |       </div>
 74 |     </USlideover>
 75 |   </header>
 76 | </template>
 77 | 
 78 | <script setup lang="ts">
 79 | const navigation: any[] = [
 80 |   {
 81 |     name: "Features",
 82 |     href: "/",
 83 |   },
 84 |   {
 85 |     name: "Pricing",
 86 |     href: "/pricing",
 87 |   },
 88 |   // {
 89 |   //   name: "Docs",
 90 |   //   href: "/docs",
 91 |   // },
 92 |   // {
 93 |   //   name: "Blog",
 94 |   //   href: "/blog",
 95 |   // },
 96 | ];
 97 | 
 98 | const mobileMenuOpen = ref(false);
 99 | </script>
100 | 
101 | <style scoped></style>
102 | 


--------------------------------------------------------------------------------
/utils/stripe.ts:
--------------------------------------------------------------------------------
  1 | import { PrismaClient } from "@prisma/client";
  2 | import Stripe from "stripe";
  3 | 
  4 | export const stripe = new Stripe(useRuntimeConfig().STRIPE_SECRET_KEY, {
  5 |   apiVersion: "2023-08-16",
  6 |   appInfo: {
  7 |     name: "OpenformStack",
  8 |     version: "1.0.0",
  9 |   },
 10 | });
 11 | 
 12 | export const toDateTime = (secs: number) => {
 13 |   var t = new Date("1970-01-01T00:30:00Z"); // Unix epoch start.
 14 |   t.setSeconds(secs);
 15 |   return t;
 16 | };
 17 | 
 18 | export const createOrRetrieveCustomer = async ({
 19 |   prisma,
 20 |   userId,
 21 | }: {
 22 |   prisma: PrismaClient;
 23 |   userId: string;
 24 | }) => {
 25 |   const user = await prisma.user.findUnique({
 26 |     where: {
 27 |       id: userId,
 28 |     },
 29 |   });
 30 | 
 31 |   if (!user || !user.stripeCustomerId) {
 32 |     const customerData: { metadata: { id: string }; email?: string } = {
 33 |       email: user?.email || undefined,
 34 |       metadata: {
 35 |         id: userId,
 36 |       },
 37 |     };
 38 | 
 39 |     const customer = await stripe.customers.create(customerData);
 40 | 
 41 |     const updatedUser = await prisma.user.update({
 42 |       where: {
 43 |         id: userId,
 44 |       },
 45 |       data: {
 46 |         stripeCustomerId: customer.id,
 47 |       },
 48 |     });
 49 |     return { ...updatedUser };
 50 |   }
 51 |   return { ...user };
 52 | };
 53 | 
 54 | export const manageSubscriptionStatusChange = async (
 55 |   prisma: PrismaClient,
 56 |   subscriptionId: string,
 57 |   stripeCustomerId: string
 58 | ) => {
 59 |   // Get customer's UUID from mapping table.
 60 |   const user = await prisma.user.findUnique({
 61 |     where: { stripeCustomerId },
 62 |   });
 63 | 
 64 |   console.log(
 65 |     `User [${user?.id}] is changing subscription [${subscriptionId}] wth customer [${stripeCustomerId}]`
 66 |   );
 67 | 
 68 |   if (!user) {
 69 |     throw new Error("User not found.");
 70 |   }
 71 | 
 72 |   const subscription = await stripe.subscriptions.retrieve(subscriptionId, {
 73 |     expand: ["default_payment_method"],
 74 |   });
 75 | 
 76 |   // Upsert the latest status of the subscription object.
 77 |   const subscriptionData = {
 78 |     id: subscription.id,
 79 |     userId: user.id,
 80 |     status: subscription.status,
 81 |     priceId: subscription.items.data[0].price.id,
 82 |     quantity: subscription.items.data[0].quantity,
 83 |     cancelAtPeriodEnd: subscription.cancel_at_period_end,
 84 |     cancelAt: subscription.cancel_at
 85 |       ? toDateTime(subscription.cancel_at).toISOString()
 86 |       : null,
 87 |     canceledAt: subscription.canceled_at
 88 |       ? toDateTime(subscription.canceled_at).toISOString()
 89 |       : null,
 90 |     currentPeriodStart: toDateTime(
 91 |       subscription.current_period_start
 92 |     ).toISOString(),
 93 |     currentPeriodEnd: toDateTime(subscription.current_period_end).toISOString(),
 94 |     created: toDateTime(subscription.created).toISOString(),
 95 |     endedAt: subscription.ended_at
 96 |       ? toDateTime(subscription.ended_at).toISOString()
 97 |       : null,
 98 |     trialStart: subscription.trial_start
 99 |       ? toDateTime(subscription.trial_start).toISOString()
100 |       : null,
101 |     trialEnd: subscription.trial_end
102 |       ? toDateTime(subscription.trial_end).toISOString()
103 |       : null,
104 |   };
105 | 
106 |   const result = await prisma.subscription.upsert({
107 |     where: { id: subscriptionData.id },
108 |     create: subscriptionData,
109 |     update: subscriptionData,
110 |   });
111 | 
112 |   console.log(
113 |     `Inserted/updated subscription [${result.id}] for user [${result.userId}]`
114 |   );
115 | };
116 | 


--------------------------------------------------------------------------------
/server/routes/f/[formId].ts:
--------------------------------------------------------------------------------
  1 | import { z, parseParamsAs } from "@sidebase/nuxt-parse";
  2 | import { inngest } from "~/inngest/client";
  3 | import { isEmail } from "~/utils";
  4 | import { kv } from "@vercel/kv";
  5 | import { Ratelimit } from "@upstash/ratelimit";
  6 | 
  7 | const DEFAULT_REDIRECT_URL = "https://openformstack.com/thank-you";
  8 | 
  9 | const paramSchema = z.object({
 10 |   formId: z.string(),
 11 | });
 12 | 
 13 | export default defineEventHandler(async (event) => {
 14 |   handleCors(event, {
 15 |     allowHeaders: ["Content-Type", "Accept", "Origin", "Referer", "User-Agent"],
 16 |     methods: ["OPTIONS", "POST"],
 17 |     origin: "*",
 18 |     preflight: {
 19 |       statusCode: 204,
 20 |     },
 21 |   });
 22 |   if (event.node.req.method === "OPTIONS") {
 23 |     return null;
 24 |   }
 25 |   assertMethod(event, "POST");
 26 | 
 27 |   const body = await readBody(event);
 28 |   const { formId } = parseParamsAs(event, paramSchema);
 29 |   const { prisma } = event.context;
 30 | 
 31 |   const ip = event.headers.get("x-forwarded-for");
 32 |   const ratelimit = new Ratelimit({
 33 |     redis: kv,
 34 |     // rate limit to 5 requests per 60 seconds
 35 |     limiter: Ratelimit.slidingWindow(5, "60s"),
 36 |   });
 37 | 
 38 |   const { success, limit, reset, remaining } = await ratelimit.limit(
 39 |     `ratelimit_${ip}`
 40 |   );
 41 | 
 42 |   if (!success) {
 43 |     return new Response("You have reached your request limit for the day.", {
 44 |       status: 429,
 45 |       headers: {
 46 |         "X-RateLimit-Limit": limit.toString(),
 47 |         "X-RateLimit-Remaining": remaining.toString(),
 48 |         "X-RateLimit-Reset": reset.toString(),
 49 |       },
 50 |     });
 51 |   }
 52 | 
 53 |   const form = await prisma.form.findUnique({
 54 |     where: {
 55 |       id: formId,
 56 |     },
 57 |     include: {
 58 |       workspace: {
 59 |         include: {
 60 |           users: true,
 61 |         },
 62 |       },
 63 |     },
 64 |   });
 65 |   if (!form) {
 66 |     setResponseStatus(event, 404);
 67 |     setResponseHeader(event, "Content-Type", "application/json");
 68 |     return {
 69 |       error: {
 70 |         code: "NOT_FOUND",
 71 |         message: "Form not found. Please check the url again",
 72 |       },
 73 |     };
 74 |   }
 75 |   if (form.closed) {
 76 |     setResponseStatus(event, 422);
 77 |     setResponseHeader(event, "Content-Type", "application/json");
 78 |     return {
 79 |       error: {
 80 |         code: "FORM_CLOSED",
 81 |         message: "Form is closed",
 82 |       },
 83 |     };
 84 |   }
 85 |   const headers = event.headers;
 86 |   const contentType = headers.get("content-type") || "";
 87 | 
 88 |   // Body Parsing
 89 |   let parsedBody: any;
 90 |   if (contentType.includes("application/json")) {
 91 |     parsedBody = typeof body === "object" ? body : JSON.parse(body);
 92 |   } else if (contentType.includes("application/x-www-form-urlencoded")) {
 93 |     parsedBody = Object.fromEntries(new URLSearchParams(body).entries());
 94 |   } else {
 95 |     setResponseStatus(event, 406);
 96 |     setResponseHeader(event, "Content-Type", "application/json");
 97 |     return {
 98 |       error: {
 99 |         code: "INVALID_CONTENT_TYPE",
100 |         message:
101 |           "Accepts only application/json or application/x-www-form-urlencoded",
102 |       },
103 |     };
104 |   }
105 | 
106 |   const submission = await prisma.submission.create({
107 |     data: {
108 |       formId,
109 |       data: body,
110 |     },
111 |   });
112 | 
113 |   await inngest.send({
114 |     name: "app/form.backgroundJob",
115 |     data: {
116 |       formId,
117 |       submissionId: submission.id,
118 |     },
119 |   });
120 | 
121 |   return sendRedirect(
122 |     event,
123 |     form.customRedirect
124 |       ? form.customRedirectUrl ?? DEFAULT_REDIRECT_URL
125 |       : DEFAULT_REDIRECT_URL
126 |   );
127 | });
128 | 


--------------------------------------------------------------------------------
/components/Form/Setup.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="flex items-end gap-x-2">
  4 |       <UFormGroup label="Form Endpoint" class="flex-grow">
  5 |         <UInput :value="url" disabled> </UInput>
  6 |       </UFormGroup>
  7 |       <UButton
  8 |         :icon="
  9 |           !copying
 10 |             ? 'i-heroicons-clipboard-document'
 11 |             : 'i-heroicons-clipboard-document-check'
 12 |         "
 13 |         @click="copy"
 14 |       >
 15 |         Copy
 16 |       </UButton>
 17 |     </div>
 18 |     <div class="w-2/3 mt-4">
 19 |       <h3 class="text-xl font-semibold">Setup</h3>
 20 |       <UTabs v-model="selectedTab" :items="tabs" class="mt-4">
 21 |         <template #item="{ item }">
 22 |           <div v-if="item.key === 'html'">
 23 |             <div
 24 |               class="bg-gray-800 p-4 rounded text-white overflow-auto text-sm"
 25 |             >
 26 |               <LpFormCode :code="htmlCode" />
 27 |             </div>
 28 |           </div>
 29 |           <div v-if="item.key === 'react'">
 30 |             <div
 31 |               class="bg-gray-800 p-4 rounded text-white overflow-auto text-sm"
 32 |             >
 33 |               <LpFormCode :code="reactCode" lang="js" />
 34 |             </div>
 35 |           </div>
 36 |           <div v-if="item.key === 'vue'">
 37 |             <div
 38 |               class="bg-gray-800 p-4 rounded text-white overflow-auto text-sm"
 39 |             >
 40 |               <LpFormCode :code="vueCode" />
 41 |             </div>
 42 |           </div>
 43 |         </template>
 44 |       </UTabs>
 45 |     </div>
 46 |   </div>
 47 | </template>
 48 | 
 49 | <script setup lang="ts">
 50 | const props = defineProps({
 51 |   formId: {
 52 |     type: String,
 53 |     required: true,
 54 |   },
 55 | });
 56 | 
 57 | const url = computed(
 58 |   () => `${useRuntimeConfig().public.BASE_URL}/f/${props.formId}`
 59 | );
 60 | 
 61 | const copying = ref(false);
 62 | function copy() {
 63 |   copying.value = true;
 64 |   navigator.clipboard.writeText(url.value);
 65 |   setTimeout(() => {
 66 |     copying.value = false;
 67 |   }, 1000);
 68 | }
 69 | 
 70 | const tabs = [
 71 |   {
 72 |     key: "html",
 73 |     label: "HTML",
 74 |   },
 75 |   {
 76 |     key: "react",
 77 |     label: "React",
 78 |   },
 79 |   {
 80 |     key: "vue",
 81 |     label: "Vue",
 82 |   },
 83 | ];
 84 | const selectedTab = ref(0);
 85 | 
 86 | const htmlCode = `<form action="${url.value}" method="POST">
 87 |   <input type="email" name="email">
 88 |   <button type="submit">Join Waitlist</button>
 89 | </form>
 90 | `;
 91 | 
 92 | const reactCode = `import React, { useState } from 'react';
 93 | import axios from 'axios';
 94 | 
 95 | function Form() {
 96 |   const [email, setEmail] = useState('');
 97 | 
 98 |   const handleSubmit = async (e) => {
 99 |     e.preventDefault();
100 | 
101 |     try {
102 |       const response = await axios.post('${url.value}', { email });
103 |       console.log('API call successful:', response.data);
104 |     } catch (error) {
105 |       console.error('API call failed:', error);
106 |     }
107 |   };
108 | 
109 |   return (
110 |     <form onSubmit={handleSubmit}>
111 |       <input
112 |         type="email"
113 |         value={email}
114 |         onChange={(e) => setEmail(e.target.value)}
115 |         required
116 |       />
117 |       <button type="submit">Join Waitlist</button>
118 |     </form>
119 |   );
120 | }
121 | 
122 | export default Form;
123 |     `;
124 | 
125 | const vueCode = `<template>
126 |   <form @submit.prevent="submitForm">
127 |     <input type="email" name="email" v-model="email" />
128 |     <button type="submit">Join Waitlist</button>
129 |   <\/form>
130 | <\/template>
131 | 
132 | <script setup>
133 | const email = ref("");
134 | 
135 | async function submitForm() {
136 |   await fetch("${url.value}", {
137 |     method: "POST",
138 |     headers: {
139 |       "Content-Type": "application/json",
140 |     },
141 |     body: JSON.stringify({ email: email.value }),
142 |   });
143 | }
144 | <\/script>`;
145 | </script>
146 | 
147 | <style scoped></style>
148 | 


--------------------------------------------------------------------------------
/components/Lp/FeatureSection.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="bg-white py-24 sm:py-32">
  3 |     <div class="mx-auto max-w-7xl px-6 lg:px-8">
  4 |       <div class="mx-auto max-w-2xl sm:text-center">
  5 |         <h2 class="text-base font-semibold leading-7 text-primary-600">
  6 |           Everything you need
  7 |         </h2>
  8 |         <p
  9 |           class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl"
 10 |         >
 11 |           No Backend server? No problem.
 12 |         </p>
 13 |         <p class="mt-6 text-lg leading-8 text-gray-600">
 14 |           Manage all your forms with OpenformStack. Get notified, Auto-respond
 15 |           to new submissions and keep spam out.
 16 |         </p>
 17 |       </div>
 18 |     </div>
 19 |     <div class="relative overflow-hidden pt-16">
 20 |       <div class="mx-auto max-w-7xl px-6 lg:px-8">
 21 |         <img
 22 |           src="/featureHero.png"
 23 |           alt="App screenshot"
 24 |           class="mb-[-12%] rounded-xl shadow-2xl ring-1 ring-gray-900/10"
 25 |           width="2432"
 26 |           height="1442"
 27 |         />
 28 |         <div class="relative" aria-hidden="true">
 29 |           <div
 30 |             class="absolute -inset-x-20 bottom-0 bg-gradient-to-t from-white pt-[7%]"
 31 |           />
 32 |         </div>
 33 |       </div>
 34 |     </div>
 35 |     <div class="mx-auto mt-16 max-w-7xl px-6 sm:mt-20 md:mt-24 lg:px-8">
 36 |       <dl
 37 |         class="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 text-base leading-7 text-gray-600 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-x-8 lg:gap-y-16"
 38 |       >
 39 |         <div
 40 |           v-for="feature in features"
 41 |           :key="feature.name"
 42 |           class="relative pl-9"
 43 |         >
 44 |           <dt class="inline font-semibold text-gray-900">
 45 |             <component
 46 |               :is="feature.icon"
 47 |               class="absolute left-1 top-1 h-5 w-5 text-primary-600"
 48 |               aria-hidden="true"
 49 |             />
 50 |             {{ feature.name }}
 51 |           </dt>
 52 |           {{ " " }}
 53 |           <dd class="inline">{{ feature.description }}</dd>
 54 |         </div>
 55 |       </dl>
 56 |     </div>
 57 |   </div>
 58 | </template>
 59 | 
 60 | <script setup lang="ts">
 61 | import {
 62 |   CloudArrowUpIcon,
 63 |   FingerPrintIcon,
 64 |   BellAlertIcon,
 65 |   EnvelopeOpenIcon,
 66 |   CpuChipIcon,
 67 |   ArrowPathIcon,
 68 | } from "@heroicons/vue/20/solid";
 69 | 
 70 | const features = [
 71 |   {
 72 |     name: "Easy Setup.",
 73 |     description:
 74 |       "Whether you're a seasoned developer or just starting out, It's easy to setup with your existing stack.",
 75 |     icon: CloudArrowUpIcon,
 76 |   },
 77 |   {
 78 |     name: "Self Email Notifications.",
 79 |     description:
 80 |       "Stay in the loop with real-time notifications. keeping you informed whenever a form submission occurs.",
 81 |     icon: BellAlertIcon,
 82 |   },
 83 |   {
 84 |     name: "Auto Respond.",
 85 |     description:
 86 |       "Provide your users with automatic responses, ensuring they know their submission was received.",
 87 |     icon: EnvelopeOpenIcon,
 88 |   },
 89 |   {
 90 |     name: "Spam Filtering.",
 91 |     description:
 92 |       "Keep your forms clean and your data accurate. Our advanced spam filtering technology identifies and filters out unwanted submissions, ensuring that you only receive genuine responses.",
 93 |     icon: FingerPrintIcon,
 94 |   },
 95 |   {
 96 |     name: "Integrations.",
 97 |     description:
 98 |       "We offer integrations with popular tools and platforms, allowing you to streamline your workflow and connect with your favorite apps effortlessly.",
 99 |     icon: CpuChipIcon,
100 |   },
101 |   {
102 |     name: "Custom Redirect.",
103 |     description:
104 |       "Guide your users to the next steps with ease. We offers a custom redirect feature, allowing you to redirect users to specific pages or URLs after a form submission.",
105 |     icon: ArrowPathIcon,
106 |   },
107 | ];
108 | </script>
109 | 
110 | <style scoped></style>
111 | 


--------------------------------------------------------------------------------
/prisma/schema.prisma:
--------------------------------------------------------------------------------
  1 | // This is your Prisma schema file,
  2 | // learn more about it in the docs: https://pris.ly/d/prisma-schema
  3 | 
  4 | generator client {
  5 |   provider = "prisma-client-js"
  6 | }
  7 | 
  8 | datasource db {
  9 |   provider = "postgresql"
 10 |   url      = env("DATABASE_URL")
 11 | }
 12 | 
 13 | model Account {
 14 |   id                String  @id @default(cuid())
 15 |   userId            String  @unique
 16 |   type              String
 17 |   provider          String
 18 |   providerAccountId String
 19 |   refresh_token     String?
 20 |   access_token      String?
 21 |   expires_at        Int?
 22 |   token_type        String?
 23 |   scope             String?
 24 |   id_token          String?
 25 |   session_state     String?
 26 | 
 27 |   user User @relation(fields: [userId], references: [id], onDelete: Cascade)
 28 | 
 29 |   @@unique([provider, providerAccountId])
 30 | }
 31 | 
 32 | model Session {
 33 |   id           String   @id @default(cuid())
 34 |   sessionToken String   @unique
 35 |   userId       String
 36 |   expires      DateTime
 37 |   user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
 38 | }
 39 | 
 40 | model User {
 41 |   id               String         @id @default(cuid())
 42 |   name             String?
 43 |   email            String?        @unique
 44 |   emailVerified    DateTime?
 45 |   image            String?
 46 |   createdAt        DateTime       @default(now())
 47 |   account          Account[]
 48 |   sessions         Session[]
 49 |   workspaces       Workspace[]    @relation("UserToWorkspace")
 50 |   stripeCustomerId String?        @unique
 51 |   Subscription     Subscription[]
 52 | }
 53 | 
 54 | model VerificationToken {
 55 |   identifier String
 56 |   token      String   @unique
 57 |   expires    DateTime
 58 | 
 59 |   @@unique([identifier, token])
 60 | }
 61 | 
 62 | model Workspace {
 63 |   id        String   @id @default(cuid())
 64 |   name      String
 65 |   createdAt DateTime @default(now())
 66 |   updatedAt DateTime @updatedAt
 67 |   users     User[]   @relation("UserToWorkspace")
 68 |   forms     Form[]
 69 | }
 70 | 
 71 | model Form {
 72 |   id                    String   @id @default(cuid())
 73 |   name                  String
 74 |   closed                Boolean  @default(false)
 75 |   // send email to self when form is submitted
 76 |   selfEmailNotification Boolean  @default(true)
 77 |   selfEmails            String[]
 78 | 
 79 |   // send email to respondent when form is submitted
 80 |   respondentEmailNotification Boolean @default(false)
 81 |   fromName                    String?
 82 |   subject                     String?
 83 |   message                     String?
 84 | 
 85 |   // redirect to custom url when form is submitted
 86 |   customRedirect    Boolean      @default(false)
 87 |   customRedirectUrl String?
 88 |   // webhook url to send data to when form is submitted
 89 |   webhookEnabled    Boolean      @default(false)
 90 |   webhookUrl        String?
 91 |   createdAt         DateTime     @default(now())
 92 |   updatedAt         DateTime     @updatedAt
 93 |   workspace         Workspace    @relation(fields: [workspaceId], references: [id])
 94 |   workspaceId       String
 95 |   submissions       Submission[]
 96 | }
 97 | 
 98 | model Submission {
 99 |   id        String   @id @default(cuid())
100 |   createdAt DateTime @default(now())
101 |   data      Json
102 |   isSpam    Boolean  @default(false)
103 |   form      Form     @relation(fields: [formId], references: [id])
104 |   formId    String
105 | }
106 | 
107 | model Subscription {
108 |   id                 String   @id
109 |   status             String?
110 |   priceId            String?
111 |   quantity           Int?
112 |   cancelAtPeriodEnd  Boolean?
113 |   created            String
114 |   currentPeriodStart String
115 |   currentPeriodEnd   String
116 |   endedAt            String?
117 |   cancelAt           String?
118 |   canceledAt         String?
119 |   trialStart         String?
120 |   trialEnd           String?
121 | 
122 |   user   User   @relation(fields: [userId], references: [id])
123 |   userId String
124 | }
125 | 


--------------------------------------------------------------------------------
/components/Lp/Footer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <footer class="bg-gray-900" aria-labelledby="footer-heading">
  3 |     <h2 id="footer-heading" class="sr-only">Footer</h2>
  4 |     <div class="px-6 pt-16 pb-8 mx-auto max-w-7xl sm:pt-24 lg:px-8 lg:pt-32">
  5 |       <div class="flex items-start justify-between">
  6 |         <div class="space-y-8">
  7 |           <div>
  8 |             <NuxtLink class="text-gray-100 text-3xl" to="/">
  9 |               OpenformStack
 10 |             </NuxtLink>
 11 |             <p class="text-sm leading-6 text-gray-300">
 12 |               open source form backend
 13 |             </p>
 14 |           </div>
 15 |           <div class="flex space-x-6">
 16 |             <a
 17 |               v-for="item in navigation.social"
 18 |               :key="item.name"
 19 |               :href="item.href"
 20 |               class="text-gray-500 hover:text-gray-400"
 21 |             >
 22 |               <span class="sr-only">{{ item.name }}</span>
 23 |               <component :is="item.icon" class="w-6 h-6" aria-hidden="true" />
 24 |             </a>
 25 |           </div>
 26 |         </div>
 27 | 
 28 |         <div>
 29 |           <h3 class="text-sm font-semibold leading-6 text-white">Company</h3>
 30 |           <ul role="list" class="mt-4 space-y-4">
 31 |             <li v-for="item in navigation.company" :key="item.name">
 32 |               <NuxtLink
 33 |                 :to="item.href"
 34 |                 class="text-sm leading-6 text-gray-300 hover:text-white"
 35 |               >
 36 |                 {{ item.name }}
 37 |               </NuxtLink>
 38 |             </li>
 39 |           </ul>
 40 |         </div>
 41 |       </div>
 42 |       <div class="pt-8 mt-16 border-t border-white/10 sm:mt-20 lg:mt-24">
 43 |         <p class="text-xs leading-5 text-gray-400">
 44 |           &copy; 2023 Zeitalabs. All rights reserved.
 45 |         </p>
 46 |       </div>
 47 |     </div>
 48 |   </footer>
 49 | </template>
 50 | 
 51 | <script setup lang="ts">
 52 | import { defineComponent, h } from "vue";
 53 | 
 54 | const navigation = {
 55 |   // solutions: [
 56 |   //   { name: "Marketing", href: "#" },
 57 |   //   { name: "Analytics", href: "#" },
 58 |   //   { name: "Commerce", href: "#" },
 59 |   //   { name: "Insights", href: "#" },
 60 |   // ],
 61 |   // support: [
 62 |   //   { name: "Pricing", href: "#" },
 63 |   //   { name: "Documentation", href: "#" },
 64 |   //   { name: "Guides", href: "#" },
 65 |   // ],
 66 |   company: [
 67 |     { name: "Contact", href: "/contact" },
 68 |     { name: "Privacy", href: "/privacy" },
 69 |     { name: "Terms", href: "/terms" },
 70 |     { name: "Refund", href: "/refund" },
 71 |   ],
 72 |   // legal: [{ name: "Claim", href: "#" }],
 73 |   social: [
 74 |     {
 75 |       name: "Twitter",
 76 |       href: "https://twitter.com/naveennaidu9927",
 77 |       icon: defineComponent({
 78 |         render: () =>
 79 |           h("svg", { fill: "currentColor", viewBox: "0 0 24 24" }, [
 80 |             h("path", {
 81 |               d: "M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84",
 82 |             }),
 83 |           ]),
 84 |       }),
 85 |     },
 86 |     {
 87 |       name: "GitHub",
 88 |       href: "https://github.com/naveennaidu/OpenformStack",
 89 |       icon: defineComponent({
 90 |         render: () =>
 91 |           h("svg", { fill: "currentColor", viewBox: "0 0 24 24" }, [
 92 |             h("path", {
 93 |               "fill-rule": "evenodd",
 94 |               d: "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z",
 95 |               "clip-rule": "evenodd",
 96 |             }),
 97 |           ]),
 98 |       }),
 99 |     },
100 |   ],
101 | };
102 | </script>
103 | 
104 | <style scoped></style>
105 | 


--------------------------------------------------------------------------------
/inngest/functions/formBackgroundJob.ts:
--------------------------------------------------------------------------------
  1 | import { inngest } from "@/inngest/client";
  2 | import { Prisma, PrismaClient } from "@prisma/client";
  3 | import { NonRetriableError } from "inngest";
  4 | import { Resend } from "resend";
  5 | import { isEmail } from "~/utils";
  6 | 
  7 | export default inngest.createFunction(
  8 |   { id: "Form Background Job" },
  9 |   { event: "app/form.backgroundJob" },
 10 |   async ({ event, step }) => {
 11 |     const formId = event.data.formId;
 12 |     if (!formId) {
 13 |       throw new NonRetriableError("Form ID is required");
 14 |     }
 15 | 
 16 |     const submissionId = event.data.submissionId;
 17 |     if (!submissionId) {
 18 |       throw new NonRetriableError("Submission ID is required");
 19 |     }
 20 | 
 21 |     const prisma = new PrismaClient();
 22 | 
 23 |     const [form, submission] = await prisma.$transaction([
 24 |       prisma.form.findUnique({
 25 |         where: { id: formId },
 26 |         include: { workspace: { include: { users: true } } },
 27 |       }),
 28 |       prisma.submission.findUnique({
 29 |         where: { id: submissionId },
 30 |       }),
 31 |     ]);
 32 |     if (!form) {
 33 |       throw new NonRetriableError("Form not found");
 34 |     }
 35 | 
 36 |     if (!submission) {
 37 |       throw new NonRetriableError("Submission not found");
 38 |     }
 39 | 
 40 |     //Step 1: Check for spam
 41 |     const body = submission.data;
 42 |     if (!body) {
 43 |       throw new NonRetriableError("Submission data not found");
 44 |     }
 45 | 
 46 |     const isSpam = await step.run("checkSpam", async () => {
 47 |       const isSpam = Object.entries(body).some(
 48 |         ([key, value]) => key.startsWith("_") && value
 49 |       );
 50 |       const { spam } = await $fetch<{ spam: boolean }>(
 51 |         "https://byespam.co/api/v1/spamdetection",
 52 |         {
 53 |           method: "POST",
 54 |           headers: {
 55 |             "Content-Type": "application/json",
 56 |             Authorization: `Bearer ${useRuntimeConfig().BYESPAM_API_KEY}`,
 57 |           },
 58 |           body: {
 59 |             content: JSON.stringify(body),
 60 |           },
 61 |         }
 62 |       );
 63 | 
 64 |       if (isSpam || spam) {
 65 |         await prisma.submission.update({
 66 |           where: { id: submissionId },
 67 |           data: { isSpam: true },
 68 |         });
 69 |       }
 70 |       return isSpam || spam;
 71 |     });
 72 | 
 73 |     if (isSpam) {
 74 |       return { event };
 75 |     }
 76 | 
 77 |     // self email notification
 78 |     const resend = new Resend(useRuntimeConfig().RESEND_API_KEY);
 79 | 
 80 |     const formName = form.name;
 81 |     const userEmails = form.workspace.users
 82 |       .map((user) => user.email)
 83 |       .filter((email): email is string => Boolean(email));
 84 |     const selfEmails = form.selfEmails;
 85 |     if (form.selfEmailNotification) {
 86 |       await step.run("app/email.selfNotification", async () => {
 87 |         await resend.emails.send({
 88 |           from: `OpenformStack <${useRuntimeConfig().public.FROM_MAIL}>`,
 89 |           to: userEmails.concat(selfEmails),
 90 |           subject: `New submission for ${formName}`,
 91 |           html: `
 92 |         ${Object.entries(body)
 93 |           .map(([key, value]) => `<div><b>${key}</b>: ${value}</div>`)
 94 |           .join("")}
 95 |         `,
 96 |         });
 97 |       });
 98 |     }
 99 |     // respondent email notification
100 |     if (form.respondentEmailNotification) {
101 |       await step.run("app/email.respondentNotification", async () => {
102 |         if (typeof body === "object" && "email" in body) {
103 |           const email = (body as Prisma.JsonObject)["email"] as string;
104 |           if (email && isEmail(email)) {
105 |             await resend.emails.send({
106 |               from: `${form.fromName ?? "OpenformStack"} <${
107 |                 useRuntimeConfig().public.FROM_MAIL
108 |               }>`,
109 |               to: email,
110 |               subject: form.subject ?? "Thank you for your submission",
111 |               text:
112 |                 form.message ??
113 |                 "Thanks for reaching out! we'll get back to you as soon as possible.",
114 |               reply_to: userEmails ?? [],
115 |             });
116 |           }
117 |         }
118 |       });
119 |     }
120 | 
121 |     // webhook
122 |     if (form.webhookEnabled) {
123 |       await step.run("app/webhook", async () => {
124 |         if (form.webhookUrl) {
125 |           await $fetch(form.webhookUrl, {
126 |             method: "POST",
127 |             body: JSON.stringify({
128 |               formName: form.name,
129 |               submission,
130 |             }),
131 |           });
132 |         }
133 |       });
134 |     }
135 |     return { event };
136 |   }
137 | );
138 | 


--------------------------------------------------------------------------------
/components/Form/Submissions.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="flex items-center justify-between pb-2">
  4 |       <UButton
  5 |         icon="i-heroicons-trash"
  6 |         color="red"
  7 |         size="xs"
  8 |         :loading="deleting"
  9 |         :class="selected.length > 0 ? 'visible' : 'invisible'"
 10 |         @click="deleteSelected"
 11 |       >
 12 |         Delete
 13 |       </UButton>
 14 |       <div class="flex items-center gap-x-2">
 15 |         <FormCsvDownload :form-id="formId" />
 16 |         <USelectMenu v-model="view" :options="['Inbox', 'Spam']"> </USelectMenu>
 17 |       </div>
 18 |     </div>
 19 |     <div
 20 |       class="overflow-hidden shadow ring-1 ring-black dark:ring-gray-700 ring-opacity-5 sm:rounded-lg"
 21 |     >
 22 |       <UTable
 23 |         v-if="submissionObject && submissionObject.submissions.length > 0"
 24 |         v-model="selected"
 25 |         :columns="tableCols"
 26 |         :rows="tableRows"
 27 |         :loading="loading"
 28 |         :ui="{ td: { base: '' } }"
 29 |         @select="onSelect"
 30 |       />
 31 | 
 32 |       <div v-else class="flex flex-col items-center py-10">
 33 |         <div class="flex items-center justify-center h-32 my-8">
 34 |           <div class="text-gray-400 text-center">
 35 |             <UIcon name="i-heroicons-document-text" class="h-12 w-12" />
 36 |             <p class="mt-2 text-sm">You don't have any submissions yet.</p>
 37 |           </div>
 38 |         </div>
 39 |         <UButton @click="$router.replace({ query: { tab: 'Setup' } })">
 40 |           How to setup?
 41 |         </UButton>
 42 |       </div>
 43 |     </div>
 44 |     <div class="flex items-center justify-between space-x-2 mt-2">
 45 |       <div class="text-gray-400">
 46 |         Total: {{ submissionObject?.pagination.total ?? 0 }}
 47 |       </div>
 48 |       <UPagination
 49 |         v-model="page"
 50 |         :page-count="pageCount"
 51 |         :total="submissionObject?.pagination.total ?? 0"
 52 |       />
 53 |     </div>
 54 |   </div>
 55 | </template>
 56 | 
 57 | <script setup lang="ts">
 58 | import type { Submission } from "@prisma/client";
 59 | import type { Pagination } from "~/types";
 60 | 
 61 | const props = defineProps({
 62 |   formId: {
 63 |     type: String,
 64 |     required: true,
 65 |   },
 66 | });
 67 | 
 68 | const submissionObject = ref<{
 69 |   submissions: Submission[];
 70 |   keys: string[];
 71 |   pagination: Pagination;
 72 | }>();
 73 | 
 74 | const page = ref(1);
 75 | const pageCount = ref(10);
 76 | 
 77 | const loading = ref(false);
 78 | async function fetchSubmissions() {
 79 |   loading.value = true;
 80 |   const { data } = await useFetch(`/api/forms/${props.formId}/submissions`, {
 81 |     method: "GET",
 82 |     query: {
 83 |       skip: (page.value - 1) * pageCount.value,
 84 |       take: pageCount.value,
 85 |       isSpam: view.value === "Spam",
 86 |     },
 87 |   });
 88 |   loading.value = false;
 89 |   submissionObject.value = {
 90 |     submissions:
 91 |       data.value?.submissions.map((submission) => ({
 92 |         ...submission,
 93 |         createdAt: new Date(submission.createdAt),
 94 |       })) ?? [],
 95 |     keys: data.value?.keys ?? [],
 96 |     pagination: data.value?.pagination ?? {
 97 |       skip: 0,
 98 |       take: 10,
 99 |       total: 0,
100 |     },
101 |   };
102 | }
103 | onMounted(async () => {
104 |   await nextTick();
105 |   await fetchSubmissions();
106 | });
107 | 
108 | watch(
109 |   () => page.value,
110 |   async () => {
111 |     await fetchSubmissions();
112 |   }
113 | );
114 | 
115 | const dayjs = useDayjs();
116 | 
117 | const tableCols = computed(() => {
118 |   const cols =
119 |     submissionObject.value?.keys.map((column) => {
120 |       return {
121 |         key: column,
122 |         label: column,
123 |       };
124 |     }) ?? [];
125 | 
126 |   return [
127 |     {
128 |       key: "createdAt",
129 |       label: "Submitted at",
130 |     },
131 |     ...cols,
132 |   ];
133 | });
134 | 
135 | const tableRows = computed(() => {
136 |   return submissionObject.value?.submissions.map((submission) => {
137 |     let rowData: any = {};
138 |     submissionObject.value?.keys.forEach((column) => {
139 |       rowData[column] = (submission.data as any)[column] ?? "-";
140 |     });
141 |     return {
142 |       ...rowData,
143 |       createdAt: dayjs(submission.createdAt).format("DD-MM-YYYY HH:mm"),
144 |       id: submission.id,
145 |     };
146 |   });
147 | });
148 | 
149 | const selected = ref<any[]>([]);
150 | 
151 | function onSelect(row: any) {
152 |   const index = selected.value.findIndex((item) => item.id === row.id);
153 |   if (index === -1) {
154 |     selected.value.push(row);
155 |   } else {
156 |     selected.value.splice(index, 1);
157 |   }
158 | }
159 | 
160 | const deleting = ref(false);
161 | async function deleteSelected() {
162 |   deleting.value = true;
163 |   const { error } = await useFetch(`/api/forms/${props.formId}/submissions`, {
164 |     method: "DELETE",
165 |     body: JSON.stringify({
166 |       ids: selected.value.map((item) => item.id),
167 |     }),
168 |   });
169 |   deleting.value = false;
170 |   if (error.value) {
171 |     console.error(error.value);
172 |     return;
173 |   }
174 |   deleteSubmissions(selected.value.map((item) => item.id));
175 |   selected.value = [];
176 | }
177 | 
178 | function deleteSubmissions(ids: string[]) {
179 |   if (submissionObject.value) {
180 |     submissionObject.value.submissions =
181 |       submissionObject.value.submissions.filter(
182 |         (submission) => !ids.includes(submission.id)
183 |       );
184 |   }
185 | }
186 | 
187 | // View
188 | const view = ref("Inbox");
189 | watch(
190 |   () => view.value,
191 |   async (_) => {
192 |     await fetchSubmissions();
193 |   }
194 | );
195 | </script>
196 | 
197 | <style scoped></style>
198 | 


--------------------------------------------------------------------------------
/pages/pricing.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="bg-white py-12 sm:py-24">
  3 |     <div class="mx-auto max-w-7xl px-6 lg:px-8">
  4 |       <div class="mx-auto max-w-4xl sm:text-center">
  5 |         <h2 class="text-base font-semibold leading-7 text-primary-600">
  6 |           Pricing
  7 |         </h2>
  8 |         <p
  9 |           class="mt-2 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl"
 10 |         >
 11 |           Simple and transparent pricing.
 12 |         </p>
 13 |       </div>
 14 |       <p
 15 |         class="mx-auto mt-6 max-w-2xl text-lg leading-8 text-gray-600 sm:text-center"
 16 |       >
 17 |         Use OpenformStack for free. Upgrade to enable unlimited submissions,
 18 |         enhanced spam filters, and additional features.
 19 |       </p>
 20 |       <div class="mt-16 flex justify-center">
 21 |         <RadioGroup
 22 |           v-model="frequency"
 23 |           class="grid grid-cols-2 gap-x-1 rounded-full p-1 text-center text-xs font-semibold leading-5 ring-1 ring-inset ring-gray-200"
 24 |         >
 25 |           <RadioGroupLabel class="sr-only">Payment frequency</RadioGroupLabel>
 26 |           <RadioGroupOption
 27 |             as="template"
 28 |             v-for="option in frequencies"
 29 |             :key="option.value"
 30 |             :value="option"
 31 |             v-slot="{ checked }"
 32 |           >
 33 |             <div
 34 |               :class="[
 35 |                 checked ? 'bg-primary-600 text-white' : 'text-gray-500',
 36 |                 'cursor-pointer rounded-full px-2.5 py-1',
 37 |               ]"
 38 |             >
 39 |               <span>{{ option.label }}</span>
 40 |             </div>
 41 |           </RadioGroupOption>
 42 |         </RadioGroup>
 43 |       </div>
 44 | 
 45 |       <div
 46 |         class="isolate mx-auto mt-8 grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-2xl"
 47 |       >
 48 |         <div
 49 |           v-for="tier in tiers"
 50 |           :key="tier.id"
 51 |           :class="[
 52 |             tier.mostPopular
 53 |               ? 'ring-2 ring-orange-600'
 54 |               : 'ring-1 ring-gray-200',
 55 |             'rounded-3xl p-8 xl:p-10 flex flex-col justify-between',
 56 |           ]"
 57 |         >
 58 |           <div>
 59 |             <div class="flex items-center justify-between gap-x-4">
 60 |               <h3
 61 |                 :id="tier.id"
 62 |                 :class="[
 63 |                   tier.mostPopular ? 'text-orange-600' : 'text-gray-900',
 64 |                   'text-lg font-semibold leading-8',
 65 |                 ]"
 66 |               >
 67 |                 {{ tier.name }}
 68 |               </h3>
 69 |               <p
 70 |                 v-if="tier.mostPopular"
 71 |                 class="rounded-full bg-orange-600/10 px-2.5 py-1 text-xs font-semibold leading-5 text-orange-600"
 72 |               >
 73 |                 Most popular
 74 |               </p>
 75 |             </div>
 76 |             <p class="mt-4 text-sm leading-6 text-gray-600">
 77 |               {{ tier.description }}
 78 |             </p>
 79 |             <p v-if="tier.price" class="mt-6 flex items-baseline gap-x-1">
 80 |               <span class="text-4xl font-bold tracking-tight text-gray-900">
 81 |                 {{ (tier.price as any)[frequency.value] }}
 82 |               </span>
 83 |               <span class="text-sm font-semibold leading-6 text-gray-600">
 84 |                 {{ frequency.priceSuffix }}
 85 |               </span>
 86 |             </p>
 87 |             <ul
 88 |               role="list"
 89 |               class="mt-8 space-y-3 text-sm leading-6 text-gray-600 xl:mt-10"
 90 |             >
 91 |               <li
 92 |                 v-for="feature in tier.features"
 93 |                 :key="feature"
 94 |                 class="flex gap-x-3"
 95 |               >
 96 |                 <CheckIcon
 97 |                   class="h-6 w-5 flex-none text-orange-600"
 98 |                   aria-hidden="true"
 99 |                 />
100 |                 {{ feature }}
101 |               </li>
102 |             </ul>
103 |           </div>
104 | 
105 |           <button
106 |             :aria-describedby="tier.id"
107 |             :class="[
108 |               tier.mostPopular
109 |                 ? 'bg-orange-600 text-white shadow-sm hover:bg-orange-500'
110 |                 : 'text-orange-600 ring-1 ring-inset ring-orange-200 hover:ring-orange-300',
111 |               'mt-6 block rounded-md py-2 px-3 text-center text-sm font-semibold leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-600',
112 |             ]"
113 |             @click="continueWithGoogle"
114 |           >
115 |             Get started with {{ tier.name }}
116 |           </button>
117 |         </div>
118 |       </div>
119 |     </div>
120 |   </div>
121 | </template>
122 | 
123 | <script setup lang="ts">
124 | import { RadioGroup, RadioGroupLabel, RadioGroupOption } from "@headlessui/vue";
125 | import { CheckIcon } from "@heroicons/vue/20/solid";
126 | 
127 | definePageMeta({
128 |   layout: "open",
129 | });
130 | 
131 | const frequencies = [
132 |   { value: "monthly", label: "Monthly", priceSuffix: "/month" },
133 |   { value: "annually", label: "Annually", priceSuffix: "/year" },
134 | ];
135 | 
136 | const tiers = [
137 |   {
138 |     name: "Free",
139 |     id: "tier-free",
140 |     price: { monthly: "$0", annually: "$0" },
141 |     description: "Free forever",
142 |     features: ["Unlimited forms", "100 submissions per month"],
143 |     mostPopular: false,
144 |   },
145 |   {
146 |     name: "Pro",
147 |     id: "tier-pro",
148 |     price: { monthly: "$19", annually: "$199" },
149 |     description: "Best for pro users and agencies.",
150 |     features: [
151 |       "Unlimited forms",
152 |       "Unlimited submissions per month",
153 |       "Priority support",
154 |     ],
155 |     mostPopular: true,
156 |   },
157 | ];
158 | 
159 | const frequency = ref(frequencies[0]);
160 | 
161 | const { signIn } = useAuth();
162 | async function continueWithGoogle() {
163 |   await signIn("google", { callbackUrl: "/settings/billing" });
164 | }
165 | </script>
166 | 
167 | <style scoped></style>
168 | 


--------------------------------------------------------------------------------
/components/Lp/HeroSection.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="relative isolate pt-14">
  3 |     <div class="py-24 sm:py-32 lg:pb-40">
  4 |       <div class="sm:px-6 mx-auto max-w-7xl lg:px-8">
  5 |         <div class="max-w-3xl mx-auto text-center">
  6 |           <h1
  7 |             class="text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-6xl"
  8 |           >
  9 |             Form meets API
 10 |           </h1>
 11 |           <p
 12 |             class="mt-6 text-sm sm:text-lg leading-6 sm:leading-8 text-gray-700 dark:text-gray-300"
 13 |           >
 14 |             OpenformStack is an open source form backend that allows you to
 15 |             collect form submissions without writing any backend code.
 16 |           </p>
 17 |           <div class="flex items-center justify-center mt-10 gap-x-6">
 18 |             <UButton
 19 |               @click="continueWithGoogle"
 20 |               color="primary"
 21 |               variant="solid"
 22 |             >
 23 |               <IconGoogle class="w-5 h-5" />
 24 |               Continue with Google
 25 |             </UButton>
 26 |             <NuxtLink
 27 |               to="https://github.com/naveennaidu/OpenformStack"
 28 |               target="_blank"
 29 |               class="text-sm font-semibold leading-6 text-gray-900 dark:text-white flex items-center hover:bg-gray-300/20 hover:dark:bg-gray-800/60 px-4 py-1.5 rounded-md transition-colors duration-200 ease-in-out"
 30 |             >
 31 |               <githubIcon class="w-5 h-5" />
 32 |               <div class="ml-2">Github</div>
 33 |             </NuxtLink>
 34 |           </div>
 35 |         </div>
 36 |         <div class="relative sm:px-12 pt-8 sm:pt-16">
 37 |           <div class="max-w-2xl mx-auto md:mx-0 md:max-w-none">
 38 |             <div class="overflow-hidden bg-gray-900 sm:rounded-xl">
 39 |               <div class="flex bg-gray-800/40">
 40 |                 <div
 41 |                   class="flex -mb-px text-sm font-medium leading-6 text-gray-400 cursor-pointer"
 42 |                 >
 43 |                   <div
 44 |                     v-for="tab in ['html', 'react', 'vue']"
 45 |                     class="px-4 py-2"
 46 |                     :class="
 47 |                       selectedTab === tab
 48 |                         ? 'bg-white/5 border-r-white/10 text-white border-b border-r border-l border-l-white/10 border-b-white/20'
 49 |                         : 'border-gray-600/10'
 50 |                     "
 51 |                     @click="selectedTab = tab"
 52 |                   >
 53 |                     {{ tab }}
 54 |                   </div>
 55 |                 </div>
 56 |               </div>
 57 |               <div class="relative px-6 pt-2 text-white pb-10 overflow-x-auto">
 58 |                 <LpFormCode
 59 |                   :code="code"
 60 |                   :lang="selectedTab === 'react' ? 'js' : 'html'"
 61 |                 />
 62 |                 <UButton
 63 |                   size="2xs"
 64 |                   class="absolute"
 65 |                   :class="generateEndpointPosition"
 66 |                   @click="continueWithGoogle"
 67 |                 >
 68 |                   Generate Endpoint
 69 |                 </UButton>
 70 |               </div>
 71 |             </div>
 72 |           </div>
 73 |         </div>
 74 |       </div>
 75 |     </div>
 76 |   </div>
 77 | </template>
 78 | 
 79 | <script setup lang="ts">
 80 | const selectedTab = ref("html");
 81 | 
 82 | const { signIn } = useAuth();
 83 | async function continueWithGoogle() {
 84 |   await signIn("google", { callbackUrl: "/dashboard" });
 85 | }
 86 | 
 87 | const githubIcon = defineComponent({
 88 |   render: () =>
 89 |     h("svg", { fill: "currentColor", viewBox: "0 0 24 24" }, [
 90 |       h("path", {
 91 |         "fill-rule": "evenodd",
 92 |         d: "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z",
 93 |         "clip-rule": "evenodd",
 94 |       }),
 95 |     ]),
 96 | });
 97 | 
 98 | const code = computed(() => {
 99 |   switch (selectedTab.value) {
100 |     case "html":
101 |       return `<form action="{endpoint}" method="POST">
102 |   <input type="email" name="email">
103 |   <button type="submit">Join Waitlist</button>
104 | </form>
105 | `;
106 |     case "react":
107 |       return `import React, { useState } from 'react';
108 | import axios from 'axios';
109 | 
110 | function Form() {
111 |   const [email, setEmail] = useState('');
112 | 
113 |   const handleSubmit = async (e) => {
114 |     e.preventDefault();
115 | 
116 |     try {
117 |       const response = await axios.post('YOUR_API_ENDPOINT', { email });
118 |       console.log('API call successful:', response.data);
119 |     } catch (error) {
120 |       console.error('API call failed:', error);
121 |     }
122 |   };
123 | 
124 |   return (
125 |     <form onSubmit={handleSubmit}>
126 |       <input
127 |         type="email"
128 |         value={email}
129 |         onChange={(e) => setEmail(e.target.value)}
130 |         required
131 |       />
132 |       <button type="submit">Join Waitlist</button>
133 |     </form>
134 |   );
135 | }
136 | 
137 | export default Form;
138 |     `;
139 |     case "vue":
140 |       return `<template>
141 |   <form @submit.prevent="submitForm">
142 |     <input type="email" name="email" v-model="email" />
143 |     <button type="submit">Join Waitlist</button>
144 |   <\/form>
145 | <\/template>
146 | 
147 | <script setup>
148 | const email = ref("");
149 | 
150 | async function submitForm() {
151 |   await fetch("{endpoint}", {
152 |     method: "POST",
153 |     headers: {
154 |       "Content-Type": "application/json",
155 |     },
156 |     body: JSON.stringify({ email: email.value }),
157 |   });
158 | }
159 | <\/script>`;
160 |     default:
161 |       return "";
162 |   }
163 | });
164 | 
165 | const generateEndpointPosition = computed(() => {
166 |   switch (selectedTab.value) {
167 |     case "html":
168 |       return "top-[8px] left-[148px]";
169 |     case "react":
170 |       return "top-[440px] left-[212px]";
171 |     case "vue":
172 |       return "top-[272px] left-[160px]";
173 |     default:
174 |       return "top-[8px] left-[148px]";
175 |   }
176 | });
177 | </script>
178 | 
179 | <style scoped></style>
180 | 


--------------------------------------------------------------------------------
/pages/refund.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container py-24 mx-auto prose dark:prose-invert">
  3 |     <h1>Return and Refund Policy</h1>
  4 |     <p>Last updated: September 12, 2023</p>
  5 |     <p>Thank you for shopping at OpenformStack.</p>
  6 |     <p>
  7 |       If, for any reason, You are not completely satisfied with a purchase We
  8 |       invite You to review our policy on refunds and returns. This Return and
  9 |       Refund Policy has been created with the help of the
 10 |       <a
 11 |         href="https://www.freeprivacypolicy.com/free-return-refund-policy-generator/"
 12 |         target="_blank"
 13 |         >Free Return and Refund Policy Generator</a
 14 |       >.
 15 |     </p>
 16 |     <p>
 17 |       The following terms are applicable for any products that You purchased
 18 |       with Us.
 19 |     </p>
 20 |     <h1>Interpretation and Definitions</h1>
 21 |     <h2>Interpretation</h2>
 22 |     <p>
 23 |       The words of which the initial letter is capitalized have meanings defined
 24 |       under the following conditions. The following definitions shall have the
 25 |       same meaning regardless of whether they appear in singular or in plural.
 26 |     </p>
 27 |     <h2>Definitions</h2>
 28 |     <p>For the purposes of this Return and Refund Policy:</p>
 29 |     <ul>
 30 |       <li>
 31 |         <p>
 32 |           <strong>Company</strong> (referred to as either &quot;the
 33 |           Company&quot;, &quot;We&quot;, &quot;Us&quot; or &quot;Our&quot; in
 34 |           this Agreement) refers to Zeitalabs, 14-164/2, Laxmi Nagar,
 35 |           Chinamushidivada, Pendurthi, Visakhapatnam, 531173.
 36 |         </p>
 37 |       </li>
 38 |       <li>
 39 |         <p>
 40 |           <strong>Goods</strong> refer to the items offered for sale on the
 41 |           Service.
 42 |         </p>
 43 |       </li>
 44 |       <li>
 45 |         <p>
 46 |           <strong>Orders</strong> mean a request by You to purchase Goods from
 47 |           Us.
 48 |         </p>
 49 |       </li>
 50 |       <li>
 51 |         <p><strong>Service</strong> refers to the Website.</p>
 52 |       </li>
 53 |       <li>
 54 |         <p>
 55 |           <strong>Website</strong> refers to OpenformStack, accessible from
 56 |           <a
 57 |             href="https://www.openformstack.com/"
 58 |             rel="external nofollow noopener"
 59 |             target="_blank"
 60 |             >https://www.openformstack.com/</a
 61 |           >
 62 |         </p>
 63 |       </li>
 64 |       <li>
 65 |         <p>
 66 |           <strong>You</strong> means the individual accessing or using the
 67 |           Service, or the company, or other legal entity on behalf of which such
 68 |           individual is accessing or using the Service, as applicable.
 69 |         </p>
 70 |       </li>
 71 |     </ul>
 72 |     <h1>Your Order Cancellation Rights</h1>
 73 |     <p>
 74 |       You are entitled to cancel Your Order within 14 days without giving any
 75 |       reason for doing so.
 76 |     </p>
 77 |     <p>
 78 |       The deadline for cancelling an Order is 14 days from the date on which You
 79 |       received the Goods or on which a third party you have appointed, who is
 80 |       not the carrier, takes possession of the product delivered.
 81 |     </p>
 82 |     <p>
 83 |       In order to exercise Your right of cancellation, You must inform Us of
 84 |       your decision by means of a clear statement. You can inform us of your
 85 |       decision by:
 86 |     </p>
 87 |     <ul>
 88 |       <li>By email: naveen@zeitalabs.com</li>
 89 |     </ul>
 90 |     <p>
 91 |       We will reimburse You no later than 14 days from the day on which We
 92 |       receive the returned Goods. We will use the same means of payment as You
 93 |       used for the Order, and You will not incur any fees for such
 94 |       reimbursement.
 95 |     </p>
 96 |     <h1>Conditions for Returns</h1>
 97 |     <p>
 98 |       In order for the Goods to be eligible for a return, please make sure that:
 99 |     </p>
100 |     <ul>
101 |       <li>The Goods were purchased in the last 14 days</li>
102 |       <li>The Goods are in the original packaging</li>
103 |     </ul>
104 |     <p>The following Goods cannot be returned:</p>
105 |     <ul>
106 |       <li>
107 |         The supply of Goods made to Your specifications or clearly personalized.
108 |       </li>
109 |       <li>
110 |         The supply of Goods which according to their nature are not suitable to
111 |         be returned, deteriorate rapidly or where the date of expiry is over.
112 |       </li>
113 |       <li>
114 |         The supply of Goods which are not suitable for return due to health
115 |         protection or hygiene reasons and were unsealed after delivery.
116 |       </li>
117 |       <li>
118 |         The supply of Goods which are, after delivery, according to their
119 |         nature, inseparably mixed with other items.
120 |       </li>
121 |     </ul>
122 |     <p>
123 |       We reserve the right to refuse returns of any merchandise that does not
124 |       meet the above return conditions in our sole discretion.
125 |     </p>
126 |     <p>
127 |       Only regular priced Goods may be refunded. Unfortunately, Goods on sale
128 |       cannot be refunded. This exclusion may not apply to You if it is not
129 |       permitted by applicable law.
130 |     </p>
131 |     <h1>Returning Goods</h1>
132 |     <p>
133 |       You are responsible for the cost and risk of returning the Goods to Us.
134 |       You should send the Goods at the following address:
135 |     </p>
136 |     <p>
137 |       14-164/2, Laxmi Nagar, Chinamushidivada, Pendurthi, Visakhapatnam, 531173
138 |     </p>
139 |     <p>
140 |       We cannot be held responsible for Goods damaged or lost in return
141 |       shipment. Therefore, We recommend an insured and trackable mail service.
142 |       We are unable to issue a refund without actual receipt of the Goods or
143 |       proof of received return delivery.
144 |     </p>
145 |     <h1>Gifts</h1>
146 |     <p>
147 |       If the Goods were marked as a gift when purchased and then shipped
148 |       directly to you, You'll receive a gift credit for the value of your
149 |       return. Once the returned product is received, a gift certificate will be
150 |       mailed to You.
151 |     </p>
152 |     <p>
153 |       If the Goods weren't marked as a gift when purchased, or the gift giver
154 |       had the Order shipped to themselves to give it to You later, We will send
155 |       the refund to the gift giver.
156 |     </p>
157 |     <h2>Contact Us</h2>
158 |     <p>
159 |       If you have any questions about our Returns and Refunds Policy, please
160 |       contact us:
161 |     </p>
162 |     <ul>
163 |       <li>By email: naveen@zeitalabs.com</li>
164 |     </ul>
165 |   </div>
166 | </template>
167 | 
168 | <script setup lang="ts">
169 | definePageMeta({
170 |   layout: "open",
171 | });
172 | </script>
173 | 
174 | <style scoped></style>
175 | 


--------------------------------------------------------------------------------
/components/Settings/Billing.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="bg-white py-3 sm:py-6">
  3 |     <div v-if="!isSubscribed" class="mx-auto max-w-7xl px-6 lg:px-8">
  4 |       <div class="mt-16 flex justify-center">
  5 |         <RadioGroup
  6 |           v-model="frequency"
  7 |           class="grid grid-cols-2 gap-x-1 rounded-full p-1 text-center text-xs font-semibold leading-5 ring-1 ring-inset ring-gray-200"
  8 |         >
  9 |           <RadioGroupLabel class="sr-only">Payment frequency</RadioGroupLabel>
 10 |           <RadioGroupOption
 11 |             as="template"
 12 |             v-for="option in frequencies"
 13 |             :key="option.value"
 14 |             :value="option"
 15 |             v-slot="{ checked }"
 16 |           >
 17 |             <div
 18 |               :class="[
 19 |                 checked ? 'bg-primary-600 text-white' : 'text-gray-500',
 20 |                 'cursor-pointer rounded-full px-2.5 py-1',
 21 |               ]"
 22 |             >
 23 |               <span>{{ option.label }}</span>
 24 |             </div>
 25 |           </RadioGroupOption>
 26 |         </RadioGroup>
 27 |       </div>
 28 |       <div
 29 |         class="isolate mx-auto mt-10 grid max-w-md grid-cols-1 gap-8 lg:max-w-3xl lg:grid-cols-2"
 30 |       >
 31 |         <div
 32 |           v-for="tier in tiers"
 33 |           :key="tier.id"
 34 |           :class="[
 35 |             tier.mostPopular
 36 |               ? 'ring-2 ring-orange-600'
 37 |               : 'ring-1 ring-gray-200',
 38 |             'rounded-3xl p-8 xl:p-10 flex flex-col justify-between',
 39 |           ]"
 40 |         >
 41 |           <div>
 42 |             <div class="flex items-center justify-between gap-x-4">
 43 |               <h3
 44 |                 :id="tier.id"
 45 |                 :class="[
 46 |                   tier.mostPopular ? 'text-orange-600' : 'text-gray-900',
 47 |                   'text-lg font-semibold leading-8',
 48 |                 ]"
 49 |               >
 50 |                 {{ tier.name }}
 51 |               </h3>
 52 |               <p
 53 |                 v-if="tier.mostPopular"
 54 |                 class="rounded-full bg-orange-600/10 px-2.5 py-1 text-xs font-semibold leading-5 text-orange-600"
 55 |               >
 56 |                 Most popular
 57 |               </p>
 58 |             </div>
 59 |             <p class="mt-4 text-sm leading-6 text-gray-600">
 60 |               {{ tier.description }}
 61 |             </p>
 62 |             <p v-if="tier.price" class="mt-6 flex items-baseline gap-x-1">
 63 |               <span class="text-4xl font-bold tracking-tight text-gray-900">
 64 |                 {{ (tier.price as any)[frequency.value] }}
 65 |               </span>
 66 |               <span class="text-sm font-semibold leading-6 text-gray-600">
 67 |                 {{ frequency.priceSuffix }}
 68 |               </span>
 69 |             </p>
 70 |             <ul
 71 |               role="list"
 72 |               class="mt-8 space-y-3 text-sm leading-6 text-gray-600 xl:mt-10"
 73 |             >
 74 |               <li
 75 |                 v-for="feature in tier.features"
 76 |                 :key="feature"
 77 |                 class="flex gap-x-3"
 78 |               >
 79 |                 <CheckIcon
 80 |                   class="h-6 w-5 flex-none text-orange-600"
 81 |                   aria-hidden="true"
 82 |                 />
 83 |                 {{ feature }}
 84 |               </li>
 85 |             </ul>
 86 |           </div>
 87 | 
 88 |           <UButton
 89 |             v-if="tier.id !== 'tier-free'"
 90 |             :aria-describedby="tier.id"
 91 |             :variant="tier.mostPopular ? 'solid' : 'outline'"
 92 |             size="lg"
 93 |             class="mt-8"
 94 |             block
 95 |             :loading="checkoutLoading"
 96 |             @click="goToCheckout((tier.priceId as any)[frequency.value])"
 97 |           >
 98 |             Upgrade to {{ tier.name }}
 99 |           </UButton>
100 |         </div>
101 |       </div>
102 |     </div>
103 |     <div v-else class="p-8 ring-1 ring-gray-200 rounded-md">
104 |       <div class="text-2xl">Thank you for subscribing to OpenformStack!</div>
105 |       <div class="text-gray-600">
106 |         You can manage your billing information and subscription from Stripe
107 |       </div>
108 |       <div class="grid grid-cols-2 max-w-md my-4">
109 |         <div>Current plan:</div>
110 |         <div class="font-semibold">Pro</div>
111 |         <div>Current Period:</div>
112 |         <div v-if="activeSubscription" class="font-semibold">
113 |           {{
114 |             dayjs(activeSubscription.currentPeriodStart).format("MMM DD, YYYY")
115 |           }}
116 |           -
117 |           {{
118 |             dayjs(activeSubscription.currentPeriodEnd).format("MMM DD, YYYY")
119 |           }}
120 |         </div>
121 |       </div>
122 |       <UButton
123 |         color="primary"
124 |         variant="solid"
125 |         size="sm"
126 |         class="mt-2"
127 |         @click="openPortal"
128 |       >
129 |         Manage subscription
130 |       </UButton>
131 |     </div>
132 |   </div>
133 | </template>
134 | 
135 | <script setup lang="ts">
136 | import { RadioGroup, RadioGroupLabel, RadioGroupOption } from "@headlessui/vue";
137 | import { CheckIcon } from "@heroicons/vue/20/solid";
138 | 
139 | const dayjs = useDayjs();
140 | const { data: user } = await useFetch("/api/me");
141 | 
142 | const isSubscribed = computed(() => {
143 |   return (
144 |     user.value &&
145 |     user.value.user &&
146 |     user.value.user.Subscription.length > 0 &&
147 |     user.value.user.Subscription.some((sub: any) => sub.status === "active")
148 |   );
149 | });
150 | 
151 | const activeSubscription = computed(() => {
152 |   return (
153 |     user.value &&
154 |     user.value.user &&
155 |     user.value.user.Subscription.length > 0 &&
156 |     user.value.user.Subscription.find((sub: any) => sub.status === "active")
157 |   );
158 | });
159 | 
160 | const frequencies = [
161 |   { value: "monthly", label: "Monthly", priceSuffix: "/month" },
162 |   { value: "annually", label: "Annually", priceSuffix: "/year" },
163 | ];
164 | 
165 | const priceIds = {
166 |   development: {
167 |     monthly: "price_1NskO4SGPjGwYh1B0kEccEiE",
168 |     annually: "price_1NskO4SGPjGwYh1BTiewLkmd",
169 |   },
170 |   production: {
171 |     monthly: "price_1Nskg5SGPjGwYh1BrrzAeaT5",
172 |     annually: "price_1Nskg4SGPjGwYh1Bw4mLoPcj",
173 |   },
174 | };
175 | 
176 | const env = (process.env.NODE_ENV ?? "development") as
177 |   | "development"
178 |   | "production";
179 | 
180 | const tiers = [
181 |   {
182 |     name: "Free",
183 |     id: "tier-free",
184 |     price: { monthly: "$0", annually: "$0" },
185 |     description: "Free forever",
186 |     features: ["Unlimited forms", "100 submissions per month"],
187 |     mostPopular: false,
188 |   },
189 |   {
190 |     name: "Pro",
191 |     id: "tier-pro",
192 |     price: { monthly: "$19", annually: "$199" },
193 |     priceId: {
194 |       monthly: priceIds[env].monthly,
195 |       annually: priceIds[env].annually,
196 |     },
197 |     description: "Best for pro use and agencies.",
198 |     features: [
199 |       "Unlimited forms",
200 |       "Unlimited submissions per month",
201 |       "Priority support",
202 |     ],
203 |     mostPopular: true,
204 |   },
205 | ];
206 | 
207 | const frequency = ref(frequencies[0]);
208 | 
209 | const checkoutLoading = ref(false);
210 | async function goToCheckout(priceId: string) {
211 |   checkoutLoading.value = true;
212 |   const { data } = await useFetch("/api/stripe/checkout", {
213 |     method: "POST",
214 |     body: JSON.stringify({
215 |       priceId,
216 |     }),
217 |   });
218 |   checkoutLoading.value = false;
219 |   if (data.value && data.value.stripeSession.url) {
220 |     window.open(data.value.stripeSession.url, "_blank");
221 |   }
222 | }
223 | 
224 | async function openPortal() {
225 |   const { data } = await useFetch("/api/stripe/portal", {
226 |     method: "POST",
227 |   });
228 |   if (data.value && data.value.url) {
229 |     window.open(data.value.url, "_blank");
230 |   }
231 | }
232 | </script>
233 | 
234 | <style scoped></style>
235 | 


--------------------------------------------------------------------------------
/components/Form/Settings.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="space-y-10 divide-y divide-gray-900/10 dark:divide-gray-100/10">
  3 |     <div class="grid grid-cols-1 gap-x-8 gap-y-8 md:grid-cols-3">
  4 |       <div class="px-4 sm:px-0">
  5 |         <h2
  6 |           class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100"
  7 |         >
  8 |           General
  9 |         </h2>
 10 |         <p class="mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">
 11 |           Basic information about your form.
 12 |         </p>
 13 |       </div>
 14 | 
 15 |       <form
 16 |         class="bg-white dark:bg-black shadow-sm ring-1 ring-gray-900/5 dark:ring-gray-100/10 sm:rounded-xl md:col-span-2"
 17 |         @submit.prevent="updateGeneralForm"
 18 |       >
 19 |         <div class="px-4 py-6 sm:p-8">
 20 |           <div
 21 |             class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6"
 22 |           >
 23 |             <div class="sm:col-span-4">
 24 |               <UFormGroup label="Form Name">
 25 |                 <UInput v-model="formData.name" />
 26 |               </UFormGroup>
 27 |             </div>
 28 | 
 29 |             <div class="col-span-full">
 30 |               <div class="flex items-center justify-between">
 31 |                 <UFormGroup
 32 |                   label="Close Form"
 33 |                   description="People won't be able to respond to this form anymore."
 34 |                 >
 35 |                 </UFormGroup>
 36 |                 <UToggle v-model="formData.closed" />
 37 |               </div>
 38 |             </div>
 39 |           </div>
 40 |         </div>
 41 |         <div
 42 |           class="flex items-center justify-end gap-x-6 border-t border-gray-900/10 dark:border-gray-100/10 px-4 py-4 sm:px-8"
 43 |         >
 44 |           <UButton type="submit" :loading="generalLoading"> Save </UButton>
 45 |         </div>
 46 |       </form>
 47 |     </div>
 48 | 
 49 |     <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-10 md:grid-cols-3">
 50 |       <div class="px-4 sm:px-0">
 51 |         <h2
 52 |           class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100"
 53 |         >
 54 |           Thank You Page
 55 |         </h2>
 56 |         <p class="mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">
 57 |           Customize the thank you page for your form.
 58 |         </p>
 59 |       </div>
 60 | 
 61 |       <form
 62 |         class="bg-white dark:bg-black shadow-sm ring-1 ring-gray-900/5 dark:ring-gray-100/10 sm:rounded-xl md:col-span-2"
 63 |         @submit.prevent="updateRedirectForm"
 64 |       >
 65 |         <div class="px-4 py-6 sm:p-8">
 66 |           <div
 67 |             class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6"
 68 |           >
 69 |             <div class="col-span-full">
 70 |               <URadio
 71 |                 v-model="formData.customRedirect"
 72 |                 :value="false"
 73 |                 label="Default"
 74 |                 help="Users will be redirected to default thank you page"
 75 |                 class="mb-2"
 76 |               >
 77 |                 <template #label>
 78 |                   <span>
 79 |                     Default (<span class="text-primary-400">
 80 |                       openformstack.com/thank-you
 81 |                     </span>
 82 |                     )
 83 |                   </span>
 84 |                 </template>
 85 |               </URadio>
 86 |               <URadio
 87 |                 v-model="formData.customRedirect"
 88 |                 :value="true"
 89 |                 label="Custom"
 90 |                 help="Users will be redirected to your custom thank you page"
 91 |               />
 92 | 
 93 |               <UInput
 94 |                 v-if="formData.customRedirect"
 95 |                 v-model="formData.customRedirectUrl"
 96 |                 placeholder="https://example.com/thank-you"
 97 |                 class="mt-4 ml-6"
 98 |               />
 99 |             </div>
100 |           </div>
101 |         </div>
102 |         <div
103 |           class="flex items-center justify-end gap-x-6 border-t border-gray-900/10 dark:border-gray-100/10 px-4 py-4 sm:px-8"
104 |         >
105 |           <UButton type="submit" :loading="redirectLoading"> Save </UButton>
106 |         </div>
107 |       </form>
108 |     </div>
109 | 
110 |     <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-10 md:grid-cols-3">
111 |       <div class="px-4 sm:px-0">
112 |         <h2
113 |           class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100"
114 |         >
115 |           Email Notifications
116 |         </h2>
117 |         <p class="mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">
118 |           Manage your email notifications settings.
119 |         </p>
120 |       </div>
121 | 
122 |       <form
123 |         class="bg-white dark:bg-black shadow-sm ring-1 ring-gray-900/5 dark:ring-gray-100/10 sm:rounded-xl md:col-span-2"
124 |         @submit.prevent="updateNotificationForm"
125 |       >
126 |         <div class="px-4 py-6 sm:p-8">
127 |           <div
128 |             class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6"
129 |           >
130 |             <div class="col-span-full">
131 |               <div class="flex items-center justify-between">
132 |                 <UFormGroup
133 |                   label="Self Email Notification"
134 |                   description="Get an email for new form submissions."
135 |                 >
136 |                 </UFormGroup>
137 |                 <UToggle v-model="formData.selfEmailNotification" />
138 |               </div>
139 |               <UFormGroup
140 |                 v-if="formData.selfEmailNotification"
141 |                 label="Emails"
142 |                 description="Add more emails to get notified. Separate each email by comma"
143 |                 class="mt-2 p-3 ring-1 ring-gray-200 rounded"
144 |               >
145 |                 <UInput
146 |                   v-model="formData.selfEmails"
147 |                   placeholder="example1@test.com,example2@test.com"
148 |                   class="mt-2"
149 |                 />
150 |               </UFormGroup>
151 |             </div>
152 |             <div class="col-span-full">
153 |               <div class="flex items-center justify-between">
154 |                 <UFormGroup
155 |                   label="Respondent Email Notification"
156 |                   description="Send a customized text email to respondents after form submission."
157 |                 >
158 |                 </UFormGroup>
159 |                 <UToggle v-model="formData.respondentEmailNotification" />
160 |               </div>
161 |               <div
162 |                 v-if="formData.respondentEmailNotification"
163 |                 class="mt-2 mx-6 space-y-2"
164 |               >
165 |                 <UFormGroup label="From Name" required>
166 |                   <UInput
167 |                     v-model="formData.fromName"
168 |                     placeholder="Company Name"
169 |                     required
170 |                   />
171 |                 </UFormGroup>
172 |                 <UFormGroup label="Subject" required>
173 |                   <UInput
174 |                     v-model="formData.subject"
175 |                     placeholder="Email subject"
176 |                     required
177 |                   />
178 |                 </UFormGroup>
179 |                 <UFormGroup label="Message" required>
180 |                   <UTextarea
181 |                     v-model="formData.message"
182 |                     placeholder="Email message"
183 |                     required
184 |                   />
185 |                 </UFormGroup>
186 |               </div>
187 |             </div>
188 |           </div>
189 |         </div>
190 |         <div
191 |           class="flex items-center justify-end gap-x-6 border-t border-gray-900/10 dark:border-gray-100/10 px-4 py-4 sm:px-8"
192 |         >
193 |           <UButton type="submit" :loading="notificationLoading"> Save </UButton>
194 |         </div>
195 |       </form>
196 |     </div>
197 |   </div>
198 | </template>
199 | 
200 | <script setup lang="ts">
201 | import { useWorkspaceStore } from "~/store/workspace";
202 | 
203 | const props = defineProps({
204 |   form: {
205 |     type: Object,
206 |     required: true,
207 |   },
208 | });
209 | 
210 | const formData = ref({
211 |   name: "",
212 |   closed: false,
213 |   selfEmailNotification: true,
214 |   selfEmails: "" as string,
215 |   respondentEmailNotification: false,
216 |   customRedirect: false,
217 |   customRedirectUrl: undefined as string | undefined,
218 |   fromName: "",
219 |   subject: "",
220 |   message: "",
221 | });
222 | 
223 | onMounted(() => {
224 |   formData.value.name = props.form.name;
225 |   formData.value.closed = props.form.closed;
226 |   formData.value.selfEmailNotification = props.form.selfEmailNotification;
227 |   formData.value.selfEmails = props.form.selfEmails.join(",");
228 |   formData.value.respondentEmailNotification =
229 |     props.form.respondentEmailNotification;
230 |   formData.value.customRedirect = props.form.customRedirect ?? false;
231 |   formData.value.customRedirectUrl = props.form.customRedirectUrl;
232 |   formData.value.fromName = props.form.fromName;
233 |   formData.value.subject = props.form.subject;
234 |   formData.value.message = props.form.message;
235 | });
236 | 
237 | const workspaceStore = useWorkspaceStore();
238 | 
239 | const generalLoading = ref(false);
240 | async function updateGeneralForm() {
241 |   generalLoading.value = true;
242 |   await workspaceStore.updateForm(props.form.id, {
243 |     name: formData.value.name,
244 |     closed: formData.value.closed,
245 |   });
246 |   generalLoading.value = false;
247 | }
248 | 
249 | const redirectLoading = ref(false);
250 | async function updateRedirectForm() {
251 |   redirectLoading.value = true;
252 |   await workspaceStore.updateForm(props.form.id, {
253 |     customRedirect: formData.value.customRedirect,
254 |     customRedirectUrl: formData.value.customRedirectUrl,
255 |   });
256 |   redirectLoading.value = false;
257 | }
258 | 
259 | const notificationLoading = ref(false);
260 | async function updateNotificationForm() {
261 |   notificationLoading.value = true;
262 |   await workspaceStore.updateForm(props.form.id, {
263 |     selfEmailNotification: formData.value.selfEmailNotification,
264 |     selfEmails: formData.value.selfEmails
265 |       ? formData.value.selfEmails.split(",").map((email) => email.trim())
266 |       : [],
267 |     respondentEmailNotification: formData.value.respondentEmailNotification,
268 |     fromName: formData.value.fromName,
269 |     subject: formData.value.subject,
270 |     message: formData.value.message,
271 |   });
272 |   notificationLoading.value = false;
273 | }
274 | </script>
275 | 
276 | <style scoped></style>
277 | 


--------------------------------------------------------------------------------
/pages/terms.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container py-24 mx-auto prose dark:prose-invert">
  3 |     <h2><strong>Terms and Conditions</strong></h2>
  4 | 
  5 |     <p>Welcome to OpenformStack!</p>
  6 | 
  7 |     <p>
  8 |       These terms and conditions outline the rules and regulations for the use
  9 |       of Zeitalabs's Website, located at https://www.openformstack.com/.
 10 |     </p>
 11 | 
 12 |     <p>
 13 |       By accessing this website we assume you accept these terms and conditions.
 14 |       Do not continue to use OpenformStack if you do not agree to take all of
 15 |       the terms and conditions stated on this page.
 16 |     </p>
 17 | 
 18 |     <p>
 19 |       The following terminology applies to these Terms and Conditions, Privacy
 20 |       Statement and Disclaimer Notice and all Agreements: "Client", "You" and
 21 |       "Your" refers to you, the person log on this website and compliant to the
 22 |       Company's terms and conditions. "The Company", "Ourselves", "We", "Our"
 23 |       and "Us", refers to our Company. "Party", "Parties", or "Us", refers to
 24 |       both the Client and ourselves. All terms refer to the offer, acceptance
 25 |       and consideration of payment necessary to undertake the process of our
 26 |       assistance to the Client in the most appropriate manner for the express
 27 |       purpose of meeting the Client's needs in respect of provision of the
 28 |       Company's stated services, in accordance with and subject to, prevailing
 29 |       law of in. Any use of the above terminology or other words in the
 30 |       singular, plural, capitalization and/or he/she or they, are taken as
 31 |       interchangeable and therefore as referring to same.
 32 |     </p>
 33 | 
 34 |     <h3><strong>Cookies</strong></h3>
 35 | 
 36 |     <p>
 37 |       We employ the use of cookies. By accessing OpenformStack, you agreed to
 38 |       use cookies in agreement with the Zeitalabs's Privacy Policy.
 39 |     </p>
 40 | 
 41 |     <p>
 42 |       Most interactive websites use cookies to let us retrieve the user's
 43 |       details for each visit. Cookies are used by our website to enable the
 44 |       functionality of certain areas to make it easier for people visiting our
 45 |       website. Some of our affiliate/advertising partners may also use cookies.
 46 |     </p>
 47 | 
 48 |     <h3><strong>License</strong></h3>
 49 | 
 50 |     <p>
 51 |       Unless otherwise stated, Zeitalabs and/or its licensors own the
 52 |       intellectual property rights for all material on OpenformStack. All
 53 |       intellectual property rights are reserved. You may access this from
 54 |       OpenformStack for your own personal use subjected to restrictions set in
 55 |       these terms and conditions.
 56 |     </p>
 57 | 
 58 |     <p>You must not:</p>
 59 |     <ul>
 60 |       <li>Republish material from OpenformStack</li>
 61 |       <li>Sell, rent or sub-license material from OpenformStack</li>
 62 |       <li>Reproduce, duplicate or copy material from OpenformStack</li>
 63 |       <li>Redistribute content from OpenformStack</li>
 64 |     </ul>
 65 | 
 66 |     <p>
 67 |       This Agreement shall begin on the date hereof. Our Terms and Conditions
 68 |       were created with the help of the
 69 |       <a href="https://www.termsandconditionsgenerator.com/"
 70 |         >Free Terms and Conditions Generator</a
 71 |       >.
 72 |     </p>
 73 | 
 74 |     <p>
 75 |       Parts of this website offer an opportunity for users to post and exchange
 76 |       opinions and information in certain areas of the website. Zeitalabs does
 77 |       not filter, edit, publish or review Comments prior to their presence on
 78 |       the website. Comments do not reflect the views and opinions of
 79 |       Zeitalabs,its agents and/or affiliates. Comments reflect the views and
 80 |       opinions of the person who post their views and opinions. To the extent
 81 |       permitted by applicable laws, Zeitalabs shall not be liable for the
 82 |       Comments or for any liability, damages or expenses caused and/or suffered
 83 |       as a result of any use of and/or posting of and/or appearance of the
 84 |       Comments on this website.
 85 |     </p>
 86 | 
 87 |     <p>
 88 |       Zeitalabs reserves the right to monitor all Comments and to remove any
 89 |       Comments which can be considered inappropriate, offensive or causes breach
 90 |       of these Terms and Conditions.
 91 |     </p>
 92 | 
 93 |     <p>You warrant and represent that:</p>
 94 | 
 95 |     <ul>
 96 |       <li>
 97 |         You are entitled to post the Comments on our website and have all
 98 |         necessary licenses and consents to do so;
 99 |       </li>
100 |       <li>
101 |         The Comments do not invade any intellectual property right, including
102 |         without limitation copyright, patent or trademark of any third party;
103 |       </li>
104 |       <li>
105 |         The Comments do not contain any defamatory, libelous, offensive,
106 |         indecent or otherwise unlawful material which is an invasion of privacy
107 |       </li>
108 |       <li>
109 |         The Comments will not be used to solicit or promote business or custom
110 |         or present commercial activities or unlawful activity.
111 |       </li>
112 |     </ul>
113 | 
114 |     <p>
115 |       You hereby grant Zeitalabs a non-exclusive license to use, reproduce, edit
116 |       and authorize others to use, reproduce and edit any of your Comments in
117 |       any and all forms, formats or media.
118 |     </p>
119 | 
120 |     <h3><strong>Hyperlinking to our Content</strong></h3>
121 | 
122 |     <p>
123 |       The following organizations may link to our Website without prior written
124 |       approval:
125 |     </p>
126 | 
127 |     <ul>
128 |       <li>Government agencies;</li>
129 |       <li>Search engines;</li>
130 |       <li>News organizations;</li>
131 |       <li>
132 |         Online directory distributors may link to our Website in the same manner
133 |         as they hyperlink to the Websites of other listed businesses; and
134 |       </li>
135 |       <li>
136 |         System wide Accredited Businesses except soliciting non-profit
137 |         organizations, charity shopping malls, and charity fundraising groups
138 |         which may not hyperlink to our Web site.
139 |       </li>
140 |     </ul>
141 | 
142 |     <p>
143 |       These organizations may link to our home page, to publications or to other
144 |       Website information so long as the link: (a) is not in any way deceptive;
145 |       (b) does not falsely imply sponsorship, endorsement or approval of the
146 |       linking party and its products and/or services; and (c) fits within the
147 |       context of the linking party's site.
148 |     </p>
149 | 
150 |     <p>
151 |       We may consider and approve other link requests from the following types
152 |       of organizations:
153 |     </p>
154 | 
155 |     <ul>
156 |       <li>commonly-known consumer and/or business information sources;</li>
157 |       <li>dot.com community sites;</li>
158 |       <li>associations or other groups representing charities;</li>
159 |       <li>online directory distributors;</li>
160 |       <li>internet portals;</li>
161 |       <li>accounting, law and consulting firms; and</li>
162 |       <li>educational institutions and trade associations.</li>
163 |     </ul>
164 | 
165 |     <p>
166 |       We will approve link requests from these organizations if we decide that:
167 |       (a) the link would not make us look unfavorably to ourselves or to our
168 |       accredited businesses; (b) the organization does not have any negative
169 |       records with us; (c) the benefit to us from the visibility of the
170 |       hyperlink compensates the absence of Zeitalabs; and (d) the link is in the
171 |       context of general resource information.
172 |     </p>
173 | 
174 |     <p>
175 |       These organizations may link to our home page so long as the link: (a) is
176 |       not in any way deceptive; (b) does not falsely imply sponsorship,
177 |       endorsement or approval of the linking party and its products or services;
178 |       and (c) fits within the context of the linking party's site.
179 |     </p>
180 | 
181 |     <p>
182 |       If you are one of the organizations listed in paragraph 2 above and are
183 |       interested in linking to our website, you must inform us by sending an
184 |       e-mail to Zeitalabs. Please include your name, your organization name,
185 |       contact information as well as the URL of your site, a list of any URLs
186 |       from which you intend to link to our Website, and a list of the URLs on
187 |       our site to which you would like to link. Wait 2-3 weeks for a response.
188 |     </p>
189 | 
190 |     <p>Approved organizations may hyperlink to our Website as follows:</p>
191 | 
192 |     <ul>
193 |       <li>By use of our corporate name; or</li>
194 |       <li>By use of the uniform resource locator being linked to; or</li>
195 |       <li>
196 |         By use of any other description of our Website being linked to that
197 |         makes sense within the context and format of content on the linking
198 |         party's site.
199 |       </li>
200 |     </ul>
201 | 
202 |     <p>
203 |       No use of Zeitalabs's logo or other artwork will be allowed for linking
204 |       absent a trademark license agreement.
205 |     </p>
206 | 
207 |     <h3><strong>iFrames</strong></h3>
208 | 
209 |     <p>
210 |       Without prior approval and written permission, you may not create frames
211 |       around our Webpages that alter in any way the visual presentation or
212 |       appearance of our Website.
213 |     </p>
214 | 
215 |     <h3><strong>Content Liability</strong></h3>
216 | 
217 |     <p>
218 |       We shall not be hold responsible for any content that appears on your
219 |       Website. You agree to protect and defend us against all claims that is
220 |       rising on your Website. No link(s) should appear on any Website that may
221 |       be interpreted as libelous, obscene or criminal, or which infringes,
222 |       otherwise violates, or advocates the infringement or other violation of,
223 |       any third party rights.
224 |     </p>
225 | 
226 |     <h3><strong>Reservation of Rights</strong></h3>
227 | 
228 |     <p>
229 |       We reserve the right to request that you remove all links or any
230 |       particular link to our Website. You approve to immediately remove all
231 |       links to our Website upon request. We also reserve the right to amen these
232 |       terms and conditions and it's linking policy at any time. By continuously
233 |       linking to our Website, you agree to be bound to and follow these linking
234 |       terms and conditions.
235 |     </p>
236 | 
237 |     <h3><strong>Removal of links from our website</strong></h3>
238 | 
239 |     <p>
240 |       If you find any link on our Website that is offensive for any reason, you
241 |       are free to contact and inform us any moment. We will consider requests to
242 |       remove links but we are not obligated to or so or to respond to you
243 |       directly.
244 |     </p>
245 | 
246 |     <p>
247 |       We do not ensure that the information on this website is correct, we do
248 |       not warrant its completeness or accuracy; nor do we promise to ensure that
249 |       the website remains available or that the material on the website is kept
250 |       up to date.
251 |     </p>
252 | 
253 |     <h3><strong>Disclaimer</strong></h3>
254 | 
255 |     <p>
256 |       To the maximum extent permitted by applicable law, we exclude all
257 |       representations, warranties and conditions relating to our website and the
258 |       use of this website. Nothing in this disclaimer will:
259 |     </p>
260 | 
261 |     <ul>
262 |       <li>
263 |         limit or exclude our or your liability for death or personal injury;
264 |       </li>
265 |       <li>
266 |         limit or exclude our or your liability for fraud or fraudulent
267 |         misrepresentation;
268 |       </li>
269 |       <li>
270 |         limit any of our or your liabilities in any way that is not permitted
271 |         under applicable law; or
272 |       </li>
273 |       <li>
274 |         exclude any of our or your liabilities that may not be excluded under
275 |         applicable law.
276 |       </li>
277 |     </ul>
278 | 
279 |     <p>
280 |       The limitations and prohibitions of liability set in this Section and
281 |       elsewhere in this disclaimer: (a) are subject to the preceding paragraph;
282 |       and (b) govern all liabilities arising under the disclaimer, including
283 |       liabilities arising in contract, in tort and for breach of statutory duty.
284 |     </p>
285 | 
286 |     <p>
287 |       As long as the website and the information and services on the website are
288 |       provided free of charge, we will not be liable for any loss or damage of
289 |       any nature.
290 |     </p>
291 |   </div>
292 | </template>
293 | 
294 | <script setup lang="ts">
295 | definePageMeta({
296 |   layout: "open",
297 | });
298 | </script>
299 | 
300 | <style scoped></style>
301 | 


--------------------------------------------------------------------------------
/pages/privacy.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container py-24 mx-auto prose dark:prose-invert">
  3 |     <h1>Privacy Policy</h1>
  4 |     <p>Last updated: September 12, 2023</p>
  5 |     <p>
  6 |       This Privacy Policy describes Our policies and procedures on the
  7 |       collection, use and disclosure of Your information when You use the
  8 |       Service and tells You about Your privacy rights and how the law protects
  9 |       You.
 10 |     </p>
 11 |     <p>
 12 |       We use Your Personal data to provide and improve the Service. By using the
 13 |       Service, You agree to the collection and use of information in accordance
 14 |       with this Privacy Policy. This Privacy Policy has been created with the
 15 |       help of the
 16 |       <a
 17 |         href="https://www.termsfeed.com/privacy-policy-generator/"
 18 |         target="_blank"
 19 |         >Privacy Policy Generator</a
 20 |       >.
 21 |     </p>
 22 |     <h1>Interpretation and Definitions</h1>
 23 |     <h2>Interpretation</h2>
 24 |     <p>
 25 |       The words of which the initial letter is capitalized have meanings defined
 26 |       under the following conditions. The following definitions shall have the
 27 |       same meaning regardless of whether they appear in singular or in plural.
 28 |     </p>
 29 |     <h2>Definitions</h2>
 30 |     <p>For the purposes of this Privacy Policy:</p>
 31 |     <ul>
 32 |       <li>
 33 |         <p>
 34 |           <strong>Account</strong> means a unique account created for You to
 35 |           access our Service or parts of our Service.
 36 |         </p>
 37 |       </li>
 38 |       <li>
 39 |         <p>
 40 |           <strong>Affiliate</strong> means an entity that controls, is
 41 |           controlled by or is under common control with a party, where
 42 |           &quot;control&quot; means ownership of 50% or more of the shares,
 43 |           equity interest or other securities entitled to vote for election of
 44 |           directors or other managing authority.
 45 |         </p>
 46 |       </li>
 47 |       <li>
 48 |         <p>
 49 |           <strong>Company</strong> (referred to as either &quot;the
 50 |           Company&quot;, &quot;We&quot;, &quot;Us&quot; or &quot;Our&quot; in
 51 |           this Agreement) refers to Zeitalabs, 14-164/2, Laxmi Nagar,
 52 |           Chinamushidiwada, Pendurthi, Visakhapatnam, 531173.
 53 |         </p>
 54 |       </li>
 55 |       <li>
 56 |         <p>
 57 |           <strong>Cookies</strong> are small files that are placed on Your
 58 |           computer, mobile device or any other device by a website, containing
 59 |           the details of Your browsing history on that website among its many
 60 |           uses.
 61 |         </p>
 62 |       </li>
 63 |       <li>
 64 |         <p><strong>Country</strong> refers to: Andhra Pradesh, India</p>
 65 |       </li>
 66 |       <li>
 67 |         <p>
 68 |           <strong>Device</strong> means any device that can access the Service
 69 |           such as a computer, a cellphone or a digital tablet.
 70 |         </p>
 71 |       </li>
 72 |       <li>
 73 |         <p>
 74 |           <strong>Personal Data</strong> is any information that relates to an
 75 |           identified or identifiable individual.
 76 |         </p>
 77 |       </li>
 78 |       <li>
 79 |         <p><strong>Service</strong> refers to the Website.</p>
 80 |       </li>
 81 |       <li>
 82 |         <p>
 83 |           <strong>Service Provider</strong> means any natural or legal person
 84 |           who processes the data on behalf of the Company. It refers to
 85 |           third-party companies or individuals employed by the Company to
 86 |           facilitate the Service, to provide the Service on behalf of the
 87 |           Company, to perform services related to the Service or to assist the
 88 |           Company in analyzing how the Service is used.
 89 |         </p>
 90 |       </li>
 91 |       <li>
 92 |         <p>
 93 |           <strong>Third-party Social Media Service</strong> refers to any
 94 |           website or any social network website through which a User can log in
 95 |           or create an account to use the Service.
 96 |         </p>
 97 |       </li>
 98 |       <li>
 99 |         <p>
100 |           <strong>Usage Data</strong> refers to data collected automatically,
101 |           either generated by the use of the Service or from the Service
102 |           infrastructure itself (for example, the duration of a page visit).
103 |         </p>
104 |       </li>
105 |       <li>
106 |         <p>
107 |           <strong>Website</strong> refers to OpenformStack, accessible from
108 |           <a
109 |             href="https://www.openformstack.com/"
110 |             rel="external nofollow noopener"
111 |             target="_blank"
112 |             >https://www.openformstack.com/</a
113 |           >
114 |         </p>
115 |       </li>
116 |       <li>
117 |         <p>
118 |           <strong>You</strong> means the individual accessing or using the
119 |           Service, or the company, or other legal entity on behalf of which such
120 |           individual is accessing or using the Service, as applicable.
121 |         </p>
122 |       </li>
123 |     </ul>
124 |     <h1>Collecting and Using Your Personal Data</h1>
125 |     <h2>Types of Data Collected</h2>
126 |     <h3>Personal Data</h3>
127 |     <p>
128 |       While using Our Service, We may ask You to provide Us with certain
129 |       personally identifiable information that can be used to contact or
130 |       identify You. Personally identifiable information may include, but is not
131 |       limited to:
132 |     </p>
133 |     <ul>
134 |       <li>
135 |         <p>Email address</p>
136 |       </li>
137 |       <li>
138 |         <p>Usage Data</p>
139 |       </li>
140 |     </ul>
141 |     <h3>Usage Data</h3>
142 |     <p>Usage Data is collected automatically when using the Service.</p>
143 |     <p>
144 |       Usage Data may include information such as Your Device's Internet Protocol
145 |       address (e.g. IP address), browser type, browser version, the pages of our
146 |       Service that You visit, the time and date of Your visit, the time spent on
147 |       those pages, unique device identifiers and other diagnostic data.
148 |     </p>
149 |     <p>
150 |       When You access the Service by or through a mobile device, We may collect
151 |       certain information automatically, including, but not limited to, the type
152 |       of mobile device You use, Your mobile device unique ID, the IP address of
153 |       Your mobile device, Your mobile operating system, the type of mobile
154 |       Internet browser You use, unique device identifiers and other diagnostic
155 |       data.
156 |     </p>
157 |     <p>
158 |       We may also collect information that Your browser sends whenever You visit
159 |       our Service or when You access the Service by or through a mobile device.
160 |     </p>
161 |     <h3>Information from Third-Party Social Media Services</h3>
162 |     <p>
163 |       The Company allows You to create an account and log in to use the Service
164 |       through the following Third-party Social Media Services:
165 |     </p>
166 |     <ul>
167 |       <li>Google</li>
168 |       <li>Facebook</li>
169 |       <li>Instagram</li>
170 |       <li>Twitter</li>
171 |       <li>LinkedIn</li>
172 |     </ul>
173 |     <p>
174 |       If You decide to register through or otherwise grant us access to a
175 |       Third-Party Social Media Service, We may collect Personal data that is
176 |       already associated with Your Third-Party Social Media Service's account,
177 |       such as Your name, Your email address, Your activities or Your contact
178 |       list associated with that account.
179 |     </p>
180 |     <p>
181 |       You may also have the option of sharing additional information with the
182 |       Company through Your Third-Party Social Media Service's account. If You
183 |       choose to provide such information and Personal Data, during registration
184 |       or otherwise, You are giving the Company permission to use, share, and
185 |       store it in a manner consistent with this Privacy Policy.
186 |     </p>
187 |     <h3>Tracking Technologies and Cookies</h3>
188 |     <p>
189 |       We use Cookies and similar tracking technologies to track the activity on
190 |       Our Service and store certain information. Tracking technologies used are
191 |       beacons, tags, and scripts to collect and track information and to improve
192 |       and analyze Our Service. The technologies We use may include:
193 |     </p>
194 |     <ul>
195 |       <li>
196 |         <strong>Cookies or Browser Cookies.</strong> A cookie is a small file
197 |         placed on Your Device. You can instruct Your browser to refuse all
198 |         Cookies or to indicate when a Cookie is being sent. However, if You do
199 |         not accept Cookies, You may not be able to use some parts of our
200 |         Service. Unless you have adjusted Your browser setting so that it will
201 |         refuse Cookies, our Service may use Cookies.
202 |       </li>
203 |       <li>
204 |         <strong>Web Beacons.</strong> Certain sections of our Service and our
205 |         emails may contain small electronic files known as web beacons (also
206 |         referred to as clear gifs, pixel tags, and single-pixel gifs) that
207 |         permit the Company, for example, to count users who have visited those
208 |         pages or opened an email and for other related website statistics (for
209 |         example, recording the popularity of a certain section and verifying
210 |         system and server integrity).
211 |       </li>
212 |     </ul>
213 |     <p>
214 |       Cookies can be &quot;Persistent&quot; or &quot;Session&quot; Cookies.
215 |       Persistent Cookies remain on Your personal computer or mobile device when
216 |       You go offline, while Session Cookies are deleted as soon as You close
217 |       Your web browser. You can learn more about cookies on
218 |       <a
219 |         href="https://www.termsfeed.com/blog/cookies/#What_Are_Cookies"
220 |         target="_blank"
221 |         >TermsFeed website</a
222 |       >
223 |       article.
224 |     </p>
225 |     <p>
226 |       We use both Session and Persistent Cookies for the purposes set out below:
227 |     </p>
228 |     <ul>
229 |       <li>
230 |         <p><strong>Necessary / Essential Cookies</strong></p>
231 |         <p>Type: Session Cookies</p>
232 |         <p>Administered by: Us</p>
233 |         <p>
234 |           Purpose: These Cookies are essential to provide You with services
235 |           available through the Website and to enable You to use some of its
236 |           features. They help to authenticate users and prevent fraudulent use
237 |           of user accounts. Without these Cookies, the services that You have
238 |           asked for cannot be provided, and We only use these Cookies to provide
239 |           You with those services.
240 |         </p>
241 |       </li>
242 |       <li>
243 |         <p><strong>Cookies Policy / Notice Acceptance Cookies</strong></p>
244 |         <p>Type: Persistent Cookies</p>
245 |         <p>Administered by: Us</p>
246 |         <p>
247 |           Purpose: These Cookies identify if users have accepted the use of
248 |           cookies on the Website.
249 |         </p>
250 |       </li>
251 |       <li>
252 |         <p><strong>Functionality Cookies</strong></p>
253 |         <p>Type: Persistent Cookies</p>
254 |         <p>Administered by: Us</p>
255 |         <p>
256 |           Purpose: These Cookies allow us to remember choices You make when You
257 |           use the Website, such as remembering your login details or language
258 |           preference. The purpose of these Cookies is to provide You with a more
259 |           personal experience and to avoid You having to re-enter your
260 |           preferences every time You use the Website.
261 |         </p>
262 |       </li>
263 |     </ul>
264 |     <p>
265 |       For more information about the cookies we use and your choices regarding
266 |       cookies, please visit our Cookies Policy or the Cookies section of our
267 |       Privacy Policy.
268 |     </p>
269 |     <h2>Use of Your Personal Data</h2>
270 |     <p>The Company may use Personal Data for the following purposes:</p>
271 |     <ul>
272 |       <li>
273 |         <p>
274 |           <strong>To provide and maintain our Service</strong>, including to
275 |           monitor the usage of our Service.
276 |         </p>
277 |       </li>
278 |       <li>
279 |         <p>
280 |           <strong>To manage Your Account:</strong> to manage Your registration
281 |           as a user of the Service. The Personal Data You provide can give You
282 |           access to different functionalities of the Service that are available
283 |           to You as a registered user.
284 |         </p>
285 |       </li>
286 |       <li>
287 |         <p>
288 |           <strong>For the performance of a contract:</strong> the development,
289 |           compliance and undertaking of the purchase contract for the products,
290 |           items or services You have purchased or of any other contract with Us
291 |           through the Service.
292 |         </p>
293 |       </li>
294 |       <li>
295 |         <p>
296 |           <strong>To contact You:</strong> To contact You by email, telephone
297 |           calls, SMS, or other equivalent forms of electronic communication,
298 |           such as a mobile application's push notifications regarding updates or
299 |           informative communications related to the functionalities, products or
300 |           contracted services, including the security updates, when necessary or
301 |           reasonable for their implementation.
302 |         </p>
303 |       </li>
304 |       <li>
305 |         <p>
306 |           <strong>To provide You</strong> with news, special offers and general
307 |           information about other goods, services and events which we offer that
308 |           are similar to those that you have already purchased or enquired about
309 |           unless You have opted not to receive such information.
310 |         </p>
311 |       </li>
312 |       <li>
313 |         <p>
314 |           <strong>To manage Your requests:</strong> To attend and manage Your
315 |           requests to Us.
316 |         </p>
317 |       </li>
318 |       <li>
319 |         <p>
320 |           <strong>For business transfers:</strong> We may use Your information
321 |           to evaluate or conduct a merger, divestiture, restructuring,
322 |           reorganization, dissolution, or other sale or transfer of some or all
323 |           of Our assets, whether as a going concern or as part of bankruptcy,
324 |           liquidation, or similar proceeding, in which Personal Data held by Us
325 |           about our Service users is among the assets transferred.
326 |         </p>
327 |       </li>
328 |       <li>
329 |         <p>
330 |           <strong>For other purposes</strong>: We may use Your information for
331 |           other purposes, such as data analysis, identifying usage trends,
332 |           determining the effectiveness of our promotional campaigns and to
333 |           evaluate and improve our Service, products, services, marketing and
334 |           your experience.
335 |         </p>
336 |       </li>
337 |     </ul>
338 |     <p>We may share Your personal information in the following situations:</p>
339 |     <ul>
340 |       <li>
341 |         <strong>With Service Providers:</strong> We may share Your personal
342 |         information with Service Providers to monitor and analyze the use of our
343 |         Service, to contact You.
344 |       </li>
345 |       <li>
346 |         <strong>For business transfers:</strong> We may share or transfer Your
347 |         personal information in connection with, or during negotiations of, any
348 |         merger, sale of Company assets, financing, or acquisition of all or a
349 |         portion of Our business to another company.
350 |       </li>
351 |       <li>
352 |         <strong>With Affiliates:</strong> We may share Your information with Our
353 |         affiliates, in which case we will require those affiliates to honor this
354 |         Privacy Policy. Affiliates include Our parent company and any other
355 |         subsidiaries, joint venture partners or other companies that We control
356 |         or that are under common control with Us.
357 |       </li>
358 |       <li>
359 |         <strong>With business partners:</strong> We may share Your information
360 |         with Our business partners to offer You certain products, services or
361 |         promotions.
362 |       </li>
363 |       <li>
364 |         <strong>With other users:</strong> when You share personal information
365 |         or otherwise interact in the public areas with other users, such
366 |         information may be viewed by all users and may be publicly distributed
367 |         outside. If You interact with other users or register through a
368 |         Third-Party Social Media Service, Your contacts on the Third-Party
369 |         Social Media Service may see Your name, profile, pictures and
370 |         description of Your activity. Similarly, other users will be able to
371 |         view descriptions of Your activity, communicate with You and view Your
372 |         profile.
373 |       </li>
374 |       <li>
375 |         <strong>With Your consent</strong>: We may disclose Your personal
376 |         information for any other purpose with Your consent.
377 |       </li>
378 |     </ul>
379 |     <h2>Retention of Your Personal Data</h2>
380 |     <p>
381 |       The Company will retain Your Personal Data only for as long as is
382 |       necessary for the purposes set out in this Privacy Policy. We will retain
383 |       and use Your Personal Data to the extent necessary to comply with our
384 |       legal obligations (for example, if we are required to retain your data to
385 |       comply with applicable laws), resolve disputes, and enforce our legal
386 |       agreements and policies.
387 |     </p>
388 |     <p>
389 |       The Company will also retain Usage Data for internal analysis purposes.
390 |       Usage Data is generally retained for a shorter period of time, except when
391 |       this data is used to strengthen the security or to improve the
392 |       functionality of Our Service, or We are legally obligated to retain this
393 |       data for longer time periods.
394 |     </p>
395 |     <h2>Transfer of Your Personal Data</h2>
396 |     <p>
397 |       Your information, including Personal Data, is processed at the Company's
398 |       operating offices and in any other places where the parties involved in
399 |       the processing are located. It means that this information may be
400 |       transferred to — and maintained on — computers located outside of Your
401 |       state, province, country or other governmental jurisdiction where the data
402 |       protection laws may differ than those from Your jurisdiction.
403 |     </p>
404 |     <p>
405 |       Your consent to this Privacy Policy followed by Your submission of such
406 |       information represents Your agreement to that transfer.
407 |     </p>
408 |     <p>
409 |       The Company will take all steps reasonably necessary to ensure that Your
410 |       data is treated securely and in accordance with this Privacy Policy and no
411 |       transfer of Your Personal Data will take place to an organization or a
412 |       country unless there are adequate controls in place including the security
413 |       of Your data and other personal information.
414 |     </p>
415 |     <h2>Delete Your Personal Data</h2>
416 |     <p>
417 |       You have the right to delete or request that We assist in deleting the
418 |       Personal Data that We have collected about You.
419 |     </p>
420 |     <p>
421 |       Our Service may give You the ability to delete certain information about
422 |       You from within the Service.
423 |     </p>
424 |     <p>
425 |       You may update, amend, or delete Your information at any time by signing
426 |       in to Your Account, if you have one, and visiting the account settings
427 |       section that allows you to manage Your personal information. You may also
428 |       contact Us to request access to, correct, or delete any personal
429 |       information that You have provided to Us.
430 |     </p>
431 |     <p>
432 |       Please note, however, that We may need to retain certain information when
433 |       we have a legal obligation or lawful basis to do so.
434 |     </p>
435 |     <h2>Disclosure of Your Personal Data</h2>
436 |     <h3>Business Transactions</h3>
437 |     <p>
438 |       If the Company is involved in a merger, acquisition or asset sale, Your
439 |       Personal Data may be transferred. We will provide notice before Your
440 |       Personal Data is transferred and becomes subject to a different Privacy
441 |       Policy.
442 |     </p>
443 |     <h3>Law enforcement</h3>
444 |     <p>
445 |       Under certain circumstances, the Company may be required to disclose Your
446 |       Personal Data if required to do so by law or in response to valid requests
447 |       by public authorities (e.g. a court or a government agency).
448 |     </p>
449 |     <h3>Other legal requirements</h3>
450 |     <p>
451 |       The Company may disclose Your Personal Data in the good faith belief that
452 |       such action is necessary to:
453 |     </p>
454 |     <ul>
455 |       <li>Comply with a legal obligation</li>
456 |       <li>Protect and defend the rights or property of the Company</li>
457 |       <li>
458 |         Prevent or investigate possible wrongdoing in connection with the
459 |         Service
460 |       </li>
461 |       <li>Protect the personal safety of Users of the Service or the public</li>
462 |       <li>Protect against legal liability</li>
463 |     </ul>
464 |     <h2>Security of Your Personal Data</h2>
465 |     <p>
466 |       The security of Your Personal Data is important to Us, but remember that
467 |       no method of transmission over the Internet, or method of electronic
468 |       storage is 100% secure. While We strive to use commercially acceptable
469 |       means to protect Your Personal Data, We cannot guarantee its absolute
470 |       security.
471 |     </p>
472 |     <h1>Children's Privacy</h1>
473 |     <p>
474 |       Our Service does not address anyone under the age of 13. We do not
475 |       knowingly collect personally identifiable information from anyone under
476 |       the age of 13. If You are a parent or guardian and You are aware that Your
477 |       child has provided Us with Personal Data, please contact Us. If We become
478 |       aware that We have collected Personal Data from anyone under the age of 13
479 |       without verification of parental consent, We take steps to remove that
480 |       information from Our servers.
481 |     </p>
482 |     <p>
483 |       If We need to rely on consent as a legal basis for processing Your
484 |       information and Your country requires consent from a parent, We may
485 |       require Your parent's consent before We collect and use that information.
486 |     </p>
487 |     <h1>Links to Other Websites</h1>
488 |     <p>
489 |       Our Service may contain links to other websites that are not operated by
490 |       Us. If You click on a third party link, You will be directed to that third
491 |       party's site. We strongly advise You to review the Privacy Policy of every
492 |       site You visit.
493 |     </p>
494 |     <p>
495 |       We have no control over and assume no responsibility for the content,
496 |       privacy policies or practices of any third party sites or services.
497 |     </p>
498 |     <h1>Changes to this Privacy Policy</h1>
499 |     <p>
500 |       We may update Our Privacy Policy from time to time. We will notify You of
501 |       any changes by posting the new Privacy Policy on this page.
502 |     </p>
503 |     <p>
504 |       We will let You know via email and/or a prominent notice on Our Service,
505 |       prior to the change becoming effective and update the &quot;Last
506 |       updated&quot; date at the top of this Privacy Policy.
507 |     </p>
508 |     <p>
509 |       You are advised to review this Privacy Policy periodically for any
510 |       changes. Changes to this Privacy Policy are effective when they are posted
511 |       on this page.
512 |     </p>
513 |     <h1>Contact Us</h1>
514 |     <p>
515 |       If you have any questions about this Privacy Policy, You can contact us:
516 |     </p>
517 |     <ul>
518 |       <li>By email: naveen@zeitalabs.com</li>
519 |     </ul>
520 |   </div>
521 | </template>
522 | 
523 | <script setup lang="ts">
524 | definePageMeta({
525 |   layout: "open",
526 | });
527 | </script>
528 | 


--------------------------------------------------------------------------------