frontdev/no-copy-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit styles, add vk-button and initial setup for vk auth

Browse Source
This commit is contained in:
smanylov
2025-12-15 17:32:30 +07:00
parent b0d1b954dd
commit 79df200ccb
9 changed files with 128 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+18 -2
View File
@@ -1,17 +1,18 @@
{
"name": "no-copy-frontend",
"version": "0.1.0",
"version": "0.2.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "no-copy-frontend",
"version": "0.1.0",
"version": "0.2.0",
"dependencies": {
"@tailwindcss/postcss": "^4.1.17",
"@tanstack/match-sorter-utils": "^8.19.4",
"@tanstack/react-query": "^5.90.11",
"@tanstack/react-table": "^8.21.3",
"@vkid/sdk": "^2.6.2",
"clsx": "^2.1.1",
"jose": "^6.1.2",
"next": "^16.0.7",
@@ -2953,6 +2954,15 @@
"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",
@@ -3491,6 +3501,12 @@
"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",
package.json
+2 -1
View File
@@ -1,6 +1,6 @@
{
"name": "no-copy-frontend",
"version": "0.1.0",
"version": "0.2.0",
"private": true,
"scripts": {
"dev": "next dev -p 2999",
@@ -13,6 +13,7 @@
"@tanstack/match-sorter-utils": "^8.19.4",
"@tanstack/react-query": "^5.90.11",
"@tanstack/react-table": "^8.21.3",
"@vkid/sdk": "^2.6.2",
"clsx": "^2.1.1",
"jose": "^6.1.2",
"next": "^16.0.7",
src/app/[locale]/login/page.tsx
+4
View File
@@ -5,6 +5,7 @@ import Link from 'next/link';
import LoginForm from '@/app/ui/login-form';
import LanguageSwitcher from '@/app/components/LanguageSwitcher';
import { useTranslations } from 'next-intl';
import VKLogin from '@/app/components/VKLogin';
export const metadata: Metadata = {
title: 'Login',
@@ -32,6 +33,9 @@ export default function Page() {
{t('or-log-in-via')}
</span>
</div>
<div>
<VKLogin />
</div>
<div className={`${styles['register-link']}`}>
<p>{t('no-account')}?
<Link href="register"> {t('register')}</Link>
src/app/components/VKLogin.tsx
+48
View File
@@ -0,0 +1,48 @@
'use client'
import { useEffect, useRef } from 'react';
import * as VKID from '@vkid/sdk';
export default function VKLogin() {
const vkButton = useRef<HTMLDivElement>(null)
function clickHandler() {
alert('Кнопка пока не подключена к бизнес аккаунту!');
/* VKID.Auth.login()
.then(vkidOnSuccess)
.catch(console.error); */
}
/* function vkidOnSuccess(data: any) {
console.log('vkidOnSuccess');
console.log(data);
} */
/* useEffect(() => {
VKID.Config.init({
app: 54389559,
redirectUrl: 'http://localhost',
responseMode: VKID.ConfigResponseMode.Callback,
source: VKID.ConfigSource.LOWCODE,
scope: 'email'
});
}, []); */
return (
<button id="VKIDSDKAuthButton" className="VkIdWebSdk__button VkIdWebSdk__button_reset">
<div className="VkIdWebSdk__button_container">
<div className="VkIdWebSdk__button_icon">
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M4.54648 4.54648C3 6.09295 3 8.58197 3 13.56V14.44C3 19.418 3 21.907 4.54648 23.4535C6.09295 25 8.58197 25 13.56 25H14.44C19.418 25 21.907 25 23.4535 23.4535C25 21.907 25
19.418 25 14.44V13.56C25 8.58197 25 6.09295 23.4535 4.54648C21.907 3 19.418 3 14.44 3H13.56C8.58197 3 6.09295 3 4.54648 4.54648ZM6.79999 10.15C6.91798 15.8728 9.92951 19.31 14.8932 19.31H15.1812V16.05C16.989 16.2332 18.3371
17.5682 18.8875 19.31H21.4939C20.7869 16.7044 18.9535 15.2604 17.8141 14.71C18.9526 14.0293 20.5641 12.3893 20.9436 10.15H18.5722C18.0747 11.971 16.5945 13.6233 15.1803 13.78V10.15H12.7711V16.5C11.305 16.1337 9.39237 14.3538 9.314 10.15H6.79999Z" fill="white" />
</svg>
</div>
<div className="VkIdWebSdk__button_text" onClick={clickHandler}>
Войти с VK ID
</div>
</div>
</button>
)
}
src/app/components/dropDownList.tsx
+1 -1
View File
@@ -30,7 +30,7 @@ export default function DropDownList({ children, value, callBack }: DropDownList
callBack(childValue || "");
setIsOpen(false);
},
className: `flex items-center w-full px-4 py-2 text-sm text-left hover:bg-blue-100 text-[#6366f1]`,
className: `flex items-center w-full px-4 py-2 text-sm text-left hover:bg-blue-100 text-[#6366f1] cursor-pointer select-none`,
key: index
});
}
src/app/styles/VKLogin.scss
+52
View File
@@ -0,0 +1,52 @@
.VkIdWebSdk__button_reset {
border: none;
margin: 0;
padding: 0;
width: auto;
overflow: visible;
background: transparent;
color: inherit;
font: inherit;
line-height: normal;
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
}
.VkIdWebSdk__button {
background: #0077ff;
cursor: pointer;
transition: all .1s ease-out;
}
.VkIdWebSdk__button:hover {
opacity: 0.8;
}
.VkIdWebSdk__button:active {
opacity: .7;
transform: scale(.97);
}
.VkIdWebSdk__button {
border-radius: 8px;
width: 100%;
min-height: 44px;
}
.VkIdWebSdk__button_container {
display: flex;
align-items: center;
padding: 12px 10px;
}
.VkIdWebSdk__button_icon+.VkIdWebSdk__button_text {
margin-left: -28px;
}
.VkIdWebSdk__button_text {
display: flex;
font-family: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
flex: 1;
justify-content: center;
color: #ffffff;
}
src/app/styles/global-styles.scss
+1
View File
@@ -5,6 +5,7 @@
@use './reports.scss';
@use './marking-pages.scss';
@use './privacy-and-terms-pages.scss';
@use './VKLogin.scss';
.btn {
padding: 12px 24px;
src/app/styles/marking-pages.scss
+1 -1
View File
@@ -186,7 +186,7 @@
}
th {
background: linear-gradient(135deg, #6366f1, #8b5cf6);
background: linear-gradient(180deg, #6366f1, #8b5cf6);
color: white;
padding: 15px;
text-align: left;
src/app/ui/header/notificationsButton.tsx
+1 -1
View File
@@ -65,7 +65,7 @@ export default function NotificationsButton() {
<div className="notification-item">
<div className="notification-icon">✅</div>
<div className="notification-content">
<div className="notification-title">🪙 Токены добавлены</div>
<div className="notification-title">Токены добавлены</div>
<div className="notification-text">На ваш баланс добавлено 100 токенов. Теперь вы можете защитить ещё больше файлов!</div>
<div className="notification-time">4 дн назад</div>
</div>