Skip to content

Mount self service routes for logged in users #488

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tudddorrr merged 1 commit into from
Mar 7, 2026
Merged

Mount self service routes for logged in users #488

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion src/Router.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,10 @@ const DeletePlayer = lazy(
() => import(/* webpackChunkName: 'delete-player */ './pages/self-service/DeletePlayer'),
)

const selfServiceRouteElements = [
<Route key='delete' path={selfServiceRoutes.delete} element={<DeletePlayer />} />,
]

type RouterProps = {
intendedRoute: string | null
}
Expand All @@ -117,7 +121,7 @@ function Router({ intendedRoute }: RouterProps) {
<Route path={routes.forgotPassword} element={<ForgotPassword />} />
<Route path={routes.resetPassword} element={<ResetPassword />} />

<Route path={selfServiceRoutes.delete} element={<DeletePlayer />} />
{selfServiceRouteElements}

<Route path='*' element={<IntendedRouteHandler intendedRoute={intendedRoute} />} />
</Routes>
Expand Down Expand Up @@ -189,6 +193,8 @@ function Router({ intendedRoute }: RouterProps) {
</>
)}

{selfServiceRouteElements}

<Route path='*' element={<NotFound />} />
</Routes>
</main>
Expand Down
231 changes: 116 additions & 115 deletions src/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,155 +1,156 @@
import { useLocation } from 'react-router-dom'
import { HideForSelfService } from './HideForSelfService'
import Link from './Link'

