fix and update

2026-06-29 22:51:25 +03:00
parent 885b07d76b
commit 57cb58347b
30 changed files with 799 additions and 187 deletions
--- a/apps/frontend/components/id/auth-provider.tsx
+++ b/apps/frontend/components/id/auth-provider.tsx
@@ -13,9 +13,10 @@ import {
  AuthTokens,
  ensureApiGatewayReady,
  fetchAuthSession,
-  getDeviceFingerprint,
+  buildAuthDevicePayload,
  IdentifyResponse,
  getApiErrorMessage,
+  isApiGatewayReady,
  isPinRequiredError,
  OtpSendResponse,
  PasswordlessAuthResponse,
@@ -93,10 +94,9 @@ function applySessionState(
    setters.activatePinLock(session.sessionId ?? '');
  } else {
    setters.clearPinLock();
-    const accessToken = window.localStorage.getItem(AUTH_TOKEN_KEY);
-    if (accessToken) {
-      void syncFedcmSession(accessToken);
-    }
+    void ensureApiGatewayReady().then(() => {
+      void syncFedcmSession();
+    });
  }
 }

@@ -169,10 +169,10 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
      void ensureApiGatewayReady().finally(() => {
        initialBootstrapDoneRef.current = true;
        setIsLoading(false);
+        if (auth.pinVerified !== false) {
+          void syncFedcmSession(auth.accessToken);
+        }
      });
-      if (auth.pinVerified !== false) {
-        void syncFedcmSession(auth.accessToken);
-      }
    },
    [clearPinLock]
  );
@@ -277,10 +277,11 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
          window.localStorage.getItem(AUTH_TOKEN_KEY) || window.localStorage.getItem(AUTH_REFRESH_KEY)
        );
        if (hasSession && isInitialBootstrap) {
-          try {
-            await ensureApiGatewayReady();
-          } catch {
-            // Продолжаем даже если gateway не ответил в срок прогрева.
+          const bootstrapDeadline = Date.now() + 120_000;
+          while (!isApiGatewayReady() && Date.now() < bootstrapDeadline) {
+            await ensureApiGatewayReady(true);
+            if (isApiGatewayReady()) break;
+            await new Promise((resolve) => setTimeout(resolve, 800));
          }
        }
        if (isInitialBootstrap) {
@@ -339,9 +340,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
        body: JSON.stringify({
          login: loginValue,
          password,
-          fingerprint: getDeviceFingerprint(),
-          deviceName: navigator.userAgent.includes('Windows') ? 'Windows Browser' : 'Browser',
-          deviceType: 'WEB'
+          ...buildAuthDevicePayload(),
        })
      });
      if (auth.pinVerified) {
@@ -376,9 +375,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
        body: JSON.stringify({
          recipient,
          code,
-          fingerprint: getDeviceFingerprint(),
-          deviceName: navigator.userAgent.includes('Windows') ? 'Windows Browser' : 'Browser',
-          deviceType: 'WEB'
+          ...buildAuthDevicePayload(),
        })
      });
      if (response.auth?.pinVerified) {
@@ -399,9 +396,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
        body: JSON.stringify({
          login: loginValue,
          password: passwordValue,
-          fingerprint: getDeviceFingerprint(),
-          deviceName: navigator.userAgent.includes('Windows') ? 'Windows Browser' : 'Browser',
-          deviceType: 'WEB'
+          ...buildAuthDevicePayload(),
        })
      });
      if (auth.pinVerified) {
@@ -422,9 +417,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
        body: JSON.stringify({
          username,
          password: passwordValue,
-          fingerprint: getDeviceFingerprint(),
-          deviceName: navigator.userAgent.includes('Windows') ? 'Windows Browser' : 'Browser',
-          deviceType: 'WEB'
+          ...buildAuthDevicePayload(),
        })
      });
      if (auth.pinVerified) {
@@ -443,9 +436,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
      method: 'POST',
      body: JSON.stringify({
        recipient,
-        fingerprint: getDeviceFingerprint(),
-        deviceName: navigator.userAgent.includes('Windows') ? 'Windows Browser' : 'Browser',
-        deviceType: 'WEB'
+        ...buildAuthDevicePayload(),
      })
    });
    return response.totpChallengeToken;
--- a/apps/frontend/components/id/avatar-upload.tsx
+++ b/apps/frontend/components/id/avatar-upload.tsx
@@ -3,6 +3,7 @@
 import { useRef, useState } from 'react';
 import { Camera, Loader2 } from 'lucide-react';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Skeleton } from '@/components/ui/skeleton';
 import { useToast } from '@/components/id/toast-provider';
 import { useAvatarUrl } from '@/hooks/use-avatar-url';
 import { apiFetch, getApiErrorMessage, uploadMediaObject } from '@/lib/api';
