feat: verify email warning

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-11-21T08:20:57.566Z\n"
-"PO-Revision-Date: 2024-11-21T08:20:57.566Z\n"
+"POT-Creation-Date: 2024-12-19T12:57:22.277Z\n"
+"PO-Revision-Date: 2024-12-19T12:57:22.277Z\n"
 
 msgid "Never"
 msgstr "Never"
@@ -376,6 +376,13 @@ msgstr "Failed to send email verification link."
 msgid "Verify Email"
 msgstr "Verify Email"
 
+msgid ""
+"Your email is not verified. Please verify your email to continue using the "
+"system."
+msgstr ""
+"Your email is not verified. Please verify your email to continue using the "
+"system."
+
 msgid "Manage personal access tokens"
 msgstr "Manage personal access tokens"
 

src/app.router.js

@@ -48,7 +48,20 @@ class AppRouter extends Component {
         return { baseUrl, apiVersion }
     }
 
+    getDefaultRedirect() {
+        const enforceVerifiedEmail =
+            this.props.d2.system.settings.settings.enforceVerifiedEmail
+        const emailVerified = this.props.d2.currentUser.emailVerified
+
+        // Redirect to the profile page if email is unverified and the setting is enforced
+        return enforceVerifiedEmail && !emailVerified
+            ? '/profile'
+            : '/viewProfile'
+    }
+
     render() {
+        const defaultRedirect = this.getDefaultRedirect()
+
         return (
             <DataProvider {...this.getDataProviderProps()}>
                 <CssVariables colors spacers />
@@ -77,7 +90,7 @@ class AppRouter extends Component {
                                     component={PersonalAccessTokens}
                                 />
                                 <Route path="aboutPage" component={AboutPage} />
-                                <Redirect from="/" to="/viewProfile" />
+                                <Redirect from="/" to={defaultRedirect} />
                             </Route>
                         </Router>
                     </div>

src/layout/FormFields.component.js

@@ -17,6 +17,7 @@ import userSettingsKeyMapping from '../userSettingsMapping.js'
 import AvatarEditor from './AvatarEditor.component.js'
 import AppTheme from './theme.js'
 import { VerifyEmail } from './VerifyEmail.component.js'
+import { VerifyEmailWarning } from './VerifyEmailWarning.js'
 
 const styles = {
     header: {
@@ -387,6 +388,9 @@ class FormFields extends Component {
             <div className="content-area">
                 <div style={styles.header}>{this.props.pageLabel}</div>
                 <form autoComplete="off">
+                    {this.context?.d2 && (
+                        <VerifyEmailWarning config={this.context.d2} />
+                    )}
                     {this.renderFields(this.props.fieldKeys)}
                 </form>
             </div>

src/layout/VerifyEmailWarning.js

@@ -0,0 +1,37 @@
+import i18n from '@dhis2/d2-i18n'
+import { NoticeBox } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export function VerifyEmailWarning({ config }) {
+    const enforceVerifiedEmail =
+        config?.system?.settings?.enforceVerifiedEmail || false
+    const emailVerified = config?.currentUser?.emailVerified || false
+
+    if (enforceVerifiedEmail && !emailVerified) {
+        return (
+            <div className="noticebox-wrapper">
+                <NoticeBox warning>
+                    {i18n.t(
+                        'Your email is not verified. Please verify your email to continue using the system.'
+                    )}
+                </NoticeBox>
+            </div>
+        )
+    }
+
+    return null
+}
+
+VerifyEmailWarning.propTypes = {
+    config: PropTypes.shape({
+        currentUser: PropTypes.shape({
+            emailVerified: PropTypes.bool,
+        }),
+        system: PropTypes.shape({
+            settings: PropTypes.shape({
+                enforceVerifiedEmail: PropTypes.bool,
+            }),
+        }),
+    }).isRequired,
+}

src/layout/app.css

@@ -26,6 +26,10 @@ html, body {
   margin: 0;
 }
 
+.noticebox-wrapper{
+  margin-right: 15px;
+}
+
 .info-cell-name {
   color: #777;
   font-size: 12pt;