💄 Improve steps in user creation page

src/pages/manage/users/create.tsx

@@ -1,13 +1,23 @@
-import { Button, Card, Flex, Group, Stepper, Text, TextInput } from '@mantine/core';
+import {
+  Alert,
+  Button,
+  Card,
+  Flex,
+  Group,
+  PasswordInput,
+  Stepper,
+  Table,
+  Text,
+  Title,
+} from '@mantine/core';
 import { useForm, zodResolver } from '@mantine/form';
 import {
-  IconArrowRight,
-  IconAt,
+  IconArrowLeft,
   IconCheck,
-  IconLock,
+  IconInfoCircle,
+  IconKey,
+  IconMail,
   IconMailCheck,
-  IconPremiumRights,
-  IconSignRight,
   IconUser,
 } from '@tabler/icons-react';
 import Head from 'next/head';
@@ -49,10 +59,13 @@ const CreateNewUserPage = () => {
   });
 
   const context = api.useContext();
-  const { mutateAsync, isSuccess } = api.user.createUser.useMutation({
+  const { mutateAsync, isSuccess, isLoading } = api.user.createUser.useMutation({
     onSettled: () => {
       void context.user.getAll.invalidate();
-    }
+    },
+    onSuccess: () => {
+      nextStep();
+    },
   });
 
   return (
@@ -79,7 +92,7 @@ const CreateNewUserPage = () => {
         <Stepper.Step
           allowStepClick={false}
           allowStepSelect={false}
-          icon={<IconLock />}
+          icon={<IconKey />}
           label="Second step"
           description="Password"
         >
@@ -99,10 +112,64 @@ const CreateNewUserPage = () => {
           description="Save to database"
         >
           <Card mih={400}>
-            <Text>
-              User creation has been prepared. Do you want to create the user and store it in the
-              database?
+            <Title order={5}>Review your inputs</Title>
+            <Text mb="xl">
+              After you submit your data to the database, the user will be able to log in. Are you
+              sure that you want to store this user in the database and activate the login?
             </Text>
+
+            <Table mb="lg" withBorder highlightOnHover>
+              <thead>
+                <tr>
+                  <th>Property</th>
+                  <th>Value</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>
+                    <Group spacing="xs">
+                      <IconUser size="1rem" />
+                      <Text>Username</Text>
+                    </Group>
+                  </td>
+                  <td>{form.values.account.username}</td>
+                </tr>
+                <tr>
+                  <td>
+                    <Group spacing="xs">
+                      <IconMail size="1rem" />
+                      <Text>E-Mail</Text>
+                    </Group>
+                  </td>
+                  <td>
+                    {form.values.account.eMail ? (
+                      <Text>{form.values.account.eMail}</Text>
+                    ) : (
+                      <Group spacing="xs">
+                        <IconInfoCircle size="1rem" color="orange" />
+                        <Text color="orange">Not set</Text>
+                      </Group>
+                    )}
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <Group spacing="xs">
+                      <IconKey size="1rem" />
+                      <Text>Password</Text>
+                    </Group>
+                  </td>
+                  <td>
+                    <Group spacing="xs">
+                      <IconCheck size="1rem" color="green" />
+                      <Text color="green">Valid</Text>
+                    </Group>
+                  </td>
+                </tr>
+              </tbody>
+            </Table>
+
             <Flex justify="end" wrap="nowrap">
               <Button
                 onClick={async () => {
@@ -116,18 +183,30 @@ const CreateNewUserPage = () => {
                     email: form.values.account.eMail === '' ? undefined : form.values.account.eMail,
                   });
                 }}
-                component={Link}
-                href="/manage/users"
+                loading={isLoading}
                 rightIcon={<IconCheck size="1rem" />}
                 variant="light"
                 px="xl"
               >
-                Finish
+                Confirm
               </Button>
             </Flex>
           </Card>
         </Stepper.Step>
-        <Stepper.Completed>Completed, click back button to get to previous step</Stepper.Completed>
+        <Stepper.Completed>
+          <Alert title="User was created" color="green" mb="md">
+            User has been created in the database. They can now log in.
+          </Alert>
+
+          <Button
+            component={Link}
+            leftIcon={<IconArrowLeft size="1rem" />}
+            variant="default"
+            href="/manage/users"
+          >
+            Go back to users
+          </Button>
+        </Stepper.Completed>
       </Stepper>
     </MainLayout>
   );