Moved v3 code from NginxProxyManager/nginx-proxy-manager-3 to NginxProxyManager/nginx-proxy-manager

frontend/src/pages/AccessLists/index.tsx

@@ -0,0 +1,10 @@
+import { Heading } from "@chakra-ui/react";
+import { intl } from "locale";
+
+function AccessLists() {
+	return (
+		<Heading mb={2}>{intl.formatMessage({ id: "access-lists.title" })}</Heading>
+	);
+}
+
+export default AccessLists;

frontend/src/pages/AuditLog/index.tsx

@@ -0,0 +1,10 @@
+import { Heading } from "@chakra-ui/react";
+import { intl } from "locale";
+
+function AuditLog() {
+	return (
+		<Heading mb={2}>{intl.formatMessage({ id: "audit-log.title" })}</Heading>
+	);
+}
+
+export default AuditLog;

frontend/src/pages/CertificateAuthorities/Table.tsx

@@ -0,0 +1,155 @@
+import { useEffect, useMemo, useState } from "react";
+
+import {
+	tableEvents,
+	ActionsFormatter,
+	BooleanFormatter,
+	TableFilter,
+	TableLayout,
+	TablePagination,
+	TableSortBy,
+	TextFilter,
+} from "components";
+import { intl } from "locale";
+import { CertificateAuthorityEditModal } from "modals";
+import { FiEdit } from "react-icons/fi";
+import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+
+export interface TableProps {
+	data: any;
+	pagination: TablePagination;
+	sortBy: TableSortBy[];
+	filters: TableFilter[];
+	onTableEvent: any;
+}
+function Table({
+	data,
+	pagination,
+	onTableEvent,
+	sortBy,
+	filters,
+}: TableProps) {
+	const [editId, setEditId] = useState(0);
+	const [columns, tableData] = useMemo(() => {
+		const columns = [
+			{
+				Header: intl.formatMessage({ id: "column.name" }),
+				accessor: "name",
+				sortable: true,
+				Filter: TextFilter,
+			},
+			{
+				Header: intl.formatMessage({ id: "column.max-domains" }),
+				accessor: "maxDomains",
+				sortable: true,
+			},
+			{
+				Header: intl.formatMessage({ id: "column.wildcard-support" }),
+				accessor: "isWildcardSupported",
+				Cell: BooleanFormatter(),
+				sortable: true,
+			},
+			{
+				id: "actions",
+				accessor: "id",
+				className: "w-80",
+				Cell: ActionsFormatter([
+					{
+						title: intl.formatMessage({
+							id: "action.edit",
+						}),
+						onClick: (e: any, { id }: any) => setEditId(id),
+						icon: <FiEdit />,
+						disabled: (data: any) => data.isReadonly,
+					},
+				]),
+			},
+		];
+		return [columns, data];
+	}, [data]);
+
+	const tableInstance = useTable(
+		{
+			columns,
+			data: tableData,
+			initialState: {
+				pageIndex: Math.floor(pagination.offset / pagination.limit),
+				pageSize: pagination.limit,
+				sortBy,
+				filters,
+			},
+			// Tell the usePagination
+			// hook that we'll handle our own data fetching
+			// This means we'll also have to provide our own
+			// pageCount.
+			pageCount: Math.ceil(pagination.total / pagination.limit),
+			manualPagination: true,
+			// Sorting options
+			manualSortBy: true,
+			disableMultiSort: true,
+			disableSortRemove: true,
+			autoResetSortBy: false,
+			// Filter options
+			manualFilters: true,
+			autoResetFilters: false,
+		},
+		useFilters,
+		useSortBy,
+		usePagination,
+	);
+
+	const gotoPage = tableInstance.gotoPage;
+
+	useEffect(() => {
+		onTableEvent({
+			type: tableEvents.PAGE_CHANGED,
+			payload: tableInstance.state.pageIndex,
+		});
+	}, [onTableEvent, tableInstance.state.pageIndex]);
+
+	useEffect(() => {
+		onTableEvent({
+			type: tableEvents.PAGE_SIZE_CHANGED,
+			payload: tableInstance.state.pageSize,
+		});
+		gotoPage(0);
+	}, [gotoPage, onTableEvent, tableInstance.state.pageSize]);
+
+	useEffect(() => {
+		if (pagination.total) {
+			onTableEvent({
+				type: tableEvents.TOTAL_COUNT_CHANGED,
+				payload: pagination.total,
+			});
+		}
+	}, [pagination.total, onTableEvent]);
+
+	useEffect(() => {
+		onTableEvent({
+			type: tableEvents.SORT_CHANGED,
+			payload: tableInstance.state.sortBy,
+		});
+	}, [onTableEvent, tableInstance.state.sortBy]);
+
+	useEffect(() => {
+		onTableEvent({
+			type: tableEvents.FILTERS_CHANGED,
+			payload: tableInstance.state.filters,
+		});
+	}, [onTableEvent, tableInstance.state.filters]);
+
+	return (
+		<>
+			<TableLayout pagination={pagination} {...tableInstance} />
+			{editId ? (
+				<CertificateAuthorityEditModal
+					isOpen
+					editId={editId}
+					onClose={() => setEditId(0)}
+				/>
+			) : null}
+		</>
+	);
+}
+
+export default Table;

frontend/src/pages/CertificateAuthorities/TableWrapper.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useReducer, useState } from "react";
+
+import { Alert, AlertIcon } from "@chakra-ui/react";
+import { SpinnerPage, tableEventReducer } from "components";
+import { useCertificateAuthorities } from "hooks";
+
+import Table from "./Table";
+
+const initialState = {
+	offset: 0,
+	limit: 10,
+	sortBy: [
+		{
+			id: "name",
+			desc: false,
+		},
+	],
+	filters: [],
+};
+
+function TableWrapper() {
+	const [{ offset, limit, sortBy, filters }, dispatch] = useReducer(
+		tableEventReducer,
+		initialState,
+	);
+
+	const [tableData, setTableData] = useState(null);
+	const { isFetching, isLoading, isError, error, data } =
+		useCertificateAuthorities(offset, limit, sortBy, filters);
+
+	useEffect(() => {
+		setTableData(data as any);
+	}, [data]);
+
+	if (isFetching || isLoading || !tableData) {
+		return <SpinnerPage />;
+	}
+
+	if (isError) {
+		return (
+			<Alert status="error">
+				<AlertIcon />
+				{error?.message || "Unknown error"}
+			</Alert>
+		);
+	}
+
+	if (typeof data?.total === "undefined") {
+		return (
+			<Alert status="error">
+				<AlertIcon />
+				There was an error fetching the data.
+			</Alert>
+		);
+	}
+
+	const pagination = {
+		offset: data?.offset,
+		limit: data?.limit,
+		total: data?.total,
+	};
+
+	return (
+		<Table
+			data={data?.items || []}
+			pagination={pagination}
+			sortBy={sortBy}
+			filters={filters}
+			onTableEvent={dispatch}
+		/>
+	);
+}
+
+export default TableWrapper;

frontend/src/pages/CertificateAuthorities/index.tsx

@@ -0,0 +1,35 @@
+import { useState } from "react";
+
+import { Heading, HStack } from "@chakra-ui/react";
+import { HelpDrawer, PrettyButton } from "components";
+import { intl } from "locale";
+import { CertificateAuthorityCreateModal } from "modals";
+
+import TableWrapper from "./TableWrapper";
+
+function CertificateAuthorities() {
+	const [createShown, setCreateShown] = useState(false);
+
+	return (
+		<>
+			<HStack mx={6} my={4} justifyContent="space-between">
+				<Heading mb={2}>
+					{intl.formatMessage({ id: "certificate-authorities.title" })}
+				</Heading>
+				<HStack>
+					<HelpDrawer section="CertificateAuthorities" />
+					<PrettyButton size="sm" onClick={() => setCreateShown(true)}>
+						{intl.formatMessage({ id: "certificate-authority.create" })}
+					</PrettyButton>
+				</HStack>
+			</HStack>
+			<TableWrapper />
+			<CertificateAuthorityCreateModal
+				isOpen={createShown}
+				onClose={() => setCreateShown(false)}
+			/>
+		</>
+	);
+}
+
+export default CertificateAuthorities;

frontend/src/pages/Certificates/CertificatesTable.tsx

@@ -0,0 +1,152 @@
+import { useEffect, useMemo } from "react";
+
+import {
+	tableEvents,
+	ActionsFormatter,
+	IDFormatter,
+	TableFilter,
+	TableLayout,
+	TablePagination,
+	TableSortBy,
+	TextFilter,
+} from "components";
+import { intl } from "locale";
+import { FiEdit } from "react-icons/fi";
+import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+
+const rowActions = [
+	{
+		title: intl.formatMessage({ id: "action.edit" }),
+		onClick: (e: any, data: any) => {
+			alert(JSON.stringify(data, null, 2));
+		},
+		icon: <FiEdit />,
+		show: (data: any) => !data.isSystem,
+	},
+];
+
+export interface CertificatesTableProps {
+	data: any;
+	pagination: TablePagination;
+	sortBy: TableSortBy[];
+	filters: TableFilter[];
+	onTableEvent: any;
+}
+function CertificatesTable({
+	data,
+	pagination,
+	onTableEvent,
+	sortBy,
+	filters,
+}: CertificatesTableProps) {
+	const [columns, tableData] = useMemo(() => {
+		const columns = [
+			{
+				Header: intl.formatMessage({ id: "column.id" }),
+				accessor: "id",
+				Cell: IDFormatter(),
+				className: "w-80",
+				sortable: true,
+			},
+			{
+				Header: intl.formatMessage({ id: "column.name" }),
+				accessor: "name",
+				sortable: true,
+				Filter: TextFilter,
+			},
+			{
+				Header: intl.formatMessage({ id: "column.validation-type" }),
+				accessor: "type",
+				sortable: true,
+				Filter: TextFilter,
+			},
+			{
+				Header: intl.formatMessage({ id: "column.status" }),
+				accessor: "status",
+				sortable: true,
+				Filter: TextFilter,
+			},
+			{
+				id: "actions",
+				accessor: "id",
+				Cell: ActionsFormatter(rowActions),
+				className: "w-80",
+			},
+		];
+		return [columns, data];
+	}, [data]);
+
+	const tableInstance = useTable(
+		{
+			columns,
+			data: tableData,
+			initialState: {
+				pageIndex: Math.floor(pagination.offset / pagination.limit),
+				pageSize: pagination.limit,
+				sortBy,
+				filters,
+			},
+			// Tell the usePagination
+			// hook that we'll handle our own data fetching
+			// This means we'll also have to provide our own
+			// pageCount.
+			pageCount: Math.ceil(pagination.total / pagination.limit),
+			manualPagination: true,
+			// Sorting options
+			manualSortBy: true,
+			disableMultiSort: true,
+			disableSortRemove: true,
+			autoResetSortBy: false,
+			// Filter options
+			manualFilters: true,
+			autoResetFilters: false,
+		},
+		useFilters,
+		useSortBy,
+		usePagination,
+	);
+
+	const gotoPage = tableInstance.gotoPage;
+
+	useEffect(() => {
+		onTableEvent({
+			type: tableEvents.PAGE_CHANGED,
+			payload: tableInstance.state.pageIndex,
+		});
+	}, [onTableEvent, tableInstance.state.pageIndex]);
+
+	useEffect(() => {
+		onTableEvent({
+			type: tableEvents.PAGE_SIZE_CHANGED,
+			payload: tableInstance.state.pageSize,
+		});
+		gotoPage(0);
+	}, [gotoPage, onTableEvent, tableInstance.state.pageSize]);
+
+	useEffect(() => {
+		if (pagination.total) {
+			onTableEvent({
+				type: tableEvents.TOTAL_COUNT_CHANGED,
+				payload: pagination.total,
+			});
+		}
+	}, [pagination.total, onTableEvent]);
+
+	useEffect(() => {
+		onTableEvent({
+			type: tableEvents.SORT_CHANGED,
+			payload: tableInstance.state.sortBy,
+		});
+	}, [onTableEvent, tableInstance.state.sortBy]);
+
+	useEffect(() => {
+		onTableEvent({
+			type: tableEvents.FILTERS_CHANGED,
+			payload: tableInstance.state.filters,
+		});
+	}, [onTableEvent, tableInstance.state.filters]);
+
+	return <TableLayout pagination={pagination} {...tableInstance} />;
+}
+
+export { CertificatesTable };

frontend/src/pages/Certificates/index.tsx

@@ -0,0 +1,99 @@
+import { useEffect, useReducer, useState } from "react";
+
+import { Alert, AlertIcon, Heading, HStack } from "@chakra-ui/react";
+import {
+	EmptyList,
+	PrettyButton,
+	SpinnerPage,
+	tableEventReducer,
+} from "components";
+import { useCertificates } from "hooks";
+import { intl } from "locale";
+
+import { CertificatesTable } from "./CertificatesTable";
+
+const initialState = {
+	offset: 0,
+	limit: 10,
+	sortBy: [
+		{
+			id: "name",
+			desc: false,
+		},
+	],
+	filters: [],
+};
+
+function Certificates() {
+	const [{ offset, limit, sortBy, filters }, dispatch] = useReducer(
+		tableEventReducer,
+		initialState,
+	);
+
+	const [tableData, setTableData] = useState(null);
+	const { isFetching, isLoading, error, data } = useCertificates(
+		offset,
+		limit,
+		sortBy,
+		filters,
+	);
+
+	useEffect(() => {
+		setTableData(data as any);
+	}, [data]);
+
+	if (error || (!tableData && !isFetching && !isLoading)) {
+		return (
+			<Alert status="error">
+				<AlertIcon />
+				{error?.message || "Unknown error"}
+			</Alert>
+		);
+	}
+
+	if (isFetching || isLoading || !tableData) {
+		return <SpinnerPage />;
+	}
+
+	if (data?.total === 0 && filters?.length === 0) {
+		return (
+			<EmptyList
+				title={intl.formatMessage({ id: "create-certificate-title" })}
+				summary={intl.formatMessage({ id: "create-hint" })}
+				createButton={
+					<PrettyButton mt={5}>
+						{intl.formatMessage({ id: "lets-go" })}
+					</PrettyButton>
+				}
+			/>
+		);
+	}
+
+	const pagination = {
+		offset: data?.offset || initialState.offset,
+		limit: data?.limit || initialState.limit,
+		total: data?.total || 0,
+	};
+
+	return (
+		<>
+			<HStack mx={6} my={4} justifyContent="space-between">
+				<Heading mb={2}>
+					{intl.formatMessage({ id: "certificates.title" })}
+				</Heading>
+				<PrettyButton size="sm">
+					{intl.formatMessage({ id: "create-certificate" })}
+				</PrettyButton>
+			</HStack>
+			<CertificatesTable
+				data={data?.items || []}
+				pagination={pagination}
+				sortBy={sortBy}
+				filters={filters}
+				onTableEvent={dispatch}
+			/>
+		</>
+	);
+}
+
+export default Certificates;

frontend/src/pages/DNSProviders/Table.tsx

