can record rides, all tests are passing

Author: aligneddev

src/BikeTracking.Api/Infrastructure/Security/UserIdHeaderAuthenticationHandler.cs

@@ -0,0 +1,43 @@
+using System.Security.Claims;
+using System.Text.Encodings.Web;
+using Microsoft.AspNetCore.Authentication;
+using Microsoft.Extensions.Options;
+
+namespace BikeTracking.Api.Infrastructure.Security;
+
+public sealed class UserIdHeaderAuthenticationSchemeOptions : AuthenticationSchemeOptions { }
+
+public sealed class UserIdHeaderAuthenticationHandler
+    : AuthenticationHandler<UserIdHeaderAuthenticationSchemeOptions>
+{
+    public const string SchemeName = "UserIdHeader";
+    public const string UserIdHeaderName = "X-User-Id";
+
+    public UserIdHeaderAuthenticationHandler(
+        IOptionsMonitor<UserIdHeaderAuthenticationSchemeOptions> options,
+        ILoggerFactory logger,
+        UrlEncoder encoder
+    )
+        : base(options, logger, encoder) { }
+
+    protected override Task<AuthenticateResult> HandleAuthenticateAsync()
+    {
+        var userIdString = Request.Headers[UserIdHeaderName].FirstOrDefault();
+        if (string.IsNullOrWhiteSpace(userIdString))
+        {
+            return Task.FromResult(AuthenticateResult.NoResult());
+        }
+
+        if (!long.TryParse(userIdString, out var userId) || userId <= 0)
+        {
+            return Task.FromResult(AuthenticateResult.Fail("Invalid X-User-Id header."));
+        }
+
+        var claims = new[] { new Claim("sub", userId.ToString()) };
+        var identity = new ClaimsIdentity(claims, SchemeName);
+        var principal = new ClaimsPrincipal(identity);
+        var ticket = new AuthenticationTicket(principal, SchemeName);
+
+        return Task.FromResult(AuthenticateResult.Success(ticket));
+    }
+}

src/BikeTracking.Api/Program.cs

@@ -25,6 +25,14 @@
 builder.Services.AddScoped<SignupService>();
 builder.Services.AddScoped<IdentifyService>();
 
+builder
+    .Services.AddAuthentication(UserIdHeaderAuthenticationHandler.SchemeName)
+    .AddScheme<UserIdHeaderAuthenticationSchemeOptions, UserIdHeaderAuthenticationHandler>(
+        UserIdHeaderAuthenticationHandler.SchemeName,
+        _ => { }
+    );
+builder.Services.AddAuthorization();
+
 builder.Services.AddScoped<RecordRideService>();
 builder.Services.AddScoped<GetRideDefaultsService>();
 
@@ -70,6 +78,8 @@
 app.MapGet("/", () => Results.Ok(new { message = "Bike Tracking API is running." }));
 app.UseCors();
 app.UseHttpLogging();
+app.UseAuthentication();
+app.UseAuthorization();
 app.MapUsersEndpoints();
 app.MapRidesEndpoints();
 app.MapDefaultEndpoints();

src/BikeTracking.Frontend/playwright-report/index.html

@@ -54,7 +54,7 @@
   color: #0f172a;
 }
 
