telegram: added telegram attach functionality

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({

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",

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 };
+};

yarn.lock

@@ -517,6 +517,13 @@
     "@typescript-eslint/types" "5.10.1"
     eslint-visitor-keys "^3.0.0"
 
+"@v9v/ts-react-telegram-login@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@v9v/ts-react-telegram-login/-/ts-react-telegram-login-1.1.1.tgz#438d43fe2b8cbd06dd3aec391078add63643f03f"
+  integrity sha512-aWzELPBBfZET5L7Ud3IPApCz2qzJUXF1lBDFIpaKnG6vehe4F9GT7Ss+A/buOTYh1VgraQ03oh3f/ncNy1AdhA==
+  dependencies:
+    react "^16.13.1"
+
 acorn-jsx@^5.3.1:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
@@ -2442,6 +2449,15 @@ react-sticky-box@^1.0.2:
   dependencies:
     resize-observer-polyfill "^1.5.1"
 
+react@^16.13.1:
+  version "16.14.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
+  integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+
 react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"