Add social profile links #5439
Add social profile links #5439
Conversation
nertc
force-pushed
the
issue_2245_add_social_links
branch
2 times, most recently
from
46f7da6 to
55c89e6
Compare
|
Do we need another set of icons in addition to |
app/models/social_link.rb
Outdated
|
|
||
| def parsed | ||
| URL_PATTERNS.each do |platform, pattern| | ||
| username = url.match(pattern) |
There was a problem hiding this comment.
It's not a username, is it?
There was a problem hiding this comment.
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)
There was a problem hiding this comment.
MatchData object is not a username.
There was a problem hiding this comment.
To use more intuitive name and not to confuse "user's name" to username, name of the variable username was changed to names
| `); | ||
|
|
||
| socialLinkForm.find("button").click(function () { | ||
| $(this).parent().remove(); |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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
Outdated
| class SocialLink < ApplicationRecord | ||
| belongs_to :user | ||
|
|
||
| validates :url, :presence => true, :format => { :with => URI::DEFAULT_PARSER.make_regexp(%w[http https]), :message => I18n.t("profiles.edit.social_links.http_parse_error") } |
There was a problem hiding this comment.
This doesn't check if url starts with http://.
And if you also disable CSP:
There was a problem hiding this comment.
Changed :with to regex pattern that will check the string to start with http:// or https://
|
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 |
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). |
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 |
nertc
force-pushed
the
issue_2245_add_social_links
branch
from
55c89e6 to
a1b03f9
Compare
nertc
force-pushed
the
issue_2245_add_social_links
branch
from
a1b03f9 to
bfa37a0
Compare
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:
Currently parser parses these websites and adds their icons which are taken from Bootstrap-Icons:
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:
