diff --git a/apps/web/components/Form.jsx b/apps/web/components/Form.tsx
similarity index 59%
rename from apps/web/components/Form.jsx
rename to apps/web/components/Form.tsx
index 026a813..e4092ae 100644
--- a/apps/web/components/Form.jsx
+++ b/apps/web/components/Form.tsx
@@ -6,25 +6,33 @@ import { useForm } from 'react-hook-form';
 
 const { APP_BASE_PATH } = publicRuntimeConfig;
 
-export function Form() {
+type FormData = {
+  readonly login: string;
+  readonly password: string;
+};
+
+function handleDefaultLogin(data: FormData) {
+  const redirectUrl =
+    (window.location.pathname.replace(APP_BASE_PATH, '') || '/') + (window.location.search || '');
+
+  return axios.post('/login', data).then(() => {
+    window.location.replace(redirectUrl);
+  });
+}
+
+type LoginFormProps = {
+  readonly onLogin: (data: FormData) => Promise<void>;
+};
+
+function LoginForm({ onLogin }: LoginFormProps) {
   const [hasError, setHasError] = useState(false);
-  const { handleSubmit, register } = useForm();
+  const { handleSubmit, register } = useForm<FormData>();
 
   return (
     <form
       className={styles.form}
       onSubmit={handleSubmit((data) => {
-        axios
-          .post('/login', data)
-          .then(() => {
-            const url =
-              (window.location.pathname.replace(APP_BASE_PATH, '') || '/') +
-              (window.location.search || '');
-            window.location.replace(url);
-          })
-          .catch(() => {
-            setHasError(true);
-          });
+        onLogin(data).catch(() => setHasError(true));
       })}
     >
       <input
@@ -46,3 +54,7 @@ export function Form() {
     </form>
   );
 }
+
+export function Form() {
+  return <LoginForm onLogin={handleDefaultLogin} />;
+}