export default function Footer() {
const location = useLocation()
if (location.pathname.startsWith('/manage/')) {
return null
}

return (
<footer className='relative mt-auto w-full justify-center space-y-4 border-t border-gray-700 bg-gray-900 px-4 py-8 text-white md:flex md:space-y-0 md:space-x-12 md:py-12 lg:space-x-16 xl:space-x-25'>
<div className='space-y-4'>
<div>
<strong>&copy; Talo Platform Ltd {new Date().getFullYear()}</strong>
<p className='mt-2'>Self-funded and independent</p>
<Link to='https://trytalo.com/about?utm_source=dashboard&utm_medium=footer'>
About us
</Link>
</div>
<HideForSelfService>
<footer className='relative mt-auto w-full justify-center space-y-4 border-t border-gray-700 bg-gray-900 px-4 py-8 text-white md:flex md:space-y-0 md:space-x-12 md:py-12 lg:space-x-16 xl:space-x-25'>
<div className='space-y-4'>
<div>
<strong>&copy; Talo Platform Ltd {new Date().getFullYear()}</strong>
<p className='mt-2'>Self-funded and independent</p>
<Link to='https://trytalo.com/about?utm_source=dashboard&utm_medium=footer'>
About us
</Link>
</div>

<div>
<h3 className='font-semibold'>Contact us</h3>
<ul className='mt-2 space-y-1'>
<li>
<Link to='https://trytalo.com/discord'>Discord</Link>
</li>
<li>
<Link to='mailto:hello@trytalo.com'>Email</Link>
</li>
<li>
<Link to='https://x.com/trytalo'>Twitter</Link>
</li>
<li>
<Link to='https://bsky.app/profile/trytalo.com'>Bluesky</Link>
</li>
</ul>
<div>
<h3 className='font-semibold'>Contact us</h3>
<ul className='mt-2 space-y-1'>
<li>
<Link to='https://trytalo.com/discord'>Discord</Link>
</li>
<li>
<Link to='mailto:hello@trytalo.com'>Email</Link>
</li>
<li>
<Link to='https://x.com/trytalo'>Twitter</Link>
</li>
<li>
<Link to='https://bsky.app/profile/trytalo.com'>Bluesky</Link>
</li>
</ul>
</div>
</div>
</div>

<div>
<h3 className='font-semibold'>Features</h3>
<ul className='mt-2 space-y-1'>
<li>
<Link to='https://trytalo.com/players?utm_source=dashboard&utm_medium=footer'>
Player management
</Link>
</li>
<li>
<Link to='https://trytalo.com/events?utm_source=dashboard&utm_medium=footer'>
Event tracking
</Link>
</li>
<li>
<Link to='https://trytalo.com/leaderboards?utm_source=dashboard&utm_medium=footer'>
Leaderboards
</Link>
</li>
<li>
<Link to='https://trytalo.com/channels?utm_source=dashboard&utm_medium=footer'>
Game channels
</Link>
</li>
<li>
<Link to='https://trytalo.com/saves?utm_source=dashboard&utm_medium=footer'>
Game saves
</Link>
</li>
<li>
<Link to='https://trytalo.com/stats?utm_source=dashboard&utm_medium=footer'>
Game stats
</Link>
</li>
<li>
<Link to='https://trytalo.com/feedback?utm_source=dashboard&utm_medium=footer'>
Game feedback
</Link>
</li>
<li>
<Link to='https://trytalo.com/live-config?utm_source=dashboard&utm_medium=footer'>
Live config
</Link>
</li>
<li>
<Link to='https://trytalo.com/player-relationships?utm_source=dashboard&utm_medium=footer'>
Player relationships
</Link>
</li>
<li>
<Link to='https://trytalo.com/open-source?utm_source=dashboard&utm_medium=footer'>
Open source
</Link>
</li>
</ul>
</div>

<div className='space-y-4 xl:flex xl:space-y-0 xl:space-x-25'>
<div>
<h3 className='font-semibold'>Integrations</h3>
<h3 className='font-semibold'>Features</h3>
<ul className='mt-2 space-y-1'>
<li>
<Link to='https://trytalo.com/steamworks-integration?utm_source=dashboard&utm_medium=footer'>
Steamworks integration
<Link to='https://trytalo.com/players?utm_source=dashboard&utm_medium=footer'>
Player management
</Link>
</li>
<li>
<Link to='https://trytalo.com/unity?utm_source=dashboard&utm_medium=footer'>
Unity package
<Link to='https://trytalo.com/events?utm_source=dashboard&utm_medium=footer'>
Event tracking
</Link>
</li>
<li>
<Link to='https://trytalo.com/godot?utm_source=dashboard&utm_medium=footer'>
Godot plugin
<Link to='https://trytalo.com/leaderboards?utm_source=dashboard&utm_medium=footer'>
Leaderboards
</Link>
</li>
</ul>
</div>

<div>
<h3 className='font-semibold'>Links</h3>
<ul className='mt-2 space-y-1'>
<li>
<Link to='https://github.com/TaloDev'>GitHub</Link>
<Link to='https://trytalo.com/channels?utm_source=dashboard&utm_medium=footer'>
Game channels
</Link>
</li>
<li>
<Link to='https://docs.trytalo.com?utm_source=dashboard&utm_medium=footer'>Docs</Link>
<Link to='https://trytalo.com/saves?utm_source=dashboard&utm_medium=footer'>
Game saves
</Link>
</li>
<li>
<Link to='https://trytalo.com/blog?utm_source=dashboard&utm_medium=footer'>Blog</Link>
<Link to='https://trytalo.com/stats?utm_source=dashboard&utm_medium=footer'>
Game stats
</Link>
</li>
<li>
<Link to='https://trytalo.com/showcase?utm_source=dashboard&utm_medium=footer'>
Showcase
<Link to='https://trytalo.com/feedback?utm_source=dashboard&utm_medium=footer'>
Game feedback
</Link>
</li>
<li>
<Link to='https://trytalo.com/pricing?utm_source=dashboard&utm_medium=footer'>
Pricing
<Link to='https://trytalo.com/live-config?utm_source=dashboard&utm_medium=footer'>
Live config
</Link>
</li>
<li>
<Link to='https://trytalo.com/privacy?utm_source=dashboard&utm_medium=footer'>
Privacy
<Link to='https://trytalo.com/player-relationships?utm_source=dashboard&utm_medium=footer'>
Player relationships
</Link>
</li>
<li>
<Link to='https://trytalo.com/terms?utm_source=dashboard&utm_medium=footer'>
Terms
<Link to='https://trytalo.com/open-source?utm_source=dashboard&utm_medium=footer'>
Open source
</Link>
</li>
</ul>
</div>
</div>
</footer>

<div className='space-y-4 xl:flex xl:space-y-0 xl:space-x-25'>
<div>
<h3 className='font-semibold'>Integrations</h3>
<ul className='mt-2 space-y-1'>
<li>
<Link to='https://trytalo.com/steamworks-integration?utm_source=dashboard&utm_medium=footer'>
Steamworks integration
</Link>
</li>
<li>
<Link to='https://trytalo.com/unity?utm_source=dashboard&utm_medium=footer'>
Unity package
</Link>
</li>
<li>
<Link to='https://trytalo.com/godot?utm_source=dashboard&utm_medium=footer'>
Godot plugin
</Link>
</li>
</ul>
</div>

<div>
<h3 className='font-semibold'>Links</h3>
<ul className='mt-2 space-y-1'>
<li>
<Link to='https://github.com/TaloDev'>GitHub</Link>
</li>
<li>
<Link to='https://docs.trytalo.com?utm_source=dashboard&utm_medium=footer'>
Docs
</Link>
</li>
<li>
<Link to='https://trytalo.com/blog?utm_source=dashboard&utm_medium=footer'>
Blog
</Link>
</li>
<li>
<Link to='https://trytalo.com/showcase?utm_source=dashboard&utm_medium=footer'>
Showcase
</Link>
</li>
<li>
<Link to='https://trytalo.com/pricing?utm_source=dashboard&utm_medium=footer'>
Pricing
</Link>
</li>
<li>
<Link to='https://trytalo.com/privacy?utm_source=dashboard&utm_medium=footer'>
Privacy
</Link>
</li>
<li>
<Link to='https://trytalo.com/terms?utm_source=dashboard&utm_medium=footer'>
Terms
</Link>
</li>
</ul>
</div>
</div>
</footer>
</HideForSelfService>
)
}
12 changes: 12 additions & 0 deletions src/components/HideForSelfService.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { ReactNode } from 'react'
import { useLocation } from 'react-router-dom'

