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