Add signed result page and update navigation flow
Introduced a new `/envelope/signed-result` page to confirm successful document signing with localized messages and a visually appealing UI. Updated `ReceiverSignedPage.razor` to redirect users to the new page after signing. Enhanced styles in `app.css` for the signed result page, including responsive layout, theme-specific designs, and typography improvements. Added support for localization using `IStringLocalizer` with fallback strings in German. Improves user experience by providing clear feedback and a polished confirmation page after signing.
This commit is contained in:
@@ -0,0 +1,29 @@
|
||||
@page "/envelope/signed-result"
|
||||
@rendermode InteractiveWebAssembly
|
||||
@using EnvelopeGenerator.Application.Resources
|
||||
@using Microsoft.Extensions.Localization
|
||||
@inject IStringLocalizer<Resource> UiLocalizer
|
||||
|
||||
<div class="receiver-signed-result-page">
|
||||
<div class="receiver-signed-result-card">
|
||||
<div class="receiver-signed-result-icon" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0z" />
|
||||
<path d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h1 class="receiver-signed-result-title">@L("DocumentSuccessfullySigned", "Dokument erfolgreich unterzeichnet")</h1>
|
||||
<p class="receiver-signed-result-message">
|
||||
@L("DocumentSignedConfirmationMessage", "Vielen Dank. Ihre Unterschrift wurde erfolgreich gespeichert und an die beteiligten Parteien übermittelt.")
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
string L(string key, string fallback)
|
||||
{
|
||||
var value = UiLocalizer[key];
|
||||
return value.ResourceNotFound ? fallback : value.Value;
|
||||
}
|
||||
}
|
||||
@@ -174,7 +174,7 @@
|
||||
_submitConfirmVisible = false;
|
||||
await InvokeAsync(StateHasChanged);
|
||||
await AuthService.LogoutEnvelopeReceiverAsync(EnvelopeKey!);
|
||||
Navigation.NavigateTo("/", forceLoad: true);
|
||||
Navigation.NavigateTo("/envelope/signed-result", forceLoad: true);
|
||||
}
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
|
||||
@@ -345,6 +345,83 @@ article {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Signed result page */
|
||||
.receiver-signed-result-page {
|
||||
min-height: calc(100vh - 36px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem 1rem;
|
||||
background: linear-gradient(160deg, #1e2e3e 0%, #2c3e50 40%, #3498db 100%);
|
||||
}
|
||||
|
||||
.receiver-signed-result-card {
|
||||
width: min(680px, 100%);
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
border: 1px solid rgba(255, 255, 255, 0.7);
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 18px 44px rgba(15, 23, 42, 0.24);
|
||||
padding: 2rem 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.receiver-signed-result-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 92px;
|
||||
height: 92px;
|
||||
border-radius: 50%;
|
||||
color: #0f8f58;
|
||||
background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
|
||||
border: 1px solid #86efac;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.receiver-signed-result-title {
|
||||
margin: 0;
|
||||
color: #1f2937;
|
||||
font-size: 1.7rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.receiver-signed-result-message {
|
||||
margin: 0.85rem auto 0;
|
||||
max-width: 58ch;
|
||||
color: #4b5563;
|
||||
font-size: 1rem;
|
||||
line-height: 1.62;
|
||||
}
|
||||
|
||||
[data-sf-theme="purple"] .receiver-signed-result-page {
|
||||
background: linear-gradient(160deg, #1a0533 0%, #3b0764 45%, #6b21a8 100%);
|
||||
}
|
||||
|
||||
[data-sf-theme="blazing-dark"] .receiver-signed-result-page {
|
||||
background: linear-gradient(160deg, #0a0f1e 0%, #111827 50%, #1e1b4b 100%);
|
||||
}
|
||||
|
||||
[data-sf-theme="blazing-dark"] .receiver-signed-result-card {
|
||||
background: rgba(15, 20, 40, 0.94);
|
||||
border-color: rgba(129, 140, 248, 0.28);
|
||||
box-shadow: 0 20px 46px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
[data-sf-theme="blazing-dark"] .receiver-signed-result-title {
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
}
|
||||
|
||||
[data-sf-theme="blazing-dark"] .receiver-signed-result-message {
|
||||
color: rgba(255, 255, 255, 0.68);
|
||||
}
|
||||
|
||||
[data-sf-theme="blazing-dark"] .receiver-signed-result-icon {
|
||||
color: #86efac;
|
||||
background: rgba(16, 185, 129, 0.16);
|
||||
border-color: rgba(110, 231, 183, 0.35);
|
||||
}
|
||||
|
||||
/* ── Logos ───────────────────────────────────────────────────────────────── */
|
||||
/* Heights are controlled by inline style="height: Xpx" from appsettings.json */
|
||||
|
||||
|
||||
Reference in New Issue
Block a user