Microfrontend Integration

frontend/header/css/header.css

@@ -1,8 +1,16 @@
 body {
+    display: flex;
+    flex-direction: column;
     font-family: system-ui;
+    height: 100dvh;
     margin: 0;
 }
 
+.content {
+    border: 0;
+    flex: 1;
+}
+
 .header {
     background-color: #202020;
     box-sizing: border-box;

frontend/header/header.html

@@ -13,6 +13,7 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
+        <script src="/legacy-integration.js" type="module"></script>
         <script src="news-ticker.js" type="module"></script>
 
         <title>Instant Workstation</title>
@@ -35,8 +36,10 @@
                     <span class="news-ticker-content" id="news-ticker-content"></span>
                 </span>
 
-                <a class="nav-link nav-link-account" href="/account">Account</a>
+                <a class="nav-link nav-link-account" href="/app/profile" target="content">Account</a>
             </nav>
         </header>
+
+        <iframe class="content" name="content" src="/app/"></iframe>
     </body>
 </html>

frontend/header/legacy-integration.js

@@ -0,0 +1,6 @@
+const payment = new URLSearchParams(window.location.search).get("payment");
+
+if (payment === "success" || payment === "failure") {
+    document.querySelector(".content").src =
+        `/app/virtual-machines?payment=${payment}`;
+}