YH-1239: add tg auth (#803)

Author: hhpo4

public/locales/en/auth.json

@@ -27,7 +27,8 @@
 			"add.consent": "I give <processingLink>consent to receive advertising and informational newsletters</processingLink>."
 		},
 		"have.account": "Already have an account?",
-		"login.link": "Log in"
+		"login.link": "Log in",
+		"social.media": "Register via social networks"
 	},
 	"form": {
 		"email": {

public/locales/en/translation.json

@@ -133,6 +133,11 @@
 				"password": {
 					"wrong": "User with this email has another password."
 				}
+			},
+			"telegram": {
+				"verify_denied": "Telegram verification denied",
+				"data_outdated": "Telegram data is outdated",
+				"invalid_data": "Telegram data is invalid"
 			}
 		},
 		"questions": {
@@ -242,6 +247,9 @@
 			},
 			"set": {
 				"failed": "Failed to switch profile"
+			},
+			"specialization": {
+				"already_exists": "Specialization already exists"
 			}
 		},
 		"user": {

public/locales/ru/auth.json

@@ -27,7 +27,8 @@
 			"add.consent": "Даю <processingLink>согласие на получение рекламных и информационных рассылок</processingLink>"
 		},
 		"have.account": "Уже есть аккаунт?",
-		"login.link": "Войти"
+		"login.link": "Войти",
+		"social.media": "Зарегистрироваться через социальные сети"
 	},
 	"form": {
 		"email": {

src/entities/auth/api/authApi.ts

@@ -19,6 +19,8 @@ import {
 	RefreshResponse,
 	SignUpBodyRequest,
 	SignUpResponse,
+	TelegramLoginBodyRequest,
+	TelegramLoginResponse,
 } from '../model/types/auth';
 
 export const authApi = baseApi.injectEndpoints({
@@ -48,6 +50,28 @@ export const authApi = baseApi.injectEndpoints({
 				}
 			},
 		}),
+		telegram: build.mutation<TelegramLoginResponse, TelegramLoginBodyRequest>({
+			query: (body) => ({
+				url: authApiUrls.telegram,
+				method: 'POST',
+				body,
+			}),
+			async onQueryStarted(_, { queryFulfilled, extra }) {
+				try {
+					const result = await queryFulfilled;
+					setToLS(LS_ACCESS_TOKEN_KEY, result.data.access_token);
+					const typedExtra = extra as ExtraArgument;
+					typedExtra.navigate(ROUTES.platformRoute);
+				} catch (error) {
+					if (error && typeof error === 'object' && 'error' in error) {
+						const errObj = error as { error: { data: { message: string } } };
+						toast.error(i18n.t('toast.' + errObj.error.data.message));
+					}
+					// eslint-disable-next-line no-console
+					console.error(error);
+				}
+			},
+		}),
 		register: build.mutation<SignUpResponse, SignUpBodyRequest>({
 			query: (body) => ({
 				url: authApiUrls.register,
@@ -126,6 +150,7 @@ export const authApi = baseApi.injectEndpoints({
 
 export const {
 	useLoginMutation,
+	useTelegramMutation,
 	useRegisterMutation,
 	useProfileQuery,
 	useLazyLogoutQuery,

src/entities/auth/index.ts

@@ -7,12 +7,14 @@ export type {
 	User,
 	Role,
 	RoleName,
+	TelegramUser,
 } from './model/types/auth';
 export { listAdminRoles } from './model/constants/authConstants';
 export { authApi } from './api/authApi';
 export {
 	useLoginMutation,
 	useRegisterMutation,
+	useTelegramMutation,
 	useProfileQuery,
 	useLazyLogoutQuery,
 	useLazyRefreshQuery,

src/entities/auth/model/constants/authConstants.ts

@@ -6,6 +6,7 @@ export const authApiUrls = {
 	profile: 'auth/profile',
 	logout: 'auth/logout',
 	refresh: 'auth/refresh',
+	telegram: 'auth/telegram',
 };
 
 export const listAdminRoles: RoleName[] = ['author', 'admin'];

src/entities/auth/model/types/auth.ts

@@ -116,6 +116,16 @@ export interface RolePermission {
 	name: string;
 }
 
+export interface TelegramUser {
+	id: number;
+	first_name: string;
+	auth_date: number;
+	hash: string;
+	last_name?: string;
+	username?: string;
+	photo_url?: string;
+}
+
 export type LoginBodyRequest = LoginFormValues;
 export type LoginResponse = AuthResponse;
 
@@ -124,3 +134,6 @@ export type SignUpResponse = AuthResponse;
 
 export type RefreshResponse = AuthResponse;
 export type ProfileResponse = FullProfile;
+
+export type TelegramLoginBodyRequest = TelegramUser;
+export type TelegramLoginResponse = AuthResponse;

src/entities/auth/ui/RegistrationLabel/RegistrationLabel.module.css

@@ -2,6 +2,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  align-self: center;
   margin-top: 48px;
   padding: 16px;
   width: 100%;

src/features/authentication/login/index.ts

@@ -1 +1,2 @@
 export { LoginForm } from './ui/LoginForm/LoginForm';
+export { TelegramLogin } from './ui/TelegramLoginButton/ui/TelegramLogin/TelegramLogin';

src/features/authentication/login/ui/LoginForm/LoginForm.module.css

@@ -1,5 +1,5 @@
 .form-wrapper {
-  margin-bottom: 20px;
+  margin-bottom: 24px;
   width: 100%;
   max-width: 408px;
 }