Upgrade to .net 5.0 and Salutaion field

CaritasPWA.csproj

   </PropertyGroup>
 
   <PropertyGroup>
-    <TargetFramework>netstandard2.1</TargetFramework>
+    <TargetFramework>net5.0</TargetFramework>
     <RazorLangVersion>3.0</RazorLangVersion>
     <ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
     <OutputType>Exe</OutputType>
   </PropertyGroup>
 
+  <ItemGroup>
+  	<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.7" />
+  	<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.7" PrivateAssets="all" />
+  	<PackageReference Include="System.Net.Http.Json" Version="5.0.0" />
+  </ItemGroup>	
+	
   <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
     <Optimize>true</Optimize>
     <PlatformTarget>AnyCPU</PlatformTarget>
 
   <ItemGroup>
     <PackageReference Include="BlazorAnimate" Version="3.0.0" />
-    <PackageReference Include="BlazorColorPicker" Version="1.1.2" />
-    <PackageReference Include="BuildWebCompiler" Version="1.12.394" />
+    <PackageReference Include="BlazorColorPicker" Version="1.2.0" />
+    <PackageReference Include="BuildWebCompiler" Version="1.12.405" />
     <PackageReference Include="MatBlazor" Version="2.8.0" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="3.2.1" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.7" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Build" Version="3.2.1" PrivateAssets="all" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="3.2.1" PrivateAssets="all" />
-    <PackageReference Include="Microsoft.Extensions.Localization" Version="5.0.5" />
-    <PackageReference Include="System.Net.Http.Json" Version="3.2.0" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.7" PrivateAssets="all" />
+    <PackageReference Include="Microsoft.Extensions.Localization" Version="5.0.7" />
+    <PackageReference Include="System.Net.Http.Json" Version="5.0.0" />
+    <PackageReference Include="Tewr.Blazor.FileReader.Wasm" Version="0.11.19128" />
   </ItemGroup>
 
   <ItemGroup>

CaritasPWA.csproj.user

     <DebuggerFlavor>ProjectDebugger</DebuggerFlavor>
   </PropertyGroup>
   <PropertyGroup>
-    <ActiveDebugProfile>IIS Express</ActiveDebugProfile>
+    <ActiveDebugProfile>CaritasPWA</ActiveDebugProfile>
     <NameOfLastUsedPublishProfile>IISProfile</NameOfLastUsedPublishProfile>
   </PropertyGroup>
   <ItemGroup>

Pages/AccountPage.razor

 
 <div class="row px-3 h-100">
     <div class="row no-gutters align-items-start w-100">
-        <div class="row no-gutters w-100" style="padding-top:2em">
+        <div class="row no-gutters align-items-center w-100" style="padding-top:2em">
+            <div class="col-12">
+                <MatSelect Class="w-100" Label="@i18n["Salutation"]" Outlined="true"  @bind-Value="@Account.Salutation">
+                    <MatOptionString Value="sir">@i18n["Man"]</MatOptionString>
+                    <MatOptionString Value="madam">@i18n["Woman"]</MatOptionString>
+                </MatSelect>            
+            </div>
+        </div>
+        <div class="row no-gutters w-100" >
             <div class="col-6" style="padding-right:0.5em">
                 <MatStringField Class="w-100" Label="@i18n["Firstname"]" Outlined="true" type="text" @bind-Value="@Account.Firstname"></MatStringField>
             </div>

Pages/CaritasServiceFundVeloKeyDataPage.razor

 @page "/fundvelo/keydata/{FromRoute}"
 @using CaritasPWA.Shared.Models;
 @using CaritasPWA.Shared.Services;
+@using System.Globalization;
+@using Microsoft.AspNetCore.Components.Forms;
 @inject NavigationManager NavigationManager
 @inject IStringLocalizer<Resources> i18n
 @inject PageHistoryManager PageHistoryManager
 <div class="row px-3 h-100">
     <div class="row no-gutters align-items-center justify-content-center w-100" style="padding-top:1em">
         @if ("Found".Equals(FromRoute)) {
-            <h1>@i18n["FoundBike"]</h1>
-        } else {
-            <h1>@i18n["MissingBike"]</h1>
-        }
+    <h1>@i18n["FoundBike"]</h1>
+} else {
+    <h1>@i18n["MissingBike"]</h1>
+}
     </div>
     <div class="row no-gutters align-items-center justify-content-center w-100">
 
         <div class="mat-layout-grid w-100">
             <div class="mat-layout-grid-inner">
