Fixed images in Users view

src/Controllers/UsersController.cs

@@ -3,6 +3,7 @@ using Berufsschule_HAM.Services;
 using Microsoft.AspNetCore.Mvc;
 using Novell.Directory.Ldap;
 using Berufsschule_HAM.Models;
+using Berufsschule_HAM.Helpers;
 using System.Security.Cryptography;
 using System.Text;
 using Microsoft.AspNetCore.Authorization;
@@ -63,7 +64,7 @@ public class UsersController : Controller
     {
         try
         {
-            jpegPhoto ??= System.IO.File.ReadAllText("wwwroot/user_default.jpeg"); // TODO: cleanup - make this a config setting
+            jpegPhoto ??= Convert.ToBase64String(System.IO.File.ReadAllBytes("wwwroot/user_default.jpeg")); // TODO: cleanup - make this a config setting
             uid ??= sn.ToLower() + cn.ToLower();
             title ??= "";
             description ??= "{}";

src/Helpers/StringHelper.cs

@@ -1,4 +1,5 @@
 using System.Text.RegularExpressions;
+using System.Text;
 
 namespace Berufsschule_HAM.Helpers;
 
@@ -16,4 +17,9 @@ public static class StringHelpers
         input = input.Trim('-');
         return input;
     }
+
+    public static string ToBase64String(string input)
+    {
+        return Convert.ToBase64String(Encoding.UTF8.GetBytes(input));
+    }
 }

src/Views/Home/Users.cshtml

@@ -1,5 +1,6 @@
 @using Microsoft.AspNetCore.Mvc.Localization
 @using Berufsschule_HAM.Models
+@using System.Buffers.Text
 @model UsersIndexViewModel
 @inject IViewLocalizer T
 @{
@@ -20,7 +21,7 @@
         <table class="table table-striped align-middle">
             <thead>
                 <tr>
-                    <th>User Photo</th>
+                    <th style="width: 2rem;"></th>
                     <th>User ID</th>
                     <th>title</th>
                     <th>Name</th>
@@ -34,7 +35,9 @@
                 foreach (UserTableViewModel userTableViewModel in Model.UserTableViewModels)
                 {
                 <tr>
-                    <td>@@userTableViewModel.JpegPhoto</td>
+                    <td>
+                    <img class="rounded-circle user-icon" src="data:image/jpeg;base64,@userTableViewModel.JpegPhoto" alt="Photo" style="max-width:300px;" />
+                    </td>
                     <td>@userTableViewModel.Uid</td>
                     <td>@userTableViewModel.Title</td>
                     <td>@userTableViewModel.Name</td>

src/wwwroot/css/site.css

@@ -34,4 +34,10 @@ body {
   display: inline-block;
   margin: 1rem 0 1rem 0;
   padding: 2rem 4rem 2rem 4rem;
+}
+
+.user-icon {
+  width: 2rem;
+  height: 2rem;
+  float: right;
 }