From 6f74f38304bd666ff2f4ef9b9d5979b226e1e5ba Mon Sep 17 00:00:00 2001
From: Nguyen Ngo <ngodanguyen@gmail.com>
Date: Sun, 31 May 2026 23:01:58 -0400
Subject: [PATCH] 05/31 Fix template

---
 app/routes/teller.py            |  9 ++++++--
 app/templates/teller/index.html | 38 ++++++++++++++++++++++++---------
 2 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/app/routes/teller.py b/app/routes/teller.py
index efa84ee..14a7408 100644
--- a/app/routes/teller.py
+++ b/app/routes/teller.py
@@ -138,7 +138,12 @@ def map_accounts(enrollment_id):
 @login_required
 def index():
     enrollments = TellerEnrollment.query.filter_by(is_active=True).all()
-    return render_template('teller/index.html', enrollments=enrollments)
+    return render_template('teller/index.html',
+                           enrollments=enrollments,
+                           teller_app_id=current_app.config.get('TELLER_APP_ID', ''),
+                           teller_env=current_app.config.get('TELLER_ENV', 'development'),
+                           teller_cert_path=current_app.config.get('TELLER_CERT_PATH', ''),
+                           teller_key_path=current_app.config.get('TELLER_KEY_PATH', ''))
 
 
 # ── Sync: preview then confirm ────────────────────────────────────────────────
@@ -334,4 +339,4 @@ def webhook():
             # Just log — user syncs manually via UI preview flow
             log.info(f'[teller] new transactions available for enrollment {enrollment_id}')
 
-    return jsonify({'status': 'received'}), 200
\ No newline at end of file
+    return jsonify({'status': 'received'}), 200
diff --git a/app/templates/teller/index.html b/app/templates/teller/index.html
index 0cc08e1..9121e51 100644
--- a/app/templates/teller/index.html
+++ b/app/templates/teller/index.html
@@ -3,7 +3,8 @@
 {% block page_title %}Bank Connections{% endblock %}
 
 {% block topbar_actions %}
-<button id="tellerConnectBtn" class="btn btn-sm btn-primary" style="font-size:12px;">
+<button id="tellerConnectBtn" class="btn btn-sm btn-primary" style="font-size:12px;"
+    {% if not teller_app_id %}title="TELLER_APP_ID not set in .env" style="opacity:.6;"{% endif %}>
     <i class="bi bi-bank me-1"></i>Connect a Bank
 </button>
 {% endblock %}
@@ -96,14 +97,26 @@
 </div>
 {% endif %}
 
-<!-- Setup instructions -->
+<!-- Setup status -->
 <div class="pcard mt-2" style="background:#f8fafc;">
-    <div class="pcard-title mb-2">Setup Requirements</div>
-    <div style="font-size:13px;color:var(--muted);line-height:1.8;">
-        <div><i class="bi bi-check-circle-fill text-success me-2"></i>Teller App ID set in <code>.env</code></div>
-        <div><i class="bi bi-check-circle-fill text-success me-2"></i>Client certificate at <code>{{ config.TELLER_CERT_PATH }}</code></div>
-        <div><i class="bi bi-check-circle-fill text-success me-2"></i>Private key at <code>{{ config.TELLER_KEY_PATH }}</code></div>
-        <div><i class="bi bi-info-circle text-muted me-2"></i>Environment: <strong>{{ config.TELLER_ENV }}</strong></div>
+    <div class="pcard-title mb-2">Setup Status</div>
+    <div style="font-size:13px;line-height:1.9;">
+        <div>
+            <i class="bi bi-{% if teller_app_id %}check-circle-fill text-success{% else %}x-circle-fill text-danger{% endif %} me-2"></i>
+            Teller App ID: {% if teller_app_id %}<code>{{ teller_app_id[:8] }}…</code>{% else %}<span class="text-danger">Not set — add TELLER_APP_ID to .env</span>{% endif %}
+        </div>
+        <div>
+            <i class="bi bi-{% if teller_cert_path %}check-circle-fill text-success{% else %}x-circle-fill text-danger{% endif %} me-2"></i>
+            Certificate: <code>{{ teller_cert_path or 'Not set' }}</code>
+        </div>
+        <div>
+            <i class="bi bi-{% if teller_key_path %}check-circle-fill text-success{% else %}x-circle-fill text-danger{% endif %} me-2"></i>
+            Private Key: <code>{{ teller_key_path or 'Not set' }}</code>
+        </div>
+        <div>
+            <i class="bi bi-info-circle text-muted me-2"></i>
+            Environment: <strong>{{ teller_env }}</strong>
+        </div>
     </div>
 </div>
 {% endblock %}
@@ -116,9 +129,14 @@ const CSRF = '{{ csrf_token() }}';
 function initTellerConnect(btn) {
     if (!btn) return;
     btn.addEventListener('click', function() {
+        const appId = '{{ teller_app_id }}';
+        if (!appId) {
+            alert('TELLER_APP_ID is not set in .env\nAdd it and restart the app.');
+            return;
+        }
         const teller = TellerConnect.setup({
-            applicationId: '{{ config.TELLER_APP_ID }}',
-            environment:   '{{ config.TELLER_ENV }}',
+            applicationId: '{{ teller_app_id }}',
+            environment:   '{{ teller_env }}',
             products:      ['transactions'],
             onSuccess: function(enrollment) {
                 btn.disabled = true;