-                <div class="mat-layout-grid-cell mat-layout-grid-cell-span-1 justify-content-center">
-                    <div>
-                        <MatIconButton Class="mat-icon-large" Icon="photo_camera" />
-                    </div>
-                    <div>
-                        <MatIconButton Class="mat-icon-large" Icon="unarchive" />
+                <div class="mat-layout-grid-cell mat-layout-grid-cell-span-1 justify-content-center" style="text-align: center">
+                    <MatIconButton Class="mat-icon-large" Icon="photo_camera" />
+                    <div style="margin-top:1rem">
+                        <input id="file" type="file" name="file" accept="image/x-png,image/jpeg,image/gif" class="inputFile" />
+                        <label for="file">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 21 21">
+                                <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z" />
+                            </svg>
+                        </label>
                     </div>
                 </div>
                 <div class="mat-layout-grid-cell mat-layout-grid-cell-span-3">
                         </MatCard>
                     </div>
                 </div>
-                <div class="mat-layout-grid-cell mat-layout-grid-cell-span-1 justify-content-center">
+                <div class="mat-layout-grid-cell mat-layout-grid-cell-span-1 justify-content-center" style="text-align: center">
                     <div>
                         <MatIconButton Class="mat-icon-large" Icon="location_on" />
                     </div>
     [Parameter]
     public string FromRoute { get; set; }
 
+    [Parameter(CaptureUnmatchedValues = true)]
+    public IDictionary<string, object> Attributes { get; set; }
+
     private ColorItem selectedColor;
     private BicycleType selectedBcType;
+    private string imgUrl = string.Empty;
 
     protected async override void OnInitialized() {
+
+        Console.WriteLine("CurrentCulture is {0}.", CultureInfo.CurrentCulture.Name);
+        Console.WriteLine("Current language is {0}.", CultureInfo.CurrentCulture.TwoLetterISOLanguageName.ToUpper());
+
         await GetColors();
         await GetBicycleTypes();
         PageHistoryManager.AddPageToHistory(NavigationManager.Uri);
         return @FromRoute == "Found" ? i18n.GetString("PlaceOfDiscovery") : i18n.GetString("PlaceOfLoss");
     }
 
+
 }

Pages/CaritasServicesPage.razor

                 <div class="mat-layout-grid-cell mat-layout-grid-cell-span-2-phone mat-layout-grid-cell-span-3-tablet mat-layout-grid-cell-span-4-desktop">
                     <MatCard class="demo-mat-card">
                         <MatCardContent>
-                            <MatCardMedia Square="true" ImageUrl="./images/batch_kulturlegi.png"></MatCardMedia>
+                            <MatCardMedia Square="true" ImageUrl="./images/batch_fundvelo.png" @onclick="FundVelo_LostFound"></MatCardMedia>
                         </MatCardContent>
                     </MatCard>
                 </div>
                 <div class="mat-layout-grid-cell mat-layout-grid-cell-span-2-phone mat-layout-grid-cell-span-3-tablet mat-layout-grid-cell-span-4-desktop">
                     <MatCard class="demo-mat-card">
                         <MatCardContent>
-                            <MatCardMedia Square="true" ImageUrl="./images/batch_markt.png"></MatCardMedia>
+                            <MatCardMedia Square="true" ImageUrl="./images/batch_kulturlegi.png"></MatCardMedia>
                         </MatCardContent>
                     </MatCard>
-
                 </div>
                 <div class="mat-layout-grid-cell mat-layout-grid-cell-span-2-phone mat-layout-grid-cell-span-3-tablet mat-layout-grid-cell-span-4-desktop">
                     <MatCard class="demo-mat-card">
                         <MatCardContent>
-                            <MatCardMedia Square="true" ImageUrl="./images/batch_fundvelo.png" @onclick="FundVelo_LostFound"></MatCardMedia>
+                            <MatCardMedia Square="true" ImageUrl="./images/batch_markt.png"></MatCardMedia>
                         </MatCardContent>
                     </MatCard>
                 </div>

Program.cs

             builder.RootComponents.Add<App>("app");
 
             builder.Services.AddMatBlazor();
