Merge pull request 'Routes fixed, new ui' (#26) from enhancement/ui-upgrade into development

Reviewed-on: daniel-hbn/Watcher#26

Watcher/Program.cs

@@ -33,7 +33,7 @@ var connectionString = configuration["Database:ConnectionString"];
 builder.Services.AddDbContext<AppDbContext>((serviceProvider, options) =>
 {
     var config = serviceProvider.GetRequiredService<IConfiguration>();
-    var provider = config["Database:Provider"];
+    var provider = dbProvider;
 
     if (provider == "MySql")
     {
@@ -52,81 +52,77 @@ builder.Services.AddDbContext<AppDbContext>((serviceProvider, options) =>
 });
 
 // ---------- Authentifizierung konfigurieren ----------
-builder.Services.AddAuthentication(options =>
-{
-    options.DefaultScheme = "Cookies";
-    options.DefaultChallengeScheme = "Cookies"; // Nur wenn kein OIDC erzwungen wird
-})
-.AddCookie("Cookies", options =>
-{
-    options.LoginPath = "/Auth/Login"; 
-});
-
 // PocketID nur konfigurieren, wenn aktiviert
 var pocketIdSection = builder.Configuration.GetSection("Authentication:PocketID");
 var pocketIdEnabled = pocketIdSection.GetValue<bool>("Enabled");
 
-if (pocketIdEnabled)
+var auth = builder.Services.AddAuthentication("Cookies");
+
+auth.AddCookie("Cookies", options =>
 {
-    builder.Services.AddAuthentication()
-    .AddOpenIdConnect("oidc", options =>
+    options.LoginPath = "/Auth/Login";
+    options.AccessDeniedPath = "/Auth/AccessDenied";
+});
+
+builder.Services.AddAuthentication()
+.AddOpenIdConnect("oidc", options =>
+{
+    options.Authority = pocketIdSection["Authority"];
+    options.ClientId = pocketIdSection["ClientId"];
+    options.ClientSecret = pocketIdSection["ClientSecret"];
+    options.ResponseType = "code";
+    options.CallbackPath = pocketIdSection["CallbackPath"];
+    options.SaveTokens = true;
+
+    options.GetClaimsFromUserInfoEndpoint = true;
+
+    options.Scope.Clear();
+    options.Scope.Add("openid");
+    options.Scope.Add("profile");
+    options.Scope.Add("email");
+
+    options.Events = new OpenIdConnectEvents
     {
-        options.Authority = pocketIdSection["Authority"];
-        options.ClientId = pocketIdSection["ClientId"];
-        options.ClientSecret = pocketIdSection["ClientSecret"];
-        options.ResponseType = "code";
-        options.CallbackPath = pocketIdSection["CallbackPath"];
-        options.SaveTokens = true;
-
-        options.GetClaimsFromUserInfoEndpoint = true;
-
-        options.Scope.Clear();
-        options.Scope.Add("openid");
-        options.Scope.Add("profile");
-        options.Scope.Add("email");
-
-        options.Events = new OpenIdConnectEvents
+        OnTokenValidated = async ctx =>
         {
-            OnTokenValidated = async ctx =>
+            var db = ctx.HttpContext.RequestServices.GetRequiredService<AppDbContext>();
+
+            var principal = ctx.Principal;
+            var pocketId = principal.FindFirst("http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier")?.Value;
+            var preferredUsername = principal.FindFirst("preferred_username")?.Value;
+            var email = principal.FindFirst("email")?.Value;
+
+            if (string.IsNullOrEmpty(pocketId))
+                return;
+
+            var user = await db.Users.FirstOrDefaultAsync(u => u.PocketId == pocketId);
+
+            if (user == null)
             {
-                var db = ctx.HttpContext.RequestServices.GetRequiredService<AppDbContext>();
-
-                var principal = ctx.Principal;
-                var pocketId = principal.FindFirst("http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier")?.Value;
-                var preferredUsername = principal.FindFirst("preferred_username")?.Value;
-                var email = principal.FindFirst("email")?.Value;
-
-                if (string.IsNullOrEmpty(pocketId))
-                    return;
-
-                var user = await db.Users.FirstOrDefaultAsync(u => u.PocketId == pocketId);
-
-                if (user == null)
+                user = new User
                 {
-                    user = new User
-                    {
-                        PocketId = pocketId,
-                        PreferredUsername = preferredUsername ?? "",
-                        Email = email,
-                        LastLogin = DateTime.UtcNow,
-                        IdentityProvider = "oidc",
-                        Password = string.Empty
-                    };
-                    db.Users.Add(user);
-                }
-                else
-                {
-                    user.LastLogin = DateTime.UtcNow;
-                    user.PreferredUsername = preferredUsername ?? user.PreferredUsername;
-                    user.Email = email ?? user.Email;
-                    db.Users.Update(user);
-                }
-
-                await db.SaveChangesAsync();
+                    PocketId = pocketId,
+                    PreferredUsername = preferredUsername ?? "",
+                    Email = email,
+                    LastLogin = DateTime.UtcNow,
+                    IdentityProvider = "oidc",
+                    Password = string.Empty
+                };
+                db.Users.Add(user);
             }
-        };
-    });
-}
+            else
+            {
+                user.LastLogin = DateTime.UtcNow;
+                user.PreferredUsername = preferredUsername ?? user.PreferredUsername;
+                user.Email = email ?? user.Email;
+                db.Users.Update(user);
+            }
+
+            await db.SaveChangesAsync();
+        }
+    };
+});
+
 
 
 

