apps/web: add FormStateContext

apps/api: add methods ldap-tfa/login-telegram

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

@@ -4,6 +4,7 @@ import { ApiResponse, ApiTags } from '@nestjs/swagger';
 import { FastifyReply, FastifyRequest } from 'fastify';
 import { cookieOptions } from 'src/config/cookie';
 import { env } from 'src/config/env';
+import { AuthToken } from 'src/decorators/token.decorator';
 import { Credentials } from 'src/dto/credentials';
 import { LdapController } from 'src/ldap/ldap.controller';
 
@@ -20,10 +21,7 @@ export class LdapTfaController extends LdapController {
     @Res() reply: FastifyReply
   ) {
     try {
-      const token = await this.ldapService.login(credentials, {
-        audience: 'auth',
-      });
-
+      const token = await this.ldapService.login(credentials, { audience: 'auth' });
       const user = await this.ldapService.getUser(token);
 
       return reply.setCookie(env.COOKIE_TOKEN_NAME, token, cookieOptions).status(200).send(user);
@@ -31,4 +29,14 @@ export class LdapTfaController extends LdapController {
       throw new HttpException('Unauthorized', HttpStatus.UNAUTHORIZED);
     }
   }
+
+  @Post('/login-telegram')
+  @ApiResponse({
+    status: HttpStatus.OK,
+  })
+  async loginTelegram(@AuthToken() token: string, @Res() reply: FastifyReply) {
+    const user = await this.ldapService.getUser(token);
+
+    return reply.status(200).send(user);
+  }
 }

apps/web/components/Form.tsx

@@ -4,9 +4,11 @@ import TelegramIcon from '../public/assets/images/telegram.svg';
 import styles from './Form.module.scss';
 import { publicRuntimeConfig } from '@/config/runtime';
 import { AuthModeContext } from '@/context/auth-mode';
+import { FormStateContext } from '@/context/form-state';
+import type { LdapUser } from '@/types/user';
 import axios from 'axios';
 import Image from 'next/image';
-import { useContext, useReducer, useState } from 'react';
+import { useContext, useState } from 'react';
 import { useForm } from 'react-hook-form';
 
 const { APP_BASE_PATH } = publicRuntimeConfig;
@@ -16,16 +18,6 @@ type FormData = {
   readonly password: string;
 };
 
-type User = {
-  department: string;
-  displayName: string;
-  domain: string;
-  domainName: string;
-  mail: string;
-  position: string;
-  username: string;
-};
-
 function handleDefaultLogin(data: FormData) {
   const redirectUrl =
     (window.location.pathname.replace(APP_BASE_PATH, '') || '/') + (window.location.search || '');
@@ -36,37 +28,17 @@ function handleDefaultLogin(data: FormData) {
 }
 
 function handleTelegramLogin(data: FormData) {
-  return axios.post<User>('/login', data);
+  return axios.post<LdapUser>('/login', data);
 }
 
-type State = {
-  step: 'login' | 'telegram';
-  user: User | undefined;
-};
-
-type Action = {
-  payload: State;
-  type: 'set-step';
-};
-
-const reducer = (state: State, action: Action): State => {
-  switch (action.type) {
-    case 'set-step':
-      return {
-        ...state,
-        ...action.payload,
-      };
-
-    default:
-      return state;
-  }
-};
-
 export function Form() {
   const [hasError, setHasError] = useState(false);
   const { handleSubmit, register } = useForm<FormData>();
   const { tfa } = useContext(AuthModeContext);
-  const [{ step, user }, dispatch] = useReducer(reducer, { step: 'login', user: undefined });
+  const {
+    dispatch,
+    state: { step, user },
+  } = useContext(FormStateContext);
 
   return (
     <form
@@ -110,7 +82,7 @@ export function Form() {
 type ButtonSumitProps = {
   readonly step: string;
   readonly tfa: boolean;
-  readonly user: User | undefined;
+  readonly user: LdapUser | undefined;
 };
 
 function ButtonSubmit({ step, tfa, user }: ButtonSumitProps) {

apps/web/context/form-state.tsx

@@ -0,0 +1,45 @@
+/* eslint-disable sonarjs/no-small-switch */
+import type { LdapUser } from '@/types/user';
+import type { PropsWithChildren } from 'react';
+import { createContext, useMemo, useReducer } from 'react';
+
+type State = {
+  step: 'login' | 'telegram';
+  user: LdapUser | undefined;
+};
+
+type Action = {
+  payload: State;
+  type: 'set-step';
+};
+
+const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case 'set-step':
+      return {
+        ...state,
+        ...action.payload,
+      };
+
+    default:
+      return state;
+  }
+};
+
+type Context = {
+  dispatch: React.Dispatch<Action>;
+  state: State;
+};
+
+export const FormStateContext = createContext<Context>({} as Context);
+
+export function FormStateProvider({ children }: PropsWithChildren) {
+  const [state, dispatch] = useReducer(reducer, {
+    step: 'login',
+    user: undefined,
+  });
+
+  const value = useMemo(() => ({ dispatch, state }), [state]);
+
+  return <FormStateContext.Provider value={value}>{children}</FormStateContext.Provider>;
+}

apps/web/pages/telegram.jsx

@@ -1,6 +1,7 @@
 import { Login } from '@/components';
 import { publicRuntimeConfig } from '@/config/runtime';
 import { AuthModeContext } from '@/context/auth-mode';
+import { FormStateProvider } from '@/context/form-state';
 import Head from 'next/head';
 import { useMemo } from 'react';
 
@@ -20,8 +21,10 @@ export default function Page() {
 
   return (
     <AuthModeContext.Provider value={value}>
-      <PageHead />
-      <Login />
+      <FormStateProvider>
+        <PageHead />
+        <Login />
+      </FormStateProvider>
     </AuthModeContext.Provider>
   );
 }

apps/web/types/user.ts

@@ -0,0 +1,9 @@
+export type LdapUser = {
+  department: string;
+  displayName: string;
+  domain: string;
+  domainName: string;
+  mail: string;
+  position: string;
+  username: string;
+};