feat(interface) : Allow to customize the theme for report export (#380)

* feat(interface) : Allow to customize the theme for report export

* feat(interface) : set initial report theme by preference theme of browser

Author: halcin

i18n/english.js

@@ -135,6 +135,8 @@ const ui = {
       form: {
         title: "Report title",
         includesAllDeps: "Include all dependencies",
+        dark_theme: "Dark theme",
+        light_theme: "Light theme",
         submit: "Generate"
       }
     }

i18n/french.js

@@ -135,6 +135,8 @@ const ui = {
       form: {
         title: "Titre du rapport",
         includesAllDeps: "Inclure toutes les dépendances",
+        dark_theme: "Thème sombre",
+        light_theme: "Thème clair",
         submit: "Générer"
       }
     }

public/components/views/home/report/report.js

@@ -11,19 +11,24 @@ export class PopupReport {
     /** @type {HTMLElement} */
     const clone = templateElement.content.cloneNode(true);
     const form = clone.querySelector("form");
+    const isLightPreference = window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches;
+    form.querySelector("#lightTheme").checked = isLightPreference;
+    form.querySelector("#darkTheme").checked = !isLightPreference;
     clone.querySelector("#title").placeholder = `${this.rootDependencyName}'s report`;
     form.addEventListener("submit", (e) => {
       e.preventDefault();
 
       form.querySelector(".spinner").classList.remove("hidden");
       const title = form.querySelector("#title").value;
+      const theme = form.querySelector("#lightTheme").checked ? "light" : "dark";
       const includesAllDeps = form.querySelector("#includesAllDeps").checked;
 
       fetch("/report", {
         method: "POST",
         body: JSON.stringify({
           title,
-          includesAllDeps
+          includesAllDeps,
+          theme
         }),
         headers: {
           "Content-Type": "application/json"

src/http-server/endpoints/report.js

@@ -11,7 +11,6 @@ import { bodyParser } from "../bodyParser.js";
 
 // TODO: provide a non-file-based API on RC side ?
 const kReportPayload = {
-  theme: "light",
   includeTransitiveInternal: false,
   reporters: [
     "pdf"
@@ -47,8 +46,7 @@ const kReportPayload = {
 
 export async function post(req, res) {
   const body = await bodyParser(req);
-  const { title, includesAllDeps } = body;
-
+  const { title, includesAllDeps, theme } = body;
   const { dataFilePath } = context.getStore();
   const scannerPayload = JSON.parse(fs.readFileSync(dataFilePath, "utf-8"));
   const reportPayload = kReportPayload;
@@ -59,7 +57,8 @@ export async function post(req, res) {
     npm: {
       organizationPrefix: repo === undefined ? null : organizationPrefixOrRepo,
       packages: [repo === undefined ? organizationPrefixOrRepo : repo]
-    }
+    },
+    theme
   });
 
   try {

views/index.html

@@ -320,12 +320,18 @@ <h2><i class="icon-keyboard"></i>[[=z.token('settings.shortcuts.title')]]</h2>
     <form action="">
       <label for="title">[[=z.token('popup.report.form.title')]]</label>
       <input type="text" id="title" name="title" required>
-
       <div>
         <input type="checkbox" id="includesAllDeps" name="includesAllDeps" checked>
         <label for="includesAllDeps">[[=z.token('popup.report.form.includesAllDeps')]]</label>
       </div>
-
+      <div>
+        <input type="radio" id="darkTheme" name="theme" value="dark" />
+        <label for="darkTheme">[[=z.token('popup.report.form.dark_theme')]]</label>
+      </div>
+      <div>
+        <input type="radio" id="lightTheme" name="theme" value="light" />
+        <label for="dewey">[[=z.token('popup.report.form.light_theme')]]</label>
+      </div>
       <button type="submit">
         <span class="spinner hidden"></span> [[=z.token('popup.report.form.submit')]]
       </button>