From 5c2c74cfb44616c172e3f14cf29283f4ff72ea3e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ma=C3=ABl=20Gangloff?= Date: Wed, 10 Dec 2025 11:03:24 +0100 Subject: [PATCH] feat: add authentication banner --- assets/App.tsx | 199 +++++++++++---------- assets/components/search/EventTimeline.tsx | 2 +- assets/contexts/index.ts | 6 +- assets/pages/search/DomainSearchPage.tsx | 2 +- translations/translations.pot | 40 +++-- 5 files changed, 132 insertions(+), 117 deletions(-) diff --git a/assets/App.tsx b/assets/App.tsx index 1f6fe05..73ba468 100644 --- a/assets/App.tsx +++ b/assets/App.tsx @@ -1,4 +1,4 @@ -import {Button, ConfigProvider, Drawer, Flex, Layout, message, theme, Typography} from 'antd' +import {Alert, Button, ConfigProvider, Drawer, Flex, Layout, message, theme, Typography} from 'antd' import {Link, Navigate, Route, Routes, useLocation, useNavigate} from 'react-router-dom' import TextPage from './pages/TextPage' import DomainSearchPage from './pages/search/DomainSearchPage' @@ -8,7 +8,7 @@ import StatisticsPage from './pages/StatisticsPage' import WatchlistPage from './pages/tracking/WatchlistPage' import UserPage from './pages/UserPage' import type {PropsWithChildren} from 'react' -import React, { useCallback, useEffect, useMemo, useState} from 'react' +import React, {useCallback, useEffect, useMemo, useState} from 'react' import {getConfiguration, getUser, type InstanceConfig} from './utils/api' import LoginPage from './pages/LoginPage' import ConnectorPage from './pages/tracking/ConnectorPage' @@ -25,10 +25,15 @@ import {AuthenticatedContext, ConfigurationContext} from "./contexts" const PROJECT_LINK = 'https://github.com/maelgangloff/domain-watchdog' const LICENSE_LINK = 'https://www.gnu.org/licenses/agpl-3.0.txt' -const ProjectLink = Domain Watchdog -const LicenseLink = AGPL-3.0-or-later +const ProjectLink = Domain + Watchdog +const LicenseLink = AGPL-3.0-or-later -function SiderWrapper(props: PropsWithChildren<{sidebarCollapsed: boolean, setSidebarCollapsed: (collapsed: boolean) => void}>): React.ReactElement { +function SiderWrapper(props: PropsWithChildren<{ + sidebarCollapsed: boolean, + setSidebarCollapsed: (collapsed: boolean) => void +}>): React.ReactElement { const {sidebarCollapsed, setSidebarCollapsed, children} = props const sm = useBreakpoint('sm') const location = useLocation() @@ -41,22 +46,22 @@ function SiderWrapper(props: PropsWithChildren<{sidebarCollapsed: boolean, setSi if (sm) { return setSidebarCollapsed(false)} - closeIcon={null} - styles={{body: {padding: 0, height: '100%', background: '#001529'}}} - width='200px'> + placement="left" + open={sidebarCollapsed} + onClose={() => setSidebarCollapsed(false)} + closeIcon={null} + styles={{body: {padding: 0, height: '100%', background: '#001529'}}} + width='200px'> {children} } else { return + collapsible + breakpoint='sm' + width={220} + trigger={null} + collapsed={sidebarCollapsed && sm} + {...(sm ? {collapsedWidth: 0} : {})}> {children} } @@ -68,8 +73,7 @@ export default function App(): React.ReactElement { const sm = useBreakpoint('sm') const [sidebarCollapsed, setSidebarCollapsed] = useState(false) - const [isAuthenticated, setIsAuthenticated] = useState(false) - + const [isAuthenticated, setIsAuthenticated] = useState(undefined) const [configuration, setConfiguration] = useState(undefined) const [darkMode, setDarkMode] = useState(false) @@ -108,7 +112,7 @@ export default function App(): React.ReactElement { }).catch(() => { setIsAuthenticated(false) const pathname = location.pathname - if(configuration.publicRdapLookupEnabled) return navigate('/search/domain') + if (configuration.publicRdapLookupEnabled) return navigate('/search/domain') if (!['/login', '/tos', '/faq', '/privacy'].includes(pathname)) return navigate('/home') }) }).catch(() => messageApi.error(t`Unable to contact the server, please reload the page.`)) @@ -121,91 +125,92 @@ export default function App(): React.ReactElement { }} > - - - - - - - - {sm && - - } - - -
- {contextHolder} - - }/> - }/> - - }/> - }/> - }/> - - }/> - }/> - - }/> - }/> - }/> - - }/> - }/> - - }/> - }/> - }/> - - }/> - - }/> - -
- - - - - - - + {(configuration?.registerEnabled || configuration?.ssoLogin) && isAuthenticated === false && location.pathname !== '/login' && + } + banner closable/> + } + + + + + + + {sm && + + } + + +
-
+ + + + + + + - - - - - - - - - - {jt`${ProjectLink} is an open source project distributed under the ${LicenseLink} license.`} - - + + + {jt`${ProjectLink} is an open source project distributed under the ${LicenseLink} license.`} + + + - - + ) diff --git a/assets/components/search/EventTimeline.tsx b/assets/components/search/EventTimeline.tsx index 5454fb7..536d059 100644 --- a/assets/components/search/EventTimeline.tsx +++ b/assets/components/search/EventTimeline.tsx @@ -12,7 +12,7 @@ function getWhoisRemoveTimelineEvent(expiresInDays: number) { const locale = navigator.language.split('-')[0] const sm = useBreakpoint('sm') const eventName = t`Estimated removal` - const eventDetail = t`Estimated date when the WHOIS record is removed` + const eventDetail = t`Estimated WHOIS removal date. This is the earliest date this record would be deleted, according to ICANN's standard lifecycle. Note that some registries have their own lifecycles.` const dateStr = diff --git a/assets/contexts/index.ts b/assets/contexts/index.ts index 1fe0f7f..3e13457 100644 --- a/assets/contexts/index.ts +++ b/assets/contexts/index.ts @@ -13,12 +13,12 @@ export const ConfigurationContext = createContext({ export type AuthContextType = { - isAuthenticated: boolean - setIsAuthenticated: React.Dispatch> + isAuthenticated?: boolean + setIsAuthenticated: React.Dispatch> } export const AuthenticatedContext = createContext({ - isAuthenticated: false, + isAuthenticated: undefined, setIsAuthenticated: () => { }, }) \ No newline at end of file diff --git a/assets/pages/search/DomainSearchPage.tsx b/assets/pages/search/DomainSearchPage.tsx index 9d92c19..c526ca3 100644 --- a/assets/pages/search/DomainSearchPage.tsx +++ b/assets/pages/search/DomainSearchPage.tsx @@ -1,6 +1,6 @@ import React, {useContext, useEffect, useState} from 'react' import type {FormProps} from 'antd' -import {Empty, Flex, FloatButton, message, Skeleton} from 'antd' +import { Empty, Flex, FloatButton, message, Skeleton} from 'antd' import type {Domain, Watchlist} from '../../utils/api' import {addDomainToWatchlist, getDomain} from '../../utils/api' import type {AxiosError} from 'axios' diff --git a/translations/translations.pot b/translations/translations.pot index e967663..60c4a5c 100644 --- a/translations/translations.pot +++ b/translations/translations.pot @@ -3,35 +3,48 @@ msgstr "" "Content-Type: text/plain; charset=utf-8\n" "Plural-Forms: nplurals=2; plural=(n!=1);\n" -#: assets/App.tsx:114 +#: assets/App.tsx:118 msgid "Unable to contact the server, please reload the page." msgstr "" -#: assets/App.tsx:174 +#: assets/App.tsx:132 +msgid "" +"Please authenticate to take advantage of all features, monitor domains and " +"manage your Connectors." +msgstr "" + +#: assets/App.tsx:133 +#: assets/components/Sider.tsx:158 +#: assets/pages/LoginPage.tsx:36 +#: assets/pages/LoginPage.tsx:50 +msgid "Log in" +msgstr "" + +#: assets/App.tsx:187 msgid "TOS" msgstr "" -#: assets/App.tsx:175 +#: assets/App.tsx:189 msgid "Privacy Policy" msgstr "" -#: assets/App.tsx:176 +#: assets/App.tsx:190 msgid "FAQ" msgstr "" -#: assets/App.tsx:182 +#: assets/App.tsx:194 msgid "Documentation" msgstr "" -#: assets/App.tsx:190 +#: assets/App.tsx:199 msgid "Source code" msgstr "" -#: assets/App.tsx:198 +#: assets/App.tsx:204 msgid "Submit an issue" msgstr "" -#: assets/App.tsx:203 +#: assets/App.tsx:208 #, javascript-format msgid "" "${ ProjectLink } is an open source project distributed under the ${ " @@ -177,7 +190,10 @@ msgid "Estimated removal" msgstr "" #: assets/components/search/EventTimeline.tsx:15 -msgid "Estimated date when the WHOIS record is removed" +msgid "" +"Estimated WHOIS removal date. This is the earliest date this record would " +"be deleted, according to ICANN's standard lifecycle. Note that some " +"registries have their own lifecycles." msgstr "" #: assets/components/Sider.tsx:35 @@ -261,12 +277,6 @@ msgstr "" msgid "Log out" msgstr "" -#: assets/components/Sider.tsx:158 -#: assets/pages/LoginPage.tsx:36 -#: assets/pages/LoginPage.tsx:50 -msgid "Log in" -msgstr "" - #: assets/components/tracking/connector/ConnectorForm.tsx:36 #: assets/pages/infrastructure/IcannRegistrarPage.tsx:51 #: assets/utils/functions/rdapTranslation.ts:12