Skip to content

Commit

Permalink
Merge pull request #846 from JoinColony/ui/15529854-deletion-modal
Browse files Browse the repository at this point in the history
feat: added deletion modal
  • Loading branch information
CzarekDryl authored Jul 20, 2023
2 parents ed54495 + b167ff2 commit 6d0a74e
Show file tree
Hide file tree
Showing 7 changed files with 162 additions and 28 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { WalletConnectedTopMenuProps } from './types';
import NavigationTools from '~common/Extensions/NavigationTools';
import { useMobile } from '~hooks';
import UserAvatarDetails from '~v5/shared/UserAvatarDetails';
import { USER_EDIT_ROUTE } from '~routes';

const displayName =
'common.Extensions.UserNavigation.partials.WalletConnectedTopMenu';
Expand Down Expand Up @@ -48,7 +49,7 @@ const WalletConnectedTopMenu: FC<WalletConnectedTopMenuProps> = ({
isVerified={isVerified}
/>
</div>
<Link to="/" className="navigation-link">
<Link to={USER_EDIT_ROUTE} className="navigation-link">
<Icon name="user-circle-gear" appearance={{ size: iconSize }} />
<p className="ml-2">
{formatMessage({ id: 'userMenu.menageTitle' })}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,42 +1,97 @@
import React, { FC } from 'react';
import React, { FC, useState } from 'react';
import { useIntl } from 'react-intl';

import Navigation from '~v5/common/Navigation';
import TwoColumns from '~v5/frame/TwoColumns';
import Spinner from '~v5/shared/Spinner';
import SettingsRow from '~v5/common/SettingsRow';
import FeesForm from '../FeesForm';
import RpcForm from '../RpcForm/RpcForm';
import Modal from '~v5/shared/Modal';
import InformationList from '~v5/shared/InformationList';
import { modalInformations } from './consts';
import Textarea from '~v5/common/Fields/Textarea';
import Checkbox from '~v5/common/Checkbox';

const displayName = 'v5.pages.UserAdvancedPage.partials.UserAdvancedSettings';

const UserAdvancedSettings: FC = () => (
<Spinner loadingText={{ id: 'loading.userAdvancedPage' }}>
<TwoColumns aside={<Navigation pageName="profile" />}>
<FeesForm />
<RpcForm />
<div className="border-b border-gray-200">
const UserAdvancedSettings: FC = () => {
const [isChecked, setIsChecked] = useState(false);
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const { formatMessage } = useIntl();

return (
<Spinner loadingText={{ id: 'loading.userAdvancedPage' }}>
<TwoColumns aside={<Navigation pageName="profile" />}>
<FeesForm />
<RpcForm />
<div className="border-b border-gray-200">
<SettingsRow
title={{ id: 'advancedSettings.account.title' }}
description={{ id: 'advancedSettings.account.description' }}
// @TODO: Add functionality to download user data
onClick={() => {}}
buttonLabel={{ id: 'button.download' }}
buttonIcon="file-arrow-down"
buttonMode="primaryOutline"
/>
</div>
<SettingsRow
title={{ id: 'advancedSettings.account.title' }}
description={{ id: 'advancedSettings.account.description' }}
// @TODO: Add functionality to download user data
onClick={() => {}}
buttonLabel={{ id: 'button.download' }}
buttonIcon="file-arrow-down"
buttonMode="primaryOutline"
title={{ id: 'advancedSettings.delete.title' }}
description={{ id: 'advancedSettings.delete.description' }}
onClick={() => setIsDeleteModalOpen(true)}
buttonLabel={{ id: 'button.deleteAccount' }}
buttonIcon="trash"
buttonMode="secondaryOutline"
/>
</div>
<SettingsRow
title={{ id: 'advancedSettings.delete.title' }}
description={{ id: 'advancedSettings.delete.description' }}
// @TODO: Add functionality to delete account
onClick={() => {}}
buttonLabel={{ id: 'button.deleteAccount' }}
buttonIcon="trash"
buttonMode="secondaryOutline"
/>
</TwoColumns>
</Spinner>
);
<Modal
// @TODO: Add functionality onConfirm to delete account
isOpen={isDeleteModalOpen}
onClose={() => {
setIsChecked(false);
setIsDeleteModalOpen(false);
}}
isWarning
icon="trash"
disabled={!isChecked}
confirmMessage={formatMessage({
id: 'button.deleteAccountConfirmation',
})}
closeMessage={formatMessage({ id: 'button.deleteAccountCancel' })}
>
<h5 className="heading-5 mb-1.5">
{formatMessage({ id: 'advancedSettings.delete.modal.title' })}
</h5>
<p className="text-md text-gray-600 mb-6">
{formatMessage(
{ id: 'advancedSettings.delete.modal.description' },
{ br: <br /> },
)}
</p>
<InformationList items={modalInformations} className="mb-4" />
<div className="mb-4">
<Textarea
textareaTitle={{
id: 'advancedSettings.delete.modal.textarea.label',
}}
/>
</div>
<Checkbox
id="delete-account"
name="delete-account"
onChange={() => {
setIsChecked(!isChecked);
}}
>
{formatMessage({
id: 'advancedSettings.delete.modal.checkbox.label',
})}
</Checkbox>
</Modal>
</TwoColumns>
</Spinner>
);
};

UserAdvancedSettings.displayName = displayName;

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { InformationListItemProps } from '~v5/shared/InformationList/types';

export const modalInformations: InformationListItemProps[] = [
{
title: { id: 'advancedSettings.delete.modal.info1' },
id: 'advancedSettings.delete.modal.info1',
},
{
title: { id: 'advancedSettings.delete.modal.info2' },
id: 'advancedSettings.delete.modal.info2',
},
{
title: { id: 'advancedSettings.delete.modal.info3' },
id: 'advancedSettings.delete.modal.info3',
},
{
title: { id: 'advancedSettings.delete.modal.info4' },
id: 'advancedSettings.delete.modal.info4',
},
{
title: { id: 'advancedSettings.delete.modal.info5' },
id: 'advancedSettings.delete.modal.info5',
},
];
30 changes: 30 additions & 0 deletions src/components/v5/shared/InformationList/InformationList.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import React, { FC } from 'react';
import { useIntl } from 'react-intl';
import clsx from 'clsx';

import { InformationListProps } from './types';

const displayName = 'v5.InformationList';

const InformationList: FC<InformationListProps> = ({ items, className }) => {
const { formatMessage } = useIntl();

return (
<div
className={clsx(
className,
'rounded border bg-negative-100 border-negative-400 p-[1.125rem] text-negative-400',
)}
>
<ul className="text-sm list-disc pl-4">
{items.map(({ id, title }) => (
<li key={id}>{formatMessage(title)}</li>
))}
</ul>
</div>
);
};

InformationList.displayName = displayName;

export default InformationList;
1 change: 1 addition & 0 deletions src/components/v5/shared/InformationList/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './InformationList';
11 changes: 11 additions & 0 deletions src/components/v5/shared/InformationList/types.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { MessageDescriptor } from 'react-intl';

export interface InformationListItemProps {
title: MessageDescriptor;
id: string;
}

export interface InformationListProps {
items: InformationListItemProps[];
className?: string;
}
12 changes: 12 additions & 0 deletions src/i18n/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -541,6 +541,15 @@
"advancedSettings.account.description": "Download your Colony data in a .csv file format",
"advancedSettings.delete.title": "Account deletion",
"advancedSettings.delete.description": "This permanently deletes your account",
"advancedSettings.delete.modal.title": "We're sorry to see you go",
"advancedSettings.delete.modal.description": "Deleting your account means you could potentially lose funds and access to the following areas and account information on Colony. {br} {br} While you can delete your Colony account, you are not able to delete content on chain. {br} {br} Deleting your Colony account is irreversible and you will need to recreate another Colony account.",
"advancedSettings.delete.modal.info1": "You could potentially lose funds",
"advancedSettings.delete.modal.info2": "You will lose your account settings",
"advancedSettings.delete.modal.info3": "You will lose all of your Colony DAO subscriptions",
"advancedSettings.delete.modal.info4": "You will lose your comment history",
"advancedSettings.delete.modal.info5": "You will lose access to your username",
"advancedSettings.delete.modal.textarea.label": "Help us improve Colony (Optional)",
"advancedSettings.delete.modal.checkbox.label": "I understand that deleted accounts aren't recoverable",
"extensionsPage.title": "Extensions",
"extensionsPage.description": "Extend the functionality of your Colony",
"extensionsPage.availableExtensions": "Available Extensions",
Expand Down Expand Up @@ -729,6 +738,9 @@
"description.bio": "Your bio is optional and shows on your Colony profile in under 200 characters",
"field.location": "Location",
"description.location": "Your location is optional and only shown on your Colony profile",
"button.save.user.profile": "Save changes",
"button.deleteAccountConfirmation": "Yes, delete account",
"button.deleteAccountCancel": "Cancel deletion",
"user.profile.toast.title.success": "Action completed successfully",
"user.profile.toast.description.success": "User profile has been updated",
"error.displayName.valid.message": "This is not a valid colony username",
Expand Down

0 comments on commit 6d0a74e

Please sign in to comment.