span.error: fix overflow text

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((error) => reply.status(500).send(error.response.data));
+      .catch(() => reply.status(500).send());
   }
 
   @Get('/telegram-confirm')
@@ -98,7 +98,9 @@ export class LdapTfaController extends LdapController {
     status: HttpStatus.OK,
   })
   @UsePipes(new ValidationPipe({ transform: true }))
-  async telegramReject(@Query() _query: TelegramDto, @Res() reply: FastifyReply) {
+  async telegramReject(@Query() query: TelegramDto, @Res() reply: FastifyReply) {
+    this.ldapTfaGateway.notify('auth-deny', query);
+
     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 === 'telegram-login' ? (
+      {step === 'login-success' || step === 'telegram-notification' ? (
         <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, user },
+    state: { step },
   } = useContext(FormStateContext);
 
-  if (step === 'login' && user) {
-    return <ButtonLoading />;
+  if (step === 'refresh-token') {
+    return <ButtonLoading>Подождите...</ButtonLoading>;
   }
 
   return (
     <BaseForm onSubmit={(data) => handleLogin(data)}>
-      <ButtonLogin />
+      <ButtonLogin>Войти</ButtonLogin>
     </BaseForm>
   );
 }

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

@@ -1,11 +1,14 @@
 import type { FormData } from '../lib/types';
 import { useSocket } from './socket';
 import { redirect } from '@/components/Form/lib/utils';
-import { ERROR_INVALID_CREDENTIALS, ERROR_SERVER } from '@/constants/errors';
+import {
+  ERROR_INVALID_CREDENTIALS,
+  ERROR_SERVER,
+  ERROR_TELEGRAM_SEND_MESSAGE,
+} from '@/constants/errors';
 import { FormStateContext } from '@/context/form-state';
-import type { TelegramUrlResponse } from '@/types/error';
 import type { LdapUser } from '@/types/user';
-import axios, { isAxiosError } from 'axios';
+import axios from 'axios';
 import { useContext, useEffect } from 'react';
 
 export function useLogin() {
@@ -17,7 +20,7 @@ export function useLogin() {
       .then((res) => {
         dispatch({
           payload: {
-            step: 'telegram',
+            step: 'login-success',
             user: res.data,
           },
           type: 'set-step',
@@ -43,23 +46,17 @@ export function useTelegramLogin() {
       .then(() => {
         dispatch({
           payload: {
-            step: 'telegram-login',
+            step: 'telegram-notification',
           },
           type: 'set-step',
         });
       })
-      .catch((error_) => {
-        let error = ERROR_SERVER;
-
-        if (isAxiosError<TelegramUrlResponse>(error_) && error_.response?.data?.message) {
-          error = error_.response?.data?.message;
-        }
-
-        return dispatch({
-          payload: { error },
+      .catch(() =>
+        dispatch({
+          payload: { error: ERROR_TELEGRAM_SEND_MESSAGE },
           type: 'set-error',
-        });
-      });
+        })
+      );
   }
 
   return { handleTelegramLogin };
@@ -74,7 +71,7 @@ export function useTelegramConfirm() {
   const { socket } = useSocket();
 
   useEffect(() => {
-    if (step === 'telegram-login') {
+    if (step === 'telegram-notification') {
       socket.open();
       socket.on('connect', () => {});
 
@@ -90,6 +87,11 @@ 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 === 'login' && user) handleRefreshToken();
+    if (step === 'refresh-token') 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, user },
+    state: { step },
   } = useContext(FormStateContext);
 
-  if (step === 'login' && user) {
-    return <ButtonLoading />;
+  if (step === 'refresh-token') {
+    return <ButtonLoading>Подождите...</ButtonLoading>;
   }
 
-  if (step === 'telegram') {
+  if (step === 'login-success') {
     return (
       <BaseForm onSubmit={() => handleTelegramLogin()}>
-        <ButtonTelegram>Войти как &nbsp;{user?.displayName}</ButtonTelegram>
+        <ButtonTelegram>Войти через Telegram</ButtonTelegram>
       </BaseForm>
     );
   }
 
-  if (step === 'telegram-login') {
+  if (step === 'telegram-notification') {
     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: 100%;
+  width: 100vw;
   padding: 25px 10px;
   margin-bottom: 0;
 }

apps/web/constants/errors.ts

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

apps/web/context/form-state.tsx

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

apps/web/styles/button.css

@@ -11,7 +11,7 @@ button {
   outline: none;
   padding: 0.55rem 0.75rem;
   text-align: center;
-  text-transform: uppercase;
+  text-transform: none;
   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,4 +2,5 @@
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 5px;
 }