feat: css editor (#1542)

* feat: allow editing CSS from settings

---------

Co-authored-by: Carlos Valente <carlosvalente@pm.me>

refactor: style tweaks

apps/server/src/api-data/assets/assets.controller.ts

@@ -0,0 +1,41 @@
+import { defaultCss } from '../../user/styles/bundledCss.js';
+import type { Request, Response } from 'express';
+import { readCssFile, writeCssFile } from './assets.service.js';
+
+/**
+ * Exposes the contents of the cssOverride.css file
+ */
+export async function getCssOverride(_req: Request, res: Response) {
+  try {
+    const data = await readCssFile();
+    res.status(200).send(data);
+  } catch (error) {
+    res.status(500).send({ message: error });
+  }
+}
+
+/**
+ * Allows modifying the cssOverride.css file
+ */
+export async function postCssOverride(req: Request, res: Response) {
+  const { css } = req.body;
+
+  try {
+    await writeCssFile(css);
+    res.status(204).send();
+  } catch (error) {
+    res.status(500).send({ message: error });
+  }
+}
+
+/**
+ * Restores the default cssOverride.css file
+ */
+export async function restoreCss(_req: Request, res: Response) {
+  try {
+    await writeCssFile(defaultCss);
+    res.status(200).send(defaultCss);
+  } catch (error) {
+    res.status(500).send({ message: error });
+  }
+}

apps/server/src/api-data/assets/assets.router.ts

@@ -0,0 +1,10 @@
+import express from 'express';
+
+import { getCssOverride, postCssOverride, restoreCss } from './assets.controller.js';
+import { validatePostCss } from './assets.validation.js';
+
+export const router = express.Router();
+
+router.get('/css', getCssOverride);
+router.post('/css', validatePostCss, postCssOverride);
+router.post('/css/restore', restoreCss);

apps/server/src/api-data/assets/assets.service.ts

@@ -0,0 +1,33 @@
+import { publicFiles } from '../../setup/index.js';
+import { existsSync } from 'node:fs';
+import { readFile, writeFile } from 'node:fs/promises';
+import { defaultCss } from '../../user/styles/bundledCss.js';
+
+/**
+ * Reads the user's css file
+ * @returns css contents in the file
+ */
+export async function readCssFile(): Promise<string> {
+  const path = publicFiles.cssOverride;
+  if (!existsSync(path)) {
+    await writeFile(path, defaultCss, { encoding: 'utf8' });
+  }
+
+  const css = await readFile(path, { encoding: 'utf8' });
+
+  return css;
+}
+
+/**
+ * Writes the user's css file
+ * @param css the updated css to write to file
+ */
+export async function writeCssFile(css: string) {
+  const path = publicFiles.cssOverride;
+  if (!existsSync(path)) {
+    await writeFile(path, css, { encoding: 'utf8' });
+    return;
+  }
+
+  await writeFile(path, css, { encoding: 'utf8' });
+}

apps/server/src/api-data/assets/assets.validation.ts

@@ -0,0 +1,12 @@
+import { Request, Response, NextFunction } from 'express';
+import { body, validationResult } from 'express-validator';
+
+export const validatePostCss = [
+  body('css').exists().isString().trim(),
+
+  (req: Request, res: Response, next: NextFunction) => {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) return res.status(422).json({ errors: errors.array() });
+    next();
+  },
+];

apps/server/src/api-data/index.ts

@@ -12,6 +12,7 @@ import { router as excelRouter } from './excel/excel.router.js';
 import { router as sessionRouter } from './session/session.router.js';
 import { router as viewSettingsRouter } from './view-settings/viewSettings.router.js';
 import { router as reportRouter } from './report/report.router.js';
+import { router as assetsRouter } from './assets/assets.router.js';
 
 export const appRouter = express.Router();
 
@@ -27,6 +28,7 @@ appRouter.use('/url-presets', urlPresetsRouter);
 appRouter.use('/session', sessionRouter);
 appRouter.use('/view-settings', viewSettingsRouter);
 appRouter.use('/report', reportRouter);
+appRouter.use('/assets', assetsRouter);
 
 //we don't want to redirect to react index when using api routes
 appRouter.all('/*', (_req, res) => {