mirror of
https://github.com/andwati/zitadel.git
synced 2026-11-08 15:15:12 +00:00
chore: deps update (#11968)
# Which Problems Are Solved This pr updates major and minor dependencies and is the first step on getting our dependabot alerts cut down. # How the Problems Are Solved Depedency updates across the board eg: - Upgrade Angular to v21 - Upgrade next.js to v16.2 - Upgrade tailwind to v4 in the login - Upgrade vitest to v4 in the login This is an uncompleted list refer to the changed files for a full overview of all the updates. # Additional Changes Migrated all control flow in the console to the modern control flow syntax. Fixed the dependsOn setting for the @zitadel/login:test-unit nx target. # Additional Context - Closes https://github.com/zitadel/zitadel/issues/11274 --------- Co-authored-by: Max Peintner <[email protected]>
This commit is contained in:
Ramon
Max Peintner
@@ -22,7 +22,7 @@ export function AddressBar({ domain }: Props) {
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex space-x-1 text-sm font-medium">
|
||||
<div className="max-w-[150px] overflow-hidden text-ellipsis px-2 text-gray-500">
|
||||
<div className="max-w-[150px] overflow-hidden px-2 text-ellipsis text-gray-500">
|
||||
<span className="whitespace-nowrap">{domain}</span>
|
||||
</div>
|
||||
{pathname ? (
|
||||
|
||||
@@ -26,8 +26,8 @@ export function Alert({ children, type = AlertType.ALERT }: Props) {
|
||||
[neutral]: type === AlertType.INFO,
|
||||
})}
|
||||
>
|
||||
{type === AlertType.ALERT && <ExclamationTriangleIcon className="ml-2 mr-2 h-5 w-5 flex-shrink-0" />}
|
||||
{type === AlertType.INFO && <InformationCircleIcon className="ml-2 mr-2 h-5 w-5 flex-shrink-0" />}
|
||||
{type === AlertType.ALERT && <ExclamationTriangleIcon className="mr-2 ml-2 h-5 w-5 flex-shrink-0" />}
|
||||
{type === AlertType.INFO && <InformationCircleIcon className="mr-2 ml-2 h-5 w-5 flex-shrink-0" />}
|
||||
<span className="w-full text-sm">{children}</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -26,7 +26,7 @@ export function AppAvatar({ appName, imageUrl, shadow }: AvatarProps) {
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`dark:group-focus:ring-offset-blue dark:text-blue pointer-events-none flex h-[100px] w-[100px] cursor-default items-center justify-center rounded-full bg-primary-light-500 text-primary-light-contrast-500 transition-colors duration-200 hover:bg-primary-light-400 group-focus:outline-none group-focus:ring-2 group-focus:ring-primary-light-200 dark:bg-primary-dark-300 dark:text-primary-dark-contrast-300 hover:dark:bg-primary-dark-500 dark:group-focus:ring-primary-dark-400 ${
|
||||
className={`dark:group-focus:ring-offset-blue dark:text-blue bg-primary-light-500 text-primary-light-contrast-500 hover:bg-primary-light-400 group-focus:ring-primary-light-200 dark:bg-primary-dark-300 dark:text-primary-dark-contrast-300 hover:dark:bg-primary-dark-500 dark:group-focus:ring-primary-dark-400 pointer-events-none flex h-[100px] w-[100px] cursor-default items-center justify-center rounded-full transition-colors duration-200 group-focus:ring-2 group-focus:outline-none ${
|
||||
shadow ? "shadow" : ""
|
||||
}`}
|
||||
style={resolvedTheme === "light" ? avatarStyleLight : avatarStyleDark}
|
||||
@@ -36,7 +36,7 @@ export function AppAvatar({ appName, imageUrl, shadow }: AvatarProps) {
|
||||
height={48}
|
||||
width={48}
|
||||
alt="avatar"
|
||||
className="h-full w-full rounded-full border border-divider-light dark:border-divider-dark"
|
||||
className="border-divider-light dark:border-divider-dark h-full w-full rounded-full border"
|
||||
src={imageUrl}
|
||||
/>
|
||||
) : (
|
||||
|
||||
@@ -181,7 +181,7 @@ export const PASSWORD = (alreadyAdded: boolean, link: string) => {
|
||||
|
||||
function Setup() {
|
||||
return (
|
||||
<div className="absolute right-2 top-0 transform">
|
||||
<div className="absolute top-0 right-2 transform">
|
||||
<StateBadge evenPadding={true} state={BadgeState.Success}>
|
||||
<CheckIcon className="h-4 w-4" />
|
||||
</StateBadge>
|
||||
|
||||
@@ -29,11 +29,11 @@ export function AuthenticationMethodRadio({
|
||||
value={method}
|
||||
data-testid={method + "-radio"}
|
||||
className={({ focus, checked }) =>
|
||||
`${focus ? "ring-2 ring-primary-light-500 ring-opacity-60 dark:ring-white/20" : ""} ${
|
||||
`${focus ? "ring-primary-light-500 ring-opacity-60 ring-2 dark:ring-white/20" : ""} ${
|
||||
checked
|
||||
? "bg-background-light-400 ring-2 ring-primary-light-500 dark:bg-background-dark-400 dark:ring-primary-dark-500"
|
||||
? "bg-background-light-400 ring-primary-light-500 dark:bg-background-dark-400 dark:ring-primary-dark-500 ring-2"
|
||||
: "bg-background-light-400 dark:bg-background-dark-400"
|
||||
} boder-divider-light relative flex h-full flex-1 cursor-pointer rounded-lg border px-5 py-4 hover:shadow-lg focus:outline-none dark:border-divider-dark dark:hover:bg-white/10`
|
||||
} boder-divider-light dark:border-divider-dark relative flex h-full flex-1 cursor-pointer rounded-lg border px-5 py-4 hover:shadow-lg focus:outline-none dark:hover:bg-white/10`
|
||||
}
|
||||
>
|
||||
<div className="flex w-full flex-col items-center text-sm">
|
||||
|
||||
@@ -54,7 +54,7 @@ export function Avatar({ size = "base", name, loginName, imageUrl, shadow }: Ava
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`dark:group-focus:ring-offset-blue dark:text-blue pointer-events-none flex h-full w-full flex-shrink-0 cursor-default items-center justify-center bg-primary-light-500 text-primary-light-contrast-500 transition-colors duration-200 hover:bg-primary-light-400 group-focus:outline-none group-focus:ring-2 group-focus:ring-primary-light-200 dark:bg-primary-dark-300 dark:text-primary-dark-contrast-300 hover:dark:bg-primary-dark-500 dark:group-focus:ring-primary-dark-400 ${avatarRoundness} ${
|
||||
className={`dark:group-focus:ring-offset-blue dark:text-blue bg-primary-light-500 text-primary-light-contrast-500 hover:bg-primary-light-400 group-focus:ring-primary-light-200 dark:bg-primary-dark-300 dark:text-primary-dark-contrast-300 hover:dark:bg-primary-dark-500 dark:group-focus:ring-primary-dark-400 pointer-events-none flex h-full w-full flex-shrink-0 cursor-default items-center justify-center transition-colors duration-200 group-focus:ring-2 group-focus:outline-none ${avatarRoundness} ${
|
||||
shadow ? "shadow" : ""
|
||||
} ${
|
||||
size === "large"
|
||||
@@ -72,7 +72,7 @@ export function Avatar({ size = "base", name, loginName, imageUrl, shadow }: Ava
|
||||
height={48}
|
||||
width={48}
|
||||
alt="avatar"
|
||||
className={`h-full w-full border border-divider-light dark:border-divider-dark ${avatarRoundness}`}
|
||||
className={`border-divider-light dark:border-divider-dark h-full w-full border ${avatarRoundness}`}
|
||||
src={imageUrl}
|
||||
/>
|
||||
) : (
|
||||
|
||||
@@ -56,7 +56,7 @@ export const Boundary = ({
|
||||
})}
|
||||
>
|
||||
<div
|
||||
className={clsx("absolute -top-2 flex space-x-1 text-[9px] uppercase leading-4 tracking-widest", {
|
||||
className={clsx("absolute -top-2 flex space-x-1 text-[9px] leading-4 tracking-widest uppercase", {
|
||||
"left-3 lg:left-5": size === "small",
|
||||
"left-4 lg:left-9": size === "default",
|
||||
})}
|
||||
|
||||
@@ -31,7 +31,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Che
|
||||
disabled={disabled}
|
||||
type="checkbox"
|
||||
className={classNames(
|
||||
"form-checkbox rounded border-gray-300 text-primary-light-500 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 focus:ring-offset-0 dark:text-primary-dark-500",
|
||||
"form-checkbox text-primary-light-500 focus:ring-opacity-50 dark:text-primary-dark-500 rounded border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-offset-0",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -83,7 +83,7 @@ export function ChooseSecondFactorToSetup({
|
||||
</div>
|
||||
{!force && (
|
||||
<button
|
||||
className="text-sm transition-all hover:text-primary-light-500 dark:hover:text-primary-dark-500"
|
||||
className="hover:text-primary-light-500 dark:hover:text-primary-dark-500 text-sm transition-all"
|
||||
onClick={async () => {
|
||||
const skipResponse = await skipMFAAndContinueWithNextUrl({
|
||||
userId,
|
||||
|
||||
@@ -48,7 +48,7 @@ export function ConsentScreen({
|
||||
<div className="flex w-full flex-col items-center space-y-4 pt-4">
|
||||
<ul className="w-full list-disc space-y-2">
|
||||
{scopes?.length === 0 && (
|
||||
<span className="flex w-full flex-row items-center rounded-md border border-divider-light bg-background-light-400 px-4 py-2 text-sm transition-all dark:bg-background-dark-400">
|
||||
<span className="border-divider-light bg-background-light-400 dark:bg-background-dark-400 flex w-full flex-row items-center rounded-md border px-4 py-2 text-sm transition-all">
|
||||
<Translated i18nKey="device.scope.openid" namespace="device" />
|
||||
</span>
|
||||
)}
|
||||
@@ -62,7 +62,7 @@ export function ConsentScreen({
|
||||
return (
|
||||
<li
|
||||
key={s}
|
||||
className="flex w-full flex-row items-center rounded-md border border-divider-light bg-background-light-400 px-4 py-2 text-sm transition-all dark:bg-background-dark-400"
|
||||
className="border-divider-light bg-background-light-400 dark:bg-background-dark-400 flex w-full flex-row items-center rounded-md border px-4 py-2 text-sm transition-all"
|
||||
>
|
||||
<span>{resolvedDescription}</span>
|
||||
</li>
|
||||
|
||||
@@ -69,7 +69,7 @@ export function DynamicTheme({
|
||||
{hasLeftRightStructure && (
|
||||
<div className="flex flex-col items-start space-y-4 text-left">
|
||||
{/* Apply larger styling to the content */}
|
||||
<div className="space-y-6 [&_h1]:text-left [&_h1]:text-4xl [&_h1]:leading-tight [&_h1]:text-gray-900 [&_h1]:dark:text-white [&_h1]:lg:text-4xl [&_p]:text-left [&_p]:leading-relaxed [&_p]:text-gray-700 [&_p]:dark:text-gray-300">
|
||||
<div className="space-y-6 [&_h1]:text-left [&_h1]:text-4xl [&_h1]:leading-tight [&_h1]:text-gray-900 [&_h1]:lg:text-4xl [&_h1]:dark:text-white [&_p]:text-left [&_p]:leading-relaxed [&_p]:text-gray-700 [&_p]:dark:text-gray-300">
|
||||
{leftContent}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -33,7 +33,7 @@ export const BaseButton = forwardRef<HTMLButtonElement, SignInWithIdentityProvid
|
||||
ref={ref}
|
||||
disabled={formStatus.pending}
|
||||
className={clsx(
|
||||
`flex flex-1 cursor-pointer flex-row items-center px-4 text-sm text-text-light-500 outline-none transition-all hover:border-black focus:border-primary-light-500 dark:text-text-dark-500 hover:dark:border-white focus:dark:border-primary-dark-500`,
|
||||
`text-text-light-500 focus:border-primary-light-500 dark:text-text-dark-500 focus:dark:border-primary-dark-500 flex flex-1 cursor-pointer flex-row items-center px-4 text-sm transition-all outline-none hover:border-black hover:dark:border-white`,
|
||||
buttonRoundness,
|
||||
idpButtonAppearance,
|
||||
`bg-background-light-400 dark:bg-background-dark-500`, // Keep background as fallback for non-glass themes
|
||||
|
||||
@@ -59,7 +59,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
|
||||
const actualRoundness = roundness || getDefaultInputRoundness();
|
||||
|
||||
return (
|
||||
<label className="relative flex flex-col text-12px text-input-light-label dark:text-input-dark-label">
|
||||
<label className="text-12px text-input-light-label dark:text-input-dark-label relative flex flex-col">
|
||||
<span className={`mb-1 leading-3 ${error ? "text-warn-light-500 dark:text-warn-dark-500" : ""}`}>
|
||||
{label} {required && "*"}
|
||||
</span>
|
||||
@@ -80,7 +80,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
|
||||
{suffix && (
|
||||
<span
|
||||
className={clsx(
|
||||
"absolute bottom-[22px] right-[3px] z-30 translate-y-1/2 transform bg-background-light-500 p-2 dark:bg-background-dark-500",
|
||||
"bg-background-light-500 dark:bg-background-dark-500 absolute right-[3px] bottom-[22px] z-30 translate-y-1/2 transform p-2",
|
||||
// Extract just the roundness part for the suffix (no padding)
|
||||
actualRoundness.split(" ")[0], // Take only the first part (rounded-full, rounded-md, etc.)
|
||||
)}
|
||||
@@ -89,7 +89,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
|
||||
</span>
|
||||
)}
|
||||
|
||||
<div className="leading-14.5px h-14.5px flex flex-row items-center text-12px text-warn-light-500 dark:text-warn-dark-500">
|
||||
<div className="leading-14.5px h-14.5px text-12px text-warn-light-500 dark:text-warn-dark-500 flex flex-row items-center">
|
||||
<span>{error ? error : " "}</span>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -45,19 +45,19 @@ export function LanguageSwitcher({ languages }: { languages: Lang[] }) {
|
||||
<Listbox value={selected} onChange={handleChange}>
|
||||
<ListboxButton
|
||||
className={clsx(
|
||||
`relative block w-full py-1.5 pl-3 pr-8 text-left text-sm/6 text-black dark:text-white ${switcherRoundness}`,
|
||||
`relative block w-full py-1.5 pr-8 pl-3 text-left text-sm/6 text-black dark:text-white ${switcherRoundness}`,
|
||||
cardAppearance,
|
||||
"focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-white/25",
|
||||
)}
|
||||
>
|
||||
{selected.name}
|
||||
<ChevronDownIcon className="group pointer-events-none absolute right-2.5 top-2.5 size-4" aria-hidden="true" />
|
||||
<ChevronDownIcon className="group pointer-events-none absolute top-2.5 right-2.5 size-4" aria-hidden="true" />
|
||||
</ListboxButton>
|
||||
<ListboxOptions
|
||||
anchor="bottom"
|
||||
transition
|
||||
className={clsx(
|
||||
`w-[var(--button-width)] rounded-md border border-black/5 bg-background-light-500 p-1 [--anchor-gap:var(--spacing-1)] focus:outline-none dark:border-white/5 dark:bg-background-dark-500`,
|
||||
`bg-background-light-500 dark:bg-background-dark-500 w-[var(--button-width)] rounded-md border border-black/5 p-1 [--anchor-gap:var(--spacing-1)] focus:outline-none dark:border-white/5`,
|
||||
"transition duration-100 ease-in data-[leave]:data-[closed]:opacity-0",
|
||||
)}
|
||||
>
|
||||
@@ -65,7 +65,7 @@ export function LanguageSwitcher({ languages }: { languages: Lang[] }) {
|
||||
<ListboxOption
|
||||
key={lang.code}
|
||||
value={lang}
|
||||
className={`group flex cursor-default select-none items-center gap-2 px-3 py-1.5 data-[focus]:bg-black/10 dark:data-[focus]:bg-white/10 ${switcherRoundness}`}
|
||||
className={`group flex cursor-default items-center gap-2 px-3 py-1.5 select-none data-[focus]:bg-black/10 dark:data-[focus]:bg-white/10 ${switcherRoundness}`}
|
||||
>
|
||||
<CheckIcon className="invisible size-4 group-data-[selected]:visible" />
|
||||
<div className="text-sm/6 text-black dark:text-white">{lang.name}</div>
|
||||
|
||||
@@ -95,7 +95,7 @@ export function LDAPUsernamePasswordForm({
|
||||
data-testid="username-text-input"
|
||||
/>
|
||||
|
||||
<div className={`${error && "transform-gpu animate-shake"}`}>
|
||||
<div className={`${error && "animate-shake transform-gpu"}`}>
|
||||
<TextInput
|
||||
type="password"
|
||||
autoComplete="password"
|
||||
|
||||
@@ -223,7 +223,7 @@ export function LoginOTP({ host, loginName, sessionId, requestId, organization,
|
||||
aria-label="Resend OTP Code"
|
||||
disabled={loading}
|
||||
type="button"
|
||||
className="ml-4 cursor-pointer text-primary-light-500 hover:text-primary-light-400 disabled:cursor-default disabled:text-gray-400 dark:text-primary-dark-500 hover:dark:text-primary-dark-400 dark:disabled:text-gray-700"
|
||||
className="text-primary-light-500 hover:text-primary-light-400 dark:text-primary-dark-500 hover:dark:text-primary-dark-400 ml-4 cursor-pointer disabled:cursor-default disabled:text-gray-400 dark:disabled:text-gray-700"
|
||||
onClick={async () => {
|
||||
setLoading(true);
|
||||
const response = await updateSessionForOTPChallenge();
|
||||
|
||||
@@ -29,7 +29,7 @@ function CheckIcon({ title }: { title: string }) {
|
||||
function CrossIcon({ title }: { title: string }) {
|
||||
return (
|
||||
<svg
|
||||
className="las la-times mr-2 h-6 w-6 flex-none text-lg text-warn-light-500 dark:text-warn-dark-500"
|
||||
className="las la-times text-warn-light-500 dark:text-warn-dark-500 mr-2 h-6 w-6 flex-none text-lg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
|
||||
@@ -112,7 +112,7 @@ export function PasswordForm({ loginSettings, loginName, organization, defaultOr
|
||||
<>
|
||||
{samlData && <AutoSubmitForm url={samlData.url} fields={samlData.fields} />}
|
||||
<form className="w-full">
|
||||
<div className={`${error && "transform-gpu animate-shake"}`}>
|
||||
<div className={`${error && "animate-shake transform-gpu"}`}>
|
||||
<TextInput
|
||||
type="password"
|
||||
autoComplete="password"
|
||||
@@ -123,7 +123,7 @@ export function PasswordForm({ loginSettings, loginName, organization, defaultOr
|
||||
/>
|
||||
{!loginSettings?.hidePasswordReset && (
|
||||
<button
|
||||
className="text-sm transition-all hover:text-primary-light-500 dark:hover:text-primary-dark-500"
|
||||
className="hover:text-primary-light-500 dark:hover:text-primary-dark-500 text-sm transition-all"
|
||||
onClick={() => resetPasswordAndContinue()}
|
||||
type="button"
|
||||
disabled={loading}
|
||||
|
||||
@@ -32,7 +32,7 @@ export function PrivacyPolicyCheckboxes({ legal, onChange }: Props) {
|
||||
|
||||
return (
|
||||
<>
|
||||
<p className="mt-4 flex flex-row items-center text-sm text-text-light-secondary-500 dark:text-text-dark-secondary-500">
|
||||
<p className="text-text-light-secondary-500 dark:text-text-dark-secondary-500 mt-4 flex flex-row items-center text-sm">
|
||||
<Translated i18nKey="agreeTo" namespace="register" />
|
||||
{legal?.helpLink && (
|
||||
<span>
|
||||
@@ -73,7 +73,7 @@ export function PrivacyPolicyCheckboxes({ legal, onChange }: Props) {
|
||||
/>
|
||||
|
||||
<div className="mr-4 w-[28rem]">
|
||||
<p className="text-sm text-text-light-500 dark:text-text-dark-500">
|
||||
<p className="text-text-light-500 dark:text-text-dark-500 text-sm">
|
||||
<Link href={legal.tosLink} className="underline" target="_blank">
|
||||
<Translated i18nKey="termsOfService" namespace="register" />
|
||||
</Link>
|
||||
@@ -99,7 +99,7 @@ export function PrivacyPolicyCheckboxes({ legal, onChange }: Props) {
|
||||
/>
|
||||
|
||||
<div className="mr-4 w-[28rem]">
|
||||
<p className="text-sm text-text-light-500 dark:text-text-dark-500">
|
||||
<p className="text-text-light-500 dark:text-text-dark-500 text-sm">
|
||||
<Link href={legal.privacyPolicyLink} className="underline" target="_blank">
|
||||
<Translated i18nKey="privacyPolicy" namespace="register" />
|
||||
</Link>
|
||||
|
||||
@@ -159,7 +159,7 @@ export function RegisterForm({
|
||||
{/* show chooser if both methods are allowed */}
|
||||
{loginSettings && loginSettings.allowLocalAuthentication && loginSettings.passkeysType == PasskeysType.ALLOWED && (
|
||||
<>
|
||||
<p className="ztdl-p mb-6 mt-4 block text-left">
|
||||
<p className="ztdl-p mt-4 mb-6 block text-left">
|
||||
<Translated i18nKey="selectMethod" namespace="register" />
|
||||
</p>
|
||||
|
||||
|
||||
@@ -28,7 +28,7 @@ const SelfServiceItem = ({ name, link }: { name: string; link: string }) => {
|
||||
<Link
|
||||
prefetch={false}
|
||||
href={link}
|
||||
className="group flex w-full flex-row items-center rounded-md border border-divider-light bg-background-light-400 px-4 py-2 transition-all hover:shadow-lg dark:bg-background-dark-400 dark:hover:bg-white/10"
|
||||
className="group border-divider-light bg-background-light-400 dark:bg-background-dark-400 flex w-full flex-row items-center rounded-md border px-4 py-2 transition-all hover:shadow-lg dark:hover:bg-white/10"
|
||||
>
|
||||
{name}
|
||||
</Link>
|
||||
|
||||
@@ -47,7 +47,7 @@ export function SessionClearItem({ session, reload }: { session: Session; reload
|
||||
reload();
|
||||
});
|
||||
}}
|
||||
className="group flex flex-row items-center rounded-md border border-divider-light bg-background-light-400 px-4 py-2 transition-all hover:shadow-lg dark:bg-background-dark-400 dark:hover:bg-white/10"
|
||||
className="group border-divider-light bg-background-light-400 dark:bg-background-dark-400 flex flex-row items-center rounded-md border px-4 py-2 transition-all hover:shadow-lg dark:hover:bg-white/10"
|
||||
>
|
||||
<div className="pr-4">
|
||||
<Avatar
|
||||
@@ -59,9 +59,9 @@ export function SessionClearItem({ session, reload }: { session: Session; reload
|
||||
|
||||
<div className="flex flex-col items-start overflow-hidden">
|
||||
<span className="">{session.factors?.user?.displayName}</span>
|
||||
<span className="text-ellipsis text-xs opacity-80">{session.factors?.user?.loginName}</span>
|
||||
<span className="text-xs text-ellipsis opacity-80">{session.factors?.user?.loginName}</span>
|
||||
{valid ? (
|
||||
<span className="text-ellipsis text-xs opacity-80">
|
||||
<span className="text-xs text-ellipsis opacity-80">
|
||||
{verifiedAt && (
|
||||
<Translated
|
||||
i18nKey="verifiedAt"
|
||||
@@ -72,7 +72,7 @@ export function SessionClearItem({ session, reload }: { session: Session; reload
|
||||
</span>
|
||||
) : (
|
||||
verifiedAt && (
|
||||
<span className="text-ellipsis text-xs opacity-80">
|
||||
<span className="text-xs text-ellipsis opacity-80">
|
||||
expired {session.expirationDate && moment(timestampDate(session.expirationDate)).fromNow()}
|
||||
</span>
|
||||
)
|
||||
@@ -81,7 +81,7 @@ export function SessionClearItem({ session, reload }: { session: Session; reload
|
||||
|
||||
<span className="flex-grow"></span>
|
||||
<div className="relative flex flex-row items-center">
|
||||
<div className="mr-6 flex hidden items-center justify-center rounded-full bg-[#ff0000]/10 px-2 py-[2px] text-xs text-warn-light-500 transition-all group-hover:block dark:bg-[#ff0000]/10 dark:text-warn-dark-500">
|
||||
<div className="text-warn-light-500 dark:text-warn-dark-500 mr-6 flex hidden items-center justify-center rounded-full bg-[#ff0000]/10 px-2 py-[2px] text-xs transition-all group-hover:block dark:bg-[#ff0000]/10">
|
||||
<Translated i18nKey="clear" namespace="logout" />
|
||||
</div>
|
||||
|
||||
|
||||
@@ -92,7 +92,7 @@ export function SessionItem({ session, reload, requestId }: { session: Session;
|
||||
}
|
||||
}
|
||||
}}
|
||||
className="group flex flex-row items-center rounded-md border border-divider-light bg-background-light-400 px-4 py-2 transition-all hover:shadow-lg dark:bg-background-dark-400 dark:hover:bg-white/10"
|
||||
className="group border-divider-light bg-background-light-400 dark:bg-background-dark-400 flex flex-row items-center rounded-md border px-4 py-2 transition-all hover:shadow-lg dark:hover:bg-white/10"
|
||||
>
|
||||
<div className="pr-4">
|
||||
<Avatar
|
||||
@@ -104,15 +104,15 @@ export function SessionItem({ session, reload, requestId }: { session: Session;
|
||||
|
||||
<div className="flex flex-col items-start overflow-hidden">
|
||||
<span className="">{session.factors?.user?.displayName}</span>
|
||||
<span className="text-ellipsis text-xs opacity-80">{session.factors?.user?.loginName}</span>
|
||||
<span className="text-xs text-ellipsis opacity-80">{session.factors?.user?.loginName}</span>
|
||||
{valid ? (
|
||||
<span className="text-ellipsis text-xs opacity-80">
|
||||
<span className="text-xs text-ellipsis opacity-80">
|
||||
<Translated i18nKey="verified" namespace="accounts" />{" "}
|
||||
{verifiedAt && moment(timestampDate(verifiedAt)).fromNow()}
|
||||
</span>
|
||||
) : (
|
||||
verifiedAt && (
|
||||
<span className="text-ellipsis text-xs opacity-80">
|
||||
<span className="text-xs text-ellipsis opacity-80">
|
||||
<Translated i18nKey="expired" namespace="accounts" />{" "}
|
||||
{session.expirationDate && moment(timestampDate(session.expirationDate)).fromNow()}
|
||||
</span>
|
||||
@@ -129,7 +129,7 @@ export function SessionItem({ session, reload, requestId }: { session: Session;
|
||||
)}
|
||||
|
||||
<XCircleIcon
|
||||
className="h-5 w-5 opacity-50 transition-all hover:opacity-100 group-hover:block sm:hidden"
|
||||
className="h-5 w-5 opacity-50 transition-all group-hover:block hover:opacity-100 sm:hidden"
|
||||
onClick={async (event: React.MouseEvent) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
@@ -143,7 +143,7 @@ export function SessionItem({ session, reload, requestId }: { session: Session;
|
||||
{valid && session.expirationDate && (
|
||||
<Tooltip.Portal>
|
||||
<Tooltip.Content
|
||||
className="z-50 select-none rounded-md border bg-background-light-500 px-3 py-2 text-xs text-black shadow-xl dark:border-white/20 dark:bg-background-dark-500 dark:text-white"
|
||||
className="bg-background-light-500 dark:bg-background-dark-500 z-50 rounded-md border px-3 py-2 text-xs text-black shadow-xl select-none dark:border-white/20 dark:text-white"
|
||||
sideOffset={5}
|
||||
>
|
||||
Expires {moment(timestampDate(session.expirationDate)).fromNow()}
|
||||
|
||||
@@ -186,7 +186,7 @@ export function SetPasswordForm({
|
||||
aria-label="Resend OTP Code"
|
||||
disabled={loading}
|
||||
type="button"
|
||||
className="ml-4 cursor-pointer text-primary-light-500 hover:text-primary-light-400 disabled:cursor-default disabled:text-gray-400 dark:text-primary-dark-500 hover:dark:text-primary-dark-400 dark:disabled:text-gray-700"
|
||||
className="text-primary-light-500 hover:text-primary-light-400 dark:text-primary-dark-500 hover:dark:text-primary-dark-400 ml-4 cursor-pointer disabled:cursor-default disabled:text-gray-400 dark:disabled:text-gray-700"
|
||||
onClick={() => {
|
||||
resendCode();
|
||||
}}
|
||||
|
||||
@@ -2,7 +2,7 @@ import { ReactNode } from "react";
|
||||
|
||||
export function Skeleton({ children }: { children?: ReactNode }) {
|
||||
return (
|
||||
<div className="skeleton flex flex-row items-center justify-center rounded-lg bg-background-light-600 px-8 py-12 dark:bg-background-dark-600">
|
||||
<div className="skeleton bg-background-light-600 dark:bg-background-dark-600 flex flex-row items-center justify-center rounded-lg px-8 py-12">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -4,7 +4,7 @@ export const Spinner: FC<{ className?: string }> = ({ className = "" }) => {
|
||||
return (
|
||||
<svg
|
||||
role="status"
|
||||
className={`${className} inline-block animate-spin fill-primary-light-500 text-black/10 dark:fill-primary-dark-500 dark:text-white/10`}
|
||||
className={`${className} fill-primary-light-500 dark:fill-primary-dark-500 inline-block animate-spin text-black/10 dark:text-white/10`}
|
||||
viewBox="0 0 100 101"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
||||
@@ -17,7 +17,7 @@ export const Tab = ({ path, item: { slug, text } }: { path: string; item: Item }
|
||||
return (
|
||||
<Link
|
||||
href={href}
|
||||
className={clsx("mr-2 mt-2 rounded-lg px-3 py-1 text-sm font-medium", {
|
||||
className={clsx("mt-2 mr-2 rounded-lg px-3 py-1 text-sm font-medium", {
|
||||
"bg-gray-700 text-gray-100 hover:bg-gray-500 hover:text-white": !isActive,
|
||||
"bg-blue-500 text-white": isActive,
|
||||
})}
|
||||
|
||||
@@ -54,7 +54,8 @@ export const ThemeWrapper = ({ children, branding }: Props) => {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}, [branding?.themeMode, setNextTheme]);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [branding?.themeMode]);
|
||||
|
||||
return <div>{children}</div>;
|
||||
};
|
||||
|
||||
@@ -106,7 +106,7 @@ export function TotpRegister({ uri, loginName, sessionId, requestId, organizatio
|
||||
{uri && (
|
||||
<>
|
||||
<QRCodeSVG className="my-4 h-40 w-40 rounded-md bg-white p-2" value={uri} />
|
||||
<div className="my-2 mb-4 flex w-96 rounded-lg border border-divider-light px-4 py-2 pr-2 text-sm dark:border-divider-dark">
|
||||
<div className="border-divider-light dark:border-divider-dark my-2 mb-4 flex w-96 rounded-lg border px-4 py-2 pr-2 text-sm">
|
||||
<Link href={uri} target="_blank" className="flex-1 overflow-x-auto">
|
||||
{uri}
|
||||
</Link>
|
||||
|
||||
@@ -40,12 +40,12 @@ export function UserAvatar({ loginName, displayName, showDropdown, searchParams
|
||||
<div>
|
||||
<Avatar size="small" name={displayName ?? loginName ?? ""} loginName={loginName ?? ""} />
|
||||
</div>
|
||||
<span className="ml-4 max-w-[250px] overflow-hidden text-ellipsis pr-4 text-14px">{loginName}</span>
|
||||
<span className="text-14px ml-4 max-w-[250px] overflow-hidden pr-4 text-ellipsis">{loginName}</span>
|
||||
<span className="flex-grow"></span>
|
||||
{showDropdown && (
|
||||
<Link
|
||||
href={"/accounts?" + params}
|
||||
className={`ml-4 mr-1 flex items-center justify-center p-1 transition-all hover:bg-black/10 dark:hover:bg-white/10 ${userAvatarRoundness}`}
|
||||
className={`mr-1 ml-4 flex items-center justify-center p-1 transition-all hover:bg-black/10 dark:hover:bg-white/10 ${userAvatarRoundness}`}
|
||||
>
|
||||
<ChevronDownIcon className="h-4 w-4" />
|
||||
</Link>
|
||||
|
||||
@@ -115,7 +115,7 @@ export function UsernameForm({
|
||||
/>
|
||||
{allowRegister && (
|
||||
<button
|
||||
className="text-sm transition-all hover:text-primary-light-500 dark:hover:text-primary-dark-500"
|
||||
className="hover:text-primary-light-500 dark:hover:text-primary-dark-500 text-sm transition-all"
|
||||
onClick={() => {
|
||||
const registerParams = new URLSearchParams();
|
||||
if (organization) {
|
||||
|
||||
@@ -153,7 +153,7 @@ export function VerifyForm({ userId, loginName, organization, requestId, code, i
|
||||
aria-label="Resend Code"
|
||||
disabled={loading}
|
||||
type="button"
|
||||
className="ml-4 cursor-pointer text-primary-light-500 hover:text-primary-light-400 disabled:cursor-default disabled:text-gray-400 dark:text-primary-dark-500 hover:dark:text-primary-dark-400 dark:disabled:text-gray-700"
|
||||
className="text-primary-light-500 hover:text-primary-light-400 dark:text-primary-dark-500 hover:dark:text-primary-dark-400 ml-4 cursor-pointer disabled:cursor-default disabled:text-gray-400 dark:disabled:text-gray-700"
|
||||
onClick={() => {
|
||||
resendCode();
|
||||
}}
|
||||
|
||||
Reference in New Issue
Block a user