+           // builder.Services.AddFileReaderService(options => options.UseWasmSharedBuffer = true);
             builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
             builder.Services.AddSingleton<ILFBicycleRest, LFBicycleRest>();
             builder.Services.AddSingleton<AppState>();

Shared/Models/UserData.cs

 namespace CaritasPWA.Shared.Models {
     // The class that stores the user settings
     public class UserData {
+        private string salutation;
         private string firstname;
         private string lastname;
         private string address;
         private string phone;
         private string email;
 
-
+        public string Salutation{ get => salutation; set { salutation = value; } }
         public string Firstname { get => firstname; set { firstname = value; } }
         public string Lastname { get => lastname; set { lastname = value; } }
         public string Address { get => address; set { address = value; } }

Shared/ResourceFiles/Resources.Designer.cs

             }
         }
         
+        /// <summary>
+        ///   Sucht eine lokalisierte Zeichenfolge, die Sir ähnelt.
+        /// </summary>
+        public static string Man {
+            get {
+                return ResourceManager.GetString("Man", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Sucht eine lokalisierte Zeichenfolge, die Missing Bike ähnelt.
         /// </summary>
             }
         }
         
+        /// <summary>
+        ///   Sucht eine lokalisierte Zeichenfolge, die Salutation ähnelt.
+        /// </summary>
+        public static string Salutation {
+            get {
+                return ResourceManager.GetString("Salutation", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Sucht eine lokalisierte Zeichenfolge, die Save ähnelt.
         /// </summary>
             }
         }
         
+        /// <summary>
+        ///   Sucht eine lokalisierte Zeichenfolge, die Madam ähnelt.
+        /// </summary>
+        public static string Woman {
+            get {
+                return ResourceManager.GetString("Woman", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Sucht eine lokalisierte Zeichenfolge, die Zip ähnelt.
         /// </summary>

Shared/ResourceFiles/Resources.de.resx

   <data name="Mail" xml:space="preserve">
     <value>E-Mail</value>
   </data>
+  <data name="Man" xml:space="preserve">
+    <value>Herr</value>
+  </data>
   <data name="MissingBike" xml:space="preserve">
     <value>Vermisstes Velo</value>
   </data>
   <data name="PlaceOfLoss" xml:space="preserve">
     <value>Verlustort</value>
   </data>
+  <data name="Salutation" xml:space="preserve">
+    <value>Anrede</value>
+  </data>
   <data name="Save" xml:space="preserve">
     <value>Speichern</value>
   </data>
   <data name="Welcome" xml:space="preserve">
     <value>Willkommen bei Caritas!</value>
   </data>
+  <data name="Woman" xml:space="preserve">
+    <value>Frau</value>
+  </data>
   <data name="Zip" xml:space="preserve">
     <value>PLZ</value>
   </data>

Shared/ResourceFiles/Resources.fr.resx

   <data name="Mail" xml:space="preserve">
     <value>Courrier</value>
   </data>
+  <data name="Man" xml:space="preserve">
+    <value>Monsieur</value>
+  </data>
   <data name="MissingBike" xml:space="preserve">
     <value>Velo perdù</value>
   </data>
   <data name="PlaceOfLoss" xml:space="preserve">
     <value>Lieu de la perte</value>
   </data>
+  <data name="Salutation" xml:space="preserve">
+    <value>Salutation</value>
+  </data>
   <data name="Save" xml:space="preserve">
     <value>Sauver</value>
   </data>
   <data name="Welcome" xml:space="preserve">
     <value>Bienvenue chez Caritas!</value>
   </data>
+  <data name="Woman" xml:space="preserve">
+    <value>Madame</value>
+  </data>
   <data name="Zip" xml:space="preserve">
     <value>Code postal</value>
   </data>

Shared/ResourceFiles/Resources.it.resx

   <data name="Mail" xml:space="preserve">
     <value>E-Mail</value>
   </data>
+  <data name="Man" xml:space="preserve">
+    <value>Signore</value>
+  </data>
   <data name="MissingBike" xml:space="preserve">
     <value>Bicicletta dispersa</value>
   </data>
   <data name="PlaceOfLoss" xml:space="preserve">
     <value>Luogo della perdita</value>
   </data>
+  <data name="Salutation" xml:space="preserve">
+    <value>Saluto</value>
+  </data>
   <data name="Save" xml:space="preserve">
     <value>Salva</value>
   </data>
   <data name="Welcome" xml:space="preserve">
     <value>Benvenuti alla Caritas!</value>
   </data>
+  <data name="Woman" xml:space="preserve">
+    <value>Signora</value>
+  </data>
   <data name="Zip" xml:space="preserve">
     <value>CAP</value>
   </data>

Shared/ResourceFiles/Resources.resx

   <data name="Mail" xml:space="preserve">
     <value>E-Mail</value>
   </data>
+  <data name="Man" xml:space="preserve">
+    <value>Sir</value>
+  </data>
   <data name="MissingBike" xml:space="preserve">
     <value>Missing Bike</value>
   </data>
   <data name="PlaceOfLoss" xml:space="preserve">
     <value>Place Of Loss</value>
   </data>
+  <data name="Salutation" xml:space="preserve">
+    <value>Salutation</value>
+  </data>
   <data name="Save" xml:space="preserve">
     <value>Save</value>
   </data>
   <data name="Welcome" xml:space="preserve">
     <value>Welcome to Caritas!</value>
   </data>
+  <data name="Woman" xml:space="preserve">
+    <value>Madam</value>
+  </data>
   <data name="Zip" xml:space="preserve">
     <value>Zip</value>
   </data>

_Imports.razor

 @using CaritasPWA.Shared.ResourceFiles
 @using MatBlazor
 @using BlazorAnimate
-@using BlazorColorPicker
+@using BlazorColorPicker

wwwroot/css/app.css

-/*@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');*/
-/*@import url('united/bootstrap.min.css');*/
-/*@import url('united/_variables.min.css');
-@import url('united/_bootswatch.min.css');
-*/
-
-:root {
+:root {
     --caritas-red: #db001b;
     --caritas-red-accent: #FF4081;
     --caritas-red-dark: #d0001a;
     color: var(--primary);
 }
 
-    a:hover {
-        color: var(--caritas-red-accent);
-    }
-
-.top-row {
-    /*background-color: var(--caritas-red-accent);*/
+a:hover {
+    color: var(--caritas-red-accent);
 }
 
-/*html, body {
-    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+.inputFile {
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
 }
 
-a, .btn-link {
-    color: #0366d6;
-}
-*/
+.inputFile + label {
+    cursor: pointer;
+    width: 100%;
+    text-align: center;
+    /*padding: 1rem 0;*/
+}
+
+    .inputFile:focus + label,
+    .inputFile + label:hover {
+        /*background-color: red;*/
+        width: 44px;
+        height: 44px;
+        background: rgba(0, 0, 0, 0.2);
+        -moz-border-radius: 22px;
+        -webkit-border-radius: 22px;
+        border-radius: 22px;
+    }
+
 .btn-primary {
     color: #fff;
     background-color: var(--primary);
 }
 
 .mat-icon-large {
-    height: 64px !important;
-    width: 64px !important;
-    font-size: 48px !important;
+    height: 46px !important;
+    width: 46px !important;
+    padding: 0 4px;
 }
 
 button.mat-icon-large > i {
     width: 48px !important;
     font-size: 48px !important;
     margin-left: -5px;
-    display:block;
-}
-/*
-.content {
-    padding-top: 1.1rem;
+    display: block;
 }
-
-.valid.modified:not([type=checkbox]) {
-    outline: 1px solid #26b050;
-}
-
-.invalid {
-    outline: 1px solid red;
-}
-
-.validation-message {
-    color: red;
-}
-
-*/
 .fullscreen {
     width: 100vw;
     height: 100vh;
 
 .sidebar {
     background-color: var(--primary);
-    /*background-image: linear-gradient(180deg, var(--caritas-red) 0%, var(--caritas-red-accent) 70%);*/
 }
 
 #blazor-error-ui {
     z-index: 1000;
 }
 
-    #blazor-error-ui .dismiss {
-        cursor: pointer;
-        position: absolute;
-        right: 0.75rem;
-        top: 0.5rem;
-    }
+#blazor-error-ui .dismiss {
+    cursor: pointer;
+    position: absolute;
+    right: 0.75rem;
+    top: 0.5rem;
+}