fix: code review fixes

views/index.html

@@ -80,6 +80,25 @@ https://cdn.jsdelivr.net/npm/tailwindcss@4.1.11/dist/lib.min.js
             Export
           </button>
         </div>
+        <!-- Import XML -->
+        <div
+          class="bg-white rounded-lg shadow-md p-6 flex flex-col items-center mt-8"
+        >
+          <div class="text-xs text-gray-500 mb-2">Import XML</div>
+          <input
+            type="file"
+            id="import-xml-input"
+            accept=".xml,text/xml,application/xml"
+            class="mb-2 text-xs"
+          />
+          <button
+            id="import-xml-btn"
+            class="bg-green-400 text-white font-semibold px-8 py-2 rounded"
+          >
+            Import
+          </button>
+          <div id="import-status" class="text-xs mt-2"></div>
+        </div>
         <!-- Map -->
         <div
           class="row-span-2 bg-white rounded-lg shadow-md p-2 flex items-center justify-center"
@@ -155,6 +174,88 @@ https://cdn.jsdelivr.net/npm/tailwindcss@4.1.11/dist/lib.min.js
         </div>
       </div>
     </div>
+
+    <!-- 2FA Modal -->
+    <div
+      id="2fa-modal"
+      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"
+    >
+      <div class="bg-white rounded-lg p-8 max-w-md w-full mx-4">
+        <h2 class="text-2xl font-bold mb-4 text-center">
+          Two-Factor Authentication
+        </h2>
+
+        <div id="2fa-setup" class="hidden">
+          <p class="text-gray-600 mb-4 text-center">
+            Scan this QR code with your authenticator app:
+          </p>
+          <div id="qr-code" class="flex justify-center mb-4"></div>
+          <div class="flex gap-2 mb-4">
+            <button
+              id="download-qr"
+              class="flex-1 bg-purple-500 text-white py-2 px-4 rounded hover:bg-purple-600 text-sm"
+            >
+              Download QR
+            </button>
+            <button
+              id="copy-secret"
+              class="flex-1 bg-gray-500 text-white py-2 px-4 rounded hover:bg-gray-600 text-sm"
+            >
+              Copy Secret
+            </button>
+          </div>
+          <p class="text-xs text-gray-500 mb-4 text-center">
+            Or manually enter this secret:
+            <span
+              id="secret-key"
+              class="font-mono bg-gray-100 px-2 py-1 rounded"
+            ></span>
+          </p>
+          <button
+            id="generate-2fa"
+            class="w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 mb-4"
+          >
+            Generate New Secret
+          </button>
+          <button
+            id="proceed-to-verify"
+            class="w-full bg-green-500 text-white py-2 px-4 rounded hover:bg-green-600"
+          >
+            I've Added the Code, Verify Now
+          </button>
+        </div>
+
+        <div id="2fa-verify" class="hidden">
+          <p class="text-gray-600 mb-4 text-center">
+            Enter the 6-digit code from your authenticator app:
+          </p>
+          <input
+            type="text"
+            id="2fa-token"
+            placeholder="000000"
+            maxlength="6"
+            class="w-full text-center text-2xl font-mono border border-gray-300 rounded px-4 py-2 mb-4 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+          <button
+            id="verify-2fa"
+            class="w-full bg-green-500 text-white py-2 px-4 rounded hover:bg-green-600 mb-2"
+          >
+            Verify
+          </button>
+          <button
+            id="back-to-setup"
+            class="w-full bg-gray-500 text-white py-2 px-4 rounded hover:bg-gray-600"
+          >
+            Back to Setup
+          </button>
+        </div>
+
+        <div id="2fa-loading" class="text-center">
+          <p class="text-gray-600 mb-4">Loading 2FA...</p>
+        </div>
+      </div>
+    </div>
+
     <script src="/main.js"></script>
   </body>
 </html>