## Linear Ticket - https://linear.app/chatwoot/issue/CW-6884/nudge-users-with-a-dashboard-banner-when-2fa-backup-codes-run-low ## Description Shows a dashboard-wide banner when the signed-in user has 3 or fewer unused backup codes left (amber), turning to an alert style at 0 remaining. Clicking "Generate codes" takes the user to the MFA settings page so they can regenerate codes before they get locked out. Inspired by Google's post-backup-code-use nudges. ## How to test 1. Sign in as a user with MFA enabled. <img width="1512" height="824" alt="Screenshot 2026-08-05 at 4 52 15 PM" src="https://github.com/user-attachments/assets/08138f3e-cc15-451e-bbcc-7772dc2a875c" /> <img width="1507" height="701" alt="Screenshot 2026-08-05 at 4 54 02 PM" src="https://github.com/user-attachments/assets/580051fa-cbb5-47c1-81a3-258b7c5b5a03" /> 2. In a Rails console, simulate a low state by marking most backup codes as used: ```ruby u = User.find_by(email: '<your user>') codes = u.otp_backup_codes.dup (0...8).each { |i| codes[i] = 'XXXXXXXX' } u.otp_backup_codes = codes u.save! ``` 3. Reload any dashboard page — the amber banner should appear with a "Generate codes" CTA. 4. Click the CTA — it should route to **Profile → Two-Factor Authentication**, where you can regenerate codes. 5. Set the count to 0 (mark all 10 as `'XXXXXXXX'`) — banner should switch to the red/alert style. 6. Regenerate codes — banner should disappear on the next dashboard page load. ## Checklist: - [ ] My code follows the style guidelines of this project - [ ] I have performed a self-review of my code - [ ] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [ ] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules > Base is the [disable-with-backup-code PR branch](https://github.com/chatwoot/chatwoot/pull/14102) so CTAs around recovery are consistent; rebase onto `develop` once that merges. --------- Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Co-authored-by: iamsivin <iamsivin@gmail.com> Co-authored-by: Sony Mathew <sony@chatwoot.com>
18 lines
734 B
JavaScript
18 lines
734 B
JavaScript
export const BUS_EVENTS = {
|
|
SHOW_ALERT: 'SHOW_ALERT',
|
|
START_NEW_CONVERSATION: 'START_NEW_CONVERSATION',
|
|
FOCUS_CUSTOM_ATTRIBUTE: 'FOCUS_CUSTOM_ATTRIBUTE',
|
|
SCROLL_TO_MESSAGE: 'SCROLL_TO_MESSAGE',
|
|
MESSAGE_SENT: 'MESSAGE_SENT',
|
|
ON_MESSAGE_LIST_SCROLL: 'ON_MESSAGE_LIST_SCROLL',
|
|
WEBSOCKET_DISCONNECT: 'WEBSOCKET_DISCONNECT',
|
|
WEBSOCKET_RECONNECT: 'WEBSOCKET_RECONNECT',
|
|
WEBSOCKET_RECONNECT_COMPLETED: 'WEBSOCKET_RECONNECT_COMPLETED',
|
|
TOGGLE_REPLY_TO_MESSAGE: 'TOGGLE_REPLY_TO_MESSAGE',
|
|
SHOW_TOAST: 'newToastMessage',
|
|
NEW_CONVERSATION_MODAL: 'newConversationModal',
|
|
INSERT_INTO_RICH_EDITOR: 'insertIntoRichEditor',
|
|
INSERT_INTO_NORMAL_EDITOR: 'insertIntoNormalEditor',
|
|
MFA_STATE_CHANGED: 'MFA_STATE_CHANGED',
|
|
};
|