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

EnvelopeGenerator.Web/Controllers/HomeController.cs

@@ -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

EnvelopeGenerator.Web/Program.cs

@@ -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;
     });
 
+    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();
     }
 
+    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,11 +200,12 @@ 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.");
 
+    if(!config.GetValue<bool>("DisableMultiLanguage"))
         app.UseCookieBasedLocalizer(languages);
 
     app.UseCors("SameOriginPolicy");

EnvelopeGenerator.Web/Views/Home/EnvelopeLocked.cshtml

@@ -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,8 +16,9 @@
     <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="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">
@@ -26,18 +27,21 @@
                     <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)
+        </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 data-icon="flag-icon flag-icon-us" value="@lang.TrySanitize(_sanitizer)">@_localizer[@lang].Value.TrySanitize(_sanitizer)</option>
+                        <option class="select-option option-flag" value="@lang.TrySanitize(_sanitizer)">@_localizer[lang].Value.TrySanitize(_sanitizer)</option>
                     }
                     </select>
                 </div>
             </form>
-    </section>
+        </div>
+    </div>
     <section class="text-center">
         <details>
             <summary>Sie haben keinen Zugriffscode erhalten?</summary>
@@ -46,3 +50,33 @@
     </section>
 </div>
 <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>

EnvelopeGenerator.Web/Views/Shared/_Layout.cshtml

@@ -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" />

EnvelopeGenerator.Web/XSSExtensions.cs

@@ -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);
     }
 }

EnvelopeGenerator.Web/appsettings.json

@@ -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
 }

EnvelopeGenerator.Web/wwwroot/css/site.css

@@ -140,3 +140,62 @@ 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
+}