feat: first draft

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:04:56.155Z\n"
-"PO-Revision-Date: 2025-01-07T11:04:56.155Z\n"
+"POT-Creation-Date: 2025-01-08T13:52:44.921Z\n"
+"PO-Revision-Date: 2025-01-08T13:52:44.921Z\n"
 
 msgid "Never"
 msgstr "Never"

src/layout/FormFields.component.js

@@ -18,6 +18,7 @@ import AvatarEditor from './AvatarEditor.component.js'
 import AppTheme from './theme.js'
 import { VerifyEmail } from './VerifyEmail.component.js'
 import { VerifyEmailWarning } from './VerifyEmailWarning.js'
+import {ModalField} from "./ModalField.component";
 
 const styles = {
     header: {
@@ -243,6 +244,18 @@ function createVerifyButton(fieldBase, valueStore) {
     })
 }
 
+function createModalField(fieldBase, valueStore, onUpdate) {
+    return Object.assign({}, fieldBase, {
+        component: ModalField,
+        props: {
+            onUpdate,
+            userEmail: valueStore.state['email'] || '',
+            setUserEmail: email => {
+                valueStore.setState({...valueStore.state, email})}
+        },
+    })
+}
+
 function createFieldBaseObject(fieldName, mapping, valueStore) {
     if (!mapping) {
         log.warn(`Mapping not found for field: ${fieldName}`)
@@ -276,7 +289,7 @@ function createFieldBaseObject(fieldName, mapping, valueStore) {
     )
 }
 
-function createField(fieldName, valueStore, d2) {
+function createField(fieldName, valueStore, d2, onUpdate) {
     const mapping = userSettingsKeyMapping[fieldName]
     const fieldBase = createFieldBaseObject(fieldName, mapping, valueStore)
 
@@ -295,6 +308,8 @@ function createField(fieldName, valueStore, d2) {
             return createAvatarEditor(fieldBase, d2, valueStore)
         case 'submit':
             return createVerifyButton(fieldBase, valueStore)
+        case 'modal':
+            return createModalField(fieldBase, valueStore, onUpdate)
         default:
             log.warn(
                 `Unknown control type "${mapping.type}" encountered for field "${fieldName}"`
@@ -365,9 +380,10 @@ class FormFields extends Component {
     renderFields(fieldNames) {
         const d2 = this.context.d2
         const valueStore = this.props.valueStore
+        const onUpdate = this.props.onUpdateField
         // Create the regular fields
         const fields = fieldNames
-            .map((fieldName) => createField(fieldName, valueStore, d2))
+            .map((fieldName) => createField(fieldName, valueStore, d2, onUpdate))
             .filter((field) => !!field.name)
             .map((field) => wrapFieldWithLabel(field))
 

src/layout/ModalField.component.js

@@ -0,0 +1,63 @@
+import React, {useMemo, useState} from 'react'
+import {
+    Button,
+    ButtonStrip,
+    composeValidators,
+    email,
+    hasValue,
+    InputField,
+    Modal,
+    ModalActions,
+    ModalContent,
+    ModalTitle,
+} from "@dhis2/ui";
+import PropTypes from "prop-types";
+
+export function ModalField({userEmail, setUserEmail, onUpdate}) {
+
+    const [modalOpen, setModalOpen] = useState()
+    const [newEmail, setNewEmail] = useState(userEmail)
+    const isValidNewEmail = useMemo(() =>
+        newEmail === "mamma" ? false : true
+    , [newEmail])
+    return (
+        <>
+            <InputField value={userEmail} disabled/>
+            <Button onClick={() => setModalOpen(true)}>Edit email</Button>
+            <Modal hide={!modalOpen}>
+                <ModalTitle>Update email</ModalTitle>
+
+                <ModalContent>
+                    <InputField
+                        value={newEmail}
+                        type="email"
+                        error={!isValidNewEmail}
+                        validationText={isValidNewEmail? undefined : "OH NO"}
+                        onChange={(newValue) => setNewEmail(newValue.value)}/>
+                </ModalContent>
+
+                <ModalActions>
+                    <ButtonStrip end>
+                        <Button onClick={() => setModalOpen(false)} secondary>
+                            Close modal
+                        </Button>
+
+                        <Button
+                            onClick={() => {
+                            setUserEmail(newEmail)
+                            onUpdate('email', newEmail)
+                            setModalOpen(false)}}
+                            primary
+                            disabled={!isValidNewEmail}>
+                            Save
+                        </Button>
+                    </ButtonStrip>
+                </ModalActions>
+            </Modal>
+        </>
+    )
+}
+
+ModalField.propTypes = {
+    userEmail: PropTypes.string
+}

src/userSettingsMapping.js

@@ -29,7 +29,7 @@ const settingsKeyMapping = {
     },
     email: {
         label: i18n.t('E-mail'),
-        type: 'textfield',
+        type: 'modal',
         validators: ['email'],
     },
     emailVerification: {