Add disable attribute for no permission buttons and shorten query param names

2025-11-22 10:51:36 +01:00 · 2024-10-19 17:55:02 +02:00
parent 185aeea4e5
commit b1a59e38c1
22 changed files with 292 additions and 147 deletions
--- a/web-app/src/lib/components/MarkdownEditor.svelte
+++ b/web-app/src/lib/components/MarkdownEditor.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
  import { deserialize, applyAction } from "$app/forms";
  import { textareaScrollTop, previewContent } from "$lib/runes.svelte";
+  import LoadingSpinner from "$lib/components/LoadingSpinner.svelte";
+  import { LOADING_DELAY } from "$lib/utils";

  const {
    apiPrefix,
@@ -10,6 +12,8 @@
  }: { apiPrefix: string; label: string; name: string; content: string } = $props();

  let mainContentTextarea: HTMLTextAreaElement;
+  let loadingDelay: number;
+  let pasting = $state(false);

  const updateScrollPercentage = () => {
    const { scrollTop, scrollHeight, clientHeight } = mainContentTextarea;
@@ -28,6 +32,8 @@

    if (!fileObject) return;

+    loadingDelay = window.setTimeout(() => (pasting = true), LOADING_DELAY);
+
    const formData = new FormData();
    formData.append("file", fileObject);

@@ -48,20 +54,29 @@
      const target = event.target as HTMLTextAreaElement;
      const markdownToInsert = `![](${fileUrl})`;
      const cursorPosition = target.selectionStart;
-      const newContent = target.value.slice(0, target.selectionStart) + markdownToInsert;
-      target.value.slice(target.selectionStart);
+      const newContent =
+        target.value.slice(0, cursorPosition) +
+        markdownToInsert +
+        target.value.slice(cursorPosition);

+      target.value = newContent;
      previewContent.value = newContent;

      const newCursorPosition = cursorPosition + markdownToInsert.length;
      target.setSelectionRange(newCursorPosition, newCursorPosition);
      target.focus();
-    } else {
-      return;
    }
+
+    window.clearTimeout(loadingDelay);
+    pasting = false;
+    return;
  };
 </script>

