studiocms 0.1.0-beta.7 → 0.1.0-beta.8

package/dist/schemas/plugins/shared.js

@@ -0,0 +1,221 @@
+import { z } from "astro/zod";
+import { uiTranslationsAvailable } from "../../lib/i18n/config.js";
+const StudioCMSColorway = z.enum([
+  "primary",
+  "success",
+  "warning",
+  "danger",
+  "info",
+  "mono"
+]);
+const BaseFieldSchema = z.object({
+  /**
+   * The name of the field used in the form submission data
+   */
+  name: z.string(),
+  /**
+   * The label of the field displayed in the form
+   */
+  label: z.string(),
+  /**
+   * Is the field required
+   */
+  required: z.boolean().optional(),
+  /**
+   * Is the field read only (disabled)
+   */
+  readOnly: z.boolean().optional()
+});
+const SupportsColorSchema = BaseFieldSchema.extend({
+  color: StudioCMSColorway.optional()
+});
+const SupportsPlaceHolderSchema = BaseFieldSchema.extend({
+  placeholder: z.string().optional()
+});
+const CheckboxFieldSchema = SupportsColorSchema.extend({
+  input: z.literal("checkbox"),
+  defaultChecked: z.boolean().optional(),
+  size: z.enum(["sm", "md", "lg"]).optional()
+});
+const TextInputFieldSchema = SupportsPlaceHolderSchema.extend({
+  input: z.literal("input"),
+  type: z.enum(["text", "password", "email", "number", "tel", "url", "search"]).optional(),
+  defaultValue: z.string().optional()
+});
+const TextAreaFieldSchema = SupportsPlaceHolderSchema.extend({
+  input: z.literal("textarea"),
+  defaultValue: z.string().optional()
+});
+const SharedOptionsSchema = z.array(
+  z.object({
+    label: z.string(),
+    value: z.string(),
+    disabled: z.boolean().optional()
+  })
+);
+const RadioGroupFieldSchema = SupportsColorSchema.extend({
+  input: z.literal("radio"),
+  direction: z.enum(["horizontal", "vertical"]).optional(),
+  defaultValue: z.string().optional(),
+  options: SharedOptionsSchema
+});
+const SelectFieldSchema = SupportsPlaceHolderSchema.extend({
+  input: z.literal("select"),
+  type: z.enum(["basic", "search"]).optional(),
+  defaultValue: z.string().optional(),
+  options: SharedOptionsSchema
+});
+const FieldSchema = z.union([
+  CheckboxFieldSchema,
+  TextInputFieldSchema,
+  TextAreaFieldSchema,
+  RadioGroupFieldSchema,
+  SelectFieldSchema
+]);
+const RowFieldSchema = BaseFieldSchema.extend({
+  input: z.literal("row"),
+  alignCenter: z.boolean().optional(),
+  gapSize: z.enum(["sm", "md", "lg"]).optional(),
+  fields: z.lazy(() => FieldSchema.array())
+  // Recursive definition
+});
+const SettingsFieldSchema = z.union([FieldSchema, RowFieldSchema]);
+const allowedKeys = Object.keys(uiTranslationsAvailable);
+const i18nLabelSchema = z.custom(
+  (value) => {
+    const keys = Object.keys(value);
+    for (const key of keys) {
+      if (!allowedKeys.includes(key)) {
+        return false;
+      }
+    }
+    return true;
+  },
+  {
+    message: `Invalid i18n label translations, currently support translations: ${allowedKeys.join(", ")}.`
+  }
+);
+const BaseDashboardPagePropsSchema = z.object({
+  /**
+   * The title of the dashboard page
+   */
+  title: i18nLabelSchema,
+  /**
+   * The description of the dashboard page
+   */
+  description: z.string(),
+  /**
+   * The desired route of the dashboard page
+   */
+  route: z.string(),
+  /**
+   * The icon to display in the sidebar
+   *
+   * @default 'cube-transparent'
+   * @optional
+   */
+  icon: z.custom().default("cube-transparent").optional(),
+  /**
+   * The required permissions to access the page
+   */
+  requiredPermissions: z.union([
+    z.literal("owner"),
+    z.literal("admin"),
+    z.literal("editor"),
+    z.literal("visitor"),
+    z.literal("none")
+  ]).default("none").optional(),
+  /**
+   * The component to render in the page header to display action buttons
+   */
+  pageActionsComponent: z.string().optional(),
+  /**
+   * The component to render in the page body
+   */
+  pageBodyComponent: z.string()
+});
+const AvailableBaseSchema = BaseDashboardPagePropsSchema.extend({
+  /**
+   * The slug of the dashboard page
+   */
+  slug: z.string()
+});
+const AstroComponentSchema = z.custom();
+const FinalBaseSchema = AvailableBaseSchema.extend({
+  components: z.object({
+    PageActionsComponent: AstroComponentSchema.optional(),
+    PageBodyComponent: AstroComponentSchema,
+    InnerSidebarComponent: AstroComponentSchema.optional()
+  })
+});
+const SingleSidebarSchema = BaseDashboardPagePropsSchema.extend({
+  /**
+   * The sidebar layout
+   */
+  sidebar: z.literal("single")
+});
+const AvailableSingleSchema = AvailableBaseSchema.extend({
+  /**
+   * The sidebar layout
+   */
+  sidebar: z.literal("single")
+});
+const FinalSingleSchema = FinalBaseSchema.extend({
+  /**
+   * The sidebar layout
+   */
+  sidebar: z.literal("single")
+});
+const DoubleSidebarSchema = BaseDashboardPagePropsSchema.extend({
+  /**
+   * The sidebar layout
+   */
+  sidebar: z.literal("double"),
+  /**
+   * The component to render in the inner sidebar
+   */
+  innerSidebarComponent: z.string()
+});
+const AvailableDoubleSchema = AvailableBaseSchema.extend({
+  /**
+   * The sidebar layout
+   */
+  sidebar: z.literal("double"),
+  /**
+   * The component to render in the inner sidebar
+   */
+  innerSidebarComponent: z.string()
+});
+const FinalDoubleSchema = FinalBaseSchema.extend({
+  /**
+   * The sidebar layout
+   */
+  sidebar: z.literal("double"),
+  /**
+   * The component to render in the inner sidebar
+   */
+  innerSidebarComponent: z.string()
+});
+const DashboardPageSchema = z.union([SingleSidebarSchema, DoubleSidebarSchema]);
+const AvailableDashboardBaseSchema = z.union([AvailableSingleSchema, AvailableDoubleSchema]);
+const FinalDashboardBaseSchema = z.union([FinalSingleSchema, FinalDoubleSchema]);
+const AvailableDashboardPagesSchema = z.object({
+  /**
+   * Available dashboard pages for users
+   */
+  user: z.array(AvailableDashboardBaseSchema).optional(),
+  /**
+   * Available dashboard pages for admins
+   */
+  admin: z.array(AvailableDashboardBaseSchema).optional()
+});
+export {
+  AvailableDashboardBaseSchema,
+  AvailableDashboardPagesSchema,
+  DashboardPageSchema,
+  FieldSchema,
+  FinalDashboardBaseSchema,
+  SettingsFieldSchema,
+  StudioCMSColorway,
+  i18nLabelSchema
+};

