mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-29 07:20:43 +00:00
zeekay
0f5536b707
Every word the landing, the header menus, the phone sheet, the footer,
the help corner and the way in (sign-in, sign-up, the reset, the
invitation, the callback, onboarding, the 404) write goes through
@hanzo/i18n's t(): one sentence is one message, its figures, names and
links arguments; copy written as data is phrase('…') where written and
t(label) where drawn. Plans, the chart, the API states and the lines
lib/kai and lib/enso build for the landing do the same.
Right to left: <html lang dir> is set before the first paint (the
package's bootScript first in the head); a figure, clock, range or
price outside a sentence is isolated; sides are logical gui props, the
layout's [data-join] corners logical, a bar grows from the start;
arrows along the line mirror (Onward for "words ->" links). The repo
dates read in the reader's language.
Gates select by slot, never by an English label (rtl, help). New gate
translated.spec.ts: in Arabic the landing at 1440 and 390, every menu
open, the phone sheet, sign-in, sign-up and the app signed in hold no
authored English, nothing scrolls sideways, every range is isolated;
French the same for English's commonest words. What another package
draws with no words prop is listed by name (@hanzo/ui's Footer label,
@hanzo/build's composer row and suggestions).
@hanzo/i18n 0.5.3 (the catalogs: 1,443 keys, every offered locale
complete), @hanzo/app 0.2.1 (the app's words). The link gate imports
the terms versions from @hanzo/app, the one SDK main now resolves.
99 lines
3.6 KiB
TypeScript
99 lines
3.6 KiB
TypeScript
'use client'
|
|
|
|
/**
|
|
* A support session, on every page: who the page is signed in as, who opened it,
|
|
* and the way out. Mounted once in app/providers.tsx beside Identity.
|
|
*
|
|
* IAM issues the session no refresh token and caps it at fifteen minutes. The
|
|
* earlier session's refresh token is dropped (`isolate`), so the SDK has nothing to
|
|
* renew with and ends the session itself sixty seconds before expiry. Every end —
|
|
* Exit, that one, or a token found already expired — is `leave`: the token handed
|
|
* back to IAM, the tokens cleared, and `/` loaded, where `own()` empties what this
|
|
* browser kept for the person. The banner has no dismiss.
|
|
*/
|
|
import { useCallback, useEffect, useMemo, useRef, type ReactNode } from 'react'
|
|
import { claimsOf, useIam } from '@hanzo/iam/react'
|
|
import { useI18n } from '@hanzo/i18n/react'
|
|
import { useHydrated } from '@hanzo/app/lib/hydrated'
|
|
import { Button, Text, XStack } from '@hanzo/ui'
|
|
import { impersonated, isolate, revoke, type Impersonation as Session } from '@/lib/auth/impersonation'
|
|
|
|
/** Above the room's sheets and the support-mode strip. gui carries a `calc()` through unchanged. */
|
|
const Z = 'calc(var(--z-modal) + 40)' as `var(--${string})`
|
|
|
|
/** The support session this page is signed in as, or null: the token's mark, else userinfo's. */
|
|
export function useImpersonation(): Session | null {
|
|
const { accessToken, user } = useIam()
|
|
return useMemo(() => impersonated(claimsOf(accessToken)) ?? impersonated(user), [accessToken, user])
|
|
}
|
|
|
|
export function Impersonation() {
|
|
const { t } = useI18n()
|
|
const { sdk, config, accessToken } = useIam()
|
|
const session = useImpersonation()
|
|
const hydrated = useHydrated()
|
|
// The support token while it is in hand: the SDK clears it before this hears the end.
|
|
const held = useRef<string | null>(null)
|
|
const gone = useRef(false)
|
|
|
|
// Signed out here, not at the issuer: the issuer's session is the operator's own.
|
|
const leave = useCallback(
|
|
(token: string | null) => {
|
|
if (gone.current) return
|
|
gone.current = true
|
|
sdk.clearTokens()
|
|
void (token ? revoke(token, config) : Promise.resolve()).then(() => window.location.replace('/'))
|
|
},
|
|
[sdk, config],
|
|
)
|
|
|
|
useEffect(() => {
|
|
if (!session) {
|
|
if (held.current) leave(held.current)
|
|
return
|
|
}
|
|
held.current = accessToken
|
|
isolate()
|
|
if (session.expires !== null && session.expires <= Date.now()) leave(accessToken)
|
|
}, [session, accessToken, leave])
|
|
|
|
if (!session || !hydrated) return null
|
|
// lib/auth/impersonation's `banner`, said in the reader's language: the person and
|
|
// the operator are its arguments. The pill's text side is its start, so it reads
|
|
// from the right in a right-to-left language.
|
|
return (
|
|
<XStack
|
|
role="status"
|
|
aria-label={t('Support session')}
|
|
position="fixed"
|
|
t={52}
|
|
l="50%"
|
|
x="-50%"
|
|
maxW="calc(100vw - 32px)"
|
|
z={Z}
|
|
items="center"
|
|
justify="center"
|
|
gap={12}
|
|
flexWrap="wrap"
|
|
pt={6}
|
|
paddingInlineEnd={8}
|
|
pb={6}
|
|
paddingInlineStart={16}
|
|
rounded={999}
|
|
bg="var(--foreground)"
|
|
>
|
|
<Text fontSize="$2" color="var(--background)">
|
|
{t('Signed in as {name} by {operator} — support session', { name: session.name, operator: session.operator })}
|
|
</Text>
|
|
<Button size="sm" onClick={() => leave(accessToken)}>
|
|
{t('Exit')}
|
|
</Button>
|
|
</XStack>
|
|
)
|
|
}
|
|
|
|
/** Its children, except in a support session: what writes to the person's account as them. */
|
|
export function Personal({ children }: { children: ReactNode }) {
|
|
return useImpersonation() ? null : <>{children}</>
|
|
}
|