api: add /check-auth method for account mode

reuse buttons in default & telegram forms

apps/api/src/ldap-tfa/ldap-tfa.controller.ts

@@ -79,7 +79,7 @@ export class LdapTfaController extends LdapController {
         },
       })
       .then((res) => reply.status(200).send(res.data))
-      .catch(() => reply.status(500).send());
+      .catch((error) => reply.status(500).send(error.response.data));
   }
 
   @Get('/telegram-confirm')
@@ -98,9 +98,7 @@ export class LdapTfaController extends LdapController {
     status: HttpStatus.OK,
   })
   @UsePipes(new ValidationPipe({ transform: true }))
-  async telegramReject(@Query() query: TelegramDto, @Res() reply: FastifyReply) {
-    this.ldapTfaGateway.notify('auth-deny', query);
-
+  async telegramReject(@Query() _query: TelegramDto, @Res() reply: FastifyReply) {
     return reply.status(200).send({ success: true });
   }
 

apps/web/components/Form/base-form.tsx

@@ -32,7 +32,7 @@ export function BaseForm({ children, onSubmit }: FormProps & PropsWithChildren)
         autoComplete="on"
         {...register('password', { required: true })}
       />
-      {step === 'login-success' || step === 'telegram-notification' ? (
+      {step === 'telegram-login' ? (
         <a target="_blank" className="info" href={TELEGRAM_BOT_URL} rel="noreferrer">
           Открыть чат с ботом
         </a>

apps/web/components/Form/default-form.tsx

@@ -10,16 +10,16 @@ export function DefaultForm() {
   const { handleLogin } = useLogin();
 
   const {
-    state: { step },
+    state: { step, user },
   } = useContext(FormStateContext);
 
-  if (step === 'refresh-token') {
-    return <ButtonLoading>Подождите...</ButtonLoading>;
+  if (step === 'login' && user) {
+    return <ButtonLoading />;
   }
 
   return (
     <BaseForm onSubmit={(data) => handleLogin(data)}>
-      <ButtonLogin>Войти</ButtonLogin>
+      <ButtonLogin />
     </BaseForm>
   );
 }

apps/web/components/Form/hooks/telegram.ts

@@ -1,14 +1,11 @@
 import type { FormData } from '../lib/types';
 import { useSocket } from './socket';
 import { redirect } from '@/components/Form/lib/utils';
-import {
-  ERROR_INVALID_CREDENTIALS,
-  ERROR_SERVER,
-  ERROR_TELEGRAM_SEND_MESSAGE,
-} from '@/constants/errors';
+import { ERROR_INVALID_CREDENTIALS, ERROR_SERVER } from '@/constants/errors';
 import { FormStateContext } from '@/context/form-state';
+import type { TelegramUrlResponse } from '@/types/error';
 import type { LdapUser } from '@/types/user';
-import axios from 'axios';
+import axios, { isAxiosError } from 'axios';
 import { useContext, useEffect } from 'react';
 
 export function useLogin() {
@@ -20,7 +17,7 @@ export function useLogin() {
       .then((res) => {
         dispatch({
           payload: {
-            step: 'login-success',
+            step: 'telegram',
             user: res.data,
           },
           type: 'set-step',
@@ -46,17 +43,23 @@ export function useTelegramLogin() {
       .then(() => {
         dispatch({
           payload: {
-            step: 'telegram-notification',
+            step: 'telegram-login',
           },
           type: 'set-step',
         });
       })
-      .catch(() =>
-        dispatch({
-          payload: { error: ERROR_TELEGRAM_SEND_MESSAGE },
+      .catch((error_) => {
+        let error = ERROR_SERVER;
+
+        if (isAxiosError<TelegramUrlResponse>(error_) && error_.response?.data?.message) {
+          error = error_.response?.data?.message;
+        }
+
+        return dispatch({
+          payload: { error },
           type: 'set-error',
-        })
-      );
+        });
+      });
   }
 
   return { handleTelegramLogin };
@@ -71,7 +74,7 @@ export function useTelegramConfirm() {
   const { socket } = useSocket();
 
   useEffect(() => {
-    if (step === 'telegram-notification') {
+    if (step === 'telegram-login') {
       socket.open();
       socket.on('connect', () => {});
 
@@ -87,11 +90,6 @@ export function useTelegramConfirm() {
             })
           );
       });
-
-      socket.on('auth-deny', () => {
-        socket.off('connect');
-        window.location.reload();
-      });
     }
 
     return () => {

apps/web/components/Form/hooks/token.ts

@@ -23,6 +23,6 @@ export function useRefreshToken() {
   }
 
   useEffect(() => {
-    if (step === 'refresh-token') handleRefreshToken();
+    if (step === 'login' && user) handleRefreshToken();
   }, []);
 }

apps/web/components/Form/lib/buttons.module.scss

@@ -10,7 +10,7 @@
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  // text-transform: none;
+  text-transform: none;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;

apps/web/components/Form/lib/buttons.tsx

@@ -9,7 +9,7 @@ type Props = ButtonHTMLAttributes<HTMLButtonElement>;
 export function ButtonLogin(props: Props) {
   return (
     <button className={styles['button-submit']} type="submit" {...props}>
-      {props.children}
+      Войти
     </button>
   );
 }
@@ -19,7 +19,7 @@ export function ButtonLoading(props: Props) {
     <button disabled type="button" className={styles['button-submit']} {...props}>
       <div className={styles['loading-wrapper']}>
         <Spinner alt="spinner" className={styles['spinner-icon']} />
-        {props.children}
+        Подождите...
       </div>
     </button>
   );
@@ -50,7 +50,7 @@ export function ButtonTelegramLogin(props: Props) {
         height={22}
         alt="Telegram icon"
       />
-      {props.children}
+      Ожидаем подтверждения...
     </button>
   );
 }

apps/web/components/Form/telegram-form.tsx

@@ -12,32 +12,32 @@ export function TelegramForm() {
   useTelegramConfirm();
 
   const {
-    state: { step },
+    state: { step, user },
   } = useContext(FormStateContext);
 
-  if (step === 'refresh-token') {
-    return <ButtonLoading>Подождите...</ButtonLoading>;
+  if (step === 'login' && user) {
+    return <ButtonLoading />;
   }
 
-  if (step === 'login-success') {
+  if (step === 'telegram') {
     return (
       <BaseForm onSubmit={() => handleTelegramLogin()}>
-        <ButtonTelegram>Войти через Telegram</ButtonTelegram>
+        <ButtonTelegram>Войти как &nbsp;{user?.displayName}</ButtonTelegram>
       </BaseForm>
     );
   }
 
-  if (step === 'telegram-notification') {
+  if (step === 'telegram-login') {
     return (
       <BaseForm onSubmit={() => {}}>
-        <ButtonTelegramLogin>Ожидаем подтверждения...</ButtonTelegramLogin>
+        <ButtonTelegramLogin />
       </BaseForm>
     );
   }
 
   return (
     <BaseForm onSubmit={(data) => handleLogin(data)}>
-      <ButtonLogin>Далее</ButtonLogin>
+      <ButtonLogin />
     </BaseForm>
   );
 }

apps/web/components/Login/Login.module.scss

@@ -19,7 +19,7 @@ $layout-breakpoint-desktop: 1680px;
   background-color: white;
   margin: 0;
   height: 250px;
-  width: 100vw;
+  width: 100%;
   padding: 25px 10px;
   margin-bottom: 0;
 }

apps/web/constants/errors.ts

@@ -1,3 +1,2 @@
 export const ERROR_INVALID_CREDENTIALS = 'Неверный логин или пароль';
 export const ERROR_SERVER = 'Не удалось войти. Повторите попытку позже';
-export const ERROR_TELEGRAM_SEND_MESSAGE = 'Не удалось отправить сообщение в Telegram';

apps/web/context/form-state.tsx

@@ -5,8 +5,7 @@ import { createContext, useMemo, useReducer } from 'react';
 
 type State = {
   error: string | undefined;
-  step: 'login' | 'login-success' | 'telegram-notification' | 'refresh-token';
-  tfa: boolean;
+  step: 'login' | 'telegram' | 'telegram-login';
   user: LdapUser | undefined;
 };
 
@@ -21,7 +20,6 @@ const reducer = (state: State, action: Action): State => {
       if (action.payload.step)
         return {
           ...state,
-          error: undefined,
           step: action.payload.step,
           user: action.payload.user || state.user,
         };
@@ -60,15 +58,13 @@ type Context = {
 export const FormStateContext = createContext<Context>({} as Context);
 
 type FormStateProviderProps = {
-  readonly tfa: boolean;
   readonly user?: LdapUser;
 } & PropsWithChildren;
 
-export function FormStateProvider({ children, tfa, user = undefined }: FormStateProviderProps) {
+export function FormStateProvider({ children, user = undefined }: FormStateProviderProps) {
   const [state, dispatch] = useReducer(reducer, {
     error: undefined,
-    step: user ? 'refresh-token' : 'login',
-    tfa,
+    step: 'login',
     user,
   });
 

apps/web/styles/button.css

@@ -11,7 +11,7 @@ button {
   outline: none;
   padding: 0.55rem 0.75rem;
   text-align: center;
-  text-transform: none;
+  text-transform: uppercase;
   vertical-align: middle;
   width: 100%;
 }

apps/web/styles/error.css

@@ -5,6 +5,6 @@
   text-transform: uppercase;
   color: red;
   overflow: hidden;
-  /* white-space: nowrap; */
+  white-space: nowrap;
   text-overflow: ellipsis;
 }

apps/web/styles/logo.css

@@ -2,5 +2,4 @@
   display: block;
   margin-left: auto;
   margin-right: auto;
-  margin-bottom: 5px;
 }