first commit

src/components/LoginForm.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import Button from '@/components/Button';
+import InputField from '@/components/InputField';
+import { authenticate } from '@/lib/actions';
+import styles from '@/styles/LoginForm.module.scss';
+import { useActionState } from 'react';
+
+export default function LoginForm() {
+  const [errorMessage, dispatch, isPending] = useActionState(authenticate, undefined);
+
+  return (
+    <div className={styles.container}>
+      <form action={dispatch} className={styles.form}>
+        <span className={styles.errorMessage}>{errorMessage}</span>
+        <InputField
+          label="Token"
+          name="token"
+          type="password"
+          required={true}
+          placeholder="Enter your token"
+          disabled={isPending}
+          invalid={errorMessage?.length ? true : false}
+        />
+        <Button label={isPending ? 'Verifying...' : 'Log in'} type="submit" disabled={isPending} />
+      </form>
+    </div>
+  );
+}