fix: add port to SMTP host label (#4980)

* fix: add port to SMTP host label

* fix gRPC request message

* fix: validate port in backend

* make defaults.yaml host field more clear

* add placeholder smtp host field

* make ipv6 smtp host valid

* hide smtp password input

* fix smtp host not filled

* dont let browsers prefill smtp password

console/src/app/modules/policies/notification-settings/notification-settings.component.html

@@ -27,9 +27,9 @@
     {{ 'SETTING.SMTP.TLS' | translate }}
   </mat-checkbox>
 
-  <cnsl-form-field class="smtp-form-field" label="Host" required="true">
-    <cnsl-label>{{ 'SETTING.SMTP.HOST' | translate }}</cnsl-label>
-    <input cnslInput name="host" formControlName="host" />
+  <cnsl-form-field class="smtp-form-field" label="Host And Port" required="true">
+    <cnsl-label>{{ 'SETTING.SMTP.HOSTANDPORT' | translate }}</cnsl-label>
+    <input cnslInput name="hostAndPort" formControlName="hostAndPort" placeholder="smtp.mailtrap.io:2525" />
   </cnsl-form-field>
 
   <cnsl-form-field class="smtp-form-field" label="User" required="true">

console/src/app/modules/policies/notification-settings/notification-settings.component.ts

@@ -59,7 +59,7 @@ export class NotificationSettingsComponent implements OnInit {
       senderAddress: [{ disabled: true, value: '' }, [Validators.required]],
       senderName: [{ disabled: true, value: '' }, [Validators.required]],
       tls: [{ disabled: true, value: true }, [Validators.required]],
-      host: [{ disabled: true, value: '' }, [Validators.required]],
+      hostAndPort: [{ disabled: true, value: '' }, [Validators.required]],
       user: [{ disabled: true, value: '' }, [Validators.required]],
     });
   }
@@ -85,6 +85,7 @@ export class NotificationSettingsComponent implements OnInit {
         if (smtpConfig.smtpConfig) {
           this.hasSMTPConfig = true;
           this.form.patchValue(smtpConfig.smtpConfig);
+          this.form.patchValue({ ['hostAndPort']: smtpConfig.smtpConfig.host });
         }
       })
       .catch((error) => {
@@ -139,7 +140,7 @@ export class NotificationSettingsComponent implements OnInit {
   private updateData(): Promise<UpdateSMTPConfigResponse.AsObject | AddSMTPConfigResponse> {
     if (this.hasSMTPConfig) {
       const req = new UpdateSMTPConfigRequest();
-      req.setHost(this.host?.value ?? '');
+      req.setHost(this.hostAndPort?.value ?? '');
       req.setSenderAddress(this.senderAddress?.value ?? '');
       req.setSenderName(this.senderName?.value ?? '');
       req.setTls(this.tls?.value ?? false);
@@ -148,7 +149,7 @@ export class NotificationSettingsComponent implements OnInit {
       return this.service.updateSMTPConfig(req);
     } else {
       const req = new AddSMTPConfigRequest();
-      req.setHost(this.host?.value ?? '');
+      req.setHost(this.hostAndPort?.value ?? '');
       req.setSenderAddress(this.senderAddress?.value ?? '');
       req.setSenderName(this.senderName?.value ?? '');
       req.setTls(this.tls?.value ?? false);
@@ -305,7 +306,7 @@ export class NotificationSettingsComponent implements OnInit {
     return this.form.get('user');
   }
 
-  public get host(): AbstractControl | null {
-    return this.form.get('host');
+  public get hostAndPort(): AbstractControl | null {
+    return this.form.get('hostAndPort');
   }
 }

console/src/app/modules/policies/notification-settings/password-dialog/password-dialog.component.html

@@ -4,7 +4,7 @@
 <div mat-dialog-content>
   <cnsl-form-field class="formfield">
     <cnsl-label>{{ data.i18nLabel | translate }}</cnsl-label>
-    <input cnslInput [(ngModel)]="password" />
+    <input cnslInput [(ngModel)]="password" type="password" autocomplete="new-password" />
   </cnsl-form-field>
 </div>
 <div mat-dialog-actions class="action">

console/src/assets/i18n/de.json

@@ -916,7 +916,7 @@
       "TITLE": "SMTP Einstellungen",
       "SENDERADDRESS": "Sender Email-Adresse",
       "SENDERNAME": "Sender Name",
-      "HOST": "Host",
+      "HOSTANDPORT": "Host und Port",
       "USER": "Benutzer",
       "PASSWORD": "Passwort",
       "SETPASSWORD": "SMTP Passwort setzen",

console/src/assets/i18n/en.json

@@ -914,9 +914,9 @@
     },
     "SMTP": {
       "TITLE": "SMTP Settings",
-      "SENDERADDRESS": "Sender Email address",
+      "SENDERADDRESS": "Sender Email Address",
       "SENDERNAME": "Sender Name",
-      "HOST": "Host",
+      "HOSTANDPORT": "Host And Port",
       "USER": "User",
       "PASSWORD": "Password",
       "SETPASSWORD": "Set SMTP Password",

console/src/assets/i18n/fr.json

@@ -916,13 +916,13 @@
       "TITLE": "Paramètres SMTP",
       "SENDERADDRESS": "Adresse e-mail de l'expéditeur",
       "SENDERNAME": "Nom de l'expéditeur",
-      "HOST": "Hôte",
+      "HOSTANDPORT": "Hôte et port",
       "USER": "Utilisateur",
       "PASSWORD": "Mot de passe",
       "SETPASSWORD": "Définir le mot de passe SMTP",
       "PASSWORDSET": "Le mot de passe SMTP a été défini avec succès.",
       "TLS": "Sécurité de la couche de transport (TLS)",
-      "SAVED": "Enregistré avec succès !",
+      "SAVED": "Enregistré avec succès!",
       "REQUIREDWARN": "Pour envoyer des notifications depuis votre domaine, vous devez entrer vos données SMTP."
     },
     "SMS": {

console/src/assets/i18n/it.json

@@ -917,7 +917,7 @@
       "TITLE": "Impostazioni SMTP",
       "SENDERADDRESS": "Indirizzo email del mittente",
       "SENDERNAME": "Nome del mittente",
-      "HOST": "Host",
+      "HOSTANDPORT": "Host e porta",
       "USER": "Utente",
       "PASSWORD": "Password",
       "SETPASSWORD": "Imposta SMTP Password",

console/src/assets/i18n/zh.json

@@ -916,7 +916,7 @@
       "TITLE": "SMTP 设置",
       "SENDERADDRESS": "发件人地址",
       "SENDERNAME": "发件人名称",
-      "HOST": "服务器地址",
+      "HOSTANDPORT": "主机和端口",
       "USER": "用户名",
       "PASSWORD": "密码",
       "SETPASSWORD": "设置 SMTP 密码",