diff --git a/i18n/en.pot b/i18n/en.pot
index eee26c51..51e54648 100644
--- a/i18n/en.pot
+++ b/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"
diff --git a/src/components/Form.module.css b/src/components/Form.module.css
index 9fbda51a..8cc81e99 100644
--- a/src/components/Form.module.css
+++ b/src/components/Form.module.css
@@ -75,3 +75,4 @@
.errorNoticeBox {
max-width: 500px;
}
+
diff --git a/src/components/UserForm/BasicInformationSection.js b/src/components/UserForm/BasicInformationSection.js
index cf6c971f..20be7a2b 100644
--- a/src/components/UserForm/BasicInformationSection.js
+++ b/src/components/UserForm/BasicInformationSection.js
@@ -1,8 +1,10 @@
+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,
@@ -10,6 +12,7 @@ import {
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 && (
+
+ )}
{
+ 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 (
+
+
{React.createElement(icon, { color })}
+
{message}
+
+ )
+}
+
+EmailStatusMessage.propTypes = {
+ emailVerified: PropTypes.bool.isRequired,
+ enforceVerifiedEmail: PropTypes.bool.isRequired,
+ email: PropTypes.string,
+}
+
+export default EmailStatusMessage
diff --git a/src/components/UserForm/UserForm.module.css b/src/components/UserForm/UserForm.module.css
index c551ffaf..5232b049 100644
--- a/src/components/UserForm/UserForm.module.css
+++ b/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;
+}
\ No newline at end of file