@@ -0,0 +1,152 @@
+import { useEffect, useMemo } from "react";
+
+import {
+	tableEvents,
+	ActionsFormatter,
+	DNSProviderFormatter,
+	IDFormatter,
+	SecondsFormatter,
+	TableFilter,
+	TableLayout,
+	TablePagination,
+	TableSortBy,
+	TextFilter,
+} from "components";
+import { intl } from "locale";
+import { FiEdit } from "react-icons/fi";
+import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+
+export interface TableProps {
+	data: any;
+	pagination: TablePagination;
+	sortBy: TableSortBy[];
+	filters: TableFilter[];
+	onTableEvent: any;
+}
+function Table({
+	data,
+	pagination,
+	onTableEvent,
+	sortBy,
+	filters,
+}: TableProps) {
+	const [columns, tableData] = useMemo(() => {
+		const columns = [
+			{
+				Header: intl.formatMessage({ id: "column.id" }),
+				accessor: "id",
+				Cell: IDFormatter(),
+				sortable: true,
+			},
+			{
+				Header: intl.formatMessage({ id: "column.name" }),
+				accessor: "name",
+				sortable: true,
+				Filter: TextFilter,
+			},
+			{
+				Header: intl.formatMessage({ id: "column.acmesh-name" }),
+				accessor: "acmeShName",
+				Cell: DNSProviderFormatter(),
+				sortable: true,
+				Filter: TextFilter,
+			},
+			{
+				Header: intl.formatMessage({ id: "column.dns-sleep" }),
+				accessor: "dnsSleep",
+				Cell: SecondsFormatter(),
+				sortable: true,
+			},
+			{
+				id: "actions",
+				accessor: "id",
+				Cell: ActionsFormatter([
+					{
+						title: intl.formatMessage({ id: "action.edit" }),
+						onClick: (e: any, data: any) => {
+							alert(JSON.stringify(data, null, 2));
+						},
+						icon: <FiEdit />,
+						show: (data: any) => !data.isSystem,
+					},
+				]),
+				className: "w-80",
+			},
+		];
+		return [columns, data];
+	}, [data]);
+
+	const tableInstance = useTable(
+		{
+			columns,
+			data: tableData,
+			initialState: {
+				pageIndex: Math.floor(pagination.offset / pagination.limit),
+				pageSize: pagination.limit,
+				sortBy,
+				filters,
+			},
+			// Tell the usePagination
+			// hook that we'll handle our own data fetching
+			// This means we'll also have to provide our own
+			// pageCount.
+			pageCount: Math.ceil(pagination.total / pagination.limit),
+			manualPagination: true,
+			// Sorting options
+			manualSortBy: true,
+			disableMultiSort: true,
+			disableSortRemove: true,
+			autoResetSortBy: false,
+			// Filter options
+			manualFilters: true,
+			autoResetFilters: false,
+		},
+		useFilters,
+		useSortBy,
+		usePagination,
+	);
+
+	const gotoPage = tableInstance.gotoPage;
+
+	useEffect(() => {
+		onTableEvent({
+			type: tableEvents.PAGE_CHANGED,
+			payload: tableInstance.state.pageIndex,
+		});
+	}, [onTableEvent, tableInstance.state.pageIndex]);
+
+	useEffect(() => {
+		onTableEvent({
+			type: tableEvents.PAGE_SIZE_CHANGED,
+			payload: tableInstance.state.pageSize,
+		});
+		gotoPage(0);
+	}, [gotoPage, onTableEvent, tableInstance.state.pageSize]);
+
+	useEffect(() => {
+		if (pagination.total) {
+			onTableEvent({
+				type: tableEvents.TOTAL_COUNT_CHANGED,
+				payload: pagination.total,
+			});
+		}
+	}, [pagination.total, onTableEvent]);
+
+	useEffect(() => {
+		onTableEvent({
+			type: tableEvents.SORT_CHANGED,
+			payload: tableInstance.state.sortBy,
+		});
+	}, [onTableEvent, tableInstance.state.sortBy]);
+
+	useEffect(() => {
+		onTableEvent({
+			type: tableEvents.FILTERS_CHANGED,
+			payload: tableInstance.state.filters,
+		});
+	}, [onTableEvent, tableInstance.state.filters]);
+
+	return <TableLayout pagination={pagination} {...tableInstance} />;
+}
+
+export default Table;

frontend/src/pages/DNSProviders/TableWrapper.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useReducer, useState } from "react";
+
+import { Alert, AlertIcon } from "@chakra-ui/react";
+import {
+	EmptyList,
+	PrettyButton,
+	SpinnerPage,
+	tableEventReducer,
+} from "components";
+import { useDNSProviders } from "hooks";
+import { intl } from "locale";
+
+import Table from "./Table";
+
+const initialState = {
+	offset: 0,
+	limit: 10,
+	sortBy: [
+		{
+			id: "name",
+			desc: false,
+		},
+	],
+	filters: [],
+};
+
+interface TableWrapperProps {
+	onCreateClick: () => void;
+}
+function TableWrapper({ onCreateClick }: TableWrapperProps) {
+	const [{ offset, limit, sortBy, filters }, dispatch] = useReducer(
+		tableEventReducer,
+		initialState,
+	);
+
+	const [tableData, setTableData] = useState(null);
+	const { isFetching, isLoading, isError, error, data } = useDNSProviders(
+		offset,
+		limit,
+		sortBy,
+		filters,
+	);
+
+	useEffect(() => {
+		setTableData(data as any);
+	}, [data]);
+
+	if (isFetching || isLoading || !tableData) {
+		return <SpinnerPage />;
+	}
+
+	if (isError) {
+		return (
+			<Alert status="error">
+				<AlertIcon />
+				{error?.message || "Unknown error"}
+			</Alert>
+		);
+	}
+
+	if (isFetching || isLoading || !tableData) {
+		return <SpinnerPage />;
+	}
+
+	// When there are no items and no filters active, show the nicer empty view
+	if (data?.total === 0 && filters?.length === 0) {
+		return (
+			<EmptyList
+				title={intl.formatMessage({ id: "create-dns-provider-title" })}
+				summary={intl.formatMessage({ id: "create-hint" })}
+				createButton={
+					<PrettyButton mt={5} onClick={onCreateClick}>
+						{intl.formatMessage({ id: "lets-go" })}
+					</PrettyButton>
+				}
+			/>
+		);
+	}
+
+	const pagination = {
+		offset: data?.offset || initialState.offset,
+		limit: data?.limit || initialState.limit,
+		total: data?.total || 0,
+	};
+
+	return (
+		<Table
+			data={data?.items || []}
+			pagination={pagination}
+			sortBy={sortBy}
+			filters={filters}
+			onTableEvent={dispatch}
+		/>
+	);
+}
+
+export default TableWrapper;

frontend/src/pages/DNSProviders/index.tsx

@@ -0,0 +1,35 @@
+import { useState } from "react";
+
+import { Heading, HStack } from "@chakra-ui/react";
+import { HelpDrawer, PrettyButton } from "components";
+import { intl } from "locale";
+import { DNSProviderCreateModal } from "modals";
+
+import TableWrapper from "./TableWrapper";
+
+function DNSProviders() {
+	const [createShown, setCreateShown] = useState(false);
+
+	return (
+		<>
+			<HStack mx={6} my={4} justifyContent="space-between">
+				<Heading mb={2}>
+					{intl.formatMessage({ id: "dns-providers.title" })}
+				</Heading>
+				<HStack>
+					<HelpDrawer section="DNSProviders" />
+					<PrettyButton size="sm" onClick={() => setCreateShown(true)}>
+						{intl.formatMessage({ id: "create-dns-provider" })}
+					</PrettyButton>
+				</HStack>
+			</HStack>
+			<TableWrapper onCreateClick={() => setCreateShown(true)} />
+			<DNSProviderCreateModal
+				isOpen={createShown}
+				onClose={() => setCreateShown(false)}
+			/>
+		</>
+	);
+}
+
+export default DNSProviders;

frontend/src/pages/Dashboard/index.tsx