package/dist/scripts/formListener.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Handles form submission events for login and registration forms.
+ *
+ * @param event - The submit event triggered by the form submission.
+ * @param form - The HTML form element being submitted.
+ * @param type - The type of form being submitted, either 'login' or 'register'.
+ *
+ * @remarks
+ * - Prevents the default form submission behavior.
+ * - For registration forms, checks if the password and confirm password fields match.
+ * - Displays a toast notification if the passwords do not match.
+ * - Submits the form data using the fetch API.
+ * - Displays a success toast notification and reloads the page if the submission is successful.
+ * - Displays an error toast notification if the submission fails.
+ */
+export declare function formListener(event: SubmitEvent, form: HTMLFormElement, type: 'login' | 'register'): Promise<void>;

package/dist/scripts/formListener.js

@@ -0,0 +1,46 @@
+import { toast } from "studiocms:ui/components";
+async function formListener(event, form, type) {
+  event.preventDefault();
+  if (type === "register") {
+    const password = form.querySelector('input[name="password"]');
+    const confirmPassword = form.querySelector(
+      'input[name="confirm-password"]'
+    );
+    if (password.value !== confirmPassword.value) {
+      toast({
+        title: "Passwords do not match!",
+        type: "danger",
+        description: "Please make sure your passwords match.",
+        closeButton: true,
+        persistent: true
+      });
+      return;
+    }
+  }
+  const response = await fetch(form.action, {
+    method: form.method,
+    body: new FormData(form)
+  });
+  if (response.ok) {
+    toast({
+      title: `${type === "login" ? "Login" : "Registration"} successful!`,
+      type: "success",
+      description: "Redirecting..."
+    });
+    window.location.reload();
+  } else {
+    const {
+      error: { title, description }
+    } = await response.json();
+    toast({
+      title,
+      type: "danger",
+      description,
+      closeButton: true,
+      persistent: true
+    });
+  }
+}
+export {
+  formListener
+};

