Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-09 06:55:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

✨ Add stepper for creating new user

Browse Source
This commit is contained in:
Manuel
2023-07-29 16:17:34 +02:00
parent e4e1f2e32e
commit 4c2e81a29d
2 changed files with 60 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/pages/manage/users/create.tsx Normal file
View File

@@ -0,0 +1,52 @@
import { Stepper } from '@mantine/core';
import { IconMailCheck, IconUser } from '@tabler/icons-react';
import Head from 'next/head';
import { useState } from 'react';
import { MainLayout } from '~/components/layout/admin/main-admin.layout';
const CreateNewUserPage = () => {
const [active, setActive] = useState(1);
const nextStep = () => setActive((current) => (current < 3 ? current + 1 : current));
const prevStep = () => setActive((current) => (current > 0 ? current - 1 : current));
return (
<MainLayout>
<Head>
<title>Create user • Homarr</title>
</Head>
<Stepper active={active} onStepClick={setActive} breakpoint="sm">
<Stepper.Step
allowStepClick={false}
allowStepSelect={false}
icon={<IconUser />}
label="First step"
description="Create an account"
>
Step 1 content: Create an account
</Stepper.Step>
<Stepper.Step
allowStepClick={false}
allowStepSelect={false}
icon={<IconMailCheck />}
label="Second step"
description="Verify email"
>
Step 2 content: Verify email
</Stepper.Step>
<Stepper.Step
allowStepClick={false}
allowStepSelect={false}
icon={<IconUser />}
label="Final step"
description="Get full access"
>
Step 3 content: Get full access
</Stepper.Step>
<Stepper.Completed>Completed, click back button to get to previous step</Stepper.Completed>
</Stepper>
</MainLayout>
);
};
export default CreateNewUserPage;

9
src/pages/manage/users/index.tsx
View File

@@ -13,6 +13,7 @@ import {
} from '@mantine/core'; } from '@mantine/core';
import { IconPlus, IconTrash } from '@tabler/icons-react'; import { IconPlus, IconTrash } from '@tabler/icons-react';
import Head from 'next/head'; import Head from 'next/head';
import Link from 'next/link';
import { useState } from 'react'; import { useState } from 'react';
import { MainLayout } from '~/components/layout/admin/main-admin.layout'; import { MainLayout } from '~/components/layout/admin/main-admin.layout';
import { api } from '~/utils/api'; import { api } from '~/utils/api';
@@ -34,6 +35,7 @@ const ManageUsersPage = () => {
<Head> <Head>
<title>Users • Homarr</title> <title>Users • Homarr</title>
</Head> </Head>
<Title mb="xl">Manage users</Title> <Title mb="xl">Manage users</Title>
<Group position="apart" mb="md"> <Group position="apart" mb="md">
@@ -49,7 +51,12 @@ const ManageUsersPage = () => {
data={['React', 'Angular', 'Svelte', 'Vue']} data={['React', 'Angular', 'Svelte', 'Vue']}
variant="filled" variant="filled"
/> />
<Button leftIcon={<IconPlus size="1rem" />} variant="default"> <Button
component={Link}
leftIcon={<IconPlus size="1rem" />}
href="/manage/users/create"
variant="default"
>
Create Create
</Button> </Button>
</Flex> </Flex>