From 4423b69f3fa0246d769c31a58f5f4698bfc0e981 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jurij=20Podgor=C5=A1ek?= <jurij@kompot.si>
Date: Sat, 16 Dec 2023 01:53:05 +0100
Subject: [PATCH] Dokumentacija etherpad APIja, popravki, preurejen obrazec za
 urejanje

---
 doc/api.org                                   | 15 --------
 doc/etherpad_api.rest                         |  1 +
 doc/yufu_concept_api.rest                     |  1 +
 nuxt/{.env.dist => .env}                      |  2 +-
 nuxt/.gitignore                               |  2 +-
 nuxt/components/DodajPojem.vue                |  6 ++--
 nuxt/components/Pojem.vue                     | 27 ++++++--------
 nuxt/components/PojemForm.vue                 | 35 ++++++++++---------
 nuxt/composables/etherpadApi.js               | 21 +++++++++++
 nuxt/nuxt.config.js                           |  1 -
 nuxt/stores/pojmi.js                          |  5 ++-
 web/modules/custom/etherpad_api/README.md     | 20 +++++++++++
 web/modules/custom/etherpad_api/doc/api.rest  | 26 ++++++++++++++
 .../custom/etherpad_api/src/Client.php        |  2 +-
 .../src/Controller/EtherpadApiController.php  |  2 +-
 .../yufu_concept/tests/local-emacs-test.rest  |  2 +-
 16 files changed, 109 insertions(+), 59 deletions(-)
 delete mode 100644 doc/api.org
 create mode 120000 doc/etherpad_api.rest
 create mode 120000 doc/yufu_concept_api.rest
 rename nuxt/{.env.dist => .env} (68%)
 create mode 100644 nuxt/composables/etherpadApi.js
 create mode 100644 web/modules/custom/etherpad_api/README.md
 create mode 100644 web/modules/custom/etherpad_api/doc/api.rest

diff --git a/doc/api.org b/doc/api.org
deleted file mode 100644
index cf1142e..0000000
--- a/doc/api.org
+++ /dev/null
@@ -1,15 +0,0 @@
-# -*- restclient -*-
-
-##########################
-# YUFU API dokumentacija #
-##########################
-
-# Poganjamo z restclient major mode-om v emacsu
-
-# Ustvari nov pad
-POST https://yufu-manifest.ddev.site/etherpad-api/createPad?padID=d2d479bf-b3cb-455a-b7db-5d53c31d1fa2
-Content-Type: application/x-www-form-urlencoded
-text=While post-communist, post-socialist and post-Yugoslav discourses merely reinforce the appearance of an unchanging and unstable present with a more or less accurate expression of the situation, Yugofuturism follows the example of other ethnofuturist movements such as Afrofuturism, Sinofuturism, Baltic Ethnofuturism and Hungarofuturism, which tactically empower peripheral identities and subversively affirm individual cultural curiosities.
-
-# Brisi vsebino pada
-GET https://yufu-manifest.ddev.site/etherpad-api/deletePad?padID=d2d479bf-b3cb-455a-b7db-5d53c31d1fa2
\ No newline at end of file
diff --git a/doc/etherpad_api.rest b/doc/etherpad_api.rest
new file mode 120000
index 0000000..b5c9422
--- /dev/null
+++ b/doc/etherpad_api.rest
@@ -0,0 +1 @@
+../web/modules/custom/etherpad_api/doc/api.rest
\ No newline at end of file
diff --git a/doc/yufu_concept_api.rest b/doc/yufu_concept_api.rest
new file mode 120000
index 0000000..3894aa6
--- /dev/null
+++ b/doc/yufu_concept_api.rest
@@ -0,0 +1 @@
+../web/modules/custom/yufu_concept/tests/local-emacs-test.rest
\ No newline at end of file
diff --git a/nuxt/.env.dist b/nuxt/.env
similarity index 68%
rename from nuxt/.env.dist
rename to nuxt/.env
index cb0e6c1..95952a9 100644
--- a/nuxt/.env.dist
+++ b/nuxt/.env
@@ -2,4 +2,4 @@ BASE_URL="https://yufu-manifest.ddev.site"
 JSONAPI_PATH="/jsonapi"
 FILE_PATH="/sites/default/files"
 ETHERPAD_URL="https://pisi.kompot.si"