Watcher/Views/Auth/Info.cshtml

@@ -1,104 +1,115 @@
 @{
     ViewData["Title"] = "Account Info";
-    var pictureUrl = User.Claims.FirstOrDefault(c => c.Type == "picture")?.Value ?? "123";
+    var pictureUrl = User.Claims.FirstOrDefault(c => c.Type == "picture")?.Value ?? "";
+    var preferredUsername = User.Claims.FirstOrDefault(c => c.Type == "preferred_username")?.Value ?? "admin";
+    var isAdmin = preferredUsername == "admin";
 }
 
-<h2>Account Info</h2>
+<div class="container mt-5">
+    <div class="card shadow-lg rounded-3 p-4" style="max-width: 700px; margin: auto;">
+        <div class="text-center mb-4">
+            @if (!string.IsNullOrEmpty(pictureUrl))
+            {
+                <img src="@pictureUrl" alt="Profilbild" class="rounded-circle shadow" style="width: 120px; height: 120px; object-fit: cover;" />
+            }
+            else
+            {
+                <div class="bg-secondary text-white rounded-circle d-inline-flex align-items-center justify-content-center"
+                     style="width: 120px; height: 120px; font-size: 48px;">
+                    <span>@(User.Identity?.Name?.Substring(0,1).ToUpper() ?? "?")</span>
+                </div>
+            }
+            <h3 class="mt-3"><i class="bi bi-person-circle me-1"></i>@(User.FindFirst("name")?.Value ?? "Unbekannter Nutzer")</h3>
+        </div>
 
