@raketa-cloud/admin 0.0.14 → 0.0.15

package/src/tests/handlers/articles/URLsHandler.test/create.test.js

@@ -0,0 +1,155 @@
+import URLsHandler from "../../../../handlers/articles/URLsHandler";
+import Articles from "../../../../cloud/Articles";
+import Factory from "../../../../../test/factory";
+import { testConfig } from "../../../../../test/handlersHelper";
+
+function buildCtx(article, updateSettings) {
+  return {
+    client: {
+      articles: new Articles(testConfig, "token"),
+    },
+    params: { parent_id: article.id },
+    resourceParams: {
+      change: updateSettings,
+    },
+    locale: "en",
+  };
+}
+
+describe("Article change url", () => {
+  test("create successful", async () => {
+    const article = Factory.build("article");
+    const updateSettings = {
+      slug: "new-slug",
+      redirect: "1",
+    };
+    const ctx = buildCtx(article, updateSettings);
+
+    const mockFind = jest
+      .spyOn(ctx.client.articles, "find")
+      .mockImplementation(() => article);
+
+    const mockChange = jest
+      .spyOn(ctx.client.articles, "updateSlug")
+      .mockImplementation(() => ({ article, errors: null }));
+
+    const result = await URLsHandler.create(ctx);
+
+    expect(mockFind).toHaveBeenCalledWith(article.id, "en");
+    expect(mockChange).toHaveBeenCalledWith(
+      article.id,
+      updateSettings.slug,
+      "en",
+      {
+        url: `/${article.slug}`,
+        destination: updateSettings.slug,
+        httpResponseCode: 301,
+        note: "Created with changed URL for a article",
+      }
+    );
+
+    expect(result).toEqual({
+      redirect: `/en/articles/${article.id}`,
+    });
+  });
+
+  test("create failed due to slug error", async () => {
+    const article = Factory.build("article");
+    const updateSettings = {
+      slug: "new-slug",
+    };
+    const ctx = buildCtx(article, updateSettings);
+
+    const mockFind = jest
+      .spyOn(ctx.client.articles, "find")
+      .mockImplementation(() => article);
+
+    const mockChange = jest
+      .spyOn(ctx.client.articles, "updateSlug")
+      .mockImplementation(() => ({
+        article: null,
+        errors: [{ codes: [], key: "slug", message: "has already been taken" }],
+      }));
+
+    const result = await URLsHandler.create(ctx);
+
+    expect(mockFind).toHaveBeenCalledWith(article.id, "en");
+    expect(mockChange).toHaveBeenCalledWith(
+      article.id,
+      updateSettings.slug,
+      "en",
+      null
+    );
+
+    expect(result).toEqual({
+      assigns: {
+        change: { ...updateSettings, id: article.id },
+        errors: { change: { slug: "has already been taken" } },
+        _translations: [],
+      },
+    });
+  });
+
+  test("create failed due to redirect create", async () => {
+    const article = Factory.build("article");
+    const updateSettings = {
+      slug: "new-slug",
+      redirect: "1",
+    };
+    const ctx = buildCtx(article, updateSettings);
+
+    const mockFind = jest
+      .spyOn(ctx.client.articles, "find")
+      .mockImplementation(() => article);
+
+    const mockChange = jest
+      .spyOn(ctx.client.articles, "updateSlug")
+      .mockImplementation(() => ({
+        article: null,
+        errors: [
+          {
+            codes: [],
+            key: "generalError",
+            message: "url: has already been taken",
+          },
+        ],
+      }));
+
+    const result = await URLsHandler.create(ctx);
+
+    expect(mockFind).toHaveBeenCalledWith(article.id, "en");
+    expect(mockChange).toHaveBeenCalledWith(
+      article.id,
+      updateSettings.slug,
+      "en",
+      {
+        url: `/${article.slug}`,
+        destination: updateSettings.slug,
+        httpResponseCode: 301,
+        note: "Created with changed URL for a article",
+      }
+    );
+
+    expect(result).toEqual({
+      assigns: {
+        change: { ...updateSettings, id: article.id },
+        errors: { change: { redirect: "url: has already been taken" } },
+        _translations: [],
+      },
+    });
+  });
+
+  test("create for non existing article", async () => {
+    const ctx = buildCtx({ id: "42" }, {});
+
+    const mockFind = jest
+      .spyOn(ctx.client.articles, "find")
+      .mockImplementation(() => null);
+
+    expect(async () => {
+      await URLsHandler.create(ctx);
+    }).rejects.toThrow("Cannot find article with id 42");
+
+    expect(mockFind).toHaveBeenCalledWith("42", "en");
+  });
+});

