feat: verify status edit page

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: 2025-01-15T10:47:12.485Z\n"
-"PO-Revision-Date: 2025-01-15T10:47:12.486Z\n"
+"POT-Creation-Date: 2025-01-20T12:44:13.377Z\n"
+"PO-Revision-Date: 2025-01-20T12:44:13.377Z\n"
 
 msgid "Yes"
 msgstr "Yes"
@@ -536,6 +536,15 @@ msgstr "Telegram"
 msgid "Twitter"
 msgstr "Twitter"
 
+msgid "This email has been verified."
+msgstr "This email has been verified."
+
+msgid "This email has not been verified."
+msgstr "This email has not been verified."
+
+msgid "This user does not have a verified email"
+msgstr "This user does not have a verified email"
+
 msgid "Invite user"
 msgstr "Invite user"
 

src/components/Form.module.css

@@ -75,3 +75,4 @@
 .errorNoticeBox {
     max-width: 500px;
 }
+

src/components/UserForm/BasicInformationSection.js

@@ -1,15 +1,18 @@
+import { useConfig } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import { composeValidators, hasValue, email } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { useEffect } from 'react'
 import { useForm } from 'react-final-form'
+import { useFeatureToggle } from '../../hooks/useFeatureToggle.js'
 import {
     FormSection,
     TextField,
     EmailField,
     SingleSelectField,
     CheckboxField,
 } from '../Form.js'
+import EmailStatusMessage from './EmailStatusMessage.js'
 import { useUserNameValidator } from './validators.js'
 
 const hasOption = (options, value) =>
@@ -27,11 +30,15 @@ const BasicInformationSection = React.memo(
         databaseLanguageOptions,
         currentUserId,
     }) => {
+        const { displayEmailVerifiedStatus } = useFeatureToggle()
+        const enforceVerifiedEmail =
+            useConfig()?.systemInfo?.enforceVerifiedEmail
         const { resetFieldState } = useForm()
         const validateUserName = useUserNameValidator({
             user,
             isInviteUser: inviteUser === INVITE_USER,
         })
+
         const userInterfaceLanguageInitialValue = hasOption(
             interfaceLanguageOptions,
             userInterfaceLanguage
@@ -72,6 +79,14 @@ const BasicInformationSection = React.memo(
                             : email
                     }
                 />
+
+                {displayEmailVerifiedStatus && user && (
+                    <EmailStatusMessage
+                        email={user?.email}
+                        emailVerified={user?.emailVerified}
+                        enforceVerifiedEmail={enforceVerifiedEmail}
+                    />
+                )}
                 <TextField
                     required
                     name="firstName"

src/components/UserForm/EmailStatusMessage.js

@@ -0,0 +1,45 @@
+import i18n from '@dhis2/d2-i18n'
+import { IconCheckmarkCircle16, colors, IconWarning16 } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React from 'react'
+import styles from './UserForm.module.css'
+
+const EmailStatusMessage = ({ email, emailVerified, enforceVerifiedEmail }) => {
+    let icon
+    let color
+    let message
+
+    if (enforceVerifiedEmail) {
+        if (email && emailVerified) {
+            color = colors.green600
+            icon = IconCheckmarkCircle16
+            message = i18n.t('This email has been verified.')
+        }
+        if (email && !emailVerified) {
+            color = colors.red600
+            icon = IconWarning16
+            message = i18n.t('This email has not been verified.')
+        }
+    } else {
+        if (!email || !emailVerified) {
+            color = colors.default
+            icon = IconWarning16
+            message = i18n.t('This user does not have a verified email')
+        }
+    }
+
+    return (
+        <div className={styles.statusMessage}>
+            <span>{React.createElement(icon, { color })}</span>
+            <div style={{ color }}>{message}</div>
+        </div>
+    )
+}
+
+EmailStatusMessage.propTypes = {
+    emailVerified: PropTypes.bool.isRequired,
+    enforceVerifiedEmail: PropTypes.bool.isRequired,
+    email: PropTypes.string,
+}
+
+export default EmailStatusMessage

src/components/UserForm/UserForm.module.css

@@ -11,3 +11,11 @@
     max-width: 500px;
     margin-bottom: var(--spacers-dp16);
 }
+
+.statusMessage {
+    display: flex;
+    margin-block: 8px;
+    gap: 5px;
+    align-items: center;
+    font-size: 13px;
+}