refactor(card.css): CSS der footer für Reaktionsfähigkeit bearbeitet

refactor(card.css): CSS des Kopfbereichs für Reaktionsfähigkeit bearbeitet
refactor (card.css): unnötiges CSS entfernt
2024-10-16 02:11:07 +02:00 · 2024-10-16 01:54:02 +02:00 · 2024-10-16 00:31:32 +02:00 · 2024-10-16 00:11:14 +02:00 · 2024-10-14 19:18:40 +02:00 · 2024-10-14 18:54:29 +02:00
18 changed files with 505 additions and 446 deletions
--- a/EnvelopeGenerator.Application/DTOs/EnvelopeReceiverReadOnly/EnvelopeReceiverReadOnlyCreateDto.cs
+++ b/EnvelopeGenerator.Application/DTOs/EnvelopeReceiverReadOnly/EnvelopeReceiverReadOnlyCreateDto.cs
@@ -1,11 +1,15 @@
-using System.Text.Json.Serialization;
+using System.ComponentModel.DataAnnotations;
+using System.Text.Json.Serialization;

 namespace EnvelopeGenerator.Application.DTOs.EnvelopeReceiverReadOnly
 {
    public record EnvelopeReceiverReadOnlyCreateDto(
-        string ReceiverMail,
        DateTime DateValid)
    {
+        [EmailAddress]
+        [Required]
+        public required string ReceiverMail { get; init; }
+
        [JsonIgnore]
        public long? EnvelopeId { get; set; } = null;

--- a/EnvelopeGenerator.Web/Controllers/ReadOnlyController.cs
+++ b/EnvelopeGenerator.Web/Controllers/ReadOnlyController.cs
@@ -28,79 +28,75 @@ namespace EnvelopeGenerator.Web.Controllers
            _histService = histService;
        }

-        [HttpGet]
-        [Authorize]
-        public async Task<IActionResult> GetAllAsync()
-        {
-            var res = await _erroService.ReadAllAsync();
-            return  Ok(res);
-        }
-
        [HttpPost]
        [Authorize]
        public async Task<IActionResult> CreateAsync([FromBody] EnvelopeReceiverReadOnlyCreateDto createDto)
        {
-            //set AddedWho
-            var authReceiverMail = this.GetAuthReceiverMail();
-            if (authReceiverMail is null)
+            try
            {
-                _logger.LogError("Email clam is not found in envelope-receiver-read-only creation process. Create DTO is:\n {dto}", JsonConvert.SerializeObject(createDto));
-                return Unauthorized();
-            }
-
-            var envelopeId = this.GetAuthEnvelopeId();
-            if (envelopeId is null)
-            {
-                _logger.LogError("Envelope Id clam is not found in envelope-receiver-read-only creation process. Create DTO is:\n {dto}", JsonConvert.SerializeObject(createDto));
-                return Unauthorized();
-            }
-
-            createDto.AddedWho = authReceiverMail;
-            createDto.EnvelopeId = envelopeId;
-
-            // create entity
-            var creation_res = await _erroService.CreateAsync(createDto: createDto);
-
-            if (creation_res.IsFailed)
-            {
-                _logger.LogNotice(creation_res);
-                return StatusCode(StatusCodes.Status500InternalServerError);
-            }
-
-            //read new entity
-            var read_res = await _erroService.ReadByIdAsync(creation_res.Data);
-            if (read_res.IsFailed)
-            {
-                _logger.LogNotice(creation_res);
-                return StatusCode(StatusCodes.Status500InternalServerError);
-            }
-
-            var new_erro = read_res.Data;
-
-            //send email two receiver
-            return await _mailService.SendAsync(new_erro).ThenAsync<int, IActionResult>(SuccessAsync: async res =>
-            {
-                //TODO: implement multi-threading to history process (Task)
-                //TODO: remove casting after change the id type
-                var hist_res = await _histService.RecordAsync((int) createDto.EnvelopeId, createDto.AddedWho, Common.Constants.EnvelopeStatus.EnvelopeShared);
-                if (hist_res.IsFailed)
+                //set AddedWho
+                var authReceiverMail = this.GetAuthReceiverMail();
+                if (authReceiverMail is null)
                {
-                    _logger.LogError("Although the envelope was sent as read-only, the EnvelopeShared hisotry could not be saved. Create DTO:\n{createDto}", JsonConvert.SerializeObject(createDto));
-                    _logger.LogNotice(hist_res.Notices);
+                    _logger.LogError("Email clam is not found in envelope-receiver-read-only creation process. Create DTO is:\n {dto}", JsonConvert.SerializeObject(createDto));
+                    return Unauthorized();
                }

-                return Ok();
-            },
-            
-            Fail: (msg, ntc) =>
-            {
-                _logger.LogNotice(ntc);
-                return StatusCode(StatusCodes.Status500InternalServerError);
-            });
-        }
+                var envelopeId = this.GetAuthEnvelopeId();
+                if (envelopeId is null)
+                {
+                    _logger.LogError("Envelope Id clam is not found in envelope-receiver-read-only creation process. Create DTO is:\n {dto}", JsonConvert.SerializeObject(createDto));
+                    return Unauthorized();
+                }

-        [HttpGet("key/{readOnlyId}")]
-        public IActionResult CreateLink(long readOnlyId) => Ok(
-            Request.Headers["Origin"].ToString() + "/EnvelopeKey/" + readOnlyId.EncodeEnvelopeReceiverId());
+                createDto.AddedWho = authReceiverMail;
+                createDto.EnvelopeId = envelopeId;
+
+                // create entity
+                var creation_res = await _erroService.CreateAsync(createDto: createDto);
+
+                if (creation_res.IsFailed)
+                {
+                    _logger.LogNotice(creation_res);
+                    return StatusCode(StatusCodes.Status500InternalServerError);
+                }
+
+                //read new entity
+                var read_res = await _erroService.ReadByIdAsync(creation_res.Data);
+                if (read_res.IsFailed)
+                {
+                    _logger.LogNotice(creation_res);
+                    return StatusCode(StatusCodes.Status500InternalServerError);
+                }
+
+                var new_erro = read_res.Data;
+
+                //send email two receiver
+                return await _mailService.SendAsync(new_erro).ThenAsync<int, IActionResult>(SuccessAsync: async res =>
+                {
+                    //TODO: implement multi-threading to history process (Task)
+                    //TODO: remove casting after change the id type
+                    var hist_res = await _histService.RecordAsync((int)createDto.EnvelopeId, createDto.AddedWho, Common.Constants.EnvelopeStatus.EnvelopeShared);
+                    if (hist_res.IsFailed)
+                    {
+                        _logger.LogError("Although the envelope was sent as read-only, the EnvelopeShared hisotry could not be saved. Create DTO:\n{createDto}", JsonConvert.SerializeObject(createDto));
+                        _logger.LogNotice(hist_res.Notices);
+                    }
+
+                    return Ok();
+                },
+
+                Fail: (msg, ntc) =>
+                {
+                    _logger.LogNotice(ntc);
+                    return StatusCode(StatusCodes.Status500InternalServerError);
+                });
+            }
+            catch(Exception ex)
+            {
+                _logger.LogError(ex, "{Message}", ex.Message);
+                return StatusCode(StatusCodes.Status500InternalServerError);
+            }
+        }
    }
 }
--- a/EnvelopeGenerator.Web/Views/Home/ShowEnvelope.cshtml
+++ b/EnvelopeGenerator.Web/Views/Home/ShowEnvelope.cshtml
@@ -31,20 +31,20 @@
    @if (!isReadOnly)
    {
    <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">
+        <button class="btn_complete btn btn-primary btn-desktop" 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">
+        <button class="btn_reject btn btn-danger btn-desktop" 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">
+        <button class="btn_refresh btn btn-secondary btn-desktop" 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" />
@@ -55,23 +55,15 @@
    <div class="dd-cards-container">
        <div class="dd-card">
            <div class="dd-card-preview">
-                <h6 class="uppercase">Digital Data</h6>
-                <h2>signFlow</h2>
+                <img src="~/img/sign_flow_horizontal.svg" class="app-logo">
                @if (!isReadOnly)
                {
-                <button type="button" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
-                    <span class="material-symbols-outlined">
-                        share
+                <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>
-                </button>
-                }
-                else
-                {
-                <button type="button" data-bs-toggle="modal" id="btn-copy" data-bs-target="#staticBackdrop">
-                    <span class="material-symbols-outlined">
-                            content_copy
-                    </span>
-                </button>
+                </div>
                }
            </div>
            <div class="dd-card-info">
@@ -102,35 +94,29 @@
                                 sender?.Email.TrySanitize(_sanitizer)))
                    </small>
                </p>
