Docker compose setup (#513)

* fix password reset bug

* self hosted mode middleware changes on  pages

* fix lint

* wip: self hosted changes

* wip: self hosted frontend changes

* wip self hosted mode changes

* typo correction

* remove commented logic

* fix env variable names

* fix lint issues

* fix minor updates

* #445 Switched from single monolithic docker image to a docker-compose
 orchestrated network of services

* Automatically configures shared secret

* Working through some issues

* Use local file storage

* Moved the dockerfiles

* Fixed some issues when building from clean

* Corrected workflow

* Hopefully schedules everything correctly now

* Prep storage for worker process as well

* .env files are required

* Pinned dependency versions

* Disable self hosted in the client as well

* Removed double defaulting logic

* Using regexs is more succinct

* Added FRONT_URL environment variable

* Merge 236e4-self-hosted-mode-changes

* Improve inital user setup

* Finalized the new docker-compose setup

* Fix back-end formatting issues

---------

Co-authored-by: Frank <csskfaves@gmail.com>
Co-authored-by: Don Benjamin <don@webhammer.co.uk>

client/pages/ai-form-builder.vue

@@ -627,11 +627,10 @@
 </template>
 
 <script setup>
-import { computed } from "vue"
-import { useAuthStore } from "../stores/auth"
-
 const authStore = useAuthStore()
-
+definePageMeta({
+  middleware: ["self-hosted",]
+})
 useOpnSeoMeta({
   title: "Free AI form builder",
   description:

client/pages/forms/[slug]/index.vue

@@ -72,7 +72,6 @@
 </template>
 
 <script setup>
-import {computed} from 'vue'
 import OpenCompleteForm from "~/components/open/forms/OpenCompleteForm.vue"
 import sha256 from 'js-sha256'
 import { onBeforeRouteLeave } from 'vue-router'

client/pages/forms/create/guest.vue

@@ -58,7 +58,7 @@ useOpnSeoMeta({
   title: "Create a new Form for free",
 })
 definePageMeta({
-  middleware: "guest",
+  middleware: ["guest", "self-hosted"],
 })
 
 // Data

client/pages/home.vue

@@ -237,7 +237,7 @@ import ExtraMenu from "../components/pages/forms/show/ExtraMenu.vue"
 import {refDebounced} from "@vueuse/core"
 
 definePageMeta({
-  middleware: "auth",
+  middleware: ["auth", "self-hosted-credentials"],
 })
 
 useOpnSeoMeta({

client/pages/pricing.vue

@@ -416,13 +416,7 @@ export default {
 
     definePageMeta({
       middleware: [
-        function () {
-          // Custom inline middleware
-          if (!useRuntimeConfig().public.paidPlansEnabled) {
-            // If no paid plan so no need this page
-            return navigateTo("/", {redirectCode: 301})
-          }
-        },
+        "self-hosted"
       ],
     })
 

client/pages/privacy-policy.vue

@@ -22,6 +22,11 @@ import { computed } from "vue"
 useOpnSeoMeta({
   title: "Privacy Policy",
 })
+
+definePageMeta({
+  middleware: ["self-hosted"]
+})
+
 defineRouteRules({
   swr: 3600,
 })

client/pages/register.vue

@@ -11,7 +11,7 @@
               Create an account
             </h2>
             <small>Sign up in less than 2 minutes.</small>
-            <template v-if="!isSelfHosted || isInvited">
+            <template v-if="!appStore.selfHosted || isInvited">
               <register-form />
             </template>
             <div
@@ -106,22 +106,21 @@ export default {
     })
 
     definePageMeta({
-      middleware: "guest",
+      middleware: ["self-hosted", "guest"]
     })
 
     defineRouteRules({
       swr: 3600,
     })
+    return {
+      appStore: useAppStore(),
+    }
   },
 
   data: () => ({}),
 
   computed: {
-    isSelfHosted(){
-      return useRuntimeConfig().public.selfHosted
-    },
-
-    isInvited(){
+    isInvited() {
       return this.$route.query?.email && this.$route.query?.invite_token
     }
   },

client/pages/terms-conditions.vue

@@ -22,6 +22,11 @@ import { computed } from "vue"
 useOpnSeoMeta({
   title: "Terms & Conditions",
 })
+
+definePageMeta({
+  middleware: ["self-hosted"]
+})
+
 defineRouteRules({
   swr: 3600,
 })

client/pages/update-credentials.vue

@@ -0,0 +1,96 @@
+<template>
+  <modal :show="showModal" @close="logout" max-width="lg">
+    <div class="">
+      <h2 class="font-medium text-3xl mb-3">Welcome to OpnForm!</h2>
+      <p class="text-sm text-gray-600">
+        You're using the self-hosted version of OpnForm and need to set up your account.
+        Please enter your email and create a password to continue.
+      </p>
+    </div>
+
+    <form
+      class="mt-4"
+      @submit.prevent="updateCredentials"
+      @keydown="form.onKeydown($event)"
+    >
+      <!-- Email -->
+      <text-input
+        name="email"
+        :form="form"
+        label="Email"
+        :required="true"
+        placeholder="Your email address"
+      />
+
+      <!-- Password -->
+      <text-input
+        native-type="password"
+        placeholder="Your password"
+        name="password"
+        :form="form"
+        label="Password"
+        :required="true"
+      />
+
+      <!-- Password Confirmation-->
+      <text-input
+        native-type="password"
+        :form="form"
+        :required="true"
+        placeholder="Enter confirm password"
+        name="password_confirmation"
+        label="Confirm Password"
+      />
+
+      <!-- Submit Button -->
+      <v-button class="mx-auto" :loading="form.busy || loading">
+        Update Credentials
+      </v-button>
+    </form>
+  </modal>
+</template>
+
+<script setup>
+import { onMounted } from "vue";
+
+const authStore = useAuthStore();
+const workspacesStore = useWorkspacesStore();
+const formsStore = useFormsStore();
+const user = computed(() => authStore.user);
+const router = useRouter();
+const showModal = ref(true);
+const form = useForm({
+  name: "",
+  email: "",
+  password: "",
+  password_confirmation: "",
+  agree_terms: false,
+  appsumo_license: null,
+});
+
+onMounted(() => {
+  form.email = user?.value?.email;
+});
+
+const updateCredentials = () => {
+  form
+    .post("update-credentials")
+    .then(async (data) => {
+      authStore.setUser(data.user);
+      const workspaces = await fetchAllWorkspaces();
+      workspacesStore.set(workspaces.data.value);
+      formsStore.loadAll(workspacesStore.currentId);
+      router.push({ name: "home" });
+    })
+    .catch((error) => {
+      console.error(error);
+      useAlert().error(error.response._data.message);
+    });
+};
+
+const logout = () => {
+  authStore.logout();
+  showModal.value = false;
+  router.push({ name: "login" });
+};
+</script>