-<div class="card" style="max-width: 600px; margin: auto; padding: 1rem; box-shadow: 0 0 10px #ccc; text-align:center;">
-    @if (!string.IsNullOrEmpty(pictureUrl))
+        <table class="table table-hover">
+            <tbody>
+                <tr>
+                    <th><i class="bi bi-person-badge me-1"></i>Username</th>
+                    <td>@preferredUsername</td>
+                </tr>
+                <tr>
+                    <th><i class="bi bi-envelope me-1"></i>E-Mail</th>
+                    <td>@(User.FindFirst("http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress")?.Value ?? "Nicht verfügbar")</td>
+                </tr>
+                <tr>
+                    <th><i class="bi bi-fingerprint me-1"></i>Benutzer-ID</th>
+                    <td>@(User.FindFirst("sub")?.Value ?? "Nicht verfügbar")</td>
+                </tr>
+                <tr>
+                    <th><i class="bi bi-clock-history me-1"></i>Login-Zeit</th>
+                    <td>
+                        @(User.FindFirst("iat") != null
+                            ? DateTimeOffset.FromUnixTimeSeconds(long.Parse(User.FindFirst("iat").Value)).ToLocalTime().ToString()
+                            : "Nicht verfügbar")
+                    </td>
+                </tr>
+                <tr>
+                    <th><i class="bi bi-hourglass-split me-1"></i>Token läuft ab</th>
+                    <td>
+                        @(User.FindFirst("exp") != null
+                            ? DateTimeOffset.FromUnixTimeSeconds(long.Parse(User.FindFirst("exp").Value)).ToLocalTime().ToString()
+                            : "Nicht verfügbar")
+                    </td>
+                </tr>
+                <tr>
+                    <th><i class="bi bi-shield-lock me-1"></i>Rollen</th>
+                    <td>
+                        @{
+                            var roles = User.FindAll("role").Select(r => r.Value);
+                            if (!roles.Any())
+                            {
+                                <span class="text-muted">Keine Rollen</span>
+                            }
+                            else
+                            {
+                                <ul class="mb-0">
+                                    @foreach (var role in roles)
+                                    {
+                                        <li><i class="bi bi-tag me-1 text-primary"></i>@role</li>
+                                    }
+                                </ul>
+                            }
+                        }
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+
+        <form method="post" asp-controller="Auth" asp-action="Logout" class="text-center mt-4">
+            <button type="submit" class="btn btn-danger">
+                <i class="bi bi-box-arrow-right me-1"></i>Abmelden
+            </button>
+        </form>
+    </div>
+
+    @if (isAdmin)
     {
-        <img src="@pictureUrl" alt="Profilbild" style="width:120px; height:120px; border-radius:50%; object-fit:cover; margin-bottom:1rem;" />
+        <div class="card shadow mt-5 p-4" style="max-width: 700px; margin: auto;">
+            <h4><i class="bi bi-pencil-square me-2"></i>Benutzerdaten ändern</h4>
+            <form asp-action="Edit" method="post" asp-controller="Auth">
+                <div class="mb-3">
+                    <label for="Username" class="form-label">Neuer Benutzername</label>
+                    <input type="text" class="form-control" id="Username" name="Username" value="@preferredUsername" />
+                </div>
+                <div class="mb-3">
+                    <label for="NewPassword" class="form-label">Neues Passwort</label>
+                    <input type="password" class="form-control" id="NewPassword" name="NewPassword" />
+                </div>
+                <div class="mb-3">
+                    <label for="ConfirmPassword" class="form-label">Passwort bestätigen</label>
+                    <input type="password" class="form-control" id="ConfirmPassword" name="ConfirmPassword" />
+                </div>
+                <button type="submit" class="btn btn-primary">
+                    <i class="bi bi-save me-1"></i>Speichern
+                </button>
+            </form>
+        </div>
     }
     else
     {
-        <div style="width:120px; height:120px; border-radius:50%; background:#ccc; display:inline-block; line-height:120px; font-size:48px; color:#fff; margin-bottom:1rem;">
-            <span>@(User.Identity?.Name?.Substring(0,1).ToUpper() ?? "?")</span>
+        <div class="alert alert-info mt-4 text-center" style="max-width: 700px; margin: auto;">
+            <i class="bi bi-info-circle me-1"></i>Benutzerdaten können nur für lokal angemeldete Nutzer geändert werden.
         </div>
     }
-
-    <h3>@(User.FindFirst("name")?.Value ?? "Unbekannter Nutzer")</h3>
-
-    <table class="table" style="margin-top: 1rem;">
-        <tbody>
-            <tr></tr>
-                <th>Username</th>
-                <td>@(@User.Claims.FirstOrDefault(c => c.Type == "preferred_username")?.Value ?? "Nicht verfügbar")</td>
-            </tr>
-            <tr>
-                <th>E-Mail</th>
-                <td>@(@User.Claims.FirstOrDefault(c => c.Type == "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress")?.Value ?? "Nicht verfügbar")</td>
-            </tr>
-            <tr>
-                <th>Benutzer-ID</th>
-                <td>@(User.FindFirst("sub")?.Value ?? "Nicht verfügbar")</td>
-            </tr>
-            <tr>
-                <th>Login-Zeit</th>
-                <td>@(User.FindFirst("iat") != null 
-                    ? DateTimeOffset.FromUnixTimeSeconds(long.Parse(User.FindFirst("iat").Value)).ToLocalTime().ToString() 
-                    : "Nicht verfügbar")
-                </td>
-            </tr>
-            <tr>
-                <th>Token läuft ab</th>
-                <td>@(User.FindFirst("exp") != null 
-                    ? DateTimeOffset.FromUnixTimeSeconds(long.Parse(User.FindFirst("exp").Value)).ToLocalTime().ToString() 
-                    : "Nicht verfügbar")
-                </td>
-            </tr>
-            <tr>
-                <th>Rollen</th>
-                <td>
-                    @{
-                        var roles = User.FindAll("role").Select(r => r.Value);
-                        if (!roles.Any())
-                        {
-                            <text>Keine Rollen</text>
-                        }
-                        else
-                        {
-                            <ul>
-                                @foreach (var role in roles)
-                                {
-                                    <li>@role</li>
-                                }
-                            </ul>
-                        }
-                    }
-                </td>
-            </tr>
-        </tbody>
-    </table>
-
-    <form method="post" asp-controller="Auth" asp-action="Logout">
-        <button type="submit" class="btn btn-danger">Abmelden</button>
-    </form>
 </div>
