feat: Integrated Dicebear Library To Enhance Security

__mocks__/@dicebear/collection.ts

@@ -0,0 +1 @@
+export const initials = jest.fn();

__mocks__/@dicebear/core.ts

@@ -0,0 +1,5 @@
+export const createAvatar = jest.fn(() => {
+  return {
+    toDataUriSync: jest.fn(() => 'mocked-data-uri'),
+  };
+});

jest.config.js

@@ -25,6 +25,8 @@ export default {
   moduleNameMapper: {
     '^react-native$': 'react-native-web',
     '^@mui/(.*)$': '<rootDir>/node_modules/@mui/$1',
+    '^@dicebear/core$': '<rootDir>/__mocks__/@dicebear/core.ts',
+    '^@dicebear/collection$': '<rootDir>/__mocks__/@dicebear/collection.ts',
   },
   moduleFileExtensions: [
     'web.js',

package.json

@@ -8,6 +8,8 @@
     "@apollo/client": "^3.4.0-beta.19",
     "@apollo/link-error": "^2.0.0-beta.3",
     "@apollo/react-testing": "^4.0.0",
+    "@dicebear/collection": "^7.0.4",
+    "@dicebear/core": "^7.0.4",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.8.3",

src/components/Avatar/Avatar.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Avatar from './Avatar';
+import { BrowserRouter } from 'react-router-dom';
+import { I18nextProvider } from 'react-i18next';
+import i18nForTest from 'utils/i18nForTest';
+
+describe('Avatar component', () => {
+  test('renders with name and alt attribute', () => {
+    const testName = 'John Doe';
+    const testAlt = 'Test Alt Text';
+    const testSize = 64;
+
+    const { getByAltText } = render(
+      <BrowserRouter>
+        <I18nextProvider i18n={i18nForTest}>
+          <Avatar name={testName} alt={testAlt} size={testSize} />
+        </I18nextProvider>
+      </BrowserRouter>,
+    );
+    const avatarElement = getByAltText(testAlt);
+
+    expect(avatarElement).toBeInTheDocument();
+    expect(avatarElement.getAttribute('src')).toBeDefined();
+  });
+});

src/components/Avatar/Avatar.tsx

@@ -0,0 +1,24 @@
+import React, { useMemo } from 'react';
+import { createAvatar } from '@dicebear/core';
+import { initials } from '@dicebear/collection';
+
+interface InterfaceAvatarProps {
+  name: string;
+  alt?: string;
+  size?: number;
+}
+
+const Avatar = ({ name, alt, size }: InterfaceAvatarProps): JSX.Element => {
+  const avatar = useMemo(() => {
+    return createAvatar(initials, {
+      size: size || 128,
+      seed: name,
+    }).toDataUriSync();
+  }, [name]);
+
+  const svg = avatar.toString();
+
+  return <img src={svg} alt={alt} />;
+};
+
+export default Avatar;

src/components/LeftDrawer/LeftDrawer.test.tsx

@@ -12,6 +12,7 @@ import { REVOKE_REFRESH_TOKEN } from 'GraphQl/Mutations/mutations';
 import { StaticMockLink } from 'utils/StaticMockLink';
 import { MockedProvider } from '@apollo/react-testing';
 import useLocalStorage from 'utils/useLocalstorage';
+import Avatar from 'components/Avatar/Avatar';
 
 const { setItem } = useLocalStorage();
 
@@ -52,10 +53,7 @@ jest.mock('react-toastify', () => ({
 beforeEach(() => {
   setItem('FirstName', 'John');
   setItem('LastName', 'Doe');
-  setItem(
-    'UserImage',
-    'https://api.dicebear.com/5.x/initials/svg?seed=John%20Doe',
-  );
+  setItem('UserImage', <Avatar name="John Doe" alt="John Doe" />);
 });
 
 afterEach(() => {

src/components/LeftDrawer/LeftDrawer.tsx

@@ -11,6 +11,7 @@ import styles from './LeftDrawer.module.css';
 import { useMutation } from '@apollo/client';
 import { REVOKE_REFRESH_TOKEN } from 'GraphQl/Mutations/mutations';
 import useLocalStorage from 'utils/useLocalstorage';
+import Avatar from 'components/Avatar/Avatar';
 
 export interface InterfaceLeftDrawerProps {
   hideDrawer: boolean | null;
@@ -115,8 +116,8 @@ const leftDrawer = ({
               {userImage && userImage !== 'null' ? (
                 <img src={userImage} alt={`profile picture`} />
               ) : (
-                <img
-                  src={`https://api.dicebear.com/5.x/initials/svg?seed=${firstName}%20${lastName}`}
+                <Avatar
+                  name={`${firstName} ${lastName}`}
                   alt={`dummy picture`}
                 />
               )}

src/components/LeftDrawerEvent/LeftDrawerEvent.test.tsx

@@ -12,6 +12,7 @@ import { MockedProvider } from '@apollo/react-testing';
 import { EVENT_FEEDBACKS } from 'GraphQl/Queries/Queries';
 import { REVOKE_REFRESH_TOKEN } from 'GraphQl/Mutations/mutations';
 import useLocalStorage from 'utils/useLocalstorage';
+import Avatar from 'components/Avatar/Avatar';
 
 const { setItem } = useLocalStorage();
 
@@ -86,10 +87,7 @@ jest.mock('@mui/x-charts/PieChart', () => ({
 beforeEach(() => {
   setItem('FirstName', 'John');
   setItem('LastName', 'Doe');
-  setItem(
-    'UserImage',
-    'https://api.dicebear.com/5.x/initials/svg?seed=John%20Doe',
-  );
+  setItem('UserImage', <Avatar name="John Doe" alt="John Doe" />);
 });
 
 afterEach(() => {

src/components/LeftDrawerEvent/LeftDrawerEvent.tsx

@@ -12,6 +12,7 @@ import { EventStatsWrapper } from 'components/EventStats/EventStatsWrapper';
 import { REVOKE_REFRESH_TOKEN } from 'GraphQl/Mutations/mutations';
 import { useMutation } from '@apollo/client';
 import useLocalStorage from 'utils/useLocalstorage';
+import Avatar from 'components/Avatar/Avatar';
 
 export interface InterfaceLeftDrawerProps {
   event: {
@@ -68,10 +69,8 @@ const leftDrawerEvent = ({
         <div className={styles.organizationContainer}>
           <button className={styles.profileContainer} data-testid="OrgBtn">
             <div className={styles.imageContainer}>
-              <img
-                src={`https://api.dicebear.com/5.x/initials/svg?seed=${event.title
-                  .split(' ')
-                  .join('%20')}`}
+              <Avatar
+                name={event.title.split(' ').join('%20')}
                 alt="Dummy Event Picture"
               />
             </div>
@@ -135,8 +134,8 @@ const leftDrawerEvent = ({
               {userImage && userImage !== 'null' ? (
                 <img src={userImage} alt={`Profile Picture`} />
               ) : (
-                <img
-                  src={`https://api.dicebear.com/5.x/initials/svg?seed=${firstName}%20${lastName}`}
+                <Avatar
+                  name={`${firstName} ${lastName}`}
                   alt={`Dummy User Picture`}
                 />
               )}

src/components/LeftDrawerEvent/LeftDrawerEventWrapper.test.tsx

@@ -11,6 +11,7 @@ import {
 import { MockedProvider } from '@apollo/react-testing';
 import { EVENT_FEEDBACKS } from 'GraphQl/Queries/Queries';
 import useLocalStorage from 'utils/useLocalstorage';
+import Avatar from 'components/Avatar/Avatar';
 
 const { setItem } = useLocalStorage();
 
@@ -65,10 +66,7 @@ jest.mock('@mui/x-charts/PieChart', () => ({
 beforeEach(() => {
   setItem('FirstName', 'John');
   setItem('LastName', 'Doe');
-  setItem(
-    'UserImage',
-    'https://api.dicebear.com/5.x/initials/svg?seed=John%20Doe',
-  );
+  setItem('UserImage', <Avatar name="John Doe" alt="John Doe" />);
 });
 
 afterEach(() => {

src/components/LeftDrawerOrg/LeftDrawerOrg.test.tsx

@@ -16,6 +16,7 @@ import { act } from 'react-dom/test-utils';
 import { StaticMockLink } from 'utils/StaticMockLink';
 import { REVOKE_REFRESH_TOKEN } from 'GraphQl/Mutations/mutations';
 import useLocalStorage from 'utils/useLocalstorage';
+import Avatar from 'components/Avatar/Avatar';
 
 const { setItem } = useLocalStorage();
 
@@ -145,8 +146,7 @@ const MOCKS_WITH_IMAGE = [
         organizations: [
           {
             _id: '123',
-            image:
-              'https://api.dicebear.com/5.x/initials/svg?seed=Test%20Organization',
+            image: <Avatar name="Test Organization" alt="Test Organization" />,
             creator: {
               firstName: 'John',
               lastName: 'Doe',
@@ -239,10 +239,7 @@ async function wait(ms = 100): Promise<void> {
 beforeEach(() => {
   setItem('FirstName', 'John');
   setItem('LastName', 'Doe');
-  setItem(
-    'UserImage',
-    'https://api.dicebear.com/5.x/initials/svg?seed=John%20Doe',
-  );
+  setItem('UserImage', <Avatar name="John Doe" alt="John Doe" />);
 });
 
 afterEach(() => {

src/components/LeftDrawerOrg/LeftDrawerOrg.tsx

@@ -15,6 +15,7 @@ import { ReactComponent as TalawaLogo } from 'assets/svgs/talawa.svg';
 import styles from './LeftDrawerOrg.module.css';
 import { REVOKE_REFRESH_TOKEN } from 'GraphQl/Mutations/mutations';
 import useLocalStorage from 'utils/useLocalstorage';
+import Avatar from 'components/Avatar/Avatar';
 
 export interface InterfaceLeftDrawerProps {
   orgId: string;
@@ -118,9 +119,9 @@ const leftDrawerOrg = ({
                 {organization.image ? (
                   <img src={organization.image} alt={`profile picture`} />
                 ) : (
-                  <img
-                    src={`https://api.dicebear.com/5.x/initials/svg?seed=${organization.name}`}
-                    alt={`Dummy Organization Picture`}
+                  <Avatar
+                    name={organization.name}
+                    alt={'Dummy Organization Picture'}
                   />
                 )}
               </div>
@@ -187,8 +188,8 @@ const leftDrawerOrg = ({
               {userImage && userImage !== 'null' ? (
                 <img src={userImage} alt={`profile picture`} />
               ) : (
-                <img
-                  src={`https://api.dicebear.com/5.x/initials/svg?seed=${firstName}%20${lastName}`}
+                <Avatar
+                  name={`${firstName} ${lastName}`}
                   alt={`dummy picture`}
                 />
               )}

src/components/OrgListCard/OrgListCard.test.tsx

@@ -12,6 +12,7 @@ import { IS_SAMPLE_ORGANIZATION_QUERY } from 'GraphQl/Queries/Queries';
 import { StaticMockLink } from 'utils/StaticMockLink';
 import { MockedProvider } from '@apollo/react-testing';
 import useLocalStorage from 'utils/useLocalstorage';
+import Avatar from 'components/Avatar/Avatar';
 
 const { setItem } = useLocalStorage();
 
@@ -34,7 +35,7 @@ const props: InterfaceOrgListCardProps = {
   data: {
     _id: 'xyz',
     name: 'Dogs Care',
-    image: 'https://api.dicebear.com/5.x/initials/svg?seed=John%20Doe',
+    image: (<Avatar name="John Doe" alt="John Doe" />) as unknown as string,
     address: {
       city: 'Sample City',
       countryCode: 'US',

src/components/OrgListCard/OrgListCard.tsx

@@ -9,6 +9,7 @@ import LocationOnIcon from '@mui/icons-material/LocationOn';
 import { IS_SAMPLE_ORGANIZATION_QUERY } from 'GraphQl/Queries/Queries';
 import { useQuery } from '@apollo/client';
 import { Tooltip } from '@mui/material';
+import Avatar from 'components/Avatar/Avatar';
 
 export interface InterfaceOrgListCardProps {
   data: InterfaceOrgConnectionInfoType;
@@ -42,19 +43,20 @@ function orgListCard(props: InterfaceOrgListCardProps): JSX.Element {
       <div className={styles.orgCard}>
         <div className={styles.innerContainer}>
           <div className={styles.orgImgContainer}>
-            <img
-              src={
-                image
-                  ? image
-                  : `https://api.dicebear.com/5.x/initials/svg?seed=${name
-                      .split(/\s+/)
-                      .map((word) => word.charAt(0))
-                      .slice(0, 2)
-                      .join('')}`
-              }
-              alt={`${name} image`}
-              data-testid={image ? '' : 'emptyContainerForImage'}
-            />
+            <span data-testid={image ? '' : 'emptyContainerForImage'}>
+              {image ? (
+                <img src={image} alt={`${name} image`} />
+              ) : (
+                <Avatar
+                  name={name
+                    .split(/\s+/)
+                    .map((word) => word.charAt(0))
+                    .slice(0, 2)
+                    .join('')}
+                  alt={`${name} image`}
+                />
+              )}
+            </span>
           </div>
           <div className={styles.content}>
             <Tooltip title={name} placement="top-end">

src/components/UserPortal/ContactCard/ContactCard.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import styles from './ContactCard.module.css';
+import Avatar from 'components/Avatar/Avatar';
 
 interface InterfaceContactCardProps {
   id: string;
@@ -14,9 +15,6 @@ interface InterfaceContactCardProps {
 
 function contactCard(props: InterfaceContactCardProps): JSX.Element {
   const contactName = `${props.firstName} ${props.lastName}`;
-  const imageUrl = props.image
-    ? props.image
-    : `https://api.dicebear.com/5.x/initials/svg?seed=${contactName}`;
 
   const handleSelectedContactChange = (): void => {
     props.setSelectedContact(props.id);
@@ -40,7 +38,13 @@ function contactCard(props: InterfaceContactCardProps): JSX.Element {
         onClick={handleSelectedContactChange}
         data-testid="contactContainer"
       >
-        <img src={imageUrl} alt={contactName} className={styles.contactImage} />
+        <span className={styles.contactImage}>
+          {props.image ? (
+            <img src={props.image} alt={contactName} />
+          ) : (
+            <Avatar name={contactName} alt={contactName} />
+          )}
+        </span>
         <div className={styles.contactNameContainer}>
           <b>{contactName}</b>
           <small className={styles.grey}>{props.email}</small>