Implement authentication system and enhance data handling features

Author: bluescorpian

README.md

@@ -3,11 +3,12 @@
 ## Backend
 
 -   [x] extract data from site every 30s and store in db
--   [ ] ability to download data in db as csv
+-   [x] ability to download data in db as csv
 -   [x] when tracking multiple stations only extract one at time, round robin style, to avoid hiting deno ratelimit
 
 ## Frontend
 
 -   [x] Select stations (input, seperated by comma)
--   [ ] download selected stations wind data
+-   [x] download selected stations wind data
+-   [ ] authentication system, password
 -   [ ] view selected stations history online

backend/deno.json

@@ -1,8 +1,6 @@
 {
 	"tasks": {
-		"dev": "deno run --watch main.ts",
-		"start": "deno run --unstable-cron --unstable-kv -A main.ts",
-		"download_kv": "deno run --unstable-cron --unstable-kv -A download_kv.ts"
+		"dev": "KV_STORE=kv.sqlite deno serve --unstable-cron --unstable-kv -A --watch main.ts"
 	},
 	"imports": {
 		"@oak/oak": "jsr:@oak/oak@^17.1.4",

backend/main.ts

@@ -6,10 +6,16 @@ import { stringify } from "jsr:@std/csv/stringify";
 
 const kv = await Deno.openKv(Deno.env.get("KV_STORE") || undefined);
 
-Deno.cron("Download wind data", "*/10 * * * *", async () => {
+Deno.cron(
+	"Download wind data",
+	`*/${Deno.env.get("CRON_INTERVAL") || "1"} * * * *`,
+	async () => {
+		await downloadNextStationWindData();
+	}
+);
+if (Deno.env.get("INITIAL_DOWNLOAD") === "true") {
 	await downloadNextStationWindData();
-});
-await downloadNextStationWindData();
+}
 
 async function downloadNextStationWindData() {
 	const trackedStations =
@@ -74,12 +80,36 @@ async function downloadWindData(stationId: number) {
 
 const router = new Router();
 
+router.post("/login", async (ctx) => {
+	const body = await ctx.request.body.text();
+	const formData = new URLSearchParams(body);
+	const password = formData.get("password");
+
+	if (password === (Deno.env.get("PASSWORD") || "")) {
+		ctx.response.status = 200;
+	} else {
+		ctx.response.status = 401;
+		ctx.response.body = "Incorrect password";
+	}
+});
+
 router.get("/tracked-stations", async (ctx) => {
 	const trackedStations = (await kv.get<number[]>(["trackedStations"])).value;
 	ctx.response.body = trackedStations ?? [];
 });
 
 router.post("/tracked-stations", async (ctx) => {
+	if (
+		(ctx.request.headers.get("Authorization") ?? "") !==
+		(Deno.env.get("PASSWORD") ?? "")
+	) {
+		ctx.response.status = 401;
+		ctx.response.body = {
+			msg: "Unauthorized",
+		};
+		return;
+	}
+
 	try {
 		const body = await ctx.request.body.text();
 		const formData = new URLSearchParams(body);
@@ -96,11 +126,11 @@ router.post("/tracked-stations", async (ctx) => {
 			ctx.response.body = { msg: "Saved Successfully", trackedStations };
 		} else {
 			ctx.response.status = 500;
-			ctx.response.body = "Failed to save tracked stations";
+			ctx.response.body = { msg: "Failed to save tracked stations" };
 		}
 	} catch (err) {
 		ctx.response.status = 500;
-		ctx.response.body = "Failed to save tracked stations";
+		ctx.response.body = { msg: "Failed to save tracked stations" };
 	}
 });
 
@@ -155,7 +185,7 @@ router.get("/wind-history/:stationId/csv", async (ctx) => {
 });
 
 const app = new Application();
-app.use(oakCors({ origin: "*" }));
+app.use(oakCors({ origin: Deno.env.get("ORIGIN") || "*" }));
 app.use(router.routes());
 app.use(router.allowedMethods());
 

frontend/.env

@@ -1 +1 @@
-VITE_API_URL=http://localhost:3000
+VITE_API_URL=http://localhost:8000

frontend/src/App.svelte

@@ -2,13 +2,14 @@
 	import { Col, Container, Row } from "@sveltestrap/sveltestrap";
 	import SelectTrackedStatiosn from "./lib/SelectTrackedStations.svelte";
 	import Stations from "./lib/Stations.svelte";
+	import Login from "./lib/Login.svelte";
 </script>
 
 <main>
 	<Container sm>
 		<Row
 			><Col sm="12" md={{ offset: 4, size: 5 }}
-				><h1 class="m-4">wind2speed-tracker</h1></Col
+				><h1 class="mt-4 mb-4">wind2speed-tracker</h1></Col
 			></Row
 		>
 		<Row>
@@ -22,4 +23,5 @@
 			></Row
 		>
 	</Container>
+	<Login></Login>
 </main>

frontend/src/lib/Login.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import {
+		Button,
+		Input,
+		InputGroup,
+		Modal,
+		ModalBody,
+		ModalFooter,
+		ModalHeader,
+	} from "@sveltestrap/sveltestrap";
+	import { authState } from "./auth.svelte";
+
+	let open = $state(true);
+	let loggingIn = $state(false);
+	let password = $state("");
+	let error = $state("");
+	let inputClasses = $derived.by(() => (error ? "is-invalid" : ""));
+
+	function login(e: SubmitEvent) {
+		e.preventDefault();
+		loggingIn = true;
+
+		const form = e.currentTarget as HTMLFormElement;
+		const formData = new URLSearchParams(new FormData(form) as any);
+
+		fetch(import.meta.env.VITE_API_URL + "/login", {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/x-www-form-urlencoded",
+			},
+			body: formData.toString(),
+		})
+			.then(async (res) => {
+				if (res.status === 200) {
+					authState.loggedIn = true;
+					authState.password = password;
+					open = false;
+				} else {
+					error = (await res.text()) || res.statusText;
+				}
+			})
+			.catch((err) => {
+				console.error(error);
+				error = err.message;
+			})
+			.finally(() => {
+				loggingIn = false;
+			});
+		// authState.loggedIn = true;
+		// open = false;
+	}
+</script>
+
+<Modal isOpen={open} centered={true}>
+	<form onsubmit={login}>
+		<ModalHeader>Login</ModalHeader>
+		<ModalBody>
+			<InputGroup class={"has-validation " + inputClasses}>
+				<Input
+					name="password"
+					type="password"
+					placeholder="Password"
+					bind:value={password}
+					disabled={loggingIn}
+					class={inputClasses}
+				/>{#if error}
+					<div class="invalid-feedback">{error}</div>
+				{/if}</InputGroup
+			>
+		</ModalBody>
+		<ModalFooter>
+			<Button color="primary" type="submit" disabled={loggingIn}
+				>Login</Button
+			>
+			<Button color="secondary" onclick={() => (open = false)}
+				>Guest</Button
+			>
+		</ModalFooter>
+	</form>
+</Modal>

frontend/src/lib/SelectTrackedStations.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Button, Input, InputGroup } from "@sveltestrap/sveltestrap";
+	import { authState } from "./auth.svelte";
 
 	let loading = $state(true);
 	$effect(() => {
@@ -36,6 +37,7 @@
 			method: "POST",
 			headers: {
 				"Content-Type": "application/x-www-form-urlencoded",
+				Authorization: authState.password,
 			},
 			body: formData.toString(),
 		})
@@ -48,12 +50,14 @@
 					msg = res.statusText;
 				} else {
 					msg = data.msg;
-					trackedStationsStr = data.trackedStations.join(",");
+					if (res.ok)
+						trackedStationsStr = data.trackedStations.join(",");
 				}
 				success = res.ok;
 				submitted = true;
 			})
 			.catch((err) => {
+				console.error(err);
 				msg = err.message;
 				success = false;
 				submitted = true;
@@ -74,13 +78,15 @@
 				class={inputValidation}
 				oninput={() => (submitted = false)}
 				bind:value={trackedStationsStr}
-				disabled={loading}
+				disabled={!authState.loggedIn || loading}
 			/>
 			<label for="trackedStations">Tracked Stations</label>
 		</div>
 
-		<Button color="primary" type="submit" disabled={submitting || loading}
-			>Save</Button
+		<Button
+			color="primary"
+			type="submit"
+			disabled={!authState.loggedIn || submitting || loading}>Save</Button
 		>
 		{#if success}
 			<div class="valid-feedback">{msg}</div>

frontend/src/lib/auth.svelte.ts

@@ -0,0 +1,4 @@
+export let authState: { loggedIn: boolean; password: string } = $state({
+	loggedIn: false,
+	password: "",
+});