Merge branch 'master' of http://git.dd:3000/AppStd/EnvelopeGenerator

- Befehl zum Erhöhen der Anzahl von Signaturen unter der createAnnotationFrameBlob-Methode in annotation.js hinzugefügt

- Vorzeichenbehafteter Befehl zum Nullsetzen der Zählung unter RESET-case der handleClick-Methode in app.js hinzugefügt

EnvelopeGenerator.Web/Views/Home/EnvelopeLocked.cshtml

@@ -23,45 +23,46 @@
     <section class="text-center">
         <p>@_localizer[WebKey.LockedBody]</p>
     </section>
-    <div class="row m-0 p-0 justify-content-center">
-        <div class="col-8 pe-0">
-            <form id="form-access-code" class="form" method="post">
-                <div class="input">
-                    <label class="visually-hidden" for="access_code">@_localizer[WebKey.LockedTitle]</label>
+    <div class="row m-0 p-0">
+        <div class="access-code-panel justify-content-center align-items-center p-0 m-0">
+            <form id="form-access-code" class="form form-floating mb-0" method="post"> 
+                <div class="form-floating access-code-form-floating">
                     <input type="password" id="access_code" class="form-control" name="access_code" placeholder="@_localizer[WebKey.LockedAccessCode]" required="required">
-                        <div id="access-code-error-message" class="text-danger" style="height: 20px;">
-                        @if (ViewData["ErrorMessage"] is string errMsg)
-                        {
-                            @_sanitizer.Sanitize(errMsg)
-                        }
-                        </div>
+                    <label for="access_code">@_localizer[WebKey.LockedAccessCode]</label>
+                    <button type="submit" class="btn btn-outline-primary">
+                        <span class="material-symbols-outlined">
+                            login
+                        </span>
+                    </button>
                 </div>
-                <div class="button">
-                    <button type="submit" class="btn btn-primary">@_localizer[WebKey.LocakedOpen]</button>
+                <div class="dropdown flag-dropdown">
+                    <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="langDropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
+                        <span class="fi @userCulture?.FIClass.TrySanitize(_sanitizer) me-2" id="selectedFlag"></span><span id="selectedLanguage"></span>
+                    </button>
+                    <ul class="dropdown-menu" aria-labelledby="langDropdownMenuButton">
+                        @foreach (var culture in _cultures)
+                        {
+                            var lang = culture.Language;
+                            var info = culture.Info;
+                            <li>
+                                <a class="dropdown-item" data-language="@lang.TrySanitize(_sanitizer)" data-flag="@_cultures[lang]?.FIClass.TrySanitize(_sanitizer)">
+                                    <span class="fi @_cultures[lang]?.FIClass.TrySanitize(_sanitizer) me-2"></span>@info?.Parent.NativeName
+                                </a>
+                            </li>
+                        }
+                    </ul>
                 </div>
             </form>
         </div>
-        <div class="col-4 mb-3 d-flex justify-content-center align-items-center">
-            <div class="dropdown">
-                <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="langDropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
-                    <span class="fi @userCulture?.FIClass.TrySanitize(_sanitizer) me-2" id="selectedFlag"></span><span id="selectedLanguage"></span>
-                </button>
-                <ul class="dropdown-menu" aria-labelledby="langDropdownMenuButton">
-                @foreach(var culture in _cultures)
-                {
-                    var lang = culture.Language;
-                    var info = culture.Info;
-                    <li>
-                        <a class="dropdown-item" data-language="@lang.TrySanitize(_sanitizer)" data-flag="@_cultures[lang]?.FIClass.TrySanitize(_sanitizer)">
-                            <span class="fi @_cultures[lang]?.FIClass.TrySanitize(_sanitizer) me-2"></span>@info?.Parent.NativeName
-                        </a>
-                    </li>
-                }
-                </ul>
-            </div>
-        </div>
     </div>
-    <section class="text-center">
+    @if (ViewData["ErrorMessage"] is string errMsg)
+    {
+    <div id="access-code-error-message" class="alert alert-danger row" role="alert">
+            @_sanitizer.Sanitize(errMsg)
+
+    </div>
+    }
+    <section class="no-receiver-explanation text-center">
         <details>
             <summary>@_localizer[WebKey.LockedFooterTitle]</summary>
             <p>@_localizer[WebKey.LockedFooterBody]</p>

EnvelopeGenerator.Web/Views/Home/ShowEnvelope.cshtml

@@ -18,53 +18,11 @@
     var document = Model.Envelope?.Documents?.FirstOrDefault();
     var sender = Model.Envelope?.User;
     var pages = document?.Elements?.Select(e => e.Page) ?? Array.Empty<int>();
+    int? signatureCount = document?.Elements?.Count();
     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 class="@logo.ShowPageClass" src="@logo.Src" alt="logo">
-            </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 class="envelope-view">
     <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">
@@ -86,7 +44,43 @@
             </svg>
         </button>
     </div>