-ETHERPAD_API_URL="https://yufu-manifest.ddev.site/etherpad-api"
+ETHERPAD_PREFIX="yufu-"
diff --git a/nuxt/.gitignore b/nuxt/.gitignore
index 438cb08..78d5f54 100644
--- a/nuxt/.gitignore
+++ b/nuxt/.gitignore
@@ -4,5 +4,5 @@ node_modules
 .nitro
 .cache
 .output
-.env
+.env.local
 dist
diff --git a/nuxt/components/DodajPojem.vue b/nuxt/components/DodajPojem.vue
index 7f555f1..049939c 100644
--- a/nuxt/components/DodajPojem.vue
+++ b/nuxt/components/DodajPojem.vue
@@ -1,6 +1,6 @@
 <script setup="setup">
 
-const { etherpadApiUrl, etherpadPrefix } = useRuntimeConfig().public
+const { etherpadApiUrl } = useEtherpadApi()
 
 const prikazi = ref(false)
 const revisionId = ref(null)
@@ -9,8 +9,8 @@ const dodajPojem = async () => {
   revisionId.value = crypto.randomUUID()
 
   // Ustvari nov, prazen pad
-  const padId = etherpadPrefix + revisionId.value
-  const resp = await $fetch(`${etherpadApiUrl}/createPad?padID=${padId}&text=`)
+  const padId = revisionId.value
+  const resp = await $fetch(`${etherpadApiUrl}/createPad?padID=${padId}`)
   prikazi.value = true
 }
 
diff --git a/nuxt/components/Pojem.vue b/nuxt/components/Pojem.vue
index 048237f..a44fbab 100644
--- a/nuxt/components/Pojem.vue
+++ b/nuxt/components/Pojem.vue
@@ -2,7 +2,7 @@
 
 import { stripHtml } from 'string-strip-html'
 
-const { etherpadApiUrl, etherpadPrefix } = useRuntimeConfig().public
+const { etherFetch } = useEtherpadApi()
 
 const store = usePojmiStore()
 
