@flusys/ng-email 1.1.0-beta
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +660 -0
- package/fesm2022/flusys-ng-email-email-config-form.component-8dOBD-Q-.mjs +651 -0
- package/fesm2022/flusys-ng-email-email-config-form.component-8dOBD-Q-.mjs.map +1 -0
- package/fesm2022/flusys-ng-email-email-config-list.component-CJhSPkCZ.mjs +508 -0
- package/fesm2022/flusys-ng-email-email-config-list.component-CJhSPkCZ.mjs.map +1 -0
- package/fesm2022/flusys-ng-email-template-form.component-DjzG_lG1.mjs +529 -0
- package/fesm2022/flusys-ng-email-template-form.component-DjzG_lG1.mjs.map +1 -0
- package/fesm2022/flusys-ng-email-template-list.component-CGJxfZMT.mjs +595 -0
- package/fesm2022/flusys-ng-email-template-list.component-CGJxfZMT.mjs.map +1 -0
- package/fesm2022/flusys-ng-email.mjs +571 -0
- package/fesm2022/flusys-ng-email.mjs.map +1 -0
- package/package.json +32 -0
- package/types/flusys-ng-email.d.ts +456 -0
|
@@ -0,0 +1,651 @@
|
|
|
1
|
+
import { CommonModule } from '@angular/common';
|
|
2
|
+
import * as i0 from '@angular/core';
|
|
3
|
+
import { inject, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
4
|
+
import * as i1 from '@angular/forms';
|
|
5
|
+
import { FormsModule } from '@angular/forms';
|
|
6
|
+
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
|
|
7
|
+
import { PrimeModule } from '@flusys/ng-shared';
|
|
8
|
+
import { MessageService } from 'primeng/api';
|
|
9
|
+
import { EmailConfigApiService, EmailProviderEnum } from './flusys-ng-email.mjs';
|
|
10
|
+
import * as i2 from 'primeng/button';
|
|
11
|
+
import * as i3 from 'primeng/inputnumber';
|
|
12
|
+
import * as i5 from 'primeng/inputtext';
|
|
13
|
+
import * as i5$1 from 'primeng/password';
|
|
14
|
+
import * as i6 from 'primeng/select';
|
|
15
|
+
import * as i9 from 'primeng/toast';
|
|
16
|
+
import * as i7 from 'primeng/toggleswitch';
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* Email configuration form component (create/edit)
|
|
20
|
+
*/
|
|
21
|
+
class EmailConfigFormComponent {
|
|
22
|
+
route = inject(ActivatedRoute);
|
|
23
|
+
router = inject(Router);
|
|
24
|
+
configService = inject(EmailConfigApiService);
|
|
25
|
+
messageService = inject(MessageService);
|
|
26
|
+
providerEnum = EmailProviderEnum;
|
|
27
|
+
isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
|
|
28
|
+
existingConfig = signal(null, ...(ngDevMode ? [{ debugName: "existingConfig" }] : []));
|
|
29
|
+
isEditMode = computed(() => !!this.existingConfig(), ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
|
|
30
|
+
providerOptions = [
|
|
31
|
+
{ label: 'SMTP', value: EmailProviderEnum.SMTP },
|
|
32
|
+
{ label: 'SendGrid', value: EmailProviderEnum.SENDGRID },
|
|
33
|
+
{ label: 'Mailgun', value: EmailProviderEnum.MAILGUN },
|
|
34
|
+
];
|
|
35
|
+
regionOptions = [
|
|
36
|
+
{ label: 'US', value: 'us' },
|
|
37
|
+
{ label: 'EU', value: 'eu' },
|
|
38
|
+
];
|
|
39
|
+
formModel = {
|
|
40
|
+
id: '',
|
|
41
|
+
name: '',
|
|
42
|
+
provider: EmailProviderEnum.SMTP,
|
|
43
|
+
fromEmail: '',
|
|
44
|
+
fromName: '',
|
|
45
|
+
isActive: true,
|
|
46
|
+
isDefault: false,
|
|
47
|
+
// SMTP
|
|
48
|
+
smtpHost: '',
|
|
49
|
+
smtpPort: 587,
|
|
50
|
+
smtpUser: '',
|
|
51
|
+
smtpPass: '',
|
|
52
|
+
smtpSecure: false,
|
|
53
|
+
// SendGrid
|
|
54
|
+
sendgridApiKey: '',
|
|
55
|
+
// Mailgun
|
|
56
|
+
mailgunApiKey: '',
|
|
57
|
+
mailgunDomain: '',
|
|
58
|
+
mailgunRegion: 'us',
|
|
59
|
+
};
|
|
60
|
+
ngOnInit() {
|
|
61
|
+
const id = this.route.snapshot.paramMap.get('id');
|
|
62
|
+
if (id) {
|
|
63
|
+
this.loadConfig(id);
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
async loadConfig(id) {
|
|
67
|
+
this.isLoading.set(true);
|
|
68
|
+
try {
|
|
69
|
+
const response = await this.configService.findByIdAsync(id);
|
|
70
|
+
if (response.success && response.data) {
|
|
71
|
+
const config = response.data;
|
|
72
|
+
this.existingConfig.set(config);
|
|
73
|
+
this.formModel = {
|
|
74
|
+
id: config.id,
|
|
75
|
+
name: config.name,
|
|
76
|
+
provider: config.provider,
|
|
77
|
+
fromEmail: config.fromEmail || '',
|
|
78
|
+
fromName: config.fromName || '',
|
|
79
|
+
isActive: config.isActive,
|
|
80
|
+
isDefault: config.isDefault ?? false,
|
|
81
|
+
// SMTP
|
|
82
|
+
smtpHost: config.config?.['host'] || '',
|
|
83
|
+
smtpPort: config.config?.['port'] || 587,
|
|
84
|
+
smtpUser: config.config?.['auth']?.['user'] || '',
|
|
85
|
+
smtpPass: config.config?.['auth']?.['pass'] || '',
|
|
86
|
+
smtpSecure: config.config?.['secure'] || false,
|
|
87
|
+
// SendGrid
|
|
88
|
+
sendgridApiKey: config.config?.['apiKey'] || '',
|
|
89
|
+
// Mailgun
|
|
90
|
+
mailgunApiKey: config.config?.['apiKey'] || '',
|
|
91
|
+
mailgunDomain: config.config?.['domain'] || '',
|
|
92
|
+
mailgunRegion: config.config?.['region'] || 'us',
|
|
93
|
+
};
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
finally {
|
|
97
|
+
this.isLoading.set(false);
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
async onSave() {
|
|
101
|
+
if (!this.formModel.name || !this.formModel.provider) {
|
|
102
|
+
this.messageService.add({
|
|
103
|
+
severity: 'warn',
|
|
104
|
+
summary: 'Validation',
|
|
105
|
+
detail: 'Please fill in all required fields.',
|
|
106
|
+
});
|
|
107
|
+
return;
|
|
108
|
+
}
|
|
109
|
+
// Build provider-specific config
|
|
110
|
+
let config = {};
|
|
111
|
+
switch (this.formModel.provider) {
|
|
112
|
+
case EmailProviderEnum.SMTP:
|
|
113
|
+
config = {
|
|
114
|
+
host: this.formModel.smtpHost,
|
|
115
|
+
port: this.formModel.smtpPort,
|
|
116
|
+
secure: this.formModel.smtpSecure,
|
|
117
|
+
auth: {
|
|
118
|
+
user: this.formModel.smtpUser,
|
|
119
|
+
pass: this.formModel.smtpPass,
|
|
120
|
+
},
|
|
121
|
+
};
|
|
122
|
+
break;
|
|
123
|
+
case EmailProviderEnum.SENDGRID:
|
|
124
|
+
config = {
|
|
125
|
+
apiKey: this.formModel.sendgridApiKey,
|
|
126
|
+
};
|
|
127
|
+
break;
|
|
128
|
+
case EmailProviderEnum.MAILGUN:
|
|
129
|
+
config = {
|
|
130
|
+
apiKey: this.formModel.mailgunApiKey,
|
|
131
|
+
domain: this.formModel.mailgunDomain,
|
|
132
|
+
region: this.formModel.mailgunRegion,
|
|
133
|
+
};
|
|
134
|
+
break;
|
|
135
|
+
}
|
|
136
|
+
this.isLoading.set(true);
|
|
137
|
+
try {
|
|
138
|
+
if (this.isEditMode()) {
|
|
139
|
+
await this.configService.updateAsync({
|
|
140
|
+
id: this.formModel.id,
|
|
141
|
+
name: this.formModel.name,
|
|
142
|
+
provider: this.formModel.provider,
|
|
143
|
+
config,
|
|
144
|
+
fromEmail: this.formModel.fromEmail || undefined,
|
|
145
|
+
fromName: this.formModel.fromName || undefined,
|
|
146
|
+
isActive: this.formModel.isActive,
|
|
147
|
+
isDefault: this.formModel.isDefault,
|
|
148
|
+
});
|
|
149
|
+
}
|
|
150
|
+
else {
|
|
151
|
+
await this.configService.insertAsync({
|
|
152
|
+
name: this.formModel.name,
|
|
153
|
+
provider: this.formModel.provider,
|
|
154
|
+
config,
|
|
155
|
+
fromEmail: this.formModel.fromEmail || undefined,
|
|
156
|
+
fromName: this.formModel.fromName || undefined,
|
|
157
|
+
isActive: this.formModel.isActive,
|
|
158
|
+
isDefault: this.formModel.isDefault,
|
|
159
|
+
});
|
|
160
|
+
}
|
|
161
|
+
this.messageService.add({
|
|
162
|
+
severity: 'success',
|
|
163
|
+
summary: 'Success',
|
|
164
|
+
detail: `Configuration ${this.isEditMode() ? 'updated' : 'created'} successfully.`,
|
|
165
|
+
});
|
|
166
|
+
this.router.navigate(['../'], { relativeTo: this.route });
|
|
167
|
+
}
|
|
168
|
+
catch (error) {
|
|
169
|
+
this.messageService.add({
|
|
170
|
+
severity: 'error',
|
|
171
|
+
summary: 'Error',
|
|
172
|
+
detail: error?.message || 'Failed to save configuration.',
|
|
173
|
+
});
|
|
174
|
+
}
|
|
175
|
+
finally {
|
|
176
|
+
this.isLoading.set(false);
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: EmailConfigFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
180
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: EmailConfigFormComponent, isStandalone: true, selector: "lib-email-config-form", providers: [MessageService], ngImport: i0, template: `
|
|
181
|
+
<div class="config-form">
|
|
182
|
+
<!-- Header -->
|
|
183
|
+
<div class="flex justify-between items-center mb-4">
|
|
184
|
+
<div class="flex items-center gap-2">
|
|
185
|
+
<p-button icon="pi pi-arrow-left" [text]="true" routerLink="../" />
|
|
186
|
+
<h2 class="text-xl font-semibold">
|
|
187
|
+
{{ isEditMode() ? 'Edit Configuration' : 'New Configuration' }}
|
|
188
|
+
</h2>
|
|
189
|
+
</div>
|
|
190
|
+
<div class="flex gap-2">
|
|
191
|
+
<p-button label="Cancel" [text]="true" routerLink="../" />
|
|
192
|
+
<p-button
|
|
193
|
+
label="Save"
|
|
194
|
+
icon="pi pi-save"
|
|
195
|
+
[loading]="isLoading()"
|
|
196
|
+
(onClick)="onSave()"
|
|
197
|
+
/>
|
|
198
|
+
</div>
|
|
199
|
+
</div>
|
|
200
|
+
|
|
201
|
+
<!-- Form -->
|
|
202
|
+
<div class="card">
|
|
203
|
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
204
|
+
<!-- Common Fields -->
|
|
205
|
+
<div class="field">
|
|
206
|
+
<label for="name" class="block font-medium mb-2"
|
|
207
|
+
>Configuration Name *</label
|
|
208
|
+
>
|
|
209
|
+
<input
|
|
210
|
+
pInputText
|
|
211
|
+
id="name"
|
|
212
|
+
[(ngModel)]="formModel.name"
|
|
213
|
+
class="w-full"
|
|
214
|
+
placeholder="e.g., Production SMTP"
|
|
215
|
+
/>
|
|
216
|
+
</div>
|
|
217
|
+
|
|
218
|
+
<div class="field">
|
|
219
|
+
<label for="provider" class="block font-medium mb-2"
|
|
220
|
+
>Email Provider *</label
|
|
221
|
+
>
|
|
222
|
+
<p-select
|
|
223
|
+
id="provider"
|
|
224
|
+
[options]="providerOptions"
|
|
225
|
+
[(ngModel)]="formModel.provider"
|
|
226
|
+
optionLabel="label"
|
|
227
|
+
optionValue="value"
|
|
228
|
+
placeholder="Select provider"
|
|
229
|
+
class="w-full"
|
|
230
|
+
/>
|
|
231
|
+
</div>
|
|
232
|
+
|
|
233
|
+
<div class="field">
|
|
234
|
+
<label for="fromEmail" class="block font-medium mb-2"
|
|
235
|
+
>From Email</label
|
|
236
|
+
>
|
|
237
|
+
<input
|
|
238
|
+
pInputText
|
|
239
|
+
id="fromEmail"
|
|
240
|
+
[(ngModel)]="formModel.fromEmail"
|
|
241
|
+
class="w-full"
|
|
242
|
+
placeholder="noreply@example.com"
|
|
243
|
+
/>
|
|
244
|
+
</div>
|
|
245
|
+
|
|
246
|
+
<div class="field">
|
|
247
|
+
<label for="fromName" class="block font-medium mb-2"
|
|
248
|
+
>From Name</label
|
|
249
|
+
>
|
|
250
|
+
<input
|
|
251
|
+
pInputText
|
|
252
|
+
id="fromName"
|
|
253
|
+
[(ngModel)]="formModel.fromName"
|
|
254
|
+
class="w-full"
|
|
255
|
+
placeholder="FLUSYS"
|
|
256
|
+
/>
|
|
257
|
+
</div>
|
|
258
|
+
|
|
259
|
+
<div class="field flex items-center gap-2">
|
|
260
|
+
<p-toggleswitch [(ngModel)]="formModel.isActive" />
|
|
261
|
+
<label>Active</label>
|
|
262
|
+
</div>
|
|
263
|
+
|
|
264
|
+
<div class="field flex items-center gap-2">
|
|
265
|
+
<p-toggleswitch [(ngModel)]="formModel.isDefault" />
|
|
266
|
+
<label>Set as Default</label>
|
|
267
|
+
</div>
|
|
268
|
+
</div>
|
|
269
|
+
|
|
270
|
+
<!-- SMTP Fields -->
|
|
271
|
+
@if (formModel.provider === providerEnum.SMTP) {
|
|
272
|
+
<div class="border-t mt-4 pt-4">
|
|
273
|
+
<h3 class="font-semibold mb-4">SMTP Settings</h3>
|
|
274
|
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
275
|
+
<div class="field">
|
|
276
|
+
<label for="smtpHost" class="block font-medium mb-2"
|
|
277
|
+
>SMTP Host *</label
|
|
278
|
+
>
|
|
279
|
+
<input
|
|
280
|
+
pInputText
|
|
281
|
+
id="smtpHost"
|
|
282
|
+
[(ngModel)]="formModel.smtpHost"
|
|
283
|
+
class="w-full"
|
|
284
|
+
placeholder="smtp.gmail.com"
|
|
285
|
+
/>
|
|
286
|
+
</div>
|
|
287
|
+
<div class="field">
|
|
288
|
+
<label for="smtpPort" class="block font-medium mb-2"
|
|
289
|
+
>Port *</label
|
|
290
|
+
>
|
|
291
|
+
<p-inputNumber
|
|
292
|
+
id="smtpPort"
|
|
293
|
+
[(ngModel)]="formModel.smtpPort"
|
|
294
|
+
[useGrouping]="false"
|
|
295
|
+
class="w-full"
|
|
296
|
+
placeholder="587"
|
|
297
|
+
/>
|
|
298
|
+
</div>
|
|
299
|
+
<div class="field">
|
|
300
|
+
<label for="smtpUser" class="block font-medium mb-2"
|
|
301
|
+
>Username *</label
|
|
302
|
+
>
|
|
303
|
+
<input
|
|
304
|
+
pInputText
|
|
305
|
+
id="smtpUser"
|
|
306
|
+
[(ngModel)]="formModel.smtpUser"
|
|
307
|
+
class="w-full"
|
|
308
|
+
placeholder="user@gmail.com"
|
|
309
|
+
/>
|
|
310
|
+
</div>
|
|
311
|
+
<div class="field">
|
|
312
|
+
<label for="smtpPass" class="block font-medium mb-2"
|
|
313
|
+
>Password *</label
|
|
314
|
+
>
|
|
315
|
+
<p-password
|
|
316
|
+
id="smtpPass"
|
|
317
|
+
[(ngModel)]="formModel.smtpPass"
|
|
318
|
+
[feedback]="false"
|
|
319
|
+
[toggleMask]="true"
|
|
320
|
+
styleClass="w-full"
|
|
321
|
+
inputStyleClass="w-full"
|
|
322
|
+
placeholder="App password"
|
|
323
|
+
/>
|
|
324
|
+
</div>
|
|
325
|
+
<div class="field flex items-center gap-2">
|
|
326
|
+
<p-toggleswitch [(ngModel)]="formModel.smtpSecure" />
|
|
327
|
+
<label>Use SSL/TLS (Port 465)</label>
|
|
328
|
+
</div>
|
|
329
|
+
</div>
|
|
330
|
+
</div>
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
<!-- SendGrid Fields -->
|
|
334
|
+
@if (formModel.provider === providerEnum.SENDGRID) {
|
|
335
|
+
<div class="border-t mt-4 pt-4">
|
|
336
|
+
<h3 class="font-semibold mb-4">SendGrid Settings</h3>
|
|
337
|
+
<div class="grid grid-cols-1 gap-4">
|
|
338
|
+
<div class="field">
|
|
339
|
+
<label for="sendgridApiKey" class="block font-medium mb-2"
|
|
340
|
+
>API Key *</label
|
|
341
|
+
>
|
|
342
|
+
<p-password
|
|
343
|
+
id="sendgridApiKey"
|
|
344
|
+
[(ngModel)]="formModel.sendgridApiKey"
|
|
345
|
+
[feedback]="false"
|
|
346
|
+
[toggleMask]="true"
|
|
347
|
+
styleClass="w-full"
|
|
348
|
+
inputStyleClass="w-full"
|
|
349
|
+
placeholder="SG.xxxx..."
|
|
350
|
+
/>
|
|
351
|
+
</div>
|
|
352
|
+
</div>
|
|
353
|
+
</div>
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
<!-- Mailgun Fields -->
|
|
357
|
+
@if (formModel.provider === providerEnum.MAILGUN) {
|
|
358
|
+
<div class="border-t mt-4 pt-4">
|
|
359
|
+
<h3 class="font-semibold mb-4">Mailgun Settings</h3>
|
|
360
|
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
361
|
+
<div class="field">
|
|
362
|
+
<label for="mailgunApiKey" class="block font-medium mb-2"
|
|
363
|
+
>API Key *</label
|
|
364
|
+
>
|
|
365
|
+
<p-password
|
|
366
|
+
id="mailgunApiKey"
|
|
367
|
+
[(ngModel)]="formModel.mailgunApiKey"
|
|
368
|
+
[feedback]="false"
|
|
369
|
+
[toggleMask]="true"
|
|
370
|
+
styleClass="w-full"
|
|
371
|
+
inputStyleClass="w-full"
|
|
372
|
+
placeholder="key-xxxx..."
|
|
373
|
+
/>
|
|
374
|
+
</div>
|
|
375
|
+
<div class="field">
|
|
376
|
+
<label for="mailgunDomain" class="block font-medium mb-2"
|
|
377
|
+
>Domain *</label
|
|
378
|
+
>
|
|
379
|
+
<input
|
|
380
|
+
pInputText
|
|
381
|
+
id="mailgunDomain"
|
|
382
|
+
[(ngModel)]="formModel.mailgunDomain"
|
|
383
|
+
class="w-full"
|
|
384
|
+
placeholder="mg.example.com"
|
|
385
|
+
/>
|
|
386
|
+
</div>
|
|
387
|
+
<div class="field">
|
|
388
|
+
<label for="mailgunRegion" class="block font-medium mb-2"
|
|
389
|
+
>Region</label
|
|
390
|
+
>
|
|
391
|
+
<p-select
|
|
392
|
+
id="mailgunRegion"
|
|
393
|
+
[options]="regionOptions"
|
|
394
|
+
[(ngModel)]="formModel.mailgunRegion"
|
|
395
|
+
optionLabel="label"
|
|
396
|
+
optionValue="value"
|
|
397
|
+
placeholder="Select region"
|
|
398
|
+
class="w-full"
|
|
399
|
+
/>
|
|
400
|
+
</div>
|
|
401
|
+
</div>
|
|
402
|
+
</div>
|
|
403
|
+
}
|
|
404
|
+
</div>
|
|
405
|
+
</div>
|
|
406
|
+
|
|
407
|
+
<p-toast />
|
|
408
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i5$1.Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo", "motionOptions", "overlayOptions"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i9.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "motionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: i7.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
409
|
+
}
|
|
410
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: EmailConfigFormComponent, decorators: [{
|
|
411
|
+
type: Component,
|
|
412
|
+
args: [{
|
|
413
|
+
selector: 'lib-email-config-form',
|
|
414
|
+
standalone: true,
|
|
415
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
416
|
+
imports: [CommonModule, RouterLink, FormsModule, PrimeModule],
|
|
417
|
+
providers: [MessageService],
|
|
418
|
+
template: `
|
|
419
|
+
<div class="config-form">
|
|
420
|
+
<!-- Header -->
|
|
421
|
+
<div class="flex justify-between items-center mb-4">
|
|
422
|
+
<div class="flex items-center gap-2">
|
|
423
|
+
<p-button icon="pi pi-arrow-left" [text]="true" routerLink="../" />
|
|
424
|
+
<h2 class="text-xl font-semibold">
|
|
425
|
+
{{ isEditMode() ? 'Edit Configuration' : 'New Configuration' }}
|
|
426
|
+
</h2>
|
|
427
|
+
</div>
|
|
428
|
+
<div class="flex gap-2">
|
|
429
|
+
<p-button label="Cancel" [text]="true" routerLink="../" />
|
|
430
|
+
<p-button
|
|
431
|
+
label="Save"
|
|
432
|
+
icon="pi pi-save"
|
|
433
|
+
[loading]="isLoading()"
|
|
434
|
+
(onClick)="onSave()"
|
|
435
|
+
/>
|
|
436
|
+
</div>
|
|
437
|
+
</div>
|
|
438
|
+
|
|
439
|
+
<!-- Form -->
|
|
440
|
+
<div class="card">
|
|
441
|
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
442
|
+
<!-- Common Fields -->
|
|
443
|
+
<div class="field">
|
|
444
|
+
<label for="name" class="block font-medium mb-2"
|
|
445
|
+
>Configuration Name *</label
|
|
446
|
+
>
|
|
447
|
+
<input
|
|
448
|
+
pInputText
|
|
449
|
+
id="name"
|
|
450
|
+
[(ngModel)]="formModel.name"
|
|
451
|
+
class="w-full"
|
|
452
|
+
placeholder="e.g., Production SMTP"
|
|
453
|
+
/>
|
|
454
|
+
</div>
|
|
455
|
+
|
|
456
|
+
<div class="field">
|
|
457
|
+
<label for="provider" class="block font-medium mb-2"
|
|
458
|
+
>Email Provider *</label
|
|
459
|
+
>
|
|
460
|
+
<p-select
|
|
461
|
+
id="provider"
|
|
462
|
+
[options]="providerOptions"
|
|
463
|
+
[(ngModel)]="formModel.provider"
|
|
464
|
+
optionLabel="label"
|
|
465
|
+
optionValue="value"
|
|
466
|
+
placeholder="Select provider"
|
|
467
|
+
class="w-full"
|
|
468
|
+
/>
|
|
469
|
+
</div>
|
|
470
|
+
|
|
471
|
+
<div class="field">
|
|
472
|
+
<label for="fromEmail" class="block font-medium mb-2"
|
|
473
|
+
>From Email</label
|
|
474
|
+
>
|
|
475
|
+
<input
|
|
476
|
+
pInputText
|
|
477
|
+
id="fromEmail"
|
|
478
|
+
[(ngModel)]="formModel.fromEmail"
|
|
479
|
+
class="w-full"
|
|
480
|
+
placeholder="noreply@example.com"
|
|
481
|
+
/>
|
|
482
|
+
</div>
|
|
483
|
+
|
|
484
|
+
<div class="field">
|
|
485
|
+
<label for="fromName" class="block font-medium mb-2"
|
|
486
|
+
>From Name</label
|
|
487
|
+
>
|
|
488
|
+
<input
|
|
489
|
+
pInputText
|
|
490
|
+
id="fromName"
|
|
491
|
+
[(ngModel)]="formModel.fromName"
|
|
492
|
+
class="w-full"
|
|
493
|
+
placeholder="FLUSYS"
|
|
494
|
+
/>
|
|
495
|
+
</div>
|
|
496
|
+
|
|
497
|
+
<div class="field flex items-center gap-2">
|
|
498
|
+
<p-toggleswitch [(ngModel)]="formModel.isActive" />
|
|
499
|
+
<label>Active</label>
|
|
500
|
+
</div>
|
|
501
|
+
|
|
502
|
+
<div class="field flex items-center gap-2">
|
|
503
|
+
<p-toggleswitch [(ngModel)]="formModel.isDefault" />
|
|
504
|
+
<label>Set as Default</label>
|
|
505
|
+
</div>
|
|
506
|
+
</div>
|
|
507
|
+
|
|
508
|
+
<!-- SMTP Fields -->
|
|
509
|
+
@if (formModel.provider === providerEnum.SMTP) {
|
|
510
|
+
<div class="border-t mt-4 pt-4">
|
|
511
|
+
<h3 class="font-semibold mb-4">SMTP Settings</h3>
|
|
512
|
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
513
|
+
<div class="field">
|
|
514
|
+
<label for="smtpHost" class="block font-medium mb-2"
|
|
515
|
+
>SMTP Host *</label
|
|
516
|
+
>
|
|
517
|
+
<input
|
|
518
|
+
pInputText
|
|
519
|
+
id="smtpHost"
|
|
520
|
+
[(ngModel)]="formModel.smtpHost"
|
|
521
|
+
class="w-full"
|
|
522
|
+
placeholder="smtp.gmail.com"
|
|
523
|
+
/>
|
|
524
|
+
</div>
|
|
525
|
+
<div class="field">
|
|
526
|
+
<label for="smtpPort" class="block font-medium mb-2"
|
|
527
|
+
>Port *</label
|
|
528
|
+
>
|
|
529
|
+
<p-inputNumber
|
|
530
|
+
id="smtpPort"
|
|
531
|
+
[(ngModel)]="formModel.smtpPort"
|
|
532
|
+
[useGrouping]="false"
|
|
533
|
+
class="w-full"
|
|
534
|
+
placeholder="587"
|
|
535
|
+
/>
|
|
536
|
+
</div>
|
|
537
|
+
<div class="field">
|
|
538
|
+
<label for="smtpUser" class="block font-medium mb-2"
|
|
539
|
+
>Username *</label
|
|
540
|
+
>
|
|
541
|
+
<input
|
|
542
|
+
pInputText
|
|
543
|
+
id="smtpUser"
|
|
544
|
+
[(ngModel)]="formModel.smtpUser"
|
|
545
|
+
class="w-full"
|
|
546
|
+
placeholder="user@gmail.com"
|
|
547
|
+
/>
|
|
548
|
+
</div>
|
|
549
|
+
<div class="field">
|
|
550
|
+
<label for="smtpPass" class="block font-medium mb-2"
|
|
551
|
+
>Password *</label
|
|
552
|
+
>
|
|
553
|
+
<p-password
|
|
554
|
+
id="smtpPass"
|
|
555
|
+
[(ngModel)]="formModel.smtpPass"
|
|
556
|
+
[feedback]="false"
|
|
557
|
+
[toggleMask]="true"
|
|
558
|
+
styleClass="w-full"
|
|
559
|
+
inputStyleClass="w-full"
|
|
560
|
+
placeholder="App password"
|
|
561
|
+
/>
|
|
562
|
+
</div>
|
|
563
|
+
<div class="field flex items-center gap-2">
|
|
564
|
+
<p-toggleswitch [(ngModel)]="formModel.smtpSecure" />
|
|
565
|
+
<label>Use SSL/TLS (Port 465)</label>
|
|
566
|
+
</div>
|
|
567
|
+
</div>
|
|
568
|
+
</div>
|
|
569
|
+
}
|
|
570
|
+
|
|
571
|
+
<!-- SendGrid Fields -->
|
|
572
|
+
@if (formModel.provider === providerEnum.SENDGRID) {
|
|
573
|
+
<div class="border-t mt-4 pt-4">
|
|
574
|
+
<h3 class="font-semibold mb-4">SendGrid Settings</h3>
|
|
575
|
+
<div class="grid grid-cols-1 gap-4">
|
|
576
|
+
<div class="field">
|
|
577
|
+
<label for="sendgridApiKey" class="block font-medium mb-2"
|
|
578
|
+
>API Key *</label
|
|
579
|
+
>
|
|
580
|
+
<p-password
|
|
581
|
+
id="sendgridApiKey"
|
|
582
|
+
[(ngModel)]="formModel.sendgridApiKey"
|
|
583
|
+
[feedback]="false"
|
|
584
|
+
[toggleMask]="true"
|
|
585
|
+
styleClass="w-full"
|
|
586
|
+
inputStyleClass="w-full"
|
|
587
|
+
placeholder="SG.xxxx..."
|
|
588
|
+
/>
|
|
589
|
+
</div>
|
|
590
|
+
</div>
|
|
591
|
+
</div>
|
|
592
|
+
}
|
|
593
|
+
|
|
594
|
+
<!-- Mailgun Fields -->
|
|
595
|
+
@if (formModel.provider === providerEnum.MAILGUN) {
|
|
596
|
+
<div class="border-t mt-4 pt-4">
|
|
597
|
+
<h3 class="font-semibold mb-4">Mailgun Settings</h3>
|
|
598
|
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
599
|
+
<div class="field">
|
|
600
|
+
<label for="mailgunApiKey" class="block font-medium mb-2"
|
|
601
|
+
>API Key *</label
|
|
602
|
+
>
|
|
603
|
+
<p-password
|
|
604
|
+
id="mailgunApiKey"
|
|
605
|
+
[(ngModel)]="formModel.mailgunApiKey"
|
|
606
|
+
[feedback]="false"
|
|
607
|
+
[toggleMask]="true"
|
|
608
|
+
styleClass="w-full"
|
|
609
|
+
inputStyleClass="w-full"
|
|
610
|
+
placeholder="key-xxxx..."
|
|
611
|
+
/>
|
|
612
|
+
</div>
|
|
613
|
+
<div class="field">
|
|
614
|
+
<label for="mailgunDomain" class="block font-medium mb-2"
|
|
615
|
+
>Domain *</label
|
|
616
|
+
>
|
|
617
|
+
<input
|
|
618
|
+
pInputText
|
|
619
|
+
id="mailgunDomain"
|
|
620
|
+
[(ngModel)]="formModel.mailgunDomain"
|
|
621
|
+
class="w-full"
|
|
622
|
+
placeholder="mg.example.com"
|
|
623
|
+
/>
|
|
624
|
+
</div>
|
|
625
|
+
<div class="field">
|
|
626
|
+
<label for="mailgunRegion" class="block font-medium mb-2"
|
|
627
|
+
>Region</label
|
|
628
|
+
>
|
|
629
|
+
<p-select
|
|
630
|
+
id="mailgunRegion"
|
|
631
|
+
[options]="regionOptions"
|
|
632
|
+
[(ngModel)]="formModel.mailgunRegion"
|
|
633
|
+
optionLabel="label"
|
|
634
|
+
optionValue="value"
|
|
635
|
+
placeholder="Select region"
|
|
636
|
+
class="w-full"
|
|
637
|
+
/>
|
|
638
|
+
</div>
|
|
639
|
+
</div>
|
|
640
|
+
</div>
|
|
641
|
+
}
|
|
642
|
+
</div>
|
|
643
|
+
</div>
|
|
644
|
+
|
|
645
|
+
<p-toast />
|
|
646
|
+
`,
|
|
647
|
+
}]
|
|
648
|
+
}] });
|
|
649
|
+
|
|
650
|
+
export { EmailConfigFormComponent };
|
|
651
|
+
//# sourceMappingURL=flusys-ng-email-email-config-form.component-8dOBD-Q-.mjs.map
|