-    <div id='app' class="flex-grow-1"></div>
+    
+    <div class="dd-cards-container">
+        <div class="dd-card">
+            <div class="dd-card-preview">
+                <h6 class="uppercase">Digital Data</h6>
+                <h2>signFlow</h2>
+                <a href="https://digitaldata.works/"><i class="fas fa-chevron-right">Erfahren Sie mehr</i></a>
+            </div>
+            <div class="dd-card-info">
+                <div class="logo">
+                    <img class="@logo.ShowPageClass" src="@logo.Src" alt="logo">
+                </div>
+                <h2>@($"{envelope?.Title}".TrySanitize(_sanitizer))</h2>
+                <h6>@($"{@envelope?.Message}".TrySanitize(_sanitizer))</h6>
+                <p>
+                    <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 class="progress-container">
+                    <div id="signed-count-bar" class="progress"></div>
+                    <span class="progress-text">
+                        <span id="signed-count">0</span>/<span id="signature-count">@signatureCount</span> Unterschriften
+                    </span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id='app'></div>
 </div>
 <script nonce="@nonce">
     const collapseNav = () => {

EnvelopeGenerator.Web/Views/Shared/_Layout.cshtml

@@ -14,6 +14,7 @@
     <link rel="stylesheet" href="~/lib/sweetalert2/sweetalert2.min.css" />
     <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
     <link rel="stylesheet" href="~/css/logo.min.css" asp-append-version="true" />
+    <link rel="stylesheet" href="~/css/card.min.css" asp-append-version="true" />
     <link rel="stylesheet" href="~/EnvelopeGenerator.Web.styles.css" asp-append-version="true" />
     <link rel="stylesheet" href="~/lib/flag-icons-main/css/flag-icons.min.css" asp-append-version="true" />
     <link rel="stylesheet" href="~/lib/alertifyjs/css/alertify.min.css" />
@@ -61,6 +62,9 @@
     </main>
     <script src="~/js/event-binder.min.js" asp-append-version="true"></script>
     @Html.AntiForgeryToken()
-    <footer>&copy; SignFlow 2023-2024 <a href="https://digitaldata.works">Digital Data GmbH</a></footer>
+    <footer>
+        <span>&copy; SignFlow 2023-2024 <a href="https://digitaldata.works">Digital Data GmbH</a></span>
+        <a href="https://localhost:7202/privacy-policy.de-DE.html">Datenschutz</a>
+    </footer>
 </body>
 </html>

EnvelopeGenerator.Web/bundleconfig.json

@@ -76,5 +76,11 @@
     "inputFiles": [
       "wwwroot/css/privacy-policy.css"
     ]
+  },
+  {
+    "outputFileName": "wwwroot/css/card.min.css",
+    "inputFiles": [
+      "wwwroot/css/card.css"
+    ]
   }
 ]

EnvelopeGenerator.Web/wwwroot/css/card.css

