From 8ca445e8c6677dd541c3d0e2d1a4262d5688491c Mon Sep 17 00:00:00 2001 From: smanylov Date: Tue, 9 Dec 2025 18:08:58 +0700 Subject: [PATCH] add icons, change styles --- package-lock.json | 16 --- package.json | 1 - src/app/pages/marking-audio/page.tsx | 5 +- src/app/pages/marking-photo/page.tsx | 5 +- src/app/pages/marking-video/page.tsx | 5 +- src/app/styles/dashboard.scss | 6 + src/app/styles/login.module.scss | 1 + src/app/styles/marking-pages.scss | 9 +- src/app/ui/icons/icons.tsx | 39 ++++++ src/app/ui/inputs/vk-login.tsx | 114 ------------------ .../ui/marking-page/protected-files-table.tsx | 15 +-- .../ui/marking-page/protection-summary.tsx | 2 +- src/app/ui/marking-page/test-section.tsx | 7 +- .../ui/marking-page/upload-section-image.tsx | 5 +- src/app/ui/register-form.tsx | 2 +- .../notifications-monitoring-settings.tsx | 10 -- .../ui/settings/personal-data-settings.tsx | 2 +- src/app/ui/settings/subscription-settings.tsx | 3 - 18 files changed, 81 insertions(+), 166 deletions(-) create mode 100644 src/app/ui/icons/icons.tsx delete mode 100644 src/app/ui/inputs/vk-login.tsx diff --git a/package-lock.json b/package-lock.json index 6d47047..5e29af6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,6 @@ "dependencies": { "@tailwindcss/postcss": "^4.1.17", "@tanstack/react-query": "^5.90.11", - "@vkid/sdk": "^2.6.2", "clsx": "^2.1.1", "jose": "^6.1.2", "next": "^16.0.7", @@ -2543,15 +2542,6 @@ "win32" ] }, - "node_modules/@vkid/sdk": { - "version": "2.6.2", - "resolved": "https://registry.npmjs.org/@vkid/sdk/-/sdk-2.6.2.tgz", - "integrity": "sha512-TCaGh6BvQNY8Atru0KJXdGuwm70y9WS2xBOLNripHjYMEcft0BMIiLKUvJ7pAeJOtk/15MvPaUIEmBS2Vt0NBg==", - "license": "MIT", - "dependencies": { - "crypto-js": "^4.1.1" - } - }, "node_modules/acorn": { "version": "8.15.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", @@ -3090,12 +3080,6 @@ "node": ">= 8" } }, - "node_modules/crypto-js": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz", - "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==", - "license": "MIT" - }, "node_modules/csstype": { "version": "3.2.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz", diff --git a/package.json b/package.json index 15747bf..d52f4d0 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,6 @@ "dependencies": { "@tailwindcss/postcss": "^4.1.17", "@tanstack/react-query": "^5.90.11", - "@vkid/sdk": "^2.6.2", "clsx": "^2.1.1", "jose": "^6.1.2", "next": "^16.0.7", diff --git a/src/app/pages/marking-audio/page.tsx b/src/app/pages/marking-audio/page.tsx index 7ffa2a9..8fcfa94 100644 --- a/src/app/pages/marking-audio/page.tsx +++ b/src/app/pages/marking-audio/page.tsx @@ -1,11 +1,14 @@ import ProtectedFilesTable from '@/app/ui/marking-page/protected-files-table'; import ProtectionSummary from '@/app/ui/marking-page/protection-summary'; import TestSection from '@/app/ui/marking-page/test-section'; +import { IconAudioFile } from '@/app/ui/icons/icons'; export default function Page() { return (
-

Защита аудио

+
+

Защита аудио

