First results converting receiver-ui-react into a Blazor Web App

EnvelopeGenerator.ReceiverUIBlazor/wwwroot/app.css

@@ -1,51 +0,0 @@
-html, body {
-    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
-
-a, .btn-link {
-    color: #006bb7;
-}
-
-.btn-primary {
-    color: #fff;
-    background-color: #1b6ec2;
-    border-color: #1861ac;
-}
-
-.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
-  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
-}
-
-.content {
-    padding-top: 1.1rem;
-}
-
-h1:focus {
-    outline: none;
-}
-
-.valid.modified:not([type=checkbox]) {
-    outline: 1px solid #26b050;
-}
-
-.invalid {
-    outline: 1px solid #e50000;
-}
-
-.validation-message {
-    color: #e50000;
-}
-
-.blazor-error-boundary {
-    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
-    padding: 1rem 1rem 1rem 3.7rem;
-    color: white;
-}
-
-    .blazor-error-boundary::after {
-        content: "An error has occurred."
-    }
-
-.darker-border-checkbox.form-check-input {
-    border-color: #929292;
-}

EnvelopeGenerator.ReceiverUIBlazor/wwwroot/css/app.css

@@ -0,0 +1,183 @@
+body {
+    margin: 0;
+    font-family: "Segoe UI", Arial, sans-serif;
+    background: #0f172a;
+    color: #e2e8f0;
+}
+
+.main-layout {
+    min-height: 100vh;
+    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0b1220 100%);
+}
+
+.top-bar {
+    display: flex;
+    align-items: center;
+    padding: 12px 20px;
+    background: rgba(255, 255, 255, 0.04);
+    border-bottom: 1px solid rgba(226, 232, 240, 0.08);
+}
+
+.top-bar .brand {
+    font-weight: 700;
+    letter-spacing: 0.5px;
+}
+
+.content {
+    padding: 24px 32px;
+}
+
+h1 {
+    margin-top: 0;
+    margin-bottom: 8px;
+    letter-spacing: 0.3px;
+}
+
+.controls {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+    align-items: center;
+    margin-bottom: 12px;
+}
+
+.btn {
+    background: #22d3ee;
+    color: #0f172a;
+    border: none;
+    padding: 10px 14px;
+    border-radius: 8px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: transform 120ms ease, box-shadow 120ms ease;
+}
+
+.btn:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 8px 18px rgba(34, 211, 238, 0.25);
+}
+
+.btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+.btn.secondary {
+    background: rgba(226, 232, 240, 0.12);
+    color: #e2e8f0;
+    border: 1px solid rgba(226, 232, 240, 0.2);
+}
+
+.drop-hint {
+    padding: 24px;
+    border: 1px dashed rgba(226, 232, 240, 0.3);
+    border-radius: 12px;
+    text-align: center;
+    color: rgba(226, 232, 240, 0.8);
+}
+
+.document-shell {
+    position: relative;
+    margin-top: 12px;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
+    background: #0b1220;
+    border: 1px solid rgba(226, 232, 240, 0.08);
+}
+
+canvas {
+    display: block;
+    width: 100%;
+    height: auto;
+    background: #111827;
+}
+
+.overlay {
+    position: absolute;
+    border: 2px solid #22d3ee;
+    border-radius: 8px;
+    padding: 6px;
+    background: rgba(15, 23, 42, 0.9);
+    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
+    user-select: none;
+}
+
+.overlay.signature img {
+    display: block;
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.overlay-controls {
+    position: absolute;
+    top: -36px;
+    right: 0;
+    display: flex;
+    gap: 4px;
+}
+
+.overlay-btn {
+    background: #0f172a;
+    color: #22d3ee;
+    border: 1px solid rgba(34, 211, 238, 0.4);
+    border-radius: 6px;
+    padding: 4px 8px;
+    cursor: pointer;
+}
+
+.overlay-input {
+    border: none;
+    background: transparent;
+    color: #e2e8f0;
+    font-size: 18px;
+    padding: 4px;
+    min-width: 160px;
+    outline: none;
+}
+
+.paging {
+    margin-top: 12px;
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+
+.modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.65);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2000;
+}
+
+.modal {
+    background: #0f172a;
+    border: 1px solid rgba(226, 232, 240, 0.08);
+    border-radius: 12px;
+    padding: 16px;
+    min-width: 760px;
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
+}
+
+.modal-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-top: 10px;
+}
+
+.modal canvas {
+    background: #0b1220;
+    border: 1px solid rgba(226, 232, 240, 0.1);
+    border-radius: 8px;
+}
+
+.spacer {
+    flex: 1;
+}