package/dist/scripts/three.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/scripts/three.js

@@ -0,0 +1,277 @@
+import * as THREE from "three";
+import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
+import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
+import { OutlinePass } from "three/addons/postprocessing/OutlinePass.js";
+import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
+import { validImages } from "../utils/validImages.js";
+import { fitModelToViewport } from "./utils/fitModelToViewport.js";
+const configElement = document.getElementById("auth-pages-config");
+const loginPageBackground = configElement.dataset.config_background;
+const loginPageCustomImage = configElement.dataset.config_custom_image;
+const currentMode = document.documentElement.dataset.theme || "dark";
+function parseBackgroundImageConfig(imageName) {
+  if (!imageName) {
+    return "studiocms-curves";
+  }
+  if (imageName) {
+    return imageName;
+  }
+  return "studiocms-curves";
+}
+function parseToString(value) {
+  return value || "";
+}
+const backgroundConfig = {
+  background: parseBackgroundImageConfig(loginPageBackground),
+  customImageHref: parseToString(loginPageCustomImage),
+  mode: currentMode
+};
+function getBackgroundConfig(config) {
+  return validImages.find((image) => image.name === config.background) || validImages[0];
+}
+function bgSelector(image, params) {
+  return image.format === "web" ? params.customImageHref : params.mode === "dark" ? image.dark?.src : image.light?.src;
+}
+class StudioCMS3DLogo {
+  canvasContainer;
+  scene;
+  camera;
+  renderer;
+  model;
+  mouseX = 0;
+  mouseY = 0;
+  time;
+  composer;
+  outlinePass;
+  outlinedObjects = [];
+  defaultComputedCameraZ;
+  BackgroundMesh;
+  frustumHeight;
+  frames = 0;
+  fps = 0;
+  lastTime = 0;
+  lastFrameTimes = [];
+  MAX_FRAME_TIMES_LENGTH = 2;
+  /**
+   * Creates the StudioCMS Logo along with its background in a specified container.
+   * @param containerEl The container that the canvas is placed in.
+   * @param outlineColor Color of the outline for the StudioCMS logo
+   * @param reducedMotion Whether the user prefers reduced motion or not
+   */
+  constructor(containerEl, outlineColor, reducedMotion, image) {
+    this.scene = new THREE.Scene();
+    this.scene.background = new THREE.Color(1052688);
+    this.camera = new THREE.PerspectiveCamera(
+      75,
+      window.innerWidth / 2 / window.innerHeight,
+      0.01,
+      1e4
+    );
+    this.renderer = new THREE.WebGLRenderer({
+      antialias: false
+      // failIfMajorPerformanceCaveat: true,
+    });
+    this.renderer.setSize(window.innerWidth / 2, window.innerHeight);
+    this.renderer.setPixelRatio(window.devicePixelRatio * 2);
+    this.renderer.setClearColor(1052688, 1);
+    this.renderer.setAnimationLoop(this.animate);
+    this.canvasContainer = containerEl;
+    this.canvasContainer.appendChild(this.renderer.domElement);
+    this.time = new THREE.Clock(true);
+    this.composer = new EffectComposer(this.renderer);
+    const light2 = new THREE.AmbientLight(6316128);
+    this.scene.add(light2);
+    const renderScene = new RenderPass(this.scene, this.camera);
+    this.composer.addPass(renderScene);
+    this.loadLogoModel();
+    this.addPostProcessing(true, outlineColor);
+    this.addBackgroundImage(image || validImages[0]);
+    this.initListeners(reducedMotion);
+    this.registerLoadingCallback();
+    this.lastTime = performance.now();
+    this.updateFPS();
+  }
+  updateFPS = () => {
+    const now = performance.now();
+    this.frames++;
+    if (now - this.lastTime >= 1e3) {
+      this.fps = this.frames;
+      this.frames = 0;
+      this.lastTime = now;
+      if (this.lastFrameTimes.length >= this.MAX_FRAME_TIMES_LENGTH) {
+        this.lastFrameTimes.shift();
+      }
+      this.lastFrameTimes.push(this.fps);
+    }
+    if (this.lastFrameTimes.length === this.MAX_FRAME_TIMES_LENGTH) {
+      const averageFPS = this.lastFrameTimes.reduce((a, b) => a + b, 0) / this.MAX_FRAME_TIMES_LENGTH;
+      if (averageFPS < 24) {
+        this.renderer.clear();
+        this.renderer.domElement.remove();
+        throw new Error(`Average FPS is below 24: ${averageFPS}`);
+      }
+    }
+  };
+  animate = () => {
+    if (this.model && this.canvasContainer) {
+      const targetRotationX = this.mouseY === 0 ? Math.PI / 2 : 0.1 * (this.mouseY / window.innerHeight * Math.PI - Math.PI / 2) + Math.PI / 2;
+      const targetRotationY = this.mouseX === 0 ? 0 : 0.1 * (this.mouseX / (window.innerWidth / 2) * Math.PI - Math.PI / 2);
+      const lerpFactor = 0.035;
+      this.model.rotation.x = THREE.MathUtils.lerp(
+        this.model.rotation.x,
+        targetRotationX,
+        lerpFactor
+      );
+      this.model.rotation.y = THREE.MathUtils.lerp(this.model.rotation.y, 0, lerpFactor);
+      this.model.rotation.z = THREE.MathUtils.lerp(
+        this.model.rotation.z,
+        -targetRotationY,
+        lerpFactor
+      );
+    }
+    this.composer.render();
+    this.updateFPS();
+  };
+  loadLogoModel = () => {
+    const loader = new GLTFLoader();
+    loader.loadAsync("/studiocms-resources/auth/studiocms-logo.glb").then((gltf) => {
+      this.model = gltf.scene;
+      this.model.traverse((child) => {
+        const isMesh = child instanceof THREE.Mesh;
+        if (!isMesh) return;
+        const material = new THREE.MeshPhysicalMaterial({
+          color: "#ffffff",
+          roughness: 0.6,
+          transmission: 1,
+          opacity: 1,
+          transparent: true,
+          thickness: 0.5,
+          envMapIntensity: 1,
+          clearcoat: 1,
+          clearcoatRoughness: 0.2,
+          metalness: 0
+        });
+        child.material = material;
+      });
+      this.scene.add(this.model);
+      this.model.rotation.set(Math.PI / 2, 0, 0);
+      this.defaultComputedCameraZ = fitModelToViewport(this.model, this.camera);
+      this.outlinedObjects.push(this.model);
+    });
+  };
+  addPostProcessing = (outlines, outlineColor) => {
+    if (outlines) this.addOutlines(outlineColor);
+  };
+  addOutlines = (outlineColor) => {
+    this.outlinePass = new OutlinePass(
+      new THREE.Vector2(window.innerWidth / 2, window.innerHeight),
+      this.scene,
+      this.camera
+    );
+    this.outlinePass.selectedObjects = this.outlinedObjects;
+    this.outlinePass.edgeStrength = 1.5;
+    this.outlinePass.edgeGlow = 0;
+    this.outlinePass.edgeThickness = 1e-10;
+    this.outlinePass.pulsePeriod = 0;
+    this.outlinePass.visibleEdgeColor.set(outlineColor);
+    this.outlinePass.hiddenEdgeColor.set(new THREE.Color(16777215));
+    this.composer.addPass(this.outlinePass);
+  };
+  addBackgroundImage = (image) => {
+    const bgPositionZ = -5;
+    if (!this.frustumHeight) {
+      this.frustumHeight = 9 * Math.tan(THREE.MathUtils.degToRad(this.camera.fov / 2)) * Math.abs(this.camera.position.z - bgPositionZ);
+    }
+    const loader = new THREE.TextureLoader();
+    const bgUrl = bgSelector(image, backgroundConfig);
+    if (!bgUrl) {
+      console.error("ERROR: Invalid background URL");
+      return;
+    }
+    loader.loadAsync(bgUrl).then((texture) => {
+      const planeHeight = this.frustumHeight;
+      const planeWidth = planeHeight * (texture.source.data.width / texture.source.data.height);
+      const bgGeo = new THREE.PlaneGeometry(planeWidth, planeHeight);
+      const bgMat = new THREE.MeshBasicMaterial({ map: texture });
+      this.BackgroundMesh = new THREE.Mesh(bgGeo, bgMat);
+      this.BackgroundMesh.position.set(0, 0, bgPositionZ);
+      this.scene.add(this.BackgroundMesh);
+    });
+  };
+  initListeners = (reducedMotion) => {
+    this.initResizeListener();
+    if (!reducedMotion) {
+      this.initMouseMoveListener();
+    }
+  };
+  initResizeListener = () => {
+    window.addEventListener("resize", () => {
+      if (window.innerWidth > 850) {
+        this.camera.aspect = window.innerWidth / 2 / window.innerHeight;
+        this.camera.updateProjectionMatrix();
+        this.renderer.setSize(window.innerWidth / 2, window.innerHeight);
+        this.composer.setSize(window.innerWidth / 2, window.innerHeight);
+        if (window.innerWidth < 1100 && this.defaultComputedCameraZ) {
+          this.camera.position.set(
+            this.camera.position.x,
+            this.camera.position.y,
+            this.defaultComputedCameraZ + 5
+          );
+        } else if (window.innerWidth >= 1100 && this.defaultComputedCameraZ) {
+          this.camera.position.set(
+            this.camera.position.x,
+            this.camera.position.y,
+            this.defaultComputedCameraZ
+          );
+        }
+      }
+    });
+  };
+  initMouseMoveListener = () => {
+    document.addEventListener("mousemove", (ev) => {
+      this.mouseX = ev.clientX;
+      this.mouseY = ev.clientY;
+    });
+  };
+  registerLoadingCallback = () => {
+    THREE.DefaultLoadingManager.onLoad = () => {
+      this.canvasContainer.classList.add("loaded");
+    };
+  };
+  recomputeGlassMaterial = () => {
+    if (!this.model) return;
+    this.model.traverse((child) => {
+      const isMesh = child instanceof THREE.Mesh;
+      if (!isMesh) return;
+      const material = new THREE.MeshPhysicalMaterial({
+        color: "#ffffff",
+        roughness: 0.6,
+        transmission: 1,
+        opacity: 1,
+        transparent: true,
+        thickness: 0.5,
+        envMapIntensity: 1,
+        clearcoat: 1,
+        clearcoatRoughness: 0.2,
+        metalness: 0
+      });
+      child.material = material;
+    });
+  };
+}
+const logoContainer = document.querySelector("#canvas-container");
+const usingReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches === true;
+const smallScreen = window.matchMedia("(max-width: 850px)").matches === true;
+if (!smallScreen) {
+  try {
+    new StudioCMS3DLogo(
+      logoContainer,
+      new THREE.Color(11175924),
+      usingReducedMotion,
+      getBackgroundConfig(backgroundConfig)
+    );
+  } catch (err) {
+    console.error("ERROR: Couldn't create StudioCMS3DLogo", err);
+    logoContainer.classList.add("loaded");
+  }
+}

