keyvault/debug-vault-status.html at main · ProdigyRahul/keyvault · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html>
<head>
  <title>Vault Status Diagnostic</title>
  <style>
    body {
      font-family: system-ui, -apple-system, sans-serif;
      max-width: 800px;
      margin: 40px auto;
      padding: 20px;
      background: #f5f5f5;
    }
    .container {
      background: white;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    h1 { color: #333; margin-top: 0; }
    .status { padding: 15px; margin: 10px 0; border-radius: 4px; }
    .success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
    .error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
    .info { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
    .key {
      font-family: monospace;
      background: #f8f9fa;
      padding: 2px 6px;
      border-radius: 3px;
      font-size: 13px;
    }
    button {
      background: #007bff;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      margin: 5px;
    }
    button:hover { background: #0056b3; }
    .code {
      background: #f8f9fa;
      padding: 15px;
      border-radius: 4px;
      font-family: monospace;
      font-size: 13px;
      overflow-x: auto;
      margin: 10px 0;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>🔍 Vault Status Diagnostic</h1>
    <p>This diagnostic tool checks your vault and sessionStorage status.</p>

    <button onclick="checkStatus()">Check Vault Status</button>
    <button onclick="clearAll()">Clear All Sessions (Force Re-unlock)</button>

    <div id="results"></div>
  </div>

  <script>
    function checkStatus() {
      const results = document.getElementById('results');
      let html = '<h2>Diagnostic Results:</h2>';

      // Check vault session
      const vaultSession = sessionStorage.getItem('keyvault-session');
      const vaultKey = sessionStorage.getItem('keyvault-vault-key');

      if (vaultSession) {
        try {
          const parsed = JSON.parse(vaultSession);
          html += `<div class="status ${parsed.isUnlocked ? 'success' : 'error'}">
            <strong>Vault Session:</strong> ${parsed.isUnlocked ? '✅ Unlocked' : '❌ Locked'}<br>
            <span class="key">keyvault-session</span> exists<br>
            Last activity: ${new Date(parsed.lastActivityAt).toLocaleString()}
          </div>`;
        } catch (e) {
          html += `<div class="status error">
            <strong>Vault Session:</strong> ❌ Corrupted<br>
            <span class="key">keyvault-session</span> exists but can't be parsed
          </div>`;
        }
      } else {
        html += `<div class="status error">
          <strong>Vault Session:</strong> ❌ Not Found<br>
          <span class="key">keyvault-session</span> missing from sessionStorage
        </div>`;
      }

      // Check vault key
      if (vaultKey) {
        html += `<div class="status success">
          <strong>Vault Key:</strong> ✅ Present<br>
          <span class="key">keyvault-vault-key</span> exists (${vaultKey.length} chars)
        </div>`;
      } else {
        html += `<div class="status error">
          <strong>Vault Key:</strong> ❌ Missing<br>
          <span class="key">keyvault-vault-key</span> not in sessionStorage
        </div>`;
      }

      // Check all keyvault- prefixed keys
      const allKeys = Object.keys(sessionStorage).filter(k => k.startsWith('keyvault-'));
      html += `<div class="status info">
        <strong>All Vault Keys in SessionStorage:</strong><br>
        ${allKeys.length === 0 ? 'None found' : allKeys.map(k => `<span class="key">${k}</span>`).join(', ')}
      </div>`;

      // Diagnosis
      html += '<h3>Diagnosis:</h3>';
      if (!vaultSession || !vaultKey) {
        html += `<div class="status error">
          <strong>❌ Vault is NOT properly unlocked</strong><br><br>
          <strong>Why you're seeing "Project vault key not available":</strong><br>
          Your encryption keys are missing from sessionStorage. This happens when:<br>
          • You refreshed the page after database reset<br>
          • Browser tab was closed and reopened<br>
          • SessionStorage was manually cleared<br><br>
          <strong>Solution:</strong><br>
          1. You should be automatically redirected to <code>/unlock</code><br>
          2. If not, navigate to: <div class="code">http://localhost:3000/unlock</div>
          3. Enter your master password to unlock vault<br>
          4. Try adding the member again
        </div>`;
      } else {
        html += `<div class="status success">
          <strong>✅ Vault is properly unlocked</strong><br><br>
          If you're still seeing errors, the issue might be:<br>
          • UserProjectKey record missing from database (unlikely if you're the project creator)<br>
          • API endpoint failing<br>
          • Check browser console for specific errors
        </div>`;
      }

      results.innerHTML = html;
    }

    function clearAll() {
      const keys = Object.keys(sessionStorage).filter(k => k.startsWith('keyvault-'));
      keys.forEach(k => sessionStorage.removeItem(k));
      alert(`Cleared ${keys.length} vault-related keys. You'll need to unlock your vault again.`);
      checkStatus();
    }

    // Auto-check on load
    checkStatus();
  </script>
</body>
</html>