1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<div class="email-form">
<mat-form-field hintLabel="">
<input matInput #input maxlength="10" placeholder="{{'SMTP host'|trans}}">
</mat-form-field>
<mat-form-field hintLabel="">
<input matInput #input maxlength="10" placeholder="{{'SMTP port'|trans}}">
</mat-form-field>
<mat-form-field hintLabel="">
<input matInput #input maxlength="10"
[formControl]="emailFormControl"
[errorStateMatcher]="matcher"
placeholder="{{'SMTP user'|trans}}">
<mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
{{'Please enter a valid email address'|trans}}
</mat-error>
<mat-error *ngIf="emailFormControl.hasError('required')">
<strong>{{'Email is required'|trans}}</strong>
</mat-error>
</mat-form-field>
<mat-form-field hintLabel="{{'Some provider use token except password'|trans}}">
<input matInput #input maxlength="10"
[type]="hide ? 'password' : 'text'"
placeholder="{{'SMTP password'|trans}}">
<mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
</mat-form-field>
<mat-form-field
[hideRequiredMarker]="options.value.hideRequired"
[floatLabel]="options.value.floatLabel">
<mat-select required>
<mat-option value="yes">{{'Yes'|trans}}</mat-option>
<mat-option value="no">{{'No'|trans}}</mat-option>
</mat-select>
<mat-placeholder>
<b>{{'Use SSL'|trans}}</b>
</mat-placeholder>
<mat-hint>{{'If SMTP port is 465, may be select'|trans}}</mat-hint>
</mat-form-field>
<mat-form-field
[hideRequiredMarker]="options.value.hideRequired"
[floatLabel]="options.value.floatLabel">
<mat-select required>
<mat-option value="yes">{{'Yes'|trans}}</mat-option>
<mat-option value="no">{{'No'|trans}}</mat-option>
</mat-select>
<mat-placeholder>
<b>{{'Use TLS'|trans}}</b>
</mat-placeholder>
<mat-hint>{{'If SMTP port is 587, may be select'|trans}}</mat-hint>
</mat-form-field>
<br>
<div class="button-row">
<button mat-raised-button>{{ 'Test connection' | trans }}</button>
<button mat-raised-button>{{ 'Reset' | trans }}</button>
<button mat-raised-button color="primary">{{ 'Submit' | trans }}</button>
</div>
<br/>
</div>