-                @if (!isReadOnly)
-                {
-                <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>
    @if (!isReadOnly)
    {
-    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+    <div class="modal fade" id="shareBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="shareBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
-                    <h1 class="modal-title fs-5" id="staticBackdropLabel"></h1>
+                    <small class="modal-title text-body-secondary" id="shareBackdropLabel">Geben Sie hier den Empfänger ein, mit welchem Sie das Dokument teilen wollen:</small>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="input-group mb-3">
                        <span class="input-group-text">E-Mail</span>
-                        <input type="text" class="form-control" placeholder="user@samplemail.com" id="readonly-receiver-mail" aria-label="">
+                        <input type="text" class="form-control email-input" placeholder="user@mail.com" id="readonly-receiver-mail" aria-label="">
                    </div>
                    <div class="input-group">
                        <span class="input-group-text">Gültig bis</span>
-                        <input type="date" name="expiration" class="form-control" id="readonly-date-valid">
+                        <input type="date" name="expiration" class="form-control" lang="de" id="readonly-date-valid" onkeydown="return false;" onclick="this.showPicker()"
+                        min="@DateTime.Today.AddDays(1).ToString("yyyy-MM-dd")"
+                        max="@DateTime.Today.AddDays(90).ToString("yyyy-MM-dd")"
+                        value="@DateTime.Today.AddDays(7).ToString("yyyy-MM-dd")">
                    </div>
                </div>
                <div class="modal-footer">
@@ -150,29 +136,59 @@
 {
 <script nonce="@nonce">
    document.getElementById('readonly-send').addEventListener('click', async () => {
-        const receiverMail = document.getElementById('readonly-receiver-mail').value;
-        const dateValid = document.getElementById('readonly-date-valid').value;
+        const receiverMail = document.getElementById('readonly-receiver-mail');
+        const dateValid = document.getElementById('readonly-date-valid');

-        shareEnvelope(receiverMail, dateValid)
+        const receiverMail_value = receiverMail.value;
+        const dateValid_value = dateValid.value;
+    
+        //check email
+            if (!receiverMail_value || receiverMail.classList.contains('is-invalid')) {
+            Swal.fire({
+                icon: "error",
+                title: "Falsche Email",
+                text: "Die E-Mail-Adresse ist ungültig. Bitte verwenden Sie das richtige Format, z. B.: user@mail.com."
+            });
+            return;
+        }
+
+        //check the date
+        const tomorrow = new Date(Date.now() + 86400000);
+        if (new Date(dateValid_value) < tomorrow) {
+            Swal.fire({
+                icon: "error",
+                title: "Falsches Datum",
+                text: "Die Verteilung der Umschläge sollte mindestens einen Tag dauern."
+            });
+            return;
+        }
+
+        shareEnvelope(receiverMail_value, dateValid_value)
            .then(res => {
-                console.log(res)
+                if (res.ok) {
+                    Swal.fire({
+                        title: "Gesendet",
+                        icon: "success"
+                    });
+                }
+                else {
+                    Swal.fire({
+                        icon: "error",
+                        title: `Fehler ${res.status}`,
+                        text: "Der Vorgang ist fehlgeschlagen. Bitte wenden Sie sich an das IT-Team."
+                    });
+                }
            })
            .catch(err => {
-                console.log(err)
+                Swal.fire({
+                    icon: "error",
+                    title: "Unerwarteter Fehler",
+                    text: "Der Vorgang ist fehlgeschlagen. Bitte wenden Sie sich an das IT-Team."
+                });
            })
-    });
-</script>
-}
-else
-{
-<script nonce="@nonce">
-    document.getElementById('btn-copy').addEventListener('click', function () {
-        const url = window.location.href;
-        navigator.clipboard.writeText(url).then(function () {
-            console.log('URL panoya başarıyla kopyalandı!');
-        }).catch(function (err) {
-            console.error('URL kopyalanamadı: ', err);
-        });
+
+            receiverMail.value = '';
+            dateValid.valueAsDate = new Date(new Date().setDate(new Date().getDate() + 8));
    });
 </script>
 }
--- a/EnvelopeGenerator.Web/Views/Shared/_Layout.cshtml
+++ b/EnvelopeGenerator.Web/Views/Shared/_Layout.cshtml
@@ -3,9 +3,13 @@
@using Newtonsoft.Json.Serialization
@{
    var nonce = _accessor.HttpContext?.Items["csp-nonce"] as string;
+
+    var isReadOnly = false;
+    if (ViewData["IsReadOnly"] is bool isReadOnly_bool)
+        isReadOnly = isReadOnly_bool;
 }
 <!DOCTYPE html>
-<html lang="en">
+<html lang="de">
 <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
@@ -18,7 +22,6 @@
    <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" />
-    <link rel="stylesheet" href="~/lib/alertifyjs/css/themes/default.min.css" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
 </head>
@@ -28,10 +31,19 @@
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24
        }
    </style>
+
+    <script nonce="@nonce">
    @if (ViewData["EnvelopeKey"] is string envelopeKey)
    {
-    <script nonce="@nonce">const ENV_KEY = "@envelopeKey.TrySanitize(_sanitizer)"</script>
+    @:  const ENV_KEY = "@envelopeKey.TrySanitize(_sanitizer)"
    }
+        const IS_READONLY = @isReadOnly.ToString().ToLower();
+
+        const DEVICE_TYPE = window.innerWidth <= 768 ? 'mobile' : window.innerWidth <= 1024 ? 'tablet' : 'desktop';
+
+        const IS_DESKTOP = DEVICE_TYPE == 'desktop'
+    </script>
+    
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/popper/dist/umd/popper.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
--- a/EnvelopeGenerator.Web/wwwroot/css/card.css
+++ b/EnvelopeGenerator.Web/wwwroot/css/card.css
@@ -10,12 +10,11 @@
 	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;
@@ -23,40 +22,38 @@
 	width: 100%;
 }

-.dd-card h6 {
-	opacity: 0.6;
-	margin: 0;
-	letter-spacing: 0.0625rem;
-}
+	.dd-card h6 {
+		opacity: 0.6;
+		margin: 0;
+		letter-spacing: 0.0625rem;
+		font-size: clamp(0.6rem, 1.33vw, 0.8rem);
+	}
+
+	.dd-card h2 {
+		letter-spacing: 0.0625rem;
+		margin: 0;
+		font-size: clamp(1rem, 2.67vw, 1.67rem);
+	}

 .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;
+	padding: 0.1rem 1rem 1rem 1rem;
+	margin:0;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
 }

-.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-preview a {
+		color: #fff;
+		opacity: 0.6;
+	}

 	.dd-card-preview button {
 		border-width: 0;
@@ -76,30 +73,37 @@
 		}

 .dd-card-info {
-	padding: 1rem 0 0 1.875rem;
+	padding: clamp(0.55rem, 2vw, .875rem) 0 0 clamp(0.55rem, 2.5vw, 1.7rem);
+	margin: 0;
 	position: relative;
 	width: 100%;
 }

