{t('login')}
+{t('loginIntoYourAccount')}
+
+
+
+
+
+
+
+
+
+
+
+
+ {t('emailAddress')}
+{t('password')}
+
+
+ {t('forgotPassword')}
+
+
+
+
+ + + + ); +} diff --git a/src/components/UserPortal/OrganizationCard/OrganizationCard.module.css b/src/components/UserPortal/OrganizationCard/OrganizationCard.module.css new file mode 100644 index 0000000000..87eee09d9a --- /dev/null +++ b/src/components/UserPortal/OrganizationCard/OrganizationCard.module.css @@ -0,0 +1,17 @@ +.mainContainer { + width: 100%; + display: flex; + flex-direction: row; + padding: 10px; + cursor: pointer; + background-color: white; + border-radius: 10px; + box-shadow: 2px 2px 8px 0px #c8c8c8; + overflow: hidden; +} + +.organizationDetails { + display: flex; + flex-direction: column; + justify-content: center; +} diff --git a/src/components/UserPortal/OrganizationCard/OrganizationCard.test.tsx b/src/components/UserPortal/OrganizationCard/OrganizationCard.test.tsx new file mode 100644 index 0000000000..f04c87b526 --- /dev/null +++ b/src/components/UserPortal/OrganizationCard/OrganizationCard.test.tsx @@ -0,0 +1,67 @@ +import React from 'react'; +import { act, render } from '@testing-library/react'; +import { MockedProvider } from '@apollo/react-testing'; +import { I18nextProvider } from 'react-i18next'; + +import { BrowserRouter } from 'react-router-dom'; +import { Provider } from 'react-redux'; +import { store } from 'state/store'; +import i18nForTest from 'utils/i18nForTest'; +import { StaticMockLink } from 'utils/StaticMockLink'; +import OrganizationCard from './OrganizationCard'; + +const link = new StaticMockLink([], true); + +async function wait(ms = 100): Promise
+ 
+
+ );
+}
+
+export default organizationCard;
diff --git a/src/components/UserPortal/Register/Register.module.css b/src/components/UserPortal/Register/Register.module.css
new file mode 100644
index 0000000000..1fc2a34af2
--- /dev/null
+++ b/src/components/UserPortal/Register/Register.module.css
@@ -0,0 +1,15 @@
+.loginText {
+ cursor: pointer;
+}
+
+.borderNone {
+ border: none;
+}
+
+.colorWhite {
+ color: white;
+}
+
+.colorPrimary {
+ background: #31bb6b;
+}
diff --git a/src/components/UserPortal/Register/Register.test.tsx b/src/components/UserPortal/Register/Register.test.tsx
new file mode 100644
index 0000000000..f730baca73
--- /dev/null
+++ b/src/components/UserPortal/Register/Register.test.tsx
@@ -0,0 +1,268 @@
+import type { SetStateAction } from 'react';
+import React from 'react';
+import { act, render, screen } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import userEvent from '@testing-library/user-event';
+import { I18nextProvider } from 'react-i18next';
+
+import { SIGNUP_MUTATION } from 'GraphQl/Mutations/mutations';
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import Register from './Register';
+import { toast } from 'react-toastify';
+
+const MOCKS = [
+ {
+ request: {
+ query: SIGNUP_MUTATION,
+ variables: {
+ firstName: 'John',
+ lastName: 'Doe',
+ email: 'johndoe@gmail.com',
+ password: 'johnDoe',
+ },
+ },
+ result: {
+ data: {
+ signUp: {
+ user: {
+ _id: '1',
+ },
+ accessToken: 'accessToken',
+ refreshToken: 'refreshToken',
+ },
+ },
+ },
+ },
+];
+
+const formData = {
+ firstName: 'John',
+ lastName: 'Doe',
+ email: 'johndoe@gmail.com',
+ password: 'johnDoe',
+ confirmPassword: 'johnDoe',
+};
+
+const link = new StaticMockLink(MOCKS, true);
+
+async function wait(ms = 100): Promise
+ {props.name}
+ {props.description}
+
+ {t('register')}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {t('firstName')}
+{t('lastName')}
+{t('emailAddress')}
+{t('password')}
+{t('confirmPassword')}
+
+ {t('alreadyhaveAnAccount')}{' '}
+
+ {t('login')}
+
+
+
+ );
+}
diff --git a/src/components/UserPortal/SecuredRouteForUser/SecuredRouteForUser.tsx b/src/components/UserPortal/SecuredRouteForUser/SecuredRouteForUser.tsx
new file mode 100644
index 0000000000..967e6c00a0
--- /dev/null
+++ b/src/components/UserPortal/SecuredRouteForUser/SecuredRouteForUser.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Redirect, Route } from 'react-router-dom';
+
+const SecuredRouteForUser = (props: any): JSX.Element => {
+ const isLoggedIn = localStorage.getItem('IsLoggedIn');
+ return isLoggedIn === 'TRUE' ? (
+ <>
+
+ 
+
+ );
+}
+
+export default userSidebar;
diff --git a/src/screens/UserPortal/Organizations/Organizations.module.css b/src/screens/UserPortal/Organizations/Organizations.module.css
new file mode 100644
index 0000000000..6f83c82d8a
--- /dev/null
+++ b/src/screens/UserPortal/Organizations/Organizations.module.css
@@ -0,0 +1,44 @@
+.borderNone {
+ border: none;
+}
+
+.colorWhite {
+ color: white;
+}
+
+.maxWidth {
+ max-width: 300px;
+}
+
+.colorLight {
+ background-color: #f5f5f5;
+}
+
+.mainContainer {
+ width: 50%;
+ flex-grow: 3;
+ padding: 40px;
+ max-height: 100%;
+ overflow: auto;
+}
+
+.content {
+ height: fit-content;
+ min-height: calc(100% - 40px);
+}
+
+.gap {
+ gap: 20px;
+}
+
+.paddingY {
+ padding: 30px 0px;
+}
+
+.containerHeight {
+ height: calc(100vh - 61px);
+}
+
+.colorPrimary {
+ background: #31bb6b;
+}
diff --git a/src/screens/UserPortal/Organizations/Organizations.test.tsx b/src/screens/UserPortal/Organizations/Organizations.test.tsx
new file mode 100644
index 0000000000..6d92831940
--- /dev/null
+++ b/src/screens/UserPortal/Organizations/Organizations.test.tsx
@@ -0,0 +1,221 @@
+import React from 'react';
+import { act, render, screen } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import { I18nextProvider } from 'react-i18next';
+
+import {
+ USER_CREATED_ORGANIZATIONS,
+ USER_JOINED_ORGANIZATIONS,
+ USER_ORGANIZATION_CONNECTION,
+} from 'GraphQl/Queries/Queries';
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import { StaticMockLink } from 'utils/StaticMockLink';
+import Organizations from './Organizations';
+import userEvent from '@testing-library/user-event';
+
+const MOCKS = [
+ {
+ request: {
+ query: USER_CREATED_ORGANIZATIONS,
+ variables: {
+ id: localStorage.getItem('userId'),
+ },
+ },
+ result: {
+ data: {
+ users: [
+ {
+ createdOrganizations: [
+ {
+ __typename: 'Organization',
+ _id: '6401ff65ce8e8406b8f07af2',
+ name: 'createdOrganization',
+ image: '',
+ description: 'New Desc',
+ },
+ ],
+ },
+ ],
+ },
+ },
+ },
+ {
+ request: {
+ query: USER_ORGANIZATION_CONNECTION,
+ variables: {
+ filter: '',
+ },
+ },
+ result: {
+ data: {
+ organizationsConnection: [
+ {
+ __typename: 'Organization',
+ _id: '6401ff65ce8e8406b8f07af2',
+ image: '',
+ name: 'anyOrganization1',
+ description: 'desc',
+ isPublic: true,
+ creator: { __typename: 'User', firstName: 'John', lastName: 'Doe' },
+ },
+ {
+ __typename: 'Organization',
+ _id: '6401ff65ce8e8406b8f07af3',
+ image: '',
+ name: 'anyOrganization2',
+ description: 'desc',
+ isPublic: true,
+ creator: { __typename: 'User', firstName: 'John', lastName: 'Doe' },
+ },
+ ],
+ },
+ },
+ },
+ {
+ request: {
+ query: USER_JOINED_ORGANIZATIONS,
+ variables: {
+ id: localStorage.getItem('userId'),
+ },
+ },
+ result: {
+ data: {
+ users: [
+ {
+ joinedOrganizations: [
+ {
+ __typename: 'Organization',
+ _id: '6401ff65ce8e8406b8f07af2',
+ name: 'joinedOrganization',
+ image: '',
+ description: 'New Desc',
+ },
+ ],
+ },
+ ],
+ },
+ },
+ },
+ {
+ request: {
+ query: USER_ORGANIZATION_CONNECTION,
+ variables: {
+ filter: '2',
+ },
+ },
+ result: {
+ data: {
+ organizationsConnection: [
+ {
+ __typename: 'Organization',
+ _id: '6401ff65ce8e8406b8f07af3',
+ image: '',
+ name: 'anyOrganization2',
+ description: 'desc',
+ isPublic: true,
+ creator: { __typename: 'User', firstName: 'John', lastName: 'Doe' },
+ },
+ ],
+ },
+ },
+ },
+];
+
+const link = new StaticMockLink(MOCKS, true);
+
+async function wait(ms = 100): Promise
+
+ + {`${details.firstName} ${details.lastName}`} +
+{details.email}
+
+
+ {organizations.length ? (
+ organizations.map((organization: any, index) => {
+ return (
+
+
+ );
+ })
+ ) : (
+
+
+
+ {t('yourOrganizations')}
+
+
+ 
+
+ {organization.name}
+ {t('noOrganizations')}
+ )}
+
+
+ {t('viewAll')}
+
+
+
+
+ );
+}
diff --git a/src/screens/UserPortal/UserLoginPage/UserLoginPage.module.css b/src/screens/UserPortal/UserLoginPage/UserLoginPage.module.css
new file mode 100644
index 0000000000..fcb12ce679
--- /dev/null
+++ b/src/screens/UserPortal/UserLoginPage/UserLoginPage.module.css
@@ -0,0 +1,48 @@
+body::before {
+ content: none !important;
+}
+
+.leftPane {
+ align-items: center;
+ width: 60%;
+ min-width: 300px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+.palisadoesImage {
+ width: 100%;
+ height: auto;
+ max-width: 700px;
+}
+
+.talawaImage {
+ width: 40%;
+ height: auto;
+ margin-left: 50%;
+ transform: translateX(-50%);
+}
+
+.mainContainer {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 10px;
+ min-height: 100vh;
+}
+
+.contentContainer {
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ padding: 20px 50px;
+ background-color: #f5f5f5;
+}
+
+@media only screen and (max-width: 800px) {
+ .leftPane {
+ width: 100%;
+ }
+}
diff --git a/src/screens/UserPortal/UserLoginPage/UserLoginPage.test.tsx b/src/screens/UserPortal/UserLoginPage/UserLoginPage.test.tsx
new file mode 100644
index 0000000000..ff2175ccc1
--- /dev/null
+++ b/src/screens/UserPortal/UserLoginPage/UserLoginPage.test.tsx
@@ -0,0 +1,162 @@
+import React from 'react';
+import { MockedProvider } from '@apollo/react-testing';
+import { act, render, screen } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+import cookies from 'js-cookie';
+import { StaticMockLink } from 'utils/StaticMockLink';
+
+import UserLoginPage from './UserLoginPage';
+import userEvent from '@testing-library/user-event';
+
+async function wait(ms = 100): Promise
+
+
+
+
+
+
+
+
+ {modes[mode]}
+
+
+ {modes.map((value, index) => {
+ return (
+ setMode(index)}
+ >
+ {value}
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
+ {organizations && organizations.length > 0 ? (
+ (rowsPerPage > 0
+ ? organizations.slice(
+ page * rowsPerPage,
+ page * rowsPerPage + rowsPerPage
+ )
+ : /* istanbul ignore next */
+ organizations
+ ).map((organization: any, index) => {
+ const cardProps: InterfaceOrganizationCardProps = {
+ name: organization.name,
+ image: organization.image,
+ id: organization._id,
+ description: organization.description,
+ };
+ return
+
+
+ );
+}
+ 
+
+ +
{t('fromPalisadoes')}
+ +
+
+ {languages.map((language, index: number) => (
+ => {
+ await i18next.changeLanguage(language.code);
+ }}
+ disabled={currentLanguageCode === language.code}
+ data-testid={`changeLanguageBtn${index}`}
+ >
+ {' '}
+ {language.name}
+
+ ))}
+
+ 
+ {
+ /* istanbul ignore next */
+ currentMode === 'login' ? (
+
+