diff --git a/docs/source/03-08-gdpr.md b/docs/source/03-08-gdpr.md index 187920bbc..9b1050454 100644 --- a/docs/source/03-08-gdpr.md +++ b/docs/source/03-08-gdpr.md @@ -12,9 +12,19 @@ can enable the following plugins: - [talk-plugin-profile-data](/talk/plugin/talk-plugin-profile-data) - to facilitate account download and deletion Even if you don't reside in a location where GDPR will apply, it is recommended -to enable these features anyways to provide your users with control over their +to enable these features as a best practice to provide your users with control over their own data. +## GPDR Feature Overview + +Integrating our GDPR tools will give your users and organizations the following benefits: + +- **Download my comment data**: Users can request a download of their comments. An email with a link is emailed to them to download a CSV with each comment they've made, what story it was made on, and the comment's ID and timestamp. +- **Delete my acccount**: Users can request deletion of their account. Deleted account requests are pending for 24 hours to allow the user to download their comments, or to change their mind and reactivate their account before the expiry. Account deletions remove all of their comments from the site, all their comments and actions from the database, and their account info from our system. +- **Add an email to an Oauth/external account**: Users are prompted to add an email to their non-Talk account (Facebook, Google, external, etc) so that they can take part in GDPR and other features requiring email communication. +- **Change my username**: Users can update their username. This is capped at once every 2 weeks. +- **Change my email**: Users can change their email. + ## Custom Authentication Solutions As many of the newsrooms who have integrated Talk have followed our guides on diff --git a/plugins/talk-plugin-local-auth/client/components/ChangePassword.css b/plugins/talk-plugin-local-auth/client/components/ChangePassword.css index 6c7f9ae41..0df8eb409 100644 --- a/plugins/talk-plugin-local-auth/client/components/ChangePassword.css +++ b/plugins/talk-plugin-local-auth/client/components/ChangePassword.css @@ -1,22 +1,27 @@ .container { position: relative; color: #202020; - padding: 10px; border-radius: 2px; border: solid 1px transparent; box-sizing: border-box; justify-content: space-between; - + &.editing { + padding: 10px; border-color: #979797; background-color: #EDEDED; + + .actions { + top: 10px; + right: 10px; + } } } .actions { position: absolute; - top: 10px; - right: 10px; + top: 0px; + right: 0px; display: flex; flex-direction: column; align-items: center; @@ -31,11 +36,11 @@ display: block; padding-top: 4px; text-align: right; - width: 280px; + width: 230px; } .detailLink { - color: #00538A; + color: #00538A; text-decoration: none; font-size: 0.9em; &:hover { @@ -59,7 +64,7 @@ > i { font-size: 17px; } - + &:hover { background-color: #399ee2; color: white; diff --git a/plugins/talk-plugin-local-auth/client/components/InputField.css b/plugins/talk-plugin-local-auth/client/components/InputField.css index 3442befde..fae31c80a 100644 --- a/plugins/talk-plugin-local-auth/client/components/InputField.css +++ b/plugins/talk-plugin-local-auth/client/components/InputField.css @@ -5,6 +5,7 @@ .detailItemContainer { display: flex; + flex-direction: column; } .columnDisplay { @@ -16,6 +17,10 @@ } .detailItemContent { + display: flex; +} + +.detailInput { border: solid 1px #787D80; border-radius: 2px; background-color: white; @@ -57,6 +62,7 @@ flex: 1; height: 100%; box-sizing: border-box; + padding: 0 6px; } .detailItemMessage { @@ -64,7 +70,6 @@ display: flex; align-items: center; padding-left: 6px; - padding-top: 16px; .warningIcon, .checkIcon { font-size: 17px; diff --git a/plugins/talk-plugin-local-auth/client/components/InputField.js b/plugins/talk-plugin-local-auth/client/components/InputField.js index 26937d5b9..930c15582 100644 --- a/plugins/talk-plugin-local-auth/client/components/InputField.js +++ b/plugins/talk-plugin-local-auth/client/components/InputField.js @@ -30,41 +30,45 @@ const InputField = ({ return (
+
{t('delete_request.delete_my_account_description')}
-+
{scheduledDeletionDate && t( 'delete_request.already_submitted_request_description', @@ -88,18 +71,11 @@ class DeleteMyAccount extends React.Component { )}
{scheduledDeletionDate ? ( -