+{#if pasting}
+  <LoadingSpinner />
+{/if}
+
 <label>
  {label}:
  <textarea
--- a/web-app/src/lib/components/SuccessOrError.svelte
+++ b/web-app/src/lib/components/SuccessOrError.svelte
@@ -3,11 +3,39 @@
 </script>

 {#if success}
-  <p class="toast success">{message}</p>
+  <p class="toast success">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      width="20"
+      height="20"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
+        clip-rule="evenodd"
+      ></path>
+    </svg>
+    {message}
+  </p>
 {/if}

 {#if success === false}
-  <p class="toast error">{message}</p>
+  <p class="toast error">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      width="20"
+      height="20"
+    >
+      <path
+        d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
+      ></path>
+    </svg>
+    {message}
+  </p>
 {/if}

 <style>
--- a/web-app/src/routes/(authenticated)/+page.server.ts
+++ b/web-app/src/routes/(authenticated)/+page.server.ts
@@ -1,15 +1,15 @@
 import type { Actions, PageServerLoad } from "./$types";
 import { apiRequest } from "$lib/server/utils";
 import { API_BASE_PREFIX } from "$lib/server/utils";
-import type { Website } from "$lib/db-schema";
+import type { Collab, Website } from "$lib/db-schema";

 export const load: PageServerLoad = async ({ fetch, url, locals }) => {
-  const searchQuery = url.searchParams.get("website_search_query");
-  const filterBy = url.searchParams.get("website_filter");
+  const searchQuery = url.searchParams.get("query");
+  const filterBy = url.searchParams.get("filter");

  const params = new URLSearchParams();

-  const baseFetchUrl = `${API_BASE_PREFIX}/website?select=*,collab(user_id)&collab.user_id=eq.${locals.user.id}&or=(user_id.eq.${locals.user.id},collab.not.is.null)&order=last_modified_at.desc,created_at.desc`;
+  const baseFetchUrl = `${API_BASE_PREFIX}/website?select=*,collab(user_id,permission_level)&collab.user_id=eq.${locals.user.id}&or=(user_id.eq.${locals.user.id},collab.not.is.null)&order=last_modified_at.desc,created_at.desc`;

  if (searchQuery) {
    params.append("title", `wfts.${searchQuery}`);
@@ -37,7 +37,7 @@ export const load: PageServerLoad = async ({ fetch, url, locals }) => {
    totalWebsites.data.headers.get("content-range")?.split("/").at(-1)
  );

-  const websites: Website[] = (
+  const websites: (Website & { collab: Collab[] })[] = (
    await apiRequest(fetch, constructedFetchUrl, "GET", {
      returnData: true
    })
@@ -45,7 +45,8 @@ export const load: PageServerLoad = async ({ fetch, url, locals }) => {

  return {
    totalWebsiteCount,
-    websites
+    websites,
+    user: locals.user
  };
 };

--- a/web-app/src/routes/(authenticated)/+page.svelte
+++ b/web-app/src/routes/(authenticated)/+page.svelte
@@ -55,26 +55,19 @@
      <form method="GET">
        <label>
          Search:
-          <input
-            type="text"
-            name="website_search_query"
-            value={$page.url.searchParams.get("website_search_query")}
-          />
+          <input type="text" name="query" value={$page.url.searchParams.get("query")} />
        </label>
        <label>
          Filter:
-          <select name="website_filter">
-            <option value="all" selected={"all" === $page.url.searchParams.get("website_filter")}
+          <select name="filter">
+            <option value="all" selected={"all" === $page.url.searchParams.get("filter")}
              >Show all</option
            >
            <option
              value="creations"
-              selected={"creations" === $page.url.searchParams.get("website_filter")}
-              >Created by you</option
+              selected={"creations" === $page.url.searchParams.get("filter")}>Created by you</option
            >
-            <option
-              value="shared"
-              selected={"shared" === $page.url.searchParams.get("website_filter")}
+            <option value="shared" selected={"shared" === $page.url.searchParams.get("filter")}
              >Shared with you</option
            >
          </select>
@@ -84,7 +77,7 @@
    </details>

    <ul class="website-grid unpadded">
-      {#each data.websites as { id, content_type, title, created_at } (id)}
+      {#each data.websites as { id, user_id, content_type, title, created_at, collab } (id)}
        <li class="website-card">
          <p>
            <strong>
@@ -123,7 +116,11 @@
                  />
                </label>

-                <button type="submit">Submit</button>
+                <button
+                  type="submit"
+                  disabled={data.user.id !== user_id && collab[0].permission_level !== 30}
+                  >Submit</button
+                >
              </form>
            </Modal>
            <Modal id="delete-website-{id}" text="Delete">
@@ -140,7 +137,7 @@
              >
                <input type="hidden" name="id" value={id} />

-                <button type="submit">Delete website</button>
+                <button type="submit" disabled={data.user.id !== user_id}>Delete website</button>
              </form>
            </Modal>
          </div>
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/+layout.server.ts
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/+layout.server.ts
@@ -3,7 +3,7 @@ import { API_BASE_PREFIX, apiRequest } from "$lib/server/utils";
 import { error } from "@sveltejs/kit";
 import type { Website, Home, User } from "$lib/db-schema";

-export const load: LayoutServerLoad = async ({ params, fetch }) => {
+export const load: LayoutServerLoad = async ({ locals, params, fetch }) => {
  const websiteData = await apiRequest(
    fetch,
    `${API_BASE_PREFIX}/website?id=eq.${params.websiteId}&select=*,user!user_id(username)`,
@@ -31,8 +31,27 @@ export const load: LayoutServerLoad = async ({ params, fetch }) => {
    })
  ).data;

+  let permissionLevel = 40;
+
+  if (website.user_id !== locals.user.id) {
+    permissionLevel = (
+      await apiRequest(
+        fetch,
+        `${API_BASE_PREFIX}/collab?select=permission_level&website_id=eq.${params.websiteId}&user_id=eq.${locals.user.id}`,
+        "GET",
+        {
+          headers: {
+            Accept: "application/vnd.pgrst.object+json"
+          },
+          returnData: true
+        }
+      )
+    ).data.permission_level;
+  }
+
  return {
    website,
-    home
+    home,
+    permissionLevel
  };
 };
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte
@@ -10,7 +10,6 @@
  import { sending } from "$lib/runes.svelte";
  import MarkdownEditor from "$lib/components/MarkdownEditor.svelte";
  import { previewContent } from "$lib/runes.svelte";
-
  const { data, form }: { data: PageServerData & LayoutServerData; form: ActionData } = $props();

  previewContent.value = data.home.main_content;
@@ -96,7 +95,7 @@
        {/if}
      </div>

-      <button type="submit">Submit</button>
+      <button type="submit" disabled={data.permissionLevel === 10}>Submit</button>
    </form>
  </section>

@@ -143,7 +142,7 @@
        {/if}
      </div>

-      <button type="submit">Submit</button>
+      <button type="submit" disabled={data.permissionLevel === 10}>Submit</button>
    </form>
  </section>

@@ -166,7 +165,7 @@
        content={data.home.main_content}
      />

-      <button type="submit">Submit</button>
+      <button type="submit" disabled={data.permissionLevel === 10}>Submit</button>
    </form>
  </section>

@@ -183,7 +182,7 @@
        >
      </label>

-      <button type="submit">Submit</button>
+      <button type="submit" disabled={data.permissionLevel === 10}>Submit</button>
    </form>
  </section>
 </WebsiteEditor>
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.server.ts
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.server.ts
@@ -4,12 +4,12 @@ import { apiRequest } from "$lib/server/utils";
 import type { Article, DocsCategory } from "$lib/db-schema";

 export const load: PageServerLoad = async ({ params, fetch, url, parent, locals }) => {
-  const searchQuery = url.searchParams.get("article_search_query");
-  const filterBy = url.searchParams.get("article_filter");
+  const searchQuery = url.searchParams.get("query");
+  const filterBy = url.searchParams.get("filter");

-  const { website, home } = await parent();
+  const { website, home, permissionLevel } = await parent();

-  let baseFetchUrl = `${API_BASE_PREFIX}/article?website_id=eq.${params.websiteId}&select=id,title`;
+  let baseFetchUrl = `${API_BASE_PREFIX}/article?website_id=eq.${params.websiteId}&select=id,user_id,title`;
  if (website.content_type === "Docs") {
    baseFetchUrl +=
      ",article_weight,docs_category(category_name,category_weight)&order=docs_category(category_weight).desc.nullslast,article_weight.desc.nullslast";
@@ -56,7 +56,9 @@ export const load: PageServerLoad = async ({ params, fetch, url, parent, locals
    totalArticleCount,
    articles,
    website,
-    home
+    home,
+    permissionLevel,
+    user: locals.user
  };
 };

--- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte
@@ -40,7 +40,7 @@
          <input type="text" name="title" pattern="\S(.*\S)?" maxlength="100" required />
        </label>

-        <button type="submit">Submit</button>
+        <button type="submit" disabled={data.permissionLevel === 10}>Submit</button>
      </form>
    </Modal>
  </section>
@@ -56,26 +56,20 @@
        <form method="GET">
          <label>
            Search:
-            <input
-              type="text"
-              name="article_search_query"
-              value={$page.url.searchParams.get("article_search_query")}
-            />
+            <input type="text" name="query" value={$page.url.searchParams.get("query")} />
          </label>
          <label>
            Filter:
-            <select name="article_filter">
-              <option value="all" selected={"all" === $page.url.searchParams.get("article_filter")}
+            <select name="filter">
+              <option value="all" selected={"all" === $page.url.searchParams.get("filter")}
                >Show all</option
              >
              <option
                value="creations"
-                selected={"creations" === $page.url.searchParams.get("article_filter")}
+                selected={"creations" === $page.url.searchParams.get("filter")}
                >Created by you</option
              >
-              <option
-                value="shared"
-                selected={"shared" === $page.url.searchParams.get("article_filter")}
+              <option value="shared" selected={"shared" === $page.url.searchParams.get("filter")}
                >Created by others</option
              >
            </select>
@@ -85,7 +79,7 @@
      </details>

      <ul class="unpadded">
-        {#each data.articles as { id, title, article_weight, docs_category } (id)}
+        {#each data.articles as { id, user_id, title, article_weight, docs_category } (id)}
          <li class="article-card">
            <p>
              <strong>{title} {article_weight ? `(${article_weight})` : ""}</strong>
@@ -129,7 +123,12 @@
                >
                  <input type="hidden" name="id" value={id} />

-                  <button type="submit">Delete article</button>
+                  <button
+                    type="submit"
+                    disabled={data.permissionLevel === 10 ||
+                      (data.permissionLevel === 20 && user_id !== data.user.id)}
+                    >Delete article</button
+                  >
                </form>
              </Modal>
            </div>
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.server.ts
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.server.ts
@@ -23,9 +23,9 @@ export const load: PageServerLoad = async ({ parent, params, fetch }) => {
    )
  ).data;

-  const { website } = await parent();
+  const { website, permissionLevel } = await parent();

-  return { website, article, categories, API_BASE_PREFIX };
+  return { website, article, categories, API_BASE_PREFIX, permissionLevel };
 };

 export const actions: Actions = {
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte
@@ -119,7 +119,7 @@
        content={data.article.main_content ?? ""}
      />

-      <button type="submit">Submit</button>
+      <button type="submit" disabled={data.permissionLevel === 10}>Submit</button>
    </form>
  </section>
 </WebsiteEditor>
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/categories/+page.server.ts
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/categories/+page.server.ts
@@ -2,7 +2,7 @@ import type { Actions, PageServerLoad } from "./$types";
 import { API_BASE_PREFIX, apiRequest } from "$lib/server/utils";
 import type { DocsCategory } from "$lib/db-schema";

-export const load: PageServerLoad = async ({ parent, params, fetch }) => {
+export const load: PageServerLoad = async ({ parent, params, fetch, locals }) => {
  const categories: DocsCategory[] = (
    await apiRequest(
      fetch,
@@ -14,12 +14,14 @@ export const load: PageServerLoad = async ({ parent, params, fetch }) => {
    )
  ).data;

-  const { website, home } = await parent();
+  const { website, home, permissionLevel } = await parent();

  return {
    categories,
    website,
-    home
+    home,
+    permissionLevel,
+    user: locals.user
  };
 };

--- a/web-app/src/routes/(authenticated)/website/[websiteId]/categories/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/categories/+page.svelte
@@ -44,7 +44,7 @@
          <input name="category-weight" type="number" min="0" required />
        </label>

-        <button type="submit">Submit</button>
+        <button type="submit" disabled={data.permissionLevel === 10}>Submit</button>
      </form>
    </Modal>
  </section>
@@ -56,7 +56,7 @@
      </h2>

      <ul class="unpadded">
-        {#each data.categories as { id, website_id, category_name, category_weight } (`${website_id}-${id}`)}
+        {#each data.categories as { id, website_id, user_id, category_name, category_weight } (`${website_id}-${id}`)}
          <li class="category-card">
            <p>
              <strong>{category_name} ({category_weight})</strong>
@@ -89,7 +89,9 @@
                    <input type="number" name="category-weight" value={category_weight} min="0" />
                  </label>

-                  <button type="submit">Update category</button>
+                  <button type="submit" disabled={data.permissionLevel === 10}
+                    >Update category</button
+                  >
                </form>
              </Modal>
              <Modal id="delete-category-{id}" text="Delete">
@@ -104,7 +106,12 @@
                >
                  <input type="hidden" name="category-id" value={id} />

-                  <button type="submit">Delete category</button>
+                  <button
+                    type="submit"
+                    disabled={data.permissionLevel === 10 ||
+                      (data.permissionLevel === 20 && user_id !== data.user.id)}
+                    >Delete category</button
+                  >
                </form>
              </Modal>
            </div>
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.server.ts
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.server.ts
@@ -2,7 +2,7 @@ import type { Actions, PageServerLoad } from "./$types";
 import { API_BASE_PREFIX, apiRequest } from "$lib/server/utils";
 import type { Collab, User } from "$lib/db-schema";

-export const load: PageServerLoad = async ({ parent, params, fetch }) => {
+export const load: PageServerLoad = async ({ parent, params, fetch, locals }) => {
  const collaborators: (Collab & { user: User })[] = (
    await apiRequest(
      fetch,
@@ -14,12 +14,14 @@ export const load: PageServerLoad = async ({ parent, params, fetch }) => {
    )
  ).data;

-  const { website, home } = await parent();
+  const { website, home, permissionLevel } = await parent();

  return {
    website,
    home,
-    collaborators
+    collaborators,
+    permissionLevel,
+    user: locals.user
  };
 };

--- a/web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.svelte
@@ -51,7 +51,7 @@
          </select>
        </label>

-        <button type="submit">Submit</button>
+        <button type="submit" disabled={[10, 20].includes(data.permissionLevel)}>Submit</button>
      </form>
    </Modal>
  </section>
@@ -89,7 +89,11 @@
                    </select>
                  </label>

-                  <button type="submit">Update collaborator</button>
+                  <button
+                    type="submit"
+                    disabled={[10, 20].includes(data.permissionLevel) || user_id === data.user.id}
+                    >Update collaborator</button
+                  >
                </form>
              </Modal>
              <Modal id="remove-collaborator-{user_id}" text="Remove">
@@ -104,7 +108,11 @@
                >
                  <input type="hidden" name="user-id" value={user_id} />

-                  <button type="submit">Remove collaborator</button>
+                  <button
+                    type="submit"
+                    disabled={[10, 20].includes(data.permissionLevel) || user_id === data.user.id}
+                    >Remove collaborator</button
+                  >
                </form>
              </Modal>
            </div>
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/legal-information/+page.server.ts
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/legal-information/+page.server.ts
@@ -17,12 +17,13 @@ export const load: PageServerLoad = async ({ parent, fetch, params }) => {
    )
  ).data;

-  const { website } = await parent();
+  const { website, permissionLevel } = await parent();

  return {
    legalInformation,
    website,
-    API_BASE_PREFIX
+    API_BASE_PREFIX,
+    permissionLevel
  };
 };

@@ -57,5 +58,22 @@ export const actions: Actions = {
    }

    return deleteLegalInformation;
+  },
+  pasteImage: async ({ request, fetch, params }) => {
+    const data = await request.formData();
+    const file = data.get("file") as File;
+
+    return await apiRequest(fetch, `${API_BASE_PREFIX}/rpc/upload_file`, "POST", {
+      headers: {
+        "Content-Type": "application/octet-stream",
+        Accept: "application/vnd.pgrst.object+json",
+        "X-Website-Id": params.websiteId,
+        "X-Mimetype": file.type,
+        "X-Original-Filename": file.name
+      },
+      body: await file.arrayBuffer(),
+      successMessage: "Successfully uploaded image",
+      returnData: true
+    });
  }
 };
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/legal-information/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/legal-information/+page.svelte
@@ -61,7 +61,7 @@
        content={data.legalInformation?.main_content ?? ""}
      />

-      <button type="submit">Submit</button>
+      <button type="submit" disabled={[10, 20].includes(data.permissionLevel)}>Submit</button>
    </form>

    {#if data.legalInformation?.main_content}
@@ -76,7 +76,9 @@
            <strong>Caution!</strong>
            This action will remove the legal information page from the website and delete all data.
          </p>
-          <button type="submit">Delete legal information</button>
+          <button type="submit" disabled={[10, 20].includes(data.permissionLevel)}
+            >Delete legal information</button
+          >
        </form>
      </Modal>
    {/if}
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/logs/+page.server.ts
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/logs/+page.server.ts
@@ -4,10 +4,10 @@ import type { ChangeLog, User, Collab } from "$lib/db-schema";
 import DiffMatchPatch from "diff-match-patch";

 export const load: PageServerLoad = async ({ parent, fetch, params, url }) => {
-  const userFilter = url.searchParams.get("logs_filter_user");
-  const resourceFilter = url.searchParams.get("logs_filter_resource");
-  const operationFilter = url.searchParams.get("logs_filter_operation");
-  const currentPage = Number.parseInt(url.searchParams.get("logs_results_page") ?? "1");
+  const userFilter = url.searchParams.get("user");
+  const resourceFilter = url.searchParams.get("resource");
+  const operationFilter = url.searchParams.get("operation");
+  const currentPage = Number.parseInt(url.searchParams.get("page") ?? "1");
  const resultOffset = (currentPage - 1) * 20;

  const searchParams = new URLSearchParams();
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/logs/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/logs/+page.svelte
@@ -57,8 +57,8 @@
          Username:
          <input
            list="users-{data.website.id}"
-            name="logs_filter_user"
-            value={$page.url.searchParams.get("logs_filter_user")}
+            name="user"
+            value={$page.url.searchParams.get("user")}
          />
          <datalist id="users-{data.website.id}">
            <option value={data.website.user.username}></option>
@@ -69,39 +69,32 @@
        </label>
        <label>
          Resource:
-          <select name="logs_filter_resource">
+          <select name="resource">
            <option value="all">Show all</option>
            {#each Object.keys(resources) as resource}
              <option
                value={resource}
-                selected={resource === $page.url.searchParams.get("logs_filter_resource")}
-                >{resource}</option
+                selected={resource === $page.url.searchParams.get("resource")}>{resource}</option
              >
            {/each}
          </select>
        </label>
        <label>
          Operation:
-          <select name="logs_filter_operation">
+          <select name="operation">
            <option value="all">Show all</option>
-            <option
-              value="insert"
-              selected={"insert" === $page.url.searchParams.get("logs_filter_operation")}
+            <option value="insert" selected={"insert" === $page.url.searchParams.get("operation")}
              >Insert</option
            >
-            <option
-              value="update"
-              selected={"update" === $page.url.searchParams.get("logs_filter_operation")}
+            <option value="update" selected={"update" === $page.url.searchParams.get("operation")}
              >Update</option
            >
-            <option
-              value="delete"
-              selected={"delete" === $page.url.searchParams.get("logs_filter_operation")}
+            <option value="delete" selected={"delete" === $page.url.searchParams.get("operation")}
              >Delete</option
            >
          </select>
        </label>
-        <input type="hidden" name="logs_results_page" value={1} />
+        <input type="hidden" name="page" value={1} />
        <button type="submit">Submit</button>
      </form>
    </details>
@@ -112,7 +105,7 @@
            <th>User</th>
            <th>Resource</th>
            <th>Operation</th>
-            <th>Date and time</th>
+            <th>Date & Time</th>
            <th>Changes</th>
          </tr>
        </thead>
@@ -171,78 +164,60 @@
    </div>
    <div class="pagination">
      {#snippet commonFilterInputs()}
-        <input
-          type="hidden"
-          name="logs_filter_user"
-          value={$page.url.searchParams.get("logs_filter_user")}
-        />
-        <input
-          type="hidden"
-          name="logs_filter_resource"
-          value={$page.url.searchParams.get("logs_filter_resource")}
-        />
-        <input
-          type="hidden"
-          name="logs_filter_operation"
-          value={$page.url.searchParams.get("logs_filter_operation")}
-        />
+        <input type="hidden" name="user" value={$page.url.searchParams.get("user")} />
+        <input type="hidden" name="resource" value={$page.url.searchParams.get("resource")} />
+        <input type="hidden" name="operation" value={$page.url.searchParams.get("operation")} />
      {/snippet}
      <p>
-        {$page.url.searchParams.get("logs_results_page") ?? 1} / {Math.max(
+        {$page.url.searchParams.get("page") ?? 1} / {Math.max(
          Math.ceil(data.resultChangeLogCount / 20),
          1
        )}
      </p>
      <form method="GET">
-        <input type="hidden" name="logs_results_page" value={1} />
+        <input type="hidden" name="page" value={1} />
        {@render commonFilterInputs()}
-        <button
-          type="submit"
-          disabled={($page.url.searchParams.get("logs_results_page") ?? "1") === "1"}>First</button
+        <button type="submit" disabled={($page.url.searchParams.get("page") ?? "1") === "1"}
+          >First</button
        >
      </form>
      <form method="GET">
        <input
          type="hidden"
-          name="logs_results_page"
-          value={Math.max(
-            1,
-            Number.parseInt($page.url.searchParams.get("logs_results_page") ?? "1") - 1
-          )}
+          name="page"
+          value={Math.max(1, Number.parseInt($page.url.searchParams.get("page") ?? "1") - 1)}
        />
        {@render commonFilterInputs()}
-        <button
-          type="submit"
-          disabled={($page.url.searchParams.get("logs_results_page") ?? "1") === "1"}
+        <button type="submit" disabled={($page.url.searchParams.get("page") ?? "1") === "1"}
          >Previous</button
        >
      </form>
      <form method="GET">
        <input
          type="hidden"
-          name="logs_results_page"
+          name="page"
          value={Math.min(
            Math.max(Math.ceil(data.resultChangeLogCount / 20), 1),
-            Number.parseInt($page.url.searchParams.get("logs_results_page") ?? "1") + 1
+            Number.parseInt($page.url.searchParams.get("page") ?? "1") + 1
          )}
        />
        {@render commonFilterInputs()}
        <button
          type="submit"
-          disabled={($page.url.searchParams.get("logs_results_page") ?? "1") ===
+          disabled={($page.url.searchParams.get("page") ?? "1") ===
            Math.max(Math.ceil(data.resultChangeLogCount / 20), 1).toString()}>Next</button
        >
      </form>
      <form method="GET">
        <input
          type="hidden"
-          name="logs_results_page"
+          name="page"
          value={Math.max(Math.ceil(data.resultChangeLogCount / 20), 1)}
        />
        {@render commonFilterInputs()}
        <button
          type="submit"
-          disabled={($page.url.searchParams.get("logs_results_page") ?? "1") ===
+          disabled={($page.url.searchParams.get("page") ?? "1") ===
            Math.max(Math.ceil(data.resultChangeLogCount / 20), 1).toString()}>Last</button
        >
      </form>
@@ -262,9 +237,4 @@
  .pagination > form:first-of-type {
    margin-inline-start: auto;
  }
-
-  button:disabled {
-    pointer-events: none;
-    color: hsl(0 0% 50%);
-  }
 </style>
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.server.ts
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.server.ts
@@ -10,7 +10,7 @@ import { join } from "node:path";
 import { render } from "svelte/server";
 import type { Actions, PageServerLoad } from "./$types";

-export const load: PageServerLoad = async ({ params, fetch }) => {
+export const load: PageServerLoad = async ({ params, fetch, parent }) => {
  const websiteOverview: WebsiteOverview = (
    await apiRequest(
      fetch,
@@ -27,10 +27,13 @@ export const load: PageServerLoad = async ({ params, fetch }) => {

  const { websitePreviewUrl, websiteProdUrl } = await generateStaticFiles(websiteOverview);

+  const { permissionLevel } = await parent();
+
  return {
    websiteOverview,
    websitePreviewUrl,
-    websiteProdUrl
+    websiteProdUrl,
+    permissionLevel
  };
 };

--- a/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.svelte
@@ -36,7 +36,7 @@
      be published on the Internet.
    </p>
    <form method="POST" action="?/publishWebsite" use:enhance={enhanceForm()}>
-      <button type="submit">Publish</button>
+      <button type="submit" disabled={[10, 20].includes(data.permissionLevel)}>Publish</button>
    </form>
  </section>

@@ -73,7 +73,7 @@
            required
          />
        </label>
-        <button type="submit">Submit</button>
+        <button type="submit" disabled={[10, 20].includes(data.permissionLevel)}>Submit</button>
      </form>
      {#if data.websiteOverview.domain_prefix?.prefix}
        <Modal id="delete-domain-prefix" text="Delete">
@@ -87,7 +87,9 @@
              <strong>Caution!</strong>
              This action will remove the domain prefix and reset it to its initial value.
            </p>
-            <button type="submit">Delete domain prefix</button>
+            <button type="submit" disabled={[10, 20].includes(data.permissionLevel)}
+              >Delete domain prefix</button
+            >
          </form>
        </Modal>
      {/if}
--- a/web-app/template-styles/common-styles.css
+++ b/web-app/template-styles/common-styles.css
@@ -105,6 +105,12 @@ label[for="toggle-theme"] svg:last-of-type {
  background-color: var(--bg-tertiary);
 }

+button:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+  z-index: -10;
+}
+
 :is(button, input, textarea, select, a, summary, pre):focus,
 :is(#toggle-mobile-preview, #toggle-sidebar):checked + label {
  outline: 0.125rem solid var(--color-accent);
--- a/web-app/tests/collaborator.spec.ts
+++ b/web-app/tests/collaborator.spec.ts
@@ -154,6 +154,10 @@ test.describe.serial("Collaborator tests", () => {

      test("Update website", async ({ page }) => {
        await page.locator("li").filter({ hasText: "Blog" }).getByRole("button").first().click();
+        const modalName = page.url().split("#")[1];
+        await page
+          .locator(`div[id="${modalName}"] button[type="submit"]`)
+          .evaluate((node) => node.removeAttribute("disabled"));
        await page.getByRole("button", { name: "Submit" }).click();

        if ([10, 20].includes(permissionLevel)) {
@@ -164,11 +168,18 @@ test.describe.serial("Collaborator tests", () => {
      });
      test("Delete website", async ({ page }) => {
        await page.locator("li").filter({ hasText: "Blog" }).getByRole("button").nth(1).click();
+        const modalName = page.url().split("#")[1];
+        await page
+          .locator(`div[id="${modalName}"] button[type="submit"]`)
+          .evaluate((node) => node.removeAttribute("disabled"));
        await page.getByRole("button", { name: "Delete website" }).click();
        await expect(page.getByText("Insufficient permissions")).toBeVisible();
      });
      test("Update Global", async ({ page }) => {
        await page.getByRole("link", { name: "Blog" }).click();
+        await page
+          .locator('#global button[type="submit"]')
+          .evaluate((node) => node.removeAttribute("disabled"));
        await page.locator("#global").getByRole("button", { name: "Submit" }).click();

        if (permissionLevel === 10) {
@@ -179,6 +190,9 @@ test.describe.serial("Collaborator tests", () => {
      });
      test("Update Header", async ({ page }) => {
        await page.getByRole("link", { name: "Blog" }).click();
+        await page
+          .locator('#header button[type="submit"]')
+          .evaluate((node) => node.removeAttribute("disabled"));
        await page.locator("#header").getByRole("button", { name: "Submit" }).click();

        if (permissionLevel === 10) {
@@ -191,6 +205,9 @@ test.describe.serial("Collaborator tests", () => {
        await page.getByRole("link", { name: "Blog" }).click();
        await page.getByLabel("Description:").click();
        await page.getByLabel("Description:").fill("Description");
+        await page
+          .locator('#home button[type="submit"]')
+          .evaluate((node) => node.removeAttribute("disabled"));
        await page.locator("#home").getByRole("button", { name: "Submit" }).click();

        if (permissionLevel === 10) {
@@ -201,6 +218,9 @@ test.describe.serial("Collaborator tests", () => {
      });
      test("Update Footer", async ({ page }) => {
        await page.getByRole("link", { name: "Blog" }).click();
+        await page
+          .locator('#footer button[type="submit"]')
+          .evaluate((node) => node.removeAttribute("disabled"));
        await page.locator("#footer").getByRole("button", { name: "Submit" }).click();

        if (permissionLevel === 10) {
@@ -215,6 +235,9 @@ test.describe.serial("Collaborator tests", () => {
        await page.getByRole("button", { name: "Create article" }).click();
        await page.getByLabel("Title:").click();
        await page.getByLabel("Title:").fill(`Article-${permissionLevel}`);
+        await page
+          .locator('form[action="?/createArticle"] button[type="submit"]')
+          .evaluate((node) => node.removeAttribute("disabled"));
        await page.getByRole("button", { name: "Submit" }).click();

        if (permissionLevel === 10) {
@@ -237,6 +260,9 @@ test.describe.serial("Collaborator tests", () => {
        await page.getByLabel("Author:").fill("Author");
        await page.getByLabel("Main content:").click();
        await page.getByLabel("Main content:").fill("## Main content");
+        await page
+          .locator('form button[type="submit"]')
+          .evaluate((node) => node.removeAttribute("disabled"));
        await page.getByRole("button", { name: "Submit" }).click();

        if (permissionLevel === 10) {
@@ -253,6 +279,10 @@ test.describe.serial("Collaborator tests", () => {
          .filter({ hasText: `Article-${permissionLevel}` })
          .getByRole("button")
          .click();
+        const modalName = page.url().split("#")[1];
+        await page
+          .locator(`div[id="${modalName}"] button[type="submit"]`)
+          .evaluate((node) => node.removeAttribute("disabled"));
        await page.getByRole("button", { name: "Delete article" }).click();

        if (permissionLevel === 10) {
@@ -262,6 +292,10 @@ test.describe.serial("Collaborator tests", () => {
          await expect(page.getByText("Successfully deleted article")).toBeVisible();

          await page.locator("li").filter({ hasText: `Article-10` }).getByRole("button").click();
+          const modalName = page.url().split("#")[1];
+          await page
+            .locator(`div[id="${modalName}"] button[type="submit"]`)
+            .evaluate((node) => node.removeAttribute("disabled"));
          await page.getByRole("button", { name: "Delete article" }).click();

          if (permissionLevel === 20) {
@@ -277,6 +311,9 @@ test.describe.serial("Collaborator tests", () => {
        await page.getByRole("button", { name: "Add collaborator" }).click();
        await page.getByLabel("Username:").click();
        await page.getByLabel("Username:").fill(collabUsername4);
+        await page
+          .locator('form[action="?/addCollaborator"] button[type="submit"]')
+          .evaluate((node) => node.removeAttribute("disabled"));
        await page.getByRole("button", { name: "Submit" }).click();

        if ([10, 20].includes(permissionLevel)) {
@@ -295,6 +332,10 @@ test.describe.serial("Collaborator tests", () => {
          .first()
          .click();
        await page.getByRole("combobox").selectOption("20");
+        const modalName = page.url().split("#")[1];
+        await page
+          .locator(`div[id="${modalName}"] button[type="submit"]`)
+          .evaluate((node) => node.removeAttribute("disabled"));
        await page.getByRole("button", { name: "Update collaborator" }).click();

        if ([10, 20].includes(permissionLevel)) {
@@ -322,6 +363,10 @@ test.describe.serial("Collaborator tests", () => {
          .getByRole("button")
          .nth(1)
          .click();
+        const modalName = page.url().split("#")[1];
+        await page
+          .locator(`div[id="${modalName}"] button[type="submit"]`)
+          .evaluate((node) => node.removeAttribute("disabled"));
        await page.getByRole("button", { name: "Remove collaborator" }).click();

        if ([10, 20].includes(permissionLevel)) {
@@ -344,16 +389,9 @@ test.describe.serial("Collaborator tests", () => {
        await page.getByRole("link", { name: "Legal information" }).click();
        await page.getByLabel("Main content:").click();
        await page.getByLabel("Main content:").fill("## Content");
-        await page.getByRole("button", { name: "Submit" }).click();
-
-        if (permissionLevel === 30) {
-          await expect(page.getByText("Successfully created/updated legal")).toBeVisible();
-        } else {
-          await expect(page.getByText("Insufficient permissions")).toBeVisible();
-        }
-
-        await page.getByLabel("Main content:").click();
-        await page.getByLabel("Main content:").fill("## Content updated");
+        await page
+          .locator('form[action="?/createUpdateLegalInformation"] button[type="submit"]')
+          .evaluate((node) => node.removeAttribute("disabled"));
        await page.getByRole("button", { name: "Submit" }).click();

        if (permissionLevel === 30) {
@@ -370,6 +408,9 @@ test.describe.serial("Collaborator tests", () => {
          .click();
        await page.getByRole("link", { name: "Legal information" }).click();
        await page.getByRole("button", { name: "Delete" }).click();
+        await page
+          .locator('form[action="?/deleteLegalInformation"] button[type="submit"]')
+          .evaluate((node) => node.removeAttribute("disabled"));
        await page.getByRole("button", { name: "Delete legal information" }).click();

        if (permissionLevel === 30) {
@@ -386,6 +427,9 @@ test.describe.serial("Collaborator tests", () => {
        await page.getByLabel("Name:").nth(0).fill(`Category-${permissionLevel}`);
        await page.getByRole("spinbutton", { name: "Weight:" }).click();
        await page.getByRole("spinbutton", { name: "Weight:" }).fill(permissionLevel.toString());
+        await page
+          .locator('form[action="?/createCategory"] button[type="submit"]')
+          .evaluate((node) => node.removeAttribute("disabled"));
        await page.getByRole("button", { name: "Submit" }).click();

        if (permissionLevel === 10) {
@@ -407,6 +451,10 @@ test.describe.serial("Collaborator tests", () => {
        await page
          .getByRole("spinbutton", { name: "Weight:" })
          .fill((permissionLevel * 2).toString());
+        const modalName = page.url().split("#")[1];
+        await page
+          .locator(`div[id="${modalName}"] button[type="submit"]`)
+          .evaluate((node) => node.removeAttribute("disabled"));
        await page.getByRole("button", { name: "Update category" }).click();

        if (permissionLevel === 10) {
@@ -424,6 +472,10 @@ test.describe.serial("Collaborator tests", () => {
          .getByRole("button")
          .nth(1)
          .click();
+        const modalName = page.url().split("#")[1];
+        await page
+          .locator(`div[id="${modalName}"] button[type="submit"]`)
+          .evaluate((node) => node.removeAttribute("disabled"));
        await page.getByRole("button", { name: "Delete category" }).click();

        if (permissionLevel === 10) {
@@ -438,6 +490,10 @@ test.describe.serial("Collaborator tests", () => {
            .getByRole("button")
            .nth(1)
            .click();
+          const modalName = page.url().split("#")[1];
+          await page
+            .locator(`div[id="${modalName}"] button[type="submit"]`)
+            .evaluate((node) => node.removeAttribute("disabled"));
          await page.getByRole("button", { name: "Delete category" }).click();

          if (permissionLevel === 20) {
@@ -450,6 +506,9 @@ test.describe.serial("Collaborator tests", () => {
      test("Publish website", async ({ page }) => {
        await page.getByRole("link", { name: "Blog" }).click();
        await page.getByRole("link", { name: "Publish" }).click();
+        await page
+          .locator('form[action="?/publishWebsite"] button[type="submit"]')
+          .evaluate((node) => node.removeAttribute("disabled"));
        await page.getByRole("button", { name: "Publish" }).click();

        if ([10, 20].includes(permissionLevel)) {
@@ -468,6 +527,9 @@ test.describe.serial("Collaborator tests", () => {
        await page.keyboard.press(`${modifier}+A`);
        await page.keyboard.press(`Backspace`);
        await page.getByLabel("Prefix:").fill(customPrefix2);
+        await page
+          .locator('form[action="?/createUpdateCustomDomainPrefix"] button[type="submit"]')
+          .evaluate((node) => node.removeAttribute("disabled"));
        await page.getByRole("button", { name: "Submit" }).click();

        if ([10, 20].includes(permissionLevel)) {
@@ -480,6 +542,9 @@ test.describe.serial("Collaborator tests", () => {
        await page.getByRole("link", { name: "Blog" }).click();
        await page.getByRole("link", { name: "Publish" }).click();
        await page.getByRole("button", { name: "Delete" }).click();
+        await page
+          .locator('form[action="?/deleteCustomDomainPrefix"] button[type="submit"]')
+          .evaluate((node) => node.removeAttribute("disabled"));
        await page.getByRole("button", { name: "Delete domain prefix" }).click();

        if ([10, 20].includes(permissionLevel)) {