@@ -0,0 +1,275 @@
+@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
+
+* {
+	box-sizing: border-box;
+}
+
+.dd-cards-container {
+	font-family: 'Muli', sans-serif;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	height: 10rem;
+}
+
+.dd-card {
+	background-color: #fff;
+	box-shadow: 0 0.625rem 0.625rem rgba(0, 0, 0, 0.2);
+	display: flex;
+	max-width: 100%;
+	margin: 0;
+	overflow: hidden;
+	width: 100%;
+}
+
+.dd-card h6 {
+	opacity: 0.6;
+	margin: 0;
+	letter-spacing: 0.0625rem;
+}
+
+.uppercase {
+	text-transform: uppercase;
+}
+
+.dd-card h2 {
+	letter-spacing: 0.0625rem;
+	margin: 0;
+}
+
+.dd-card-preview {
+	background-color: #2A265F;
+	color: #fff;
+	padding: 1.875rem;
+	max-width: 15.625rem;
+}
+
+.dd-card-preview a {
+	color: #fff;
+	display: inline-block;
+	font-size: 0.75rem;
+	opacity: 0.6;
+	margin-top: 1.875rem;
+	text-decoration: none;
+}
+
+.dd-card-info {
+	padding: 1rem 0 0 1.875rem;
+	position: relative;
+	width: 100%;
+}
+
+	.dd-card-info p {
+		opacity: 0.6;
+		font-size: 0.75rem;
+		opacity: 0.6;
+		margin-top: .875rem;
+		text-decoration: none;
+	}
+
+.progress-container {
+	text-align: right;
+	width: 9.375rem;
+}
+
+.progress {
+	position: relative;
+	background-color: #ddd;
+	border-radius: 0.1875rem;
+	height: 0.3125rem;
+	width: 10rem;
+}
+
+	.progress::after {
+		background-color: #2A265F;
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 0.3125rem;
+		width: var(--progress-width, 1%);
+		transition: width 1s ease;
+	}
+
+.progress-text {
+	font-size: 0.625rem;
+	opacity: 0.6;
+	letter-spacing: 0.0625rem;
+	text-align: left;
+}
+
+.dd-card-btn {
+	background-color: #2A265F;
+	border: 0;
+	border-radius: 3.125rem;
+	box-shadow: 0 0.625rem 0.625rem rgba(0, 0, 0, 0.2);
+	color: #fff;
+	font-size: 1rem;
+	padding: 0.75rem 1.5625rem;
+	position: absolute;
+	bottom: 1.875rem;
+	right: 1.875rem;
+	letter-spacing: 0.0625rem;
+}
+
+/* SOCIAL PANEL CSS */
+.social-panel-container {
+	position: fixed;
+	right: 0;
+	bottom: 5rem;
+	transform: translateX(100%);
+	transition: transform 0.4s ease-in-out;
+}
+
+	.social-panel-container.visible {
+		transform: translateX(-0.625rem);
+	}
+
+.social-panel {	
+	background-color: #fff;
+	border-radius: 16px;
+	box-shadow: 0 16px 31px -17px rgba(0,31,97,0.6);
+	border: 5px solid #001F61;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	font-family: 'Muli';
+	position: relative;
+	height: 169px;	
+	width: 370px;
+	max-width: calc(100% - 10px);
+}
+
+.social-panel button.close-btn {
+	border: 0;
+	color: #97A5CE;
+	cursor: pointer;
+	font-size: 20px;
+	position: absolute;
+	top: 5px;
+	right: 5px;
+}
+
+.social-panel button.close-btn:focus {
+	outline: none;
+}
+
+.social-panel p {
+	background-color: #001F61;
+	border-radius: 0 0 10px 10px;
+	color: #fff;
+	font-size: 14px;
+	line-height: 18px;
+	padding: 2px 17px 6px;
+	position: absolute;
+	top: 0;
+	left: 50%;
+	margin: 0;
+	transform: translateX(-50%);
+	text-align: center;
+	width: 235px;
+}
+
+.social-panel p i {
+	margin: 0 5px;
+}
+
+.social-panel p a {
+	color: #FF7500;
+	text-decoration: none;
+}
+
+.social-panel h4 {
+	margin: 20px 0;
+	color: #97A5CE;	
+	font-family: 'Muli';	
+	font-size: 14px;	
+	line-height: 18px;
+	text-transform: uppercase;
+}
+
+.social-panel ul {
+	display: flex;
+	list-style-type: none;
+	padding: 0;
+	margin: 0;
+}
+
+.social-panel ul li {
+	margin: 0 10px;
+}
+
+.social-panel ul li a {
+	border: 1px solid #DCE1F2;
+	border-radius: 50%;
+	color: #001F61;
+	font-size: 20px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 50px;
+	width: 50px;
+	text-decoration: none;
+}
+
+.social-panel ul li a:hover {
+	border-color: #FF6A00;
+	box-shadow: 0 9px 12px -9px #FF6A00;
+}
+
+.floating-btn {
+	border-radius: 26.5px;
+	background-color: #001F61;
+	border: 1px solid #001F61;
+	box-shadow: 0 16px 22px -17px #03153B;
+	color: #fff;
+	cursor: pointer;
+	font-size: 16px;
+	line-height: 20px;
+	padding: 12px 20px;
+	position: fixed;
+	bottom: 20px;
+	right: 20px;
+	z-index: 999;
+}
+
+.floating-btn:hover {
+	background-color: #ffffff;
+	color: #001F61;
+}
+
+.floating-btn:focus {
+	outline: none;
+}
+
+.floating-text {
+	background-color: #001F61;
+	border-radius: 10px 10px 0 0;
+	color: #fff;
+	font-family: 'Muli';
+	padding: 7px 15px;
+	position: fixed;
+	bottom: 0;
+	left: 50%;
+	transform: translateX(-50%);
+	text-align: center;
+	z-index: 998;
+}
+
+.floating-text a {
+	color: #FF7500;
+	text-decoration: none;
+}
+
+@media screen and (max-width: 480px) {
+
+	.social-panel-container.visible {
+		transform: translateX(0px);
+	}
+	
+	.floating-btn {
+		right: 10px;
+	}
+}

EnvelopeGenerator.Web/wwwroot/css/card.min.css