@@ -0,0 +1,10 @@
+import { Heading } from "@chakra-ui/react";
+import { intl } from "locale";
+
+function Dashboard() {
+	return (
+		<Heading mb={2}>{intl.formatMessage({ id: "dashboard.title" })}</Heading>
+	);
+}
+
+export default Dashboard;

frontend/src/pages/HostTemplates/HostTemplatesTable.tsx

@@ -0,0 +1,148 @@
+import { useEffect, useMemo } from "react";
+
+import {
+	tableEvents,
+	ActionsFormatter,
+	HostTypeFormatter,
+	IDFormatter,
+	TableFilter,
+	TableLayout,
+	TablePagination,
+	TableSortBy,
+	TextFilter,
+} from "components";
+import { intl } from "locale";
+import { FiEdit } from "react-icons/fi";
+import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+
+const rowActions = [
+	{
+		title: intl.formatMessage({ id: "action.edit" }),
+		onClick: (e: any, data: any) => {
+			alert(JSON.stringify(data, null, 2));
+		},
+		icon: <FiEdit />,
+		show: (data: any) => !data.isSystem,
+	},
+];
+
+export interface HostTemplatesTableProps {
+	data: any;
+	pagination: TablePagination;
+	sortBy: TableSortBy[];
+	filters: TableFilter[];
+	onTableEvent: any;
+}
+function HostTemplatesTable({
+	data,
+	pagination,
+	onTableEvent,
+	sortBy,
+	filters,
+}: HostTemplatesTableProps) {
+	const [columns, tableData] = useMemo(() => {
+		const columns = [
+			{
+				Header: intl.formatMessage({ id: "column.id" }),
+				accessor: "id",
+				Cell: IDFormatter(),
+				className: "w-80",
+				sortable: true,
+			},
+			{
+				Header: intl.formatMessage({ id: "column.name" }),
+				accessor: "name",
+				sortable: true,
+				Filter: TextFilter,
+			},
+			{
+				Header: intl.formatMessage({ id: "column.host-type" }),
+				accessor: "hostType",
+				Cell: HostTypeFormatter(),
+				sortable: true,
+				Filter: TextFilter,
+			},
+			{
+				id: "actions",
+				accessor: "id",
+				Cell: ActionsFormatter(rowActions),
+				className: "w-80",
+			},
+		];
+		return [columns, data];
+	}, [data]);
+
+	const tableInstance = useTable(
+		{
+			columns,
+			data: tableData,
+			initialState: {
+				pageIndex: Math.floor(pagination.offset / pagination.limit),
+				pageSize: pagination.limit,
+				sortBy,
+				filters,
+			},
+			// Tell the usePagination
+			// hook that we'll handle our own data fetching
+			// This means we'll also have to provide our own
+			// pageCount.
+			pageCount: Math.ceil(pagination.total / pagination.limit),
+			manualPagination: true,
+			// Sorting options
+			manualSortBy: true,
+			disableMultiSort: true,
+			disableSortRemove: true,
+			autoResetSortBy: false,
+			// Filter options
+			manualFilters: true,
+			autoResetFilters: false,
+		},
+		useFilters,
+		useSortBy,
+		usePagination,
+	);
+
+	const gotoPage = tableInstance.gotoPage;
+
+	useEffect(() => {
+		onTableEvent({
+			type: tableEvents.PAGE_CHANGED,
+			payload: tableInstance.state.pageIndex,
+		});
+	}, [onTableEvent, tableInstance.state.pageIndex]);
+
+	useEffect(() => {
+		onTableEvent({
+			type: tableEvents.PAGE_SIZE_CHANGED,
+			payload: tableInstance.state.pageSize,
+		});
+		gotoPage(0);
+	}, [gotoPage, onTableEvent, tableInstance.state.pageSize]);
+
+	useEffect(() => {
+		if (pagination.total) {
+			onTableEvent({
+				type: tableEvents.TOTAL_COUNT_CHANGED,
+				payload: pagination.total,
+			});
+		}
+	}, [pagination.total, onTableEvent]);
+
+	useEffect(() => {
+		onTableEvent({
+			type: tableEvents.SORT_CHANGED,
+			payload: tableInstance.state.sortBy,
+		});
+	}, [onTableEvent, tableInstance.state.sortBy]);
+
+	useEffect(() => {
+		onTableEvent({
+			type: tableEvents.FILTERS_CHANGED,
+			payload: tableInstance.state.filters,
+		});
+	}, [onTableEvent, tableInstance.state.filters]);
+
+	return <TableLayout pagination={pagination} {...tableInstance} />;
+}
+
+export { HostTemplatesTable };

frontend/src/pages/HostTemplates/index.tsx

@@ -0,0 +1,80 @@
+import { useEffect, useReducer, useState } from "react";
+
+import { Alert, AlertIcon, Heading, HStack } from "@chakra-ui/react";
+import { PrettyButton, SpinnerPage, tableEventReducer } from "components";
+import { useHostTemplates } from "hooks";
+import { intl } from "locale";
+
+import { HostTemplatesTable } from "./HostTemplatesTable";
+
+const initialState = {
+	offset: 0,
+	limit: 10,
+	sortBy: [
+		{
+			id: "name",
+			desc: false,
+		},
+	],
+	filters: [],
+};
+
+function HostTemplates() {
+	const [{ offset, limit, sortBy, filters }, dispatch] = useReducer(
+		tableEventReducer,
+		initialState,
+	);
+
+	const [tableData, setTableData] = useState(null);
+	const { isFetching, isLoading, error, data } = useHostTemplates(
+		offset,
+		limit,
+		sortBy,
+		filters,
+	);
+
+	useEffect(() => {
+		setTableData(data as any);
+	}, [data]);
+
+	if (error || (!tableData && !isFetching && !isLoading)) {
+		return (
+			<Alert status="error">
+				<AlertIcon />
+				{error?.message || "Unknown error"}
+			</Alert>
+		);
+	}
+
+	if (isFetching || isLoading || !tableData) {
+		return <SpinnerPage />;
+	}
+
+	const pagination = {
+		offset: data?.offset || initialState.offset,
+		limit: data?.limit || initialState.limit,
+		total: data?.total || 0,
+	};
+
+	return (
+		<>
+			<HStack mx={6} my={4} justifyContent="space-between">
+				<Heading mb={2}>
+					{intl.formatMessage({ id: "host-templates.title" })}
+				</Heading>
+				<PrettyButton size="sm">
+					{intl.formatMessage({ id: "create-host-template" })}
+				</PrettyButton>
+			</HStack>
+			<HostTemplatesTable
+				data={data?.items || []}
+				pagination={pagination}
+				sortBy={sortBy}
+				filters={filters}
+				onTableEvent={dispatch}
+			/>
+		</>
+	);
+}
+
+export default HostTemplates;

frontend/src/pages/Hosts/HostsTable.tsx

