Add document validation logic

src/pages/account/document-validation.ts

@@ -0,0 +1,165 @@
+function randomHex32(): string {
+  return Array.from(crypto.getRandomValues(new Uint8Array(32)))
+    .map(b => b.toString(16).padStart(2, '0'))
+    .join('');
+}
+
+export function getDocumentValidation(container: HTMLElement) {
+  container.innerHTML = ''; // clear previous content
+  container.style.display = 'block';
+
+  const state = {
+    documentFile: null as File | null,
+    certificateFile: null as File | null
+  };
+
+  const wrapper = document.createElement('div');
+  wrapper.style.cssText = 'padding: 2rem; display: flex; flex-direction: column; gap: 2rem; align-items: center;';
+
+  const header = document.createElement('h2');
+  header.textContent = 'Document Validation';
+  header.style.cssText = 'font-size: 1.5rem; font-weight: bold;';
+  wrapper.appendChild(header);
+
+  const boxesContainer = document.createElement('div');
+  boxesContainer.style.cssText = 'display: flex; gap: 2rem;';
+
+  const createDropBox = (label: string, onDrop: (file: File) => void) => {
+    const box = document.createElement('div');
+    box.style.cssText = `
+      width: 250px; height: 150px;
+      border: 2px dashed #888;
+      border-radius: 0.5rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      padding: 1rem;
+      cursor: pointer;
+      background: #fafafa;
+    `;
+    box.textContent = `Drop ${label} PDF here`;
+    box.ondragover = e => { e.preventDefault(); box.style.background = '#eee'; };
+    box.ondragleave = () => { box.style.background = '#fafafa'; };
+    box.ondrop = e => {
+      e.preventDefault();
+      const file = e.dataTransfer?.files?.[0];
+      if (file && file.type === 'application/pdf') {
+        onDrop(file);
+        box.textContent = `${label} uploaded: ${file.name}`;
+        box.style.borderColor = 'green';
+        box.style.background = '#e6ffed';
+      } else {
+        alert('Please drop a valid PDF file.');
+      }
+    };
+    return box;
+  };
+
+  const docBox = createDropBox('Document', file => {
+    state.documentFile = file;
+    checkSuccess();
+  });
+
+  const certBox = createDropBox('Certificate', file => {
+    state.certificateFile = file;
+    checkSuccess();
+  });
+
+  boxesContainer.appendChild(docBox);
+  boxesContainer.appendChild(certBox);
+  wrapper.appendChild(boxesContainer);
+
+  container.appendChild(wrapper);
+
+  function checkSuccess() {
+    if (state.documentFile && state.certificateFile) {
+      showSuccessScreen();
+    }
+  }
+
+  function showSuccessScreen() {
+    container.innerHTML = '';
+
+    const successWrapper = document.createElement('div');
+    successWrapper.style.cssText = `
+        padding: 4rem;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 1.5rem;
+    `;
+
+    const checkmark = document.createElement('div');
+    checkmark.textContent = '✅';
+    checkmark.style.cssText = 'font-size: 4rem;';
+    successWrapper.appendChild(checkmark);
+
+    const successMsg = document.createElement('div');
+    successMsg.textContent = 'Document Verified Successfully!';
+    successMsg.style.cssText = 'font-size: 1.25rem; font-weight: bold; color: green;';
+    successWrapper.appendChild(successMsg);
+
+    // === Display file names ===
+    const docLabel = document.createElement('div');
+    docLabel.textContent = `Document: ${state.documentFile!.name}`;
+    successWrapper.appendChild(docLabel);
+
+    const certLabel = document.createElement('div');
+    certLabel.textContent = `Certificate: ${state.certificateFile!.name}`;
+    successWrapper.appendChild(certLabel);
+
+    // === Mocked verification data ===
+    const documentHash = randomHex32();
+    const fieldName = "owner_name"; // mocked field
+    const transactionId = randomHex32();
+
+    const dataBlock = (label: string, value: string) => {
+        const block = document.createElement('div');
+        block.style.cssText = 'text-align: left; width: 100%; max-width: 600px;';
+
+        const title = document.createElement('div');
+        title.textContent = label;
+        title.style.cssText = 'font-weight: bold; margin-top: 1rem;';
+
+        const code = document.createElement('code');
+        code.textContent = value;
+        code.style.cssText = `
+        display: block;
+        background: #f0f0f0;
+        padding: 0.5rem;
+        border-radius: 0.375rem;
+        font-family: monospace;
+        word-break: break-all;
+        `;
+
+        block.appendChild(title);
+        block.appendChild(code);
+        return block;
+    };
+
+    successWrapper.appendChild(dataBlock('Document Hash', documentHash));
+    successWrapper.appendChild(dataBlock('Field Name', fieldName));
+    successWrapper.appendChild(dataBlock('Transaction ID', transactionId));
+
+    // === Restart button ===
+    const restartBtn = document.createElement('button');
+    restartBtn.textContent = 'Verify Another';
+    restartBtn.style.cssText = `
+        margin-top: 2rem;
+        padding: 0.5rem 1.5rem;
+        font-size: 1rem;
+        background: #4f46e5;
+        color: white;
+        border: none;
+        border-radius: 0.375rem;
+        cursor: pointer;
+    `;
+    restartBtn.onclick = () => getDocumentValidation(container);
+    successWrapper.appendChild(restartBtn);
+
+    container.appendChild(successWrapper);
+    }
+}