@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');*{box-sizing:border-box}.dd-cards-container{font-family:'Muli',sans-serif;display:flex;align-items:center;justify-content:center;flex-direction:column;height:10rem}.dd-card{background-color:#fff;box-shadow:0 .625rem .625rem rgba(0,0,0,.2);display:flex;max-width:100%;margin:0;overflow:hidden;width:100%}.dd-card h6{opacity:.6;margin:0;letter-spacing:.0625rem}.uppercase{text-transform:uppercase}.dd-card h2{letter-spacing:.0625rem;margin:0}.dd-card-preview{background-color:#2a265f;color:#fff;padding:1.875rem;max-width:15.625rem}.dd-card-preview a{color:#fff;display:inline-block;font-size:.75rem;opacity:.6;margin-top:1.875rem;text-decoration:none}.dd-card-info{padding:1rem 0 0 1.875rem;position:relative;width:100%}.dd-card-info p{opacity:.6;font-size:.75rem;opacity:.6;margin-top:.875rem;text-decoration:none}.progress-container{text-align:right;width:9.375rem}.progress{position:relative;background-color:#ddd;border-radius:.1875rem;height:.3125rem;width:10rem}.progress::after{background-color:#2a265f;content:'';position:absolute;top:0;left:0;height:.3125rem;width:var(--progress-width,1%);transition:width 1s ease}.progress-text{font-size:.625rem;opacity:.6;letter-spacing:.0625rem;text-align:left}.dd-card-btn{background-color:#2a265f;border:0;border-radius:3.125rem;box-shadow:0 .625rem .625rem rgba(0,0,0,.2);color:#fff;font-size:1rem;padding:.75rem 1.5625rem;position:absolute;bottom:1.875rem;right:1.875rem;letter-spacing:.0625rem}.social-panel-container{position:fixed;right:0;bottom:5rem;transform:translateX(100%);transition:transform .4s ease-in-out}.social-panel-container.visible{transform:translateX(-.625rem)}.social-panel{background-color:#fff;border-radius:16px;box-shadow:0 16px 31px -17px rgba(0,31,97,.6);border:5px solid #001f61;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:'Muli';position:relative;height:169px;width:370px;max-width:calc(100% - 10px)}.social-panel button.close-btn{border:0;color:#97a5ce;cursor:pointer;font-size:20px;position:absolute;top:5px;right:5px}.social-panel button.close-btn:focus{outline:0}.social-panel p{background-color:#001f61;border-radius:0 0 10px 10px;color:#fff;font-size:14px;line-height:18px;padding:2px 17px 6px;position:absolute;top:0;left:50%;margin:0;transform:translateX(-50%);text-align:center;width:235px}.social-panel p i{margin:0 5px}.social-panel p a{color:#ff7500;text-decoration:none}.social-panel h4{margin:20px 0;color:#97a5ce;font-family:'Muli';font-size:14px;line-height:18px;text-transform:uppercase}.social-panel ul{display:flex;list-style-type:none;padding:0;margin:0}.social-panel ul li{margin:0 10px}.social-panel ul li a{border:1px solid #dce1f2;border-radius:50%;color:#001f61;font-size:20px;display:flex;justify-content:center;align-items:center;height:50px;width:50px;text-decoration:none}.social-panel ul li a:hover{border-color:#ff6a00;box-shadow:0 9px 12px -9px #ff6a00}.floating-btn{border-radius:26.5px;background-color:#001f61;border:1px solid #001f61;box-shadow:0 16px 22px -17px #03153b;color:#fff;cursor:pointer;font-size:16px;line-height:20px;padding:12px 20px;position:fixed;bottom:20px;right:20px;z-index:999}.floating-btn:hover{background-color:#fff;color:#001f61}.floating-btn:focus{outline:0}.floating-text{background-color:#001f61;border-radius:10px 10px 0 0;color:#fff;font-family:'Muli';padding:7px 15px;position:fixed;bottom:0;left:50%;transform:translateX(-50%);text-align:center;z-index:998}.floating-text a{color:#ff7500;text-decoration:none}@media screen and (max-width:480px){.social-panel-container.visible{transform:translateX(0)}.floating-btn{right:10px}}

EnvelopeGenerator.Web/wwwroot/css/logo.css

@@ -5,6 +5,11 @@
 
 .dd-show-logo {
     width: 9rem;
+    position: absolute;
+    right: 0;
+    margin: 0 2rem 0 0;
+    padding: 0;
+    top:0;
 }
 
 .cursor-locked-logo {

EnvelopeGenerator.Web/wwwroot/css/logo.min.css

@@ -1 +1 @@
-.dd-locked-logo{width:13rem;padding-top:1rem}.dd-show-logo{width:9rem}.cursor-locked-logo{width:9rem;padding-top:1rem}.cursor-show-logo{width:6rem}@media(max-width:767px){.dd-show-logo{width:5rem}.cursor-show-logo{width:3rem}}
+.dd-locked-logo{width:13rem;padding-top:1rem}.dd-show-logo{width:9rem;position:absolute;right:0;margin:0 2rem 0 0;padding:0;top:0}.cursor-locked-logo{width:9rem;padding-top:1rem}.cursor-show-logo{width:6rem}@media(max-width:767px){.dd-show-logo{width:5rem}.cursor-show-logo{width:3rem}}

EnvelopeGenerator.Web/wwwroot/css/site.css

@@ -4,22 +4,20 @@
 */
 
 /* Toolbar Buttons */
-#app {
-    background: gray;
-    width: 100vw;
-    height: 80vh;
-}
 
 .navbar-toggler {
     border: 0;
 }
 
+.material-symbols-outlined {
+    align-content: center;
+}
+
 .btn-group {
     margin-right: 10vw;
     margin-bottom: 10vh;
 }
 