@@ -0,0 +1,165 @@
+import { useEffect, useMemo } from "react";
+
+import {
+	tableEvents,
+	ActionsFormatter,
+	DomainsFormatter,
+	GravatarFormatter,
+	HostStatusFormatter,
+	HostTypeFormatter,
+	IDFormatter,
+	TableFilter,
+	TableLayout,
+	TablePagination,
+	TableSortBy,
+	TextFilter,
+} from "components";
+import { intl } from "locale";
+import { FiEdit } from "react-icons/fi";
+import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+
+const rowActions = [
+	{
+		title: intl.formatMessage({ id: "action.edit" }),
+		onClick: (e: any, data: any) => {
+			alert(JSON.stringify(data, null, 2));
+		},
+		icon: <FiEdit />,
+		show: (data: any) => !data.isSystem,
+	},
+];
+
+export interface HostsTableProps {
+	data: any;
+	pagination: TablePagination;
+	sortBy: TableSortBy[];
+	filters: TableFilter[];
+	onTableEvent: any;
+}
+function HostsTable({
+	data,
+	pagination,
+	onTableEvent,
+	sortBy,
+	filters,
+}: HostsTableProps) {
+	const [columns, tableData] = useMemo(() => {
+		const columns = [
+			{
+				accessor: "user.gravatarUrl",
+				Cell: GravatarFormatter(),
+				className: "w-80",
+			},
+			{
+				Header: intl.formatMessage({ id: "column.id" }),
+				accessor: "id",
+				Cell: IDFormatter(),
+				className: "w-80",
+			},
+			{
+				Header: intl.formatMessage({ id: "column.domain-names" }),
+				accessor: "domainNames",
+				Cell: DomainsFormatter(),
+				sortable: true,
+				Filter: TextFilter,
+			},
+			{
+				Header: intl.formatMessage({ id: "column.type" }),
+				accessor: "type",
+				Cell: HostTypeFormatter(),
+				sortable: true,
+				Filter: TextFilter,
+			},
+			{
+				Header: intl.formatMessage({ id: "column.validation-type" }),
+				accessor: "certificate.type",
+			},
+			{
+				Header: intl.formatMessage({ id: "column.status" }),
+				accessor: "isDisabled",
+				Cell: HostStatusFormatter(),
+			},
+			{
+				id: "actions",
+				accessor: "id",
+				Cell: ActionsFormatter(rowActions),
+				className: "w-80",
+			},
+		];
+		return [columns, data];
+	}, [data]);
+
+	const tableInstance = useTable(
+		{
+			columns,
+			data: tableData,
+			initialState: {
+				pageIndex: Math.floor(pagination.offset / pagination.limit),
+				pageSize: pagination.limit,
+				sortBy,
+				filters,
+			},
+			// Tell the usePagination
+			// hook that we'll handle our own data fetching
+			// This means we'll also have to provide our own
+			// pageCount.
+			pageCount: Math.ceil(pagination.total / pagination.limit),
+			manualPagination: true,
+			// Sorting options
+			manualSortBy: true,
+			disableMultiSort: true,
+			disableSortRemove: true,
+			autoResetSortBy: false,
+			// Filter options
+			manualFilters: true,
+			autoResetFilters: false,
+		},
+		useFilters,
+		useSortBy,
+		usePagination,
+	);
+
+	const gotoPage = tableInstance.gotoPage;
+
+	useEffect(() => {
+		onTableEvent({
+			type: tableEvents.PAGE_CHANGED,
+			payload: tableInstance.state.pageIndex,
+		});
+	}, [onTableEvent, tableInstance.state.pageIndex]);
+
+	useEffect(() => {
+		onTableEvent({
+			type: tableEvents.PAGE_SIZE_CHANGED,
+			payload: tableInstance.state.pageSize,
+		});
+		gotoPage(0);
+	}, [gotoPage, onTableEvent, tableInstance.state.pageSize]);
+
+	useEffect(() => {
+		if (pagination.total) {
+			onTableEvent({
+				type: tableEvents.TOTAL_COUNT_CHANGED,
+				payload: pagination.total,
+			});
+		}
+	}, [pagination.total, onTableEvent]);
+
+	useEffect(() => {
+		onTableEvent({
+			type: tableEvents.SORT_CHANGED,
+			payload: tableInstance.state.sortBy,
+		});
+	}, [onTableEvent, tableInstance.state.sortBy]);
+
+	useEffect(() => {
+		onTableEvent({
+			type: tableEvents.FILTERS_CHANGED,
+			payload: tableInstance.state.filters,
+		});
+	}, [onTableEvent, tableInstance.state.filters]);
+
+	return <TableLayout pagination={pagination} {...tableInstance} />;
+}
+
+export { HostsTable };

frontend/src/pages/Hosts/index.tsx

@@ -0,0 +1,98 @@
+import { useEffect, useReducer, useState } from "react";
+
+import { Alert, AlertIcon, Heading, HStack } from "@chakra-ui/react";
+import {
+	EmptyList,
+	PrettyButton,
+	SpinnerPage,
+	tableEventReducer,
+} from "components";
+import { useHosts } from "hooks";
+import { intl } from "locale";
+
+import { HostsTable } from "./HostsTable";
+
+const initialState = {
+	offset: 0,
+	limit: 10,
+	sortBy: [
+		{
+			id: "domain_names",
+			desc: false,
+		},
+	],
+	filters: [],
+};
+
+function Hosts() {
+	const [{ offset, limit, sortBy, filters }, dispatch] = useReducer(
+		tableEventReducer,
+		initialState,
+	);
+
+	const [tableData, setTableData] = useState(null);
+	const { isFetching, isLoading, error, data } = useHosts(
+		offset,
+		limit,
+		sortBy,
+		filters,
+	);
+
+	useEffect(() => {
+		setTableData(data as any);
+	}, [data]);
+
+	if (error || (!tableData && !isFetching && !isLoading)) {
+		return (
+			<Alert status="error">
+				<AlertIcon />
+				{error?.message || "Unknown error"}
+			</Alert>
+		);
+	}
+
+	if (isFetching || isLoading || !tableData) {
+		return <SpinnerPage />;
+	}
+
+	// When there are no items and no filters active, show the nicer empty view
+	if (data?.total === 0 && filters?.length === 0) {
+		return (
+			<EmptyList
+				title={intl.formatMessage({ id: "create-host-title" })}
+				summary={intl.formatMessage({ id: "create-hint" })}
+				createButton={
+					<PrettyButton mt={5}>
+						{intl.formatMessage({ id: "lets-go" })}
+					</PrettyButton>
+				}
+			/>
+		);
+	}
+
+	const pagination = {
+		offset: data?.offset || initialState.offset,
+		limit: data?.limit || initialState.limit,
+		total: data?.total || 0,
+	};
+
+	return (
+		<>
+			<HStack mx={6} my={4} justifyContent="space-between">
+				<Heading mb={2}>{intl.formatMessage({ id: "hosts.title" })}</Heading>
+				<PrettyButton size="sm">
+					{intl.formatMessage({ id: "create-host" })}
+				</PrettyButton>
+			</HStack>
+			<HostsTable
+				data={data?.items || []}
+				pagination={pagination}
+				sortBy={sortBy}
+				filters={filters}
+				onTableEvent={dispatch}
+			/>
+		</>
+	);
+}
+
+export default Hosts;

frontend/src/pages/Login/index.tsx

