feat: add Finterion auth login embedding to backtest report

MDUYN · MDUYN · commit 0da471505a2e · 2026-04-24T10:58:19.000+01:00
diff --git a/investing_algorithm_framework/app/reporting/templates/dashboard.css b/investing_algorithm_framework/app/reporting/templates/dashboard.css
@@ -262,6 +262,10 @@ body { font-family:'Inter',-apple-system,sans-serif; background:var(--bg); color
 .fin-hero-sub { font-size:0.88rem; color:var(--text-secondary); line-height:1.7; max-width:560px; margin:0 auto; }
 .finterion-cta { display:inline-block; margin-top:1.25rem; padding:0.65rem 1.75rem; background:var(--accent); color:#000; font-weight:600; font-size:0.82rem; border-radius:8px; text-decoration:none; transition:opacity 0.15s; }
 .finterion-cta:hover { opacity:0.85; }
+.finterion-connect-btn { display:inline-block; margin-top:0.5rem; padding:0.55rem 1.5rem; background:transparent; color:var(--accent); font-weight:600; font-size:0.82rem; border-radius:8px; border:2px solid var(--accent); cursor:pointer; transition:all 0.15s; font-family:'Inter',sans-serif; }
+.finterion-connect-btn:hover { background:var(--accent); color:#000; }
+.fin-user-info { display:inline-flex; align-items:center; gap:0.5rem; margin-top:1rem; padding:0.5rem 1rem; background:var(--surface2); border:1px solid var(--border); border-radius:8px; font-size:0.8rem; color:var(--text-secondary); }
+.fin-user-dot { width:8px; height:8px; border-radius:50%; background:#22c55e; flex-shrink:0; }
 
 /* feature cards */
 .fin-features { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; margin-bottom:0.5rem; }
diff --git a/investing_algorithm_framework/app/reporting/templates/dashboard_template.html.j2 b/investing_algorithm_framework/app/reporting/templates/dashboard_template.html.j2
@@ -7,6 +7,7 @@
 <style>
 {{ css }}
 </style>
+<script src="https://finterion.com/sdk/finterion-auth.js"></script>
 </head>
 <body>
 
@@ -479,6 +480,13 @@
     </p>
     <a class="finterion-cta" href="https://finterion.com" target="_blank"
        rel="noopener noreferrer">Get Started &rarr;</a>
+    <div style="margin-top:1.25rem">
+      <button id="connect-btn" class="finterion-connect-btn">Connect to Finterion</button>
+    </div>
+    <div id="finterion-user-info" class="fin-user-info" style="display:none">
+      <span class="fin-user-dot"></span>
+      Connected as <strong id="finterion-username"></strong>
+    </div>
   </div>
 
   {# Features #}
@@ -559,6 +567,29 @@ const RUN_LABELS = {{ run_labels | tojson }};
 const BENCHMARKS = {{ benchmarks | tojson }};
 // ===== STATIC JS =====
 {{ js }}
+
+// ===== FINTERION AUTH =====
+(function() {
+  if (typeof FinterionAuth === 'undefined') return;
+  var auth = new FinterionAuth();
+  var btn = document.getElementById('connect-btn');
+  if (!btn) return;
+  btn.addEventListener('click', function() {
+    auth.login()
+      .then(function(user) {
+        var info = document.getElementById('finterion-user-info');
+        var name = document.getElementById('finterion-username');
+        if (info && name) {
+          name.textContent = user.username;
+          info.style.display = 'inline-flex';
+        }
+        btn.style.display = 'none';
+      })
+      .catch(function(err) {
+        console.log('Auth flow cancelled');
+      });
+  });
+})();
 </script>
 
 <button class="compare-btn" id="compare-btn"
