Fixes#15374
When the pop-out player was introduced, it had tweaks for the mobile
view, but it's now disabled in mobile mode and the styling was reused
for modals, causing the footer to be hidden on mobile without a good
reason.
Co-authored-by: Claire <claire.github-309c@sitedethib.com>
* Change notification permission handling
- allow changing individual alert settings even if permission is not explicitly
enabled (asks for permission on toggle)
- persist permission request banner dismissal across sessions through settings
* Add additional, more discrete message to grant permissions
* Change permission granting button design according to reviews
Co-authored-by: Claire <claire.github-309c@sitedethib.com>
* Add honeypot fields to limit non-specialized spam
Add two honeypot fields: a fake website input and a fake password confirmation
one. The label/placeholder/aria-label tells not to fill them, and they are
hidden in CSS, so legitimate users should not fall into these.
This should cut down on some non-Mastodon-specific spambots.
* Require a 3 seconds delay before submitting the registration form
* Fix tests
* Move registration form time check to model validation
* Give people a chance to clear the honeypot fields
* Refactor honeypot translation strings
Co-authored-by: Claire <claire.github-309c@sitedethib.com>
- Change overlay background to match color of viewed image
- Add interactive reply/boost/favourite buttons to footer of modal
- Change ugly "View context" link to button among the action bar
- Makes permalink to a toot more easily clickable
- Fix clicking between icon and time in fact clicking the display name
- Fix clicking slightly under time in fact clicking the display name
* Add notification permission handling code
* Request notification permission when enabling any notification setting
* Add badge to notification settings when permissions insufficient
* Disable alerts by default, requesting permission and enable them on onboarding
* Add bell button
Fix#4890
* Remove duplicate type from post-deployment migration
* Fix legacy class type mappings
* Improve query performance with better index
* Fix validation
* Remove redundant index from notifications
* Add database support for list show-reply preferences
* Add backend support to read and update list-specific show_replies settings
* Add basic UI to set list replies setting
* Add specs for list replies policy
* Switch "cycling" reply policy link to a set of radio inputs
* Capitalize replies_policy strings
* Change radio button design to be consistent with that of the directory explorer
* feat: add possibility of adding WebAuthn security keys to use as 2FA
This adds a basic UI for enabling WebAuthn 2FA. We did a little refactor
to the Settings page for editing the 2FA methods – now it will list the
methods that are available to the user (TOTP and WebAuthn) and from
there they'll be able to add or remove any of them.
Also, it's worth mentioning that for enabling WebAuthn it's required to
have TOTP enabled, so the first time that you go to the 2FA Settings
page, you'll be asked to set it up.
This work was inspired by the one donde by Github in their platform, and
despite it could be approached in different ways, we decided to go with
this one given that we feel that this gives a great UX.
Co-authored-by: Facundo Padula <facundo.padula@cedarcode.com>
* feat: add request for WebAuthn as second factor at login if enabled
This commits adds the feature for using WebAuthn as a second factor for
login when enabled.
If users have WebAuthn enabled, now a page requesting for the use of a
WebAuthn credential for log in will appear, although a link redirecting
to the old page for logging in using a two-factor code will also be
present.
Co-authored-by: Facundo Padula <facundo.padula@cedarcode.com>
* feat: add possibility of deleting WebAuthn Credentials
Co-authored-by: Facundo Padula <facundo.padula@cedarcode.com>
* feat: disable WebAuthn when an Admin disables 2FA for a user
Co-authored-by: Facundo Padula <facundo.padula@cedarcode.com>
* feat: remove ability to disable TOTP leaving only WebAuthn as 2FA
Following examples form other platforms like Github, we decided to make
Webauthn 2FA secondary to 2FA with TOTP, so that we removed the
possibility of removing TOTP authentication only, leaving users with
just WEbAuthn as 2FA. Instead, users will have to click on 'Disable 2FA'
in order to remove second factor auth.
The reason for WebAuthn being secondary to TOPT is that in that way,
users will still be able to log in using their code from their phone's
application if they don't have their security keys with them – or maybe
even lost them.
* We had to change a little the flow for setting up TOTP, given that now
it's possible to setting up again if you already had TOTP, in order to
let users modify their authenticator app – given that now it's not
possible for them to disable TOTP and set it up again with another
authenticator app.
So, basically, now instead of storing the new `otp_secret` in the
user, we store it in the session until the process of set up is
finished.
This was because, as it was before, when users clicked on 'Edit' in
the new two-factor methods lists page, but then went back without
finishing the flow, their `otp_secret` had been changed therefore
invalidating their previous authenticator app, making them unable to
log in again using TOTP.
Co-authored-by: Facundo Padula <facundo.padula@cedarcode.com>
* refactor: fix eslint errors
The PR build was failing given that linting returning some errors.
This commit attempts to fix them.
* refactor: normalize i18n translations
The build was failing given that i18n translations files were not
normalized.
This commits fixes that.
* refactor: avoid having the webauthn gem locked to a specific version
* refactor: use symbols for routes without '/'
* refactor: avoid sending webauthn disabled email when 2FA is disabled
When an admins disable 2FA for users, we were sending two mails
to them, one notifying that 2FA was disabled and the other to notify
that WebAuthn was disabled.
As the second one is redundant since the first email includes it, we can
remove it and send just one email to users.
* refactor: avoid creating new env variable for webauthn_origin config
* refactor: improve flash error messages for webauthn pages
Co-authored-by: Facundo Padula <facundo.padula@cedarcode.com>
* Add HTML-level validation of username in sign-up form
* Make required fields with incorrect values more visible
* Enable HTML form validation for the registration form
* Mark agreement checkbox as required client-side
* Add minimum length to password
* Add client-side password confirmation validation
Fixes#14337
The new audio player sets the background and foreground colors automatically
based on the thumbnail of the audio file, but the mastodon-light theme
overrides the controls' colors with a hardcoded color, which sometimes make
them unreadable.
* Add UserNote model
* Add UI for user notes
* Put comment in relationships entity
* Add API to create user notes
* Copy user notes to new account when receiving a Move activity
* Address some of the review remarks
* Replace modal by inline edition
* Please CodeClimate
* Button design changes
* Change design again
* Cancel note edition when pressing Escape
* Fixes
* Tweak design again
* Move “Add note” item, and allow users to add notes to themselves
* Rename UserNote into AccountNote, rename “comment” Relationship attribute to “note”
* Fix header button changing header size in settings pages
* Make form buttons look more like a part of the form in settings pages
- Put buttons closer, using same distance as between inputs
- Make buton font size a bit smaller to blend a bit more
- Add the class button to button tags for consisent styling
* Fix design issues with sensitive preview cards
* Center “sensitive” label on preview image for interactive cards
* Add “button” role to sensitive preview card text
- Fix audio attachments not being represented in OpenGraph tags
- Fix audio being represented as "1 image" in OpenGraph descriptions
- Fix video metadata being overwritten by paperclip-av-transcoder
- Fix embedded player not using Mastodon's UI
- Fix audio/video progress bars not moving smoothly
- Fix audio/video buffered bars not displaying correctly
* Fix audio download button not starting download in web UI
* Fix volume controls on audio and video players in web UI
* Remove download button from video player in web UI
* Refactor list of emoji requiring added outlines so that it can be theme-specific
* Split inaccessible emoji to emoji requiring an outline and ones that can be inverted
* Drop the “silouhettes” from black emoji as they seem to have changed color
* Add inaccessible emojis list for the light theme
* Use bordered emoji variant instead of unreliable CSS
* Fix some account avatars on public pages having incorrect size
* Remove outdated and overridden width and height attributes
* Remove more hardcoded width/height attributes
Change `account_link_to` to use an image tag rather than some
inline CSS. Dropped the `size` parameter in the process, but it wasn't
used for anything except the default value of 36px.
Dropped CSS rules that were always overriden, and defaulted to 36px width
and height instead.
* Move .back-button inline styles to CSS file
All occurrences of the back-button CSS class used the same inline
CSS rules, so moved them over to the CSS file
* Fix “Add new domain block” button using inline CSS
* Replace common pattern of inline-styled button boxes by a CSS class
In particular, switching from `float: left/right` to a flexbox with
`justify-content: space-between`. This implied changing the order of
a few HTML tags and adding an empty `div` in one case.
Also removed a `margin-bottom` rule that wasn't needed due to the
margins of surrounding elements.
* Move account admin view inline CSS to CSS file
* Move some inline styles to CSS files
* Move default_account_display_name span to fix useless tags with duplicate id
* Change handling of public pages spoiler text from inline CSS to dataset attribute
* Use the `dir` HTML attribute instead of inline CSS
* Move status action bar inline CSS to CSS file
* Hide logo resources from CSS file, not inline CSS
Fixes#11601
* Move translation prompt styling from inline CSS to CSS file
* Move “invited by” styling on registration form from inline to CSS file
* Use the progress tag to display poll results in JS fallback
* Fix poll results JS-less fallback when the user has voted for an option
* Change account public page “moved” notice to use img tags instead of inline CSS
* Move OTP hint inline CSS to SCSS file
* Hide JS-less fallback vote progressbars from accessibility tools
Co-authored-by: Eugen Rochko <eugen@zeonfederated.com>
This commit redesign the polls and increases characters limit for the
options from 25 to 50 characters, giving pollsters more freedom.
Summarizing, the redesign is making the polls more adaptive for upcoming
changes to the options characters limit: the bar, or a "chart", is now
displayed separately from the option itself; vote check mark is moved
next to the option text, making the percentages take less space. Option
lengths are taken into account and text is wrapped to multiple lines
if necessary to avoid overflow.
* Make the area to the left “Show Thread” also expand the toot in Web UI
* Clicking the left part of a conversation with the avatars now opens it in Web UI
* Change meaning of /api/v1/announcements/:id/dismiss to mark an announcement as read
* Change how unread announcements are counted in UI
* Add unread marker to announcements and mark announcements as unread as they are displayed
* Fixups
This adds "Show thread" button to the status view which is used in
profiles. The logic to display the button is mimicking logic in
web app available at app/javascript/mastodon/components/status.js#L439.
* The little change in components CSS required to remove enforced
underline for all links on public pages on our button.
This commit attempts to fix most of regressions caused by #12961
pull request which added even spread of space between tabs.
The following fixes were done:
- Don't hide overflow in tabs
As tabs use ::after and ::before pseudo-elements to create arrow on
the bottom of selected tab, "overflow: hidden" will cause this arrow
to look split from the bottom container.
For the future we probably should use slider element instead, which
would align according to currently selected tab, instead of relying
on pseudo-elements. Such method would also allow smooth transitions.
- Disallow wrapping tab text on insufficient space
This would fix some unwanted behavior[1] when on insufficient width,
renderer might attempt wrapping text to not overtake others' space.
[1]: https://mastodon.social/@Gargron/103546083813829165
* Move announcements above scroll container; add button to temporarily hide them
* Remove interface for dismissing announcements
* Display number of unread announcements
* Count unread announcements accurately
* Fix size of announcement box not fitting the currently displayed announcement
* Fix announcement box background color to match button color
This commit fixes uneven spread of space between the tabs in profiles
or notifications (filters). The problem was that links and buttons
shown as blocks had their width determined according to the content
inside of them, so if one tab has more text content than another, it
is going to take over others space, which is uneven and results in
incorrectly aligned (?) tabs display.
By specifying the size of 100% for each tab, parent container will be
forced to divide available space by the number of elements and evenly
give each child fixed space, "text-align: center" then doing its best
job to keep tabs text centered in that space. This relatively fixes
the problem, but will introduce another one - when the block has more
content that its width allows to have, in this scenario the text should
be wrapped or will be displayed over the other elements, but I see this
more as translators' problem. Still, for this case "overflow: hidden"
is added and any unfitting text will be cut out.
* Add announcements
Fix#11006
* Add reactions to announcements
* Add admin UI for announcements
* Add unit tests
* Fix issues
- Add `with_dismissed` param to announcements API
- Fix end date not being formatted when time range is given
- Fix announcement delete causing reactions to send streaming updates
- Fix announcements container growing too wide and mascot too small
- Fix `all_day` being settable when no time range is given
- Change text "Update" to "Announcement"
* Fix scheduler unpublishing announcements before they are due
* Fix filter params not being passed to announcements filter
One user suggested that the loading indicator should not be written
ALL CAPS, at first it was thought this change is very minor, but then
a few other people asked agreed on the same thing - variant without
caps looks better. It may be related that it is harder to read or just
looks too "catchy". Moreover, I asked @rf@mastodonsocial.ru community
what they think of that and 82% of 22 people agreed on this change.
This commit removes all usage of text-transform: uppercase, where the
font size specified, it changes the value by one pixel larger, so we
still keeping the "designed" size of the labels but without using CAPS.
This commit changes margins of the page heading header, actions in
order to fix displaying with low screen size and long enough header.
It is working by giving heading and action buttons margin from top
and then negating it in parent element. Whenever flex item wrap, the
"negated" margin will be applied again, providing us nice space
between header and action buttons.
This commit also adds a margin to header, so it does not clamp with
the heading actions and they wrap a little earlier (15px ahead). As
well as the left margin is not anymore applied to the first action.
This commit:
- Refactors centered text blocks currently used for placeholders
for empty tables and puts styles for it in separate class -
.centered-text, simply aliasing text-align: center. Which is
furtherly used in this commit.
- Improves applications settings page to use heading actions, moving
"New application" button there, and displaying placeholder "You
have no applications" in place of empty table.
- Improves custom emoji settings page to use heading action
for "Upload" button, making it more easily accessible without
need to scroll through all of the emojis.
- Improves email domain blocks settings page, moving "Add new" to the
heading actions and using placeholder "No e-mail domains currently
blacklisted" instead of showing empty table.
Fixes#12607
`will-change: transform` apparently makes manual scrolling impossible on
Firefox/Windows. While this should probably be considered a Firefox bug,
`will-change: transform` seem like a very aggressive performance hint that
may possibly make the browser consume more resources than needed, especially
in multiple-column mode.
This was originally added to improve scrolling performances on mobile, but
I think this isn't necessary anymore, because of the two following reasons:
- `contain: paint` (which is implied by `contain: strict`, which we apply
whenever the browser supports grids) should have similar effects
- in single-column mode, the scrolling container is the root element, which
I believe is optimized in at least Chromium
Keep in mind that I have not been able to make in-depth benchmarks, and
especially not been able to try on mobile, so performances should probably
be investigated further…
* Move resolved button to the heading
This is one of the commits on improving overall reports page structure.
It changes where resolved button is located, moving it to the heading,
right next to the "Report #n" header, so-called "hot-place" to look at.
To accomplish this we have to declare one more content variable, change
admin dashboard template to respect it and CSS files for minor styling,
so buttons are inlined and centrally aligned according to the heading.
* Move actions buttons below the report table
I believe that actions to react on report should not be located at the
top of the page, instead they should be either after the table or
reporter's comment. This is just a logical sign that you should not
react to the report without reading all the details first.
