Migrate all modals to ts

app/src/components/auth/LoginPage.tsx

@@ -0,0 +1,66 @@
+import React, { FormEvent, useState } from 'react';
+import {
+  TextInput,
+  PasswordInput,
+  Paper,
+  Title,
+  Container,
+  Button,
+  Text,
+  Stack,
+} from '@mantine/core';
+import { useAuth } from '../../contexts/AuthContext';
+
+const LoginPage: React.FC = () => {
+  const [email, setEmail] = useState<string>('');
+  const [password, setPassword] = useState<string>('');
+  const [loading, setLoading] = useState<boolean>(false);
+  const { login } = useAuth();
+
+  const handleSubmit = async (e: FormEvent<HTMLElement>): Promise<void> => {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      await login(email, password);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Container size={420} my={40}>
+      <Title ta="center">Welcome to Lemma</Title>
+      <Text c="dimmed" size="sm" ta="center" mt={5}>
+        Please sign in to continue
+      </Text>
+
+      <Paper withBorder shadow="md" p={30} mt={30} radius="md">
+        <form onSubmit={handleSubmit}>
+          <Stack>
+            <TextInput
+              label="Email"
+              placeholder="your@email.com"
+              required
+              value={email}
+              onChange={(event) => setEmail(event.currentTarget.value)}
+            />
+
+            <PasswordInput
+              label="Password"
+              placeholder="Your password"
+              required
+              value={password}
+              onChange={(event) => setPassword(event.currentTarget.value)}
+            />
+
+            <Button type="submit" loading={loading}>
+              Sign in
+            </Button>
+          </Stack>
+        </form>
+      </Paper>
+    </Container>
+  );
+};
+
+export default LoginPage;