-
-@{
-
-}
-@if (User.Identity.Name == "admin")
-{
-    <h3>Benutzerdaten ändern</h3>
-    <form asp-action="Edit" method="post" asp-controller="Auth">
-        <div class="mb-3">
-            <label for="Username" class="form-label">Username</label>
-            <input type="text" class="form-control" id="Username" name="Username" value="@User.Identity?.Name" />
-        </div>
-        <div class="mb-3">
-            <label for="NewPassword" class="form-label">Neues Passwort</label>
-            <input type="password" class="form-control" id="NewPassword" name="NewPassword" />
-        </div>
-        <div class="mb-3">
-            <label for="ConfirmPassword" class="form-label">Passwort bestätigen</label>
-            <input type="password" class="form-control" id="ConfirmPassword" name="ConfirmPassword" />
-        </div>
-        <button type="submit" class="btn btn-primary">Speichern</button>
-    </form>
-}
-else
-{
-    <p>Benutzerdaten können nur für lokal angemeldete Nutzer geändert werden.</p>
-}

Watcher/Views/Auth/Login.cshtml

@@ -1,30 +1,87 @@
 @model Watcher.ViewModels.LoginViewModel
 @{
+    Layout = "~/Views/Shared/_LoginLayout.cshtml";
     ViewData["Title"] = "Login";
 }
 
-<div class="login-container">
-    <h2>Login</h2>
+<style>
+    body {
+        background-color: #0d1b2a;
+    }
+
+    .login-card {
+        background-color: #1b263b;
+        color: #ffffff;
+        padding: 2rem;
+        border-radius: 1rem;
+        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+        max-width: 400px;
+        margin: auto;
+    }
+
+    .form-control {
+        background-color: #415a77;
+        border: none;
+        color: white;
+    }
+
+    .form-control::placeholder {
+        color: #c0c0c0;
+    }
+
+    .btn-primary {
+        background-color: #0d6efd;
+        border: none;
+    }
+
+    .btn-pocketid {
+        background-color: #14a44d;
+        color: white;
+        border: none;
+    }
+
+    .btn-pocketid:hover {
+        background-color: #0f8c3c;
+    }
+
+    label {
+        margin-top: 1rem;
+    }
+
+    .form-error {
+        color: #ff6b6b;
+        font-size: 0.875rem;
+    }
+</style>
+
+<div class="login-card">
+    <h2 class="text-center mb-4">Anmelden</h2>
 
     <form asp-controller="Auth" asp-action="Login" method="post">
         <input type="hidden" asp-for="ReturnUrl" />
 
-        <div>
-            <label asp-for="Username"></label>
-            <input asp-for="Username" />
-            <span asp-validation-for="Username"></span>
+        <div class="mb-3">
+            <label asp-for="Username" class="form-label">Benutzername</label>
+            <input asp-for="Username" class="form-control" placeholder="admin" />
+            <span asp-validation-for="Username" class="form-error"></span>
         </div>
-        <div>
-            <label asp-for="Password"></label>
-            <input asp-for="Password" type="password" />
-            <span asp-validation-for="Password"></span>
+
+        <div class="mb-3">
+            <label asp-for="Password" class="form-label">Passwort</label>
+            <input asp-for="Password" type="password" class="form-control" placeholder="••••••••" />
+            <span asp-validation-for="Password" class="form-error"></span>
+        </div>
+
+        <div class="d-grid gap-2">
+            <button type="submit" class="btn btn-primary">Login</button>
         </div>
-        <button type="submit">Login</button>
     </form>
 
-    <hr />
+    <hr class="my-4" />
 
     <form asp-controller="Auth" asp-action="SignIn" method="get">
-        <button type="submit">Mit PocketID anmelden</button>
+        <div class="d-grid gap-2">
+            <button type="submit" class="btn btn-pocketid">Mit PocketID anmelden</button>
+        </div>
     </form>
 </div>

Watcher/Views/Home/Index.cshtml

@@ -3,34 +3,42 @@
     ViewData["Title"] = "Dashboard";
 }
 
-<h1 class="text-2xl font-bold mb-4">Dashboard</h1>
+<h1 class="mb-4"><i class="bi bi-speedometer2 me-2"></i>Dashboard</h1>
 
-<div class="grid grid-cols-2 gap-6">
-    <div class="bg-white shadow rounded-2xl p-4">
-        <h2 class="text-xl font-semibold mb-2">Server</h2>
-        <p>🟢 Online: <strong>@Model.ActiveServers</strong></p>
-        <p>🔴 Offline: <strong>@Model.OfflineServers</strong></p>
-        <a href="/Server/Overview" class="text-blue-500 hover:underline mt-2 inline-block">→ Zu den Servern</a>
-    </div>
-
-    <div class="bg-white shadow rounded-2xl p-4">
-        <h2 class="text-xl font-semibold mb-2">Container</h2>
-        <p>🟢 Laufend: <strong>@Model.RunningContainers</strong></p>
-        <p>🔴 Fehlerhaft: <strong>@Model.FailedContainers</strong></p>
-        <a href="/Container/Overview" class="text-blue-500 hover:underline mt-2 inline-block">→ Zu den Containern</a>
-    </div>
-
-    <div class="col-span-2 bg-white shadow rounded-2xl p-4">
-        <h2 class="text-xl font-semibold mb-2">Uptime letzte 24h</h2>
-        <div class="bg-gray-100 h-32 rounded-lg flex items-center justify-center text-gray-500">
-            (Diagramm folgt hier)
+<div class="row g-4">
+    <div class="col-md-6">
+        <div class="card p-3">
+            <h2 class="h5"><i class="bi bi-hdd-network me-2"></i>Server</h2>
+            <p><i class="bi bi-check-circle-fill text-success me-1"></i>Online: <strong>@Model.ActiveServers</strong></p>
+            <p><i class="bi bi-x-circle-fill text-danger me-1"></i>Offline: <strong>@Model.OfflineServers</strong></p>
+            <a href="/Server/Overview" class="btn btn-link px-0"><i class="bi bi-box-arrow-in-right me-1"></i>Zu den Servern</a>
         </div>
     </div>
 
-    <div class="col-span-2 bg-white shadow rounded-2xl p-4">
-        <h2 class="text-xl font-semibold mb-2">Systeminfo</h2>
-        <p>Benutzer: <strong>@User.FindFirst("preferred_username")?.Value</strong></p>
-        <p>Letzter Login: <strong>@Model.LastLogin.ToString("g")</strong></p>
-        <a href="/Auth/Info" class="text-blue-500 hover:underline mt-2 inline-block">→ Account-Verwaltung</a>
+    <div class="col-md-6">
+        <div class="card p-3">
+            <h2 class="h5"><i class="bi bi-box-seam me-2"></i>Container</h2>
+            <p><i class="bi bi-play-circle-fill text-success me-1"></i>Laufend: <strong>@Model.RunningContainers</strong></p>
+            <p><i class="bi bi-exclamation-circle-fill text-danger me-1"></i>Fehlerhaft: <strong>@Model.FailedContainers</strong></p>
+            <a href="/Container/Overview" class="btn btn-link px-0"><i class="bi bi-box-arrow-in-right me-1"></i>Zu den Containern</a>
+        </div>
+    </div>
+
+    <div class="col-12">
+        <div class="card p-3">
+            <h2 class="h5"><i class="bi bi-graph-up me-2"></i>Uptime letzte 24h</h2>
+            <div class="bg-secondary rounded p-5 text-center text-muted">
+                <i class="bi bi-bar-chart-line" style="font-size: 2rem;"></i><br />
+                (Diagramm folgt hier)
+            </div>
+        </div>
+    </div>
+
+    <div class="col-12">
+        <div class="card p-3">
+            <h2 class="h5"><i class="bi bi-person-circle me-2"></i>Systeminfo</h2>
+            <p><i class="bi bi-person-badge me-1"></i>Benutzer: <strong>@User.FindFirst("preferred_username")?.Value</strong></p>
+            <p><i class="bi bi-clock me-1"></i>Letzter Login: <strong>@Model.LastLogin.ToString("g")</strong></p>
+        </div>
     </div>
 </div>

Watcher/Views/Server/AddServer.cshtml

@@ -3,38 +3,44 @@
     ViewData["Title"] = "Neuen Server hinzufügen";
 }
 