-	.dd-card-info p {
-		opacity: 0.6;
-		font-size: 0.75rem;
-		opacity: 0.6;
-		margin-top: .875rem;
+	.dd-card-info p, .dd-card-info a, .dd-card-info small, .dd-card-info span {
+		opacity: 0.65;
+		font-size: clamp(0.55rem, 1.23vw, 0.75rem);
+		margin: clamp(0.55rem, 2vw, .875rem) 0 clamp(0.55rem, 2vw, .875rem) 0;
 		text-decoration: none;
+		padding: 0;
 	}

+.app-logo {
+	width: clamp(4rem, 10vw, 5rem);
+	margin: 1rem 0 0 0;
+}
+
 .progress-container {
 	text-align: right;
-	width: 9.375rem;
+	width: 100%;
+	margin: clamp(0.8rem, 2vw, 1rem) 0 0 0;
 }

 .progress {
-	position: relative;
 	background-color: #ddd;
 	border-radius: 0.1875rem;
-	height: 0.3125rem;
-	width: 10rem;
+	height: clamp(0.25rem, 1vw, 0.3125rem);
+	width: clamp(6rem, 20vw, 10rem);
+	position: relative;
 }

 	.progress::after {
@@ -108,189 +112,15 @@
 		position: absolute;
 		top: 0;
 		left: 0;
-		height: 0.3125rem;
+		height: clamp(0.25rem, 1vw, 0.3125rem);
 		width: var(--progress-width, 1%);
 		transition: width 1s ease;
+		opacity: 0.85;
 	}

 .progress-text {
-	font-size: 0.625rem;
+	font-size: clamp(0.5rem, 1.5vw, 0.625rem);
 	opacity: 0.6;
-	letter-spacing: 0.0625rem;
+	letter-spacing: clamp(0.05rem, 0.5vw, 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;
-	}
 }
--- a/EnvelopeGenerator.Web/wwwroot/css/card.min.css
+++ b/EnvelopeGenerator.Web/wwwroot/css/card.min.css
@@ -1 +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;display:flex;flex-direction:column;justify-content:center;align-items:center}.dd-card-preview a{color:#fff;display:inline-block;font-size:.75rem;opacity:.6;margin-top:1.875rem;text-decoration:none}.dd-card-preview button{border-width:0;align-items:center;background-color:transparent;color:#fff;margin:15% 0 0 0;transition:color .25s ease}.dd-card-preview button:hover{color:#bebebe}.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}}
+@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}.dd-card{background-color:#fff;display:flex;max-width:100%;margin:0;overflow:hidden;width:100%}.dd-card h6{opacity:.6;margin:0;letter-spacing:.0625rem;font-size:clamp(.6rem,1.33vw,.8rem)}.dd-card h2{letter-spacing:.0625rem;margin:0;font-size:clamp(1rem,2.67vw,1.67rem)}.uppercase{text-transform:uppercase}.dd-card-preview{background-color:#2a265f;color:#fff;padding:.1rem 1rem 1rem 1rem;margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center}.dd-card-preview a{color:#fff;opacity:.6}.dd-card-preview button{border-width:0;align-items:center;background-color:transparent;color:#fff;margin:15% 0 0 0;transition:color .25s ease}.dd-card-preview button:hover{color:#bebebe}.dd-card-info{padding:clamp(.55rem,2vw,.875rem) 0 0 clamp(.55rem,2.5vw,1.7rem);margin:0;position:relative;width:100%}.dd-card-info p,.dd-card-info a,.dd-card-info small,.dd-card-info span{opacity:.65;font-size:clamp(.55rem,1.23vw,.75rem);margin:clamp(.55rem,2vw,.875rem) 0 clamp(.55rem,2vw,.875rem) 0;text-decoration:none;padding:0}.app-logo{width:clamp(4rem,10vw,5rem);margin:1rem 0 0 0}.progress-container{text-align:right;width:100%;margin:clamp(.8rem,2vw,1rem) 0 0 0}.progress{background-color:#ddd;border-radius:.1875rem;height:clamp(.25rem,1vw,.3125rem);width:clamp(6rem,20vw,10rem);position:relative}.progress::after{background-color:#2a265f;content:'';position:absolute;top:0;left:0;height:clamp(.25rem,1vw,.3125rem);width:var(--progress-width,1%);transition:width 1s ease;opacity:.85}.progress-text{font-size:clamp(.5rem,1.5vw,.625rem);opacity:.6;letter-spacing:clamp(.05rem,.5vw,.0625rem);text-align:left}
--- a/EnvelopeGenerator.Web/wwwroot/css/logo.css
+++ b/EnvelopeGenerator.Web/wwwroot/css/logo.css
@@ -24,6 +24,7 @@
@media (max-width: 767px) {
    .dd-show-logo {
        width: 5rem;
+        margin-right: 0rem;
    }

    .cursor-show-logo {
--- a/EnvelopeGenerator.Web/wwwroot/css/logo.min.css
+++ b/EnvelopeGenerator.Web/wwwroot/css/logo.min.css
@@ -1 +1 @@
-.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}}
+.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;margin-right:0}.cursor-show-logo{width:3rem}}
--- a/EnvelopeGenerator.Web/wwwroot/css/site.css
+++ b/EnvelopeGenerator.Web/wwwroot/css/site.css
@@ -31,39 +31,90 @@
    }

 .button-finish {
-    transition: background-color linear 300ms;
-    background-color: #059669; /* emerald-600 */
-    color: white;
-    border-left: none;
+    color: #fff;
+    background-color: #0d6efd;
+    border-color: #0d6efd;
 }

