kinda works, but wasteful and misinforming :(

Kemkas.Web/Controllers/CharacterController.cs

@@ -8,7 +8,7 @@ using Microsoft.AspNetCore.Mvc;
 namespace Kemkas.Web.Controllers;
 
 [ApiController]
-[Route("[controller]")]
+[Route("api/[controller]")]
 public class CharacterController(
     ICharacterValidationService validationService,
     ICharacterDtoToDbModelService dtoToDbModelService,

Kemkas.Web/Controllers/UserController.cs

@@ -0,0 +1,18 @@
+using Kemkas.Web.Db.Models;
+using Microsoft.AspNetCore.Identity;
+using Microsoft.AspNetCore.Mvc;
+
+namespace Kemkas.Web.Controllers;
+
+[Route("api/[controller]")]
+[ApiController]
+public class UserController : ControllerBase
+{
+    // GET
+    [HttpGet("me")]
+    public async Task<string?> Me([FromServices] UserManager<ApplicationUser> userManager)
+    {
+        var user = await userManager.GetUserAsync(User);
+        return user?.UserName ?? user?.Email;
+    }
+}

Kemkas.Web/Program.cs

@@ -70,7 +70,7 @@ app.UseAuthorization();
 
 app.MapControllerRoute(
     name: "default",
-    pattern: "{controller}/{action=Index}/{id?}");
+    pattern: "/api/{controller}/{action=Index}/{id?}");
 app.MapRazorPages();
 
 app.MapFallbackToFile("index.html");

Kemkas.Web/frontend/src/App.tsx

@@ -1,45 +1,83 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import './App.css';
-import CreateCharacter from "./first-edition/pages/CreateCharacter";
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import {Faro} from "@grafana/faro-web-sdk";
+import {createBrowserRouter, RouterProvider} from "react-router-dom";
+import CreateCharacter from "./first-edition/pages/CreateCharacter";
 import CharacterList from "./first-edition/pages/CharacterList";
-import ErrorBoundary from "./first-edition/pages/ErrorBoundary";
+import ErrorBoundary from "./shared/ErrorBoundary";
+
+type LoadingState = "not-started" | "loading" | "finished"
 
 function App(props: {faro?: Faro}) {
     const router = createBrowserRouter([
         {
             path: "/",
             element: <CreateCharacter faro={props.faro} />,
+            ErrorBoundary: ErrorBoundary,
         },
         {
             path: "/karaktereim",
             element: <CharacterList faro={props.faro} />,
-            loader: () => fetch(`/Character`),
+            loader: () => fetch(`api/Character`),
-            ErrorBoundary: ErrorBoundary
+            ErrorBoundary: ErrorBoundary,
         },
         {
             path: "/:id",
             element: <CreateCharacter faro={props.faro} />,
-            loader: args => fetch(`/Character/${args.params.id}`)
+            loader: args => fetch(`api/Character/${args.params.id}`),
+            ErrorBoundary: ErrorBoundary,
         }
     ]);
     
+    let [loading, setLoading] = useState("not-started" as LoadingState);
+    let [userName, setUserName] = useState(null as string | null);
+
+    useEffect(() => {
+        let ignore = false;
+        if (loading === "not-started") {
+            setLoading("loading");
+            fetch('api/User/me')
+                .then(response => {
+                    if (response.ok) {
+                        response.text()
+                            .then((data) => data?.length > 0 ? setUserName(data) : setUserName(null))
+                            .catch((err) => {
+                                console.log(err)
+                                !ignore && setUserName(null);
+                            })
+                    } else {
+                        console.log(response)
+                        !ignore && setUserName(null);
+                    }
+                })
+                .catch((err) => {
+                    console.log(err);
+                    !ignore && setUserName(null)
+                })
+                .finally(() => {
+                    setLoading("finished"); 
+                })
+        }
+        return () => {
+            ignore = true
+        }
+    }, [loading, setLoading, userName, setUserName])
+    
     return (
         <>
             <header>
                 <nav
                     className="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
                     <div className="container ps-4 pe-4">
-                        <a className="navbar-brand" href="/">Kemkas</a>
+                        <a className="navbar-brand" href={userName == null ? "/" : "/karaktereim"}>Kemkas</a>
                         <button className="navbar-toggler" type="button" data-bs-toggle="collapse"
                                 data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                                 aria-expanded="false" aria-label="Toggle navigation">
                             <span className="navbar-toggler-icon"></span>
                         </button>
-                        <div className="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
+                        {loading !== "finished" ? "Loading..." :
-
+                            userName == null
-
+                                ? <div className="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                                     <ul className="navbar-nav">
                                         <li className="nav-item">
                                             <a className="nav-link text-dark" href="/Identity/Account/Register">Register</a>
@@ -49,6 +87,17 @@ function App(props: {faro?: Faro}) {
                                         </li>
                                     </ul>
                                 </div>
+                                : <div className="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
+                                    <ul className="navbar-nav">
+                                        <li className="nav-item">
+                                            <a className="nav-link text-dark" href="/Identity/Account/Manage">Hello {userName}!</a>
+                                        </li>
+                                        <li className="nav-item">
+                                            <a className="nav-link text-dark" href="/Identity/Account/Logout">Logout</a>
+                                        </li>
+                                    </ul>
+                                </div>
+                        }
                     </div>
                 </nav>
             </header>

Kemkas.Web/frontend/src/first-edition/api/character.api.ts

@@ -2,7 +2,7 @@ import {KarakterInputs} from "../domain-models/karakter";
 import axios from "axios";
 
 export async function StoreNewCharacter(karakter: KarakterInputs) {
-    let response = await axios.post(`${window.location.origin}/Character/`, karakter, {
+    let response = await axios.post(`${window.location.origin}/api/Character/`, karakter, {
         withCredentials: true,
     })
     if (response.status < 300){

Kemkas.Web/frontend/src/first-edition/pages/CharacterList.tsx

@@ -25,8 +25,8 @@ function CharacterList(props: {faro?: Faro}) {
             </thead>
             <tbody>
             {characters.map(c => (
-                <tr>
+                <tr key={c.id}>
-                    <CharacterListItem character={c} key={c.id}/>
+                    <CharacterListItem character={c}/>
                 </tr>
             ))}
             </tbody>

Kemkas.Web/nginx.conf

@@ -75,7 +75,7 @@ http {
             proxy_pass_request_headers on;
         }
         
-        location /Character/ {
+        location /api/ {
             proxy_pass   https://backend;
             proxy_pass_request_headers on;
         }