✨ Add create user form

src/components/Admin/CreateNewUser/create-account-step.tsx

@@ -0,0 +1,62 @@
+import { Button, Card, Flex, TextInput } from '@mantine/core';
+import { useForm, zodResolver } from '@mantine/form';
+import { IconArrowRight, IconAt, IconUser } from '@tabler/icons-react';
+import { z } from 'zod';
+
+interface CreateAccountStepProps {
+  nextStep: ({ eMail, username }: { username: string; eMail: string }) => void;
+}
+
+export const CreateAccountStep = ({ nextStep }: CreateAccountStepProps) => {
+  const form = useForm({
+    initialValues: {
+      username: '',
+      eMail: '',
+    },
+    validateInputOnBlur: true,
+    validateInputOnChange: true,
+    validate: zodResolver(createAccountStepValidationSchema),
+  });
+
+  return (
+    <Card mih={400}>
+      <TextInput
+        icon={<IconUser size="0.8rem" />}
+        label="Username"
+        variant="filled"
+        mb="md"
+        withAsterisk
+        {...form.getInputProps('username')}
+      />
+      <TextInput
+        icon={<IconAt size="0.8rem" />}
+        label="E-Mail"
+        variant="filled"
+        mb="md"
+        {...form.getInputProps('eMail')}
+      />
+
+      <Flex justify="end" wrap="nowrap">
+        <Button
+          rightIcon={<IconArrowRight size="1rem" />}
+          disabled={!form.isValid()}
+          onClick={() => {
+            nextStep({
+              username: form.values.username,
+              eMail: form.values.eMail,
+            });
+          }}
+          variant="light"
+          px="xl"
+        >
+          Next
+        </Button>
+      </Flex>
+    </Card>
+  );
+};
+
+export const createAccountStepValidationSchema = z.object({
+  username: z.string().min(1).max(100),
+  eMail: z.string().email().or(z.literal('')),
+});

src/components/Admin/CreateNewUser/security-step.tsx

@@ -0,0 +1,75 @@
+import { Button, Card, Flex, Group, PasswordInput } from '@mantine/core';
+import { useForm, zodResolver } from '@mantine/form';
+import { IconArrowLeft, IconArrowRight, IconPassword } from '@tabler/icons-react';
+import { z } from 'zod';
+
+interface CreateAccountSecurityStepProps {
+  nextStep: ({ password }: { password: string }) => void;
+  prevStep: () => void;
+}
+
+export const CreateAccountSecurityStep = ({
+  nextStep,
+  prevStep,
+}: CreateAccountSecurityStepProps) => {
+  const form = useForm({
+    initialValues: {
+      password: '',
+    },
+    validateInputOnBlur: true,
+    validateInputOnChange: true,
+    validate: zodResolver(createAccountSecurityStepValidationSchema),
+  });
+
+  return (
+    <Card mih={400}>
+      <Flex columnGap={10}>
+        <PasswordInput
+          icon={<IconPassword size="0.8rem" />}
+          label="Password"
+          variant="filled"
+          mb="md"
+          withAsterisk
+          style={{
+            flexGrow: 1,
+          }}
+          {...form.getInputProps('password')}
+        />
+        <Button
+          onClick={() => {
+            form.setFieldValue('password', randomString());
+          }}
+        >
+          Generate random
+        </Button>
+      </Flex>
+
+      <Group position="apart" noWrap>
+        <Button leftIcon={<IconArrowLeft size="1rem" />} onClick={prevStep} variant="light" px="xl">
+          Previous
+        </Button>
+        <Button
+          rightIcon={<IconArrowRight size="1rem" />}
+          onClick={() => {
+            nextStep({
+              password: form.values.password,
+            });
+          }}
+          variant="light"
+          px="xl"
+          disabled={!form.isValid()}
+        >
+          Next
+        </Button>
+      </Group>
+    </Card>
+  );
+};
+
+const randomString = () => {
+  return window.crypto.getRandomValues(new BigUint64Array(1))[0].toString(36);
+};
+
+export const createAccountSecurityStepValidationSchema = z.object({
+  password: z.string().min(10).max(50),
+});