-
 .btn_refresh, .btn_reject, .btn_complete {
     height:2.5rem;
 }
@@ -69,8 +67,7 @@
     }
 
 body {
-    background-color: #bbb;
-
+    background: #f8fcfc;
     display: flex;
     flex-direction: column;
     height: 100vh;
@@ -78,16 +75,51 @@ body {
 }
 
 main {
-    flex: 1;
+    display:flex;
+    margin: 0 0 0.5vh 0;
+}
+
+.envelope-view {
+    display: flex; /* d-flex */
+    flex-direction: column; /* flex-column */
+    width: 100vw;
+    height: 95.9vh;
+}
+
+#app {
+    background: gray;
+    width: 100vw;
+    height: 100%;
+    flex-grow: 1;
+    border-width: 0;
 }
 
 footer {
-    background: #333;
-    color: white;
-    text-align: center;
-    padding: 10px 0;
+    height: 4vh;
+    background-color: #001F61;
+    border-radius: 10px 10px 0 0;
+    color: #fff;
+    font-family: 'Muli';
+    padding: 0.5vh 0;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    z-index: 998;
+    border-width: 0;
 }
 
+    footer * {
+        margin-left: 1rem;
+    }
+
+    footer > * {
+        margin: 0 6rem 0 1rem;
+    }
+
+    footer a {
+        color: #FF7500;
+        text-decoration: none;
+    }
 
 .page {
     margin-top: 3rem;
@@ -281,13 +313,44 @@ footer#page-footer {
 }
 
 #form-access-code {
-    margin-left: 5rem;
+    justify-content: space-evenly;
+}
+
+.access-code-form-floating {
+    display: flex;
+    justify-content: start;
+    flex-direction: row;
+}
+
+    .access-code-form-floating button {
+        align-content: center;
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+    }
+
+    .access-code-form-floating input {
+        align-content: center;
+        border-bottom-right-radius: 0;
+        border-top-right-radius: 0;
+        border-right-width: 0;
+        width: 7rem;
+    }
+
+#access-code-error-message {
+    justify-content: center;
+    align-content: center;
+    margin: 1.5rem 7rem 0 7rem;
+    height: 2.5rem;
+}
+
+.flag-dropdown button {
+    height: 100%;
 }
 
 .header-1 {
     align-items: center;
     justify-content: space-between;
-    margin-top:0;
+    margin-top: 0;
     padding-top: 0;
 }
 
@@ -298,6 +361,9 @@ footer#page-footer {
     padding-top: 0;
 }
 
