Add social profile links #5439

nertc · 2024-12-23T10:00:58Z

This PR addresses "Please make contact information fields, how to contact the user, email address, telegrams, various social networks https://www.openstreetmap.org" issue mentioned in the #2245

Description

This PR adds:

DB: Social links table, which contains social links added by the user
Model: Parser to differentiate different kind of websites
Controller: Logic for CRUD operations for social links
View: Functionality to show, edit, add and delete social links
JS: Was only used for adding and removing fields on the user side when they interact to the social links fields

Currently parser parses these websites and adds their icons which are taken from Bootstrap-Icons:

Discord
Facebook
Github
Gitlab
Instagram
Linkedin
Line
Mastodon
Medium
Quora
Reddit
Skype
Slack
Snapchat
Stack Overflow
Strava
Substack
Telegram
Threads
Tik-Tok
Twitch
X (Twitter)
Vimeo
WhatsApp
YouTube

Discord, Line, Skype and Slack doesn't show username in the URL. To avoid showing some Id numbers on the profile page, for these cases instead of the Id only the name of the application is shown.
Applications other than those mentioned in the list show their URL on the profile page and have general web icon (globe icon).
If there is an idea that some of them should be removed or others should be added, feel free to share recommendations.

Parser was done in the Ruby to avoid adding more JS client-side logic to the website. If it is preferable, it can be moved to JS.

How has this been tested?

There are validation and functional tests written to test the functionality. In addition to this, different kind of manual testing was done to ensure that all the icons, errors, fields and etc. were displayed correctly.

Screenshots

Logged out:

Logged in:

Edit Profile page:

AntonKhorev · 2024-12-27T00:25:08Z

Do we need another set of icons in addition to app/assets/images/social_icons?

AntonKhorev · 2024-12-27T00:33:17Z

app/models/social_link.rb

+
+  def parsed
+    URL_PATTERNS.each do |platform, pattern|
+      username = url.match(pattern)


It's not a username, is it?

It's a user's name shown in the URL of some websites' profile page (for example, in the https://github.com/nertc nertc is a username)

MatchData object is not a username.

To use more intuitive name and not to confuse "user's name" to username, name of the variable username was changed to names

Is it more intuitive? Now it suggests there are multiple names in this variable.

app/views/profiles/edit.html.erb

AntonKhorev · 2024-12-27T00:56:58Z

app/assets/javascripts/user.js

