Set terms and conditions page without library link (#3866)

* add terms without library link

* removed comment line

* replaced loading with fetching

* removed html in markdown for codacy fix

* add description for image to avoid codacy minor alert

* update manual legal part in profile manager

* removed unnecessary image

* adjust error text

* removed unused function

* use import for links

* made 3 functions out of 1 to simplify watch function

* set manual link from manual.ts instead of absolute

* fixed import of manual.ts

* import manual

* updated manual.ts with link

* revert to previous configuration

* removed unused import

* update image format to take all screen's width

Author: mik-tf

packages/grid_client/src/modules/tfchain.ts

@@ -477,7 +477,9 @@ class TFChain implements blockchainInterface {
       });
     }
     await (
-      await client.termsAndConditions.accept({ documentLink: "https://library.threefold.me/info/legal/#/" })
+      await client.termsAndConditions.accept({
+        documentLink: "https://manual.grid.tf/knowledge_base/legal/terms_conditions_all3.html",
+      })
     ).apply();
     const ret = await (await client.twins.create({ relay })).apply();
     if (disconnect) await client.disconnect();

packages/playground/src/utils/manual.ts

@@ -1,6 +1,14 @@
 import urlJoin from "url-join";
 
 const BASE = window.env.MANUAL_URL;
+
+const GITHUB = {
+  RAW_BASE: "https://raw.githubusercontent.com/threefoldtech/info_grid/master/src",
+  LEGAL_PATH: "knowledge_base/legal",
+};
+
+const LEGAL_HEADER_IMG = "img/legal_header.jpg";
+
 export const manual = {
   dedicated_machines: urlJoin(BASE, "/documentation/dashboard/deploy/node_finder.html#dedicated-nodes"),
   tft_bridges: urlJoin(BASE, "/documentation/threefold_token/tft_bridges/tft_bridges.html"),
@@ -19,4 +27,8 @@ export const manual = {
   minting_receipts: urlJoin(BASE, "/documentation/farmers/3node_building/minting_receipts.html"),
   minting_process: urlJoin(BASE, "/documentation/farmers/farming_optimization/minting_process.html"),
   minting_reports: urlJoin(BASE, "/documentation/dashboard/tfchain/tf_minting_reports.html"),
+  manual_raw_legal: urlJoin(GITHUB.RAW_BASE, GITHUB.LEGAL_PATH, "terms_conditions_all3.md"),
+  manual_raw_legal_img: urlJoin(GITHUB.RAW_BASE, GITHUB.LEGAL_PATH, LEGAL_HEADER_IMG),
+  manual_legal_base: urlJoin(BASE, GITHUB.LEGAL_PATH),
+  legal_header_img: LEGAL_HEADER_IMG,
 };

packages/playground/src/weblets/profile_manager.vue

@@ -429,6 +429,7 @@ import { validateMnemonic } from "bip39";
 import Cryptr from "cryptr";
 import { marked } from "marked";
 import md5 from "md5";
+import urlJoin from "url-join";
 import { computed, onMounted, type Ref, ref, watch } from "vue";
 import { nextTick } from "vue";
 import { useTheme } from "vuetify";
@@ -832,45 +833,36 @@ function validateConfirmPassword(value: string) {
   }
 }
 
-function parseAcceptTermsImage(tempDiv: HTMLDivElement, url: string) {
-  const imageElements = tempDiv.querySelectorAll("img");
-  imageElements.forEach(imgElement => {
-    imgElement.setAttribute("src", url + "legal__legal_header_.jpg");
-    // Update the style of the image.
-    imgElement.setAttribute("class", "info-legal-image");
+const replaceMarkdownLinks = (content: string, pattern: RegExp, baseUrl: string) => {
+  return content.replace(pattern, (_, linkText, path) => {
+    const relativePath = path.replace("./", "");
+    return `[${linkText}](${urlJoin(baseUrl, `${relativePath}.html`)})`;
   });
-}
+};
+
+const processMarkdownContent = (content: string, baseUrl: string) => {
+  let processedContent = content.replace(
+    "./" + manual.legal_header_img,
+    `${manual.manual_raw_legal_img}" class="info-legal-image`
+  );
+  
+  const patterns = [/\[([^\]]+)\]\((\.\/[^)]+)\.md\)/g, /\[([^\]]+)\]\((\.\/[^)]+\/[^)]+)\.md\)/g];
+
+  for (const pattern of patterns) {
+    processedContent = replaceMarkdownLinks(processedContent, pattern, baseUrl);
+  }
+
+  return processedContent;
+};
 
-function parseAcceptTermsLink(tempDiv: HTMLDivElement) {
-  const url = "https://library.threefold.me/info/legal#";
-  const linkElements = tempDiv.querySelectorAll("a");
-  linkElements.forEach(linkElement => {
-    const currentDomainMatch = linkElement.href.match(/^(https?:\/\/[^\\/]+)/);
-    if (
-      (currentDomainMatch && linkElement.href.includes("localhost")) ||
-      (currentDomainMatch && linkElement.href.includes("dashboard")) // To update only internal links
-    ) {
-      const currentDomain = currentDomainMatch[1];
-      linkElement.href = linkElement.href.replace(currentDomain, url);
-    }
-  });
-}
 watch(openAcceptTerms, async () => {
   if (openAcceptTerms.value) {
     try {
-      const url = "https://library.threefold.me/info/legal/";
-      const response = await fetch(url + "readme.md");
+      const response = await fetch(manual.manual_raw_legal);
       const mdContent = await response.text();
-      const parsedContent = marked.parse(mdContent);
-
-      const tempDiv = document.createElement("div");
-      tempDiv.innerHTML = parsedContent;
-
-      parseAcceptTermsImage(tempDiv, url);
-      parseAcceptTermsLink(tempDiv);
 
-      const updatedHtmlContent = tempDiv.innerHTML;
-      acceptTermsContent.value = updatedHtmlContent;
+      const processedContent = processMarkdownContent(mdContent, manual.manual_legal_base);
+      acceptTermsContent.value = marked.parse(processedContent);
     } catch (error) {
       console.error("Error fetching or parsing Markdown content:", error);
     } finally {