AppStd/EnvelopeGenerator
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Verbesserung der Benutzeroberfläche und Funktionalität des Sprachauswahl-Dropdown-Menüs

Browse Source
This commit is contained in:
Developer 02 2024-05-13 16:27:46 +02:00
parent ef6e921451
commit db83f25d57
9 changed files with 154 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
EnvelopeGenerator.Web/Controllers/HomeController.cs
View File

@ -37,7 +37,7 @@ namespace EnvelopeGenerator.Web.Controllers
_urlEncoder = urlEncoder;
}
[HttpGet("/EnvelopeKey/{envelopeReceiverId}")]
[HttpGet("EnvelopeKey/{envelopeReceiverId}")]
public async Task<IActionResult> SendAccessCode([FromRoute] string envelopeReceiverId)
{
try
@ -97,7 +97,7 @@ namespace EnvelopeGenerator.Web.Controllers
}
}
[HttpPost("/EnvelopeKey/{envelopeReceiverId}/Locked")]
[HttpPost("EnvelopeKey/{envelopeReceiverId}/Locked")]
public async Task<IActionResult> LogInEnvelope([FromRoute] string envelopeReceiverId, [FromForm] string access_code)
{
try
@ -131,7 +131,7 @@ namespace EnvelopeGenerator.Web.Controllers
database.Services.actionService.EnterCorrectAccessCode(response.Envelope, response.Receiver); //for history
ViewData["EnvelopeKey"] = envelopeReceiverId;
if (response.Envelope.Documents.Count() > 0)
if (response.Envelope.Documents.Count > 0)
{
var document = await envelopeOldService.GetDocument(response.Envelope.Documents[0].Id, envelopeReceiverId);
byte[] bytes = await envelopeOldService.GetDocumentContents(document);
@ -184,7 +184,7 @@ namespace EnvelopeGenerator.Web.Controllers
}
}
[HttpGet("/EnvelopeKey/{envelopeReceiverId}/Success")]
[HttpGet("EnvelopeKey/{envelopeReceiverId}/Success")]
public async Task<IActionResult> EnvelopeSigned(string envelopeReceiverId)
{
try

32
EnvelopeGenerator.Web/Program.cs
View File

@ -23,7 +23,9 @@ try
{
var builder = WebApplication.CreateBuilder(args);
var allowedOrigins = builder.Configuration.GetSection("AllowedOrigins").Get<string[]>() ??
var config = builder.Configuration;
var allowedOrigins = config.GetSection("AllowedOrigins").Get<string[]>() ??
throw new InvalidOperationException("AllowedOrigins section is missing in the configuration.");
builder.Services.AddCors(options =>
@ -53,18 +55,21 @@ try
//remove option for Test*Controller
options.Conventions.Add(new RemoveIfControllerConvention()
.AndIf(c => c.ControllerName.StartsWith("Test"))
.AndIf(c => !builder.Configuration.GetValue<bool>("AddTestControllers")));
.AndIf(c => !config.GetValue<bool>("EnableTestControllers")));
}).AddJsonOptions(q =>
{
// Prevents serialization error when serializing SvgBitmap in EnvelopeReceiver
q.JsonSerializerOptions.ReferenceHandler = System.Text.Json.Serialization.ReferenceHandler.IgnoreCycles;
});
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
if (config.GetValue<bool>("EnableSwagger"))
{
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
}
//AddEF Core dbcontext
var connStr = builder.Configuration["Config:ConnectionString"];
var connStr = config["Config:ConnectionString"];
builder.Services.AddDbContext<EGDbContext>(options =>
options.UseSqlServer(connStr));
@ -85,7 +90,6 @@ try
builder.Services.AddScoped<IReceiverRepository, ReceiverRepository>();
builder.Services.AddScoped<IUserReceiverRepository, UserReceiverRepository>();
builder.Services.AddScoped<IEmailOutRepository, EmailOutRepository>();
builder.Services.AddScoped<IConfigService, ConfigService>();
builder.Services.AddScoped<IDocumentReceiverElementService, DocumentReceiverElementService>();
builder.Services.AddScoped<IEnvelopeDocumentService, EnvelopeDocumentService>();
@ -147,7 +151,7 @@ try
};
});
builder.Services.AddSingleton(_ => builder.Configuration.GetSection("ContactLink").Get<ContactLink>() ?? new ContactLink());
builder.Services.AddSingleton(_ => config.GetSection("ContactLink").Get<ContactLink>() ?? new ContactLink());
builder.Services.AddCookieConsentSettings();
@ -172,13 +176,16 @@ try
app.UseHsts();
}
app.UseSwagger();
app.UseSwaggerUI();
if (config.GetValue<bool>("EnableSwagger"))
{
app.UseSwagger();
app.UseSwaggerUI();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
var csp = builder.Configuration["Content-Security-Policy"];
var csp = config["Content-Security-Policy"];
if(csp is not null)
app.Use(async (context, next) =>
{
@ -193,12 +200,13 @@ try
app.UseAuthentication();
app.UseAuthorization();
var languages = builder.Configuration.GetSection("Languages").Get<string[]>() ??
var languages = config.GetSection("Languages").Get<string[]>() ??
throw new InvalidOperationException("Languages section is missing in the configuration.");
if(languages.Length == 0)
throw new InvalidOperationException("There is no languages in languages section.");
app.UseCookieBasedLocalizer(languages);
if(!config.GetValue<bool>("DisableMultiLanguage"))
app.UseCookieBasedLocalizer(languages);
app.UseCors("SameOriginPolicy");

82
EnvelopeGenerator.Web/Views/Home/EnvelopeLocked.cshtml
View File

@ -3,7 +3,7 @@
var userLanguage = ViewData["UserLanguage"] as string;
var languages = ViewData["Languages"] as string[];
}
<div class="page container p-5">
<div class="page container py-5 px-2">
<header class="text-center">
<div class="icon locked">
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" fill="currentColor" class="bi bi-shield-lock" viewBox="0 0 16 16">
@ -16,28 +16,32 @@
<section class="text-center">
<p>Wir haben Ihnen gerade den Zugriffscode an die hinterlegte Email Adresse gesendet. Dies kann evtl. einige Minuten dauern.</p>
</section>
<section class="d-flex">
<form id="form-access-code" class="form pl-0 ml-0" method="post">
<div class="input">
<label class="visually-hidden" for="access_code">Zugriffscode</label>
<input type="password" id="access_code" class="form-control" name="access_code" placeholder="Zugriffscode" required="required">
</div>
<div class="button">
<button type="submit" class="btn btn-primary">Öffnen</button>
</div>
</form>
<form class="form pl-0 ml-0" method="post" action="/lang">
<div class="dropdown">
<select class="form-select" name="language" onchange="this.form.submit()">
@if(languages is not null)
foreach(var lang in languages)
{
<option data-icon="flag-icon flag-icon-us" value="@lang.TrySanitize(_sanitizer)">@_localizer[@lang].Value.TrySanitize(_sanitizer)</option>
}
</select>
</div>
</form>
</section>
<div class="row m-0 p-0">
<div class="col-8">
<form id="form-access-code" class="form ms-5" method="post">
<div class="input">
<label class="visually-hidden" for="access_code">Zugriffscode</label>
<input type="password" id="access_code" class="form-control" name="access_code" placeholder="Zugriffscode" required="required">
</div>
<div class="button">
<button type="submit" class="btn btn-primary">Öffnen</button>
</div>
</form>
</div>
<div class="col-4">
<form class="form ps-4" method="post" action="/lang">
<div class="dropdown dropdown-flag">
<select class="form-select select-flag" name="language" onchange="this.form.submit()">
@if (languages is not null)
foreach (var lang in languages)
{
<option class="select-option option-flag" value="@lang.TrySanitize(_sanitizer)">@_localizer[lang].Value.TrySanitize(_sanitizer)</option>
}
</select>
</div>
</form>
</div>
</div>
<section class="text-center">
<details>
<summary>Sie haben keinen Zugriffscode erhalten?</summary>
@ -45,4 +49,34 @@
</details>
</section>
</div>
<footer class="container" id="page-footer">&copy; SignFlow 2023-2024 <a href="https://digitaldata.works">Digital Data GmbH</a></footer>
<footer class="container" id="page-footer">&copy; SignFlow 2023-2024 <a href="https://digitaldata.works">Digital Data GmbH</a></footer>
<script>
$(document).ready(function () {
$('.select-flag').select2({
templateResult: formatResult,
templateSelection: formatSelection
});
});
function formatResult(state) {
if (!state.id) {
return state.text;
}
var baseUrl = "/img/flags";
var $state = $(
`<span style="font-size: 0.85rem;"><img src="${baseUrl}/${state.element.value}.png" class="img-flag me-3" />${state.text}</span>`
);
return $state;
};
function formatSelection(state) {
if (!state.id) {
return state.text;
}
var baseUrl = "/img/flags";
var $state = $(
`<span class="d-flex justify-content-center align-items-center"><img src="${baseUrl}/${state.element.value}.png" class="img-flag pt-1"/></span>`
);
return $state;
};
</script>

3
EnvelopeGenerator.Web/Views/Shared/_Layout.cshtml
View File

@ -13,6 +13,8 @@
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.0.0/css/flag-icons.min.css"/>
<!-- Select2 CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
</head>
<body>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
@ -29,6 +31,7 @@
<script src="~/js/app.js" asp-append-version="true"></script>
<script src="~/lib/pspdfkit/pspdfkit.js" asp-append-version="true"></script>
<script src="~/lib/bootstrap-cookie-consent-settings-main/bootstrap-cookie-consent-settings.js" asp-append-version="true"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" asp-append-version="true"></script>
@await RenderSectionAsync("Scripts", required: false)
<main role="main">
<partial name="_CookieConsentPartial" />

5
EnvelopeGenerator.Web/XSSExtensions.cs
View File

@ -1,4 +1,5 @@
using Ganss.Xss;
using Microsoft.Extensions.Localization;
using System.Text.Encodings.Web;
namespace EnvelopeGenerator.Web
@ -7,6 +8,10 @@ namespace EnvelopeGenerator.Web
{
public static string? TryEncode(this string? value, UrlEncoder encoder) => value is null ? value : encoder.Encode(value);
public static string? TryEncode(this LocalizedString? value, UrlEncoder encoder) => value is null ? null : encoder.Encode(value);
public static string? TrySanitize(this string? html, HtmlSanitizer sanitizer) => html is null ? html : sanitizer.Sanitize(html);
public static string? TrySanitize(this LocalizedString? html, HtmlSanitizer sanitizer) => html is null ? null : sanitizer.Sanitize(html);
}
}

13
EnvelopeGenerator.Web/appsettings.json
View File

@ -1,4 +1,6 @@
{
"EnableSwagger": true,
"EnableTestControllers": true,
"DetailedErrors": true,
"Logging": {
"LogLevel": {
@ -13,7 +15,7 @@
"default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self';" */
"Content-Security-Policy": null,
"AdminPassword": "dd",
"AllowedOrigins": [ "https://localhost:7202" ],
"AllowedOrigins": [ "https://localhost:7202", "https://digitale.unterschrift.wisag.de/" ],
"NLog": {
"throwConfigExceptions": true,
"targets": {
@ -53,17 +55,11 @@
}
]
},
"AddTestControllers": true,
"Jwt": {
"Issuer": null,
"Audience": null,
"Key": "8RGnd7x0G2TYLOIW4m_qlIls7MfbAIGNrpQJzMAUIvULHOLiG723znRa_MG-Z4yw3SErusOU4hTui2rVBMcCaQ"
},
"AuthCookieConfig": {
"HttpOnly": true,
"SecurePolicy": 1
},
"CookieConsentSettings": {
"PrivacyPolicyUrl": "./privacy-policy.en.html",
"LegalNoticeUrl": "./cookies-policy.en.html",
@ -89,5 +85,6 @@
/* Resx naming format is -> Resource.language.resx (eg: Resource.de_DE.resx).
To add a new language, first you should write the required resx file.
first is the default culture name. */
"Languages": [ "de_DE", "en_US" ]
"Languages": [ "de_DE", "en_US" ],
"DisableMultiLanguage": true
}

59
EnvelopeGenerator.Web/wwwroot/css/site.css
View File

@ -139,4 +139,63 @@ footer#page-footer a:focus {
.none-display {
display: none
}
.dropdown-flag img, .img-flag {
width: 30%;
height: 70%;
}
.dropdown-flag {
height: 75%;
width: 75%;
}
/* --- */
/* Adjusting the height of the select2 container */
.dropdown-flag .select2-container--default .select2-selection--single {
height: 40px; /* Desired height */
}
/* Adjusting the height and vertical alignment of the selected item */
.dropdown-flag .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 38px; /* Should be 2px less than the height for internal padding */
}
/* Adjusting the height of the dropdown arrow */
.dropdown-flag .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 38px; /* Again, 2px less than the height */
}
/* Adjusting the height of dropdown list items */
.dropdown-flag .select2-container--default .select2-dropdown .select2-results>.select2-results__options {
max-height: 200px; /* Optional, adjust for larger dropdown height */
}
/* CSS for custom class to increase dropdown height */
.increase-dropdown-height {
min-height: 400px; /* Optional, larger value for increased height */
}
/* Adjusting select2 width to fit within a specific form size */
.dropdown-flag .select2-container {
width: 100% !important; /* Makes the container full width */
max-width: 180px; /* Suitable maximum width for the form */
}
.select2-container--default .select2-search--dropdown .select2-search__field {
border-color: #86b7fe;
outline: 0;
mask-border-width: 0
}
.select2-container--default .select2-search--dropdown .select2-search__field:hover {
border-color: #86b7fe;
outline: 0;
box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}
.select2-search__field {
display:none
}

BIN
EnvelopeGenerator.Web/wwwroot/img/flags/de_DE.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
EnvelopeGenerator.Web/wwwroot/img/flags/en_US.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB