Added failed login message and redirection to home on successful login

MilkStream/Components/Pages/Login.razor

@@ -1,11 +1,17 @@
 @page "/login"
 
+@inject NavigationManager                              navigationManager
 @inject LoginService                                   loginService
 @inject Blazored.SessionStorage.ISessionStorageService sessionStorage
 
 <PageTitle>Login</PageTitle>
 
 <div class="login-container">
+    @if (isLoginFailed) {
+        <div class="login-failed login-group">
+            <div class="login-failed-text">Login failed. Please try again.</div>
+        </div>
+    }
     <div class="login-group">
         <label class="login-lbl">Username</label>
         <input type="text" placeholder="Username" required="required" id="username" @bind="username"/>
@@ -27,15 +33,20 @@
 @code{
     string username = string.Empty;
     string password = string.Empty;
-
+    bool isLoginFailed = false;
+    
     private async Task Login_OnClick() {
+        isLoginFailed = false; // Reset the login failure string
         var result = await loginService.Login(username, password);
         if (result.Item1) { // Login successful
             await sessionStorage.SetItemAsStringAsync("userId", result.Item2?.UserId.ToString());
             await sessionStorage.SetItemAsStringAsync("authToken", result.Item2?.Token);
             await sessionStorage.SetItemAsStringAsync("refreshToken", result.Item2?.RefreshToken);
+            navigationManager.NavigateTo("/"); // Redirect to home page
         } else {
             //TODO: Handle login failure
+            //show a message to the user
+            isLoginFailed = true;
         }
     }
 }

MilkStream/Components/Pages/Login.razor.css

@@ -73,4 +73,17 @@ input:hover, input:focus {
     border-color: rgb(5, 39, 103); /* Change border on focus */
     outline: none;
     box-shadow: 0 0 5px rgba(174, 18, 213, 0.5);
+}
+
+.login-failed {
+    background-color: darkred;
+    border: 1px solid red;
+    border-radius: 5px;
+}
+
+.login-failed-text {
+    color: white;
+    padding: 5px;
+    text-align: center;
+    font-weight: bold;
 }