feat: payments extension (#42)

* feat: safe error page

* feat: better error messages

* feat: add payments extension

* clean

* fix: addpayments extension

* fix: install payments

* feat: add relation options to M2M creator

* feat: payments schema

* feat: membership payments fields

* feat: add payment fields to directus_user

* feat: add example data

* feat: add permissions

* feat!: improve dependency logic

* feat: add profile fields

* fix: logout also directus

* fix: editor persmissions

* fix: registration form

* release: v0.1.1

Author: jofmi

.env.example

@@ -17,6 +17,7 @@ KEYCLOAK_ADMIN_PASSWORD = 'admin'
 KEYCLOAK_DB_PASSWORD = 'changeme'
 
 NUXT_API_TOKEN = "badToken"
+NUXT_PUBLIC_DEBUG = "false"
 NUXT_PUBLIC_COLLECTIVO_URL = "http://localhost:3000"
 
 NUXT_KEYCLOAK_ADMIN_CLIENT = "admin-cli"

collectivo/app/nuxt.config.ts

@@ -2,7 +2,11 @@
 export default defineNuxtConfig({
   devtools: { enabled: true },
   ssr: false,
-  extends: ["@collectivo/collectivo", "@collectivo/memberships"],
+  extends: [
+    "@collectivo/collectivo",
+    "@collectivo/payments",
+    "@collectivo/memberships",
+  ],
   i18n: {
     lazy: true,
     langDir: "./lang",

collectivo/app/package.json

@@ -14,7 +14,8 @@
   },
   "dependencies": {
     "@collectivo/collectivo": "workspace:*",
-    "@collectivo/memberships": "workspace:*"
+    "@collectivo/memberships": "workspace:*",
+    "@collectivo/payments": "workspace:*"
   },
   "devDependencies": {
     "@nuxt/devtools": "^1.0.6",

collectivo/collectivo/components/collectivo/form/Builder.vue

@@ -13,7 +13,7 @@ import type { FormErrorEvent, FormSubmitEvent } from "#ui/types";
 
 const toast = useToast();
 const { t } = useI18n();
-const debug = true;
+const debug = useRuntimeConfig().public.debug;
 
 const props = defineProps({
   fields: Object as PropType<CollectivoFormField[]>,
@@ -22,6 +22,7 @@ const props = defineProps({
   submitLabel: String,
 });
 
+console.log("data", props.data);
 const form = { fields: props.fields ?? [] };
 const loading = ref(false);
 
@@ -178,6 +179,7 @@ for (const input of form.fields) {
     addInputToSchema(input.key, input, boolean());
   }
 
+  // Add passed data or default value to field
   if (props.data?.[input.key]) {
     state[input.key] = props.data[input.key];
   } else if ("default" in input && input.default) {
@@ -423,15 +425,16 @@ async function fillOutAll() {
     class="mx-2 my-10 p-6 rounded-lg bg-slate-100 flex flex-col gap-2"
   >
     <div>
-      DEBUG Tools. <br />
-      You are seeing this because NUXT_DEBUG=True
+      <h3>Debug Tools</h3>
+      <p>You are seeing this because NUXT_PUBLIC_DEBUG=True</p>
     </div>
     <div>
       <UButton class="btn" @click="fillOutAll">
         {{ t("Fill out all") }}
       </UButton>
     </div>
-    <div class="text-sm">Form state: {{ state }}</div>
+    <h4>Form state</h4>
+    <div class="text-sm">{{ state }}</div>
   </div>
 </template>
 
@@ -448,6 +451,10 @@ async function fillOutAll() {
   @apply form-field basis-full;
 }
 
+.form-field-half {
+  @apply form-field basis-full md:basis-1/2;
+}
+
 .form-field-xl {
   @apply form-field basis-full xl:basis-1/2;
 }

collectivo/collectivo/components/collectivo/form/Page.vue

@@ -3,7 +3,7 @@ import type { FetchError } from "ofetch";
 
 const toast = useToast();
 const { t } = useI18n();
-const debug = true;
+const debug = useRuntimeConfig().public.debug;
 const submitted = ref(false);
 
 const props = defineProps({

collectivo/collectivo/composables/user.ts

@@ -33,7 +33,7 @@ class CollectivoUserStore {
 
     this.data = (await $directus?.request(
       readMe({
-        fields: ["id", "first_name", "last_name", "email"],
+        // fields: ["id", "first_name", "last_name", "email"],
       }),
     )) as CollectivoUser;
 
@@ -76,6 +76,8 @@ class CollectivoUserStore {
 
   async logout() {
     const runtimeConfig = useRuntimeConfig();
+    const directus = useDirectus();
+    await directus.logout();
 
     if (runtimeConfig.public.authService === "keycloak") {
       const logoutPath = `${runtimeConfig.public.keycloakUrl}/realms/collectivo/protocol/openid-connect/logout`;

collectivo/collectivo/nuxt.config.ts

@@ -16,6 +16,7 @@ export default defineNuxtConfig({
     keycloakAdminClient: "admin-cli",
     keycloakAdminSecret: "**********",
     public: {
+      debug: false,
       collectivoUrl: "http://localhost:3000",
       authService: "keycloak",
       keycloakUrl: "http://keycloak:8080",

collectivo/collectivo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@collectivo/collectivo",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Collectivo is a module system for community plattforms.",
   "type": "module",
   "license": "AGPL-3.0",

collectivo/collectivo/pages/profile.vue

@@ -48,6 +48,7 @@ async function saveProfile(data: CollectivoUser) {
       :data="user.data"
       :fields="user.fields"
       :submit="saveProfile"
+      submit-label="Save"
     />
   </CollectivoContainer>
   <CollectivoContainer>

collectivo/collectivo/plugins/setup.ts

@@ -45,25 +45,30 @@ export default defineNuxtPlugin(() => {
   menu.value.public.push(...publicItems);
 
   const profileInputs: CollectivoFormField[] = [
+    {
+      type: "section",
+      order: 100,
+      title: "Account details",
+    },
     {
       label: "First name",
       key: "first_name",
       type: "text",
-      order: 1,
+      order: 101,
       disabled: true,
     },
     {
       label: "Last name",
       key: "last_name",
       type: "text",
-      order: 2,
+      order: 102,
       disabled: true,
     },
     {
       label: "Email",
       key: "email",
       type: "text",
-      order: 3,
+      order: 103,
       disabled: true,
     },
   ];