From dac14af539589da003926c63f15dce675c009db6 Mon Sep 17 00:00:00 2001 From: Myzel394 <50424412+Myzel394@users.noreply.github.com> Date: Sat, 4 Feb 2023 14:36:26 +0100 Subject: [PATCH] created ReservedAliasesRoute.tsx --- public/locales/en-US/translation.json | 16 +++ src/App.tsx | 5 + .../AliasExplanation.tsx | 21 ++-- src/routes/CreateReservedAliasRoute.tsx | 8 +- src/routes/ReservedAliasesRoute.tsx | 113 ++++++++++++++++++ src/server-types.ts | 1 + 6 files changed, 152 insertions(+), 12 deletions(-) create mode 100644 src/routes/ReservedAliasesRoute.tsx diff --git a/public/locales/en-US/translation.json b/public/locales/en-US/translation.json index 4ff93a5..cf01f8f 100644 --- a/public/locales/en-US/translation.json +++ b/public/locales/en-US/translation.json @@ -280,6 +280,22 @@ "title": "Log out", "description": "We are logging you out..." }, + "ReservedAliasesRoute": { + "title": "Reserved Aliases", + "pageActions": { + "search": { + "label": "Search", + "placeholder": "Search for aliases" + } + }, + "actions": { + "create": { + "label": "Create new Reserved Alias" + } + }, + "userAmount_one": "Forwards to one user", + "userAmount_other": "Forwards to {{count}} users" + }, "AdminRoute": { "title": "Site configuration", "forms": { diff --git a/src/App.tsx b/src/App.tsx index 67e8221..217ee90 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -21,6 +21,7 @@ import LogoutRoute from "~/routes/LogoutRoute" import OverviewRoute from "~/routes/OverviewRoute" import ReportDetailRoute from "~/routes/ReportDetailRoute" import ReportsRoute from "~/routes/ReportsRoute" +import ReservedAliasesRoute from "~/routes/ReservedAliasesRoute" import RootRoute from "~/routes/Root" import SettingsRoute from "~/routes/SettingsRoute" import SignupRoute from "~/routes/SignupRoute" @@ -99,6 +100,10 @@ const router = createBrowserRouter([ loader: getServerSettings, element: , }, + { + path: "/admin/reserved-aliases", + element: , + }, { path: "/admin/reserved-aliases/create", loader: getServerSettings, diff --git a/src/route-widgets/CreateReservedAliasRoute/AliasExplanation.tsx b/src/route-widgets/CreateReservedAliasRoute/AliasExplanation.tsx index 70d3528..5462f1f 100644 --- a/src/route-widgets/CreateReservedAliasRoute/AliasExplanation.tsx +++ b/src/route-widgets/CreateReservedAliasRoute/AliasExplanation.tsx @@ -4,7 +4,7 @@ import {MdMail} from "react-icons/md" import {useLoaderData} from "react-router" import {ServerSettings} from "~/server-types" import {useTranslation} from "react-i18next" -import {BsArrowDown} from "react-icons/bs" +import {BsArrowRight} from "react-icons/bs" import {FaMask} from "react-icons/fa" import {HiUsers} from "react-icons/hi" @@ -21,13 +21,14 @@ export default function AliasExplanation({local, emails}: AliasExplanationProps) return ( @@ -35,7 +36,7 @@ export default function AliasExplanation({local, emails}: AliasExplanationProps) - + {t("routes.AdminRoute.forms.reservedAliases.explanation.step1")} @@ -44,10 +45,10 @@ export default function AliasExplanation({local, emails}: AliasExplanationProps) - + - + {t("routes.AdminRoute.forms.reservedAliases.explanation.step2")} @@ -59,9 +60,11 @@ export default function AliasExplanation({local, emails}: AliasExplanationProps) - + {local} - @{serverSettings.mailDomain} + + @{serverSettings.mailDomain} + @@ -69,10 +72,10 @@ export default function AliasExplanation({local, emails}: AliasExplanationProps) - + - + {t("routes.AdminRoute.forms.reservedAliases.explanation.step4")} diff --git a/src/routes/CreateReservedAliasRoute.tsx b/src/routes/CreateReservedAliasRoute.tsx index f61df89..7e9f933 100644 --- a/src/routes/CreateReservedAliasRoute.tsx +++ b/src/routes/CreateReservedAliasRoute.tsx @@ -77,14 +77,13 @@ export default function CreateReservedAliasRoute(): ReactElement { })), }) } catch (error) { - console.log(parseFastAPIError(error as AxiosError)) setErrors(parseFastAPIError(error as AxiosError)) } }, }) return ( - +
- + user.email.address)} + /> ) diff --git a/src/routes/ReservedAliasesRoute.tsx b/src/routes/ReservedAliasesRoute.tsx new file mode 100644 index 0000000..493f141 --- /dev/null +++ b/src/routes/ReservedAliasesRoute.tsx @@ -0,0 +1,113 @@ +import {ReactElement, useState, useTransition} from "react" +import {AxiosError} from "axios" +import {useTranslation} from "react-i18next" +import {MdAdd, MdSearch} from "react-icons/md" +import {Link} from "react-router-dom" + +import { + Button, + InputAdornment, + List, + ListItemButton, + ListItemSecondaryAction, + ListItemText, + Switch, + TextField, +} from "@mui/material" +import {useQuery} from "@tanstack/react-query" + +import {PaginationResult, ReservedAlias} from "~/server-types" +import {getReservedAliases} from "~/apis" +import {QueryResult, SimplePage} from "~/components" + +export default function ReservedAliasesRoute(): ReactElement { + const {t} = useTranslation() + const [showSearch, setShowSearch] = useState(false) + const [searchValue, setSearchValue] = useState("") + const [queryValue, setQueryValue] = useState("") + const [, startTransition] = useTransition() + const query = useQuery, AxiosError>( + ["getReservedAliases", {queryValue}], + () => + getReservedAliases({ + query: queryValue, + }), + { + onSuccess: () => { + setShowSearch(true) + }, + }, + ) + + return ( + { + setSearchValue(event.target.value) + startTransition(() => { + setQueryValue(event.target.value) + }) + }} + label={t("routes.ReservedAliasesRoute.pageActions.search.label")} + placeholder={t( + "routes.ReservedAliasesRoute.pageActions.search.placeholder", + )} + id="search" + InputProps={{ + startAdornment: ( + + + + ), + }} + /> + ) + } + actions={ + + } + > + , AxiosError> query={query}> + {({items: aliases}) => ( + + {aliases.map(alias => ( + + + {alias.local} + @{alias.domain} + + } + secondary={t("routes.ReservedAliasesRoute.userAmount", { + count: alias.users.length, + })} + /> + + + + + ))} + + )} + + + ) +} diff --git a/src/server-types.ts b/src/server-types.ts index 8b6cb7c..2723c40 100644 --- a/src/server-types.ts +++ b/src/server-types.ts @@ -103,6 +103,7 @@ export interface Alias { export interface ReservedAlias { id: string + isActive: boolean domain: string local: string users: Array<{