@@ -20,36 +20,29 @@ const urejanje = ref(false)
 const urediPojem = async () => {
   // Ustvari pad s tekstom pojma, ce se ne obstaja
   const tekstPojma = stripHtml(pojem.value.tekst).result
-  const resp = await $fetch(`${etherpadApiUrl}/createPad?padID=${etherpadPrefix + revisionId.value}`, {
-    method: 'post',
-    body: {
-      text: tekstPojma
-    }
+  const resp = await etherFetch('/createPad', {
+    padID: revisionId.value,
+    text: tekstPojma
   })
   urejanje.value = true
 }
 
-const brisiPojem = async () => {
-  const resp = await $fetch(`${etherpadApiUrl}/deletePad?padID=${etherpadPrefix + revisionId.value}`)
-  alert('pad izbrisan')
-}
-
 </script>
 
 <template>
   <section class="pojem">
-    <h2>{{ pojem.naslov }}</h2>
-    <div class="tekst" v-html="pojem.tekst" />
-    <div class="gumb" @click="urediPojem">Uredi</div>
-    <div class="gumb" @click="brisiPojem">Briši (pad)</div>
-    <div v-if="urejanje" class="pojem">
-      <PojemForm :revisionId="revisionId" />
+    <PojemForm v-if="urejanje" :revisionId="revisionId" :pojem="pojem" />
+    <div v-else>
+      <div class="gumb" @click="urediPojem">Uredi</div>
+      <h2>{{ pojem.naslov }}</h2>
+      <div class="tekst" v-html="pojem.tekst" />
     </div>
   </section>
 </template>
 
 <style scoped>
 .gumb {
+  float: right;
   margin-right: 1rem;
 }
 </style>
diff --git a/nuxt/components/PojemForm.vue b/nuxt/components/PojemForm.vue
index 6e8c084..b72b6de 100644
--- a/nuxt/components/PojemForm.vue
+++ b/nuxt/components/PojemForm.vue
@@ -1,28 +1,30 @@
 <script setup="setup">
 
-const { etherpadUrl, etherpadPrefix } = useRuntimeConfig().public
+const { etherFetch } = useEtherpadApi()
 
 const store = usePojmiStore()
 
 const props = defineProps({
-  naslov: String,
-  revisionId: String
+  revisionId: String,
+  pojem: Object,
+  urejanje: Object
 })
 
-//const pojem = computed(() => store.pojmi[props.naslov])
+let naslov = ref(props.pojem.naslov)
+let email = ref('')
 
-//await store.naloziPojme()
-
-// const UREJAM = !!pojem.value
-const UREJAM = false
-
-let naslov = ''
-let tekst = ''
-let email = ''
-
-const oddajPredlog = data => {
-  console.log('oddajam predlog!', naslov, tekst, email)
-  store.ustvariPojem(data)
+const oddajPredlog = async data => {
+  // @TODO vsebina pada v tekst, testirat
+  const resp = await etherFetch('/getText', { padID: props.revisionId })
+  store.ustvariPojem({
+    title: naslov.value,
+    email: email.value,
+    text: resp.data.text,
+    uuid: props.revisionId
+  })
+  alert("sprememba predlagana!")
+  // @TODO vrni urejanje v navaden prikaz, ko je končano!
+  urejanje.set(false)
 }
 
 const etherNalozen = ev => {
@@ -33,7 +35,6 @@ const etherNalozen = ev => {
 
 <template>
   <section class="pojem">
-    <div v-if="UREJAM">UREJAM</div>
     <form class="pojem" @submit.prevent="oddajPredlog">
       <label for="naslov">Naslov</label>
       <input name="naslov" type="text" v-model="naslov">
diff --git a/nuxt/composables/etherpadApi.js b/nuxt/composables/etherpadApi.js
new file mode 100644
index 0000000..01036a9
--- /dev/null
+++ b/nuxt/composables/etherpadApi.js
@@ -0,0 +1,21 @@
+export const useEtherpadApi = () => {
+  const { baseUrl } = useRuntimeConfig().public
+  const etherpadApiUrl = `${baseUrl}/etherpad-api`
+
+  const etherFetch = (path, params) => {
+
+    // Convert to form key-value pairs
+    const formBody = Object.keys(params)
+      .map(key => `${key}=${encodeURIComponent(params[key])}`)
+      .join('&')
+
+    // Call API
+    return $fetch(etherpadApiUrl + path, {
+      method: 'POST',
+      headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'},
+      body: formBody
+    })
+  }
+
+  return { etherpadApiUrl, etherFetch }
+}
diff --git a/nuxt/nuxt.config.js b/nuxt/nuxt.config.js
index ee9793b..2271331 100644
--- a/nuxt/nuxt.config.js
+++ b/nuxt/nuxt.config.js
@@ -36,7 +36,6 @@ export default defineNuxtConfig({
       baseUrl: process.env.BASE_URL,
       jsonapiPath: process.env.JSONAPI_PATH,
       etherpadUrl: process.env.ETHERPAD_URL,
-      etherpadApiUrl: process.env.ETHERPAD_API_URL,
       etherpadPrefix: process.env.ETHERPAD_PREFIX
     }
   }
diff --git a/nuxt/stores/pojmi.js b/nuxt/stores/pojmi.js
index b89210c..65d4118 100644
--- a/nuxt/stores/pojmi.js
+++ b/nuxt/stores/pojmi.js
@@ -19,7 +19,10 @@ export const usePojmiStore = defineStore('pojmi', {
       const { baseUrl, headers, deserialize } = useApi()
 
       const req = await $fetch(`${baseUrl}/api/pojem/dodaj`, {
-        headers,
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json'
+        },
         method: "POST",
         body: JSON.stringify(data)
       })
diff --git a/web/modules/custom/etherpad_api/README.md b/web/modules/custom/etherpad_api/README.md
new file mode 100644
index 0000000..0103803
--- /dev/null
+++ b/web/modules/custom/etherpad_api/README.md
@@ -0,0 +1,20 @@
+# Etherpad API
+
+This module can be used to proxy requests to an etherpad API.
+After installing the module, you must set the etherpad instance API URL and the API key.
+
+Etherpad API documentation can be found here: https://etherpad.org/doc/v1.8.4/#index_http_api
+
+The etherpad API proxy URL is /etherpad-api (@TODO make configurable). When calling it, you can omit the version part (e.g. /1) and the API key (which is set in the configuration). The pad ID prefix is hardcoded for the moment (so that requests are limited to specific pads, not the whole instance).
+
+Some example API calls can found in [api.rest](doc/api.rest).
+
+You can do either GET or POST requests to the proxy, passing parameters via query or post parameters. POST parameters must be passed as key-value pairs (application/x-www-form-urlencoded). The proxy always makes POST requests to etherpad, for the sake of simplicity. The API key is always added, the padID is always prefixed.
+
+## TODO
+
+- configurable PAD ID prefix
+- configurable proxy API path
+- API call whitelist
+- security audit
+- use pad groups instead of prefixed pads? (https://etherpad.org/doc/v1.8.4/#index_groups)
diff --git a/web/modules/custom/etherpad_api/doc/api.rest b/web/modules/custom/etherpad_api/doc/api.rest
new file mode 100644
index 0000000..4522da6
--- /dev/null
+++ b/web/modules/custom/etherpad_api/doc/api.rest
@@ -0,0 +1,26 @@
+# -*- restclient -*-
+
+##############################
+# Etherpad API documentation #
+##############################
+
+# You can run these requests using the emacs restclient major mode
+
+# Create new pad (with content)
+POST https://yufu-manifest.ddev.site/etherpad-api/createPad?padID=d2d479bf-b3cb-455a-b7db-5d53c31d1fa2
+Content-Type: application/x-www-form-urlencoded
+text=While post-communist, post-socialist and post-Yugoslav discourses merely reinforce the appearance of an unchanging and unstable present with a more or less accurate expression of the situation, Yugofuturism follows the example of other ethnofuturist movements such as Afrofuturism, Sinofuturism, Baltic Ethnofuturism and Hungarofuturism, which tactically empower peripheral identities and subversively affirm individual cultural curiosities.
+
+# Crate new pad (with content, JSON)
+POST https://yufu-manifest.ddev.site/etherpad-api/createPad?padID=d2d479bf-b3cb-455a-b7db-5d53c31d1fa2
+Content-Type: application/json
+
+{
+"text": "While post-communist, post-socialist and post-Yugoslav discourses merely reinforce the appearance of an unchanging and unstable present with a more or less accurate expression of the situation, Yugofuturism follows the example of other ethnofuturist movements such as Afrofuturism, Sinofuturism, Baltic Ethnofuturism and Hungarofuturism, which tactically empower peripheral identities and subversively affirm individual cultural curiosities."
+}
+
+# Fetch pad content
+GET https://yufu-manifest.ddev.site/etherpad-api/getText?padID=d2d479bf-b3cb-455a-b7db-5d53c31d1fa2
+
+# Delete pad content
+GET https://yufu-manifest.ddev.site/etherpad-api/deletePad?padID=d2d479bf-b3cb-455a-b7db-5d53c31d1fa2
diff --git a/web/modules/custom/etherpad_api/src/Client.php b/web/modules/custom/etherpad_api/src/Client.php
index a476179..975aa74 100644
--- a/web/modules/custom/etherpad_api/src/Client.php
+++ b/web/modules/custom/etherpad_api/src/Client.php
@@ -52,7 +52,7 @@ class Client {
   /**
    * Method description.
    */
-  public function request($method, $url, $opts = []) {
+  public function request($url, $opts = []) {
     $uri = "{$this->baseUrl}/" . self::API_VERSION . '/' . explode('?', $url)[0];
     if (!isset($opts['form_params'])) {
       $opts['form_params'] = [];
diff --git a/web/modules/custom/etherpad_api/src/Controller/EtherpadApiController.php b/web/modules/custom/etherpad_api/src/Controller/EtherpadApiController.php
index 8d6ba1c..884d43d 100644
--- a/web/modules/custom/etherpad_api/src/Controller/EtherpadApiController.php
+++ b/web/modules/custom/etherpad_api/src/Controller/EtherpadApiController.php
@@ -41,7 +41,7 @@ class EtherpadApiController extends ControllerBase {
     $opts = ['form_params' => $data];
 
     try {
-      return $this->client->request($request->getMethod(), $uri, $opts);
+      return $this->client->request($uri, $opts);
     } catch (ClientException $exception) {
       return new Response($exception->getMessage(), $exception->getCode());
     }
diff --git a/web/modules/custom/yufu_concept/tests/local-emacs-test.rest b/web/modules/custom/yufu_concept/tests/local-emacs-test.rest
index d83459e..8608104 100644
--- a/web/modules/custom/yufu_concept/tests/local-emacs-test.rest
+++ b/web/modules/custom/yufu_concept/tests/local-emacs-test.rest
@@ -1,4 +1,4 @@
-# _*_ restclient _*_
+# -*- restclient -*-
 
 # Makes post http request to a resource from yufu_concept module.
 # Make sure uuid is uniq or it will create new revision.