Add notification when credentials are invalid

client/app.tsx

@@ -52,10 +52,20 @@ export function App() {
 	}, [])
 
 	if (route === "login") {
-		return <Login onClose={handleLoginClose} />
+		return (
+			<>
+				<Login onClose={handleLoginClose} />
+				<Notifications />
+			</>
+		)
 	}
 
-	return <NTS />
+	return (
+		<>
+			<NTS />
+			<Notifications />
+		</>
+	)
 }
 
 export function NTS() {
@@ -371,7 +381,6 @@ export function NTS() {
 			<Offline hide={!isOffline} />
 			<Help hide={!isShowingHelp} onHide={() => setIsShowingHelp(false)} />
 			<Volume volume={preferences.volume} />
-			<Notifications />
 		</>
 	)
 }

client/login.tsx

@@ -1,8 +1,9 @@
-import { useCallback } from "react"
+import { type FormEvent, useCallback } from "react"
 
 import { electron } from "./electron"
 
 import css from "./login.module.css"
+import { notify } from "./notifications"
 
 type LoginProps = {
 	onClose: () => void
@@ -12,7 +13,9 @@ export function Login(props: LoginProps) {
 	const { onClose } = props
 
 	const handleSubmit = useCallback(
-		async function (data: FormData) {
+		async function (evt: FormEvent<HTMLFormElement>) {
+			evt.preventDefault()
+			const data = new FormData(evt.target as HTMLFormElement)
 			const email = data.get("email")?.toString() ?? null
 			const password = data.get("password")?.toString() ?? null
 
@@ -24,16 +27,14 @@ export function Login(props: LoginProps) {
 				await electron.invoke("login-credentials", { email, password })
 				onClose()
 			} catch (err) {
-				// TODO: show error
-				console.log("HERE", err)
+				notify({ message: "invalid credentials", ttl: 4000, type: "error" })
 			}
 		},
 		[onClose],
 	)
 
 	return (
-		// @ts-expect-error: form action type is not a string
-		<form className={css.login} action={handleSubmit}>
+		<form className={css.login} onSubmit={handleSubmit}>
 			<label htmlFor="email">Email</label>
 			<input id="email" name="email" type="email" required />
 

client/notifications/index.tsx

@@ -39,6 +39,7 @@ export function Notifications() {
 	useEffect(function () {
 		function handler(evt: CustomEvent<Notification>) {
 			const notification = evt.detail
+			console.log("HERE", notification)
 			setNotifications((notifications) => [...notifications, notification])
 		}