From d277513f57c684a1498a9ebfdeb8431b15b0489d Mon Sep 17 00:00:00 2001 From: Kacper Michalik Date: Tue, 19 Sep 2023 09:51:48 +0200 Subject: [PATCH 01/14] desktop - component, container, story and test --- packages/desktop/src/renderer/Root.tsx | 2 + .../AggressiveWarningModal.component.tsx | 80 ++++++++++ .../AggressiveWarningModal.container.tsx | 34 ++++ .../AggressiveWarningModal.stories.tsx | 33 ++++ .../AggressiveWarningModal.test.tsx | 146 ++++++++++++++++++ .../src/renderer/sagas/modals/modals.slice.ts | 3 +- .../src/renderer/sagas/modals/modals.types.ts | 1 + 7 files changed, 298 insertions(+), 1 deletion(-) create mode 100644 packages/desktop/src/renderer/components/widgets/aggressiveWarningModal/AggressiveWarningModal.component.tsx create mode 100644 packages/desktop/src/renderer/components/widgets/aggressiveWarningModal/AggressiveWarningModal.container.tsx create mode 100644 packages/desktop/src/renderer/components/widgets/aggressiveWarningModal/AggressiveWarningModal.stories.tsx create mode 100644 packages/desktop/src/renderer/components/widgets/aggressiveWarningModal/AggressiveWarningModal.test.tsx diff --git a/packages/desktop/src/renderer/Root.tsx b/packages/desktop/src/renderer/Root.tsx index 8717893233..09b673b166 100644 --- a/packages/desktop/src/renderer/Root.tsx +++ b/packages/desktop/src/renderer/Root.tsx @@ -31,6 +31,7 @@ import ChannelCreationModal from './components/ChannelCreationModal/ChannelCreat import { SaveStateComponent } from './components/SaveState/SaveStateComponent' import UnregisteredModalContainer from './components/widgets/userLabel/unregistered/UnregisteredModal.container' import DuplicateModalContainer from './components/widgets/userLabel/duplicate/DuplicateModal.container' +import AggressiveWarningModalContainer from './components/widgets/aggressiveWarningModal/AggressiveWarningModal.container' // Trigger lerna export const persistor = persistStore(store) @@ -48,6 +49,7 @@ export default () => { + diff --git a/packages/desktop/src/renderer/components/widgets/aggressiveWarningModal/AggressiveWarningModal.component.tsx b/packages/desktop/src/renderer/components/widgets/aggressiveWarningModal/AggressiveWarningModal.component.tsx new file mode 100644 index 0000000000..d622639a26 --- /dev/null +++ b/packages/desktop/src/renderer/components/widgets/aggressiveWarningModal/AggressiveWarningModal.component.tsx @@ -0,0 +1,80 @@ +import React from 'react' +import Modal from '../../ui/Modal/Modal' +import { Button, Grid, Typography } from '@mui/material' +import { styled } from '@mui/material/styles' +import WarnIcon from '../../../static/images/exclamationMark.svg' + +const PREFIX = 'AggressiveWarningModalComponent-' + +const classes = { + bodyText: `${PREFIX}bodyText`, + button: `${PREFIX}button`, + image: `${PREFIX}image`, +} + +const StyledGrid = styled(Grid)(({ theme }) => ({ + [`& .${classes.bodyText}`]: { + textAlign: 'center', + width: '65%', + margin: '24px 0 4px', + }, + [`& .${classes.image}`]: { + width: '70px', + height: '70px', + margin: '30px 0 24px', + }, + [`& .${classes.button}`]: { + marginTop: 16, + textTransform: 'none', + padding: '0 24px', + height: 40, + borderRadius: '8px', + color: theme.palette.colors.white, + backgroundColor: theme.palette.colors.quietBlue, + '&:hover': { + opacity: 0.7, + backgroundColor: theme.palette.colors.quietBlue, + }, + }, +})) + +export interface AggressiveWarningModalComponentProps { + communityName: string + leaveCommunity: () => void + open: boolean + handleClose: () => void +} + +const AggressiveWarningModalComponent: React.FC = ({ + communityName, + leaveCommunity, + handleClose, + open, +}) => { + return ( + + + + Possible impersonation attack + + The owner of {communityName} has registered an invalid username. Either something is very + broken, the community owner is trying to impersonate other users, or the community owner has been hacked. +
+ This should never happen and we recommend leaving this community immediately! +
+ +
+
+ ) +} + +export default AggressiveWarningModalComponent diff --git a/packages/desktop/src/renderer/components/widgets/aggressiveWarningModal/AggressiveWarningModal.container.tsx b/packages/desktop/src/renderer/components/widgets/aggressiveWarningModal/AggressiveWarningModal.container.tsx new file mode 100644 index 0000000000..03f764fa0d --- /dev/null +++ b/packages/desktop/src/renderer/components/widgets/aggressiveWarningModal/AggressiveWarningModal.container.tsx @@ -0,0 +1,34 @@ +import { capitalizeFirstLetter } from '@quiet/common' +import { communities } from '@quiet/state-manager' +import React from 'react' +import { useSelector } from 'react-redux' +import { clearCommunity } from '../../..' +import { useModal } from '../../../containers/hooks' +import { ModalName } from '../../../sagas/modals/modals.types' +import AggressiveWarningModalComponent from './AggressiveWarningModal.component' + +const AggressiveWarningModalContainer = () => { + const aggressiveWarningModal = useModal(ModalName.aggressiveWarningModal) + + const community = useSelector(communities.selectors.currentCommunity) + + let communityName = '' + + if (community?.name) { + communityName = capitalizeFirstLetter(community.name) + } + + const leaveCommunity = async () => { + await clearCommunity() + } + + return ( + + ) +} + +export default AggressiveWarningModalContainer diff --git a/packages/desktop/src/renderer/components/widgets/aggressiveWarningModal/AggressiveWarningModal.stories.tsx b/packages/desktop/src/renderer/components/widgets/aggressiveWarningModal/AggressiveWarningModal.stories.tsx new file mode 100644 index 0000000000..017046555d --- /dev/null +++ b/packages/desktop/src/renderer/components/widgets/aggressiveWarningModal/AggressiveWarningModal.stories.tsx @@ -0,0 +1,33 @@ +import React from 'react' +import { ComponentStory, ComponentMeta } from '@storybook/react' +import { withTheme } from '../../../storybook/decorators' +import AggressiveWarningModalComponent, { + AggressiveWarningModalComponentProps, +} from './AggressiveWarningModal.component' + +const Template: ComponentStory = args => { + return ( +
+ +
+ ) +} + +export const Component = Template.bind({}) + +const args: AggressiveWarningModalComponentProps = { + handleClose: function (): void {}, + open: true, + communityName: 'devteam', + leaveCommunity: function (): void {}, +} + +Component.args = args + +const component: ComponentMeta = { + title: 'Components/AggressiveWarningModalComponent', + decorators: [withTheme], + component: AggressiveWarningModalComponent, +} + +export default component diff --git a/packages/desktop/src/renderer/components/widgets/aggressiveWarningModal/AggressiveWarningModal.test.tsx b/packages/desktop/src/renderer/components/widgets/aggressiveWarningModal/AggressiveWarningModal.test.tsx new file mode 100644 index 0000000000..369755bacd --- /dev/null +++ b/packages/desktop/src/renderer/components/widgets/aggressiveWarningModal/AggressiveWarningModal.test.tsx @@ -0,0 +1,146 @@ +import React from 'react' +import theme from '../../../theme' +import { ThemeProvider } from '@mui/material/styles' +import { renderComponent } from '../../../testUtils/renderComponent' +import AggressiveWarningModalComponent from './AggressiveWarningModal.component' + +describe('UnregisteredModalComponent', () => { + it('renderComponent', () => { + const result = renderComponent( + + {}} + open={true} + communityName={'devteam'} + leaveCommunity={() => {}} + /> + + ) + expect(result.baseElement).toMatchInlineSnapshot(` + +