-<div class="max-w-2xl mx-auto mt-10 bg-white rounded-2xl shadow-md p-8">
-    <h1 class="text-2xl font-bold text-gray-800 mb-6">Neuen Server hinzufügen</h1>
+<div class="container mt-5" style="max-width: 700px;">
+    <div class="card shadow rounded-3 p-4">
+        <h1 class="mb-4 text-primary-emphasis">
+            <i class="bi bi-plus-circle me-2"></i>Neuen Server hinzufügen
+        </h1>
 
-    <form asp-action="AddServer" method="post" class="space-y-5">
-        <div>
-            <label asp-for="Name" class="block text-sm font-medium text-gray-700">Name</label>
-            <input asp-for="Name" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" />
-            <span asp-validation-for="Name" class="text-red-500 text-sm" />
-        </div>
+        <form asp-action="AddServer" method="post" novalidate>
+            <div class="mb-3">
+                <label asp-for="Name" class="form-label"><i class="bi bi-terminal me-1"></i>Servername</label>
+                <input asp-for="Name" class="form-control" placeholder="z.B. Webserver-01" />
+                <span asp-validation-for="Name" class="text-danger small"></span>
+            </div>
 
-        <div>
-            <label asp-for="IPAddress" class="block text-sm font-medium text-gray-700">IP-Adresse</label>
-            <input asp-for="IPAddress" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" />
-            <span asp-validation-for="IPAddress" class="text-red-500 text-sm" />
-        </div>
+            <div class="mb-3">
+                <label asp-for="IPAddress" class="form-label"><i class="bi bi-globe me-1"></i>IP-Adresse</label>
+                <input asp-for="IPAddress" class="form-control" placeholder="z.B. 192.168.1.10" />
+                <span asp-validation-for="IPAddress" class="text-danger small"></span>
+            </div>
 
-        <div>
-            <label asp-for="Type" class="block text-sm font-medium text-gray-700">Typ</label>
-            <select asp-for="Type" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
-                <option>VPS</option>
-                <option>VM</option>
-                <option>Standalone</option>
-            </select>
-        </div>
+            <div class="mb-4">
+                <label asp-for="Type" class="form-label"><i class="bi bi-hdd-network me-1"></i>Typ</label>
+                <select asp-for="Type" class="form-select">
+                    <option>VPS</option>
+                    <option>VM</option>
+                    <option>Standalone</option>
+                </select>
+            </div>
 
-        <div class="flex justify-end">
-            <a asp-action="Overview" class="mr-3 inline-block px-4 py-2 text-gray-600 hover:text-blue-600">Abbrechen</a>
-            <button type="submit" class="px-5 py-2 bg-blue-600 text-white font-semibold rounded hover:bg-blue-700">
-                Speichern
-            </button>
-        </div>
-    </form>
+            <div class="d-flex justify-content-end">
+                <a asp-action="Overview" class="btn btn-outline-secondary me-2">
+                    <i class="bi bi-x-circle me-1"></i>Abbrechen
+                </a>
+                <button type="submit" class="btn btn-primary">
+                    <i class="bi bi-save me-1"></i>Speichern
+                </button>
+            </div>
+        </form>
+    </div>
 </div>
 
 @section Scripts {

Watcher/Views/Server/overview.cshtml

@@ -4,45 +4,134 @@
 }
 
 <div class="flex items-center justify-between mb-6">
-    <h1 class="text-2xl font-bold">Serverübersicht</h1>
+    <h1 class="text-2xl font-bold">
+        <i class="bi bi-hdd-network me-2 text-blue-700"></i>Serverübersicht
+    </h1>
     <a asp-controller="Server" asp-action="AddServer"
-        class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
-        + Server hinzufügen
+        class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded transition">
+        <i class="bi bi-plus-circle me-1"></i>Server hinzufügen
     </a>
 </div>
 
