edit styles, add vk-button and initial setup for vk auth
This commit is contained in:
smanylov
Generated
+18
-2
@@ -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",
|
||||
|
||||
+2
-1
@@ -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",
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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
|
||||
});
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -5,6 +5,7 @@
|
||||
@use './reports.scss';
|
||||
@use './marking-pages.scss';
|
||||
@use './privacy-and-terms-pages.scss';
|
||||
@use './VKLogin.scss';
|
||||
|
||||
.btn {
|
||||
padding: 12px 24px;
|
||||
|
||||
@@ -186,7 +186,7 @@
|
||||
}
|
||||
|
||||
th {
|
||||
background: linear-gradient(135deg, #6366f1, #8b5cf6);
|
||||
background: linear-gradient(180deg, #6366f1, #8b5cf6);
|
||||
color: white;
|
||||
padding: 15px;
|
||||
text-align: left;
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user