@@ -0,0 +1,167 @@
+import { useEffect, useRef } from "react";
+
+import {
+	Center,
+	Flex,
+	Box,
+	FormControl,
+	FormErrorMessage,
+	FormLabel,
+	Input,
+	Stack,
+	useColorModeValue,
+	useToast,
+} from "@chakra-ui/react";
+import { LocalePicker, PrettyButton } from "components";
+import { ThemeSwitcher } from "components/ThemeSwitcher";
+import { useAuthState } from "context";
+import { Formik, Form, Field } from "formik";
+import { intl } from "locale";
+import { validateEmail, validateString } from "modules/Validations";
+
+import logo from "../../img/logo-256.png";
+
+function Login() {
+	const toast = useToast();
+	const emailRef = useRef(null);
+	const { login } = useAuthState();
+
+	const onSubmit = async (values: any, { setSubmitting }: any) => {
+		const showErr = (msg: string) => {
+			toast({
+				description: intl.formatMessage({
+					id: `error.${msg}`,
+				}),
+				status: "error",
+				position: "top",
+				duration: 3000,
+				isClosable: true,
+			});
+		};
+
+		try {
+			await login(values.email, values.password);
+		} catch (err) {
+			if (err instanceof Error) {
+				showErr(err.message);
+			}
+		}
+		setSubmitting(false);
+	};
+
+	useEffect(() => {
+		// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
+		emailRef.current.focus();
+	}, []);
+
+	return (
+		<Flex
+			minH="100vh"
+			w="100vw"
+			flexDir="column"
+			bg={useColorModeValue("gray.50", "gray.800")}>
+			<Stack h={10} m={4} justify="end" direction="row">
+				<ThemeSwitcher />
+				<LocalePicker className="text-right" />
+			</Stack>
+			<Flex align="center" justify="center" flex="1">
+				<Stack spacing={8} mx="auto" maxW="md" w="full" py={4} px={6}>
+					<Box>
+						<Center>
+							<img src={logo} width={100} alt="Logo" />
+						</Center>
+					</Box>
+					<Box
+						rounded="lg"
+						bg={useColorModeValue("white", "gray.700")}
+						boxShadow="lg"
+						p={8}>
+						<Formik
+							initialValues={
+								{
+									email: "",
+									password: "",
+								} as any
+							}
+							onSubmit={onSubmit}>
+							{({ isSubmitting }) => (
+								<Form>
+									<Stack spacing={4}>
+										<Field name="email" validate={validateEmail()}>
+											{({ field, form }: any) => (
+												<FormControl
+													isRequired
+													isInvalid={form.errors.email && form.touched.email}>
+													<FormLabel htmlFor="email" fontWeight="bold">
+														{intl.formatMessage({ id: "user.email" })}
+													</FormLabel>
+													<Input
+														{...field}
+														ref={emailRef}
+														id="email"
+														type="email"
+														placeholder={intl.formatMessage({
+															id: "user.email",
+														})}
+													/>
+													<FormErrorMessage>
+														{form.errors.email}
+													</FormErrorMessage>
+												</FormControl>
+											)}
+										</Field>
+										<Field name="password" validate={validateString(8, 255)}>
+											{({ field, form }: any) => (
+												<FormControl
+													isRequired
+													isInvalid={
+														form.errors.password && form.touched.password
+													}>
+													<FormLabel fontWeight="bold" htmlFor="password">
+														{intl.formatMessage({
+															id: "user.password",
+														})}
+													</FormLabel>
+													<Input
+														{...field}
+														id="password"
+														type="password"
+														placeholder={intl.formatMessage({
+															id: "user.password",
+														})}
+													/>
+													<FormErrorMessage>
+														{form.errors.password}
+													</FormErrorMessage>
+												</FormControl>
+											)}
+										</Field>
+										<Stack spacing={10}>
+											{/*
+									<Box textAlign="end">
+										<Link color="blue.400">
+											{intl.formatMessage({
+												id: "login.forgot",
+											})}
+										</Link>
+									</Box>
+									*/}
+											<PrettyButton mt={8} w="full" isLoading={isSubmitting}>
+												{intl.formatMessage({
+													id: "login.login",
+												})}
+											</PrettyButton>
+										</Stack>
+									</Stack>
+								</Form>
+							)}
+						</Formik>
+					</Box>
+				</Stack>
+			</Flex>
+			<Box h={10} m={4} />
+		</Flex>
+	);
+}
+
+export default Login;

frontend/src/pages/Settings/SettingsTable.tsx

@@ -0,0 +1,138 @@
+import { useEffect, useMemo } from "react";
+
+import {
+	tableEvents,
+	ActionsFormatter,
+	TableFilter,
+	TableLayout,
+	TablePagination,
+	TableSortBy,
+	TextFilter,
+} from "components";
+import { intl } from "locale";
+import { FiEdit } from "react-icons/fi";
+import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+
+const rowActions = [
+	{
+		title: intl.formatMessage({ id: "action.edit" }),
+		onClick: (e: any, data: any) => {
+			alert(JSON.stringify(data, null, 2));
+		},
+		icon: <FiEdit />,
+		show: (data: any) => !data.isSystem,
+	},
+];
+
+export interface SettingsTableProps {
+	data: any;
+	pagination: TablePagination;
+	sortBy: TableSortBy[];
+	filters: TableFilter[];
+	onTableEvent: any;
+}
+function SettingsTable({
+	data,
+	pagination,
+	onTableEvent,
+	sortBy,
+	filters,
+}: SettingsTableProps) {
+	const [columns, tableData] = useMemo(() => {
+		const columns = [
+			{
+				Header: intl.formatMessage({ id: "column.name" }),
+				accessor: "name",
+				sortable: true,
+				Filter: TextFilter,
+			},
+			{
+				Header: intl.formatMessage({ id: "column.description" }),
+				accessor: "description",
+				sortable: true,
+				Filter: TextFilter,
+			},
+			{
+				id: "actions",
+				accessor: "id",
+				Cell: ActionsFormatter(rowActions),
+				className: "w-80",
+			},
+		];
+		return [columns, data];
+	}, [data]);
+
+	const tableInstance = useTable(
+		{
+			columns,
+			data: tableData,
+			initialState: {
+				pageIndex: Math.floor(pagination.offset / pagination.limit),
+				pageSize: pagination.limit,
+				sortBy,
+				filters,
+			},
+			// Tell the usePagination
+			// hook that we'll handle our own data fetching
+			// This means we'll also have to provide our own
+			// pageCount.
+			pageCount: Math.ceil(pagination.total / pagination.limit),
+			manualPagination: true,
+			// Sorting options
+			manualSortBy: true,
+			disableMultiSort: true,
+			disableSortRemove: true,
+			autoResetSortBy: false,
+			// Filter options
+			manualFilters: true,
+			autoResetFilters: false,
+		},
+		useFilters,
+		useSortBy,
+		usePagination,
+	);
+
+	const gotoPage = tableInstance.gotoPage;
+
+	useEffect(() => {
+		onTableEvent({
+			type: tableEvents.PAGE_CHANGED,
+			payload: tableInstance.state.pageIndex,
+		});
+	}, [onTableEvent, tableInstance.state.pageIndex]);
+
+	useEffect(() => {
+		onTableEvent({
+			type: tableEvents.PAGE_SIZE_CHANGED,
+			payload: tableInstance.state.pageSize,
+		});
+		gotoPage(0);
+	}, [gotoPage, onTableEvent, tableInstance.state.pageSize]);
+
+	useEffect(() => {
+		if (pagination.total) {
+			onTableEvent({
+				type: tableEvents.TOTAL_COUNT_CHANGED,
+				payload: pagination.total,
+			});
+		}
+	}, [pagination.total, onTableEvent]);
+
+	useEffect(() => {
+		onTableEvent({
+			type: tableEvents.SORT_CHANGED,
+			payload: tableInstance.state.sortBy,
+		});
+	}, [onTableEvent, tableInstance.state.sortBy]);
+
+	useEffect(() => {
+		onTableEvent({
+			type: tableEvents.FILTERS_CHANGED,
+			payload: tableInstance.state.filters,
+		});
+	}, [onTableEvent, tableInstance.state.filters]);
+
+	return <TableLayout pagination={pagination} {...tableInstance} />;
+}
+
+export { SettingsTable };

frontend/src/pages/Settings/index.tsx

