Revise paste 0482022a8fe46

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PIN Control - Enfuce</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 1200px;
        margin: 50px auto;
        padding: 20px;
        background-color: #f5f5f5;
      }
      .container {
        background-color: white;
        padding: 30px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      h1 {
        color: #333;
        margin-bottom: 20px;
      }
      h2 {
        color: #555;
        margin-top: 30px;
        margin-bottom: 15px;
      }
      .form-group {
        margin-bottom: 20px;
      }
      label {
        display: block;
        margin-bottom: 8px;
        font-weight: bold;
        color: #555;
      }
      input[type="text"],
      select,
      textarea {
        width: 100%;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-sizing: border-box;
        font-size: 14px;
      }
      textarea {
        min-height: 100px;
        font-family: monospace;
      }
      select {
        cursor: pointer;
      }
      button {
        background-color: #007bff;
        color: white;
        padding: 12px 24px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
        margin-right: 10px;
      }
      button:hover {
        background-color: #0056b3;
      }
      button:disabled {
        background-color: #ccc;
        cursor: not-allowed;
      }
      .btn-secondary {
        background-color: #6c757d;
      }
      .btn-secondary:hover {
        background-color: #545b62;
      }
      .info {
        background-color: #e7f3ff;
        padding: 15px;
        border-left: 4px solid #007bff;
        margin-bottom: 20px;
        border-radius: 4px;
      }
      .error {
        background-color: #ffe7e7;
        padding: 15px;
        border-left: 4px solid #dc3545;
        margin-bottom: 20px;
        border-radius: 4px;
        display: none;
      }
      .success {
        background-color: #e7ffe7;
        padding: 15px;
        border-left: 4px solid #28a745;
        margin-bottom: 20px;
        border-radius: 4px;
        display: none;
      }
      #iframe-container {
        margin-top: 30px;
        display: none;
      }
      iframe {
        width: 100%;
        height: 600px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background-color: white;
      }
      #debug-console {
        background-color: #1e1e1e;
        color: #d4d4d4;
        padding: 15px;
        border-radius: 4px;
        font-family: "Courier New", monospace;
        font-size: 12px;
        max-height: 400px;
        overflow-y: auto;
        margin-top: 20px;
      }
      .debug-entry {
        margin-bottom: 8px;
        padding: 5px;
        border-left: 3px solid transparent;
      }
      .debug-info {
        border-left-color: #007bff;
        color: #9cdcfe;
      }
      .debug-success {
        border-left-color: #28a745;
        color: #4ec9b0;
      }
      .debug-error {
        border-left-color: #dc3545;
        color: #f48771;
      }
      .debug-warning {
        border-left-color: #ffc107;
        color: #dcdcaa;
      }
      .timestamp {
        color: #858585;
        font-size: 11px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>PIN Control (Desktop Browser Flow)</h1>

<div class="info">
        <strong>Desktop Flow:</strong> Load iframe with key parameter, then send
        postMessage with operation ('view-pin' or 'set-pin') and token.
        <br /><br />
        <strong>API Endpoint:</strong> POST /v4/card/{cardId}/pinControlToken
      </div>

<form id="pin-control-form">
        <div class="form-group">
          <label for="operation">Operation:</label>
          <select id="operation" name="operation" required>
            <option value="view-pin">View PIN</option>
            <option value="set-pin">Set PIN</option>
          </select>
        </div>

<div class="form-group">
          <label for="token">Token:</label>
          <textarea
            id="token"
            name="token"
            placeholder="Paste your token here..."
            required
          >

PIN Control Frame URL:

Key:

Debug Console

PIN Control Interface