EnvelopeGenerator/EnvelopeGenerator.Web/Views/Home/ShowEnvelope.cshtml

@{
    var nonce = _accessor.HttpContext?.Items["csp-nonce"] as string;
}
@using DigitalData.Core.DTO;
@using EnvelopeGenerator.Application.DTOs;
@using Newtonsoft.Json
@using Newtonsoft.Json.Serialization
@model EnvelopeReceiverDto;
@{
    ViewData["Title"] = _localizer[WebKey.SignDoc];
}
<partial name="_CookieConsentPartial" />
@{
    var userCulture = ViewData["UserCulture"] as Culture;
    var envelope = Model.Envelope;
    var document = Model.Envelope?.Documents?.FirstOrDefault();
    var sender = Model.Envelope?.User;
    var pages = document?.Elements?.Select(e => e.Page) ?? Array.Empty<int>();
    var stPageIndexes = string.Join(pages.Count() > 1 ? ", " : "", pages.Take(pages.Count() - 1))
                  + (pages.Count() > 1 ? $" {_localizer[WebKey.and].TrySanitize(_sanitizer)} " : "") + pages.LastOrDefault();
}
<div class="d-flex flex-column min-vh-100">
    <nav class="navbar navbar-light bg-light">
        <div class="container">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="material-symbols-outlined">
                    more_vert
                </span>
            </button>
            <div class="envelope-message">
                <span class="icon material-symbols-outlined">history_edu</span>
                <span class="message navbar-brand">@($"{_localizer[WebKey.Hello]} {Model.Name}, {@envelope?.Message}".TrySanitize(_sanitizer))</span>
            </div>
            <div class="logo">
                <img src="~/img/digital_data.svg" alt="...">
            </div>
        </div>
    </nav>
    <div class="collapse show bg-light " id="navbarToggleExternalContent" data-bs-theme="light">
        <div class="card sender-card p-1 mb-3">
            <div class="row g-0">
                <div class="col p-0 m-0">
                    <div class="card-body p-0 m-0 ms-4">
                        <h5 class="card-title p-0 m-0">
                            <span class="signature-process-title">@($"{_localizer[WebKey.SigningProcessTitle]}: ".TrySanitize(_sanitizer))</span>
                            <span class="signature-process-name">@($"{envelope?.Title}".TrySanitize(_sanitizer))</span>
                        </h5>
                        <p class="card-text p-0 m-0">@Html.Raw(string.Format(_localizer[WebKey.EnvelopeInfo1], pages.Count(), stPageIndexes).TrySanitize(_hlSanitizer))</p>
                        <p class="card-text p-0 m-0">
                            <small class="text-body-secondary">
                                @Html.Raw(string.Format(_localizer[WebKey.EnvelopeInfo2],   /* sanitize separately but don't sanitize the URI */
                                    envelope?.AddedWhen.ToString(userCulture?.Info?.DateTimeFormat).TrySanitize(_sanitizer),
                                    $"{sender?.Prename} {sender?.Name}".TrySanitize(_sanitizer),
                                    sender?.Email.TrySanitize(_sanitizer),
                                    envelope?.Title.TrySanitize(_sanitizer),
                                    sender?.Prename.TrySanitize(_sanitizer),
                                    sender?.Name.TrySanitize(_sanitizer),
                                    sender?.Email.TrySanitize(_sanitizer)))
                            </small>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="flex-action-panel" class="btn-group btn_group position-fixed bottom-0 end-0 d-flex align-items-center" role="group" aria-label="Basic mixed styles example">
        <button class="btn_complete btn btn-primary" type="button">
            <svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 16">
                <path d="m10.036 8.278 9.258-7.79A1.979 1.979 0 0 0 18 0H2A1.987 1.987 0 0 0 .641.541l9.395 7.737Z" />
                <path d="M11.241 9.817c-.36.275-.801.425-1.255.427-.428 0-.845-.138-1.187-.395L0 2.6V14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.5l-8.759 7.317Z" />
            </svg>
            <span>@_localizer[WebKey.Complete]</span>
        </button>
        <button class="btn_reject btn btn-danger" type="button">
            <svg width="25px" height="25px" viewBox="43.5 43.5 512 512" version="1.1" fill="currentColor" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <path class="st0" d="M263.24,43.5c-117.36,0-212.5,95.14-212.5,212.5s95.14,212.5,212.5,212.5s212.5-95.14,212.5-212.5    S380.6,43.5,263.24,43.5z M367.83,298.36c17.18,17.18,17.18,45.04,0,62.23v0c-17.18,17.18-45.04,17.18-62.23,0l-42.36-42.36    l-42.36,42.36c-17.18,17.18-45.04,17.18-62.23,0v0c-17.18-17.18-17.18-45.04,0-62.23L201.01,256l-42.36-42.36    c-17.18-17.18-17.18-45.04,0-62.23v0c17.18-17.18,45.04-17.18,62.23,0l42.36,42.36l42.36-42.36c17.18-17.18,45.04-17.18,62.23,0v0    c17.18,17.18,17.18,45.04,0,62.23L325.46,256L367.83,298.36z"/>
            </svg>
            <span>@_localizer[WebKey.Reject]</span>
        </button>
        <button class="btn_refresh btn btn-secondary" type="button">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z" />
                <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z" />
            </svg>
        </button>
    </div>
    <div id='app' class="flex-grow-1"></div>
</div>
<script nonce="@nonce">
    const collapseNav = () => {
        document.addEventListener('click', function (event) {
            var navbarToggle = document.getElementById('navbarToggleExternalContent');
            var navbarButton = document.querySelector('[data-bs-target="#navbarToggleExternalContent"]');
            var isCollapsed = new bootstrap.Collapse(navbarToggle)._isTransitioning;

            if (!navbarToggle.contains(event.target) && !navbarButton.contains(event.target) && !isCollapsed) {
                new bootstrap.Collapse(navbarToggle).hide();
            }
        });
    }
@if (ViewData["DocumentBytes"] is byte[] documentBytes)
{
    var settings = new JsonSerializerSettings
    {
        ContractResolver = new CamelCasePropertyNamesContractResolver()
    };
    var envelopeReceiverJson = JsonConvert.SerializeObject(Model, settings);
    var documentBase64String = Convert.ToBase64String(documentBytes);
    var envelopeKey = ViewData["EnvelopeKey"] as string;

    @:document.addEventListener("DOMContentLoaded", async () => await new App("@envelopeKey.TrySanitize(_sanitizer)", @Html.Raw(envelopeReceiverJson.TrySanitize(_sanitizer)), B64ToBuff("@Html.Raw(documentBase64String.TrySanitize(_sanitizer))"), "@ViewData["PSPDFKitLicenseKey"]", "@userCulture?.Info?.TwoLetterISOLanguageName").init())
}
</script>