fix(docker): fix configuration endpoint, add configuration export (@fehmer) (monkeytypegame#6317)

- fixes /configure endpoint not working in docker image because of the
missing `private` directory
- adds `export configuration` button to api server configuration

Author: fehmer

.eslintignore

@@ -2,4 +2,5 @@ backend/dist
 backend/__migration__
 docker
 backend/scripts
+backend/private
 **/vitest.config.js

backend/private/index.html

@@ -55,6 +55,7 @@ <h1>API Server Configuration</h1>
       <span id="form-loader" class="loader"></span>
     </div>
     <div id="save">Save Changes</div>
+    <div id="export">Export Configuration</div>
     <script src="script.js"></script>
   </body>
 </html>

backend/private/script.js

@@ -281,4 +281,27 @@ window.onload = async () => {
       saveButton.disabled = false;
     }, 3000);
   });
+
+  const exportButton = document.querySelector("#export");
+
+  exportButton.addEventListener("click", async () => {
+    download(
+      "backend-configuration.json",
+      JSON.stringify({ configuration: state })
+    );
+  });
 };
+
+function download(filename, text) {
+  let element = document.createElement("a");
+  element.setAttribute(
+    "href",
+    "data:text/plain;charset=utf-8," + encodeURIComponent(text)
+  );
+  element.setAttribute("download", filename);
+
+  element.style.display = "none";
+  document.body.appendChild(element);
+  element.click();
+  document.body.removeChild(element);
+}

backend/private/style.css

@@ -74,7 +74,8 @@ body {
   background-color: #d84b4b;
 }
 
-#save {
+#save,
+#export {
   position: fixed;
   right: 6rem;
   bottom: 3rem;
@@ -90,7 +91,12 @@ body {
   transition: 0.125s;
 }
 
-#save:hover {
+#export {
+  bottom: 9rem;
+}
+
+#save:hover,
+#export:hover {
   background-color: var(--text-color);
   color: var(--bg-color);
 }

docker/backend/Dockerfile

@@ -29,6 +29,7 @@ COPY --from=builder /prod/backend/node_modules /app/backend/node_modules
 COPY --from=builder /prod/backend/dist /app/backend/dist
 COPY --from=builder /prod/backend/email-templates /app/backend/email-templates
 COPY --from=builder /prod/backend/redis-scripts /app/backend/redis-scripts
+COPY --from=builder /prod/backend/private /app/backend/private
 
 ## to build directory
 WORKDIR /app/backend/dist

docs/SELF_HOSTING.md

@@ -168,8 +168,8 @@ If you don't want to update this file manually you can
 
 - open the backend url in your browser, e.g. `http://localhost:5005/configure/`
 - adjust the settings and click `Save Changes`
-- open the configuration in your browser, e.g. `http://localhost:5005/configuration`
-- copy everything from `data` into the `backend-configuration.json` file.
+- click `Export Configuration` 
+- save the file as `backend-configuration.json`, overwriting the existing one.
 
 Example output from `http://localhost:5005/configuration`:
 ```json