jazzymc/homarr
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

✨ Add procedure for registration tokens management

Browse Source
This commit is contained in:
Manuel
2023-07-29 21:11:52 +02:00
parent cf12c8575d
commit b4c188e797
7 changed files with 232 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -29,8 +29,6 @@ const ManageUsersPage = () => {
}
);
const { mutateAsync: deleteUserMutateAsync } = api.user.deleteUser.useMutation();
const [activePage, _] = useState(0);
return (
@@ -39,7 +37,10 @@ const ManageUsersPage = () => {
<title>Users • Homarr</title>
</Head>
<Title mb="xl">Manage users</Title>
<Title mb="md">Manage users</Title>
<Text mb="xl">
Using users, you have granular control who can access, edit or delete resources on your Homarr instance.
</Text>
<Group position="apart" mb="md">
<SegmentedControl
@@ -74,8 +75,8 @@ const ManageUsersPage = () => {
</tr>
</thead>
<tbody>
{data.pages[activePage].users.map((user) => (
<tr>
{data.pages[activePage].users.map((user, index) => (
<tr key={index}>
<td>
<Group position="apart">
<Group spacing="xs">
@@ -90,8 +91,8 @@ const ManageUsersPage = () => {
title: <Text weight="bold">Delete user ${user.name}</Text>,
innerProps: {
userId: user.id,
username: user.name ?? ''
}
username: user.name ?? '',
},
});
}}
color="red"

90
src/pages/manage/users/invites.tsx
View File

@@ -1,14 +1,98 @@
import { Title } from '@mantine/core';
import { Head } from 'next/document';
import { ActionIcon, Button, Center, Flex, Pagination, Table, Text, Title } from '@mantine/core';
import { modals } from '@mantine/modals';
import { IconPlus, IconTrash } from '@tabler/icons-react';
import dayjs from 'dayjs';
import Head from 'next/head';
import { useState } from 'react';
import { MainLayout } from '~/components/layout/admin/main-admin.layout';
import { modals as applicationModals } from '~/modals/modals';
import { api } from '~/utils/api';
const ManageUserInvitesPage = () => {
const { data, isFetched, fetchPreviousPage, fetchNextPage } =
api.registrationTokens.getAllInvites.useInfiniteQuery({
limit: 10,
});
const [activePage, _] = useState(0);
return (
<MainLayout>
<Head>
<title>User invites • Homarr</title>
</Head>
<Title>Manage user invites</Title>
<Title mb="md">Manage user invites</Title>
<Text mb="xl">
Using registration tokens, you can invite users to your Homarr instance. An invitation will
only be valid for a certain time-span and can be used once. The expiration must be between 5
minutes and 12 months upon creation.
</Text>
<Flex justify="end" mb="md">
<Button
onClick={() => {
modals.openContextModal({
modal: 'createRegistrationTokenModal',
title: 'Create registration token',
innerProps: {},
});
}}
leftIcon={<IconPlus size="1rem" />}
variant="default"
>
Create invitation
</Button>
</Flex>
{data && (
<>
<Table mb="md" withBorder highlightOnHover>
<thead>
<tr>
<th>ID</th>
<th>Expires</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{data.pages[activePage].registrationTokens.map((token, index) => (
<tr key={index}>
<td>
<Text>{token.id}</Text>
</td>
<td>
{dayjs(dayjs()).isAfter(token.expires) ? (
<Text>expired {dayjs(token.expires).fromNow()}</Text>
) : (
<Text>in {dayjs(token.expires).fromNow(true)}</Text>
)}
</td>
<td>
<ActionIcon onClick={() => {}} color="red" variant="light">
<IconTrash size="1rem" />
</ActionIcon>
</td>
</tr>
))}
{data.pages[activePage].registrationTokens.length === 0 && (
<tr>
<td colSpan={3}>
<Center p="md">
<Text color="dimmed">There are no invitations yet.</Text>
</Center>
</td>
</tr>
)}
</tbody>
</Table>
<Pagination
total={data.pages.length}
value={activePage + 1}
onNextPage={fetchNextPage}
onPreviousPage={fetchPreviousPage}
/>
</>
)}
</MainLayout>
);
};