From c9b2b66283a36fe1e1ec9d79f89c2c92858b300a Mon Sep 17 00:00:00 2001 From: Mary Kate Date: Wed, 5 Aug 2020 12:08:52 -0500 Subject: [PATCH 1/5] add verification icon on verified users --- app/soapbox/components/display_name.js | 5 +++-- .../ui/components/profile_info_panel.js | 3 ++- .../features/ui/components/user_panel.js | 3 +++ app/styles/components/user-panel.scss | 19 ++++++++++++++----- 4 files changed, 22 insertions(+), 8 deletions(-) diff --git a/app/soapbox/components/display_name.js b/app/soapbox/components/display_name.js index 30dbce9a2..f6d3a5d4f 100644 --- a/app/soapbox/components/display_name.js +++ b/app/soapbox/components/display_name.js @@ -16,13 +16,14 @@ export default class DisplayName extends React.PureComponent { const { account, others, children } = this.props; let displayName, suffix; + const verified = account.get('pleroma').get('tags').includes('verified'); if (others && others.size > 1) { displayName = others.take(2).map(a => [ , - a.get('is_verified') && , + verified && , ]).reduce((prev, cur) => [prev, ', ', cur]); if (others.size - 2 > 0) { @@ -32,7 +33,7 @@ export default class DisplayName extends React.PureComponent { displayName = ( <> - {account.get('is_verified') && } + {verified && } ); suffix = @{acctFull(account)}; diff --git a/app/soapbox/features/ui/components/profile_info_panel.js b/app/soapbox/features/ui/components/profile_info_panel.js index e26dc0125..592d60ee0 100644 --- a/app/soapbox/features/ui/components/profile_info_panel.js +++ b/app/soapbox/features/ui/components/profile_info_panel.js @@ -59,6 +59,7 @@ class ProfileInfoPanel extends ImmutablePureComponent { const fields = account.get('fields'); const displayNameHtml = { __html: account.get('display_name_html') }; const memberSinceDate = intl.formatDate(account.get('created_at'), { month: 'long', year: 'numeric' }); + const verified = account.get('pleroma').get('tags').includes('verified'); return (
@@ -67,7 +68,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {

- {account.get('is_verified') && } + {verified && } {badge} @{acctFull(account)} {lockedIcon}

diff --git a/app/soapbox/features/ui/components/user_panel.js b/app/soapbox/features/ui/components/user_panel.js index 735830622..ed34e51ea 100644 --- a/app/soapbox/features/ui/components/user_panel.js +++ b/app/soapbox/features/ui/components/user_panel.js @@ -10,6 +10,7 @@ import Avatar from 'soapbox/components/avatar'; import { shortNumberFormat } from 'soapbox/utils/numbers'; import { acctFull } from 'soapbox/utils/accounts'; import StillImage from 'soapbox/components/still_image'; +import VerificationBadge from 'soapbox/components/verification_badge'; class UserPanel extends ImmutablePureComponent { @@ -24,6 +25,7 @@ class UserPanel extends ImmutablePureComponent { if (!account) return null; const displayNameHtml = { __html: account.get('display_name_html') }; const acct = account.get('acct').indexOf('@') === -1 && domain ? `${account.get('acct')}@${domain}` : account.get('acct'); + const verified = account.get('pleroma').get('tags').includes('verified'); return (
@@ -45,6 +47,7 @@ class UserPanel extends ImmutablePureComponent {

+ {verified && } @{acctFull(account)}

diff --git a/app/styles/components/user-panel.scss b/app/styles/components/user-panel.scss index b0c656455..cb4467230 100644 --- a/app/styles/components/user-panel.scss +++ b/app/styles/components/user-panel.scss @@ -4,12 +4,21 @@ width: 265px; flex-direction: column; + .user-panel__account__name { + display: inline; + } + + .verified-icon { + opacity: 1; + } + &, .user-panel__account__name, .user-panel__account__username { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + color: var(--primary-text-color--faint); } &__header { @@ -49,13 +58,13 @@ &__meta { display: block; padding: 6px 20px 17px; - opacity: 0.6; + // opacity: 0.6; } &__account { a { text-decoration: none; - color: var(--primary-text-color); + color: var(--primary-text-color--faint); } &__name { @@ -63,7 +72,7 @@ font-size: 20px; font-weight: bold; line-height: 24px; - color: var(--primary-text-color); + color: var(--primary-text-color--faint); } &:hover & { @@ -96,7 +105,7 @@ a { text-decoration: none; - color: var(--primary-text-color); + color: var(--primary-text-color--faint); &:hover { opacity: 0.8; @@ -106,7 +115,7 @@ &__value { display: block; width: 100%; - color: var(--primary-text-color); + color: var(--primary-text-color--faint); font-size: 20px; font-weight: 800; line-height: 24px; From f7f0439e729f30bfaf8fd9e23211a5d68f596fba Mon Sep 17 00:00:00 2001 From: Mary Kate Date: Wed, 5 Aug 2020 12:47:45 -0500 Subject: [PATCH 2/5] prevent verified users from updating display name on frontend --- .../features/edit_profile/components/profile_preview.js | 8 +++++++- app/soapbox/features/edit_profile/index.js | 7 ++++++- app/styles/accounts.scss | 4 ++++ app/styles/forms.scss | 9 +++++++++ 4 files changed, 26 insertions(+), 2 deletions(-) diff --git a/app/soapbox/features/edit_profile/components/profile_preview.js b/app/soapbox/features/edit_profile/components/profile_preview.js index 6b4166d22..faf3c04d3 100644 --- a/app/soapbox/features/edit_profile/components/profile_preview.js +++ b/app/soapbox/features/edit_profile/components/profile_preview.js @@ -2,6 +2,9 @@ import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { acctFull } from 'soapbox/utils/accounts'; import StillImage from 'soapbox/components/still_image'; +import VerificationBadge from 'soapbox/components/verification_badge'; + + const ProfilePreview = ({ account }) => (
@@ -16,7 +19,10 @@ const ProfilePreview = ({ account }) => (
{account.get('username')} - {account.get('display_name')} + + {account.get('display_name')} + {account.get('pleroma').get('tags').includes('verified') && } + {acctFull(account)}
diff --git a/app/soapbox/features/edit_profile/index.js b/app/soapbox/features/edit_profile/index.js index fce8e33df..5445ff30a 100644 --- a/app/soapbox/features/edit_profile/index.js +++ b/app/soapbox/features/edit_profile/index.js @@ -24,6 +24,7 @@ const messages = defineMessages({ heading: { id: 'column.edit_profile', defaultMessage: 'Edit profile' }, metaFieldLabel: { id: 'edit_profile.fields.meta_fields.label_placeholder', defaultMessage: 'Label' }, metaFieldContent: { id: 'edit_profile.fields.meta_fields.content_placeholder', defaultMessage: 'Content' }, + verified: { id: 'edit_profile.fields.verified_display_name', defaultMessage: 'Verified users may not update their display name' }, }); const mapStateToProps = state => { @@ -155,7 +156,8 @@ class EditProfile extends ImmutablePureComponent { } render() { - const { intl, maxFields } = this.props; + const { intl, maxFields, account } = this.props; + const verified = account.get('pleroma').get('tags').includes('verified'); return ( @@ -163,10 +165,13 @@ class EditProfile extends ImmutablePureComponent {
} name='display_name' value={this.state.display_name} onChange={this.handleTextChange} + disabled={verified} + hint={verified && intl.formatMessage(messages.verified)} /> } diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss index b25f0d477..000cf75cb 100644 --- a/app/styles/accounts.scss +++ b/app/styles/accounts.scss @@ -92,6 +92,10 @@ overflow: hidden; text-overflow: ellipsis; } + + bdi, span.verified-icon { + display: inline-block; + } } } } diff --git a/app/styles/forms.scss b/app/styles/forms.scss index 6cf1f5f0f..96616c6ff 100644 --- a/app/styles/forms.scss +++ b/app/styles/forms.scss @@ -342,6 +342,15 @@ code { } } + input[type=text][disabled], + input[type=number][disabled], + input[type=email][disabled], + input[type=password][disabled], + textarea { + color: var(--primary-text-color--faint); + border-color: var(--primary-text-color--faint); + } + .input.field_with_errors { label { color: lighten($error-red, 12%); From aec44bfea6fd0fa215c0876602cfdb400cc4436e Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Wed, 5 Aug 2020 18:04:32 +0000 Subject: [PATCH 3/5] Verified: Use getIn in display_name.js --- app/soapbox/components/display_name.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/soapbox/components/display_name.js b/app/soapbox/components/display_name.js index f6d3a5d4f..7ab8b9e60 100644 --- a/app/soapbox/components/display_name.js +++ b/app/soapbox/components/display_name.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import VerificationBadge from './verification_badge'; import { acctFull } from '../utils/accounts'; +import { List as ImmutableList } from 'immutable'; export default class DisplayName extends React.PureComponent { @@ -16,7 +17,7 @@ export default class DisplayName extends React.PureComponent { const { account, others, children } = this.props; let displayName, suffix; - const verified = account.get('pleroma').get('tags').includes('verified'); + const verified = account.getIn(['pleroma', 'tags'], ImmutableList()).includes('verified'); if (others && others.size > 1) { displayName = others.take(2).map(a => [ From e9d76b62874c60a99f574a1a8b736575da582d3c Mon Sep 17 00:00:00 2001 From: Mary Kate Date: Fri, 7 Aug 2020 17:01:15 -0500 Subject: [PATCH 4/5] Update chained get requests --- .../features/edit_profile/components/profile_preview.js | 5 ++--- app/styles/components/drawer.scss | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/app/soapbox/features/edit_profile/components/profile_preview.js b/app/soapbox/features/edit_profile/components/profile_preview.js index faf3c04d3..808f18a55 100644 --- a/app/soapbox/features/edit_profile/components/profile_preview.js +++ b/app/soapbox/features/edit_profile/components/profile_preview.js @@ -3,8 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import { acctFull } from 'soapbox/utils/accounts'; import StillImage from 'soapbox/components/still_image'; import VerificationBadge from 'soapbox/components/verification_badge'; - - +import { List as ImmutableList } from 'immutable'; const ProfilePreview = ({ account }) => (
@@ -21,7 +20,7 @@ const ProfilePreview = ({ account }) => ( {account.get('display_name')} - {account.get('pleroma').get('tags').includes('verified') && } + {account.getIn(['pleroma', 'tags'], ImmutableList()).includes('verified') && } {acctFull(account)} diff --git a/app/styles/components/drawer.scss b/app/styles/components/drawer.scss index 39e936158..7dc5a1a10 100644 --- a/app/styles/components/drawer.scss +++ b/app/styles/components/drawer.scss @@ -20,7 +20,7 @@ .column, .drawer { flex: 1 1 100%; - overflow: visible; + overflow: hidden; } .drawer__pager { From 7931a9a89d25f81aad41631145aa04ea9349d298 Mon Sep 17 00:00:00 2001 From: Mary Kate Date: Fri, 7 Aug 2020 18:10:13 -0500 Subject: [PATCH 5/5] code review --- app/soapbox/features/ui/components/user_panel.js | 3 ++- app/styles/components/drawer.scss | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/app/soapbox/features/ui/components/user_panel.js b/app/soapbox/features/ui/components/user_panel.js index ed34e51ea..1ba4e3efc 100644 --- a/app/soapbox/features/ui/components/user_panel.js +++ b/app/soapbox/features/ui/components/user_panel.js @@ -11,6 +11,7 @@ import { shortNumberFormat } from 'soapbox/utils/numbers'; import { acctFull } from 'soapbox/utils/accounts'; import StillImage from 'soapbox/components/still_image'; import VerificationBadge from 'soapbox/components/verification_badge'; +import { List as ImmutableList } from 'immutable'; class UserPanel extends ImmutablePureComponent { @@ -25,7 +26,7 @@ class UserPanel extends ImmutablePureComponent { if (!account) return null; const displayNameHtml = { __html: account.get('display_name_html') }; const acct = account.get('acct').indexOf('@') === -1 && domain ? `${account.get('acct')}@${domain}` : account.get('acct'); - const verified = account.get('pleroma').get('tags').includes('verified'); + const verified = account.getIn(['pleroma', 'tags'], ImmutableList()).includes('verified'); return (
diff --git a/app/styles/components/drawer.scss b/app/styles/components/drawer.scss index 7dc5a1a10..39e936158 100644 --- a/app/styles/components/drawer.scss +++ b/app/styles/components/drawer.scss @@ -20,7 +20,7 @@ .column, .drawer { flex: 1 1 100%; - overflow: hidden; + overflow: visible; } .drawer__pager {