feat: verify email warning #1458
Conversation
|
🚀 Deployed on https://pr-1458--dhis2-user-profile.netlify.app |
Chisomchima
changed the title
There was a problem hiding this comment.
Hi @Chisomchima: looks pretty good.
- The app already has some logic for retrieving systemSettings and api/me (see https://github.com/dhis2/user-profile-app/blob/master/src/AppWrapper.js). It would be better to modify/reuse those stores if possible so that we don't have to remake similar requests (also so the logic can be in one place).
- I think you're missing one requirement from the ticket:
when a system has the "enforce verified emails" setting and user has NOT verified their email*, if a user visits the user profile app, they are directed to user profile page. Right now if I just visit the main page of the app with a user with unverified email, I get directed to theviewProfilepage, but I should be sent toprofilepage in this case, so that I see the warning message. I assume you can edit the logic in app.router.js because it's a child component of the AppWrapper, so the settings/me information should be available here. If it's not possible for some reason, I think it's probably better to change the default routing of the app - can you add a margin on the NoticeBox warning, so that there's not the overhang that we currently have:
|
|
||
| export function VerifyEmailWarning({ config }) { | ||
| const enforceVerifiedEmail = | ||
| config?.system?.settings?.enforceVerifiedEmail || false |
There was a problem hiding this comment.
this should be config?.system?.settings?.settings?.enforceVerifiedEmail, right?
Also, I don't think config can be undefined as this component will not be rendered if config (this.context?.d2) is undefined, so you could get rid of the first level of optional chaining, i.e. config.system?.settings?.settings?.enforceVerifiedEmail
| @@ -26,6 +26,10 @@ html, body { | |||
| margin: 0; | |||
| } | |||
|
|
|||
| .noticebox-wrapper{ | |||
| margin-right: 15px; | |||
There was a problem hiding this comment.
I think it would make more sense to use logical properties when adding new css, so margin-inline-end here
| @@ -48,7 +48,20 @@ class AppRouter extends Component { | |||
| return { baseUrl, apiVersion } | |||
| } | |||
|
|
|||
| getDefaultRedirect() { | |||
| const enforceVerifiedEmail = | |||
| this.props.d2.system.settings.settings.enforceVerifiedEmail | |||
There was a problem hiding this comment.
I'd vote to add optional chaining here (applies to anything you've added) so that the app doesn't crash because of this info not being available
There might be other problems that cause a crash if this info is undefined, so it probably doesn't matter much, but I think being cautious here is good given that this NoticeBox/redirect is for informational, rather that functional purposes.
Implements DHIS2-18376
Description
This PR introduces a new feature to prompt users to verify their email address when the "Enforce Verified Emails" setting is enabled for the organization. The feature checks if the email verification setting is enabled (enforceVerifiedEmail), and whether the user has verified their email (emailVerified). If the email is not verified, a warning will be shown at the top of the user profile page, prompting the user to verify their email. The user can still continue using the system without email verification, but the warning will remain visible until their email is verified.
Checklist
The warning message is displayed inside a NoticeBox component at the top of the user profile page. It will show the following message when the user's email is not verified:
"Your email is not verified. Please verify your email to continue using the system."
Screenshots
Screen.Recording.2024-12-19.at.13.55.56.mov