@@ -0,0 +1,73 @@
+import { useEffect, useReducer, useState } from "react";
+
+import { Alert, AlertIcon, Heading } from "@chakra-ui/react";
+import { SpinnerPage, tableEventReducer } from "components";
+import { useSettings } from "hooks";
+import { intl } from "locale";
+
+import { SettingsTable } from "./SettingsTable";
+
+const initialState = {
+	offset: 0,
+	limit: 10,
+	sortBy: [
+		{
+			id: "name",
+			desc: false,
+		},
+	],
+	filters: [],
+};
+
+function Settings() {
+	const [{ offset, limit, sortBy, filters }, dispatch] = useReducer(
+		tableEventReducer,
+		initialState,
+	);
+
+	const [tableData, setTableData] = useState(null);
+	const { isFetching, isLoading, error, data } = useSettings(
+		offset,
+		limit,
+		sortBy,
+		filters,
+	);
+
+	useEffect(() => {
+		setTableData(data as any);
+	}, [data]);
+
+	if (error || (!tableData && !isFetching && !isLoading)) {
+		return (
+			<Alert status="error">
+				<AlertIcon />
+				{error?.message || "Unknown error"}
+			</Alert>
+		);
+	}
+
+	if (isFetching || isLoading || !tableData) {
+		return <SpinnerPage />;
+	}
+
+	const pagination = {
+		offset: data?.offset || initialState.offset,
+		limit: data?.limit || initialState.limit,
+		total: data?.total || 0,
+	};
+
+	return (
+		<>
+			<Heading mb={2}>{intl.formatMessage({ id: "settings.title" })}</Heading>
+			<SettingsTable
+				data={data?.items || []}
+				pagination={pagination}
+				sortBy={sortBy}
+				filters={filters}
+				onTableEvent={dispatch}
+			/>
+		</>
+	);
+}
+
+export default Settings;

frontend/src/pages/Setup/index.tsx

@@ -0,0 +1,241 @@
+import { useEffect, useRef } from "react";
+
+import {
+	Box,
+	Center,
+	Flex,
+	FormControl,
+	FormErrorMessage,
+	FormLabel,
+	Stack,
+	Heading,
+	Input,
+	useColorModeValue,
+	useToast,
+} from "@chakra-ui/react";
+import { createUser } from "api/npm";
+import { LocalePicker, PrettyButton, ThemeSwitcher } from "components";
+import { useAuthState } from "context";
+import { Formik, Form, Field } from "formik";
+import { intl } from "locale";
+import { validateEmail, validateString } from "modules/Validations";
+import { useQueryClient } from "react-query";
+
+import logo from "../../img/logo-256.png";
+
+interface Payload {
+	name: string;
+	nickname: string;
+	email: string;
+	password: string;
+}
+
+function Setup() {
+	const toast = useToast();
+	const nameRef = useRef(null);
+	const queryClient = useQueryClient();
+	const { login } = useAuthState();
+
+	const onSubmit = async (values: Payload, { setSubmitting }: any) => {
+		const { password, ...payload } = {
+			...values,
+			...{
+				isDisabled: false,
+				auth: {
+					type: "password",
+					secret: values.password,
+				},
+				capabilities: ["full-admin"],
+			},
+		};
+
+		const showErr = (msg: string) => {
+			toast({
+				description: intl.formatMessage({
+					id: `error.${msg}`,
+				}),
+				status: "error",
+				position: "top",
+				duration: 3000,
+				isClosable: true,
+			});
+		};
+
+		try {
+			const response = await createUser(payload);
+			if (response && typeof response.id !== "undefined" && response.id) {
+				try {
+					await login(response.email, password);
+					// Trigger a Health change
+					await queryClient.refetchQueries("health");
+					// window.location.reload();
+				} catch (err: any) {
+					showErr(err.message);
+				}
+			} else {
+				showErr("cannot_create_user");
+			}
+		} catch (err: any) {
+			showErr(err.message);
+		}
+		setSubmitting(false);
+	};
+
+	useEffect(() => {
+		// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
+		nameRef.current.focus();
+	}, []);
+
+	return (
+		<Flex
+			minH="100vh"
+			w="100vw"
+			flexDir="column"
+			bg={useColorModeValue("gray.50", "gray.800")}>
+			<Stack h={10} m={4} justify="end" direction="row">
+				<ThemeSwitcher />
+				<LocalePicker className="text-right" />
+			</Stack>
+
+			<Flex align="center" justify="center" flex="1">
+				<Stack spacing={8} mx="auto" maxW="md" w="full" py={4} px={6}>
+					<Box>
+						<Center>
+							<img src={logo} width={100} alt="Logo" />
+						</Center>
+					</Box>
+					<Box
+						rounded="lg"
+						bg={useColorModeValue("white", "gray.700")}
+						boxShadow="lg"
+						p={8}>
+						<Stack spacing={4}>
+							<Heading
+								color={useColorModeValue("gray.800", "gray.300")}
+								lineHeight={1.1}
+								fontSize={{ base: "1xl", sm: "2xl", md: "3xl" }}>
+								{intl.formatMessage({ id: "setup.title" })}
+							</Heading>
+						</Stack>
+						<Box mt={10}>
+							<Formik
+								initialValues={
+									{
+										name: "",
+										nickname: "",
+										email: "",
+										password: "",
+									} as Payload
+								}
+								onSubmit={onSubmit}>
+								{({ isSubmitting }) => (
+									<Form>
+										<Stack spacing={4}>
+											<Field name="name" validate={validateString(2, 100)}>
+												{({ field, form }: any) => (
+													<FormControl
+														isRequired
+														isInvalid={form.errors.name && form.touched.name}>
+														<FormLabel htmlFor="name">
+															{intl.formatMessage({ id: "user.name" })}
+														</FormLabel>
+														<Input
+															{...field}
+															ref={nameRef}
+															id="name"
+															placeholder={intl.formatMessage({
+																id: "user.name",
+															})}
+														/>
+														<FormErrorMessage>
+															{form.errors.name}
+														</FormErrorMessage>
+													</FormControl>
+												)}
+											</Field>
+											<Field name="nickname" validate={validateString(2, 100)}>
+												{({ field, form }: any) => (
+													<FormControl
+														isRequired
+														isInvalid={
+															form.errors.nickname && form.touched.nickname
+														}>
+														<FormLabel htmlFor="nickname">
+															{intl.formatMessage({ id: "user.nickname" })}
+														</FormLabel>
+														<Input
+															{...field}
+															id="nickname"
+															placeholder={intl.formatMessage({
+																id: "user.nickname",
+															})}
+														/>
+														<FormErrorMessage>
+															{form.errors.nickname}
+														</FormErrorMessage>
+													</FormControl>
+												)}
+											</Field>
+											<Field name="email" validate={validateEmail()}>
+												{({ field, form }: any) => (
+													<FormControl
+														isRequired
+														isInvalid={form.errors.email && form.touched.email}>
+														<FormLabel htmlFor="email">
+															{intl.formatMessage({ id: "user.email" })}
+														</FormLabel>
+														<Input
+															{...field}
+															id="email"
+															type="email"
+															placeholder={intl.formatMessage({
+																id: "user.email",
+															})}
+														/>
+														<FormErrorMessage>
+															{form.errors.email}
+														</FormErrorMessage>
+													</FormControl>
+												)}
+											</Field>
+											<Field name="password" validate={validateString(8, 255)}>
+												{({ field, form }: any) => (
+													<FormControl
+														isRequired
+														isInvalid={
+															form.errors.password && form.touched.password
+														}>
+														<FormLabel htmlFor="password">
+															{intl.formatMessage({ id: "user.password" })}
+														</FormLabel>
+														<Input
+															{...field}
+															id="password"
+															type="password"
+															placeholder={intl.formatMessage({
+																id: "user.password",
+															})}
+														/>
+														<FormErrorMessage>
+															{form.errors.password}
+														</FormErrorMessage>
+													</FormControl>
+												)}
+											</Field>
+										</Stack>
+										<PrettyButton isLoading={isSubmitting} mt={8} w="full">
+											{intl.formatMessage({ id: "setup.create" })}
+										</PrettyButton>
+									</Form>
+								)}
+							</Formik>
+						</Box>
+					</Box>
+				</Stack>
+			</Flex>
+			<Box h={10} m={4} />
+		</Flex>
+	);
+}
+
+export default Setup;

frontend/src/pages/Users/Table.tsx