export function HideForSelfService({ children }: { children: ReactNode }) {
const location = useLocation()

if (location.pathname.startsWith('/manage/')) {
return null
}

return children
}
35 changes: 19 additions & 16 deletions src/components/NavBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import routes from '../constants/routes'
import activeGameState from '../state/activeGameState'
import Button from './Button'
import GameSwitcher from './GameSwitcher'
import { HideForSelfService } from './HideForSelfService'
import Link from './Link'
import LinkButton from './LinkButton'
import MobileMenu from './MobileMenu'
Expand Down Expand Up @@ -49,24 +50,26 @@ export default function NavBar() {
)

return (
<nav className='flex w-full items-center justify-between bg-gray-900 p-4 md:p-8'>
<ul className='hidden space-x-4 md:flex md:space-x-8'>{links}</ul>
<HideForSelfService>
<nav className='flex w-full items-center justify-between bg-gray-900 p-4 md:p-8'>
<ul className='hidden space-x-4 md:flex md:space-x-8'>{links}</ul>

<div className='mr-4 flex text-white md:hidden'>
<Button
variant='icon'
onClick={() => setShowMobileMenu(true)}
extra={{ 'aria-label': 'Navigation menu' }}
>
<IconMenu2 size={24} />
</Button>
</div>
<div className='mr-4 flex text-white md:hidden'>
<Button
variant='icon'
onClick={() => setShowMobileMenu(true)}
extra={{ 'aria-label': 'Navigation menu' }}
>
<IconMenu2 size={24} />
</Button>
</div>

<MobileMenu visible={showMobileMenu} onClose={() => setShowMobileMenu(false)}>
{links}
</MobileMenu>
<MobileMenu visible={showMobileMenu} onClose={() => setShowMobileMenu(false)}>
{links}
</MobileMenu>

<GameSwitcher />
</nav>
<GameSwitcher />
</nav>
</HideForSelfService>
)
}
13 changes: 11 additions & 2 deletions src/components/UnauthedContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,16 @@
import { clsx } from 'clsx'
import { ReactNode } from 'react'

export function UnauthedContainer({ children }: { children: ReactNode }) {
export function UnauthedContainer({
children,
className,
}: {
children: ReactNode
className?: string
}) {
return (
<div className='flex h-full flex-col p-8 md:items-center md:justify-center'>{children}</div>
<div className={clsx('flex h-full flex-col p-8 md:items-center md:justify-center', className)}>
{children}
</div>
)
}
Loading