-
-
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
     @foreach (var s in Model.Servers)
     {
-        <div class="bg-white rounded-xl shadow p-4 border border-gray-200">
-            <div class="flex justify-between items-start">
-                <div>
-                    <h2 class="text-lg font-semibold">(#@s.Id) @s.Name</h2>
-                </div>
-                <span class="text-sm px-2 py-1 rounded 
-                    @(s.IsOnline ? "bg-green-100 text-green-700" : "bg-red-100 text-red-700")">
+        <div class="bg-white rounded-xl shadow p-5 border border-gray-200 flex flex-col gap-4">
+            <div class="flex justify-between items-center">
+                <h2 class="text-lg font-semibold text-gray-800">
+                    <i class="bi bi-cpu me-1 text-gray-600"></i>(#@s.Id) @s.Name
+                </h2>
+                <span class="text-sm px-2 py-1 rounded font-medium
+                        @(s.IsOnline ? "bg-green-100 text-green-700" : "bg-red-100 text-red-700")">
+                    <i class="bi @(s.IsOnline ? "bi-check-circle" : "bi-x-circle") me-1"></i>
                     @(s.IsOnline ? "Online" : "Offline")
                 </span>
             </div>
 
-            <div class="mt-4 text-sm space-y-1 text-gray-700">
-                <div><strong>IP:</strong> @s.IPAddress</div>
-                <div><strong>Typ:</strong> @s.Type</div>
-                <div><strong>Status:</strong> @((s.IsOnline) ? "Online" : "Offline")</div>
-                <div><strong>Erstellt:</strong> @s.CreatedAt.ToLocalTime().ToString("dd.MM.yyyy HH:mm")</div>
-                <div><strong>Last-Seen:</strong> @(s.LastSeen.ToLocalTime().ToString("dd.MM.yyyy HH:mm") ?? "Never")</div>
+            <div class="flex gap-6">
+                <!-- Linke Seite: Infos, nimmt ca. 40% Breite -->
+                <div class="flex-1 max-w-[40%] text-sm space-y-1 text-gray-700">
+                    <div><i class="bi bi-globe me-1 text-gray-500"></i><strong>IP:</strong> @s.IPAddress</div>
+                    <div><i class="bi bi-hdd me-1 text-gray-500"></i><strong>Typ:</strong> @s.Type</div>
+                    <div><i class="bi bi-calendar-check me-1 text-gray-500"></i><strong>Erstellt:</strong>
+                        @s.CreatedAt.ToLocalTime().ToString("dd.MM.yyyy HH:mm")</div>
+                    <div><i class="bi bi-clock me-1 text-gray-500"></i><strong>Last-Seen:</strong>
+                        @s.LastSeen.ToLocalTime().ToString("dd.MM.yyyy HH:mm")</div>
+                </div>
+
+                <!-- Rechte Seite: Zwei Diagramme nebeneinander, je ca. 50% von 60% = 30% insgesamt -->
+                <div class="flex-1 flex gap-4 max-w-[60%]">
+                    
+
+                </div>
             </div>
 
-            <div class="mt-4 flex justify-end gap-2">
-                <a asp-action="EditServer" asp-route-id="@s.Id" class="btn btn-sm btn-primary">Bearbeiten</a>
+            <div class="flex justify-end gap-3">
+                <a asp-action="EditServer" asp-route-id="@s.Id" class="text-blue-600 hover:text-blue-800 font-medium">
+                    <i class="bi bi-pencil-square me-1"></i>Bearbeiten
+                </a>
 
                 <form asp-action="Delete" asp-route-id="@s.Id" method="post"
                     onsubmit="return confirm('Diesen Server wirklich löschen?');">
-                    <button type="submit" class="text-red-600 hover:text-red-800 font-semibold">Löschen</button>
+                    <button type="submit" class="text-red-600 hover:text-red-800 font-medium">
+                        <i class="bi bi-trash me-1"></i>Löschen
+                    </button>
                 </form>
             </div>
         </div>
     }
-</div>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+
+@section Scripts {
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+        @foreach (var s in Model.Servers)
+        {
+            <text>
+            var ctxCpu_@s.Id = document.getElementById("cpuChart-@s.Id").getContext('2d');
+            var cpuChart_@s.Id = new Chart(ctxCpu_@s.Id, {
+                type: 'bar',
+                data: {
+                    labels: ['0s', '5s', '10s', '15s', '20s'],
+                    datasets: [{
+                        label: 'CPU %',
+                        data: [12, 19, 7, 15, 10], // Beispielwerte
+                        backgroundColor: 'rgba(59, 130, 246, 0.7)', // Tailwind blue-500 transparent
+                        borderColor: 'rgba(59, 130, 246, 1)',
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    animation: false,
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            max: 100
+                        }
+                    },
+                    plugins: {
+                        legend: {
+                            display: false
+                        }
+                    }
+                }
+            });
+
+            var ctxRam_@s.Id = document.getElementById("ramChart-@s.Id").getContext('2d');
+            var ramChart_@s.Id = new Chart(ctxRam_@s.Id, {
+                type: 'bar',
+                data: {
+                    labels: ['0s', '5s', '10s', '15s', '20s'],
+                    datasets: [{
+                        label: 'RAM %',
+                        data: [45, 40, 55, 48, 50], // Beispielwerte
+                        backgroundColor: 'rgba(16, 185, 129, 0.7)', // Tailwind green-500 transparent
+                        borderColor: 'rgba(16, 185, 129, 1)',
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    animation: false,
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            max: 100
+                        }
+                    },
+                    plugins: {
+                        legend: {
+                            display: false
+                        }
+                    }
+                }
+            });
+            </text>
+        }
+    });
+</script>
+}
+