@@ -0,0 +1,173 @@
+import { useState, useEffect, useMemo } from "react";
+
+import {
+	tableEvents,
+	ActionsFormatter,
+	CapabilitiesFormatter,
+	DisabledFormatter,
+	GravatarFormatter,
+	TableFilter,
+	TableLayout,
+	TablePagination,
+	TableSortBy,
+	TextFilter,
+} from "components";
+import { useUser } from "hooks";
+import { intl } from "locale";
+import { SetPasswordModal, UserEditModal } from "modals";
+import { FiEdit, FiLock } from "react-icons/fi";
+import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+
+export interface TableProps {
+	data: any;
+	pagination: TablePagination;
+	sortBy: TableSortBy[];
+	filters: TableFilter[];
+	onTableEvent: any;
+}
+function Table({
+	data,
+	pagination,
+	onTableEvent,
+	sortBy,
+	filters,
+}: TableProps) {
+	const { data: me } = useUser("me");
+	const [editId, setEditId] = useState(0);
+	const [setPasswordUserId, setSetPasswordUserId] = useState(0);
+	const [columns, tableData] = useMemo(() => {
+		const columns = [
+			{
+				accessor: "gravatarUrl",
+				className: "w-80",
+				Cell: GravatarFormatter(),
+			},
+			{
+				Header: intl.formatMessage({ id: "user.name" }),
+				accessor: "name",
+				sortable: true,
+				Filter: TextFilter,
+				Cell: DisabledFormatter(),
+			},
+			{
+				Header: intl.formatMessage({ id: "user.email" }),
+				accessor: "email",
+				sortable: true,
+				Filter: TextFilter,
+			},
+			{
+				Header: intl.formatMessage({ id: "user.capabilities" }),
+				accessor: "capabilities",
+				Cell: CapabilitiesFormatter(),
+			},
+			{
+				id: "actions",
+				accessor: "id",
+				className: "w-80",
+				Cell: ActionsFormatter([
+					{
+						title: intl.formatMessage({ id: "action.edit" }),
+						icon: <FiEdit />,
+						onClick: (e: any, { id }: any) => setEditId(id),
+						disabled: (data: any) => data.isSystem || data.id === me?.id,
+					},
+					{
+						title: intl.formatMessage({ id: "action.set-password" }),
+						icon: <FiLock />,
+						onClick: (e: any, { id }: any) => setSetPasswordUserId(id),
+						disabled: (data: any) => data.isSystem || data.id === me?.id,
+					},
+				]),
+			},
+		];
+		return [columns, data];
+	}, [data, me?.id]);
+
+	const tableInstance = useTable(
+		{
+			columns,
+			data: tableData,
+			initialState: {
+				pageIndex: Math.floor(pagination.offset / pagination.limit),
+				pageSize: pagination.limit,
+				sortBy,
+				filters,
+			},
+			// Tell the usePagination
+			// hook that we'll handle our own data fetching
+			// This means we'll also have to provide our own
+			// pageCount.
+			pageCount: Math.ceil(pagination.total / pagination.limit),
+			manualPagination: true,
+			// Sorting options
+			manualSortBy: true,
+			disableMultiSort: true,
+			disableSortRemove: true,
+			autoResetSortBy: false,
+			// Filter options
+			manualFilters: true,
+			autoResetFilters: false,
+		},
+		useFilters,
+		useSortBy,
+		usePagination,
+	);
+
+	const { gotoPage } = tableInstance;
+
+	useEffect(() => {
+		onTableEvent({
+			type: tableEvents.PAGE_CHANGED,
+			payload: tableInstance.state.pageIndex,
+		});
+	}, [onTableEvent, tableInstance.state.pageIndex]);
+
+	useEffect(() => {
+		onTableEvent({
+			type: tableEvents.PAGE_SIZE_CHANGED,
+			payload: tableInstance.state.pageSize,
+		});
+	}, [gotoPage, onTableEvent, tableInstance.state.pageSize]);
+
+	useEffect(() => {
+		if (pagination.total) {
+			onTableEvent({
+				type: tableEvents.TOTAL_COUNT_CHANGED,
+				payload: pagination.total,
+			});
+		}
+	}, [pagination.total, onTableEvent]);
+
+	useEffect(() => {
+		onTableEvent({
+			type: tableEvents.SORT_CHANGED,
+			payload: tableInstance.state.sortBy,
+		});
+	}, [onTableEvent, tableInstance.state.sortBy]);
+
+	useEffect(() => {
+		onTableEvent({
+			type: tableEvents.FILTERS_CHANGED,
+			payload: tableInstance.state.filters,
+		});
+	}, [onTableEvent, tableInstance.state.filters]);
+
+	return (
+		<>
+			<TableLayout pagination={pagination} {...tableInstance} />
+			{editId ? (
+				<UserEditModal userId={editId} isOpen onClose={() => setEditId(0)} />
+			) : null}
+
+			{setPasswordUserId ? (
+				<SetPasswordModal
+					userId={setPasswordUserId}
+					isOpen
+					onClose={() => setSetPasswordUserId(0)}
+				/>
+			) : null}
+		</>
+	);
+}
+
+export default Table;

frontend/src/pages/Users/TableWrapper.tsx

@@ -0,0 +1,78 @@
+import { useEffect, useReducer, useState } from "react";
+
+import { Alert, AlertIcon } from "@chakra-ui/react";
+import { SpinnerPage, tableEventReducer } from "components";
+import { useUsers } from "hooks";
+
+import Table from "./Table";
+
+const initialState = {
+	offset: 0,
+	limit: 10,
+	sortBy: [
+		{
+			id: "name",
+			desc: false,
+		},
+	],
+	filters: [],
+};
+
+function TableWrapper() {
+	const [{ offset, limit, sortBy, filters }, dispatch] = useReducer(
+		tableEventReducer,
+		initialState,
+	);
+
+	const [tableData, setTableData] = useState(null);
+	const { isFetching, isLoading, isError, error, data } = useUsers(
+		offset,
+		limit,
+		sortBy,
+		filters,
+	);
+
+	useEffect(() => {
+		setTableData(data as any);
+	}, [data]);
+
+	if (isFetching || isLoading || !tableData) {
+		return <SpinnerPage />;
+	}
+
+	if (isError) {
+		return (
+			<Alert status="error">
+				<AlertIcon />
+				{error?.message || "Unknown error"}
+			</Alert>
+		);
+	}
+
+	if (typeof data?.total === "undefined") {
+		return (
+			<Alert status="error">
+				<AlertIcon />
+				There was an error fetching the data.
+			</Alert>
+		);
+	}
+
+	const pagination = {
+		offset: data?.offset,
+		limit: data?.limit,
+		total: data?.total,
+	};
+
+	return (
+		<Table
+			data={data?.items || []}
+			pagination={pagination}
+			sortBy={sortBy}
+			filters={filters}
+			onTableEvent={dispatch}
+		/>
+	);
+}
+
+export default TableWrapper;

frontend/src/pages/Users/index.tsx

@@ -0,0 +1,30 @@
+import { useState } from "react";
+
+import { Heading, HStack } from "@chakra-ui/react";
+import { PrettyButton } from "components";
+import { intl } from "locale";
+import { UserCreateModal } from "modals";
+
+import TableWrapper from "./TableWrapper";
+
+function Users() {
+	const [createShown, setCreateShown] = useState(false);
+
+	return (
+		<>
+			<HStack mx={6} my={4} justifyContent="space-between">
+				<Heading mb={2}>{intl.formatMessage({ id: "users.title" })}</Heading>
+				<PrettyButton size="sm" onClick={() => setCreateShown(true)}>
+					{intl.formatMessage({ id: "user.create" })}
+				</PrettyButton>
+			</HStack>
+			<TableWrapper />
+			<UserCreateModal
+				isOpen={createShown}
+				onClose={() => setCreateShown(false)}
+			/>
+		</>
+	);
+}
+
+export default Users;