feat: UI for telegram user notifications

.github/workflows/ci-frontend.yml

@@ -165,10 +165,11 @@ jobs:
           run_install: false
 
       - name: Check bundle size
-        uses: andresz1/size-limit-action@v1
+        uses: andresz1/size-limit-action@dd31dce7dcc72a041fd3e49abf0502b13fc4ce05
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           directory: ./frontend/apps/remark42
+          package_manager: pnpm
 
   test:
     name: Tests & Coverage

backend/app/rest/api/rest_private.go

@@ -430,7 +430,7 @@ func (s *private) telegramSubscribeCtrl(w http.ResponseWriter, r *http.Request)
 	var address, siteID string
 	address, siteID, err := s.telegramService.CheckToken(queryToken, user.ID)
 	if err != nil {
-		rest.SendErrorJSON(w, r, http.StatusInternalServerError, err, "can't set telegram for user", rest.ErrInternal)
+		rest.SendErrorJSON(w, r, http.StatusNotFound, err, "request is not verified yet", rest.ErrInternal)
 		return
 	}
 

backend/app/rest/api/rest_private_test.go

@@ -1238,8 +1238,8 @@ func TestRest_TelegramNotification(t *testing.T) {
 	body, err = io.ReadAll(resp.Body)
 	require.NoError(t, err)
 	require.NoError(t, resp.Body.Close())
-	require.Equal(t, http.StatusInternalServerError, resp.StatusCode, string(body))
-	require.Equal(t, `{"code":0,"details":"can't set telegram for user","error":"not verified"}`+"\n", string(body))
+	require.Equal(t, http.StatusNotFound, resp.StatusCode, string(body))
+	require.Equal(t, `{"code":0,"details":"request is not verified yet","error":"not verified"}`+"\n", string(body))
 
 	mockTlgrm.notVerified = false
 

frontend/apps/remark42/app/common/api.ts

@@ -78,6 +78,34 @@
 
 /* Subscription methods */
 
+/**
+ * Start process of telegram subscription to updates
+ */
+export const telegramSubscribe = (): Promise<{
+  bot: string;
+  token: string;
+}> => apiFetcher.get('/telegram/subscribe');
+
+/**
+ * Start process of telegram subscription to updates
+ * Example of error response: {"code":0,"details":"can't set telegram for user","error":"request is not verified yet"}
+ * Example of success response: {"address":"223211010","updated":true}
+ */
+export const telegramCurrentSubscribtion = ({
+  token,
+}: {
+  token: string;
+}): Promise<{
+  address: string;
+  updated: boolean;
+}> => apiFetcher.get('/telegram/subscribe', { tkn: token });
+
+/**
+ * Start process of telegram subscription to updates
+ * Example of success response: {"deleted":true}
+ */
+export const telegramUnsubcribe = (): Promise<{ deleted: boolean }> => apiFetcher.delete('/telegram');
+
 /**
  * Start process of email subscription to updates
  * @param emailAddress email for subscription

frontend/apps/remark42/app/common/settings.ts

@@ -18,6 +18,7 @@ function includes<T extends U, U>(coll: ReadonlyArray<T>, el: U): el is T {
 export const rawParams = parseQuery();
 export const maxShownComments = parseNumber(rawParams.max_shown_comments) ?? MAX_SHOWN_ROOT_COMMENTS;
 export const isEmailSubscription = rawParams.show_email_subscription !== 'false';
+export const isTelegramSubscription = rawParams.show_telegram_subscription !== 'false';
 export const isRssSubscription =
   rawParams.show_rss_subscription === undefined || rawParams.show_rss_subscription !== 'false';
 export const theme = (rawParams.theme = includes(THEMES, rawParams.theme) ? rawParams.theme : THEMES[0]);

frontend/apps/remark42/app/components/auth/auth.messsages.ts

@@ -57,34 +57,6 @@ export const messages = defineMessages<string>({
     id: 'auth.submit',
     defaultMessage: 'Submit',
   },
-  telegramLink: {
-    id: 'auth.telegram-link',
-    defaultMessage: 'by the link',
-  },
-  telegramCheck: {
-    id: 'auth.telegram-check',
-    defaultMessage: 'Check',
-  },
-  telegramQR: {
-    id: 'auth.telegram-qr',
-    defaultMessage: 'Telegram QR-code',
-  },
-  telegramMessage1: {
-    id: 'auth.telegram-message-1',
-    defaultMessage: 'Open Telegram',
-  },
-  telegramOptionalQR: {
-    id: 'auth.telegram-optional-qr',
-    defaultMessage: 'or by scanning the QR code',
-  },
-  telegramMessage2: {
-    id: 'auth.telegram-message-2',
-    defaultMessage: 'and click “Start” there.',
-  },
-  telegramMessage3: {
-    id: 'auth.telegram-message-3',
-    defaultMessage: 'Afterwards, click “Check” below.',
-  },
   openProfile: {
     id: 'auth.open-profile',
     defaultMessage: 'Open My Profile',

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

@@ -195,15 +195,3 @@
   color: var(--error-color);
   line-height: 1.2;
 }
-
-.telegramQR {
-  background-color: rgb(var(--white-color));
-  box-sizing: border-box;
-  display: block;
-  margin: 12px auto;
-  padding: 10px;
-}
-
-.telegram {
-  margin-bottom: 0;
-}

frontend/apps/remark42/app/components/auth/auth.tsx

@@ -4,9 +4,9 @@ import { useState, useRef } from 'preact/hooks';
 import { useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
-import { BASE_URL, API_BASE } from 'common/constants.config';
 import { setUser } from 'store/user/actions';
 import { Input } from 'components/input';
+import { TelegramLink } from 'components/telegram/telegram-link';
 import { CrossIcon } from 'components/icons/cross';
 import { TextareaAutosize } from 'components/textarea-autosize';
 import { Spinner } from 'components/spinner/spinner';
@@ -234,33 +234,12 @@ export function Auth() {
                     <CrossIcon />
                   </button>
                 </div>
-                <p className={clsx('telegram', styles.telegram)}>
-                  {intl.formatMessage(messages.telegramMessage1)}{' '}
-                  <a
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    href={`https://t.me/${telegramParamsRef.current.bot}/?start=${telegramParamsRef.current.token}`}
-                  >
-                    {intl.formatMessage(messages.telegramLink)}
-                  </a>
-                  {window.screen.width >= 768 && ` ${intl.formatMessage(messages.telegramOptionalQR)}`}{' '}
-                  {intl.formatMessage(messages.telegramMessage2)}
-                  <br />
-                  {intl.formatMessage(messages.telegramMessage3)}
-                </p>
-                {window.screen.width >= 768 && (
-                  <img
-                    src={`${BASE_URL}${API_BASE}/qr/telegram?url=https://t.me/${telegramParamsRef.current.bot}/?start=${telegramParamsRef.current.token}`}
-                    height="200"
-                    width="200"
-                    className={clsx('telegram-qr', styles.telegramQR)}
-                    alt={intl.formatMessage(messages.telegramQR)}
-                  />
-                )}
-                {errorMessage && <div className={clsx('auth-error', styles.error)}>{errorMessage}</div>}
-                <Button key="submit" className="auth-submit" type="submit" onClick={handleTelegramSubmit}>
-                  {intl.formatMessage(messages.telegramCheck)}
-                </Button>
+                <TelegramLink
+                  onSubmit={handleTelegramSubmit}
+                  errorMessage={errorMessage}
+                  bot={telegramParamsRef.current.bot}
+                  token={telegramParamsRef.current.token}
+                />
               </>
             ) : view === 'token' ? (
               <>

frontend/apps/remark42/app/components/button/button.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import { h, JSX } from 'preact';
 import { forwardRef } from 'preact/compat';
 import b, { Mods, Mix } from 'bem-react-helper';
@@ -11,11 +12,17 @@ export type ButtonProps = Omit<JSX.HTMLAttributes, 'size' | 'className'> & {
   mods?: Mods;
   mix?: Mix;
   type?: string;
+  className?: string;
 };
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ children, theme, mods, mix, kind, type = 'button', size, ...props }, ref) => (
-    <button className={b('button', { mods: { kind, size, theme }, mix }, { ...mods })} type={type} {...props} ref={ref}>
+  ({ children, theme, mods, mix, kind, type = 'button', size, className, ...props }, ref) => (
+    <button
+      className={clsx(b('button', { mods: { kind, size, theme }, mix }, { ...mods }), className)}
+      type={type}
+      {...props}
+      ref={ref}
+    >
       {children}
     </button>
   )

frontend/apps/remark42/app/components/comment-form/__subscribe-by-telegram/comment-form__subscribe-by-telegram.module.css

@@ -0,0 +1,15 @@
+.root {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  padding: 8px;
+  width: 250px;
+  box-sizing: border-box;
+  line-height: 1.2;
+  text-align: left;
+}
+
+.preloader {
+  margin: 0 auto;
+  filter: invert(1);
+}