add image upload, fix styles

src/app/ui/inputs/vk-login.tsx

@@ -0,0 +1,114 @@
+'use client'
+
+import { Config, OneTap } from '@vkid/sdk';
+
+import { useEffect, useRef } from 'react';
+
+const VKAuthDynamic = () => {
+	const containerRef = useRef(null);
+	const isInitialized = useRef(false);
+
+	useEffect(() => {
+		// Динамическая загрузка SDK
+		const loadVKIDSDK = async () => {
+			try {
+				// Проверяем, не загружен ли уже SDK
+				if (window.VKIDSDK) return window.VKIDSDK;
+
+				const { default: VKID } = await import('@vkid/sdk');
+				window.VKIDSDK = VKID;
+				return VKID;
+			} catch (error) {
+				console.error('Failed to load VKID SDK:', error);
+				return null;
+			}
+		};
+
+		const initialize = async () => {
+			if (isInitialized.current) return;
+
+			const VKID = await loadVKIDSDK();
+			if (!VKID || !containerRef.current) return;
+
+			isInitialized.current = true;
+
+			try {
+				// Конфигурация
+				VKID.Config.init({
+					app: Number(process.env.NEXT_PUBLIC_VK_APP_ID) || 1111111,
+					redirectUrl: process.env.NEXT_PUBLIC_REDIRECT_URL || window.location.origin,
+					responseMode: VKID.ConfigResponseMode.Callback,
+					source: VKID.ConfigSource.LOWCODE,
+					scope: '',
+				});
+
+				// Создание и рендеринг виджета
+				const oneTap = new VKID.OneTap();
+
+				oneTap
+					.render({
+						container: containerRef.current,
+						showAlternativeLogin: true,
+					})
+					.on(VKID.WidgetEvents.ERROR, handleError)
+					.on(VKID.OneTapInternalEvents.LOGIN_SUCCESS, async (payload) => {
+						const { code, device_id } = payload;
+
+						try {
+							const authData = await VKID.Auth.exchangeCode(code, device_id);
+							handleSuccess(authData);
+						} catch (error) {
+							handleError(error);
+						}
+					});
+			} catch (error) {
+				console.error('VKID initialization error:', error);
+			}
+		};
+
+		initialize();
+
+		return () => {
+			// Очистка
+			isInitialized.current = false;
+		};
+	}, []);
+
+	const handleSuccess = async (data) => {
+		try {
+			// Отправка данных на ваш API endpoint
+			const response = await fetch('/api/auth/vk-callback', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify(data),
+			});
+
+			const result = await response.json();
+
+			if (response.ok) {
+				// Успешная авторизация
+				console.log('Authentication successful:', result);
+				// Перенаправление или обновление состояния
+				window.location.href = '/dashboard'; // Пример редиректа
+			} else {
+				handleError(result);
+			}
+		} catch (error) {
+			console.error('Server request failed:', error);
+		}
+	};
+
+	const handleError = (error) => {
+		console.error('Authentication error:', error);
+		// Можно показать уведомление пользователю
+	};
+
+	return (
+		<div>
+			<div ref={containerRef} />
+			vk
+		</div>
+	);
+};
+
+export default VKAuthDynamic;