Watcher/Views/Shared/_Layout.cshtml

@@ -14,6 +14,7 @@
 <head>
     <meta charset="utf-8" />
     <title>@ViewData["Title"] - Watcher</title>
+    <link rel="stylesheet" href="~/css/site.css" />
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
 
@@ -59,20 +60,27 @@
 <body>
     <div class="sidebar">
         <div>
-            <h4>Watcher</h4>
+            <h4>
+                <a href="https://git.triggermeelmo.com/daniel-hbn/Watcher" target="_blank" rel="noopener noreferrer" style="text-decoration: none;">
+                    Watcher
+                </a>
+            </h4>
+
             <ul class="nav flex-column">
                 <li class="nav-item">
                     <a class="nav-link" href="/Home/Index">Dashboard</a>
                 </li>
-                <li class="nav-item"></li>
-                <a class="nav-link" href="/Uptime/Overview">Uptime</a>
-                </li>
                 <li class="nav-item">
                     <a class="nav-link" href="/Server/Overview">Servers</a>
                 </li>
+                <!-- Noch nicht implementiert  
                 <li class="nav-item">
                     <a class="nav-link" href="/Container/Overview">Container</a>
                 </li>
+                <li class="nav-item"></li>
+                <a class="nav-link" href="/Uptime/Overview">Uptime</a>
+                </li>
+                -->
             </ul>
         </div>
 

Watcher/Views/Shared/_LoginLayout.cshtml

@@ -0,0 +1,24 @@
+@{
+    Layout = null;
+}
+
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@ViewData["Title"] - Login</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" />
+</head>
+<body class="bg-light d-flex align-items-center justify-content-center" style="min-height: 100vh;">
+    <div class="container">
+        <div class="row justify-content-center">
+            <div class="col-md-6">
+                @RenderBody()
+            </div>
+        </div>
+    </div>
+
+    @RenderSection("Scripts", required: false)
+</body>
+</html>

Watcher/wwwroot/css/site.css

@@ -1,22 +1,66 @@
-html {
-  font-size: 14px;
-}
-
-@media (min-width: 768px) {
-  html {
-    font-size: 16px;
-  }
-}
-
-.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
-  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
-}
-
-html {
-  position: relative;
-  min-height: 100%;
+:root {
+    --color-bg: #0d1b2a;
+    --color-surface: #1b263b;
+    --color-accent: #415a77;
+    --color-primary: #0d6efd;
+    --color-text: #ffffff;
+    --color-muted: #c0c0c0;
+    --color-success: #14a44d;
+    --color-danger: #ff6b6b;
 }
 
 body {
-  margin-bottom: 60px;
-}
+    background-color: var(--color-bg);
+    color: var(--color-text);
+}
+
+a {
+    color: var(--color-primary);
+}
+
+.card, .navbar, .form-control, .dropdown-menu {
+    background-color: var(--color-surface);
+    color: var(--color-text);
+    border: none;
+}
+
+.form-control {
+    background-color: var(--color-accent);
+    color: var(--color-text);
+}
+
+.form-control::placeholder {
+    color: var(--color-muted);
+}
+
+.navbar .nav-link,
+.dropdown-item {
+    color: var(--color-text);
+}
+
+.btn-primary {
+    background-color: var(--color-primary);
+    border: none;
+}
+
+.btn-danger {
+    background-color: var(--color-danger);
+    border: none;
+}
+
+.btn-pocketid {
+    background-color: var(--color-success);
+    color: white;
+}
+
+.btn-pocketid:hover {
+    background-color: #0f8c3c;
+}
+
+.table {
+    color: var(--color-text);
+}
+
+hr {
+    border-top: 1px solid var(--color-accent);
+}