@@ -41,7 +42,7 @@ export function AvatarUpload({
  const inputRef = useRef<HTMLInputElement>(null);
  const { showToast } = useToast();
  const [isUploading, setIsUploading] = useState(false);
-  const { avatarUrl, refreshAvatarUrl } = useAvatarUrl(userId, hasAvatar, token);
+  const { avatarUrl, isAvatarLoading, refreshAvatarUrl } = useAvatarUrl(userId, hasAvatar, token);
  const initials = (displayName ?? '').slice(0, 2).toUpperCase() || 'ID';

  async function handleFileChange(event: React.ChangeEvent<HTMLInputElement>) {
@@ -99,8 +100,16 @@ export function AvatarUpload({
        onClick={openFilePicker}
      >
        <Avatar className={cn('border-4 border-white shadow-xl', className)}>
-          {avatarUrl ? <AvatarImage src={avatarUrl} alt={displayName ?? 'Аватар'} /> : null}
-          <AvatarFallback className="bg-[linear-gradient(135deg,#6f58ff,#ffd2a8)] text-2xl">{initials}</AvatarFallback>
+          {isAvatarLoading && hasAvatar ? (
+            <AvatarFallback className="bg-transparent p-0">
+              <Skeleton className="h-full w-full rounded-full" />
+            </AvatarFallback>
+          ) : (
+            <>
+              {avatarUrl ? <AvatarImage src={avatarUrl} alt={displayName ?? 'Аватар'} /> : null}
+              <AvatarFallback className="bg-[linear-gradient(135deg,#6f58ff,#ffd2a8)] text-2xl">{initials}</AvatarFallback>
+            </>
+          )}
        </Avatar>
        <span
          className={cn(
@@ -146,14 +155,22 @@ export function AvatarDisplay({
  verificationIcon?: string | null;
  badgeSize?: 'xs' | 'sm' | 'md' | 'lg';
 }) {
-  const { avatarUrl } = useAvatarUrl(userId, hasAvatar, token);
+  const { avatarUrl, isAvatarLoading } = useAvatarUrl(userId, hasAvatar, token);
  const initials = (displayName ?? '').slice(0, 2).toUpperCase() || 'ID';

  return (
    <div className="relative inline-flex shrink-0">
      <Avatar className={className}>
-        {avatarUrl ? <AvatarImage src={avatarUrl} alt={displayName ?? 'Аватар'} /> : null}
-        <AvatarFallback className="bg-[linear-gradient(135deg,#6f58ff,#ffd2a8)]">{initials}</AvatarFallback>
+        {isAvatarLoading && hasAvatar ? (
+          <AvatarFallback className="bg-transparent p-0">
+            <Skeleton className="h-full w-full rounded-full" />
+          </AvatarFallback>
+        ) : (
+          <>
+            {avatarUrl ? <AvatarImage src={avatarUrl} alt={displayName ?? 'Аватар'} /> : null}
+            <AvatarFallback className="bg-[linear-gradient(135deg,#6f58ff,#ffd2a8)]">{initials}</AvatarFallback>
+          </>
+        )}
      </Avatar>
      {isVerified ? (
        <VerificationBadge
--- a/apps/frontend/components/id/user-avatar.tsx
+++ b/apps/frontend/components/id/user-avatar.tsx
@@ -1,6 +1,7 @@
 'use client';

 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Skeleton } from '@/components/ui/skeleton';
 import { VerificationBadge } from '@/components/id/verification-badge';
 import { useAvatarUrl } from '@/hooks/use-avatar-url';
 import { cn } from '@/lib/utils';
@@ -26,7 +27,7 @@ export function UserAvatar({
  badgeSize?: 'xs' | 'sm' | 'md' | 'lg';
  fallbackClassName?: string;
 }) {
-  const { avatarUrl } = useAvatarUrl(userId, hasAvatar, token);
+  const { avatarUrl, isAvatarLoading } = useAvatarUrl(userId, hasAvatar, token);
  const initials = (displayName ?? '')
    .split(' ')
    .map((part) => part[0])
@@ -37,10 +38,18 @@ export function UserAvatar({
  return (
    <div className="relative inline-flex shrink-0">
      <Avatar className={className}>
-        {avatarUrl ? <AvatarImage src={avatarUrl} alt={displayName ?? 'Аватар'} /> : null}
-        <AvatarFallback className={cn('bg-[linear-gradient(135deg,#6f58ff,#ffd2a8)] text-xs font-semibold', fallbackClassName)}>
-          {initials.slice(0, 2)}
-        </AvatarFallback>
+        {isAvatarLoading && hasAvatar ? (
+          <AvatarFallback className="bg-transparent p-0">
+            <Skeleton className="h-full w-full rounded-full" />
+          </AvatarFallback>
+        ) : (
+          <>
+            {avatarUrl ? <AvatarImage src={avatarUrl} alt={displayName ?? 'Аватар'} /> : null}
+            <AvatarFallback className={cn('bg-[linear-gradient(135deg,#6f58ff,#ffd2a8)] text-xs font-semibold', fallbackClassName)}>
+              {initials.slice(0, 2)}
+            </AvatarFallback>
+          </>
+        )}
      </Avatar>
      {isVerified ? (
        <VerificationBadge