EnvelopeGenerator.ReceiverUIBlazor/wwwroot/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Receiver UI (Blazor)</title>
+    <base href="/" />
+    <link rel="stylesheet" href="css/app.css" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.269/pdf.min.js" integrity="sha512-tAqK8Nw4WnAnX/d+Q/FI+jTYfCLMVSX39kT9rCec8NLwlY+jIUUQx7TKfQvHr2SgVXmvGZtxPRQSf0oYAI7gCA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.269/pdf.worker.min.js" integrity="sha512-xS2zAkrE3zGZFNE2hCpL25O9P+hxKpADcDxpfoSr8q/kBDL/6Ht8OZODBM96KghAe8/powBPh6UT7aY4AsF38g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://unpkg.com/pdf-lib/dist/pdf-lib.min.js"></script>
+    <script src="js/pdfInterop.js"></script>
+</head>
+<body>
+    <div id="app">Loading...</div>
+    <script src="_framework/blazor.webassembly.js"></script>
+</body>
+</html>

EnvelopeGenerator.ReceiverUIBlazor/wwwroot/js/pdfInterop.js

@@ -0,0 +1,211 @@
+(function () {
+    const state = {
+        pdfDoc: null,
+        pdfBytes: null,
+        lastViewport: null,
+    };
+
+    function base64ToUint8(base64) {
+        const binStr = atob(base64);
+        const len = binStr.length;
+        const bytes = new Uint8Array(len);
+        for (let i = 0; i < len; i++) {
+            bytes[i] = binStr.charCodeAt(i);
+        }
+        return bytes;
+    }
+
+    async function reloadFromBase64(base64) {
+        state.pdfBytes = base64ToUint8(base64);
+        state.pdfDoc = await pdfjsLib.getDocument({ data: state.pdfBytes }).promise;
+        return { pages: state.pdfDoc.numPages };
+    }
+
+    function dataUrlDownload(dataUrl, filename) {
+        const a = document.createElement('a');
+        a.href = dataUrl;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+    }
+
+    const pointerPads = new Map();
+
+    window.pdfInterop = {
+        ensureReady: () => {
+            if (pdfjsLib && pdfjsLib.GlobalWorkerOptions) {
+                // worker is already loaded via CDN include
+                return;
+            }
+        },
+        loadPdf: async (base64) => {
+            return await reloadFromBase64(base64);
+        },
+        renderPage: async (pageIndex, canvasId, targetWidth) => {
+            if (!state.pdfDoc) {
+                throw new Error('PDF not loaded');
+            }
+            const page = await state.pdfDoc.getPage(pageIndex + 1);
+            const rawViewport = page.getViewport({ scale: 1 });
+            const scale = targetWidth / rawViewport.width;
+            const viewport = page.getViewport({ scale });
+
+            const canvas = document.getElementById(canvasId);
+            if (!canvas) {
+                throw new Error('Canvas not found');
+            }
+            const ctx = canvas.getContext('2d');
+            canvas.width = viewport.width;
+            canvas.height = viewport.height;
+
+            await page.render({ canvasContext: ctx, viewport }).promise;
+
+            state.lastViewport = {
+                width: viewport.width,
+                height: viewport.height,
+                pageWidth: rawViewport.width,
+                pageHeight: rawViewport.height,
+            };
+
+            return state.lastViewport;
+        },
+        applySignature: async (payload) => {
+            const {
+                base64,
+                pageIndex,
+                left,
+                top,
+                width,
+                height,
+                renderWidth,
+                renderHeight,
+                dataUrl,
+                autoDate,
+            } = payload;
+
+            const pdfDoc = await PDFLib.PDFDocument.load(base64ToUint8(base64));
+            const page = pdfDoc.getPage(pageIndex);
+            const scaleX = page.getWidth() / renderWidth;
+            const scaleY = page.getHeight() / renderHeight;
+
+            const pngImage = await pdfDoc.embedPng(dataUrl);
+            const drawWidth = width * scaleX;
+            const drawHeight = height * scaleY;
+            const x = left * scaleX;
+            const y = page.getHeight() - (top + height) * scaleY;
+
+            page.drawImage(pngImage, {
+                x,
+                y,
+                width: drawWidth,
+                height: drawHeight,
+            });
+
+            if (autoDate) {
+                const text = `Signed ${new Date().toLocaleString()}`;
+                page.drawText(text, {
+                    x,
+                    y: y - 14 * scaleY,
+                    size: 14 * scaleX,
+                    color: PDFLib.rgb(0.07, 0.54, 0.26),
+                });
+            }
+
+            const updatedBase64 = await pdfDoc.saveAsBase64({ dataUri: false });
+            await reloadFromBase64(updatedBase64);
+            return updatedBase64;
+        },
+        applyText: async (payload) => {
+            const {
+                base64,
+                pageIndex,
+                left,
+                top,
+                width,
+                height,
+                renderWidth,
+                renderHeight,
+                text,
+                fontSize,
+            } = payload;
+
+            const pdfDoc = await PDFLib.PDFDocument.load(base64ToUint8(base64));
+            const page = pdfDoc.getPage(pageIndex);
+            const scaleX = page.getWidth() / renderWidth;
+            const scaleY = page.getHeight() / renderHeight;
+
+            const x = left * scaleX;
+            const y = page.getHeight() - (top + height) * scaleY;
+
+            page.drawText(text, {
+                x,
+                y,
+                size: fontSize * scaleX,
+                color: PDFLib.rgb(0.9, 0.9, 0.9),
+            });
+
+            const updatedBase64 = await pdfDoc.saveAsBase64({ dataUri: false });
+            await reloadFromBase64(updatedBase64);
+            return updatedBase64;
+        },
+        downloadPdf: (base64, filename) => {
+            dataUrlDownload(`data:application/pdf;base64,${base64}`, filename);
+        },
+        initSignaturePad: (canvasId) => {
+            const canvas = document.getElementById(canvasId);
+            if (!canvas) return;
+            const ctx = canvas.getContext('2d');
+            ctx.lineWidth = 2;
+            ctx.lineCap = 'round';
+            ctx.strokeStyle = '#22d3ee';
+
+            const padState = {
+                drawing: false,
+                lastX: 0,
+                lastY: 0,
+            };
+
+            function start(e) {
+                padState.drawing = true;
+                const rect = canvas.getBoundingClientRect();
+                padState.lastX = e.clientX - rect.left;
+                padState.lastY = e.clientY - rect.top;
+            }
+
+            function move(e) {
+                if (!padState.drawing) return;
+                const rect = canvas.getBoundingClientRect();
+                const x = e.clientX - rect.left;
+                const y = e.clientY - rect.top;
+                ctx.beginPath();
+                ctx.moveTo(padState.lastX, padState.lastY);
+                ctx.lineTo(x, y);
+                ctx.stroke();
+                padState.lastX = x;
+                padState.lastY = y;
+            }
+
+            function end() {
+                padState.drawing = false;
+            }
+
+            canvas.onpointerdown = start;
+            canvas.onpointermove = move;
+            canvas.onpointerup = end;
+            canvas.onpointerleave = end;
+
+            pointerPads.set(canvasId, { ctx, canvas });
+        },
+        clearSignaturePad: (canvasId) => {
+            const pad = pointerPads.get(canvasId);
+            if (!pad) return;
+            pad.ctx.clearRect(0, 0, pad.canvas.width, pad.canvas.height);
+        },
+        getSignatureDataUrl: (canvasId) => {
+            const pad = pointerPads.get(canvasId);
+            if (!pad) return null;
+            return pad.canvas.toDataURL('image/png');
+        }
+    };
+})();