sam/pleroma-fe
sam/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merge branch 'from/develop/tusooa/1189-mention-uri' into 'develop'

Browse source 
Use dedicated indicator for non-ascii domain names

Closes #1189

See merge request pleroma/pleroma-fe!1632
This commit is contained in:
HJ 2022-08-29 23:03:23 +00:00
commit 3b6c31f3b3
22 changed files with 151 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/basic_user_card/basic_user_card.js
View file

@ -1,5 +1,6 @@
import UserPopover from '../user_popover/user_popover.vue'
import UserAvatar from '../user_avatar/user_avatar.vue'
import UserLink from '../user_link/user_link.vue'
import RichContent from 'src/components/rich_content/rich_content.jsx'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@ -10,7 +11,8 @@ const BasicUserCard = {
components: {
UserPopover,
UserAvatar,
RichContent
RichContent,
UserLink
},
methods: {
userProfileLink (user) {

8
src/components/basic_user_card/basic_user_card.vue
View file

@ -30,12 +30,10 @@
/>
</div>
<div>
<router-link
<user-link
class="basic-user-card-screen-name"
:to="userProfileLink(user)"
>
@{{ user.screen_name_ui }}
</router-link>
:user="user"
/>
</div>
<slot />
</div>

4
src/components/emoji_input/emoji_input.js
View file

@ -1,5 +1,6 @@
import Completion from '../../services/completion/completion.js'
import EmojiPicker from '../emoji_picker/emoji_picker.vue'
import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_indicator.vue'
import { take } from 'lodash'
import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
@ -120,7 +121,8 @@ const EmojiInput = {
}
},
components: {
EmojiPicker
EmojiPicker,
UnicodeDomainIndicator
},
computed: {
padEmoji () {

16
src/components/emoji_input/emoji_input.vue
View file

@ -50,7 +50,21 @@
<span v-else>{{ suggestion.replacement }}</span>
</span>
<div class="label">
<span class="displayText">{{ suggestion.displayText }}</span>
<span
v-if="suggestion.user"
class="displayText"
>
{{ suggestion.displayText }}<UnicodeDomainIndicator
:user="suggestion.user"
:at="false"
/>
</span>
<span
v-if="!suggestion.user"
class="displayText"
>
{{ suggestion.displayText }}
</span>
<span class="detailText">{{ suggestion.detailText }}</span>
</div>
</div>

11
src/components/emoji_input/suggestor.js
View file

@ -116,11 +116,12 @@ export const suggestUsers = ({ dispatch, state }) => {
return diff + nameAlphabetically + screenNameAlphabetically
/* eslint-disable camelcase */
}).map(({ screen_name, screen_name_ui, name, profile_image_url_original }) => ({
displayText: screen_name_ui,
detailText: name,
imageUrl: profile_image_url_original,
replacement: '@' + screen_name + ' '
}).map((user) => ({
user,
displayText: user.screen_name_ui,
detailText: user.name,
imageUrl: user.profile_image_url_original,
replacement: '@' + user.screen_name + ' '
}))
/* eslint-enable camelcase */

2
src/components/mention_link/mention_link.js
View file

@ -2,6 +2,7 @@ import generateProfileLink from 'src/services/user_profile_link_generator/user_p
import { mapGetters, mapState } from 'vuex'
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
import UserAvatar from '../user_avatar/user_avatar.vue'
import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_indicator.vue'
import { defineAsyncComponent } from 'vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
@ -16,6 +17,7 @@ const MentionLink = {
name: 'MentionLink',
components: {
UserAvatar,
UnicodeDomainIndicator,
UserPopover: defineAsyncComponent(() => import('../user_popover/user_popover.vue'))
},
props: {

3
src/components/mention_link/mention_link.vue
View file

@ -47,6 +47,9 @@
class="serverName"
:class="{ '-faded': shouldFadeDomain }"
v-html="'@' + serverName"
/><UnicodeDomainIndicator
v-if="shouldShowFullUserName"
:user="user"
/>
</span>
<span

4
src/components/notification/notification.js
View file

@ -5,6 +5,7 @@ import UserAvatar from '../user_avatar/user_avatar.vue'
import UserCard from '../user_card/user_card.vue'
import Timeago from '../timeago/timeago.vue'
import Report from '../report/report.vue'
import UserLink from '../user_link/user_link.vue'
import RichContent from 'src/components/rich_content/rich_content.jsx'
import UserPopover from '../user_popover/user_popover.vue'
import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
@ -50,7 +51,8 @@ const Notification = {
Status,
Report,
RichContent,
UserPopover
UserPopover,
UserLink
},
methods: {
toggleUserExpanded () {

21
src/components/notification/notification.vue
View file

@ -11,9 +11,10 @@
class="Notification container -muted"
>
<small>
<router-link :to="userProfileLink">
{{ notification.from_profile.screen_name_ui }}
</router-link>
<user-link
:user="notification.from_profile"
:at="false"
/>
</small>
<button
class="button-unstyled unmute"
@ -174,12 +175,10 @@
v-if="notification.type === 'follow' || notification.type === 'follow_request'"
class="follow-text"
>
<router-link
:to="userProfileLink"
<user-link
class="follow-name"
>
@{{ notification.from_profile.screen_name_ui }}
</router-link>
:user="notification.from_profile"
/>
<div
v-if="notification.type === 'follow_request'"
style="white-space: nowrap;"
@ -210,9 +209,9 @@
v-else-if="notification.type === 'move'"
class="move-text"
>
<router-link :to="targetUserProfileLink">
@{{ notification.target.screen_name_ui }}
</router-link>
<user-link
:user="notification.target"
/>
</div>
<Report
v-else-if="notification.type === 'pleroma:report'"

4
src/components/status/status.js
View file

@ -13,6 +13,7 @@ import StatusPopover from '../status_popover/status_popover.vue'
import UserPopover from '../user_popover/user_popover.vue'
import UserListPopover from '../user_list_popover/user_list_popover.vue'
import EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
import UserLink from '../user_link/user_link.vue'
import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
import MentionLink from 'src/components/mention_link/mention_link.vue'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@ -115,7 +116,8 @@ const Status = {
RichContent,
MentionLink,
MentionsLine,
UserPopover
UserPopover,
UserLink
},
props: [
'statusoid',

16
src/components/status/status.vue
View file

@ -25,9 +25,10 @@
class="fa-scale-110 fa-old-padding repeat-icon"
icon="retweet"
/>
<router-link :to="userProfileLink">
{{ status.user.screen_name_ui }}
</router-link>
<user-link
:user="status.user"
:at="false"
/>
</small>
<small
v-if="showReasonMutedThread"
@ -164,13 +165,12 @@
>
{{ status.user.name }}
</h4>
<router-link
<user-link
class="account-name"
:title="status.user.screen_name_ui"
:to="userProfileLink"
>
{{ status.user.screen_name_ui }}
</router-link>
:user="status.user"
:at="false"
/>
<img
v-if="!!(status.user && status.user.favicon)"
class="status-favicon"

26
src/components/unicode_domain_indicator/unicode_domain_indicator.vue Normal file
View file

@ -0,0 +1,26 @@
<template>
<FAIcon
v-if="user && user.screen_name_ui_contains_non_ascii"
icon="code"
:title="$t('unicode_domain_indicator.tooltip')"
/>
</template>
<script>
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faCode
} from '@fortawesome/free-solid-svg-icons'
library.add(
faCode
)
const UnicodeDomainIndicator = {
props: {
user: Object
}
}
export default UnicodeDomainIndicator
</script>

4
src/components/user_card/user_card.js
View file

@ -5,6 +5,7 @@ import FollowButton from '../follow_button/follow_button.vue'
import ModerationTools from '../moderation_tools/moderation_tools.vue'
import AccountActions from '../account_actions/account_actions.vue'
import Select from '../select/select.vue'
import UserLink from '../user_link/user_link.vue'
import RichContent from 'src/components/rich_content/rich_content.jsx'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
import { mapGetters } from 'vuex'
@ -134,7 +135,8 @@ export default {
ProgressButton,
FollowButton,
Select,
RichContent
RichContent,
UserLink
},
methods: {
muteUser () {

9
src/components/user_card/user_card.vue
View file

@ -106,13 +106,10 @@
</button>
</div>
<div class="bottom-line">
<router-link
<user-link
class="user-screen-name"
:title="user.screen_name_ui"
:to="userProfileLink(user)"
>
@{{ user.screen_name_ui }}
</router-link>
:user="user"
/>
<template v-if="!hideBio">
<span
v-if="user.deactivated"

38
src/components/user_link/user_link.vue Normal file
View file

@ -0,0 +1,38 @@
<template>
<router-link
:title="user.screen_name_ui"
:to="userProfileLink(user)"
>
{{ at ? '@' : '' }}{{ user.screen_name_ui }}<UnicodeDomainIndicator
:user="user"
/>
</router-link>
</template>
<script>
import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_indicator.vue'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
const UserLink = {
props: {
user: Object,
at: {
type: Boolean,
default: true
}
},
components: {
UnicodeDomainIndicator
},
methods: {
userProfileLink (user) {
return generateProfileLink(
user.id, user.screen_name,
this.$store.state.instance.restrictedNicknames
)
}
}
}
export default UserLink
</script>

2
src/components/user_list_popover/user_list_popover.js
View file

@ -1,5 +1,6 @@
import { defineAsyncComponent } from 'vue'
import RichContent from 'src/components/rich_content/rich_content.jsx'
import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_indicator.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
@ -15,6 +16,7 @@ const UserListPopover = {
],
components: {
RichContent,
UnicodeDomainIndicator,
Popover: defineAsyncComponent(() => import('../popover/popover.vue')),
UserAvatar: defineAsyncComponent(() => import('../user_avatar/user_avatar.vue'))
},

2
src/components/user_list_popover/user_list_popover.vue
View file

@ -29,7 +29,7 @@
:emoji="user.emoji"
/>
<!-- eslint-enable vue/no-v-html -->
<span class="user-list-screen-name">{{ user.screen_name_ui }}</span>
<span class="user-list-screen-name">{{ user.screen_name_ui }}</span><UnicodeDomainIndicator :user="user" />
</div>
</div>
</template>

4
src/components/user_reporting_modal/user_reporting_modal.js
View file

@ -2,13 +2,15 @@ import Status from '../status/status.vue'
import List from '../list/list.vue'
import Checkbox from '../checkbox/checkbox.vue'
import Modal from '../modal/modal.vue'
import UserLink from '../user_link/user_link.vue'
const UserReportingModal = {
components: {
Status,
List,
Checkbox,
Modal
Modal,
UserLink
},
data () {
return {

10
src/components/user_reporting_modal/user_reporting_modal.vue
View file

@ -5,9 +5,13 @@
>
<div class="user-reporting-panel panel">
<div class="panel-heading">
<div class="title">
{{ $t('user_reporting.title', [user.screen_name_ui]) }}
</div>
<i18n-t
tag="div"
keypath="user_reporting.title"
class="title"
>
<UserLink :user="user" />
</i18n-t>
</div>
<div class="panel-body">
<div class="user-reporting-panel-left">

3
src/i18n/en.json
View file

@ -1006,5 +1006,8 @@
"update_changelog": "For more details on what's changed, see {theFullChangelog}.",
"update_changelog_here": "the full changelog",
"art_by": "Art by {linkToArtist}"
},
"unicode_domain_indicator": {
"tooltip": "This domain contains non-ascii characters."
}
}

6
src/services/entity_normalizer/entity_normalizer.service.js
View file

@ -214,12 +214,14 @@ export const parseUser = (data) => {
output.screen_name_ui = output.screen_name
if (output.screen_name && output.screen_name.includes('@')) {
const parts = output.screen_name.split('@')
let unicodeDomain = punycode.toUnicode(parts[1])
const unicodeDomain = punycode.toUnicode(parts[1])
if (unicodeDomain !== parts[1]) {
// Add some identifier so users can potentially spot spoofing attempts:
// lain.com and xn--lin-6cd.com would appear identical otherwise.
unicodeDomain = '🌏' + unicodeDomain
output.screen_name_ui_contains_non_ascii = true
output.screen_name_ui = [parts[0], unicodeDomain].join('@')
} else {
output.screen_name_ui_contains_non_ascii = false
}
}

3
test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
View file

@ -269,7 +269,8 @@ describe('API Entities normalizer', () => {
it('converts IDN to unicode and marks it as internatonal', () => {
const user = makeMockUserMasto({ acct: 'lain@xn--lin-6cd.com' })
expect(parseUser(user)).to.have.property('screen_name_ui').that.equal('lain@🌏lаin.com')
expect(parseUser(user)).to.have.property('screen_name_ui').that.equal('lain@lаin.com')
expect(parseUser(user)).to.have.property('screen_name_ui_contains_non_ascii').that.equal(true)
})
})