feat: update enforce verified email checkbox

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-07T11:06:15.516Z\n"
-"PO-Revision-Date: 2025-01-07T11:06:15.516Z\n"
+"POT-Creation-Date: 2025-01-17T10:18:20.401Z\n"
+"PO-Revision-Date: 2025-01-17T10:18:20.402Z\n"
 
 msgid "Failed to load: {{error}}"
 msgstr "Failed to load: {{error}}"
@@ -548,9 +548,6 @@ msgstr "Respect category option start and end date in analytics table export"
 msgid "Include zero data values in analytics tables"
 msgstr "Include zero data values in analytics tables"
 
-msgid "Enable embedded dashboards"
-msgstr "Enable embedded dashboards"
-
 msgid "Caching factor"
 msgstr "Caching factor"
 
@@ -722,12 +719,12 @@ msgstr "Do not require recaptcha for self registration"
 msgid "Enable user account recovery"
 msgstr "Enable user account recovery"
 
-msgid "Enforce verified emails"
-msgstr "Enforce verified emails"
-
 msgid "Lock user account temporarily after multiple failed login attempts"
 msgstr "Lock user account temporarily after multiple failed login attempts"
 
+msgid "Enforce verified emails"
+msgstr "Enforce verified emails"
+
 msgid "Allow users to grant own user roles"
 msgstr "Allow users to grant own user roles"
 

src/form-fields/check-box.js

@@ -17,6 +17,7 @@ class Checkbox extends React.Component {
             onChange,
             sectionLabel,
             value,
+            explanatoryText,
             ...other
         } = this.props
         /* eslint-enable no-unused-vars */
@@ -31,6 +32,9 @@ class Checkbox extends React.Component {
                     checked={value === 'true'}
                     {...other}
                 />
+                {explanatoryText && (
+                    <p style={{ fontSize: '12px' }}>{explanatoryText}</p>
+                )}
             </div>
         )
     }
@@ -40,6 +44,7 @@ Checkbox.propTypes = {
     onChange: PropTypes.func.isRequired,
     errorStyle: PropTypes.object,
     errorText: PropTypes.string,
+    explanatoryText: PropTypes.string,
     sectionLabel: PropTypes.string,
     value: PropTypes.string,
 }

src/settingsFields.component.js

@@ -129,6 +129,12 @@ function getMenuItems(mapping) {
     return optionsMenuItems.concat(sourceMenuItems)
 }
 
+function isEmailConfigured(d2) {
+    const emailHostName = d2.system.settings.settings.keyEmailHostName
+    const emailUserName = d2.system.settings.settings.keyEmailUsername
+    return emailHostName && emailUserName
+}
+
 class SettingsFields extends React.Component {
     componentDidMount() {
         this.subscriptions = []
@@ -189,7 +195,43 @@ class SettingsFields extends React.Component {
                             undefined,
                     }),
                 })
-
+            case 'emailCheckbox': {
+                const emailConfigured = isEmailConfigured(d2)
+                const explanatoryText =
+                    !emailConfigured &&
+                    i18n.t(
+                        'Settings must be configured to send emails to enforce verified emails'
+                    )
+                return Object.assign({}, fieldBase, {
+                    component: Checkbox,
+                    props: {
+                        label: fieldBase.props.floatingLabelText,
+                        sectionLabel:
+                            (mapping.sectionLabel && mapping.sectionLabel) ||
+                            undefined,
+                        style: fieldBase.props.style,
+                        onCheck: (_event, checked) => {
+                            if (!emailConfigured && checked === true) {
+                                settingsActions.showSnackbarMessage(
+                                    i18n.t(
+                                        'You cannot enable "Enforce Verified Email" until email settings are configured.'
+                                    )
+                                )
+                                return
+                            }
+                            if (!emailConfigured && checked === false) {
+                                settingsActions.saveKey(key, 'false')
+                                return
+                            }
+                            settingsActions.saveKey(
+                                key,
+                                checked ? 'true' : 'false'
+                            )
+                        },
+                        explanatoryText,
+                    },
+                })
+            }
             case 'checkbox':
                 return Object.assign({}, fieldBase, {
                     component: Checkbox,
@@ -204,7 +246,6 @@ class SettingsFields extends React.Component {
                         },
                     },
                 })
-
             case 'staticContent':
                 return Object.assign({}, fieldBase, {
                     component: FileUpload,

src/settingsKeyMapping.js

@@ -259,10 +259,6 @@ const settingsKeyMapping = {
         label: i18n.t('Include zero data values in analytics tables'),
         type: 'checkbox',
     },
-    keyEmbeddedDashboardsEnabled: {
-        label: i18n.t('Enable embedded dashboards'),
-        type: 'checkbox',
-    },
     keyAnalyticsCacheProgressiveTtlFactor: {
         label: i18n.t('Caching factor'),
         type: 'dropdown',
@@ -552,16 +548,20 @@ const settingsKeyMapping = {
         label: i18n.t('Enable user account recovery'),
         type: 'checkbox',
     },
-    enforceVerifiedEmail: {
-        label: i18n.t('Enforce verified emails'),
-        type: 'checkbox',
-    },
     keyLockMultipleFailedLogins: {
         label: i18n.t(
             'Lock user account temporarily after multiple failed login attempts'
         ),
         type: 'checkbox',
     },
+    keyEmbeddedDashboardsEnabled: {
+        label: i18n.t('Enable embedded dashboards'),
+        type: 'checkbox',
+    },
+    enforceVerifiedEmail: {
+        label: i18n.t('Enforce verified emails'),
+        type: 'emailCheckbox',
+    },
     keyCanGrantOwnUserAuthorityGroups: {
         label: i18n.t('Allow users to grant own user roles'),
         type: 'checkbox',