Merge branch 'feature/posts'

backend/composer.json

@@ -23,7 +23,7 @@
   "require": {
     "craftcms/ckeditor": "4.2.0",
     "craftcms/cloud": "*",
-    "craftcms/cms": "5.4.4",
+    "craftcms/cms": "5.4.6",
     "vlucas/phpdotenv": "^5.4.0"
   },
   "require-dev": {

backend/config/project/graphql/schemas/c7d2eb61-cdde-4a76-88a9-eb30ddcf155b.yaml

@@ -1,6 +1,8 @@
 isPublic: false
 name: Posts
 scope:
+  - 'sites.58ccb571-6c72-449f-8e7b-6f43c5d416b3:read' # Starter Nuxt
+  - 'sections.3e2a1a6f-88ea-477b-936d-39393f2d594f:read' # Posts
   - 'sections.3e2a1a6f-88ea-477b-936d-39393f2d594f:edit' # Posts
   - 'sections.3e2a1a6f-88ea-477b-936d-39393f2d594f:create' # Posts
   - 'sections.3e2a1a6f-88ea-477b-936d-39393f2d594f:save' # Posts

backend/config/project/project.yaml

@@ -1,4 +1,4 @@
-dateModified: 1727771251
+dateModified: 1727924935
 elementSources:
   craft\elements\Entry:
     -

frontend/components/postForm.vue

@@ -1,9 +1,84 @@
+<script setup>
+import { ref } from 'vue'
+import { useLazyAsyncData, useRuntimeConfig } from '#imports'
+
+const config = useRuntimeConfig()
+const message = ref('')
+const title = ref('Post ')
+const loading = ref(false)
+
+const fetchCsrfToken = async () => {
+  try {
+    const response = await fetch('/api/csrf')
+    const data = await response.json()
+    return data.csrfToken
+    console('CSRF acquired ' + data.csrfToken)
+  } catch (error) {
+    console.error('Error fetching CSRF token:', error)
+    return null
+  }
+}
+
+const { data: csrfTokenData, error: csrfError } = await useFetch('/api/csrf')
+const csrfToken = ref(csrfTokenData.value?.csrfToken)
+
+if (csrfError.value) {
+  console.error('Error fetching CSRF token:', csrfError.value)
+}
+
+const submitPost = async () => {
+  if (!csrfToken.value) {
+    console.error('CSRF token not available')
+    return
+  }
+
+  loading.value = true
+  try {
+    console.log('Submitting post with title:', title.value, 'and message:', message.value)
+    console.log('CSRF Token:', csrfToken.value)
+
+    const result = await GqlCreatePost({
+      title: title.value,
+      message: message.value
+    }, {
+      headers: {
+        'X-CSRF-Token': csrfToken.value,
+      }
+    })
+
+    console.log('Raw response:', result)
+
+    if (result.error) {
+      console.error('GraphQL Error:', result.error)
+      throw new Error(JSON.stringify(result.error))
+    }
+
+    if (!result.data) {
+      throw new Error('No data returned from the mutation')
+    }
+
+    console.log('Post created:', result.data)
+    // Clear the form fields after successful submission
+    title.value = 'Post '
+    message.value = ''
+  } catch (err) {
+    console.error('Error creating post:', err)
+    if (err.response) {
+      console.error('Response status:', err.response.status)
+      console.error('Response data:', await err.response.text())
+    }
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
 <template>
-  <form method="post">
+  <form method="post" @submit.prevent="submitPost">
     <div class="mb-6 mt-4">
-      <label for="post" class="font-bold">Message</label>
-      <textarea name="fields[textBlock]" class="w-full px-6 py-4" required id="message"></textarea>
+      <label for="message" class="font-bold">Message</label>
+      <textarea name="message" class="w-full px-6 py-4" required id="message" v-model="message"></textarea>
     </div>
-    <input type="submit" class="rounded font-bold bg-red-600 text-slate-50 px-6 py-4" value="Post entry" />
-  </form>  
+    <input type="submit" class="rounded font-bold bg-red-600 text-slate-50 px-6 py-4" value="Post entry" :disabled="loading">
+  </form>
 </template>

frontend/nuxt.config.js

@@ -3,27 +3,31 @@ export default defineNuxtConfig({
   compatibilityDate: '2024-04-03',
   devtools: { enabled: true },
   modules: ["@nuxtjs/tailwindcss", "nuxt-graphql-client"],
+  runtimeConfig: {
+    CRAFT_URL: process.env.CRAFT_URL,
+    public: {
+      GQL_HOST: process.env.GQL_HOST,
+      AUTH_HEADER: process.env.AUTH_HEADER,
+      LIVE_PREVIEW: process.env.LIVE_PREVIEW === 'true',
+      CRAFT_URL: process.env.CRAFT_URL,
+      BASE_URL: process.env.BASE_URL
+    }
+  },
   'graphql-client': {
     clients: {
       default: {
-        livePreview: process.env.LIVE_PREVIEW === 'true',
-        host: process.env.GQL_HOST,
-        token: process.env.LIVE_PREVIEW === 'true' ? process.env.AUTH_HEADER : '',
+        host: process.env.GQL_HOST
       },
       posts: {
         host: process.env.GQL_HOST,
-        token: process.env.AUTH_HEADER
-      }
-    },
-    tokenStorage: {
-      name: '__session',
-      mode: 'cookie', // default
-      cookieOptions: {
-        path: '/',
-        secure: true, // defaults to `process.env.NODE_ENV === 'production'`
-        httpOnly: false, // Only accessible via HTTP(S)
-        maxAge: 60 * 60 * 24 * 5 // 5 days
+        token: {
+          type: 'Bearer',
+          name: 'Authorization',
+          value: process.env.AUTH_HEADER
+        },
+        retainToken: true,
+        enableMutation: true
       }
-    } 
+    }
   }
 });

frontend/queries/guestbook.gql → frontend/queries/default/guestbook.gql

@@ -18,3 +18,4 @@ query Guestbook($limit: Int!, $offset: Int!) {
   }
   entryCount(section: "posts")
 }
+

frontend/queries/posts/posts.gql

@@ -0,0 +1,10 @@
+mutation createPost($title: String!, $message: String) {
+  save_posts_text_Entry(
+    title: $title,
+    textBlock: $message,
+    authorId: 1
+  ) {
+      title
+      textBlock
+  }
+}

frontend/schema.graphql

@@ -0,0 +1,13 @@
+type Mutation {
+  save_posts_text_Entry(title: String!, textBlock: String): Entry
+}
+
+type Entry {
+  id: ID
+  title: String
+  textBlock: String
+}
+
+type Query {
+  entries: [Entry]
+}

frontend/server/api/csrf.js

@@ -0,0 +1,37 @@
+import { $fetch } from 'ofetch'
+
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig()
+  console.log('Server config:', config) // For debugging
+
+  const craftUrl = config.CRAFT_URL
+
+  if (!craftUrl) {
+    console.error('CRAFT_URL is not defined in server environment')
+    throw createError({
+      statusCode: 500,
+      statusMessage: 'CRAFT_URL is not defined in server environment',
+    })
+  }
+
+  try {
+    const url = `${craftUrl}/actions/users/session-info`
+    console.log('Fetching from:', url) // For debugging
+
+    const data = await $fetch(url, {
+      headers: {
+        'Accept': 'application/json',
+      },
+    })
+
+    console.log('Response data:', data) // For debugging
+
+    return { csrfToken: data.csrfTokenValue }
+  } catch (error) {
+    console.error('Error fetching CSRF token:', error)
+    throw createError({
+      statusCode: 500,
+      statusMessage: 'Failed to fetch CSRF token: ' + error.message,
+    })
+  }
+})