@raketa-cloud/admin 0.0.30 → 0.0.33

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

@@ -5,7 +5,7 @@ import Factory from "../../../support/factory";
 function buildCtx(page) {
   return {
     client: {
-      pages: new Pages({}, "token"),
+      pages: new Pages(() => ({}), "token"),
     },
     params: { parent_id: page.id },
     locale: "en",

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

@@ -6,11 +6,11 @@ import { remoteConfig } from "../../../support/handlersHelper";
 function buildCtx(page, updateSettings) {
   return {
     client: {
-      pages: new Pages({}, "token"),
+      pages: new Pages(() => ({}), "token"),
     },
     params: { parent_id: page.id },
     resourceParams: {
-      deleteAction: updateSettings,
+      resource: updateSettings,
     },
     locale: "en",
     remoteConfig: remoteConfig(),
@@ -90,9 +90,9 @@ describe("Page delete", () => {
 
     expect(result).toEqual({
       assigns: {
-        deleteAction: { ...updateSettings, id: page.id },
+        resource: { ...updateSettings, id: page.id },
         errors: {
-          deleteAction: { redirect: "url: has already been taken" },
+          resource: { redirect: "url: has already been taken" },
         },
         _translations: [],
       },

package/src/tests/handlers/pages/DeletesHandler.test/create_form.test.js

@@ -6,7 +6,7 @@ import { remoteConfig } from "../../../support/handlersHelper";
 function buildCtx(page) {
   return {
     client: {
-      pages: new Pages({}, "token"),
+      pages: new Pages(() => ({}), "token"),
     },
     params: { parent_id: page.id },
     locale: "en",
@@ -33,7 +33,7 @@ describe("Page delete", () => {
 
     expect(result).toEqual({
       assigns: {
-        deleteAction: {
+        resource: {
           id: page.id,
           redirect: "",
         },

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

@@ -8,8 +8,8 @@ describe("Pages Handler", () => {
   function buildCtx(params) {
     return {
       client: {
-        pages: new Pages({}, "token"),
-        tags: new Tags({}, "token"),
+        pages: new Pages(() => ({}), "token"),
+        tags: new Tags(() => ({}), "token"),
       },
       resourceParams: {
         resource: params,
@@ -28,12 +28,18 @@ describe("Pages Handler", () => {
       title: "Page title",
       slug: "url",
       visibility: "public",
-      layout: "default",
-      meta_title: "Meta title",
-      meta_description: "Meta description",
-      meta_image: JSON.stringify({ id: 42 }),
-      username: "admin",
-      password: "admin123!@#",
+      settings: {
+        layout: "default",
+        meta: {
+          title: "Meta title",
+          description: "Meta description",
+          image: JSON.stringify({ id: 42 }),
+        },
+        credentials: {
+          user: "admin",
+          password: "admin123!@#",
+        },
+      },
       tags: [tag.id],
     };
 
@@ -51,15 +57,15 @@ describe("Pages Handler", () => {
         slug: params.slug,
         visibility: params.visibility,
         settings: {
-          layout: params.layout,
+          layout: params.settings.layout,
           meta: {
-            title: params.meta_title,
-            description: params.meta_description,
-            image: JSON.parse(params.meta_image),
+            title: params.settings.meta.title,
+            description: params.settings.meta.description,
+            image: JSON.parse(params.settings.meta.image),
           },
           credentials: {
-            user: params.username,
-            password: params.password,
+            user: params.settings.credentials.user,
+            password: params.settings.credentials.password,
           },
         },
         widgets: [],
@@ -81,12 +87,18 @@ describe("Pages Handler", () => {
       title: "Page title",
       slug: "",
       visibility: "public",
-      layout: "default",
-      meta_title: "Meta title",
-      meta_description: "Meta description",
-      meta_image: JSON.stringify({ id: 42 }),
-      username: "admin",
-      password: "admin123!@#",
+      settings: {
+        layout: "default",
+        meta: {
+          title: "Meta title",
+          description: "Meta description",
+          image: JSON.stringify({ id: 42 }),
+        },
+        credentials: {
+          user: "admin",
+          password: "admin123!@#",
+        },
+      },
       tags: [tag.id],
     };
 
@@ -112,15 +124,15 @@ describe("Pages Handler", () => {
         slug: "",
         visibility: params.visibility,
         settings: {
-          layout: params.layout,
+          layout: params.settings.layout,
           meta: {
-            title: params.meta_title,
-            description: params.meta_description,
-            image: JSON.parse(params.meta_image),
+            title: params.settings.meta.title,
+            description: params.settings.meta.description,
+            image: JSON.parse(params.settings.meta.image),
           },
           credentials: {
-            user: params.username,
-            password: params.password,
+            user: params.settings.credentials.user,
+            password: params.settings.credentials.password,
           },
         },
         widgets: [],
@@ -133,7 +145,18 @@ describe("Pages Handler", () => {
 
     expect(result).toEqual({
       assigns: {
-        resource: { ...params, meta_image: JSON.parse(params.meta_image) },
+        resource: {
+          widgets: [],
+          categories: [],
+          ...params,
+          settings: {
+            ...params.settings,
+            meta: {
+              ...params.settings.meta,
+              image: JSON.parse(params.settings.meta.image),
+            },
+          },
+        },
         tags: [tag],
         errors: { resource: { slug: "cannot be blank" } },
         visibilityOptions: ctx.client.pages.visibilityOptions(),

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

@@ -8,8 +8,8 @@ describe("Pages Handler", () => {
   function buildCtx() {
     return {
       client: {
-        pages: new Pages({}, "token"),
-        tags: new Tags({}, "token"),
+        pages: new Pages(() => ({}), "token"),
+        tags: new Tags(() => ({}), "token"),
       },
       query: { foo: "bar" },
       locale: "en",
@@ -30,7 +30,7 @@ describe("Pages Handler", () => {
 
     expect(result).toEqual({
       assigns: {
-        resource: { ...ctx.client.pages.defaults(), meta_image: {} },
+        resource: { ...ctx.client.pages.defaults() },
         tags: tags,
         errors: {},
         visibilityOptions: ctx.client.pages.visibilityOptions(),

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

@@ -8,8 +8,8 @@ describe("Pages Handler", () => {
   function buildCtx() {
     return {
       client: {
-        pages: new Pages({}, "token"),
-        tags: new Tags({}, "token"),
+        pages: new Pages(() => ({}), "token"),
+        tags: new Tags(() => ({}), "token"),
       },
       query: { foo: "bar" },
       locale: "en",

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

@@ -9,9 +9,9 @@ describe("Pages Handler", () => {
   function buildCtx(page) {
     return {
       client: {
-        pages: new Pages({}, "token"),
-        pageChanges: new PageChanges({}, "token"),
-        pageRevisions: new PageRevisions({}, "token"),
+        pages: new Pages(() => ({}), "token"),
+        pageChanges: new PageChanges(() => ({}), "token"),
+        pageRevisions: new PageRevisions(() => ({}), "token"),
       },
       params: { id: page.id },
       locale: "en",

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

@@ -6,11 +6,11 @@ import { remoteConfig } from "../../../support/handlersHelper";
 function buildCtx(page, updateSettings) {
   return {
     client: {
-      pages: new Pages({}, "token"),
+      pages: new Pages(() => ({}), "token"),
     },
     params: { parent_id: page.id },
     resourceParams: {
-      change: updateSettings,
+      resource: updateSettings,
     },
     locale: "en",
     remoteConfig: remoteConfig(),
@@ -88,8 +88,8 @@ describe("Page change url", () => {
 
     expect(result).toEqual({
       assigns: {
-        change: { ...updateSettings, id: page.id },
-        errors: { change: { slug: "has already been taken" } },
+        resource: { ...updateSettings, id: page.id },
+        errors: { resource: { slug: "has already been taken" } },
         _translations: [],
       },
     });
@@ -137,8 +137,8 @@ describe("Page change url", () => {
 
     expect(result).toEqual({
       assigns: {
-        change: { ...updateSettings, id: page.id },
-        errors: { change: { redirect: "url: has already been taken" } },
+        resource: { ...updateSettings, id: page.id },
+        errors: { resource: { redirect: "url: has already been taken" } },
         _translations: [],
       },
     });

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

@@ -5,7 +5,7 @@ import Factory from "../../../support/factory";
 function buildCtx(page) {
   return {
     client: {
-      pages: new Pages({}, "token"),
+      pages: new Pages(() => ({}), "token"),
     },
     params: { parent_id: page.id },
     locale: "en",
@@ -34,7 +34,7 @@ describe("Page change url", () => {
 
     expect(result).toEqual({
       assigns: {
-        change: { slug: page.slug, id: page.id, redirect: null },
+        resource: { slug: page.slug, id: page.id, redirect: null },
         errors: {},
         _translations: [],
       },

package/src/utils.js

@@ -28,3 +28,15 @@ export function toDateTimeInput(initialDate = null) {
     now.getMinutes().toString().padStart(2, "0"),
   ].join("");
 }
+
+export function checkboxesToArray(value) {
+  if (Array.isArray(value)) {
+    return value;
+  }
+
+  if (!value) {
+    return [];
+  }
+
+  return [value];
+}

package/src/views/_shared/_credentials_input.ejs

@@ -0,0 +1,31 @@
+<%- f.field('resource.settings.credentials.user', { required: true, label: "Username" }) %>
+<%- f.field('resource.settings.credentials.password', { required: true }) %>
+
+<script>
+  function onVisibilityChange(event) {
+    const newValue = event.target.value;
+
+    const userInput = document.getElementById("f_resource_settings_credentials_user");
+    const passInput = document.getElementById("f_resource_settings_credentials_password");
+
+    if (newValue === "protected") {
+      userInput.parentElement.style.display = "block";
+      userInput.required = true;
+      passInput.parentElement.style.display = "block";
+      passInput.required = true;
+    } else {
+      userInput.parentElement.style.display = "none";
+      userInput.required = false;
+      passInput.parentElement.style.display = "none";
+      passInput.required = false;
+    }
+  }
+
+  onVisibilityChange({
+    target: {
+      value: '<%= resource.visibility %>'
+    }
+  })
+
+  document.getElementById('<%= visibilityFieldId %>').addEventListener("change", onVisibilityChange)
+</script>

package/src/views/_shared/_layout_input.ejs

@@ -0,0 +1,5 @@
+<%- f.field('resource.settings.layout', { as: 'select', required: true, options: [
+  ["default", "Default"],
+  ["landing", "Landing page"],
+  ["headless", "Headless"],
+] }) %>

package/src/views/article_revisions/_nav.ejs

@@ -7,31 +7,31 @@
   <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}/${_context.resourceConfig.articleType}_revisions/${settings.id}/general/edit` %>" class="text-raketa-primary font-semibold">
+        <a href="<%= `/${_context.locale}/${_context.resourceConfig.articleType}_revisions/${resource.id}/general/edit` %>" class="text-raketa-primary font-semibold">
           General
         </a>
       </div>
 
       <div class="<%= active === 'visuals' ? activeClass : inactiveClass %>">
-        <a href="<%= `/${_context.locale}/${_context.resourceConfig.articleType}_revisions/${settings.id}/visuals/edit` %>" class="text-raketa-primary font-semibold">
+        <a href="<%= `/${_context.locale}/${_context.resourceConfig.articleType}_revisions/${resource.id}/visuals/edit` %>" class="text-raketa-primary font-semibold">
           Visuals
         </a>
       </div>
 
       <div class="<%= active === 'codes' ? activeClass : inactiveClass %>">
-        <a href="<%= `/${_context.locale}/${_context.resourceConfig.articleType}_revisions/${settings.id}/codes/edit` %>" class="text-raketa-primary font-semibold">
+        <a href="<%= `/${_context.locale}/${_context.resourceConfig.articleType}_revisions/${resource.id}/codes/edit` %>" class="text-raketa-primary font-semibold">
           Code customizations
         </a>
       </div>
 
       <div class="<%= active === 'meta' ? activeClass : inactiveClass %>">
-        <a href="<%= `/${_context.locale}/${_context.resourceConfig.articleType}_revisions/${settings.id}/meta/edit` %>" class="text-raketa-primary font-semibold">
+        <a href="<%= `/${_context.locale}/${_context.resourceConfig.articleType}_revisions/${resource.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}/${_context.resourceConfig.articleType}_revisions/${settings.id}/tags/edit` %>" class="text-raketa-primary font-semibold">
+        <a href="<%= `/${_context.locale}/${_context.resourceConfig.articleType}_revisions/${resource.id}/tags/edit` %>" class="text-raketa-primary font-semibold">
           Content tags
         </a>
       </div>

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

@@ -3,19 +3,30 @@
     <h1 class="heading-1">Edit revision / Code customizations</h1>
   </div>
 
-  <%- render_partial('../_nav.ejs', { settings: code_settings, active: 'codes' }) %>
+  <%- render_partial('../_nav.ejs', { resource, active: 'codes' }) %>
 
   <div class="grid gap-4 md:grid-cols-3">
     <div>
-      <% form_for({ code_settings }, errors, (f) => { %>
-      <form action="<%= `/${_context.locale}/${_context.resourceConfig.articleType}_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' }) %>
+      <% form_for({ resource }, errors, (f) => { %>
+      <form action="<%= `/${_context.locale}/${_context.resourceConfig.articleType}_revisions/${resource.id}/codes` %>" method="POST" class="form">
+        <%- f.field('resource.settings.codes.scripts', {
+          as: 'textarea',
+          "data-validations-json": true,
+          value: JSON.stringify(resource.settings?.codes?.scripts || undefined)
+        }) %>
+
+        <%- f.field('resource.settings.codes.structured_data', {
+          label: 'Structured data (JSON)',
+          as: 'textarea',
+          hint: 'Click here for a structured data verification tool',
+          "data-validations-json": true,
+          value: JSON.stringify(resource.settings?.codes?.structured_data || undefined)
+        }) %>
 
         <div class="form-actions">
           <div class="btn-toolbar">
             <%- f.submit('Save changes', { class: 'btn-primary' }) %>
-            <a href="<%= `/${_context.locale}/${_context.resourceConfig.articleTypePlural}/${code_settings.originalId}` %>" class="btn-secondary">Back</a>
+            <a href="<%= `/${_context.locale}/${_context.resourceConfig.articleTypePlural}/${resource.originalId}` %>" class="btn-secondary">Back</a>
           </div>
         </div>
       </form>

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

@@ -3,23 +3,23 @@
     <h1 class="heading-1">Edit revision / General</h1>
   </div>
 
-  <%- render_partial('../_nav.ejs', { settings: general_settings, active: 'general' }) %>
+  <%- render_partial('../_nav.ejs', { resource, active: 'general' }) %>
 
   <div class="grid gap-4 md:grid-cols-3">
     <div>
-      <% form_for({ general_settings }, errors, (f) => { %>
-      <form action="<%= `/${_context.locale}/${_context.resourceConfig.articleType}_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', label: 'Publish at (UTC)' }) %>
-        <%- 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 }) %>
+      <% form_for({ resource }, errors, (f) => { %>
+      <form action="<%= `/${_context.locale}/${_context.resourceConfig.articleType}_revisions/${resource.id}/general` %>" method="POST" class="form">
+        <%- f.field('resource.title', { required: true }) %>
+        <%- f.field('resource.slug', { label: "URL", required: true }) %>
+        <%- f.field('resource.publishAt', { required: true, type: 'datetime-local', label: 'Publish at (UTC)' }) %>
+        <%- f.field('resource.visibility', { as: 'select', required: true, options: visibilityOptions }) %>
+
+        <%- include('../../_shared/_credentials_input.ejs', { f, visibilityFieldId: "f_resource_visibility"}) %>
 
         <div class="form-actions">
           <div class="btn-toolbar">
             <%- f.submit('Save changes', { class: 'btn-primary' }) %>
-            <a href="<%= `/${_context.locale}/${_context.resourceConfig.articleTypePlural}/${general_settings.originalId}` %>" class="btn-secondary">Back</a>
+            <a href="<%= `/${_context.locale}/${_context.resourceConfig.articleTypePlural}/${resource.originalId}` %>" class="btn-secondary">Back</a>
           </div>
         </div>
       </form>
@@ -41,29 +41,3 @@
     </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

@@ -5,13 +5,13 @@
 
   <div class="grid gap-4 md:grid-cols-3">
     <div>
-      <% form_for({ lock_settings }, errors, (f) => { %>
-      <form action="<%= `/${_context.locale}/${_context.resourceConfig.articleType}_revisions/${lock_settings.revision.id}/locks` %>" method="POST" class="form">
-        <%- f.field('lock_settings.message', { as: 'textarea', label: 'Lock Message', required: true }) %>
+      <% form_for({ resource }, errors, (f) => { %>
+      <form action="<%= `/${_context.locale}/${_context.resourceConfig.articleType}_revisions/${resource.id}/locks` %>" method="POST" class="form">
+        <%- f.field('resource.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}/${_context.resourceConfig.articleTypePlural}/${lock_settings.revision.originalId}` %>" class="btn-secondary">Cancel</a>
+            <a href="<%= `/${_context.locale}/${_context.resourceConfig.articleTypePlural}/${resource.originalId}` %>" class="btn-secondary">Cancel</a>
           </div>
         </div>
       </form>

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

@@ -3,21 +3,21 @@
     <h1 class="heading-1">Edit revision / Open graph & meta tags</h1>
   </div>
 
-  <%- render_partial('../_nav.ejs', { settings: meta_settings, active: 'meta' }) %>
+  <%- render_partial('../_nav.ejs', { resource, active: 'meta' }) %>
 
   <div class="grid gap-4 md:grid-cols-3">
     <div>
-      <% form_for({ meta_settings }, errors, (f) => { %>
-      <form action="<%= `/${_context.locale}/${_context.resourceConfig.articleType}_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 }) %>
+      <% form_for({ resource }, errors, (f) => { %>
+      <form action="<%= `/${_context.locale}/${_context.resourceConfig.articleType}_revisions/${resource.id}/meta` %>" method="POST" class="form">
+        <%- f.field('resource.settings.meta.title', { required: true, label: "Meta title" }) %>
+        <%- f.field('resource.settings.meta.description', { as: "textarea", required: true, label: "Meta description" }) %>
 
-        <raketa-image-picker name="meta_settings[image]" value="<%= JSON.stringify(meta_settings.image) %>"></raketa-image-picker>
+        <raketa-image-picker name="resource[settings][meta][image]" value="<%= JSON.stringify(resource.settings?.meta?.image || {}) %>" label="Meta image"></raketa-image-picker>
 
         <div class="form-actions">
           <div class="btn-toolbar">
             <%- f.submit('Save changes', { class: 'btn-primary' }) %>
-            <a href="<%= `/${_context.locale}/${_context.resourceConfig.articleTypePlural}/${meta_settings.originalId}` %>" class="btn-secondary">Back</a>
+            <a href="<%= `/${_context.locale}/${_context.resourceConfig.articleTypePlural}/${resource.originalId}` %>" class="btn-secondary">Back</a>
           </div>
         </div>
       </form>

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

@@ -3,18 +3,18 @@
     <h1 class="heading-1">Edit revision / Content tags</h1>
   </div>
 
-  <%- render_partial('../_nav.ejs', { settings: tag_settings, active: 'tags' }) %>
+  <%- render_partial('../_nav.ejs', { resource, active: 'tags' }) %>
 
   <div class="grid gap-4 md:grid-cols-3">
     <div>
-      <% form_for({ tag_settings }, errors, (f) => { %>
-      <form action="<%= `/${_context.locale}/${_context.resourceConfig.articleType}_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]) }) %>
+      <% form_for({ resource }, errors, (f) => { %>
+      <form action="<%= `/${_context.locale}/${_context.resourceConfig.articleType}_revisions/${resource.id}/tags` %>" method="POST" class="form">
+        <%- f.field('resource.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}/${_context.resourceConfig.articleTypePlural}/${tag_settings.originalId}` %>" class="btn-secondary">Back</a>
+            <a href="<%= `/${_context.locale}/${_context.resourceConfig.articleTypePlural}/${resource.originalId}` %>" class="btn-secondary">Back</a>
           </div>
         </div>
       </form>

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

@@ -3,22 +3,18 @@
     <h1 class="heading-1">Edit revision / Visuals</h1>
   </div>
 
-  <%- render_partial('../_nav.ejs', { settings: visual_settings, active: 'visuals' }) %>
+  <%- render_partial('../_nav.ejs', { resource, active: 'visuals' }) %>
 
   <div class="grid gap-4 md:grid-cols-3">
     <div>
-      <% form_for({ visual_settings }, errors, (f) => { %>
-      <form action="<%= `/${_context.locale}/${_context.resourceConfig.articleType}_revisions/${visual_settings.id}/visuals` %>" method="POST" class="form">
-        <%- f.field('visual_settings.layout', { as: 'select', required: true, options: [
-          ["default", "Default"],
-          ["landing", "Landing page"],
-          ["headless", "Headless"],
-        ] }) %>
+      <% form_for({ resource }, errors, (f) => { %>
+      <form action="<%= `/${_context.locale}/${_context.resourceConfig.articleType}_revisions/${resource.id}/visuals` %>" method="POST" class="form">
+        <%- include('../../_shared/_layout_input.ejs', { f }) %>
 
         <div class="form-actions">
           <div class="btn-toolbar">
             <%- f.submit('Save changes', { class: 'btn-primary' }) %>
-            <a href="<%= `/${_context.locale}/${_context.resourceConfig.articleTypePlural}/${visual_settings.originalId}` %>" class="btn-secondary">Back</a>
+            <a href="<%= `/${_context.locale}/${_context.resourceConfig.articleTypePlural}/${resource.originalId}` %>" class="btn-secondary">Back</a>
           </div>
         </div>
       </form>

package/src/views/articles/_form.ejs

@@ -2,21 +2,16 @@
 <form action="<%= resource?.id ? `/${_context.locale}/${_context.resourceConfig.articleTypePlural}/${resource.id}` : `/${_context.locale}/${_context.resourceConfig.articleTypePlural}` %>" method="post" class="form">
   <%- f.field('resource.title', { required: true }) %>
   <%- f.field('resource.slug', { label: "URL", required: true }) %>
-  <%- f.field('resource.publish_at', { required: true, type: 'datetime-local', label: 'Publish at (UTC)' }) %>
+  <%- f.field('resource.publishAt', { required: true, type: 'datetime-local', label: 'Publish at (UTC)' }) %>
   <%- f.field('resource.visibility', { as: 'select', required: true, options: visibilityOptions }) %>
-  <%- f.field('resource.username', { required: true }) %>
-  <%- f.field('resource.password', { required: true }) %>
 
-  <%- f.field('resource.layout', { as: 'select', required: true, options: [
-      ["default", "Default"],
-      ["landing", "Landing page"],
-      ["headless", "Headless"],
-    ] }) %>
+  <%- include('../_shared/_credentials_input.ejs', { f, visibilityFieldId: "f_resource_visibility"}) %>
+  <%- include('../_shared/_layout_input.ejs', { f }) %>
 
-  <%- f.field('resource.meta_title', { required: true }) %>
-  <%- f.field('resource.meta_description', { as: "textarea", required: true }) %>
+  <%- f.field('resource.settings.meta.title', { required: true, label: "Meta title" }) %>
+  <%- f.field('resource.settings.meta.description', { as: "textarea", required: true, label: "Meta description" }) %>
 
-  <raketa-image-picker name="resource[meta_image]" value="<%= JSON.stringify(resource.meta_image) %>"></raketa-image-picker>
+  <raketa-image-picker name="resource[settings][meta][image]" value="<%= JSON.stringify(resource.settings?.meta?.image || {}) %>" label="Meta image"></raketa-image-picker>
 
   <%- f.field('resource.tags', { as: 'checkbox_group', required: true, options: tags.map(tag => [tag.id, tag.name]) }) %>
 
@@ -53,29 +48,3 @@
     <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: '<%= resource.visibility %>'
-    }
-  })
-
-  document.getElementById("f_visibility").addEventListener("change", onVisibilityChange)
-</script>