b94912789f
Заменяет blanket override из MR !45 на типизированную type scale per design_handoff_ordinis_mdm/README.md "Scale" section. Семь semantic @utility в styles.css: text-title-xl 22/600 — modal title, section header text-title-lg 17/600 — page title в editor text-title-md 15/600 — dictionary card title text-body 13/400 — workhorse: body, buttons, tabs, inputs text-cell 12.5/500 — table cell text text-mono 11/500 — Mono: IDs, dates, FK refs (font-mono baked in) text-cap 10.5/600 — Tektur UPPERCASE caption (font/uppercase baked in) Audit phases: P1: добавил 7 утилит, font/uppercase/tracking baked где надо P2: 43 deterministic codemods (font-mono+text-2xs/[11px] → text-mono, [15/17/22]px+font-semibold → text-title-*, [12.5]px → text-cell, [10.5]px+uppercase+tracking → text-cap) P3: 64 text-sm → text-body (handoff workhorse), 84 text-2xs context-aware (TableCell → text-cell, bare → text-cell, плюс cleanup caps в backticks template literals который Phase 2 пропустил), 25 text-xs (6 → text-mono когда с font-mono, 19 → text-cell), 8 titles text-base/lg → text-title-* P4: убрал --text-2xs override (no users), оставил --text-sm: 13px scoped к @nstart/ui passthrough (см. comment в styles.css — убирается в Stage 3.9) Stats: text-body: 69 | text-cell: 99 | text-mono: 50 | text-cap: 42 text-title-xl: 5 | text-title-lg: 5 | text-title-md: 7 text-sm/text-2xs/text-xs в src/: 0 (только в styles.css комментариях) Поведение всех 277 typography usages теперь явно соответствует handoff — каждое место осознанно выбрано под роль, не плажирующий override.
79 lines
2.0 KiB
TypeScript
79 lines
2.0 KiB
TypeScript
import { useAuth } from 'react-oidc-context'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { Button, IconButton } from '@/ui'
|
|
import { SignInIcon, SignOutIcon, UserIcon } from '@phosphor-icons/react'
|
|
|
|
/**
|
|
* Бейдж в header'е: «Войти» если anonymous; имя + logout если залогинен.
|
|
*
|
|
* <p>Logout жмёт {@code signoutRedirect} — Keycloak инвалидирует SSO-сессию и
|
|
* вернёт на post-logout-uri (корень).
|
|
*/
|
|
export function AuthBadge() {
|
|
const { t } = useTranslation()
|
|
const auth = useAuth()
|
|
|
|
if (auth.isLoading) {
|
|
return (
|
|
<span className="text-cap text-mute">
|
|
{t('loading')}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
if (auth.error) {
|
|
// Не валим UI — просто кнопка для повтора login.
|
|
return (
|
|
<Button
|
|
type="button"
|
|
variant="secondary"
|
|
leftIcon={<SignInIcon size={16} />}
|
|
onClick={() => auth.signinRedirect()}
|
|
>
|
|
{t('auth.login')}
|
|
</Button>
|
|
)
|
|
}
|
|
|
|
if (!auth.isAuthenticated) {
|
|
return (
|
|
<Button
|
|
type="button"
|
|
variant="primary"
|
|
leftIcon={<SignInIcon size={16} />}
|
|
onClick={() => auth.signinRedirect()}
|
|
>
|
|
{t('auth.login')}
|
|
</Button>
|
|
)
|
|
}
|
|
|
|
const profile = auth.user?.profile
|
|
const display =
|
|
profile?.preferred_username ||
|
|
profile?.name ||
|
|
profile?.email ||
|
|
profile?.sub ||
|
|
'user'
|
|
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<span className="inline-flex items-center gap-1 text-body text-ink">
|
|
<UserIcon size={14} weight="duotone" />
|
|
<span className="hidden sm:inline">{display}</span>
|
|
</span>
|
|
<IconButton
|
|
type="button"
|
|
icon={<SignOutIcon weight="bold" />}
|
|
label={t('auth.logout')}
|
|
onClick={() =>
|
|
auth.signoutRedirect().catch(() => {
|
|
// Если Keycloak недоступен — просто очищаем локальный state.
|
|
auth.removeUser()
|
|
})
|
|
}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|