+
diff --git a/src/app/pages/marking-photo/page.tsx b/src/app/pages/marking-photo/page.tsx index ad4a0d0..9d2b8cf 100644 --- a/src/app/pages/marking-photo/page.tsx +++ b/src/app/pages/marking-photo/page.tsx @@ -2,11 +2,14 @@ import ProtectedFilesTable from '@/app/ui/marking-page/protected-files-table'; import ProtectionSummary from '@/app/ui/marking-page/protection-summary'; import TestSection from '@/app/ui/marking-page/test-section'; import UploadSectionImage from '@/app/ui/marking-page/upload-section-image'; +import { IconImageFile } from '@/app/ui/icons/icons'; export default function Page() { return (
-

Защита изображений

+
+

Защита изображений

+
diff --git a/src/app/pages/marking-video/page.tsx b/src/app/pages/marking-video/page.tsx index e8bf7be..c0fcde0 100644 --- a/src/app/pages/marking-video/page.tsx +++ b/src/app/pages/marking-video/page.tsx @@ -1,11 +1,14 @@ import ProtectedFilesTable from '@/app/ui/marking-page/protected-files-table'; import ProtectionSummary from '@/app/ui/marking-page/protection-summary'; import TestSection from '@/app/ui/marking-page/test-section'; +import { IconVideoFile } from '@/app/ui/icons/icons'; export default function Page() { return (
-

Защита видео

+
+

Защита видео

+
diff --git a/src/app/styles/dashboard.scss b/src/app/styles/dashboard.scss index ebe34ca..50b0655 100644 --- a/src/app/styles/dashboard.scss +++ b/src/app/styles/dashboard.scss @@ -6,6 +6,12 @@ align-items: center; color: #1f2937; + .icon { + margin-left: 5px; + margin-top: 5px; + color: #6366f1; + } + &::before { content: ''; width: 8px; diff --git a/src/app/styles/login.module.scss b/src/app/styles/login.module.scss index b54f42f..66c9e5e 100644 --- a/src/app/styles/login.module.scss +++ b/src/app/styles/login.module.scss @@ -127,6 +127,7 @@ cursor: pointer; transition: all 0.3s; margin-bottom: 20px; + margin: 20px 0 0 0; } .register-link { diff --git a/src/app/styles/marking-pages.scss b/src/app/styles/marking-pages.scss index 3752eba..988b7f1 100644 --- a/src/app/styles/marking-pages.scss +++ b/src/app/styles/marking-pages.scss @@ -177,6 +177,7 @@ padding: 20px 20px 0; color: #111827; font-size: 18px; + margin-bottom: 20px; } table { @@ -215,6 +216,7 @@ justify-content: center; margin-right: 12px; border: 2px solid #6366f1; + color: #6366f1; } &-title { @@ -261,8 +263,13 @@ } .btn-secondary { - background: #6b7280; + background: #6366f1; color: white; + padding: 5px 16px 5px 10px; + } + + .icon { + height: 18px; } .real-protection-badge { diff --git a/src/app/ui/icons/icons.tsx b/src/app/ui/icons/icons.tsx new file mode 100644 index 0000000..d9b324d --- /dev/null +++ b/src/app/ui/icons/icons.tsx @@ -0,0 +1,39 @@ +/* https://icon-sets.iconify.design/ic/ */ + +export function IconImageFile() { + return ( + + + + ) +} + +export function IconVideoFile() { + return ( + + + + ) +} + +export function IconAudioFile() { + return ( + + + + ) +} + +export function IconShield() { + return ( + + ) +} + +export function IconDownload() { + return ( + + + + ) +} \ No newline at end of file diff --git a/src/app/ui/inputs/vk-login.tsx b/src/app/ui/inputs/vk-login.tsx deleted file mode 100644 index cc78bc3..0000000 --- a/src/app/ui/inputs/vk-login.tsx +++ /dev/null @@ -1,114 +0,0 @@ -'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 ( -
-
- vk -
- ); -}; - -export default VKAuthDynamic; \ No newline at end of file diff --git a/src/app/ui/marking-page/protected-files-table.tsx b/src/app/ui/marking-page/protected-files-table.tsx index b289232..987854f 100644 --- a/src/app/ui/marking-page/protected-files-table.tsx +++ b/src/app/ui/marking-page/protected-files-table.tsx @@ -1,8 +1,9 @@ +import { IconShield, IconDownload } from '@/app/ui/icons/icons'; export default function ProtectedFilesTable() { return (

- 📋 Защищенные изображения (0) + Защищенные изображения (0)

@@ -21,7 +22,7 @@ export default function ProtectedFilesTable() {
- 🛡️ +
@@ -54,7 +55,7 @@ export default function ProtectedFilesTable() { @@ -62,7 +63,7 @@ export default function ProtectedFilesTable() {
- 🛡️ +
@@ -95,7 +96,7 @@ export default function ProtectedFilesTable() { @@ -103,7 +104,7 @@ export default function ProtectedFilesTable() {
- 🛡️ +
@@ -136,7 +137,7 @@ export default function ProtectedFilesTable() { diff --git a/src/app/ui/marking-page/protection-summary.tsx b/src/app/ui/marking-page/protection-summary.tsx index 6564ade..30a560b 100644 --- a/src/app/ui/marking-page/protection-summary.tsx +++ b/src/app/ui/marking-page/protection-summary.tsx @@ -1,7 +1,7 @@ export default function ProtectionSummary() { return (
-

📊 Статистика защиты

+

Статистика защиты

0
diff --git a/src/app/ui/marking-page/test-section.tsx b/src/app/ui/marking-page/test-section.tsx index 4ab4662..d22ed50 100644 --- a/src/app/ui/marking-page/test-section.tsx +++ b/src/app/ui/marking-page/test-section.tsx @@ -2,14 +2,11 @@ export default function TestSection() { return (

- 🔍 Проверить защиту изображения + Проверить защиту файла

-

- 🔍 -

При обнаружении защиты будет показана полная информация о владельце (WEBP НЕ поддерживается) diff --git a/src/app/ui/marking-page/upload-section-image.tsx b/src/app/ui/marking-page/upload-section-image.tsx index 337b5d6..af9420f 100644 --- a/src/app/ui/marking-page/upload-section-image.tsx +++ b/src/app/ui/marking-page/upload-section-image.tsx @@ -1,8 +1,8 @@ 'use client' import React, { useRef, useState, useCallback, ChangeEvent, DragEvent } from 'react'; +import { IconImageFile } from '@/app/ui/icons/icons'; -// Типы для выбранного файла interface SelectedFile { file: File; preview: string; @@ -101,7 +101,6 @@ export default function UploadSectionImage() { return; } - // Создание превью const objectUrl = URL.createObjectURL(file); setSelectedFile({ @@ -174,7 +173,7 @@ export default function UploadSectionImage() { return (

-

📷 Загрузить изображение для защиты

+

Загрузить изображение для защиты

{state?.error?.server}

)} - + ) } \ No newline at end of file diff --git a/src/app/ui/settings/notifications-monitoring-settings.tsx b/src/app/ui/settings/notifications-monitoring-settings.tsx index 39a3a7a..cb11841 100644 --- a/src/app/ui/settings/notifications-monitoring-settings.tsx +++ b/src/app/ui/settings/notifications-monitoring-settings.tsx @@ -28,16 +28,6 @@ export default function NotificationsMonitoringSettings() { Получать уведомления о нарушениях на email
-
- - Критически важные уведомления по SMS -
diff --git a/src/app/ui/settings/subscription-settings.tsx b/src/app/ui/settings/subscription-settings.tsx index 2d0689a..c40071f 100644 --- a/src/app/ui/settings/subscription-settings.tsx +++ b/src/app/ui/settings/subscription-settings.tsx @@ -40,9 +40,6 @@ export default function SubscriptionSettings() { -