-.nav-link--active {
+.nav-link-active {
   background: #eff6ff;
   color: #1d4ed8;
 }

src/BikeTracking.Frontend/src/components/app-header/app-header.css

@@ -16,15 +16,15 @@ export function AppHeader() {
           <NavLink
             to="/miles"
             className={({ isActive }) =>
-              isActive ? 'nav-link nav-link--active' : 'nav-link'
+              isActive ? 'nav-link nav-link-active' : 'nav-link'
             }
           >
             Dashboard
           </NavLink>
           <NavLink
             to="/rides/record"
             className={({ isActive }) =>
-              isActive ? 'nav-link nav-link--active' : 'nav-link'
+              isActive ? 'nav-link nav-link-active' : 'nav-link'
             }
           >
             Record Ride

src/BikeTracking.Frontend/src/components/app-header/app-header.tsx

@@ -20,35 +20,77 @@ export interface RideDefaultsResponse {
   defaultRideDateTimeLocal: string;
 }
 
-const API_BASE = import.meta.env.VITE_API_BASE || "/api";
+const API_BASE_URL =
+  (import.meta.env.VITE_API_BASE_URL as string | undefined)?.replace(
+    /\/$/,
+    "",
+  ) ?? "http://localhost:5436";
+const SESSION_KEY = "bike_tracking_auth_session";
+
+function getAuthHeaders(): Record<string, string> {
+  const headers: Record<string, string> = {
+    "Content-Type": "application/json",
+  };
+
+  try {
+    const raw = sessionStorage.getItem(SESSION_KEY);
+    if (!raw) {
+      return headers;
+    }
+
+    const parsed = JSON.parse(raw) as { userId?: number };
+    if (typeof parsed.userId === "number" && parsed.userId > 0) {
+      headers["X-User-Id"] = parsed.userId.toString();
+    }
+  } catch {
+    // Ignore malformed session payloads and continue unauthenticated.
+  }
+
+  return headers;
+}
+
+async function parseErrorMessage(
+  response: Response,
+  fallback: string,
+): Promise<string> {
+  try {
+    const payload = (await response.json()) as { message?: string };
+    if (payload.message && payload.message.length > 0) {
+      return payload.message;
+    }
+  } catch {
+    // Response was not JSON.
+  }
+
+  return fallback;
+}
 
 export async function recordRide(
   request: RecordRideRequest,
 ): Promise<RecordRideSuccessResponse> {
-  const response = await fetch(`${API_BASE}/rides`, {
+  const response = await fetch(`${API_BASE_URL}/api/rides`, {
     method: "POST",
-    headers: { "Content-Type": "application/json" },
+    headers: getAuthHeaders(),
     body: JSON.stringify(request),
-    credentials: "include",
   });
 
   if (!response.ok) {
-    const error = await response.json();
-    throw new Error(error.message || "Failed to record ride");
+    throw new Error(await parseErrorMessage(response, "Failed to record ride"));
   }
 
   return response.json();
 }
 
 export async function getRideDefaults(): Promise<RideDefaultsResponse> {
-  const response = await fetch(`${API_BASE}/rides/defaults`, {
+  const response = await fetch(`${API_BASE_URL}/api/rides/defaults`, {
     method: "GET",
-    headers: { "Content-Type": "application/json" },
-    credentials: "include",
+    headers: getAuthHeaders(),
   });
 
   if (!response.ok) {
-    throw new Error("Failed to fetch ride defaults");
+    throw new Error(
+      await parseErrorMessage(response, "Failed to fetch ride defaults"),
+    );
   }
 
   return response.json();

src/BikeTracking.Frontend/src/services/ridesService.ts

@@ -0,0 +1,77 @@
+import { expect, test, type Page } from "@playwright/test";
+
+const TEST_PIN = "87654321";
+
+function uniqueUser(prefix: string): string {
+  return `${prefix}-${Date.now()}-${Math.floor(Math.random() * 100000)}`;
+}
+
+function toDateTimeLocalValue(date: Date): string {
+  const pad = (value: number): string => value.toString().padStart(2, "0");
+
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(
+    date.getDate(),
+  )}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+
+async function createAndLoginUser(
+  page: Page,
+  userName: string,
+  pin: string,
+): Promise<void> {
+  await page.goto("/signup");
+  await page.getByLabel("Name").fill(userName);
+  await page.getByLabel("PIN").fill(pin);
+  await page.getByRole("button", { name: "Create account" }).click();
+
+  await expect(page).toHaveURL("/login");
+  await page.getByLabel("Name").fill(userName);
+  await page.getByLabel("PIN").fill(pin);
+  await page.getByRole("button", { name: "Log in" }).click();
+  await expect(page).toHaveURL("/miles");
+}
+
+test.describe("004-record-ride e2e", () => {
+  test("records a ride from the record page", async ({ page }) => {
+    const userName = uniqueUser("e2e-record-ride");
+    await createAndLoginUser(page, userName, TEST_PIN);
+
+    await page.getByRole("link", { name: "Record Ride" }).click();
+    await expect(page).toHaveURL("/rides/record");
+
+    await page
+      .getByLabel(/date & time/i)
+      .fill(toDateTimeLocalValue(new Date()));
+    await page.getByLabel(/miles/i).fill("12.34");
+    await page.getByLabel(/duration/i).fill("41");
+    await page.getByLabel(/temperature/i).fill("68");
+    await page.getByRole("button", { name: "Record Ride" }).click();
+
+    await expect(page.getByText(/ride recorded successfully/i)).toBeVisible();
+  });
+
+  test("prefills defaults from the previous ride", async ({ page }) => {
+    const userName = uniqueUser("e2e-ride-defaults");
+    await createAndLoginUser(page, userName, TEST_PIN);
+
+    await page.goto("/rides/record");
+    await expect(page).toHaveURL("/rides/record");
+
+    await page
+      .getByLabel(/date & time/i)
+      .fill(toDateTimeLocalValue(new Date()));
+    await page.getByLabel(/miles/i).fill("9.75");
+    await page.getByLabel(/duration/i).fill("35");
+    await page.getByLabel(/temperature/i).fill("61");
+    await page.getByRole("button", { name: "Record Ride" }).click();
+    await expect(page.getByText(/ride recorded successfully/i)).toBeVisible();
+
+    await page.goto("/miles");
+    await page.getByRole("link", { name: "Record Ride" }).click();
+    await expect(page).toHaveURL("/rides/record");
+
+    await expect(page.getByLabel(/miles/i)).toHaveValue("9.75");
+    await expect(page.getByLabel(/duration/i)).toHaveValue("35");
+    await expect(page.getByLabel(/temperature/i)).toHaveValue("61");
+  });
+});