Merge branch 'master' into snyk-upgrade-d77655948f2b0aa52ea586cedd63fada

conf/default.yaml

@@ -17,6 +17,13 @@ web:
   # gravatar: false
   # by default packages are ordercer ascendant (asc|desc)
   # sort_packages: asc
+  # convert your UI to the dark side
+  # darkMode: true
+
+# translate your registry, api i18n not available yet
+# i18n:
+# list of the available translations https://github.com/verdaccio/ui/tree/master/i18n/translations
+#   web: en-US
 
 auth:
   htpasswd:

conf/docker.yaml

@@ -23,6 +23,12 @@ web:
   # gravatar: false
   # by default packages are ordercer ascendant (asc|desc)
   # sort_packages: asc
+  # darkMode: true
+
+# translate your registry, api i18n not available yet
+# i18n:
+# list of the available translations https://github.com/verdaccio/ui/tree/master/i18n/translations
+#   web: en-US
 
 auth:
   htpasswd:

package.json

@@ -24,7 +24,7 @@
     "@verdaccio/local-storage": "^9.3.4",
     "@verdaccio/readme": "^9.3.3",
     "@verdaccio/streams": "^9.3.2",
-    "@verdaccio/ui-theme": "^1.0.0",
+    "@verdaccio/ui-theme": "^1.5.0",
     "JSONStream": "1.3.5",
     "async": "3.2.0",
     "body-parser": "1.19.0",

src/api/web/index.ts

@@ -16,6 +16,8 @@ import loadPlugin from '../../lib/plugin-loader';
 const { setSecurityWebHeaders } = require('../middleware');
 const pkgJSON = require('../../../package.json');
 
+const DEFAULT_LANGUAGE = 'es-US';
+
 export function loadTheme(config) {
   if (_.isNil(config.theme) === false) {
     return _.head(
@@ -32,6 +34,15 @@ export function loadTheme(config) {
   }
 }
 
+export function validatePrimaryColor(primaryColor) {
+  const isHex = /^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/i.test(primaryColor);
+  if (!isHex) {
+    return '';
+  }
+
+  return primaryColor;
+}
+
 const sendFileCallback = next => err => {
   if (!err) {
     return;
@@ -80,11 +91,23 @@ export default function(config, auth, storage) {
     const { url_prefix } = config;
     const uri = `${protocol}://${host}`;
     const base = combineBaseUrl(protocol, host, url_prefix);
-    const languageWeb = config?.i18n?.web ?? 'es-US';
+    const language = config?.i18n?.web ?? DEFAULT_LANGUAGE;
-    const primaryColor = _.get(config, 'web.primary_color') ? config.web.primary_color : '';
+    const darkMode = config?.web?.darkMode ?? false;
+    const primaryColor = validatePrimaryColor(config?.web?.primary_color);
     const title = _.get(config, 'web.title') ? config.web.title : WEB_TITLE;
     const scope = _.get(config, 'web.scope') ? config.web.scope : '';
-    const options = { uri, protocol, host, url_prefix, base, primaryColor, title, scope, language: languageWeb };
+    const options = {
+      uri,
+      darkMode,
+      protocol,
+      host,
+      url_prefix,
+      base,
+      primaryColor,
+      title,
+      scope,
+      language,
+    };
 
     const webPage = template
       .replace(/ToReplaceByVerdaccioUI/g, JSON.stringify(options))