From 3c2314d585ec15a4895fe551c9b4bfb3fa48c669 Mon Sep 17 00:00:00 2001 From: Karthik <109301536+karthxk07@users.noreply.github.com> Date: Fri, 3 May 2024 21:13:06 +0530 Subject: [PATCH] [ Feature ] Select Organization on the Registration screen (#1904) * Added select org dropdown to the register form * Added Signup logic * Final Changes * lint fixes * Update package.json * Correct merge * Added missing translations * Unit tests written * Unit tests fix * Fixed failing unit tests * Fixed issues * Reverted changes to package-lock.json * Update package-lock.json --- public/locales/en.json | 37 +++++- public/locales/fr.json | 35 +++++- public/locales/hi.json | 37 +++++- public/locales/sp.json | 37 +++++- public/locales/zh.json | 37 +++++- schema.graphql | 2 +- src/components/LeftDrawer/LeftDrawer.test.tsx | 92 +++++++-------- .../LeftDrawerOrg/LeftDrawerOrg.module.css | 1 - .../OrganizationScreen.module.css | 3 + src/screens/LoginPage/LoginPage.module.css | 4 + src/screens/LoginPage/LoginPage.test.tsx | 108 +++++++++++++++++- src/screens/LoginPage/LoginPage.tsx | 64 ++++++++++- src/screens/Users/Users.tsx | 1 - src/utils/interfaces.ts | 19 +++ 14 files changed, 418 insertions(+), 59 deletions(-) diff --git a/public/locales/en.json b/public/locales/en.json index 4dce655d45..b1e75a64aa 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -37,7 +37,42 @@ "lowercase_check": "Atleast one lowercase letter", "uppercase_check": "Atleast one uppercase letter", "numeric_value_check": "Atleaset one numeric value", - "special_char_check": "Atleast one special character" + "special_char_check": "Atleast one special character", + "loading": "Loading...", + "selectOrg": "Select an organization", + "afterRegister": "Successfully registered. Please wait for admin to approve your request." + }, + "userLoginPage": { + "title": "Talawa Admin", + "fromPalisadoes": "An open source application by Palisadoes Foundation volunteers", + "talawa_portal": "Talawa Admin Portal", + "login": "Login", + "register": "Register", + "firstName": "First Name", + "lastName": "Last Name", + "email": "Email", + "password": "Password", + "atleast_8_char_long": "Atleast 8 Character long", + "Password_and_Confirm_password_mismatches.": "Password and Confirm password mismatches.", + "confirmPassword": "Confirm Password", + "forgotPassword": "Forgot Password ?", + "enterEmail": "Enter Email", + "enterPassword": "Enter Password", + "doNotOwnAnAccount": "Do not own an account?", + "talawaApiUnavailable": "Talawa-API service is unavailable. Is it running? Check your network connectivity too.", + "captchaError": "Captcha Error!", + "Please_check_the_captcha": "Please, check the captcha.", + "Something_went_wrong": "Something went wrong, Please try after sometime.", + "passwordMismatches": "Password and Confirm password mismatches.", + "fillCorrectly": "Fill all the Details Correctly.", + "notAuthorised": "Sorry! you are not Authorised!", + "notFound": "User not found!", + "successfullyRegistered": "Successfully Registered. Please wait until you will be approved.", + "userLogin": "User Login", + "afterRegister": "Successfully registered. Please wait for admin to approve your request.", + "OR": "OR", + "loading": "Loading...", + "selectOrg": "Select an organization" }, "latestEvents": { "eventCardTitle": "Upcoming Events", diff --git a/public/locales/fr.json b/public/locales/fr.json index 4a851b8e8d..ef9eed6c96 100644 --- a/public/locales/fr.json +++ b/public/locales/fr.json @@ -37,7 +37,40 @@ "lowercase_check": "Au moins une lettre minuscule", "uppercase_check": "Au moins une lettre majuscule", "special_char_check": "Au moins un caractère spécial", - "numeric_value_check": "Au moins une valeur numérique" + "numeric_value_check": "Au moins une valeur numérique", + "afterRegister": "Inscription réussie. Veuillez attendre l'approbation de l'administrateur pour votre demande." + }, + "userLoginPage": { + "title": "Administration Talawa", + "fromPalisadoes": "Une application open source par des bénévoles de la Fondation Palisadoes", + "talawa_portal": "Portail d'administration Talawa", + "login": "Connexion", + "register": "S'inscrire", + "firstName": "Prénom", + "lastName": "Nom de famille", + "email": "E-mail", + "password": "Mot de passe", + "atleast_8_char_long": "Au moins 8 caractères de long", + "Password_and_Confirm_password_mismatches.": "Les mots de passe ne correspondent pas.", + "confirmPassword": "Confirmez le mot de passe", + "forgotPassword": "Mot de passe oublié ?", + "enterEmail": "Entrez l'e-mail", + "enterPassword": "Entrez le mot de passe", + "doNotOwnAnAccount": "Vous n'avez pas de compte ?", + "talawaApiUnavailable": "Le service Talawa-API n'est pas disponible. Est-il en cours d'exécution ? Vérifiez également votre connectivité réseau.", + "captchaError": "Erreur de captcha !", + "Please_check_the_captcha": "Veuillez vérifier le captcha.", + "Something_went_wrong": "Quelque chose s'est mal passé, veuillez réessayer ultérieurement.", + "passwordMismatches": "Les mots de passe ne correspondent pas.", + "fillCorrectly": "Remplissez correctement tous les détails.", + "notAuthorised": "Désolé ! Vous n'êtes pas autorisé !", + "notFound": "Utilisateur non trouvé !", + "successfullyRegistered": "Inscription réussie. Veuillez attendre que votre demande soit approuvée.", + "userLogin": "Connexion utilisateur", + "afterRegister": "Inscription réussie. Veuillez attendre l'approbation de l'administrateur.", + "OR": "OU", + "loading": "Chargement...", + "selectOrg": "Sélectionnez une organisation" }, "latestEvents": { "eventCardTitle": "Événements à venir", diff --git a/public/locales/hi.json b/public/locales/hi.json index eddc354c5c..a029df8bd7 100644 --- a/public/locales/hi.json +++ b/public/locales/hi.json @@ -37,7 +37,42 @@ "lowercase_check": "कम से कम एक छोटा अक्षर", "uppercase_check": "कम से कम एक बड़ा अक्षर", "numeric_value_check": "कम से कम एक संख्यात्मक मान", - "special_char_check": "कम से कम एक विशेष पात्र" + "special_char_check": "कम से कम एक विशेष पात्र", + "loading": "लोड हो रहा है...", + "selectOrg": "कोई संगठन चुनें", + "afterRegister": "सफलतापूर्वक पंजीकृत हो गया। कृपया व्यवस्थापक की मंजूरी का इंतजार करें।" + }, + "userLoginPage": { + "title": "तलवा व्यवस्थापक", + "fromPalisadoes": "पलिसाडो के स्वयंसेवकों द्वारा एक खुला स्रोत अनुप्रयोग", + "talawa_portal": "तलावा प्रशासन पोर्टल", + "login": "लॉग इन करें", + "register": "पंजीकरण करवाना", + "firstName": "पहला नाम", + "lastName": "उपनाम", + "email": "ईमेल", + "password": "पासवर्ड", + "atleast_8_char_long": "कम से कम 8 कैरेक्टर लंबा", + "Password_and_Confirm_password_mismatches.": "पासवर्ड और पुष्टि पासवर्ड बेमेल।", + "confirmPassword": "पासवर्ड की पुष्टि कीजिये", + "forgotPassword": "पासवर्ड भूल गए ?", + "enterEmail": "ईमेल दर्ज करें", + "enterPassword": "पास वर्ड दर्ज करें", + "doNotOwnAnAccount": "क्या आपके पास खाता नहीं है?", + "talawaApiUnavailable": "तलावा-एपीआई सेवा उपलब्ध नहीं है। क्या यह चल रही है? अपनी नेटवर्क कनेक्टिविटी की भी जाँच करें।", + "captchaError": "कैप्चा त्रुटि!", + "Please_check_the_captcha": "कृपया, कैप्चा जांचें।", + "Something_went_wrong": "कुछ गलत हुआ, कृपया कुछ समय बाद प्रयास करें।", + "passwordMismatches": "पासवर्ड और पुष्टि पासवर्ड मेल नहीं खाते।", + "fillCorrectly": "सभी विवरण सही ढंग से भरें।", + "notAuthorised": "क्षमा करें! आप अधिकृत नहीं हैं!", + "notFound": "उपयोगकर्ता नहीं मिला!", + "successfullyRegistered": "सफलतापूर्वक पंजीकृत। कृपया स्वीकृत होने तक प्रतीक्षा करें।", + "afterRegister": "पंजीकरण सफलतापूर्वक हो गया है। कृपया आपके अनुरोध को स्वीकार करने के लिए व्यवस्थापक की प्रतीक्षा करें।", + "userLogin": "उपयोगकर्ता लॉगिन", + "OR": "या", + "loading": "लोड हो रहा है...", + "selectOrg": "कोई संगठन चुनें" }, "latestEvents": { "eventCardTitle": "आगामी घटनाएँ", diff --git a/public/locales/sp.json b/public/locales/sp.json index 4b25f43e6c..c084402939 100644 --- a/public/locales/sp.json +++ b/public/locales/sp.json @@ -37,7 +37,42 @@ "lowercase_check": "Al menos una letra mayuscula", "uppercase_check": "Al menos una letra minúscula", "numeric_value_check": "Al menos un valor numérico", - "special_char_check": "Al menos un carácter especial" + "special_char_check": "Al menos un carácter especial", + "loading": "Cargando...", + "selectOrg": "Seleccione una organización", + "afterRegister": "Registro exitoso. Por favor, espere a que el administrador apruebe su solicitud." + }, + "userLoginPage": { + "title": "Administrador Talawa", + "fromPalisadoes": "Una aplicación de código abierto de los voluntarios de la Fundación palisados", + "talawa_portal": "Portal De Administración Talawa", + "login": "Acceso", + "register": "Registro", + "firstName": "Primer nombre", + "lastName": "Apellido", + "email": "Correo electrónico", + "password": "Clave", + "atleast_8_char_long": "Al menos 8 caracteres de largo", + "Password_and_Confirm_password_mismatches.": "Contraseña y Confirmar contraseña no coinciden.", + "confirmPassword": "Confirmar contraseña", + "forgotPassword": "Has olvidado tu contraseña ?", + "enterEmail": "ingrese correo electrónico", + "enterPassword": "introducir la contraseña", + "doNotOwnAnAccount": "¿No tienes una cuenta?", + "talawaApiUnavailable": "El servicio Talawa-API no está disponible. ¿Está funcionando? Verifica también la conectividad de tu red.", + "captchaError": "¡Error de captcha!", + "Please_check_the_captcha": "Por favor, revisa el captcha.", + "Something_went_wrong": "Algo salió mal. Inténtalo después de un tiempo", + "passwordMismatches": "Contraseña y Confirmar contraseña no coinciden.", + "fillCorrectly": "Complete todos los detalles correctamente.", + "notAuthorised": "¡Lo siento! ¡No estás autorizado!", + "notFound": "¡Usuario no encontrado!", + "successfullyRegistered": "Registrado con éxito. Espere hasta que sea aprobado", + "userLogin": "Inicio de sesión de usuario", + "afterRegister": "Registrado exitosamente. Espere a que el administrador apruebe su solicitud.", + "OR": "O", + "loading": "Cargando...", + "selectOrg": "Seleccione una organización" }, "latestEvents": { "eventCardTitle": "Próximos Eventos", diff --git a/public/locales/zh.json b/public/locales/zh.json index 0d5f717b00..d105c830bd 100644 --- a/public/locales/zh.json +++ b/public/locales/zh.json @@ -37,7 +37,42 @@ "lowercase_check": "至少一個小寫字母", "uppercase_check": "至少有一個大寫字母", "numeric_value_check": "至少一個數值", - "special_char_check": "至少一個特殊字符" + "special_char_check": "至少一個特殊字符", + "loading": "载入中...", + "selectOrg": "选择一个组织", + "afterRegister": "注册成功。请等待管理员批准您的请求" + }, + "userLoginPage": { + "title": "塔拉瓦管理員", + "fromPalisadoes": "柵欄 基金会志愿者的开源应用程序", + "talawa_portal": "塔拉瓦管理門戶", + "login": "登錄", + "register": "登記", + "firstName": "名", + "lastName": "姓", + "email": "電子郵件", + "password": "密碼", + "atleast_8_char_long": "至少 8 個字符長", + "Password_and_Confirm_password_mismatches.": "密碼和確認密碼不匹配。", + "confirmPassword": "確認密碼", + "forgotPassword": "忘記密碼 ？", + "enterEmail": "输入电子邮件", + "enterPassword": "输入密码", + "doNotOwnAnAccount": "沒有帳戶嗎？", + "talawaApiUnavailable": "服務不可用。它正在運行嗎？還要檢查您的網絡連接。", + "captchaError": "驗證碼錯誤！", + "Please_check_the_captcha": "請檢查驗證碼。", + "Something_went_wrong": "出了點問題，請稍後再試。", + "passwordMismatches": "密碼和確認密碼不匹配。", + "fillCorrectly": "正確填寫所有細節。", + "notAuthorised": "抱歉！你沒有被授權！", + "notFound": "找不到用戶！", + "successfullyRegistered": "註冊成功，請等待審核通過。", + "userLogin": "用户登录", + "afterRegister": "註冊成功。 請等待管理員批准您的請求。", + "OR": "或者", + "loading": "载入中...", + "selectOrg": "选择一个组织" }, "latestEvents": { "eventCardTitle": "即将举行的活动", diff --git a/schema.graphql b/schema.graphql index 0030ec7fc3..35c49f2cd4 100644 --- a/schema.graphql +++ b/schema.graphql @@ -1427,8 +1427,8 @@ input UserInput { email: EmailAddress! firstName: String! lastName: String! - organizationUserBelongsToId: ID password: String! + selectedOrganization : ID! } enum UserOrderByInput { diff --git a/src/components/LeftDrawer/LeftDrawer.test.tsx b/src/components/LeftDrawer/LeftDrawer.test.tsx index 3fee4bd40c..3873d66dc2 100644 --- a/src/components/LeftDrawer/LeftDrawer.test.tsx +++ b/src/components/LeftDrawer/LeftDrawer.test.tsx @@ -28,10 +28,6 @@ const resizeWindow = (width: number): void => { const propsOrg: InterfaceLeftDrawerProps = { ...props, }; -const propsUsers: InterfaceLeftDrawerProps = { - ...props, - hideDrawer: null, -}; const MOCKS = [ { @@ -73,6 +69,10 @@ describe('Testing Left Drawer component for SUPERADMIN', () => { setItem('SuperAdmin', true); setItem('FirstName', 'John'); setItem('LastName', 'Doe'); + setItem('UserImage', ''); + setItem('SuperAdmin', true); + setItem('FirstName', 'John'); + setItem('LastName', 'Doe'); render( @@ -86,6 +86,7 @@ describe('Testing Left Drawer component for SUPERADMIN', () => { expect(screen.getByText('My Organizations')).toBeInTheDocument(); expect(screen.getByText('Users')).toBeInTheDocument(); expect(screen.getByText('Community Profile')).toBeInTheDocument(); + expect(screen.getByText('Community Profile')).toBeInTheDocument(); expect(screen.getByText('Talawa Admin Portal')).toBeInTheDocument(); const orgsBtn = screen.getByTestId(/orgsBtn/i); @@ -97,6 +98,7 @@ describe('Testing Left Drawer component for SUPERADMIN', () => { orgsBtn.className.includes('text-white btn btn-success'), ).toBeTruthy(); expect(rolesBtn.className.includes('text-secondary btn')).toBeTruthy(); + expect(rolesBtn.className.includes('text-secondary btn')).toBeTruthy(); expect( communityProfileBtn.className.includes('text-secondary btn'), ).toBeTruthy(); @@ -108,11 +110,16 @@ describe('Testing Left Drawer component for SUPERADMIN', () => { }); test('Testing Drawer when hideDrawer is null', () => { + const tempProps: InterfaceLeftDrawerProps = { + ...props, + hideDrawer: false, + }; + render( - + , @@ -123,24 +130,18 @@ describe('Testing Left Drawer component for SUPERADMIN', () => { ...props, hideDrawer: false, }; - render( - - - - - - - , - ); }); - test('Testing Drawer when the screen size is less than or equal to 820px', () => { + const tempProps: InterfaceLeftDrawerProps = { + ...props, + hideDrawer: false, + }; resizeWindow(800); render( - + , @@ -155,35 +156,36 @@ describe('Testing Left Drawer component for SUPERADMIN', () => { orgsBtn.className.includes('text-white btn btn-success'), ).toBeTruthy(); }); -}); - -describe('Testing Left Drawer component for ADMIN', () => { - test('Components should be rendered properly', () => { - render( - - - - - - - , - ); - - expect(screen.getByText('My Organizations')).toBeInTheDocument(); - expect(screen.getByText('Talawa Admin Portal')).toBeInTheDocument(); - - expect(screen.getAllByText(/admin/i)).toHaveLength(1); - - const orgsBtn = screen.getByTestId(/orgsBtn/i); - orgsBtn.click(); - expect( - orgsBtn.className.includes('text-white btn btn-success'), - ).toBeTruthy(); - - // These screens arent meant for admins so they should not be present - expect(screen.queryByTestId(/rolesBtn/i)).toBeNull(); - userEvent.click(orgsBtn); - expect(global.window.location.pathname).toContain('/orglist'); + describe('Testing Left Drawer component for ADMIN', () => { + test('Components should be rendered properly', () => { + render( + + + + + + + , + ); + + expect(screen.getByText('My Organizations')).toBeInTheDocument(); + expect(screen.getByText('Talawa Admin Portal')).toBeInTheDocument(); + + expect(screen.getAllByText(/admin/i)).toHaveLength(1); + expect(screen.getAllByText(/admin/i)).toHaveLength(1); + + const orgsBtn = screen.getByTestId(/orgsBtn/i); + orgsBtn.click(); + expect( + orgsBtn.className.includes('text-white btn btn-success'), + ).toBeTruthy(); + + // These screens arent meant for admins so they should not be present + expect(screen.queryByTestId(/rolesBtn/i)).toBeNull(); + + userEvent.click(orgsBtn); + expect(global.window.location.pathname).toContain('/orglist'); + }); }); }); diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css b/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css index b300eb7e89..54560e7969 100644 --- a/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css +++ b/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css @@ -61,7 +61,6 @@ .leftDrawer .optionList { height: 100%; - overflow-y: auto; } .leftDrawer .optionList button { diff --git a/src/components/OrganizationScreen/OrganizationScreen.module.css b/src/components/OrganizationScreen/OrganizationScreen.module.css index 7570b14ced..9b8190a3ad 100644 --- a/src/components/OrganizationScreen/OrganizationScreen.module.css +++ b/src/components/OrganizationScreen/OrganizationScreen.module.css @@ -134,6 +134,9 @@ } @media (max-height: 900px) { + .pageContainer { + padding: 1rem 1.5rem 0 calc(300px + 2rem); + } .collapseSidebarButton { height: 30px; width: calc(300px + 1rem); diff --git a/src/screens/LoginPage/LoginPage.module.css b/src/screens/LoginPage/LoginPage.module.css index dba42696d7..e7ce0eca7e 100644 --- a/src/screens/LoginPage/LoginPage.module.css +++ b/src/screens/LoginPage/LoginPage.module.css @@ -14,6 +14,10 @@ height: 100vh; } +.selectOrgText input { + outline: none !important; +} + .row .left_portion .inner .palisadoes_logo { width: 600px; height: auto; diff --git a/src/screens/LoginPage/LoginPage.test.tsx b/src/screens/LoginPage/LoginPage.test.tsx index bac7b264db..a61f8adb2e 100644 --- a/src/screens/LoginPage/LoginPage.test.tsx +++ b/src/screens/LoginPage/LoginPage.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { MockedProvider } from '@apollo/react-testing'; -import { act, render, screen, fireEvent } from '@testing-library/react'; +import { act, render, screen, fireEvent, within } from '@testing-library/react'; import { Provider } from 'react-redux'; import { BrowserRouter } from 'react-router-dom'; import userEvent from '@testing-library/user-event'; @@ -13,13 +13,13 @@ import { LOGIN_MUTATION, RECAPTCHA_MUTATION, SIGNUP_MUTATION, - UPDATE_COMMUNITY, } from 'GraphQl/Mutations/mutations'; import { store } from 'state/store'; import i18nForTest from 'utils/i18nForTest'; import { BACKEND_URL } from 'Constant/constant'; import useLocalStorage from 'utils/useLocalstorage'; -import { GET_COMMUNITY_DATA } from 'GraphQl/Queries/Queries'; +import { GET_COMMUNITY_DATA, ORGANIZATION_LIST } from 'GraphQl/Queries/Queries'; +import { debug } from 'jest-preview'; const MOCKS = [ { @@ -92,6 +92,7 @@ const MOCKS = [ }, }, ]; + const MOCKS2 = [ { request: { @@ -121,9 +122,83 @@ const MOCKS2 = [ }, }, ]; +const MOCKS3 = [ + { + request: { + query: ORGANIZATION_LIST, + }, + result: { + data: { + organizations: [ + { + _id: '6437904485008f171cf29924', + image: null, + creator: { + firstName: 'Wilt', + lastName: 'Shepherd', + }, + name: 'Unity Foundation', + members: [ + { + _id: '64378abd85008f171cf2990d', + }, + ], + admins: [ + { + _id: '64378abd85008f171cf2990d', + }, + ], + createdAt: '2023-04-13T05:16:52.827Z', + address: { + city: 'Bronx', + countryCode: 'US', + dependentLocality: 'Some Dependent Locality', + line1: '123 Random Street', + line2: 'Apartment 456', + postalCode: '10451', + sortingCode: 'ABC-123', + state: 'NYC', + }, + }, + { + _id: 'db1d5caad2ade57ab811e681', + image: null, + creator: { + firstName: 'Sonya', + lastName: 'Jones', + }, + name: 'Mills Group', + members: [ + { + _id: '661b8410bd25a325da05e67c', + }, + ], + admins: [ + { + _id: '661b8410bd25a325da05e67c', + }, + ], + createdAt: '2024-04-14T07:21:52.940Z', + address: { + city: 'Lake Martineside', + countryCode: 'SL', + dependentLocality: 'Apt. 544', + line1: '5112 Dare Centers', + line2: 'Suite 163', + postalCode: '10452', + sortingCode: '46565-3458', + state: 'New Hampshire', + }, + }, + ], + }, + }, + }, +]; const link = new StaticMockLink(MOCKS, true); const link2 = new StaticMockLink(MOCKS2, true); +const link3 = new StaticMockLink(MOCKS3, true); async function wait(ms = 100): Promise { await act(() => { @@ -852,6 +927,33 @@ describe('Testing redirect if already logged in', () => { expect(mockNavigate).toHaveBeenCalledWith('/orglist'); }); }); +test('Render the Select Organization list and change the option', async () => { + render( + + + + + + + + + , + ); + + await wait(); + userEvent.click(screen.getByTestId(/goToRegisterPortion/i)); + await wait(); + const autocomplete = screen.getByTestId('selectOrg'); + const input = within(autocomplete).getByRole('combobox'); + autocomplete.focus(); + // the value here can be any string you want, so you may also consider to + // wrapper it as a function and pass in inputValue as parameter + fireEvent.change(input, { target: { value: 'a' } }); + fireEvent.keyDown(autocomplete, { key: 'ArrowDown' }); + fireEvent.keyDown(autocomplete, { key: 'Enter' }); + + debug(); +}); describe('Talawa-API server fetch check', () => { beforeEach(() => { diff --git a/src/screens/LoginPage/LoginPage.tsx b/src/screens/LoginPage/LoginPage.tsx index 4508684778..834232fb8a 100644 --- a/src/screens/LoginPage/LoginPage.tsx +++ b/src/screens/LoginPage/LoginPage.tsx @@ -22,7 +22,7 @@ import { RECAPTCHA_MUTATION, SIGNUP_MUTATION, } from 'GraphQl/Mutations/mutations'; -import { GET_COMMUNITY_DATA } from 'GraphQl/Queries/Queries'; +import { GET_COMMUNITY_DATA, ORGANIZATION_LIST } from 'GraphQl/Queries/Queries'; import { ReactComponent as PalisadoesLogo } from 'assets/svgs/palisadoes.svg'; import { ReactComponent as TalawaLogo } from 'assets/svgs/talawa.svg'; import ChangeLanguageDropDown from 'components/ChangeLanguageDropdown/ChangeLanguageDropDown'; @@ -32,6 +32,8 @@ import { errorHandler } from 'utils/errorHandler'; import useLocalStorage from 'utils/useLocalstorage'; import { socialMediaLinks } from '../../constants'; import styles from './LoginPage.module.css'; +import type { InterfaceQueryOrganizationListObject } from 'utils/interfaces'; +import { Autocomplete, TextField } from '@mui/material'; const loginPage = (): JSX.Element => { const { t } = useTranslation('translation', { keyPrefix: 'loginPage' }); @@ -59,6 +61,7 @@ const loginPage = (): JSX.Element => { signEmail: '', signPassword: '', cPassword: '', + signOrg: '', }); const [formState, setFormState] = useState({ email: '', @@ -73,6 +76,7 @@ const loginPage = (): JSX.Element => { numericValue: true, specialChar: true, }); + const [organizations, setOrganizations] = useState([]); const passwordValidationRegExp = { lowercaseCharRegExp: new RegExp('[a-z]'), @@ -115,6 +119,26 @@ const loginPage = (): JSX.Element => { const [signup, { loading: signinLoading }] = useMutation(SIGNUP_MUTATION); const [recaptcha, { loading: recaptchaLoading }] = useMutation(RECAPTCHA_MUTATION); + const { data: orgData } = useQuery(ORGANIZATION_LIST); + + useEffect(() => { + if (orgData) { + const options = orgData.organizations.map( + (org: InterfaceQueryOrganizationListObject) => { + const tempObj: { label: string; id: string } | null = {} as { + label: string; + id: string; + }; + tempObj['label'] = + `${org.name}(${org.address.city},${org.address.state},${org.address.countryCode})`; + tempObj['id'] = org._id; + return tempObj; + }, + ); + setOrganizations(options); + } + }, [orgData]); + useEffect(() => { async function loadResource(): Promise { try { @@ -156,8 +180,14 @@ const loginPage = (): JSX.Element => { const signupLink = async (e: ChangeEvent): Promise => { e.preventDefault(); - const { signfirstName, signlastName, signEmail, signPassword, cPassword } = - signformState; + const { + signfirstName, + signlastName, + signEmail, + signPassword, + cPassword, + signOrg, + } = signformState; const isVerified = await verifyRecaptcha(recaptchaToken); /* istanbul ignore next */ @@ -196,6 +226,7 @@ const loginPage = (): JSX.Element => { lastName: signlastName, email: signEmail, password: signPassword, + orgId: signOrg, }, }); @@ -211,6 +242,7 @@ const loginPage = (): JSX.Element => { signEmail: '', signPassword: '', cPassword: '', + signOrg: '', }); } } catch (error) { @@ -761,6 +793,32 @@ const loginPage = (): JSX.Element => { )} +
+ {t('selectOrg')} +
+ { + setSignFormState({ + ...signformState, + signOrg: value?.id ?? '', + }); + }} + options={organizations} + renderInput={(params) => ( + + )} + /> +
+
{REACT_APP_USE_RECAPTCHA === 'yes' ? (