From e994176bffb99196945d8da033c11d77df54f7a3 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Mon, 13 Mar 2023 17:32:44 +0600 Subject: [PATCH] telegram: added telegram attach functionality --- next.config.js | 2 +- package.json | 1 + src/api/auth/index.ts | 5 +++ .../auth/oauth/TelegramLoginForm/index.tsx | 25 +++++++++++ src/constants/api.ts | 1 + src/constants/modal/index.ts | 3 ++ .../dialogs/TelegramAttachDialog/index.tsx | 31 +++++++++++++ .../profile/ProfileAccounts/index.tsx | 43 +++++++++++++++---- src/hooks/auth/useTelegramAccount.ts | 13 ++++++ yarn.lock | 16 +++++++ 10 files changed, 131 insertions(+), 9 deletions(-) create mode 100644 src/components/auth/oauth/TelegramLoginForm/index.tsx create mode 100644 src/containers/dialogs/TelegramAttachDialog/index.tsx create mode 100644 src/hooks/auth/useTelegramAccount.ts diff --git a/next.config.js b/next.config.js index 89180bbb..b3b05794 100644 --- a/next.config.js +++ b/next.config.js @@ -2,7 +2,7 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true', }); -const withTM = require('next-transpile-modules')(['ramda']); +const withTM = require('next-transpile-modules')(['ramda', '@v9v/ts-react-telegram-login']); module.exports = withBundleAnalyzer( withTM({ diff --git a/package.json b/package.json index 0a0e38d0..848d90c6 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "@tippyjs/react": "^4.2.6", + "@v9v/ts-react-telegram-login": "^1.1.1", "autosize": "^4.0.2", "axios": "^0.21.2", "body-scroll-lock": "^2.6.4", diff --git a/src/api/auth/index.ts b/src/api/auth/index.ts index 06a46c75..0c1526c6 100644 --- a/src/api/auth/index.ts +++ b/src/api/auth/index.ts @@ -1,3 +1,5 @@ +import { TelegramUser } from '@v9v/ts-react-telegram-login'; + import { ApiAttachSocialRequest, ApiAttachSocialResult, @@ -98,3 +100,6 @@ export const apiLoginWithSocial = ({ password, }) .then(cleanResult); + +export const apiAttachTelegram = (data: TelegramUser) => + api.post(API.USER.ATTACH_TELEGRAM, data); diff --git a/src/components/auth/oauth/TelegramLoginForm/index.tsx b/src/components/auth/oauth/TelegramLoginForm/index.tsx new file mode 100644 index 00000000..67a904cf --- /dev/null +++ b/src/components/auth/oauth/TelegramLoginForm/index.tsx @@ -0,0 +1,25 @@ +import React, { FC, useEffect } from 'react'; + +import TelegramLoginButton, { + TelegramUser, +} from '@v9v/ts-react-telegram-login'; + +interface TelegramLoginFormProps { + botName: string; + onSuccess?: (token: TelegramUser) => void; +} + +const TelegramLoginForm: FC = ({ + botName, + onSuccess, +}) => { + return ( + + ); +}; + +export { TelegramLoginForm }; diff --git a/src/constants/api.ts b/src/constants/api.ts index fe16b3c5..b3318a30 100644 --- a/src/constants/api.ts +++ b/src/constants/api.ts @@ -24,6 +24,7 @@ export const API = { DROP_SOCIAL: (provider, id) => `/oauth/${provider}/${id}`, ATTACH_SOCIAL: `/oauth`, LOGIN_WITH_SOCIAL: `/oauth`, + ATTACH_TELEGRAM: '/oauth/telegram/attach', }, NODES: { SAVE: '/nodes/', diff --git a/src/constants/modal/index.ts b/src/constants/modal/index.ts index 5717475e..344fb577 100644 --- a/src/constants/modal/index.ts +++ b/src/constants/modal/index.ts @@ -6,6 +6,7 @@ import { LoginSocialRegisterDialog } from '~/containers/dialogs/LoginSocialRegis import { PhotoSwipe } from '~/containers/dialogs/PhotoSwipe'; import { RestorePasswordDialog } from '~/containers/dialogs/RestorePasswordDialog'; import { RestoreRequestDialog } from '~/containers/dialogs/RestoreRequestDialog'; +import { TelegramAttachDialog } from '~/containers/dialogs/TelegramAttachDialog'; import { TestDialog } from '~/containers/dialogs/TestDialog'; export enum Dialog { @@ -18,6 +19,7 @@ export enum Dialog { Photoswipe = 'Photoswipe', CreateNode = 'CreateNode', EditNode = 'EditNode', + TelegramAttach = 'TelegramAttach', } export const DIALOG_CONTENT = { @@ -30,4 +32,5 @@ export const DIALOG_CONTENT = { [Dialog.Photoswipe]: PhotoSwipe, [Dialog.CreateNode]: EditorCreateDialog, [Dialog.EditNode]: EditorEditDialog, + [Dialog.TelegramAttach]: TelegramAttachDialog, } as const; diff --git a/src/containers/dialogs/TelegramAttachDialog/index.tsx b/src/containers/dialogs/TelegramAttachDialog/index.tsx new file mode 100644 index 00000000..7a08ec36 --- /dev/null +++ b/src/containers/dialogs/TelegramAttachDialog/index.tsx @@ -0,0 +1,31 @@ +import React, { FC } from 'react'; + +import { useTelegramAccount } from '~/hooks/auth/useTelegramAccount'; +import { DialogComponentProps } from '~/types/modal'; + +import { TelegramLoginForm } from '../../../components/auth/oauth/TelegramLoginForm/index'; +import { BetterScrollDialog } from '../../../components/dialogs/BetterScrollDialog'; + +interface TelegramAttachDialogProps extends DialogComponentProps {} + +const botName = process.env.NEXT_PUBLIC_BOT_USERNAME; + +const TelegramAttachDialog: FC = ({ + onRequestClose, +}) => { + const { attach } = useTelegramAccount(); + + if (!botName) { + // TODO: show something + return null; + } + + return ( + +
+ +
+ + ); +}; +export { TelegramAttachDialog }; diff --git a/src/containers/profile/ProfileAccounts/index.tsx b/src/containers/profile/ProfileAccounts/index.tsx index 994dc27d..f1503d81 100644 --- a/src/containers/profile/ProfileAccounts/index.tsx +++ b/src/containers/profile/ProfileAccounts/index.tsx @@ -1,11 +1,14 @@ -import React, { FC, Fragment } from 'react'; +import React, { FC, Fragment, useCallback } from 'react'; +import { Superpower } from '~/components/boris/Superpower'; import { Group } from '~/components/containers/Group'; import { Button } from '~/components/input/Button'; import { Icon } from '~/components/input/Icon'; import { Placeholder } from '~/components/placeholders/Placeholder'; import { SOCIAL_ICONS } from '~/constants/auth/socials'; +import { Dialog } from '~/constants/modal'; import { useOAuth } from '~/hooks/auth/useOAuth'; +import { useModal } from '~/hooks/modal/useModal'; import styles from './styles.module.scss'; @@ -13,18 +16,24 @@ type ProfileAccountsProps = {}; const ProfileAccounts: FC = () => { const { isLoading, accounts, dropAccount, openOauthWindow } = useOAuth(); + const { showModal } = useModal(); + + const showTelegramModal = useCallback( + () => showModal(Dialog.TelegramAttach, {}), + [], + ); return (

- Ты можешь входить в Убежище, используя аккаунты на других сайтах вместо ввода логина и - пароля. + Ты можешь входить в Убежище, используя аккаунты на других сайтах + вместо ввода логина и пароля.

- Мы честно украдём и будем хранить твои имя, фото и адрес на этом сайте, но никому о них не - расскажем. + Мы честно украдём и будем хранить твои имя, фото и адрес на этом + сайте, но никому о них не расскажем.

@@ -42,11 +51,13 @@ const ProfileAccounts: FC = () => { {!isLoading && accounts.length > 0 && (
{!isLoading && - accounts.map(it => ( + accounts.map((it) => (
@@ -56,7 +67,11 @@ const ProfileAccounts: FC = () => {
{it.name || it.id}
- dropAccount(it.provider, it.id)} /> + dropAccount(it.provider, it.id)} + />
))} @@ -64,6 +79,18 @@ const ProfileAccounts: FC = () => { )} + + + +