Switch QR to backend rendering

frontend/app/components/auth/auth.module.css

@@ -196,7 +196,12 @@
   line-height: 1.2;
 }
 
-.qr {
+.telegramQR {
   display: block;
-  margin: 0 auto 1.5rem auto;
+  margin: 0 auto 0 auto;
+  width: 75%;
+}
+
+.telegram {
+  margin-bottom: 0;
 }

frontend/app/components/auth/auth.tsx

@@ -3,7 +3,6 @@ import { h, Fragment } from 'preact';
 import { useState } from 'preact/hooks';
 import { useIntl } from 'react-intl';
 import { useSelector, useDispatch } from 'react-redux';
-import QRCode from 'qrcode.react';
 
 import { setTelegramParams, setUser } from 'store/user/actions';
 import { Input } from 'components/input';
@@ -17,10 +16,17 @@ import { OAuth } from './components/oauth';
 import { messages } from './auth.messsages';
 import { useDropdown } from './auth.hooks';
 import { getProviders, getTokenInvalidReason } from './auth.utils';
-import { emailSignin, verifyEmailSignin, anonymousSignin, verifyTelegramSignin } from './auth.api';
+import {
+  emailSignin,
+  verifyEmailSignin,
+  anonymousSignin,
+  verifyTelegramSignin,
+  getTelegramSigninParams,
+} from './auth.api';
 import { StoreState } from 'store';
 
 import styles from './auth.module.css';
+import { BASE_URL, API_BASE } from '../../common/constants.config';
 
 export function Auth() {
   const intl = useIntl();
@@ -99,6 +105,17 @@ export function Auth() {
     setLoading(false);
   }
 
+  async function handleTelegramClick() {
+    if (!telegramParams) {
+      const params = await getTelegramSigninParams();
+      if (params === null) {
+        return;
+      }
+      dispatch(setTelegramParams(params));
+    }
+    setView && setView('telegram');
+  }
+
   async function handleTelegramSubmit(evt: Event) {
     evt.preventDefault();
     setLoading(true);
@@ -179,7 +196,7 @@ export function Auth() {
                     <CrossIcon />
                   </button>
                 </div>
-                <p>
+                <p className={clsx('telegram', styles.telegram)}>
                   {intl.formatMessage(messages.telegramMessage1)}{' '}
                   <a
                     href={`https://t.me/${telegramParams.bot}/?start=${telegramParams.token}`}
@@ -193,9 +210,10 @@ export function Auth() {
                   {intl.formatMessage(messages.telegramMessage3)}
                 </p>
                 {window.screen.width >= 768 && (
-                  <QRCode
-                    value={`https://t.me/${telegramParams.bot}/?start=${telegramParams.token}`}
-                    className={clsx('qr', styles.qr)}
+                  <img
+                    src={`${BASE_URL}${API_BASE}/qr/telegram?url=https://t.me/${telegramParams.bot}/?start=${telegramParams.token}`}
+                    className={clsx('telegram-qr', styles.telegramQR)}
+                    alt={'telegram QR-code'}
                   />
                 )}
                 <Button key="submit" className="auth-submit" type="submit" onClick={handleTelegramSubmit}>
@@ -252,7 +270,7 @@ export function Auth() {
                     <h5 className={clsx('auth-form-title', styles.title)}>
                       {intl.formatMessage(messages.oauthSource)}
                     </h5>
-                    <OAuth providers={oauthProviders} setView={setView} />
+                    <OAuth providers={oauthProviders} handleTelegramClick={handleTelegramClick} />
                   </>
                 )}
                 {hasOAuthProviders && hasFormProviders && (

frontend/app/components/auth/components/oauth.tsx

@@ -1,13 +1,12 @@
 import { h, JSX } from 'preact';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import clsx from 'clsx';
 import { useIntl } from 'react-intl';
 
-import type { FormProvider, OAuthProvider } from 'common/types';
+import type { OAuthProvider } from 'common/types';
 import { siteId } from 'common/settings';
 import { useTheme } from 'hooks/useTheme';
-import { setUser, setTelegramParams } from 'store/user/actions';
-import { StoreState } from 'store';
+import { setUser } from 'store/user/actions';
 
 import { messages } from 'components/auth/auth.messsages';
 
@@ -15,20 +14,17 @@ import { oauthSignin } from './oauth.api';
 import { BASE_URL } from 'common/constants.config';
 import { getButtonVariant, getProviderData } from './oauth.utils';
 import styles from './oauth.module.css';
-import { getTelegramSigninParams } from '../auth.api';
-import { StateUpdater } from 'preact/compat';
 
 const location = encodeURIComponent(`${window.location.origin}${window.location.pathname}?selfClose`);
 
 type Props = {
   providers: OAuthProvider[];
-  setView?: StateUpdater<'telegram' | FormProvider | 'token'>;
+  handleTelegramClick?: () => Promise<void>;
 };
 
-export function OAuth({ providers, setView }: Props) {
+export function OAuth({ providers, handleTelegramClick }: Props) {
   const intl = useIntl();
   const dispatch = useDispatch();
-  const telegramParams = useSelector((s: StoreState) => s.telegramParams);
   const theme = useTheme();
   const buttonVariant = getButtonVariant(providers.length);
   const handleOauthClick: JSX.GenericEventHandler<HTMLAnchorElement> = async (evt) => {
@@ -44,16 +40,11 @@ export function OAuth({ providers, setView }: Props) {
     dispatch(setUser(user));
   };
 
-  const handleTelegramClick: JSX.EventHandler<JSX.TargetedMouseEvent<HTMLButtonElement>> = async (evt) => {
+  const onTelegramClick: JSX.EventHandler<JSX.TargetedMouseEvent<HTMLButtonElement>> = async (evt) => {
     evt.preventDefault();
-    if (!telegramParams) {
-      const params = await getTelegramSigninParams();
-      if (params === null) {
-        return;
-      }
-      dispatch(setTelegramParams(params));
+    if (handleTelegramClick) {
+      await handleTelegramClick();
     }
-    setView && setView('telegram');
   };
 
   return (
@@ -65,7 +56,7 @@ export function OAuth({ providers, setView }: Props) {
           <li key={name} className={clsx('oauth-item', styles.item)}>
             {name === 'Telegram' ? (
               <button
-                onClick={handleTelegramClick}
+                onClick={onTelegramClick}
                 className={clsx('oauth-button telegram-auth', styles.button, styles[buttonVariant], styles[p])}
                 data-provider-name={name}
                 title={intl.formatMessage(messages.oauthTitle, { provider: name })}

frontend/package.json

@@ -36,7 +36,6 @@
     "lodash-es": "^4.17.21",
     "node-emoji": "^1.10.0",
     "preact": "^10.5.13",
-    "qrcode.react": "^1.0.1",
     "react-intl": "^5.17.4",
     "react-redux": "^7.2.4",
     "redux": "^4.1.0",
@@ -56,7 +55,6 @@
     "@types/jest": "^26.0.23",
     "@types/lodash-es": "^4.17.4",
     "@types/node-emoji": "^1.8.1",
-    "@types/qrcode.react": "^1.0.2",
     "@types/react-redux": "^7.1.16",
     "@types/redux-mock-store": "^1.0.2",
     "@types/webpack-env": "^1.16.0",