package/src/tests/handlers/articles/URLsHandler.test/create_form.test.js

@@ -0,0 +1,51 @@
+import URLsHandler from "../../../../handlers/articles/URLsHandler";
+import Articles from "../../../../cloud/Articles";
+import Factory from "../../../../../test/factory";
+import { testConfig } from "../../../../../test/handlersHelper";
+
+function buildCtx(article) {
+  return {
+    client: {
+      articles: new Articles(testConfig, "token"),
+    },
+    params: { parent_id: article.id },
+    locale: "en",
+  };
+}
+
+describe("Article change url", () => {
+  test("create_form for existing article", async () => {
+    const article = Factory.build("article");
+    const ctx = buildCtx(article);
+
+    const mockFind = jest
+      .spyOn(ctx.client.articles, "find")
+      .mockImplementation(() => article);
+
+    const result = await URLsHandler.create_form(ctx);
+
+    expect(mockFind).toHaveBeenCalledWith(article.id, "en");
+
+    expect(result).toEqual({
+      assigns: {
+        change: { slug: article.slug, id: article.id, redirect: null },
+        errors: {},
+        _translations: [],
+      },
+    });
+  });
+
+  test("create_form for non existing article", async () => {
+    const ctx = buildCtx({ id: "42" });
+
+    const mockFind = jest
+      .spyOn(ctx.client.articles, "find")
+      .mockImplementation(() => null);
+
+    expect(async () => {
+      await URLsHandler.create_form(ctx);
+    }).rejects.toThrow("Cannot find article with id 42");
+
+    expect(mockFind).toHaveBeenCalledWith("42", "en");
+  });
+});

package/src/tests/handlers/pages/PagesHandler.test/create.test.js

