Use API_BASE_URL everywhere and change the default value to https://s…

.env.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_API_BASE_URL="http://localhost:8000"

.gitignore

@@ -47,3 +47,5 @@ src/api/types.gen.ts
 
 # Ignore TypeScript build artifacts
 tsconfig.tsbuildinfo
+
+.env

README.md

@@ -4,9 +4,9 @@ This repo uses VSCode's Dev Containers extension to standardize the development
 
 ## Installation
 0. Using Windows? First set up WSL 2.
-    - Press Windows `⊞` -> "Turn Windows features on or off". Enable "Windows Subsystem for Linux". 
+    - Press Windows `⊞` -> "Turn Windows features on or off". Enable "Windows Subsystem for Linux".
     - Open Powershell as admin.
-    - `wsl --install`  
+    - `wsl --install`
     - `wsl --set-default-version 2`
     - `wsl --install -d Ubuntu-22.04`
     - `wsl --set-default Ubuntu-22.04`
@@ -15,14 +15,16 @@ This repo uses VSCode's Dev Containers extension to standardize the development
 1. Install [Docker Desktop](https://www.docker.com/products/docker-desktop/) and run it.
 
     - Windows users: Make sure you select Use WSL 2 instead of Hyper-V if the option is presented.
- 
+
 2. Open a new VSCode window and install Dev Containers extension from the Extensions menu.
- 
+
 3. Open the Command Palette (`Ctrl + Shift + P` / `Cmd + Shift + P`) and select `Dev Containers: Clone Repository in Container Volume...`. Select `GitHub`, then enter `fsek/WWW-Web.git`.
 
-4. After configuration has finished in the open terminal, it should say `Done. Press any key to close the terminal`. 
+4. After configuration has finished in the open terminal, it should say `Done. Press any key to close the terminal`.
+
+5. Open a new Bash terminal (`Ctrl + Shift + Ö`) and run: `bun install`, `bun run generate-api` and then `bun run dev`. If you are developing the [backend application](https://github.com/fsek/WebWebWeb) and want to test the frontend against it, make sure to specify the backend URL in the `.env` file with `NEXT_PUBLIC_API_BASE_URL="http://localhost:8000"`. Otherwise <https://stage.backend.fsektionen.se> will be used.
+
 
-5. Open a new Bash terminal (`Ctrl + Shift + Ö`) and run: `bun install`, `bun run generate-api` and then `bun run dev` ([backend application](https://github.com/fsek/WebWebWeb) needs to be active for both of these to work as wanted).
 
     - If you start WebWebWeb in a VSCode window, closing the window or switching to WWW-Web in the same VSCode window will terminate the backend. Open another window instead.
 
@@ -41,4 +43,4 @@ This repo uses VSCode's Dev Containers extension to standardize the development
 
 
 ## Tips and tricks
-- Use https://www.creative-tim.com/twcomponents/cheatsheet to find different Tailwind css classes
+- Use https://www.creative-tim.com/twcomponents/cheatsheet to find different Tailwind css classes

openapi-ts.config.ts

@@ -1,8 +1,10 @@
 import { defineConfig } from "@hey-api/openapi-ts";
+import { API_BASE_URL } from "./src/constants";
 
 export default defineConfig({
 	client: "@hey-api/client-fetch",
-	input: "http://host.docker.internal:8000/openapi.json",
+	input: `${API_BASE_URL}/openapi.json`,
+	// input: "http://host.docker.internal:8000/openapi.json",
 	//input: "http://127.0.0.1:8000",
 	//input: "http://localhost:8000/openapi.json",
 	output: { path: "src/api", lint: "biome", format: "biome" },

src/app/(public)/calendar/subscribe/route.ts

@@ -1,5 +1,6 @@
 import { type NextRequest, NextResponse } from "next/server";
 import stripHtmlLinebreaks from "@/help_functions/stripHtmlLinebreaks";
+import { API_BASE_URL } from "@/constants";
 
 interface EventExtendedProps {
 	description?: string;
@@ -165,9 +166,7 @@ function escapeICSText(text: string) {
 async function fetchLatestEvents() {
 	// TODO: Since we discard all old events anyway, we eventually want to create a backend route which
 	// only gives us the old events to avoid the frontend server getting too much data
-	const baseUrl =
-		process.env.NEXT_PUBLIC_API_BASE_URL || "http://host.docker.internal:8000";
-	const backendRes = await fetch(`${baseUrl}/events/`);
+	const backendRes = await fetch(`${API_BASE_URL}/events/`);
 	const data = await backendRes.json();
 
 	// Transform the data to the correct format

src/app/dorrar/[id]/accesser/route.ts

@@ -1,5 +1,6 @@
 import { type NextRequest, NextResponse } from "next/server";
 import { renderAccesserHtml } from "./template";
+import { API_BASE_URL } from "@/constants";
 
 // The reason we have this file is that the access stil-ids are fetched by LU by scraping a very specific URL.
 // This file serves that URL. TODO: Talk to LU about this and switch to them actually using a private API
@@ -41,11 +42,8 @@ export async function GET(
 		}
 
 		// Fetch from your backend, now including the id if needed
-		const baseUrl =
-			process.env.NEXT_PUBLIC_API_BASE_URL ||
-			"http://host.docker.internal:8000";
 		const backendRes = await fetch(
-			`${baseUrl}/access-serve/${encodeURIComponent(doorNameMap[id])}`,
+			`${API_BASE_URL}/access-serve/${encodeURIComponent(doorNameMap[id])}`,
 		);
 		const items = await backendRes.json();
 

src/app/layout.tsx

@@ -6,6 +6,7 @@ import TranslationsProvider from "@/components/TranslationsProvider";
 import { ThemeProvider } from "next-themes";
 import CookieConsent from "@/components/CookieConsent";
 import { headers } from "next/headers";
+import { API_BASE_URL } from "@/constants";
 
 // Default locale as fallback
 const defaultLocale = "sv" satisfies Locale;
@@ -27,7 +28,7 @@ export default async function RootLayout({
 }: {
 	children: React.ReactNode;
 }) {
-	client.setConfig({ baseUrl: "http://host.docker.internal:8000" });
+	client.setConfig({ baseUrl: API_BASE_URL });
 
 	const headersList = await headers();
 	const initialLanguage =

src/components/LoginForm.tsx

@@ -50,19 +50,19 @@ export default function LoginForm() {
 			setSubmitEnabled(true);
 		},
 		onError: (error) => {
+			let message;
 			switch (error.detail) {
 				case "LOGIN_BAD_CREDENTIALS":
-					form.setError("root", {
-						type: "value",
-						message: t("login.invalid-email-or-password"),
-					});
+					message = t("login.invalid-email-or-password");
+					break;
+				case undefined:
+					message = "Network error, please try again later.";
 					break;
 				default:
-					form.setError("root", {
-						type: "value",
-						message: `An error occurred: ${error.detail}`,
-					});
+					message = `An error occurred: ${error.detail}`;
 			}
+
+			form.setError("root", { type: "value", message });
 		},
 		onSuccess: (data) => {
 			auth.setAccessToken(data);
@@ -165,7 +165,7 @@ export default function LoginForm() {
 							)}
 						/>
 						{form.formState.errors.root && (
-							<div className="text-red-500">
+							<div className="text-red-600">
 								{form.formState.errors.root.message}
 							</div>
 						)}

src/components/QueryClientProvider.tsx

@@ -7,9 +7,7 @@ import {
 import type { PropsWithChildren } from "react";
 import { client } from "@/api";
 import { useAuthState } from "@/lib/auth";
-
-const API_BASE_URL =
-	process.env.NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000";
+import { API_BASE_URL } from "@/constants";
 
 client.setConfig({ baseUrl: API_BASE_URL });
 

src/constants.ts

@@ -6,3 +6,6 @@ export const ACCEPT_ENUM = {
 
 // Create a type from the enum values
 export type AcceptEnum = (typeof ACCEPT_ENUM)[keyof typeof ACCEPT_ENUM];
+
+export const API_BASE_URL =
+	process.env.NEXT_PUBLIC_API_BASE_URL || "https://stage.backend.fsektionen.se";