+.no-receiver-explanation {
+    padding: 2.5rem;
+}
 /* styles for mobile responsiveness */
 @media (max-height: 850px) {
     .navbar .container {

EnvelopeGenerator.Web/wwwroot/js/annotation.js

@@ -253,6 +253,7 @@
     }
 
     static async createAnnotationFrameBlob(receiverName, receiverSignature, timestamp, width, height) {
+        Comp.SignatureProgress.SignedCount += 1;
         const canvas = document.createElement('canvas')
         const scale = 4
         const fontSize = 10

EnvelopeGenerator.Web/wwwroot/js/app.js

@@ -141,7 +141,7 @@ class App {
         switch (eventType) {
             case 'RESET':
                 result = await this.handleReset(null)
-
+                Comp.SignatureProgress.SignedCount = 0;
                 if (result.isConfirmed) {
                     Swal.fire({
                         title: 'Erfolg',

EnvelopeGenerator.Web/wwwroot/js/app.min.js

@@ -1 +1 @@
-const ActionType={Created:0,Saved:1,Sent:2,EmailSent:3,Delivered:4,Seen:5,Signed:6,Rejected:7};class App{constructor(n,t,i,r,u,f){this.container=f??`#${this.constructor.name.toLowerCase()}`;this.envelopeKey=n;this.Network=new Network;this.Instance=null;this.currentDocument=null;this.currentReceiver=null;this.signatureCount=0;this.envelopeReceiver=t;this.documentBytes=i;this.licenseKey=r;this.locale=u}async init(){this.currentDocument=this.envelopeReceiver.envelope.documents[0];this.currentReceiver=this.envelopeReceiver.receiver;const n=this.documentBytes;if(n.fatal||n.error)return Swal.fire({title:"Fehler",text:"Dokument konnte nicht geladen werden!",icon:"error"});const t=this.documentBytes;this.Instance=await UI.loadPSPDFKit(t,this.container,this.licenseKey,this.locale);UI.configurePSPDFKit(this.Instance,this.handleClick.bind(this));this.Instance.addEventListener("annotations.load",this.handleAnnotationsLoad.bind(this));this.Instance.addEventListener("annotations.change",this.handleAnnotationsChange.bind(this));this.Instance.addEventListener("annotations.create",this.handleAnnotationsCreate.bind(this));this.Instance.addEventListener("annotations.willChange",()=>{Comp.ActPanel.Toggle()});try{this.signatureCount=this.currentDocument.elements.length;await Annotation.createAnnotations(this.currentDocument,this.Instance);const n=await this.Network.openDocument(this.envelopeKey);if(n.fatal||n.error)return Swal.fire({title:"Fehler",text:"Umschlag konnte nicht geöffnet werden!",icon:"error"})}catch(i){}[...document.getElementsByClassName("btn_refresh")].forEach(n=>n.addEventListener("click",()=>this.handleClick("RESET")));[...document.getElementsByClassName("btn_complete")].forEach(n=>n.addEventListener("click",()=>this.handleClick("FINISH")))}handleAnnotationsLoad(n){n.toJS()}handleAnnotationsChange(){}async handleAnnotationsCreate(n){const t=n.toJS()[0],i=!!t.formFieldName,r=!!t.isSignature;if(i===!1&&r===!0){const r=t.boundingBox.left-20,u=t.boundingBox.top-20,n=150,i=75,f=new Date,e=await Annotation.createAnnotationFrameBlob(this.envelopeReceiver.name,this.currentReceiver.signature,f,n,i),o=await fetch(e),s=await o.blob(),h=await this.Instance.createAttachment(s),c=Annotation.createImageAnnotation(new PSPDFKit.Geometry.Rect({left:r,top:u,width:n,height:i}),t.pageIndex,h);this.Instance.create(c)}}async handleClick(n){let t=!1;switch(n){case"RESET":t=await this.handleReset(null);t.isConfirmed&&Swal.fire({title:"Erfolg",text:"Dokument wurde zurückgesetzt",icon:"info"});break;case"FINISH":t=await this.handleFinish(null);t==!0&&(window.location.href=`/EnvelopeKey/${this.envelopeKey}/Success`);break;case"REJECT":alert("Dokument abgelent!")}}async handleFinish(){const n=await this.Instance.exportInstantJSON(),t=await n.formFieldValues,r=t.filter(n=>Annotation.isFieldRequired(n)),u=r.some(n=>n.value===undefined||n.value===null||n.value==="");if(u)return Swal.fire({title:"Warnung",text:"Bitte füllen Sie alle Standortinformationen vollständig aus!",icon:"warning"}),!1;const f=new RegExp("^[a-zA-Z\\u0080-\\u024F]+(?:([\\ \\-\\']|(\\.\\ ))[a-zA-Z\\u0080-\\u024F]+)*$"),e=t.filter(n=>Annotation.isCityField(n));for(var i of e)if(!f.test(i.value))return Swal.fire({title:"Warnung",text:`Bitte überprüfen Sie die eingegebene Ortsangabe "${i.value}" auf korrekte Formatierung. Beispiele für richtige Formate sind: München, Île-de-France, Sauðárkrókur, San Francisco, St. Catharines usw.`,icon:"warning"}),!1;const o=await this.validateAnnotations(this.signatureCount);return o===!1?(Swal.fire({title:"Warnung",text:"Es wurden nicht alle Signaturfelder ausgefüllt!",icon:"warning"}),!1):Swal.fire({title:localized.confirmation,html:`<div class="text-start fs-6 p-0 m-0">${localized.sigAgree}</div>`,icon:"question",showCancelButton:!0,confirmButtonColor:"#3085d6",cancelButtonColor:"#d33",confirmButtonText:localized.finalize,cancelButtonText:localized.back}).then(async t=>{if(t.isConfirmed){try{await this.Instance.save()}catch(i){return Swal.fire({title:"Fehler",text:"Umschlag konnte nicht signiert werden!",icon:"error"}),!1}try{const i=await n,t=await this.Network.postEnvelope(this.envelopeKey,this.currentDocument.id,i);return t.fatal?(Swal.fire({title:"Fehler",text:"Umschlag konnte nicht signiert werden!",icon:"error"}),!1):t.error?(Swal.fire({title:"Warnung",text:"Umschlag ist nicht mehr verfügbar.",icon:"warning"}),!1):!0}catch(i){return!1}}else return!1})}async validateAnnotations(n){const t=await Annotation.getAnnotations(this.Instance),i=t.map(n=>n.toJS()).filter(n=>n.isSignature);return n>i.length?!1:!0}async handleReset(){const n=await Swal.fire({title:"Sind sie sicher?",text:"Wollen Sie das Dokument und alle erstellten Signaturen zurücksetzen?",icon:"question",showCancelButton:!0});if(n.isConfirmed){const n=await Annotation.deleteAnnotations(this.Instance)}return n}}
+const ActionType={Created:0,Saved:1,Sent:2,EmailSent:3,Delivered:4,Seen:5,Signed:6,Rejected:7};class App{constructor(n,t,i,r,u,f){this.container=f??`#${this.constructor.name.toLowerCase()}`;this.envelopeKey=n;this.Network=new Network;this.Instance=null;this.currentDocument=null;this.currentReceiver=null;this.signatureCount=0;this.envelopeReceiver=t;this.documentBytes=i;this.licenseKey=r;this.locale=u}async init(){this.currentDocument=this.envelopeReceiver.envelope.documents[0];this.currentReceiver=this.envelopeReceiver.receiver;const n=this.documentBytes;if(n.fatal||n.error)return Swal.fire({title:"Fehler",text:"Dokument konnte nicht geladen werden!",icon:"error"});const t=this.documentBytes;this.Instance=await UI.loadPSPDFKit(t,this.container,this.licenseKey,this.locale);UI.configurePSPDFKit(this.Instance,this.handleClick.bind(this));this.Instance.addEventListener("annotations.load",this.handleAnnotationsLoad.bind(this));this.Instance.addEventListener("annotations.change",this.handleAnnotationsChange.bind(this));this.Instance.addEventListener("annotations.create",this.handleAnnotationsCreate.bind(this));this.Instance.addEventListener("annotations.willChange",()=>{Comp.ActPanel.Toggle()});try{this.signatureCount=this.currentDocument.elements.length;await Annotation.createAnnotations(this.currentDocument,this.Instance);const n=await this.Network.openDocument(this.envelopeKey);if(n.fatal||n.error)return Swal.fire({title:"Fehler",text:"Umschlag konnte nicht geöffnet werden!",icon:"error"})}catch(i){}[...document.getElementsByClassName("btn_refresh")].forEach(n=>n.addEventListener("click",()=>this.handleClick("RESET")));[...document.getElementsByClassName("btn_complete")].forEach(n=>n.addEventListener("click",()=>this.handleClick("FINISH")))}handleAnnotationsLoad(n){n.toJS()}handleAnnotationsChange(){}async handleAnnotationsCreate(n){const t=n.toJS()[0],i=!!t.formFieldName,r=!!t.isSignature;if(i===!1&&r===!0){const r=t.boundingBox.left-20,u=t.boundingBox.top-20,n=150,i=75,f=new Date,e=await Annotation.createAnnotationFrameBlob(this.envelopeReceiver.name,this.currentReceiver.signature,f,n,i),o=await fetch(e),s=await o.blob(),h=await this.Instance.createAttachment(s),c=Annotation.createImageAnnotation(new PSPDFKit.Geometry.Rect({left:r,top:u,width:n,height:i}),t.pageIndex,h);this.Instance.create(c)}}async handleClick(n){let t=!1;switch(n){case"RESET":t=await this.handleReset(null);Comp.SignatureProgress.SignedCount=0;t.isConfirmed&&Swal.fire({title:"Erfolg",text:"Dokument wurde zurückgesetzt",icon:"info"});break;case"FINISH":t=await this.handleFinish(null);t==!0&&(window.location.href=`/EnvelopeKey/${this.envelopeKey}/Success`);break;case"REJECT":alert("Dokument abgelent!")}}async handleFinish(){const n=await this.Instance.exportInstantJSON(),t=await n.formFieldValues,r=t.filter(n=>Annotation.isFieldRequired(n)),u=r.some(n=>n.value===undefined||n.value===null||n.value==="");if(u)return Swal.fire({title:"Warnung",text:"Bitte füllen Sie alle Standortinformationen vollständig aus!",icon:"warning"}),!1;const f=new RegExp("^[a-zA-Z\\u0080-\\u024F]+(?:([\\ \\-\\']|(\\.\\ ))[a-zA-Z\\u0080-\\u024F]+)*$"),e=t.filter(n=>Annotation.isCityField(n));for(var i of e)if(!f.test(i.value))return Swal.fire({title:"Warnung",text:`Bitte überprüfen Sie die eingegebene Ortsangabe "${i.value}" auf korrekte Formatierung. Beispiele für richtige Formate sind: München, Île-de-France, Sauðárkrókur, San Francisco, St. Catharines usw.`,icon:"warning"}),!1;const o=await this.validateAnnotations(this.signatureCount);return o===!1?(Swal.fire({title:"Warnung",text:"Es wurden nicht alle Signaturfelder ausgefüllt!",icon:"warning"}),!1):Swal.fire({title:localized.confirmation,html:`<div class="text-start fs-6 p-0 m-0">${localized.sigAgree}</div>`,icon:"question",showCancelButton:!0,confirmButtonColor:"#3085d6",cancelButtonColor:"#d33",confirmButtonText:localized.finalize,cancelButtonText:localized.back}).then(async t=>{if(t.isConfirmed){try{await this.Instance.save()}catch(i){return Swal.fire({title:"Fehler",text:"Umschlag konnte nicht signiert werden!",icon:"error"}),!1}try{const i=await n,t=await this.Network.postEnvelope(this.envelopeKey,this.currentDocument.id,i);return t.fatal?(Swal.fire({title:"Fehler",text:"Umschlag konnte nicht signiert werden!",icon:"error"}),!1):t.error?(Swal.fire({title:"Warnung",text:"Umschlag ist nicht mehr verfügbar.",icon:"warning"}),!1):!0}catch(i){return!1}}else return!1})}async validateAnnotations(n){const t=await Annotation.getAnnotations(this.Instance),i=t.map(n=>n.toJS()).filter(n=>n.isSignature);return n>i.length?!1:!0}async handleReset(){const n=await Swal.fire({title:"Sind sie sicher?",text:"Wollen Sie das Dokument und alle erstellten Signaturen zurücksetzen?",icon:"question",showCancelButton:!0});if(n.isConfirmed){const n=await Annotation.deleteAnnotations(this.Instance)}return n}}

EnvelopeGenerator.Web/wwwroot/js/event-binder.js

@@ -64,4 +64,36 @@ class Comp {
             Comp.ActPanel.Display = Comp.ActPanel.IsHided ? '' : 'none'
         }
     }
+
+    static SignatureProgress = class {
+        static __SignatureCount;
+        static get SignatureCount() {
+            this.__SignatureCount = parseInt(document.getElementById("signature-count").innerText);            
+            return this.__SignatureCount;
+        }
+
+        static __SignedCountSpan;
+        static get SignedCountSpan() {
+            this.__SignedCountSpan ??= document.getElementById("signed-count");
+            return Comp.SignatureProgress.__SignedCountSpan;
+        }
+
+        static __signedCount = 0;
+        static get SignedCount() {
+            return this.__signedCount;
+        }
+
+        static set SignedCount(value) {
+            this.__signedCount = value;
+            const width = (value / this.SignatureCount) * 100;
+            this.SignedCountBar.style.setProperty('--progress-width', width + '%');
+            this.SignedCountSpan.innerText = value.toString();
+        }
+
+        static __SignedCountBar;
+        static get SignedCountBar() {
+            this.__SignedCountBar ??= document.getElementById("signed-count-bar");
+            return this.__SignedCountBar;
+        }
+    }
 }

EnvelopeGenerator.Web/wwwroot/js/event-binder.min.js

@@ -1,3 +1,3 @@
 $(".btn_reject").click(()=>Swal.fire({title:localized.rejection,html:`<div class="text-start fs-6 p-0 m-0">${localized.rejectionReasonQ}</div>`,icon:"question",input:"text",inputAttributes:{autocapitalize:"off"},showCancelButton:!0,confirmButtonColor:"#3085d6",cancelButtonColor:"#d33",confirmButtonText:localized.complete,cancelButtonText:localized.back,showLoaderOnConfirm:!0,preConfirm:async n=>{try{return await rejectEnvelope(n)}catch(t){Swal.showValidationMessage(`
           Request failed: ${t}
-        `)}},allowOutsideClick:()=>!Swal.isLoading()}).then(n=>{if(n.isConfirmed){const t=n.value;t.ok?redirRejected():Swal.showValidationMessage(`Request failed: ${t.message}`)}}));class Comp{static ActPanel=class{static __Root;static get Root(){Comp.ActPanel.__Root??=document.getElementById("flex-action-panel");return Comp.ActPanel.__Root}static get Elements(){return[...Comp.ActPanel.Root.children]}static get IsHided(){return Comp.ActPanel.Root.style.display=="none"}static set Display(n){Comp.ActPanel.Root.style.display=n;Comp.ActPanel.Elements.forEach(t=>t.style.display=n)}static Toggle(){Comp.ActPanel.Display=Comp.ActPanel.IsHided?"":"none"}};}
+        `)}},allowOutsideClick:()=>!Swal.isLoading()}).then(n=>{if(n.isConfirmed){const t=n.value;t.ok?redirRejected():Swal.showValidationMessage(`Request failed: ${t.message}`)}}));class Comp{static ActPanel=class{static __Root;static get Root(){Comp.ActPanel.__Root??=document.getElementById("flex-action-panel");return Comp.ActPanel.__Root}static get Elements(){return[...Comp.ActPanel.Root.children]}static get IsHided(){return Comp.ActPanel.Root.style.display=="none"}static set Display(n){Comp.ActPanel.Root.style.display=n;Comp.ActPanel.Elements.forEach(t=>t.style.display=n)}static Toggle(){Comp.ActPanel.Display=Comp.ActPanel.IsHided?"":"none"}};static SignatureProgress=class{static __SignatureCount;static get SignatureCount(){this.__SignatureCount=parseInt(document.getElementById("signature-count").innerText);return this.__SignatureCount}static __SignedCountSpan;static get SignedCountSpan(){this.__SignedCountSpan??=document.getElementById("signed-count");return Comp.SignatureProgress.__SignedCountSpan}static __signedCount=0;static get SignedCount(){return this.__signedCount}static set SignedCount(n){this.__signedCount=n;const t=(n/this.SignatureCount)*100;this.SignedCountBar.style.setProperty("--progress-width",t+"%");this.SignedCountSpan.innerText=n.toString()}static __SignedCountBar;static get SignedCountBar(){this.__SignedCountBar??=document.getElementById("signed-count-bar");return this.__SignedCountBar}};}