package/dist/scripts/utils/fitModelToViewport.d.ts

@@ -0,0 +1,8 @@
+import * as THREE from 'three';
+/**
+ * Takes in a GLTF model and fits it into a camera's viewport.
+ * @param model The model to fit
+ * @param camera The camera to fit the model into
+ */
+declare function fitModelToViewport(model: THREE.Group<THREE.Object3DEventMap>, camera: THREE.PerspectiveCamera): number;
+export { fitModelToViewport };

package/dist/scripts/utils/fitModelToViewport.js

@@ -0,0 +1,19 @@
+import * as THREE from "three";
+function fitModelToViewport(model, camera) {
+  const box = new THREE.Box3().setFromObject(model);
+  const center = box.getCenter(new THREE.Vector3());
+  const size = box.getSize(new THREE.Vector3());
+  model.position.x += model.position.x - center.x;
+  model.position.y += model.position.y - center.y;
+  model.position.z += model.position.z - center.z;
+  const maxDim = Math.max(size.x, size.y, size.z);
+  const fov = camera.fov * (Math.PI / 180);
+  let cameraZ = Math.abs(maxDim / 2 / Math.tan(fov / 2));
+  cameraZ *= 2.5;
+  camera.position.z = cameraZ;
+  camera.updateProjectionMatrix();
+  return cameraZ;
+}
+export {
+  fitModelToViewport
+};