telegram: added telegram attach functionality

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);

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<TelegramLoginFormProps> = ({
+  botName,
+  onSuccess,
+}) => {
+  return (
+    <TelegramLoginButton
+      dataOnAuth={onSuccess}
+      botName={botName}
+      requestAccess
+    />
+  );
+};
+
+export { TelegramLoginForm };

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/',

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;

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<TelegramAttachDialogProps> = ({
+  onRequestClose,
+}) => {
+  const { attach } = useTelegramAccount();
+
+  if (!botName) {
+    // TODO: show something
+    return null;
+  }
+
+  return (
+    <BetterScrollDialog width={300} onClose={onRequestClose}>
+      <div>
+        <TelegramLoginForm botName={botName} onSuccess={attach} />
+      </div>
+    </BetterScrollDialog>
+  );
+};
+export { TelegramAttachDialog };

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<ProfileAccountsProps> = () => {
   const { isLoading, accounts, dropAccount, openOauthWindow } = useOAuth();
+  const { showModal } = useModal();
+
+  const showTelegramModal = useCallback(
+    () => showModal(Dialog.TelegramAttach, {}),
+    [],
+  );
 
   return (
     <Group className={styles.wrap}>
       <Group className={styles.info}>
         <p>
-          Ты можешь входить в Убежище, используя аккаунты на других сайтах вместо ввода логина и
-          пароля.
+          Ты можешь входить в Убежище, используя аккаунты на других сайтах
+          вместо ввода логина и пароля.
         </p>
 
         <p>
-          Мы честно украдём и будем хранить твои имя, фото и адрес на этом сайте, но никому о них не
-          расскажем.
+          Мы честно украдём и будем хранить твои имя, фото и адрес на этом
+          сайте, но никому о них не расскажем.
         </p>
       </Group>
 
@@ -42,11 +51,13 @@ const ProfileAccounts: FC<ProfileAccountsProps> = () => {
       {!isLoading && accounts.length > 0 && (
         <div className={styles.list}>
           {!isLoading &&
-            accounts.map(it => (
+            accounts.map((it) => (
               <div className={styles.account} key={`${it.provider}-${it.id}`}>
                 <div
                   className={styles.account__photo}
-                  style={{ backgroundImage: it.photo ? `url(${it.photo})` : 'none' }}
+                  style={{
+                    backgroundImage: it.photo ? `url(${it.photo})` : 'none',
+                  }}
                 >
                   <div className={styles.account__provider}>
                     <Icon icon={SOCIAL_ICONS[it.provider]} size={12} />
@@ -56,7 +67,11 @@ const ProfileAccounts: FC<ProfileAccountsProps> = () => {
                 <div className={styles.account__name}>{it.name || it.id}</div>
 
                 <div className={styles.account__drop}>
-                  <Icon icon="close" size={22} onClick={() => dropAccount(it.provider, it.id)} />
+                  <Icon
+                    icon="close"
+                    size={22}
+                    onClick={() => dropAccount(it.provider, it.id)}
+                  />
                 </div>
               </div>
             ))}
@@ -64,6 +79,18 @@ const ProfileAccounts: FC<ProfileAccountsProps> = () => {
       )}
 
       <Group horizontal className={styles.buttons}>
+        <Superpower>
+          <Button
+            size="small"
+            type="button"
+            iconLeft="telegram"
+            color="gray"
+            onClick={showTelegramModal}
+          >
+            Телеграм
+          </Button>
+        </Superpower>
+
         <Button
           size="small"
           type="button"

src/hooks/auth/useTelegramAccount.ts

@@ -0,0 +1,13 @@
+import { useCallback } from 'react';
+
+import { TelegramUser } from '@v9v/ts-react-telegram-login';
+
+import { apiAttachTelegram } from '../../api/auth/index';
+
+export const useTelegramAccount = () => {
+  const attach = useCallback((data: TelegramUser) => {
+    apiAttachTelegram(data);
+  }, []);
+
+  return { attach };
+};