+    `);
+
+    socialLinkForm.find("button").click(function () {
+      $(this).parent().remove();


I press this button, this removes the link, and I'd think it's saved. But actually not, failing the validation will resurrect the link.

On document load now application checks and hides those fields that have "_destroy" checkbox checked. Therefore, this problem was solved.

app/models/social_link.rb

AntonKhorev · 2024-12-27T01:26:47Z

When I'm making a site for myself and there's this kind of UI with Add buttons adding an input and Remove buttons next to added inputs, I don't bother doing it. I just put a <textarea>, it's easier to edit. In this case I'd have a textarea with each nonempty line corresponding to a link. Why don't people do this? Is it too geeky?

nertc · 2025-01-08T10:14:29Z

When I'm making a site for myself and there's this kind of UI with Add buttons adding an input and Remove buttons next to added inputs, I don't bother doing it. I just put a <textarea>, it's easier to edit. In this case I'd have a textarea with each nonempty line corresponding to a link. Why don't people do this? Is it too geeky?

Thanks for the review. I agree with you, if I did a website only for me, it would be a quicker solution to add a textarea and it would do the job. But for most users current solution will be more intuitive and appealing in terms of UI/UX. It's more common and therefore understandable approach (for example GitHub has the same approach on the profile page).

nertc · 2025-01-08T10:21:28Z

Do we need another set of icons in addition to app/assets/images/social_icons?

They have different design. They are more colorful and more like logos which should gain users' attention (for example as share buttons), but icons added by this PR are one color, simple icons, which should not gain much attention as they are there only for the information for the small part of the profile page (not big functional buttons). We can use icons from the app/assets/images/social_icons, but it will make social profile links too colorful and too much attention grabbing. Therefore, I think, it is better to stick to the new icons.

nertc · 2025-01-27T09:53:14Z

Merge conflict was fixed.

AntonKhorev · 2025-01-31T10:00:30Z

app/views/profiles/edit.html.erb

+        <div class="social-link-fields row mb-3">
+          <%= social_link_form.text_field :url, :hide_label => true, :wrapper_class => "col-sm-8" %>
+          <%= social_link_form.check_box :_destroy, :wrapper_class => "d-none social_link_destroy" %>
+          <%= social_link_form.label :_destroy, t(".social_links.remove"), :class => "btn btn-outline-primary col-sm-1 align-self-start" %>


col-sm-1 is too narrow

AntonKhorev · 2025-01-31T10:33:56Z

app/models/social_link.rb

+class SocialLink < ApplicationRecord
+  belongs_to :user
+
+  validates :url, :format => { :with => %r{\Ahttps?://.+\z}, :message => I18n.t("profiles.edit.social_links.http_parse_error") }


model is referring to controller's i18n key here

AntonKhorev · 2025-01-31T10:37:18Z

app/views/profiles/edit.html.erb

@@ -40,6 +40,21 @@
    </div>
  </fieldset>

+  <fieldset class="mb-3">


Why is the link editor placed between avatar and home location? If you don't change the order of other things on this page, this place makes the least sense to me.

Where do you think is a good place for it? Should it be between the description and avatar, before the description or the last one?

AntonKhorev · 2025-01-31T10:50:05Z

app/views/social_links/_show.html.erb

+  <p class="text-body-secondary">
+    <%= image_tag "/assets/social_link_icons/#{social_link.parsed[:platform].nil? ? 'other' : social_link.parsed[:platform]}.svg",
+                  :alt => social_link.parsed[:platform].nil? ? "other" : social_link.parsed[:platform],
+                  :class => "me-2" %>
+    <%= link_to social_link.parsed[:name], social_link.url, :class => "text-body-secondary", :rel => "nofollow me" %>
+  </p>


You can get line wraps like this, where the text goes below the icon:

AntonKhorev · 2025-01-31T10:55:07Z

app/views/users/show.html.erb

+      <div class="my-3">
+        <%= link_to t(".edit_profile"), edit_profile_path, :class => "btn btn-outline-primary" %>
+      </div>
+    <% end %>


The placement of this button suggests that it leads to editing only the social links. If it actually did, that could have been a good idea, given how many editable things there are already on profile/edit.

AntonKhorev · 2025-01-31T11:09:41Z

app/models/social_link.rb

+    :tiktok => %r{tiktok\.com/@([a-zA-Z0-9_]+)},
+    :twitch => %r{twitch\.tv/([a-zA-Z0-9_]+)},
+    :twitter_x => %r{(?:twitter|x)\.com/([a-zA-Z0-9_]+)},
+    :vimeo => %r{vimeo.com/([a-zA-Z0-9_]+)},


unescaped .

AntonKhorev · 2025-01-31T11:12:48Z

app/models/social_link.rb

+
+  def parsed
+    URL_PATTERNS.each do |platform, pattern|
+      names = url.match(pattern)


matches urls like https://evil.example.com/reddit.com/user/NotRedditor

nertc mentioned this pull request Dec 23, 2024

Profile Page Redesign #5438

Open

5 tasks

nertc force-pushed the issue_2245_add_social_links branch 2 times, most recently from 46f7da6 to 55c89e6 Compare December 24, 2024 07:08

nertc marked this pull request as ready for review December 24, 2024 07:19

AntonKhorev reviewed Dec 27, 2024

View reviewed changes

app/views/profiles/edit.html.erb Outdated Show resolved Hide resolved

AntonKhorev reviewed Dec 27, 2024

View reviewed changes

app/models/social_link.rb Outdated Show resolved Hide resolved

nertc force-pushed the issue_2245_add_social_links branch 2 times, most recently from a1b03f9 to bfa37a0 Compare January 8, 2025 10:53

nertc force-pushed the issue_2245_add_social_links branch from bfa37a0 to dc9d0cb Compare January 27, 2025 07:39

Add social profile links

8263827

nertc force-pushed the issue_2245_add_social_links branch from dc9d0cb to 8263827 Compare January 27, 2025 09:41

AntonKhorev reviewed Jan 31, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add social profile links #5439

Add social profile links #5439

nertc commented Dec 23, 2024

AntonKhorev commented Dec 27, 2024

AntonKhorev Dec 27, 2024

nertc Dec 27, 2024 •

edited

Loading

AntonKhorev Dec 28, 2024

nertc Jan 8, 2025

AntonKhorev Jan 31, 2025

AntonKhorev Dec 27, 2024

nertc Jan 8, 2025

AntonKhorev commented Dec 27, 2024

nertc commented Jan 8, 2025

nertc commented Jan 8, 2025

nertc commented Jan 27, 2025

AntonKhorev Jan 31, 2025

AntonKhorev Jan 31, 2025

AntonKhorev Jan 31, 2025

nertc Feb 6, 2025 •

edited

Loading

AntonKhorev Jan 31, 2025

AntonKhorev Jan 31, 2025

AntonKhorev Jan 31, 2025

AntonKhorev Jan 31, 2025

Add social profile links #5439

Are you sure you want to change the base?

Add social profile links #5439

Conversation

nertc commented Dec 23, 2024

Description

How has this been tested?

Screenshots

AntonKhorev commented Dec 27, 2024

Choose a reason for hiding this comment

nertc Dec 27, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AntonKhorev commented Dec 27, 2024

nertc commented Jan 8, 2025

nertc commented Jan 8, 2025

nertc commented Jan 27, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nertc Feb 6, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nertc Dec 27, 2024 •

edited

Loading

nertc Feb 6, 2025 •

edited

Loading