mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-24 13:54:57 +00:00
johndoe6345789
6992c3a650
- Created package.json for ui_pages with dependencies and exports. - Added roles.json for access permissions related to UI pages. - Implemented functions.json for managing UI pages and routing. - Developed stories.json for Storybook showcasing UI pages components. - Defined styles tokens for UI pages including colors, spacing, and typography. feat(ui_permissions): Introduce UI Permissions package for access control - Created package.json for ui_permissions with permission utilities. - Added roles.json defining permissions for a 6-level access control system. - Implemented functions.json for permission checking and level management. - Developed stories.json for Storybook showcasing permission-related components. - Defined styles tokens for UI permissions including colors and spacing.
551 lines
21 KiB
JSON
551 lines
21 KiB
JSON
{
|
|
"$schema": "https://metabuilder.dev/schemas/json-script-components.schema.json",
|
|
"schemaVersion": "2.0.0",
|
|
"package": "smtp_config",
|
|
"description": "SMTP configuration components including config editor and test panel",
|
|
"components": [
|
|
{
|
|
"id": "smtp_config_editor",
|
|
"name": "SMTPConfigEditor",
|
|
"description": "Form for SMTP server configuration with host, port, authentication, and encryption settings",
|
|
"props": [
|
|
{
|
|
"name": "config",
|
|
"type": "object",
|
|
"required": false,
|
|
"description": "Current SMTP configuration object"
|
|
},
|
|
{
|
|
"name": "readonly",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": false,
|
|
"description": "Whether the form is read-only"
|
|
},
|
|
{
|
|
"name": "onSave",
|
|
"type": "function",
|
|
"required": false,
|
|
"description": "Callback when configuration is saved"
|
|
},
|
|
{
|
|
"name": "onCancel",
|
|
"type": "function",
|
|
"required": false,
|
|
"description": "Callback when cancel is clicked"
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Card",
|
|
"variant": "outlined",
|
|
"className": "smtp-config-editor",
|
|
"children": [
|
|
{
|
|
"type": "Box",
|
|
"sx": { "p": 3, "borderBottom": 1, "borderColor": "divider" },
|
|
"children": [
|
|
{
|
|
"type": "Text",
|
|
"variant": "h5",
|
|
"fontWeight": "bold",
|
|
"children": "SMTP Configuration"
|
|
},
|
|
{
|
|
"type": "Text",
|
|
"variant": "body2",
|
|
"color": "text.secondary",
|
|
"children": "Configure your outgoing email server settings"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Box",
|
|
"sx": { "p": 3 },
|
|
"children": [
|
|
{
|
|
"type": "Stack",
|
|
"spacing": 3,
|
|
"children": [
|
|
{
|
|
"type": "Text",
|
|
"variant": "subtitle1",
|
|
"fontWeight": "bold",
|
|
"children": "Server Settings"
|
|
},
|
|
{
|
|
"type": "Stack",
|
|
"direction": "row",
|
|
"spacing": 2,
|
|
"children": [
|
|
{
|
|
"type": "TextField",
|
|
"label": "SMTP Host",
|
|
"value": "{{state.config.host}}",
|
|
"onChange": "updateHost",
|
|
"placeholder": "smtp.example.com",
|
|
"required": true,
|
|
"fullWidth": true,
|
|
"disabled": "{{props.readonly}}",
|
|
"helperText": "SMTP server hostname or IP address"
|
|
},
|
|
{
|
|
"type": "TextField",
|
|
"label": "Port",
|
|
"inputType": "number",
|
|
"value": "{{state.config.port}}",
|
|
"onChange": "updatePort",
|
|
"placeholder": "587",
|
|
"required": true,
|
|
"disabled": "{{props.readonly}}",
|
|
"helperText": "Common ports: 25, 465, 587",
|
|
"sx": { "minWidth": 120, "maxWidth": 150 }
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Select",
|
|
"label": "Encryption",
|
|
"value": "{{state.config.encryption}}",
|
|
"onChange": "updateEncryption",
|
|
"disabled": "{{props.readonly}}",
|
|
"fullWidth": true,
|
|
"options": [
|
|
{ "value": "none", "label": "None" },
|
|
{ "value": "tls", "label": "TLS" },
|
|
{ "value": "ssl", "label": "SSL" },
|
|
{ "value": "starttls", "label": "STARTTLS" }
|
|
],
|
|
"helperText": "Select the encryption method for secure connection"
|
|
},
|
|
{
|
|
"type": "TextField",
|
|
"label": "Timeout (seconds)",
|
|
"inputType": "number",
|
|
"value": "{{state.config.timeout}}",
|
|
"onChange": "updateTimeout",
|
|
"placeholder": "30",
|
|
"disabled": "{{props.readonly}}",
|
|
"helperText": "Connection timeout in seconds",
|
|
"sx": { "maxWidth": 200 }
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Divider",
|
|
"sx": { "my": 3 }
|
|
},
|
|
{
|
|
"type": "Stack",
|
|
"spacing": 3,
|
|
"children": [
|
|
{
|
|
"type": "Text",
|
|
"variant": "subtitle1",
|
|
"fontWeight": "bold",
|
|
"children": "Authentication"
|
|
},
|
|
{
|
|
"type": "Select",
|
|
"label": "Authentication Method",
|
|
"value": "{{state.config.authMethod}}",
|
|
"onChange": "updateAuthMethod",
|
|
"disabled": "{{props.readonly}}",
|
|
"fullWidth": true,
|
|
"options": [
|
|
{ "value": "plain", "label": "Plain" },
|
|
{ "value": "login", "label": "Login" },
|
|
{ "value": "cram-md5", "label": "CRAM-MD5" },
|
|
{ "value": "oauth2", "label": "OAuth2" }
|
|
],
|
|
"helperText": "Select the authentication method supported by your server"
|
|
},
|
|
{
|
|
"type": "TextField",
|
|
"label": "Username",
|
|
"value": "{{state.config.username}}",
|
|
"onChange": "updateUsername",
|
|
"placeholder": "user@example.com",
|
|
"required": true,
|
|
"fullWidth": true,
|
|
"disabled": "{{props.readonly}}",
|
|
"helperText": "SMTP authentication username"
|
|
},
|
|
{
|
|
"type": "TextField",
|
|
"label": "Password",
|
|
"inputType": "password",
|
|
"value": "{{state.config.password}}",
|
|
"onChange": "updatePassword",
|
|
"placeholder": "••••••••",
|
|
"required": true,
|
|
"fullWidth": true,
|
|
"disabled": "{{props.readonly}}",
|
|
"helperText": "SMTP authentication password (stored encrypted)"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Divider",
|
|
"sx": { "my": 3 }
|
|
},
|
|
{
|
|
"type": "Stack",
|
|
"spacing": 3,
|
|
"children": [
|
|
{
|
|
"type": "Text",
|
|
"variant": "subtitle1",
|
|
"fontWeight": "bold",
|
|
"children": "Sender Information"
|
|
},
|
|
{
|
|
"type": "Stack",
|
|
"direction": "row",
|
|
"spacing": 2,
|
|
"children": [
|
|
{
|
|
"type": "TextField",
|
|
"label": "From Email",
|
|
"value": "{{state.config.fromEmail}}",
|
|
"onChange": "updateFromEmail",
|
|
"placeholder": "noreply@example.com",
|
|
"required": true,
|
|
"fullWidth": true,
|
|
"disabled": "{{props.readonly}}",
|
|
"helperText": "Default sender email address"
|
|
},
|
|
{
|
|
"type": "TextField",
|
|
"label": "From Name",
|
|
"value": "{{state.config.fromName}}",
|
|
"onChange": "updateFromName",
|
|
"placeholder": "My Application",
|
|
"required": true,
|
|
"fullWidth": true,
|
|
"disabled": "{{props.readonly}}",
|
|
"helperText": "Default sender display name"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "TextField",
|
|
"label": "Reply-To Email",
|
|
"value": "{{state.config.replyTo}}",
|
|
"onChange": "updateReplyTo",
|
|
"placeholder": "support@example.com",
|
|
"fullWidth": true,
|
|
"disabled": "{{props.readonly}}",
|
|
"helperText": "Optional reply-to address (defaults to From Email if empty)"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Divider",
|
|
"sx": { "my": 3 }
|
|
},
|
|
{
|
|
"type": "Stack",
|
|
"spacing": 2,
|
|
"children": [
|
|
{
|
|
"type": "Text",
|
|
"variant": "subtitle1",
|
|
"fontWeight": "bold",
|
|
"children": "Advanced Settings"
|
|
},
|
|
{
|
|
"type": "TextField",
|
|
"label": "Max Retries",
|
|
"inputType": "number",
|
|
"value": "{{state.config.maxRetries}}",
|
|
"onChange": "updateMaxRetries",
|
|
"placeholder": "3",
|
|
"disabled": "{{props.readonly}}",
|
|
"helperText": "Maximum number of retry attempts on failure",
|
|
"sx": { "maxWidth": 200 }
|
|
},
|
|
{
|
|
"type": "Box",
|
|
"sx": { "display": "flex", "alignItems": "center", "gap": 2 },
|
|
"children": [
|
|
{
|
|
"type": "Switch",
|
|
"checked": "{{state.config.verifyTls}}",
|
|
"onChange": "toggleVerifyTls",
|
|
"disabled": "{{props.readonly}}"
|
|
},
|
|
{
|
|
"type": "Text",
|
|
"variant": "body2",
|
|
"children": "Verify TLS Certificate"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Box",
|
|
"sx": { "p": 3, "borderTop": 1, "borderColor": "divider", "display": "flex", "justifyContent": "flex-end", "gap": 2 },
|
|
"children": [
|
|
{
|
|
"type": "Button",
|
|
"variant": "outlined",
|
|
"onClick": "onCancel",
|
|
"disabled": "{{!props.onCancel}}",
|
|
"children": "Cancel"
|
|
},
|
|
{
|
|
"type": "Button",
|
|
"variant": "contained",
|
|
"color": "primary",
|
|
"onClick": "onSave",
|
|
"disabled": "{{props.readonly || !state.isValid}}",
|
|
"children": "Save Configuration"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "smtp_test_panel",
|
|
"name": "SMTPTestPanel",
|
|
"description": "Panel to test SMTP connection and send test emails",
|
|
"props": [
|
|
{
|
|
"name": "config",
|
|
"type": "object",
|
|
"required": true,
|
|
"description": "SMTP configuration to test"
|
|
},
|
|
{
|
|
"name": "onTestComplete",
|
|
"type": "function",
|
|
"required": false,
|
|
"description": "Callback when test completes"
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Card",
|
|
"variant": "outlined",
|
|
"className": "smtp-test-panel",
|
|
"children": [
|
|
{
|
|
"type": "Box",
|
|
"sx": { "p": 3, "borderBottom": 1, "borderColor": "divider" },
|
|
"children": [
|
|
{
|
|
"type": "Text",
|
|
"variant": "h6",
|
|
"fontWeight": "bold",
|
|
"children": "Test SMTP Connection"
|
|
},
|
|
{
|
|
"type": "Text",
|
|
"variant": "body2",
|
|
"color": "text.secondary",
|
|
"children": "Verify your SMTP configuration by testing the connection and sending a test email"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Box",
|
|
"sx": { "p": 3 },
|
|
"children": [
|
|
{
|
|
"type": "conditional",
|
|
"condition": "{{state.testResult !== null}}",
|
|
"then": {
|
|
"type": "Alert",
|
|
"severity": "{{state.testResult.success ? 'success' : 'error'}}",
|
|
"sx": { "mb": 3 },
|
|
"children": "{{state.testResult.message}}"
|
|
}
|
|
},
|
|
{
|
|
"type": "Stack",
|
|
"spacing": 3,
|
|
"children": [
|
|
{
|
|
"type": "Box",
|
|
"children": [
|
|
{
|
|
"type": "Text",
|
|
"variant": "subtitle2",
|
|
"fontWeight": "bold",
|
|
"sx": { "mb": 2 },
|
|
"children": "Connection Test"
|
|
},
|
|
{
|
|
"type": "Button",
|
|
"variant": "outlined",
|
|
"color": "primary",
|
|
"onClick": "testConnection",
|
|
"disabled": "{{state.isTesting}}",
|
|
"startIcon": "NetworkCheck",
|
|
"children": "{{state.isTesting ? 'Testing...' : 'Test Connection'}}"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Divider"
|
|
},
|
|
{
|
|
"type": "Stack",
|
|
"spacing": 2,
|
|
"children": [
|
|
{
|
|
"type": "Text",
|
|
"variant": "subtitle2",
|
|
"fontWeight": "bold",
|
|
"children": "Send Test Email"
|
|
},
|
|
{
|
|
"type": "TextField",
|
|
"label": "Recipient Email",
|
|
"value": "{{state.testEmail}}",
|
|
"onChange": "updateTestEmail",
|
|
"placeholder": "test@example.com",
|
|
"required": true,
|
|
"fullWidth": true,
|
|
"helperText": "Email address to send the test message to"
|
|
},
|
|
{
|
|
"type": "TextField",
|
|
"label": "Subject",
|
|
"value": "{{state.testSubject}}",
|
|
"onChange": "updateTestSubject",
|
|
"placeholder": "SMTP Test Email",
|
|
"fullWidth": true,
|
|
"helperText": "Subject line for the test email"
|
|
},
|
|
{
|
|
"type": "TextField",
|
|
"label": "Message Body",
|
|
"value": "{{state.testBody}}",
|
|
"onChange": "updateTestBody",
|
|
"placeholder": "This is a test email from MetaBuilder.",
|
|
"multiline": true,
|
|
"rows": 4,
|
|
"fullWidth": true,
|
|
"helperText": "Content of the test email"
|
|
},
|
|
{
|
|
"type": "Button",
|
|
"variant": "contained",
|
|
"color": "primary",
|
|
"onClick": "sendTestEmail",
|
|
"disabled": "{{state.isSending || !state.testEmail}}",
|
|
"startIcon": "Send",
|
|
"children": "{{state.isSending ? 'Sending...' : 'Send Test Email'}}"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "conditional",
|
|
"condition": "{{state.testResult && state.testResult.details}}",
|
|
"then": {
|
|
"type": "Box",
|
|
"sx": { "p": 3, "borderTop": 1, "borderColor": "divider", "backgroundColor": "action.hover" },
|
|
"children": [
|
|
{
|
|
"type": "Text",
|
|
"variant": "subtitle2",
|
|
"fontWeight": "bold",
|
|
"sx": { "mb": 2 },
|
|
"children": "Connection Details"
|
|
},
|
|
{
|
|
"type": "Stack",
|
|
"spacing": 1,
|
|
"children": [
|
|
{
|
|
"type": "Box",
|
|
"sx": { "display": "flex", "alignItems": "center", "gap": 1 },
|
|
"children": [
|
|
{
|
|
"type": "Icon",
|
|
"name": "{{state.testResult.details.connected ? 'CheckCircle' : 'Cancel'}}",
|
|
"color": "{{state.testResult.details.connected ? 'success' : 'error'}}",
|
|
"size": "small"
|
|
},
|
|
{
|
|
"type": "Text",
|
|
"variant": "body2",
|
|
"children": "Connection: {{state.testResult.details.connected ? 'Established' : 'Failed'}}"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Box",
|
|
"sx": { "display": "flex", "alignItems": "center", "gap": 1 },
|
|
"children": [
|
|
{
|
|
"type": "Icon",
|
|
"name": "{{state.testResult.details.authenticated ? 'CheckCircle' : 'Cancel'}}",
|
|
"color": "{{state.testResult.details.authenticated ? 'success' : 'error'}}",
|
|
"size": "small"
|
|
},
|
|
{
|
|
"type": "Text",
|
|
"variant": "body2",
|
|
"children": "Authentication: {{state.testResult.details.authenticated ? 'Success' : 'Failed'}}"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Box",
|
|
"sx": { "display": "flex", "alignItems": "center", "gap": 1 },
|
|
"children": [
|
|
{
|
|
"type": "Icon",
|
|
"name": "{{state.testResult.details.tlsEnabled ? 'Lock' : 'LockOpen'}}",
|
|
"color": "{{state.testResult.details.tlsEnabled ? 'success' : 'warning'}}",
|
|
"size": "small"
|
|
},
|
|
{
|
|
"type": "Text",
|
|
"variant": "body2",
|
|
"children": "TLS: {{state.testResult.details.tlsEnabled ? 'Enabled' : 'Disabled'}}"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Text",
|
|
"variant": "body2",
|
|
"color": "text.secondary",
|
|
"children": "Response time: {{state.testResult.duration}}ms"
|
|
},
|
|
{
|
|
"type": "Text",
|
|
"variant": "caption",
|
|
"color": "text.secondary",
|
|
"sx": { "fontFamily": "monospace" },
|
|
"children": "Server: {{state.testResult.details.serverResponse}}"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
],
|
|
"exports": {
|
|
"components": ["SMTPConfigEditor", "SMTPTestPanel"]
|
|
}
|
|
}
|