@strapi/email 5.37.1 → 5.38.0

package/dist/admin/pages/Settings.mjs

@@ -1,12 +1,13 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { Page, useNotification, useFetchClient, Layouts } from '@strapi/admin/strapi-admin';
-import { Flex, Box, Typography, Grid, Field, TextInput, SingleSelect, SingleSelectOption, Button } from '@strapi/design-system';
-import { Mail } from '@strapi/icons';
+import { Flex, Box, Typography, Grid, Field, TextInput, SingleSelect, SingleSelectOption, Button, Badge } from '@strapi/design-system';
+import { Check, Cross, Mail } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { useQuery, useMutation } from 'react-query';
 import { styled } from 'styled-components';
 import { ValidationError } from 'yup';
+import { parseEmailAddress } from '../shared/email-address-parser.mjs';
 import { PERMISSIONS } from '../constants.mjs';
 import { getYupInnerErrors } from '../utils/getYupInnerErrors.mjs';
 import { schema } from '../utils/schema.mjs';
@@ -14,6 +15,190 @@ import { schema } from '../utils/schema.mjs';
 const DocumentationLink = styled.a`
   color: ${({ theme })=>theme.colors.primary600};
 `;
+const FEATURE_LABELS = {
+    dkim: {
+        id: 'email.Settings.capabilities.feature.dkim',
+        defaultMessage: 'DKIM'
+    },
+    pool: {
+        id: 'email.Settings.capabilities.feature.pool',
+        defaultMessage: 'Connection pool'
+    },
+    rateLimiting: {
+        id: 'email.Settings.capabilities.feature.rateLimiting',
+        defaultMessage: 'Rate limiting'
+    },
+    oauth2: {
+        id: 'email.Settings.capabilities.feature.oauth2',
+        defaultMessage: 'OAuth2'
+    },
+    requireTLS: {
+        id: 'email.Settings.capabilities.feature.requireTLS',
+        defaultMessage: 'Require TLS'
+    }
+};
+const CapabilitiesSection = ({ capabilities, isIdle, formatMessage })=>{
+    const transport = capabilities.transport;
+    const auth = capabilities.auth;
+    const features = capabilities.features ?? [];
+    const encryptionLabel = transport?.secure === true ? 'TLS' : transport?.port === 587 ? 'STARTTLS' : transport?.port === 465 ? 'TLS' : 'None';
+    return /*#__PURE__*/ jsxs(Flex, {
+        direction: "column",
+        alignItems: "stretch",
+        gap: 4,
+        children: [
+            /*#__PURE__*/ jsxs(Flex, {
+                direction: "column",
+                alignItems: "stretch",
+                gap: 1,
+                children: [
+                    /*#__PURE__*/ jsx(Typography, {
+                        variant: "delta",
+                        tag: "h2",
+                        children: formatMessage({
+                            id: 'email.Settings.capabilities.title',
+                            defaultMessage: 'Provider capabilities'
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Typography, {
+                        children: formatMessage({
+                            id: 'email.Settings.capabilities.subtitle',
+                            defaultMessage: 'Current SMTP configuration and enabled features'
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(Grid.Root, {
+                gap: 5,
+                children: [
+                    transport && (transport.host || transport.port) && /*#__PURE__*/ jsx(Grid.Item, {
+                        col: 6,
+                        xs: 12,
+                        direction: "column",
+                        alignItems: "stretch",
+                        children: /*#__PURE__*/ jsxs(Field.Root, {
+                            name: "smtp-server",
+                            children: [
+                                /*#__PURE__*/ jsx(Field.Label, {
+                                    children: formatMessage({
+                                        id: 'email.Settings.capabilities.label.smtpServer',
+                                        defaultMessage: 'SMTP server'
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(TextInput, {
+                                    disabled: true,
+                                    readOnly: true,
+                                    value: transport.host && transport.port ? `${transport.host}:${transport.port}` : transport.host || String(transport.port)
+                                })
+                            ]
+                        })
+                    }),
+                    transport && /*#__PURE__*/ jsx(Grid.Item, {
+                        col: 6,
+                        xs: 12,
+                        direction: "column",
+                        alignItems: "stretch",
+                        children: /*#__PURE__*/ jsxs(Field.Root, {
+                            name: "encryption",
+                            children: [
+                                /*#__PURE__*/ jsx(Field.Label, {
+                                    children: formatMessage({
+                                        id: 'email.Settings.capabilities.label.encryption',
+                                        defaultMessage: 'Encryption'
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(TextInput, {
+                                    disabled: true,
+                                    readOnly: true,
+                                    value: encryptionLabel
+                                })
+                            ]
+                        })
+                    }),
+                    auth && (auth.type || auth.user) && /*#__PURE__*/ jsx(Grid.Item, {
+                        col: 6,
+                        xs: 12,
+                        direction: "column",
+                        alignItems: "stretch",
+                        children: /*#__PURE__*/ jsxs(Field.Root, {
+                            name: "auth-type",
+                            children: [
+                                /*#__PURE__*/ jsx(Field.Label, {
+                                    children: formatMessage({
+                                        id: 'email.Settings.capabilities.label.authType',
+                                        defaultMessage: 'Authentication'
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(TextInput, {
+                                    disabled: true,
+                                    readOnly: true,
+                                    value: auth.type ? auth.user ? `${auth.type} (${auth.user})` : auth.type : auth.user || 'None'
+                                })
+                            ]
+                        })
+                    }),
+                    transport?.pool && isIdle !== undefined && /*#__PURE__*/ jsx(Grid.Item, {
+                        col: 6,
+                        xs: 12,
+                        direction: "column",
+                        alignItems: "stretch",
+                        children: /*#__PURE__*/ jsxs(Field.Root, {
+                            name: "pool-status",
+                            children: [
+                                /*#__PURE__*/ jsx(Field.Label, {
+                                    children: formatMessage({
+                                        id: 'email.Settings.capabilities.label.poolStatus',
+                                        defaultMessage: 'Pool status'
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(Badge, {
+                                    backgroundColor: isIdle ? 'success100' : 'primary100',
+                                    textColor: isIdle ? 'success700' : 'primary700',
+                                    children: isIdle ? formatMessage({
+                                        id: 'email.Settings.capabilities.poolStatus.idle',
+                                        defaultMessage: 'Idle'
+                                    }) : formatMessage({
+                                        id: 'email.Settings.capabilities.poolStatus.active',
+                                        defaultMessage: 'Active'
+                                    })
+                                })
+                            ]
+                        })
+                    }),
+                    features.length > 0 && /*#__PURE__*/ jsx(Grid.Item, {
+                        col: 12,
+                        xs: 12,
+                        direction: "column",
+                        alignItems: "stretch",
+                        children: /*#__PURE__*/ jsxs(Field.Root, {
+                            name: "features",
+                            children: [
+                                /*#__PURE__*/ jsx(Field.Label, {
+                                    children: formatMessage({
+                                        id: 'email.Settings.capabilities.label.features',
+                                        defaultMessage: 'Enabled features'
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(Flex, {
+                                    gap: 2,
+                                    wrap: "wrap",
+                                    children: features.map((f)=>/*#__PURE__*/ jsx(Badge, {
+                                            backgroundColor: "neutral100",
+                                            textColor: "neutral700",
+                                            children: formatMessage(FEATURE_LABELS[f] ?? {
+                                                id: `email.Settings.capabilities.feature.${f}`,
+                                                defaultMessage: f
+                                            })
+                                        }, f))
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
 const ProtectedSettingsPage = ()=>/*#__PURE__*/ jsx(Page.Protect, {
         permissions: PERMISSIONS.settings,
         children: /*#__PURE__*/ jsx(SettingsPage, {})
@@ -32,8 +217,13 @@ const SettingsPage = ()=>{
         'settings'
     ], async ()=>{
         const res = await get('/email/settings');
-        const { data: { config } } = res;
-        return config;
+        const { data: { config, supportsVerify, capabilities, isIdle } } = res;
+        return {
+            ...config,
+            supportsVerify,
+            capabilities,
+            isIdle
+        };
     });
     const mutation = useMutation(async (body)=>{
         await post('/email/test', body);
@@ -62,6 +252,35 @@ const SettingsPage = ()=>{
         },
         retry: false
     });
+    const [connectionStatus, setConnectionStatus] = React.useState('idle');
+    const verifyMutation = useMutation(async ()=>{
+        await post('/email/verify', {});
+    }, {
+        onMutate () {
+            setConnectionStatus('loading');
+        },
+        onError () {
+            setConnectionStatus('error');
+            toggleNotification({
+                type: 'danger',
+                message: formatMessage({
+                    id: 'email.Settings.email.plugin.notification.verify.error',
+                    defaultMessage: 'Connection verification failed'
+                })
+            });
+        },
+        onSuccess () {
+            setConnectionStatus('success');
+            toggleNotification({
+                type: 'success',
+                message: formatMessage({
+                    id: 'email.Settings.email.plugin.notification.verify.success',
+                    defaultMessage: 'Connection verified successfully'
+                })
+            });
+        },
+        retry: false
+    });
     React.useEffect(()=>{
         schema.validate({
             email: testAddress
@@ -176,81 +395,200 @@ const SettingsPage = ()=>{
                                         /*#__PURE__*/ jsxs(Grid.Root, {
                                             gap: 5,
                                             children: [
-                                                /*#__PURE__*/ jsx(Grid.Item, {
-                                                    col: 6,
-                                                    xs: 12,
-                                                    direction: "column",
-                                                    alignItems: "stretch",
-                                                    children: /*#__PURE__*/ jsxs(Field.Root, {
-                                                        name: "shipper-email",
+                                                (()=>{
+                                                    const parsedFrom = parseEmailAddress(data.settings.defaultFrom);
+                                                    const parsedReplyTo = parseEmailAddress(data.settings.defaultReplyTo);
+                                                    return /*#__PURE__*/ jsxs(Fragment, {
                                                         children: [
-                                                            /*#__PURE__*/ jsx(Field.Label, {
-                                                                children: formatMessage({
-                                                                    id: 'email.Settings.email.plugin.label.defaultFrom',
-                                                                    defaultMessage: 'Default sender email'
+                                                            parsedFrom.name && /*#__PURE__*/ jsx(Grid.Item, {
+                                                                col: 6,
+                                                                xs: 12,
+                                                                direction: "column",
+                                                                alignItems: "stretch",
+                                                                children: /*#__PURE__*/ jsxs(Field.Root, {
+                                                                    name: "sender-name",
+                                                                    children: [
+                                                                        /*#__PURE__*/ jsx(Field.Label, {
+                                                                            children: formatMessage({
+                                                                                id: 'email.Settings.email.plugin.label.senderName',
+                                                                                defaultMessage: 'Default sender name'
+                                                                            })
+                                                                        }),
+                                                                        /*#__PURE__*/ jsx(TextInput, {
+                                                                            disabled: true,
+                                                                            readOnly: true,
+                                                                            value: parsedFrom.name
+                                                                        })
+                                                                    ]
                                                                 })
                                                             }),
-                                                            /*#__PURE__*/ jsx(TextInput, {
-                                                                placeholder: formatMessage({
-                                                                    id: 'email.Settings.email.plugin.placeholder.defaultFrom',
-                                                                    defaultMessage: "ex: Strapi No-Reply '<'no-reply@strapi.io'>'"
-                                                                }),
-                                                                disabled: true,
-                                                                readOnly: true,
-                                                                value: data.settings.defaultFrom,
-                                                                type: "email"
+                                                            /*#__PURE__*/ jsx(Grid.Item, {
+                                                                col: 6,
+                                                                xs: 12,
+                                                                direction: "column",
+                                                                alignItems: "stretch",
+                                                                children: /*#__PURE__*/ jsxs(Field.Root, {
+                                                                    name: "sender-email",
+                                                                    children: [
+                                                                        /*#__PURE__*/ jsx(Field.Label, {
+                                                                            children: formatMessage({
+                                                                                id: 'email.Settings.email.plugin.label.defaultFrom',
+                                                                                defaultMessage: 'Default sender email'
+                                                                            })
+                                                                        }),
+                                                                        /*#__PURE__*/ jsx(TextInput, {
+                                                                            placeholder: formatMessage({
+                                                                                id: 'email.Settings.email.plugin.placeholder.defaultFrom',
+                                                                                defaultMessage: 'ex: no-reply@strapi.io'
+                                                                            }),
+                                                                            disabled: true,
+                                                                            readOnly: true,
+                                                                            value: parsedFrom.email,
+                                                                            type: "email"
+                                                                        })
+                                                                    ]
+                                                                })
+                                                            }),
+                                                            parsedReplyTo.name && /*#__PURE__*/ jsx(Grid.Item, {
+                                                                col: 6,
+                                                                xs: 12,
+                                                                direction: "column",
+                                                                alignItems: "stretch",
+                                                                children: /*#__PURE__*/ jsxs(Field.Root, {
+                                                                    name: "reply-to-name",
+                                                                    children: [
+                                                                        /*#__PURE__*/ jsx(Field.Label, {
+                                                                            children: formatMessage({
+                                                                                id: 'email.Settings.email.plugin.label.replyToName',
+                                                                                defaultMessage: 'Default reply-to name'
+                                                                            })
+                                                                        }),
+                                                                        /*#__PURE__*/ jsx(TextInput, {
+                                                                            disabled: true,
+                                                                            readOnly: true,
+                                                                            value: parsedReplyTo.name
+                                                                        })
+                                                                    ]
+                                                                })
+                                                            }),
+                                                            /*#__PURE__*/ jsx(Grid.Item, {
+                                                                col: 6,
+                                                                xs: 12,
+                                                                direction: "column",
+                                                                alignItems: "stretch",
+                                                                children: /*#__PURE__*/ jsxs(Field.Root, {
+                                                                    name: "reply-to-email",
+                                                                    children: [
+                                                                        /*#__PURE__*/ jsx(Field.Label, {
+                                                                            children: formatMessage({
+                                                                                id: 'email.Settings.email.plugin.label.defaultReplyTo',
+                                                                                defaultMessage: 'Default response email'
+                                                                            })
+                                                                        }),
+                                                                        /*#__PURE__*/ jsx(TextInput, {
+                                                                            placeholder: formatMessage({
+                                                                                id: 'email.Settings.email.plugin.placeholder.defaultReplyTo',
+                                                                                defaultMessage: 'ex: support@strapi.io'
+                                                                            }),
+                                                                            disabled: true,
+                                                                            readOnly: true,
+                                                                            value: parsedReplyTo.email,
+                                                                            type: "email"
+                                                                        })
+                                                                    ]
+                                                                })
                                                             })
                                                         ]
-                                                    })
-                                                }),
+                                                    });
+                                                })(),
                                                 /*#__PURE__*/ jsx(Grid.Item, {
                                                     col: 6,
                                                     xs: 12,
                                                     direction: "column",
                                                     alignItems: "stretch",
                                                     children: /*#__PURE__*/ jsxs(Field.Root, {
-                                                        name: "response-email",
+                                                        name: "email-provider",
                                                         children: [
                                                             /*#__PURE__*/ jsx(Field.Label, {
                                                                 children: formatMessage({
-                                                                    id: 'email.Settings.email.plugin.label.defaultReplyTo',
-                                                                    defaultMessage: 'Default response email'
+                                                                    id: 'email.Settings.email.plugin.label.provider',
+                                                                    defaultMessage: 'Email provider'
                                                                 })
                                                             }),
-                                                            /*#__PURE__*/ jsx(TextInput, {
-                                                                placeholder: formatMessage({
-                                                                    id: 'email.Settings.email.plugin.placeholder.defaultReplyTo',
-                                                                    defaultMessage: `ex: Strapi '<'example@strapi.io'>'`
-                                                                }),
+                                                            /*#__PURE__*/ jsx(SingleSelect, {
                                                                 disabled: true,
-                                                                readOnly: true,
-                                                                value: data.settings.defaultReplyTo,
-                                                                type: "email"
+                                                                value: data.provider,
+                                                                children: /*#__PURE__*/ jsx(SingleSelectOption, {
+                                                                    value: data.provider,
+                                                                    children: data.provider
+                                                                })
                                                             })
                                                         ]
                                                     })
                                                 }),
-                                                /*#__PURE__*/ jsx(Grid.Item, {
+                                                data.supportsVerify && /*#__PURE__*/ jsx(Grid.Item, {
                                                     col: 6,
                                                     xs: 12,
                                                     direction: "column",
-                                                    alignItems: "stretch",
+                                                    alignItems: "start",
                                                     children: /*#__PURE__*/ jsxs(Field.Root, {
-                                                        name: "email-provider",
+                                                        name: "verify-connection",
                                                         children: [
                                                             /*#__PURE__*/ jsx(Field.Label, {
                                                                 children: formatMessage({
-                                                                    id: 'email.Settings.email.plugin.label.provider',
-                                                                    defaultMessage: 'Email provider'
+                                                                    id: 'email.Settings.email.plugin.label.verifyConnection',
+                                                                    defaultMessage: 'Connection status'
                                                                 })
                                                             }),
-                                                            /*#__PURE__*/ jsx(SingleSelect, {
-                                                                disabled: true,
-                                                                value: data.provider,
-                                                                children: /*#__PURE__*/ jsx(SingleSelectOption, {
-                                                                    value: data.provider,
-                                                                    children: data.provider
-                                                                })
+                                                            /*#__PURE__*/ jsxs(Flex, {
+                                                                gap: 2,
+                                                                alignItems: "center",
+                                                                children: [
+                                                                    /*#__PURE__*/ jsx(Button, {
+                                                                        variant: "secondary",
+                                                                        loading: verifyMutation.isLoading,
+                                                                        onClick: ()=>verifyMutation.mutate(),
+                                                                        type: "button",
+                                                                        children: formatMessage({
+                                                                            id: 'email.Settings.email.plugin.button.verify',
+                                                                            defaultMessage: 'Test connection'
+                                                                        })
+                                                                    }),
+                                                                    connectionStatus === 'success' && /*#__PURE__*/ jsx(Badge, {
+                                                                        backgroundColor: "success100",
+                                                                        textColor: "success700",
+                                                                        children: /*#__PURE__*/ jsxs(Flex, {
+                                                                            gap: 1,
+                                                                            children: [
+                                                                                /*#__PURE__*/ jsx(Check, {
+                                                                                    width: "1.2rem",
+                                                                                    height: "1.2rem"
+                                                                                }),
+                                                                                formatMessage({
+                                                                                    id: 'email.Settings.email.plugin.status.connected',
+                                                                                    defaultMessage: 'Connected'
+                                                                                })
+                                                                            ]
+                                                                        })
+                                                                    }),
+                                                                    connectionStatus === 'error' && /*#__PURE__*/ jsx(Badge, {
+                                                                        backgroundColor: "danger100",
+                                                                        textColor: "danger700",
+                                                                        children: /*#__PURE__*/ jsxs(Flex, {
+                                                                            gap: 1,
+                                                                            children: [
+                                                                                /*#__PURE__*/ jsx(Cross, {
+                                                                                    width: "1.2rem",
+                                                                                    height: "1.2rem"
+                                                                                }),
+                                                                                formatMessage({
+                                                                                    id: 'email.Settings.email.plugin.status.error',
+                                                                                    defaultMessage: 'Error'
+                                                                                })
+                                                                            ]
+                                                                        })
+                                                                    })
+                                                                ]
                                                             })
                                                         ]
                                                     })
@@ -260,6 +598,20 @@ const SettingsPage = ()=>{
                                     ]
                                 })
                             }),
+                            data.capabilities && (data.capabilities.transport || data.capabilities.auth || data.capabilities.features && data.capabilities.features.length > 0) && /*#__PURE__*/ jsx(Box, {
+                                background: "neutral0",
+                                hasRadius: true,
+                                shadow: "filterShadow",
+                                paddingTop: 6,
+                                paddingBottom: 6,
+                                paddingLeft: 7,
+                                paddingRight: 7,
+                                children: /*#__PURE__*/ jsx(CapabilitiesSection, {
+                                    capabilities: data.capabilities,
+                                    isIdle: data.isIdle,
+                                    formatMessage: formatMessage
+                                })
+                            }),
                             /*#__PURE__*/ jsxs(Flex, {
                                 alignItems: "stretch",
                                 background: "neutral0",