@@ -51,7 +51,7 @@ describe("Pages Handler", () => {
           meta: {
             title: params.meta_title,
             description: params.meta_description,
-            image: JSON.parse(params.meta_image || "{}"),
+            image: JSON.parse(params.meta_image),
           },
           credentials: {
             user: params.username,
@@ -112,7 +112,7 @@ describe("Pages Handler", () => {
           meta: {
             title: params.meta_title,
             description: params.meta_description,
-            image: JSON.parse(params.meta_image || "{}"),
+            image: JSON.parse(params.meta_image),
           },
           credentials: {
             user: params.username,
@@ -129,7 +129,7 @@ describe("Pages Handler", () => {
 
     expect(result).toEqual({
       assigns: {
-        page: { ...params },
+        page: { ...params, meta_image: JSON.parse(params.meta_image) },
         tags: [tag],
         errors: { page: { slug: "cannot be blank" } },
         visibilityOptions: ctx.client.pages.visibilityOptions(),

package/src/utils.js

@@ -0,0 +1,46 @@
+export function toUTCISO8601String(initialDate) {
+  let date = null;
+
+  if (typeof initialDate === "string") {
+    date = new Date(initialDate);
+  } else {
+    date = initialDate;
+  }
+
+  return [
+    date.getUTCFullYear(),
+    "-",
+    (date.getUTCMonth() + 1).toString().padStart(2, "0"),
+    "-",
+    date.getUTCDate().toString().padStart(2, "0"),
+    "T",
+    date.getUTCHours().toString().padStart(2, "0"),
+    ":",
+    date.getUTCMinutes().toString().padStart(2, "0"),
+    ":",
+    date.getUTCSeconds().toString().padStart(2, "0"),
+    "Z",
+  ].join("");
+}
+
+export function toDateTimeInput(initialDate) {
+  let date = null;
+
+  if (typeof initialDate === "string") {
+    date = new Date(initialDate);
+  } else {
+    date = initialDate;
+  }
+
+  return [
+    date.getFullYear(),
+    "-",
+    (date.getMonth() + 1).toString().padStart(2, "0"),
+    "-",
+    date.getDate().toString().padStart(2, "0"),
+    "T",
+    date.getHours().toString().padStart(2, "0"),
+    ":",
+    date.getMinutes().toString().padStart(2, "0"),
+  ].join("");
+}

package/src/views/article_revisions/_nav.ejs

@@ -0,0 +1,40 @@
+<%
+  const activeClass = "relative top-0.5 px-4 border-b-2 border-raketa-primary pb-4";
+  const inactiveClass = "relative top-0.5 px-4 border-b-2 border-transparent pb-4";
+%>
+
+<div class="flex w-full pb-4">
+  <div class="flex items-center justify-between mb-4">
+    <div class="flex items-center border-b-2">
+      <div class=" <%= active === 'general' ? activeClass : inactiveClass %>">
+        <a href="<%= `/${_context.locale}/article_revisions/${settings.id}/general/edit` %>" class="text-raketa-primary font-semibold">
+          General
+        </a>
+      </div>
+
+      <div class="<%= active === 'visuals' ? activeClass : inactiveClass %>">
+        <a href="<%= `/${_context.locale}/article_revisions/${settings.id}/visuals/edit` %>" class="text-raketa-primary font-semibold">
+          Visuals
+        </a>
+      </div>
+
+      <div class="<%= active === 'codes' ? activeClass : inactiveClass %>">
+        <a href="<%= `/${_context.locale}/article_revisions/${settings.id}/codes/edit` %>" class="text-raketa-primary font-semibold">
+          Code customizations
+        </a>
+      </div>
+
+      <div class="<%= active === 'meta' ? activeClass : inactiveClass %>">
+        <a href="<%= `/${_context.locale}/article_revisions/${settings.id}/meta/edit` %>" class="text-raketa-primary font-semibold">
+          Open graph & meta tags
+        </a>
+      </div>
+
+      <div class="<%= active === 'tags' ? activeClass : inactiveClass %>">
+        <a href="<%= `/${_context.locale}/article_revisions/${settings.id}/tags/edit` %>" class="text-raketa-primary font-semibold">
+          Content tags
+        </a>
+      </div>
+    </div>
+  </div>
+</div>

package/src/views/article_revisions/codes/edit_form.ejs

@@ -0,0 +1,39 @@
+<div class="page-wrapper">
+  <div class="page-title">
+    <h1 class="heading-1">Edit revision / Code customizations</h1>
+  </div>
+
+  <%- include('../_nav.ejs', { settings: code_settings, active: 'codes' }) %>
+
+  <div class="grid gap-4 md:grid-cols-3">
+    <div>
+      <% form_for({ code_settings }, errors, (f) => { %>
+      <form action="<%= `/${_context.locale}/article_revisions/${code_settings.id}/codes` %>" method="POST" class="form">
+        <%- f.field('code_settings.scripts', { as: 'textarea', }) %>
+        <%- f.field('code_settings.structured_data', { label: 'Structured data (JSON)', as: 'textarea', hint: 'Click here for a structured data verification tool' }) %>
+
+        <div class="form-actions">
+          <div class="btn-toolbar">
+            <%- f.submit('Save changes', { class: 'btn-primary' }) %>
+            <a href="<%= `/${_context.locale}/articles/${code_settings.originalId}` %>" class="btn-secondary">Back</a>
+          </div>
+        </div>
+      </form>
+      <% }) %>
+    </div>
+
+    <div>
+      <div class="help">
+        <div class="mb-2 flex items-center gap-1">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+          </svg>
+
+          <h3 class="heading-3">Contextual help</h3>
+        </div>
+
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore nostrum fugit sint sunt distinctio ut cum, corrupti ad error, quo labore minima. Reprehenderit quasi maxime repudiandae voluptatum commodi saepe molestiae?</p>
+      </div>
+    </div>
+  </div>
+</div>

package/src/views/article_revisions/general/edit_form.ejs

@@ -0,0 +1,70 @@
+<div class="page-wrapper">
+  <div class="page-title">
+    <h1 class="heading-1">Edit revision / General</h1>
+  </div>
+
+  <%- include('../_nav.ejs', { settings: general_settings, active: 'general' }) %>
+
+  <div class="grid gap-4 md:grid-cols-3">
+    <div>
+      <% form_for({ general_settings }, errors, (f) => { %>
+      <form action="<%= `/${_context.locale}/article_revisions/${general_settings.id}/general` %>" method="POST" class="form">
+        <%- f.field('general_settings.title', { required: true }) %>
+        <%- f.field('general_settings.slug', { label: "URL", required: true }) %>
+        <%- f.field('general_settings.publish_at', { required: true, type: 'datetime-local' }) %>
+        <%- f.field('general_settings.visibility', { as: 'select', required: true, options: visibilityOptions }) %>
+
+        <%- f.field('general_settings.username', { required: true }) %>
+        <%- f.field('general_settings.password', { required: true }) %>
+
+        <div class="form-actions">
+          <div class="btn-toolbar">
+            <%- f.submit('Save changes', { class: 'btn-primary' }) %>
+            <a href="<%= `/${_context.locale}/articles/${general_settings.originalId}` %>" class="btn-secondary">Back</a>
+          </div>
+        </div>
+      </form>
+      <% }) %>
+    </div>
+
+    <div>
+      <div class="help">
+        <div class="mb-2 flex items-center gap-1">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+          </svg>
+
+          <h3 class="heading-3">Contextual help</h3>
+        </div>
+
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore nostrum fugit sint sunt distinctio ut cum, corrupti ad error, quo labore minima. Reprehenderit quasi maxime repudiandae voluptatum commodi saepe molestiae?</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  function onVisibilityChange(event) {
+    const newValue = event.target.value;
+
+    if (newValue === "protected") {
+      document.getElementById("f_username").parentElement.style.display = "block";
+      document.getElementById("f_username").required = true;
+      document.getElementById("f_password").parentElement.style.display = "block";
+      document.getElementById("f_password").required = true;
+    } else {
+      document.getElementById("f_username").parentElement.style.display = "none";
+      document.getElementById("f_username").required = false;
+      document.getElementById("f_password").parentElement.style.display = "none";
+      document.getElementById("f_password").required = false;
+    }
+  }
+
+  onVisibilityChange({
+    target: {
+      value: '<%= general_settings.visibility %>'
+    }
+  })
+
+  document.getElementById("f_visibility").addEventListener("change", onVisibilityChange)
+</script>

package/src/views/article_revisions/locks/create_form.ejs

@@ -0,0 +1,35 @@
+<div class="page-wrapper">
+  <div class="page-title">
+    <h1 class="heading-1">Lock revision</h1>
+  </div>
+
+  <div class="grid gap-4 md:grid-cols-3">
+    <div>
+      <% form_for({ lock_settings }, errors, (f) => { %>
+      <form action="<%= `/${_context.locale}/article_revisions/${lock_settings.revision.id}/locks` %>" method="POST" class="form">
+        <%- f.field('lock_settings.message', { as: 'textarea', label: 'Lock Message', required: true }) %>
+        <div class="form-actions">
+          <div class="btn-toolbar">
+            <%- f.submit('Lock revision', { class: 'btn-primary' }) %>
+            <a href="<%= `/${_context.locale}/articles/${lock_settings.revision.originalId}` %>" class="btn-secondary">Cancel</a>
+          </div>
+        </div>
+      </form>
+      <% }) %>
+    </div>
+
+    <div>
+      <div class="help">
+        <div class="mb-2 flex items-center gap-1">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+          </svg>
+
+          <h3 class="heading-3">Contextual help</h3>
+        </div>
+
+        <p>Locking a revision will prevent further changes to this version of the article. This action cannot be undone. Please provide a reason for locking this revision.</p>
+      </div>
+    </div>
+  </div>
+</div>

package/src/views/article_revisions/meta/edit_form.ejs

@@ -0,0 +1,41 @@
+<div class="page-wrapper">
+  <div class="page-title">
+    <h1 class="heading-1">Edit revision / Open graph & meta tags</h1>
+  </div>
+
+  <%- include('../_nav.ejs', { settings: meta_settings, active: 'meta' }) %>
+
+  <div class="grid gap-4 md:grid-cols-3">
+    <div>
+      <% form_for({ meta_settings }, errors, (f) => { %>
+      <form action="<%= `/${_context.locale}/article_revisions/${meta_settings.id}/meta` %>" method="POST" class="form">
+        <%- f.field('meta_settings.title', { required: true }) %>
+        <%- f.field('meta_settings.description', { as: 'textarea', required: true }) %>
+
+        <raketa-image-picker name="meta_settings[image]" value="<%= JSON.stringify(meta_settings.image) %>"></raketa-image-picker>
+
+        <div class="form-actions">
+          <div class="btn-toolbar">
+            <%- f.submit('Save changes', { class: 'btn-primary' }) %>
+            <a href="<%= `/${_context.locale}/articles/${meta_settings.originalId}` %>" class="btn-secondary">Back</a>
+          </div>
+        </div>
+      </form>
+      <% }) %>
+    </div>
+
+    <div>
+      <div class="help">
+        <div class="mb-2 flex items-center gap-1">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+          </svg>
+
+          <h3 class="heading-3">Contextual help</h3>
+        </div>
+
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore nostrum fugit sint sunt distinctio ut cum, corrupti ad error, quo labore minima. Reprehenderit quasi maxime repudiandae voluptatum commodi saepe molestiae?</p>
+      </div>
+    </div>
+  </div>
+</div>

package/src/views/article_revisions/publishes/_form.ejs

@@ -0,0 +1,57 @@
+<% form_for({ publishing }, errors, (f) => { %>
+<form action="<%= `/${_context.locale}/article_revisions/${publishing.id}/publishes` %>" method="post" class="form">
+  <%- f.field('publishing.title'), { required: true } %>
+  <%- f.field('publishing.description', { as: "textarea" }) %>
+  <%- f.field('publishing.visibility', { as: 'select', required: true, options: visibilityOptions }) %>
+  <%- f.field('publishing.username', { required: true }) %>
+  <%- f.field('publishing.password', { required: true }) %>
+
+  <div class="form-actions">
+    <div class="btn-toolbar">
+      <%- f.submit('Save record', { class: 'btn-primary' }) %>
+
+      <a href="<%= `/${_context.locale}/articles/${publishing.originalId}` %>" class="btn-secondary">Back</a>
+    </div>
+  </div>
+</form>
+<% }) %>
+
+<div>
+  <div class="help">
+    <div class="flex items-center gap-1 mb-2">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+      </svg>
+
+      <h3 class="heading-3">Contextual help</h3>
+    </div>
+
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore nostrum fugit sint sunt distinctio ut cum, corrupti ad error, quo labore minima. Reprehenderit quasi maxime repudiandae voluptatum commodi saepe molestiae?</p>
+  </div>
+</div>
+
+<script>
+  function onVisibilityChange(event) {
+    const newValue = event.target.value;
+
+    if (newValue === "protected") {
+      document.getElementById("f_username").parentElement.style.display = "block";
+      document.getElementById("f_username").required = true;
+      document.getElementById("f_password").parentElement.style.display = "block";
+      document.getElementById("f_password").required = true;
+    } else {
+      document.getElementById("f_username").parentElement.style.display = "none";
+      document.getElementById("f_username").required = false;
+      document.getElementById("f_password").parentElement.style.display = "none";
+      document.getElementById("f_password").required = false;
+    }
+  }
+
+  onVisibilityChange({
+    target: {
+      value: '<%= publishing.visibility %>'
+    }
+  })
+
+  document.getElementById("f_visibility").addEventListener("change", onVisibilityChange)
+</script>

package/src/views/article_revisions/publishes/create_form.ejs

@@ -0,0 +1,10 @@
+<div class="page-wrapper">
+  <div class="page-title">
+    <h1 class="heading-1">Publish revision</h1>
+  </div>
+
+  <div class="grid gap-4 md:grid-cols-3">
+    <%- include('_form.ejs') %>
+  </div>
+</div>
+

package/src/views/article_revisions/tags/edit_form.ejs

@@ -0,0 +1,64 @@
+<div class="page-wrapper">
+  <div class="page-title">
+    <h1 class="heading-1">Edit revision / Content tags</h1>
+  </div>
+
+  <%- include('../_nav.ejs', { settings: tag_settings, active: 'tags' }) %>
+
+  <div class="grid gap-4 md:grid-cols-3">
+    <div>
+      <% form_for({ tag_settings }, errors, (f) => { %>
+      <form action="<%= `/${_context.locale}/article_revisions/${tag_settings.id}/tags` %>" method="POST" class="form">
+        <%- f.field('tag_settings.tags', { as: 'checkbox_group', required: true, options: tags.map(tag => [tag.id, tag.name]) }) %>
+
+        <div class="form-actions">
+          <div class="btn-toolbar">
+            <%- f.submit('Save changes', { class: 'btn-primary' }) %>
+            <a href="<%= `/${_context.locale}/articles/${tag_settings.originalId}` %>" class="btn-secondary">Back</a>
+          </div>
+        </div>
+      </form>
+      <% }) %>
+    </div>
+
+    <div>
+      <div class="help">
+        <div class="mb-2 flex items-center gap-1">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+          </svg>
+
+          <h3 class="heading-3">Contextual help</h3>
+        </div>
+
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore nostrum fugit sint sunt distinctio ut cum, corrupti ad error, quo labore minima. Reprehenderit quasi maxime repudiandae voluptatum commodi saepe molestiae?</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  function onVisibilityChange(event) {
+    const newValue = event.target.value;
+
+    if (newValue === "protected") {
+      document.getElementById("f_username").parentElement.style.display = "block";
+      document.getElementById("f_username").required = true;
+      document.getElementById("f_password").parentElement.style.display = "block";
+      document.getElementById("f_password").required = true;
+    } else {
+      document.getElementById("f_username").parentElement.style.display = "none";
+      document.getElementById("f_username").required = false;
+      document.getElementById("f_password").parentElement.style.display = "none";
+      document.getElementById("f_password").required = false;
+    }
+  }
+
+  onVisibilityChange({
+    target: {
+      value: '<%= tag_settings.visibility %>'
+    }
+  })
+
+  document.getElementById("f_visibility").addEventListener("change", onVisibilityChange)
+</script>