webui: Fully migrate root page from AngularJS to React

This makes the root page (i.e. the index page) use React components
instead of any AngularJS code. This also removes the old lightbox code
which is used on that page.

Author: MKleusberg

package.json

@@ -5,6 +5,7 @@
     "cypress": "^12.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-modal-image": "^2.6.0",
     "react-tabs": "^6.0.0",
     "yarn": "^1.22.19"
   },

webui/css/angular-bootstrap-lightbox.min.css

@@ -1,6 +1,8 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 
+import ModalImage from "react-modal-image";
+
 import Auth from "./auth";
 import DbHeader from "./db-header";
 import MarkdownEditor from "./markdown-editor";
@@ -22,7 +24,7 @@ import MarkdownEditor from "./markdown-editor";
 }
 
 {
-	document.querySelectorAll('.markdown-editor').forEach((rootNode) => {
+	document.querySelectorAll(".markdown-editor").forEach((rootNode) => {
 		const editorId = rootNode.dataset.id;
 		const rows = rootNode.dataset.rows;
 		const placeholder = rootNode.dataset.placeholder;
@@ -39,3 +41,19 @@ import MarkdownEditor from "./markdown-editor";
 		}));
 	});
 }
+
+{
+	document.querySelectorAll(".lightbox-image").forEach((rootNode) => {
+		const small = rootNode.dataset.small;
+		const large = rootNode.dataset.large;
+		const alt = rootNode.dataset.alt;
+
+		const root = ReactDOM.createRoot(rootNode);
+		root.render(React.createElement(ModalImage, {
+			small: small,
+			large: large,
+			alt: alt
+		}));
+	});
+
+}

webui/js/angular-bootstrap-lightbox-license.txt

@@ -3192,9 +3192,6 @@ func main() {
 	http.Handle("/css/local.css", gz.GzipHandler(logReq(func(w http.ResponseWriter, r *http.Request) {
 		http.ServeFile(w, r, filepath.Join(com.Conf.Web.BaseDir, "webui", "css", "local.css"))
 	})))
-	http.Handle("/css/angular-bootstrap-lightbox.min.css", gz.GzipHandler(logReq(func(w http.ResponseWriter, r *http.Request) {
-		http.ServeFile(w, r, filepath.Join(com.Conf.Web.BaseDir, "webui", "css", "angular-bootstrap-lightbox.min.css"))
-	})))
 
 	// Fonts
 	http.Handle("/css/FontAwesome.otf", gz.GzipHandler(logReq(func(w http.ResponseWriter, r *http.Request) {
@@ -3229,9 +3226,6 @@ func main() {
 	http.Handle("/js/angular-sanitize.min.js.map", gz.GzipHandler(logReq(func(w http.ResponseWriter, r *http.Request) {
 		http.ServeFile(w, r, filepath.Join(com.Conf.Web.BaseDir, "webui", "js", "angular-sanitize-1.8.2.min.js.map"))
 	})))
-	http.Handle("/js/angular-bootstrap-lightbox.min.js", gz.GzipHandler(logReq(func(w http.ResponseWriter, r *http.Request) {
-		http.ServeFile(w, r, filepath.Join(com.Conf.Web.BaseDir, "webui", "js", "angular-bootstrap-lightbox.min.js"))
-	})))
 
 	http.Handle("/js/dbhub.js", gz.GzipHandler(logReq(func(w http.ResponseWriter, r *http.Request) {
 		http.ServeFile(w, r, filepath.Join(com.Conf.Web.BaseDir, "webui", "js", "dbhub.js"))