-    .button-finish:hover, .button-finish:focus, .button-finish:active {
-        background-color: #10b981; /* emerald-500 */
-        color: white;
+    .button-finish:hover {
+        color: #fff;
+        background-color: #0b5ed7;
+        border-color: #0a58ca;
+    }
+
+    .button-finish:focus {
+        box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
+    }
+
+    .button-finish:active {
+        color: #fff;
+        background-color: #0a58ca;
+        border-color: #0a53be;
+        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+    }
+
+    .button-finish:disabled {
+        color: #fff;
+        background-color: #0d6efd;
+        border-color: #0d6efd;
    }

 .button-reject {
-    transition: background-color linear 300ms;
-    background-color: #d97706; /* amber-600 */
-    color: white;
-    border-left: none;
+    color: #fff;
+    background-color: #dc3545;
+    border-color: #dc3545;
 }

-    .button-reject:hover, .button-reject:focus, .button-reject:active {
-        background-color: #f59e0b; /* amber-500 */
-        color: white;
+    .button-reject:hover {
+        color: #fff;
+        background-color: #bb2d3b;
+        border-color: #b02a37;
+    }
+
+    .button-reject:focus {
+        box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5);
+    }
+
+    .button-reject:active {
+        color: #fff;
+        background-color: #b02a37;
+        border-color: #a52834;
+        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+    }
+
+    .button-reject:disabled {
+        color: #fff;
+        background-color: #dc3545;
+        border-color: #dc3545;
    }

 .button-reset {
-    transition: background-color linear 300ms;
-    background-color: #2563eb; /* blue-600 */
-    color: white;
-    border-left: none;
+    color: #fff;
+    background-color: #6c757d;
+    border-color: #6c757d;
 }

-    .button-reset:hover, .button-reset:focus, .button-reset:active {
-        background-color: #3b82f6; /* blue-500 */
-        color: white;
+    .button-reset:hover {
+        color: #fff;
+        background-color: #5c636a;
+        border-color: #565e64;
+    }
+
+    .button-reset:focus {
+        box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5);
+    }
+
+    .button-reset:active {
+        color: #fff;
+        background-color: #565e64;
+        border-color: #51585e;
+        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+    }
+
+    .button-reset:disabled {
+        color: #fff;
+        background-color: #6c757d;
+        border-color: #6c757d;
    }

 body {
@@ -96,6 +147,7 @@ main {

 footer {
    height: 4vh;
+    min-height: 1.5rem;
    background-color: #001F61;
    border-radius: 10px 10px 0 0;
    color: #fff;
@@ -106,14 +158,15 @@ footer {
    width: 100%;
    z-index: 998;
    border-width: 0;
+    font-size: clamp(0.75rem, 1.5vw, 1rem);
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: start;
 }

    footer * {
-        margin-left: 1rem;
-    }
-
-    footer > * {
-        margin: 0 6rem 0 1rem;
+        margin-left: clamp(0.5rem, 2vw, 1rem);
    }

    footer a {
@@ -369,6 +422,27 @@ footer#page-footer {
 .no-receiver-explanation {
    padding: 2.5rem;
 }
+
+.ajs-message.ajs-custom {
+    margin: 0rem 0rem 0rem 0rem;
+    padding: 0rem 0rem 0rem 0rem;
+    width:50rem;
+}
+
+    .ajs-message.ajs-custom .alert {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .ajs-message.ajs-custom span {
+        margin: 0 1rem 0 0;
+    }
+
+    .ajs-message.ajs-custom p {
+        margin: 0;
+        padding: 0;
+    }
+
 /* styles for mobile responsiveness */
@media (max-height: 850px) {
    .navbar .container {
@@ -477,6 +551,12 @@ footer#page-footer {
    }
 }

+@media (max-width: 1024px) {
+    #flex-action-panel, .btn-desktop {
+        display: none;
+    }
+}
+
@media (max-height: 600px) {
    .collapse {
        height: 4rem;
--- a/EnvelopeGenerator.Web/wwwroot/css/site.min.css
+++ b/EnvelopeGenerator.Web/wwwroot/css/site.min.css
--- a/EnvelopeGenerator.Web/wwwroot/img/sign_flow.svg
+++ b/EnvelopeGenerator.Web/wwwroot/img/sign_flow.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 256 256">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #ffd631;
+      }
+
+      .cls-1, .cls-2, .cls-3, .cls-4 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #a52431;
+      }
+
+      .cls-3 {
+        fill: none;
+      }
+
+      .cls-4 {
+        fill: #FFFFFF;
+      }
+
+      .cls-5 {
+        clip-path: url(#clippath);
+		opacity: 0;
+      }
+    </style>
+    <clipPath id="clippath">
+      <rect class="cls-3" x="0" width="256" height="256"/>
+    </clipPath>
+  </defs>
+  <g class="cls-5">
+    <rect class="cls-2" x="0" width="256" height="256" rx="48.67" ry="48.67"/>
+  </g>
+  <path class="cls-1" d="M153.29,63.22l-20.08,28.03h-10.42l-20.08-28.03,8.74-5.57h33.09l8.74,5.57ZM89.25,71.8l19.69,27.49-11.88,14.56-14.5-37.78,6.69-4.26ZM104.33,128.96l17.33-21.24h12.67l17.33,21.24-23.67,19.17-23.67-19.17ZM158.94,113.85l-11.88-14.56,19.69-27.49,6.69,4.26-14.5,37.78ZM149.16,42.03v-.03h-42.32v.03s-43.57,27.76-43.57,27.76l.28.44,25.76,67.11,38.62,30.89.06.07h.01s.01,0,.01,0l.05-.07,38.62-30.89,25.76-67.11.28-.44-43.57-27.76Z"/>
+  <path class="cls-1" d="M191.6,222.14h5.32l4.9-17.08,4.83,17.08h5.35l5.39-24.5h-5.04l-3.33,16.56-4.76-16.56h-4.79l-4.76,16.56-3.33-16.56h-5.21l5.43,24.5ZM171.79,217.87c-4.38,0-7.74-3.47-7.74-7.98s3.36-7.98,7.74-7.98,7.77,3.43,7.77,7.98-3.36,7.98-7.77,7.98M171.79,222.52c7.28,0,12.95-5.56,12.95-12.64s-5.67-12.63-12.95-12.63-12.95,5.56-12.95,12.63,5.71,12.64,12.95,12.64M139.3,222.14h18.48v-4.48h-13.4v-20.02h-5.07v24.5ZM115.9,222.14h5.07v-10.04h9.21v-4.27h-9.21v-5.78h13.86v-4.41h-18.93v24.5Z"/>
+  <path class="cls-4" d="M92.79,222.14h4.8v-12.63c.84-1.16,2.13-1.82,3.74-1.82,2.31,0,3.78,1.51,3.78,3.85v10.6h4.79v-11.31c0-4.31-2.97-7.28-7.21-7.28-2,0-3.75.63-5.11,1.82v-1.47h-4.8v18.24ZM78.07,218.18c-2.97,0-5.25-2.31-5.25-5.29s2.31-5.18,5.28-5.18c1.68,0,3.19.63,4.24,1.65v7.14c-1.05,1.08-2.52,1.68-4.27,1.68M78.1,229.63c5.85,0,9.03-2.69,9.03-7.52v-18.2h-4.72v1.19c-1.44-.94-3.15-1.47-4.94-1.47-5.25,0-9.38,4.09-9.38,9.27s4.1,9.35,9.24,9.35c1.82,0,3.54-.59,5-1.65v1.44c0,2.41-1.47,3.64-4.34,3.64-1.93,0-3.82-.45-5.81-1.44l-1.68,3.71c2.13,1.08,4.79,1.68,7.59,1.68M58.75,222.14h4.8v-18.24h-4.8v18.24ZM61.13,201.73c1.51,0,2.73-1.26,2.73-2.73s-1.22-2.73-2.73-2.73-2.73,1.23-2.73,2.73,1.22,2.73,2.73,2.73M46.42,222.49c4.58,0,7.98-2.55,7.98-6.02,0-2.84-2-4.69-5.57-5.22l-3.5-.53c-1.78-.24-2.49-.74-2.49-1.75s1.16-1.78,2.87-1.78c1.85,0,3.64.56,5.63,1.78l2.31-3.12c-2.28-1.5-4.83-2.27-7.49-2.27-4.65,0-7.59,2.27-7.59,5.77,0,2.94,1.92,4.8,5.53,5.32l3.5.52c1.58.24,2.27.77,2.27,1.72,0,1.19-1.4,1.96-3.53,1.96-1.92,0-3.78-.66-5.91-2.1l-2.38,3.19c2.06,1.64,5.04,2.52,8.37,2.52"/>
+  <rect class="cls-3" x="0" width="256" height="256"/>
+</svg>
--- a/EnvelopeGenerator.Web/wwwroot/img/sign_flow_horizontal.svg
+++ b/EnvelopeGenerator.Web/wwwroot/img/sign_flow_horizontal.svg
@@ -0,0 +1,5 @@
+<svg width="199" height="95" viewBox="0 0 199 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M67.515 15.8772L52.455 36.8498H44.64L29.58 15.8772L36.135 11.7096H60.9525L67.5075 15.8772H67.515ZM19.485 22.2969L34.2525 42.8654L25.3425 53.7595L14.4675 25.4918L19.485 22.3044V22.2969ZM30.795 65.0651L43.7925 49.1729H53.295L66.2925 65.0651L48.54 79.4084L30.7875 65.0651H30.795ZM71.7525 53.7595L62.8425 42.8654L77.61 22.2969L82.6275 25.4843L71.7525 53.752V53.7595ZM64.4175 0.0224456V0H32.6775V0.0224456L0 20.793L0.209999 21.1222L19.53 71.3352L48.495 94.4476L48.54 94.5H48.5475H48.555L48.5925 94.4476L77.5575 71.3352L96.8775 21.1222L97.0875 20.793L64.41 0.0224456H64.4175Z" fill="#FFD631"/>
+<path d="M180.74 34.5908H185.54V22.0971C186.38 20.9496 187.67 20.2968 189.28 20.2968C191.59 20.2968 193.06 21.7905 193.06 24.1052V34.5908H197.85V23.4029C197.85 19.1394 194.88 16.2014 190.64 16.2014C188.64 16.2014 186.89 16.8246 185.53 18.0018V16.5477H180.73V34.5908H180.74ZM166.02 30.6735C163.05 30.6735 160.77 28.3885 160.77 25.4406C160.77 22.4928 163.08 20.3165 166.05 20.3165C167.73 20.3165 169.24 20.9397 170.29 21.9487V29.0117C169.24 30.08 167.77 30.6735 166.02 30.6735ZM166.05 42C171.9 42 175.08 39.339 175.08 34.5611V16.5576H170.36V17.7347C168.92 16.8049 167.21 16.2806 165.42 16.2806C160.17 16.2806 156.04 20.3264 156.04 25.4505C156.04 30.5746 160.14 34.6996 165.28 34.6996C167.1 34.6996 168.82 34.116 170.28 33.0674V34.4919C170.28 36.8759 168.81 38.0926 165.94 38.0926C164.01 38.0926 162.12 37.6475 160.13 36.6682L158.45 40.3381C160.58 41.4065 163.24 42 166.04 42M146.7 34.5908H151.5V16.5477H146.7V34.5908ZM149.08 14.4011C150.59 14.4011 151.81 13.1547 151.81 11.7005C151.81 10.2464 150.59 9 149.08 9C147.57 9 146.35 10.2167 146.35 11.7005C146.35 13.1843 147.57 14.4011 149.08 14.4011ZM134.37 34.9371C138.95 34.9371 142.35 32.4146 142.35 28.982C142.35 26.1727 140.35 24.3426 136.78 23.8183L133.28 23.2941C131.5 23.0567 130.79 22.562 130.79 21.5629C130.79 20.5638 131.95 19.8022 133.66 19.8022C135.51 19.8022 137.3 20.3561 139.29 21.5629L141.6 18.4766C139.32 16.9928 136.77 16.2311 134.11 16.2311C129.46 16.2311 126.52 18.4766 126.52 21.9389C126.52 24.8471 128.44 26.687 132.05 27.2014L135.55 27.7158C137.13 27.9532 137.82 28.4775 137.82 29.4173C137.82 30.5944 136.42 31.3561 134.29 31.3561C132.37 31.3561 130.51 30.7032 128.38 29.2788L126 32.4344C128.06 34.0567 131.04 34.9271 134.37 34.9271" fill="white"/>
+<path d="M172.7 84.6241H178.02L182.92 67.7265L187.75 84.6241H193.1L198.49 60.3858H193.45L190.12 76.7689L185.36 60.3858H180.57L175.81 76.7689L172.48 60.3858H167.27L172.7 84.6241ZM152.89 80.3997C148.51 80.3997 145.15 76.9668 145.15 72.5049C145.15 68.0431 148.51 64.6102 152.89 64.6102C157.27 64.6102 160.66 68.0036 160.66 72.5049C160.66 77.0063 157.3 80.3997 152.89 80.3997ZM152.89 85C160.17 85 165.84 79.4994 165.84 72.4951C165.84 65.4907 160.17 60 152.89 60C145.61 60 139.94 65.5006 139.94 72.4951C139.94 79.4895 145.65 85 152.89 85ZM120.4 84.6241H138.88V80.1919H125.48V60.3858H120.41V84.6241H120.4ZM97 84.6241H102.07V74.6913H111.28V70.467H102.07V64.7487H115.93V60.3858H97V84.6241Z" fill="#FFD631"/>
+</svg>
--- a/EnvelopeGenerator.Web/wwwroot/js/app.js
+++ b/EnvelopeGenerator.Web/wwwroot/js/app.js
@@ -48,7 +48,7 @@ class App {

        // Load PSPDFKit
        this.Instance = await UI.loadPSPDFKit(arrayBuffer, this.container, this.licenseKey, this.locale)
-        UI.configurePSPDFKit(this.Instance, this.handleClick.bind(this))
+        UI.addToolbarItems(this.Instance, this.handleClick.bind(this))

        this.Instance.addEventListener(
            'annotations.load',
@@ -87,6 +87,7 @@ class App {
        //add click events of external buttons
        [...document.getElementsByClassName('btn_refresh')].forEach(btn => btn.addEventListener('click', _ => this.handleClick('RESET')));
        [...document.getElementsByClassName('btn_complete')].forEach(btn => btn.addEventListener('click', _ => this.handleClick('FINISH')));
+        [...document.getElementsByClassName('btn_reject')].forEach(btn => btn.addEventListener('click', _ => this.handleClick('REJECT')));
    }

    handleAnnotationsLoad(loadedAnnotations) {
@@ -149,8 +150,7 @@ class App {
                        icon: 'info',
                    })
                }
-
-                break
+                break;

            case 'FINISH':
                result = await this.handleFinish(null)
@@ -159,23 +159,70 @@ class App {
                    // Redirect to success page after saving to database
                    window.location.href = `/EnvelopeKey/${this.envelopeKey}/Success`
                }
-
-                break
+                break;

            case 'REJECT':
-                alert('Dokument abgelent!')
+                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: true,
+                    confirmButtonColor: "#3085d6",
+                    cancelButtonColor: "#d33",
+                    confirmButtonText: localized.complete,
+                    cancelButtonText: localized.back,
+                    showLoaderOnConfirm: true,
+                    preConfirm: async (reason) => {
+                        try {
+                            var res = await rejectEnvelope(reason);
+                            return res;
+                        } catch (error) {
+                            Swal.showValidationMessage(`
+                          Request failed: ${error}
+                        `);
+                        }
+                    },
+                    allowOutsideClick: () => !Swal.isLoading()
+                }).then((result) => {
+                    if (!result.isConfirmed)
+                        return;
+                    const res = result.value;
+                    if (res.ok) {
+                        redirRejected()
+                    }
+                    else
+                        Swal.showValidationMessage(`Request failed: ${res.message}`);
+                });
+                break;
+            case 'COPY_URL':
+                const url = window.location.href;
+                navigator.clipboard.writeText(url).then(function () {
+                    bsNotify('Kopiert', { alert_type: 'success', delay: 4, icon_name: 'check_circle' });
+                }).catch(function (err) {
+                    bsNotify('Unerwarteter Fehler', { alert_type: 'danger', delay: 4, icon_name: 'error' });
+                });
+                break;
+
+            case 'SHARE':
+                // Show the modal
+                Comp.ShareBackdrop.show();
+                break;
        }
    }

    async handleFinish(event) {
        const iJSON = await this.Instance.exportInstantJSON()
        const iFormFieldValues = await iJSON.formFieldValues;
-        
+
        //check required
        const iReqFields = iFormFieldValues.filter(f => Annotation.isFieldRequired(f))
        const hasEmptyReq = iReqFields.some(f => (f.value === undefined || f.value === null || f.value === ""))

-        if (hasEmptyReq){
+        if (hasEmptyReq) {
            Swal.fire({
                title: 'Warnung',
                text: 'Bitte füllen Sie alle Standortinformationen vollständig aus!',
@@ -187,8 +234,8 @@ class App {
        //check city
        const city_regex = new RegExp("^[a-zA-Z\\u0080-\\u024F]+(?:([\\ \\-\\']|(\\.\\ ))[a-zA-Z\\u0080-\\u024F]+)*$")
        const iCityFields = iFormFieldValues.filter(f => Annotation.isCityField(f))
-        for(var f of iCityFields)
-            if(!city_regex.test(f.value)){
+        for (var f of iCityFields)
+            if (!city_regex.test(f.value)) {
                Swal.fire({
                    title: 'Warnung',
                    text: `Bitte überprüfen Sie die eingegebene Ortsangabe "${f.value}" auf korrekte Formatierung. Beispiele für richtige Formate sind: München, Île-de-France, Sauðárkrókur, San Francisco, St. Catharines usw.`,
--- a/EnvelopeGenerator.Web/wwwroot/js/app.min.js
+++ b/EnvelopeGenerator.Web/wwwroot/js/app.min.js
@@ -1 +1,3 @@
-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}}
+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.addToolbarItems(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")));[...document.getElementsByClassName("btn_reject")].forEach(n=>n.addEventListener("click",()=>this.handleClick("REJECT")))}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":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}`)}});break;case"COPY_URL":const n=window.location.href;navigator.clipboard.writeText(n).then(function(){bsNotify("Kopiert",{alert_type:"success",delay:4,icon_name:"check_circle"})}).catch(function(){bsNotify("Unerwarteter Fehler",{alert_type:"danger",delay:4,icon_name:"error"})});break;case"SHARE":Comp.ShareBackdrop.show()}}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}}
--- a/EnvelopeGenerator.Web/wwwroot/js/event-binder.js
+++ b/EnvelopeGenerator.Web/wwwroot/js/event-binder.js
@@ -1,40 +1,17 @@
-$('.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: true,
-        confirmButtonColor: "#3085d6",
-        cancelButtonColor: "#d33",
-        confirmButtonText: localized.complete,
-        cancelButtonText: localized.back,
-        showLoaderOnConfirm: true,
-        preConfirm: async (reason) => {
-            try {
-                var res = await rejectEnvelope(reason);
-                return res;
-            } catch (error) {
-                Swal.showValidationMessage(`
-          Request failed: ${error}
-        `);
-            }
-        },
-        allowOutsideClick: () => !Swal.isLoading()
-    }).then((result) => {
-        if (!result.isConfirmed)
-            return;
-        const res = result.value;
-        if (res.ok) {
-            redirRejected()
+document.querySelectorAll('.email-input').forEach(input => {
+    input.addEventListener('input', function () {
+        if (/^\S+@\S+\.\S+$/.test(this.value)) {
+            this.classList.remove('is-invalid');
+        } else {
+            this.classList.add('is-invalid');
        }
-        else
-            Swal.showValidationMessage(`Request failed: ${res.message}`);
-    }));
+    });
+});

+const bsNotify = (message, options) => alertify.notify(
+    `<div class="alert ${options.alert_type ? 'alert-' + options.alert_type : ''}" role="alert"><span class="material-symbols-outlined">${options?.icon_name ?? ''}</span><p>${message}</p></div>`,
+    'custom',
+    options?.delay ?? 5);

 class Comp {
    static ActPanel = class {
@@ -68,7 +45,7 @@ class Comp {
    static SignatureProgress = class {
        static __SignatureCount;
        static get SignatureCount() {
-            this.__SignatureCount = parseInt(document.getElementById("signature-count").innerText);            
+            this.__SignatureCount = parseInt(document.getElementById("signature-count").innerText);
            return this.__SignatureCount;
        }

@@ -96,4 +73,10 @@ class Comp {
            return this.__SignedCountBar;
        }
    }
+
+    static __ShareBackdrop;
+    static get ShareBackdrop() {
+        Comp.__ShareBackdrop ??= new bootstrap.Modal(document.getElementById('shareBackdrop'));
+        return this.__ShareBackdrop;
+    }
 }
--- a/EnvelopeGenerator.Web/wwwroot/js/event-binder.min.js
+++ b/EnvelopeGenerator.Web/wwwroot/js/event-binder.min.js
@@ -1,3 +1 @@
-$(".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"}};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}};}
+document.querySelectorAll(".email-input").forEach(n=>{n.addEventListener("input",function(){/^\S+@\S+\.\S+$/.test(this.value)?this.classList.remove("is-invalid"):this.classList.add("is-invalid")})});const bsNotify=(n,t)=>alertify.notify(`<div class="alert ${t.alert_type?"alert-"+t.alert_type:""}" role="alert"><span class="material-symbols-outlined">${t?.icon_name??""}</span><p>${n}</p></div>`,"custom",t?.delay??5);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}};static __ShareBackdrop;static get ShareBackdrop(){return Comp.__ShareBackdrop??=new bootstrap.Modal(document.getElementById("shareBackdrop")),this.__ShareBackdrop}}
--- a/EnvelopeGenerator.Web/wwwroot/js/ui.js
+++ b/EnvelopeGenerator.Web/wwwroot/js/ui.js
@@ -10,6 +10,7 @@
    'zoom-mode',
    'spacer',
    'search',
+    'export-pdf'
  ]

  // Load the PSPDFKit UI by setting a target element as the container to render in
@@ -49,9 +50,17 @@
    return UI.Instance;
  }

-  static configurePSPDFKit(instance, handler) {
-    const toolbarItems = UI.getToolbarItems(instance, handler)
-    toolbarItems.push({type: "export-pdf"})
+  static addToolbarItems(instance, handler) {
+    var toolbarItems = instance.toolbarItems.filter((item) => UI.allowedToolbarItems.includes(item.type));
+
+    if (IS_READONLY)    
+      toolbarItems = toolbarItems.concat(UI.getReadOnlyItems(handler));
+    else
+      toolbarItems = toolbarItems.concat(UI.getWritableItems(handler));
+
+    if (!IS_DESKTOP && !IS_READONLY)
+      toolbarItems = toolbarItems.concat(UI.getMobileWritableItems(handler));
+
    instance.setToolbarItems(toolbarItems)
  }

@@ -60,12 +69,6 @@
    return null
  }

-  static getToolbarItems(instance, handler) {
-    const customItems = UI.getCustomItems(handler)
-    const defaultItems = UI.getDefaultItems(instance.toolbarItems)
-    return defaultItems.concat(customItems)
-  }
-
  static createElementFromHTML(html) {
    const el = document.createElement('div')
    el.innerHTML = html.trim()
@@ -73,21 +76,54 @@
    return el.firstChild
  }

-  static getCustomItems = function (callback) {
-    return []
+  static getWritableItems = function (callback) {
    return [
      {
        type: 'custom',
-        id: 'button-reset',
-        className: 'button-reset',
-        title: 'Zurücksetzen',
+        id: 'button-share',
+        className: 'button-share',
+        title: 'Teilen',
        onPress() {
-          callback('RESET')
+          callback('SHARE')
        },
-        icon: `<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>`,
+        icon: `<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M20 13V17.5C20 20.5577 16 20.5 12 20.5C8 20.5 4 20.5577 4 17.5V13M12 3L12 15M12 3L16 7M12 3L8 7" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>`,
+      }
+    ];
+  }
+
+  static getReadOnlyItems = function (callback) {
+    return [
+      {
+        type: 'custom',
+        id: 'button-copy-url',
+        className: 'button-copy-url',
+        title: 'Teilen',
+        onPress() {
+          callback('COPY_URL')
+        },
+        icon: `<svg viewBox="4 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M15 3H9C6.79086 3 5 4.79086 5 7V15" stroke="#222222"/>
+                <path d="M8.5 11.5C8.5 10.3156 8.50074 9.46912 8.57435 8.81625C8.64681 8.17346 8.78457 7.78051 9.01662 7.4781C9.14962 7.30477 9.30477 7.14962 9.4781 7.01662C9.78051 6.78457 10.1735 6.64681 10.8163 6.57435C11.4691 6.50074 12.3156 6.5 13.5 6.5C14.6844 6.5 15.5309 6.50074 16.1837 6.57435C16.8265 6.64681 17.2195 6.78457 17.5219 7.01662C17.6952 7.14962 17.8504 7.30477 17.9834 7.4781C18.2154 7.78051 18.3532 8.17346 18.4257 8.81625C18.4993 9.46912 18.5 10.3156 18.5 11.5V15.5C18.5 16.6844 18.4993 17.5309 18.4257 18.1837C18.3532 18.8265 18.2154 19.2195 17.9834 19.5219C17.8504 19.6952 17.6952 19.8504 17.5219 19.9834C17.2195 20.2154 16.8265 20.3532 16.1837 20.4257C15.5309 20.4993 14.6844 20.5 13.5 20.5C12.3156 20.5 11.4691 20.4993 10.8163 20.4257C10.1735 20.3532 9.78051 20.2154 9.4781 19.9834C9.30477 19.8504 9.14962 19.6952 9.01662 19.5219C8.78457 19.2195 8.64681 18.8265 8.57435 18.1837C8.50074 17.5309 8.5 16.6844 8.5 15.5V11.5Z" stroke="#222222"/>
+              </svg>`,
+      }
+    ];
+  }
+
+  static getMobileWritableItems = function (callback) {
+    return [
+      {
+        type: 'custom',
+        id: 'button-finish',
+        className: 'button-finish',
+        onPress() {
+          callback('FINISH')
+        },
+        icon: `<svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="-4 -4 26 26">
+                  <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>`
      },
      {
        type: 'custom',
@@ -97,24 +133,24 @@
        onPress() {
          callback('REJECT')
        },
-        icon: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-hand-thumbs-down" viewBox="0 0 16 16">
-                        <path d="M8.864 15.674c-.956.24-1.843-.484-1.908-1.42-.072-1.05-.23-2.015-.428-2.59-.125-.36-.479-1.012-1.04-1.638-.557-.624-1.282-1.179-2.131-1.41C2.685 8.432 2 7.85 2 7V3c0-.845.682-1.464 1.448-1.546 1.07-.113 1.564-.415 2.068-.723l.048-.029c.272-.166.578-.349.97-.484C6.931.08 7.395 0 8 0h3.5c.937 0 1.599.478 1.934 1.064.164.287.254.607.254.913 0 .152-.023.312-.077.464.201.262.38.577.488.9.11.33.172.762.004 1.15.069.13.12.268.159.403.077.27.113.567.113.856 0 .289-.036.586-.113.856-.035.12-.08.244-.138.363.394.571.418 1.2.234 1.733-.206.592-.682 1.1-1.2 1.272-.847.283-1.803.276-2.516.211a9.877 9.877 0 0 1-.443-.05 9.364 9.364 0 0 1-.062 4.51c-.138.508-.55.848-1.012.964zM11.5 1H8c-.51 0-.863.068-1.14.163-.281.097-.506.229-.776.393l-.04.025c-.555.338-1.198.73-2.49.868-.333.035-.554.29-.554.55V7c0 .255.226.543.62.65 1.095.3 1.977.997 2.614 1.709.635.71 1.064 1.475 1.238 1.977.243.7.407 1.768.482 2.85.025.362.36.595.667.518l.262-.065c.16-.04.258-.144.288-.255a8.34 8.34 0 0 0-.145-4.726.5.5 0 0 1 .595-.643h.003l.014.004.058.013a8.912 8.912 0 0 0 1.036.157c.663.06 1.457.054 2.11-.163.175-.059.45-.301.57-.651.107-.308.087-.67-.266-1.021L12.793 7l.353-.354c.043-.042.105-.14.154-.315.048-.167.075-.37.075-.581 0-.211-.027-.414-.075-.581-.05-.174-.111-.273-.154-.315l-.353-.354.353-.354c.047-.047.109-.176.005-.488a2.224 2.224 0 0 0-.505-.804l-.353-.354.353-.354c.006-.005.041-.05.041-.17a.866.866 0 0 0-.121-.415C12.4 1.272 12.063 1 11.5 1"/>
-                      </svg>`,
+        icon: `<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>`,
      },
      {
        type: 'custom',
-        id: 'button-finish',
-        className: 'button-finish',
-        title: 'Abschließen',
+        id: 'button-reset',
+        className: 'button-reset',
+        title: 'Zurücksetzen',
        onPress() {
-          callback('FINISH')
+          callback('RESET')
        },
-      },
-    ]
-  }
-
-  static getDefaultItems(items) {
-    return items.filter((item) => UI.allowedToolbarItems.includes(item.type))
+        icon: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="-1 -1 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>`,
+      }
+    ];
  }

  static getPresets() {
--- a/EnvelopeGenerator.Web/wwwroot/js/ui.min.js
+++ b/EnvelopeGenerator.Web/wwwroot/js/ui.min.js
@@ -1,7 +1,15 @@
-class UI{static allowedToolbarItems=["sidebar-thumbnails","sidebar-document-ouline","sidebar-bookmarks","pager","pan","zoom-out","zoom-in","zoom-mode","spacer","search",];static Instance
-  static loadPSPDFKit(n,t,i,r){return UI.Instance=PSPDFKit.load({inlineWorkers:!1,locale:r,licenseKey:i,styleSheets:["/css/site.css"],container:t,document:n,annotationPresets:UI.getPresets(),electronicSignatures:{creationModes:["DRAW","TYPE","IMAGE"]},initialViewState:new PSPDFKit.ViewState({sidebarMode:PSPDFKit.SidebarMode.THUMBNAILS}),isEditableAnnotation:function(n){return n.isSignature||n.description=="FRAME"?!1:!0},customRenderers:{Annotation:UI.annotationRenderer}}),UI.Instance}static configurePSPDFKit(n,t){const i=UI.getToolbarItems(n,t);i.push({type:"export-pdf"});n.setToolbarItems(i)}static annotationRenderer(){return null}static getToolbarItems(n,t){const i=UI.getCustomItems(t),r=UI.getDefaultItems(n.toolbarItems);return r.concat(i)}static createElementFromHTML(n){const t=document.createElement("div");return t.innerHTML=n.trim(),t.firstChild}static getCustomItems=function(n){return[];return[{type:"custom",id:"button-reset",className:"button-reset",title:"Zurücksetzen",onPress(){n("RESET")},icon:`<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>`},{type:"custom",id:"button-reject",className:"button-reject",title:"Ablehnen",onPress(){n("REJECT")},icon:`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-hand-thumbs-down" viewBox="0 0 16 16">
-                        <path d="M8.864 15.674c-.956.24-1.843-.484-1.908-1.42-.072-1.05-.23-2.015-.428-2.59-.125-.36-.479-1.012-1.04-1.638-.557-.624-1.282-1.179-2.131-1.41C2.685 8.432 2 7.85 2 7V3c0-.845.682-1.464 1.448-1.546 1.07-.113 1.564-.415 2.068-.723l.048-.029c.272-.166.578-.349.97-.484C6.931.08 7.395 0 8 0h3.5c.937 0 1.599.478 1.934 1.064.164.287.254.607.254.913 0 .152-.023.312-.077.464.201.262.38.577.488.9.11.33.172.762.004 1.15.069.13.12.268.159.403.077.27.113.567.113.856 0 .289-.036.586-.113.856-.035.12-.08.244-.138.363.394.571.418 1.2.234 1.733-.206.592-.682 1.1-1.2 1.272-.847.283-1.803.276-2.516.211a9.877 9.877 0 0 1-.443-.05 9.364 9.364 0 0 1-.062 4.51c-.138.508-.55.848-1.012.964zM11.5 1H8c-.51 0-.863.068-1.14.163-.281.097-.506.229-.776.393l-.04.025c-.555.338-1.198.73-2.49.868-.333.035-.554.29-.554.55V7c0 .255.226.543.62.65 1.095.3 1.977.997 2.614 1.709.635.71 1.064 1.475 1.238 1.977.243.7.407 1.768.482 2.85.025.362.36.595.667.518l.262-.065c.16-.04.258-.144.288-.255a8.34 8.34 0 0 0-.145-4.726.5.5 0 0 1 .595-.643h.003l.014.004.058.013a8.912 8.912 0 0 0 1.036.157c.663.06 1.457.054 2.11-.163.175-.059.45-.301.57-.651.107-.308.087-.67-.266-1.021L12.793 7l.353-.354c.043-.042.105-.14.154-.315.048-.167.075-.37.075-.581 0-.211-.027-.414-.075-.581-.05-.174-.111-.273-.154-.315l-.353-.354.353-.354c.047-.047.109-.176.005-.488a2.224 2.224 0 0 0-.505-.804l-.353-.354.353-.354c.006-.005.041-.05.041-.17a.866.866 0 0 0-.121-.415C12.4 1.272 12.063 1 11.5 1"/>
-                      </svg>`},{type:"custom",id:"button-finish",className:"button-finish",title:"Abschließen",onPress(){n("FINISH")}},]};static getDefaultItems(n){return n.filter(n=>UI.allowedToolbarItems.includes(n.type))}static getPresets(){const n=PSPDFKit.defaultAnnotationPresets;return n.ink={lineWidth:10},n.widget={readOnly:!0},n}}
+class UI{static allowedToolbarItems=["sidebar-thumbnails","sidebar-document-ouline","sidebar-bookmarks","pager","pan","zoom-out","zoom-in","zoom-mode","spacer","search","export-pdf"];static Instance
+  static loadPSPDFKit(n,t,i,r){return UI.Instance=PSPDFKit.load({inlineWorkers:!1,locale:r,licenseKey:i,styleSheets:["/css/site.css"],container:t,document:n,annotationPresets:UI.getPresets(),electronicSignatures:{creationModes:["DRAW","TYPE","IMAGE"]},initialViewState:new PSPDFKit.ViewState({sidebarMode:PSPDFKit.SidebarMode.THUMBNAILS}),isEditableAnnotation:function(n){return n.isSignature||n.description=="FRAME"?!1:!0},customRenderers:{Annotation:UI.annotationRenderer}}),UI.Instance}static addToolbarItems(n,t){var i=n.toolbarItems.filter(n=>UI.allowedToolbarItems.includes(n.type));i=IS_READONLY?i.concat(UI.getReadOnlyItems(t)):i.concat(UI.getWritableItems(t));IS_DESKTOP||IS_READONLY||(i=i.concat(UI.getMobileWritableItems(t)));n.setToolbarItems(i)}static annotationRenderer(){return null}static createElementFromHTML(n){const t=document.createElement("div");return t.innerHTML=n.trim(),t.firstChild}static getWritableItems=function(n){return[{type:"custom",id:"button-share",className:"button-share",title:"Teilen",onPress(){n("SHARE")},icon:`<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M20 13V17.5C20 20.5577 16 20.5 12 20.5C8 20.5 4 20.5577 4 17.5V13M12 3L12 15M12 3L16 7M12 3L8 7" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>`}]};static getReadOnlyItems=function(n){return[{type:"custom",id:"button-copy-url",className:"button-copy-url",title:"Teilen",onPress(){n("COPY_URL")},icon:`<svg viewBox="4 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M15 3H9C6.79086 3 5 4.79086 5 7V15" stroke="#222222"/>
+                <path d="M8.5 11.5C8.5 10.3156 8.50074 9.46912 8.57435 8.81625C8.64681 8.17346 8.78457 7.78051 9.01662 7.4781C9.14962 7.30477 9.30477 7.14962 9.4781 7.01662C9.78051 6.78457 10.1735 6.64681 10.8163 6.57435C11.4691 6.50074 12.3156 6.5 13.5 6.5C14.6844 6.5 15.5309 6.50074 16.1837 6.57435C16.8265 6.64681 17.2195 6.78457 17.5219 7.01662C17.6952 7.14962 17.8504 7.30477 17.9834 7.4781C18.2154 7.78051 18.3532 8.17346 18.4257 8.81625C18.4993 9.46912 18.5 10.3156 18.5 11.5V15.5C18.5 16.6844 18.4993 17.5309 18.4257 18.1837C18.3532 18.8265 18.2154 19.2195 17.9834 19.5219C17.8504 19.6952 17.6952 19.8504 17.5219 19.9834C17.2195 20.2154 16.8265 20.3532 16.1837 20.4257C15.5309 20.4993 14.6844 20.5 13.5 20.5C12.3156 20.5 11.4691 20.4993 10.8163 20.4257C10.1735 20.3532 9.78051 20.2154 9.4781 19.9834C9.30477 19.8504 9.14962 19.6952 9.01662 19.5219C8.78457 19.2195 8.64681 18.8265 8.57435 18.1837C8.50074 17.5309 8.5 16.6844 8.5 15.5V11.5Z" stroke="#222222"/>
+              </svg>`}]};static getMobileWritableItems=function(n){return[{type:"custom",id:"button-finish",className:"button-finish",onPress(){n("FINISH")},icon:`<svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="-4 -4 26 26">
+                  <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>`},{type:"custom",id:"button-reject",className:"button-reject",title:"Ablehnen",onPress(){n("REJECT")},icon:`<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>`},{type:"custom",id:"button-reset",className:"button-reset",title:"Zurücksetzen",onPress(){n("RESET")},icon:`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="-1 -1 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>`}]};static getPresets(){const n=PSPDFKit.defaultAnnotationPresets;return n.ink={lineWidth:10},n.widget={readOnly:!0},n}}
Author	SHA1	Message	Date
Developer 02	891f6368f1	refactor(card.css): CSS der footer für Reaktionsfähigkeit bearbeitet	2024-10-16 02:11:07 +02:00
Developer 02	e6011b6201	refactor(card.css): CSS des Kopfbereichs für Reaktionsfähigkeit bearbeitet	2024-10-16 01:54:02 +02:00
Developer 02	8b86114998	refactor (card.css): unnötiges CSS entfernt	2024-10-16 00:31:32 +02:00
Developer 02	c20b115faf	feat(logo): minimiertes Logo hinzugefügt	2024-10-16 00:11:14 +02:00
Developer 02	2c8ccd3e7c	feat: signFlow-Logo hinzufügen	2024-10-14 19:18:40 +02:00
Developer 02	b1f771c320	feat: Kopierschaltfläche von der linken Navigationsleiste in die pspdf-kit Symbolleiste verschoben.	2024-10-14 18:54:29 +02:00
Developer 02	425645a610	feat: neue Klasse für Desktop-Schaltflächen mit dem Namen 'btn-desktop' erstellt - CSS hinzugefügt, um die Klasse btn-desktop auszublenden, wenn die Breite weniger als 1024px beträgt.	2024-10-14 17:41:51 +02:00
Developer 02	24e6ffc5ef	feat: CSS mit Bootstrap für mobil beschreibbare Toolbar-Elemente anordnen	2024-10-14 17:24:49 +02:00
Developer 02	1dd9ce6bbc	feat: Aktivieren Sie die Schaltfläche für die mobile Ablehnung. - Ereignis hinzugefügt. - In die Mitte der Schaltflächenleiste verschoben	2024-10-14 17:06:01 +02:00
Developer 02	e528fa6409	feat: getMobileItems umbenennen in getMobileWritableItems	2024-10-14 16:05:27 +02:00
Developer 02	6440dd09d1	feat: Erstellung der konstanten Variablen DEVICE_TYPE und IS_DESKTOP. - Aufteilung der benutzerdefinierten Symbolleistenelemente in writableItems und mobileItems - beide werden abhängig von der jeweiligen Bedingung hinzugefügt	2024-10-14 15:44:21 +02:00
Developer 02	869493bd97	feat: Globale Konstante isReadOnly-Wert erstellt. - Constraint für ReadOnly-Schaltfläche mit isReadOnly-Wert hinzugefügt	2024-10-14 14:02:02 +02:00
Developer 02	1cb9042736	feat(ui.js): Freigabe-Schaltfläche als Symbolleisten-Schaltfläche hinzugefügt. - Share-Button auf der linken Seite der Kopfzeile entfernt	2024-10-14 11:27:41 +02:00
Developer 02	c9410a1e2e	feat(ReadOnlyController): Try-Catch zur 'CreateAsync'-Methode hinzugefügt. - Unnötige Testmethoden wurden aus dem Controller entfernt.	2024-10-14 09:38:16 +02:00
Developer 02	c4f0ce7d4b	feat: bsNotify-Methode und Benachrichtigung für Clipboard-Kopie hinzufügen - Implementierung der bsNotify-Methode für benutzerdefinierte Benachrichtigungen mit alertify. - Hinzufügen von benutzerdefinierten Styles für den benutzerdefinierten Benachrichtigungstyp von alertify. - Hinzufügen der Clipboard-Kopie-Funktionalität mit Erfolgs- und Fehlerbenachrichtigungen.	2024-10-11 14:15:06 +02:00
Developer 02	dc83486032	feat(ShowEnvelope): Nachricht auf Popup-Seite zum Teilen hinzugefügt	2024-10-11 09:51:02 +02:00
Developer 02	2a64091c87	feat: Funktionalität des Datumsauswählers zum Eingabefeld hinzufügen - Einen Datumsauswähler implementiert, der beim Fokussieren des Eingabefeldes und beim Klicken auf das Kalendersymbol geöffnet wird. - Sicherstellt, dass das Eingabefeld keine manuelle Dateneingabe zulässt, während der Kalender weiterhin angezeigt werden kann. - Das `onkeydown`-Ereignis verwendet, um manuelle Eingaben zu verhindern und die Datenauswahl ausschließlich über den Datumsauswähler zu ermöglichen.	2024-10-11 00:59:00 +02:00
Developer 02	f65f749208	feat(ShowEnvelope): Der Rücksetzwert des Verfallsdatums der Briefumschlag-Aktie wird auf das Datum eine Woche später statt auf den leeren String gesetzt.	2024-10-11 00:45:37 +02:00
Developer 02	0b6ed00062	feat(EnvelopeReceiverReadOnlyCreateDto): EmailAddress und Required Attribute zu ReceiverMail hinzugefügt.	2024-10-11 00:36:18 +02:00
Developer 02	e87c976e19	fix(ShowEnvelope): Logik der E-Mail-Formatprüfung korrigiert	2024-10-10 22:00:52 +02:00
Developer 02	f31ece3a59	feat(ShowEnvelope): Logik zur Überprüfung des E-Mail-Formats hinzugefügt. Zeigt eine Fehlermeldung, wenn das Format falsch ist.	2024-10-10 21:56:32 +02:00
Developer 02	cfd08602ab	feat(ShowEnvelope): Logik zur Überprüfung des Datums hinzugefügt. Wenn es weniger als einen Tag beträgt, wird eine Fehlermeldung angezeigt.	2024-10-10 21:46:06 +02:00
Developer 02	4b7152b272	feat(ShowEnvelope): Die Attribute min, max und value wurden zu readonly-date-valid hinzugefügt.	2024-10-10 20:47:55 +02:00
Developer 02	5117a66c81	feat(ShowEnvelope): Standarddatum nach 3 Tagen setzen	2024-10-10 19:30:19 +02:00
Developer 02	83794d4bbc	feat: add email validation and toggle 'is-invalid' class for inputs with 'email-input' class	2024-10-10 19:21:15 +02:00
Developer 02	76f74778b4	feat(ShowEnvelope): Swal-Nachrichten zur Umschlagfreigabe-Anforderung hinzugefügt	2024-10-10 18:53:35 +02:00