autofocus inputs

Author: jc21

frontend/src/pages/Login/index.tsx

@@ -1,11 +1,12 @@
-import React, { useState, ChangeEvent } from "react";
+import React, { useEffect, useRef, useState, ChangeEvent } from "react";
 
 import { Alert, Button } from "components";
 import { useAuthState } from "context";
 
 import logo from "../../img/logo-text-vertical-grey.png";
 
 function Login() {
+	const emailRef = useRef(null);
 	const { login } = useAuthState();
 	const [loading, setLoading] = useState(false);
 	const [errorMessage, setErrorMessage] = useState("");
@@ -31,6 +32,11 @@ function Login() {
 		setFormData({ ...formData, [target.name]: target.value });
 	};
 
+	useEffect(() => {
+		// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
+		emailRef.current.focus();
+	}, []);
+
 	return (
 		<div className="container-tight py-4">
 			<div className="text-center mb-4">
@@ -46,6 +52,7 @@ function Login() {
 					<div className="mb-3">
 						<label className="form-label">Email address</label>
 						<input
+							ref={emailRef}
 							type="email"
 							onChange={onChange}
 							className="form-control"

frontend/src/pages/Setup/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, ChangeEvent } from "react";
+import React, { useEffect, useRef, useState, ChangeEvent } from "react";
 
 import { createUser } from "api/npm";
 import { Alert, Button } from "components";
@@ -7,6 +7,7 @@ import { useAuthState, useHealthState } from "context";
 import logo from "../../img/logo-text-vertical-grey.png";
 
 function Setup() {
+	const nameRef = useRef(null);
 	const { refreshHealth } = useHealthState();
 	const { login } = useAuthState();
 	const [loading, setLoading] = useState(false);
@@ -62,6 +63,11 @@ function Setup() {
 		setFormData({ ...formData, [target.name]: target.value });
 	};
 
+	useEffect(() => {
+		// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
+		nameRef.current.focus();
+	}, []);
+
 	return (
 		<div className="page page-center">
 			<div className="container-tight py-4">
@@ -86,6 +92,7 @@ function Setup() {
 						<div className="mb-3">
 							<label className="form-label">Name</label>
 							<input
+								ref={nameRef}
 								onChange={onChange}
 								className="form-control"
 								name="name"