123

components/Forms/AuthenticationForm.tsx

@@ -0,0 +1,45 @@
+import {
+  Anchor,
+  Button,
+  Checkbox,
+  Divider,
+  Group,
+  Paper,
+  PaperProps,
+  PasswordInput,
+  Stack,
+  Text,
+  TextInput,
+} from '@mantine/core';
+import { useForm } from '@mantine/form';
+import { upperFirst, useToggle } from '@mantine/hooks';
+import { LogidexButton } from '@/components/Forms/LogidexButton';
+
+export function AuthenticationForm(props: PaperProps) {
+  const [type, toggle] = useToggle(['login', 'register']);
+  const form = useForm({
+    initialValues: {
+      email: '',
+      name: '',
+      password: '',
+      terms: true,
+    },
+
+    validate: {
+      email: (val) => (/^\S+@\S+$/.test(val) ? null : 'Invalid email'),
+      password: (val) => (val.length <= 6 ? 'Password should include at least 6 characters' : null),
+    },
+  });
+
+  return (
+    <Paper radius="md" p="lg" withBorder {...props}>
+      <Text size="lg" fw={500} ta="center">
+        Добро пожаловать в Logidex
+      </Text>
+
+      <Group grow mb="md" mt="md">
+        <LogidexButton radius="xl">Войти с помощью LogidexID</LogidexButton>
+      </Group>
+    </Paper>
+  );
+}