diff --git a/client/coral-framework/graphql/mutations.js b/client/coral-framework/graphql/mutations.js index bf412b189..89ffd1130 100644 --- a/client/coral-framework/graphql/mutations.js +++ b/client/coral-framework/graphql/mutations.js @@ -634,7 +634,32 @@ export const withRequestAccountDeletion = withMutation( { props: ({ mutate }) => ({ requestAccountDeletion: () => { - return mutate(); + return mutate({ + variables: {}, + update: proxy => { + const CancelAccountDeletionQuery = gql` + query Talk_CancelAccountDeletion { + me { + id + scheduledDeletionDate + } + } + `; + + const prev = proxy.readQuery({ query: CancelAccountDeletionQuery }); + + const data = update(prev, { + me: { + scheduledDeletionDate: { $set: new Date() }, + }, + }); + + proxy.writeQuery({ + query: CancelAccountDeletionQuery, + data, + }); + }, + }); }, }), } @@ -651,7 +676,9 @@ export const withRequestDownloadLink = withMutation( { props: ({ mutate }) => ({ requestDownloadLink: () => { - return mutate(); + return mutate({ + variables: {}, + }); }, }), } @@ -668,7 +695,32 @@ export const withCancelAccountDeletion = withMutation( { props: ({ mutate }) => ({ cancelAccountDeletion: () => { - return mutate(); + return mutate({ + variables: {}, + update: proxy => { + const CancelAccountDeletionQuery = gql` + query Talk_CancelAccountDeletion { + me { + id + scheduledDeletionDate + } + } + `; + + const prev = proxy.readQuery({ query: CancelAccountDeletionQuery }); + + const data = update(prev, { + me: { + scheduledDeletionDate: { $set: null }, + }, + }); + + proxy.writeQuery({ + query: CancelAccountDeletionQuery, + data, + }); + }, + }); }, }), } diff --git a/locales/en.yml b/locales/en.yml index 04fbc0bcb..5806976a4 100644 --- a/locales/en.yml +++ b/locales/en.yml @@ -246,6 +246,7 @@ en: ALREADY_EXISTS: "Resource already exists" INVALID_ASSET_URL: "Assert URL is invalid" CANNOT_IGNORE_STAFF: "Cannot ignore Staff members." + DELETION_NOT_SCHEDULED: "Deletion was not scheduled" email: "Not a valid E-Mail" confirm_password: "Passwords don't match. Please check again" network_error: "Failed to connect to server. Check your internet connection and try again." diff --git a/plugins/talk-plugin-auth/client/index.js b/plugins/talk-plugin-auth/client/index.js index b432b05b2..98da589f8 100644 --- a/plugins/talk-plugin-auth/client/index.js +++ b/plugins/talk-plugin-auth/client/index.js @@ -5,12 +5,18 @@ import translations from './translations.yml'; import Login from './login/containers/Main'; import reducer from './login/reducer'; import DeleteMyAccount from './profile-settings/containers/DeleteMyAccount'; +import AccountDeletionRequestedSign from './stream/containers/AccountDeletionRequestedSign'; export default { reducer, translations, slots: { - stream: [UserBox, SignInButton, SetUsernameDialog], + stream: [ + AccountDeletionRequestedSign, + UserBox, + SignInButton, + SetUsernameDialog, + ], login: [Login], profileSettings: [DeleteMyAccount], }, diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/AccountDeletionRequestedSign.css b/plugins/talk-plugin-auth/client/profile-settings/components/AccountDeletionRequestedSign.css deleted file mode 100644 index 413a3852b..000000000 --- a/plugins/talk-plugin-auth/client/profile-settings/components/AccountDeletionRequestedSign.css +++ /dev/null @@ -1,23 +0,0 @@ -.container { - border : solid 1px #F26563; - border-radius: 2px; - color: #3B4A53; -} - -.button { - color: #787D80; - border-radius: 2px; - background-color: transparent; - height: 30px; - font-size: 0.9em; - line-height: normal; - - &:hover { - background-color: #eaeaea; - } - - &.secondary { - background-color: #787D80; - color: white; - } -} \ No newline at end of file diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/AccountDeletionRequestedSign.js b/plugins/talk-plugin-auth/client/profile-settings/components/AccountDeletionRequestedSign.js deleted file mode 100644 index 7d1941fa7..000000000 --- a/plugins/talk-plugin-auth/client/profile-settings/components/AccountDeletionRequestedSign.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import cn from 'classnames'; -import { Button, Icon } from 'plugin-api/beta/client/components/ui'; -import styles from './AccountDeletionRequestedSign.css'; - -class AccountDeletionRequestedSign extends React.Component { - render() { - return ( -
-

- Account Deletion Requested -

-

- A request to delete your account was received on. If you would like to - continue leaving comments, replies or reactions, you may cancel your - request to delete your account below before -

- -
- ); - } -} - -export default AccountDeletionRequestedSign; diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccount.css b/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccount.css index 2fe139d52..e524d990a 100644 --- a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccount.css +++ b/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccount.css @@ -10,4 +10,14 @@ &:hover { background-color: #eaeaea; } + + &.secondary { + background-color: #787D80; + color: white; + } + + > i { + font-size: 1.2em; + vertical-align: middle; + } } \ No newline at end of file diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccount.js b/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccount.js index 0fc06f326..9bc5573a1 100644 --- a/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccount.js +++ b/plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccount.js @@ -1,6 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import cn from 'classnames'; +import moment from 'moment'; import styles from './DeleteMyAccount.css'; import { Button } from 'plugin-api/beta/client/components/ui'; import DeleteMyAccountDialog from './DeleteMyAccountDialog'; @@ -52,6 +53,7 @@ class DeleteMyAccount extends React.Component {

Delete My Account

+

+ Deleting your account will permanently erase your profile and remove + all your comments from this site. +

{scheduledDeletionDate && `You have already submitted a request to delete your account. - Your account will be deleted on ${scheduledDeletionDate}. You may + Your account will be deleted on ${moment( + scheduledDeletionDate + ).format('MMM Do YYYY, h:mm:ss a')}. You may cancel the request until that time`}

{scheduledDeletionDate ? ( diff --git a/plugins/talk-plugin-auth/client/stream/components/AccountDeletionRequestedSign.css b/plugins/talk-plugin-auth/client/stream/components/AccountDeletionRequestedSign.css new file mode 100644 index 000000000..0dada08b5 --- /dev/null +++ b/plugins/talk-plugin-auth/client/stream/components/AccountDeletionRequestedSign.css @@ -0,0 +1,44 @@ +.container { + border: 1px solid #f26563; + border-radius: 2px; + color: #3b4a53; + padding: 20px 10px; + background-color: rgba(242, 101, 99, 0.1); + margin: 20px 0; +} + +.button { + color: #787D80; + border-radius: 2px; + background-color: transparent; + height: 30px; + font-size: 0.9em; + line-height: normal; + + &:hover { + background-color: #eaeaea; + } + + &.secondary { + background-color: #787D80; + color: white; + } +} + +.title { + margin: 0; + i.icon { + font-size: 1em; + padding: 4px; + } +} + +.description { + margin: 0; + padding-left: 22px; + padding-bottom: 15px; +} + +.actions { + text-align: center; +} \ No newline at end of file diff --git a/plugins/talk-plugin-auth/client/stream/components/AccountDeletionRequestedSign.js b/plugins/talk-plugin-auth/client/stream/components/AccountDeletionRequestedSign.js new file mode 100644 index 000000000..a26d28d21 --- /dev/null +++ b/plugins/talk-plugin-auth/client/stream/components/AccountDeletionRequestedSign.js @@ -0,0 +1,55 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import cn from 'classnames'; +import { Button, Icon } from 'plugin-api/beta/client/components/ui'; +import styles from './AccountDeletionRequestedSign.css'; +import { getErrorMessages } from 'coral-framework/utils'; + +class AccountDeletionRequestedSign extends React.Component { + cancelAccountDeletion = async () => { + const { cancelAccountDeletion, notify } = this.props; + try { + await cancelAccountDeletion(); + notify( + 'success', + 'Account Deletion Request Cancelled - Your request to delete your account has been cancelled. You may now write comments, reply to comments, and select reactions.' + ); + } catch (err) { + notify('error', getErrorMessages(err)); + } + }; + + render() { + return ( +
+

+ Account Deletion + Requested +

+

+ A request to delete your account was received on. +

+

+ If you would like to continue leaving comments, replies or reactions, + you may cancel your request to delete your account below before +

+
+ +
+
+ ); + } +} + +AccountDeletionRequestedSign.propTypes = { + cancelAccountDeletion: PropTypes.func.isRequired, + notify: PropTypes.func.isRequired, + root: PropTypes.object.isRequired, +}; + +export default AccountDeletionRequestedSign; diff --git a/plugins/talk-plugin-auth/client/stream/containers/AccountDeletionRequestedSign.js b/plugins/talk-plugin-auth/client/stream/containers/AccountDeletionRequestedSign.js new file mode 100644 index 000000000..d842ec43f --- /dev/null +++ b/plugins/talk-plugin-auth/client/stream/containers/AccountDeletionRequestedSign.js @@ -0,0 +1,25 @@ +import { compose, gql } from 'react-apollo'; +import { bindActionCreators } from 'redux'; +import { connect, withFragments, excludeIf } from 'plugin-api/beta/client/hocs'; +import AccountDeletionRequestedSign from '../components/AccountDeletionRequestedSign'; +import { notify } from 'coral-framework/actions/notification'; +import { withCancelAccountDeletion } from 'plugin-api/beta/client/hocs'; + +const mapDispatchToProps = dispatch => bindActionCreators({ notify }, dispatch); + +const withData = withFragments({ + root: gql` + fragment Talk_AccountDeletionRequestedSignIn_root on RootQuery { + me { + scheduledDeletionDate + } + } + `, +}); + +export default compose( + connect(null, mapDispatchToProps), + withCancelAccountDeletion, + withData, + excludeIf(props => !props.root.me.scheduledDeletionDate) +)(AccountDeletionRequestedSign);