Skip to content

Commit

Permalink
fix: get emailConfigured state from use config
Browse files Browse the repository at this point in the history
  • Loading branch information
Chisomchima committed Nov 21, 2024
1 parent 43d288f commit 4b68240
Show file tree
Hide file tree
Showing 5 changed files with 48 additions and 64 deletions.
4 changes: 2 additions & 2 deletions i18n/en.pot
Original file line number Diff line number Diff line change
Expand Up @@ -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: 2024-11-21T07:51:14.752Z\n"
"PO-Revision-Date: 2024-11-21T07:51:14.752Z\n"
"POT-Creation-Date: 2024-11-21T08:20:57.566Z\n"
"PO-Revision-Date: 2024-11-21T08:20:57.566Z\n"

msgid "Never"
msgstr "Never"
Expand Down
24 changes: 10 additions & 14 deletions src/layout/FormFields.component.js
Original file line number Diff line number Diff line change
Expand Up @@ -235,6 +235,13 @@ function createAvatarEditor(fieldBase, d2, valueStore) {
})
}

function createVerifyButton(fieldBase, valueStore) {
return Object.assign({}, fieldBase, {
component: VerifyEmail,
props: { userEmail: valueStore.state['email'] || '' },
})
}

function createFieldBaseObject(fieldName, mapping, valueStore) {
if (!mapping) {
log.warn(`Mapping not found for field: ${fieldName}`)
Expand Down Expand Up @@ -271,6 +278,7 @@ function createFieldBaseObject(fieldName, mapping, valueStore) {
function createField(fieldName, valueStore, d2) {
const mapping = userSettingsKeyMapping[fieldName]
const fieldBase = createFieldBaseObject(fieldName, mapping, valueStore)

switch (mapping.type) {
case 'textfield':
return createTextField(fieldBase, mapping)
Expand All @@ -284,6 +292,8 @@ function createField(fieldName, valueStore, d2) {
return createAccountEditor(fieldBase, d2, valueStore)
case 'avatar':
return createAvatarEditor(fieldBase, d2, valueStore)
case 'submit':
return createVerifyButton(fieldBase, valueStore)
default:
log.warn(
`Unknown control type "${mapping.type}" encountered for field "${fieldName}"`
Expand Down Expand Up @@ -364,20 +374,6 @@ class FormFields extends Component {
.filter((field) => !!field.name)
.map((field) => wrapFieldWithLabel(field))

// Append the Verify Email button after the 'email' field
const emailFieldIndex = fieldNames.indexOf('email')
if (emailFieldIndex !== -1) {
// check if user has an email configured
const emailValue = valueStore.state['email'] || ''
const verifyEmailField = {
name: 'emailVerification',
component: VerifyEmail,
props: { userEmail: emailValue },
}

fields.splice(emailFieldIndex + 1, 0, verifyEmailField)
}

return (
<Card style={styles.card}>
<CardText>
Expand Down
80 changes: 34 additions & 46 deletions src/layout/VerifyEmail.component.js
Original file line number Diff line number Diff line change
@@ -1,69 +1,57 @@
import { useAlert, useDataQuery } from '@dhis2/app-runtime'
import { Button, CircularLoader } from '@dhis2/ui'
import { getInstance as getD2 } from 'd2'
import { useAlert, useDataMutation, useConfig } from '@dhis2/app-runtime'
import { Button } from '@dhis2/ui'
import PropTypes from 'prop-types'
import React, { useState } from 'react'
import React from 'react'
import i18n from '../locales/index.js'

const systemSettingsQuery = {
systemSettings: {
resource: 'systemSettings',
},
const sendEmailVerificationMutation = {
resource: 'account/sendEmailVerification',
type: 'create',
}

export function VerifyEmail({ userEmail }) {
const errorAlert = useAlert(({ message }) => message, { critical: true })
const successAlert = useAlert(({ message }) => message, { success: true })
const [isLoading, setIsLoading] = useState(false)
const { data, loading: systemInfoLoading } =
useDataQuery(systemSettingsQuery)

const keyEmailHostname = data?.systemSettings?.keyEmailHostname
const keyEmailUsername = data?.systemSettings?.keyEmailUsername

const emailConfigured = !!keyEmailHostname && !!keyEmailUsername

const isButtonDisabled =
systemInfoLoading || !emailConfigured || !userEmail?.trim() || isLoading

if (systemInfoLoading) {
return <CircularLoader />
}
const handleEmailVerification = async () => {
setIsLoading(true)
try {
const d2 = await getD2()
const api = d2.Api.getApi()

await api.post('account/sendEmailVerification')
successAlert.show({
message: i18n.t('Email verification link sent successfully!'),
})
} catch (err) {
console.error('Error:', err)
errorAlert.show({
message:
err.message ||
i18n.t('Failed to send email verification link.'),
})
} finally {
setIsLoading(false)
}
const { systemInfo } = useConfig()

const [mutateEmailVerification, { loading: mutationLoading }] =
useDataMutation(sendEmailVerificationMutation, {
onComplete: () => {
successAlert.show({
message: i18n.t(
'Email verification link sent successfully!'
),
})
},
onError: (err) => {
errorAlert.show({
message:
err.message ||
i18n.t('Failed to send email verification link.'),
})
},
})

const emailConfigured = systemInfo?.emailConfigured

if (!emailConfigured) {
return null // If emailConfigured is false, don't display the button
}

return (
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
<Button
secondary
onClick={handleEmailVerification}
disabled={isButtonDisabled}
onClick={mutateEmailVerification}
disabled={mutationLoading || !userEmail}
loading={mutationLoading}
>
{i18n.t('Verify Email')}
</Button>
{isLoading && <CircularLoader small />}
</div>
)
}

VerifyEmail.propTypes = {
userEmail: PropTypes.string.isRequired,
}
2 changes: 1 addition & 1 deletion src/profile/Profile.component.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ function EditProfile() {
'firstName',
'surname',
'email',
'emailVerification',
'avatar',
'phoneNumber',
'introduction',
Expand All @@ -25,7 +26,6 @@ function EditProfile() {
'skype',
'telegram',
'twitter',
'emailVerification',
]

const pageLabel = i18n.t('Edit user profile')
Expand Down
2 changes: 1 addition & 1 deletion src/userSettingsMapping.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,9 @@ const settingsKeyMapping = {
validators: ['email'],
},
emailVerification: {
name: 'emailVerification',
label: i18n.t('E-mail Verification'),
type: 'submit',
multiLine: true,
},
phoneNumber: {
label: i18n.t('Mobile phone number'),
Expand Down

0 comments on commit 4b68240

Please sign in to comment.