fix: Unrecognized Authentication Type Error when SMTP LOGIN Auth method is required (#7761)

* fix: poc outlook.com now works login auth

* fix: remove port arg from smtpAuth

* fix: add outlook provider and custom email placeholder

* fix: minor typo in contributing docs

* fix: use zerrors package

* fix: typo for idp and smtp providers

---------

Co-authored-by: Max Peintner <max@caos.ch>

console/src/app/modules/smtp-provider/known-smtp-providers-settings.ts

@@ -53,6 +53,7 @@ export interface ProviderDefaultSettings {
     value: string;
     placeholder: string;
   };
+  senderEmailPlaceholder?: string;
   image?: string;
   routerLinkElement: string;
 }
@@ -102,6 +103,7 @@ export const MailjetDefaultSettings: ProviderDefaultSettings = {
   user: { value: '', placeholder: 'Your Mailjet API key' },
   password: { value: '', placeholder: 'Your Mailjet Secret key' },
   image: './assets/images/smtp/mailjet.svg',
+  senderEmailPlaceholder: 'An authorized domain or email address',
   routerLinkElement: 'mailjet',
 };
 
@@ -114,6 +116,7 @@ export const PostmarkDefaultSettings: ProviderDefaultSettings = {
   user: { value: '', placeholder: 'Your Server API token' },
   password: { value: '', placeholder: 'Your Server API token' },
   image: './assets/images/smtp/postmark.png',
+  senderEmailPlaceholder: 'An authorized domain or email address',
   routerLinkElement: 'postmark',
 };
 
@@ -138,6 +141,7 @@ export const MailchimpDefaultSettings: ProviderDefaultSettings = {
   user: { value: '', placeholder: 'Your Mailchimp primary contact email' },
   password: { value: '', placeholder: 'Your Mailchimp Transactional API key' },
   image: './assets/images/smtp/mailchimp.svg',
+  senderEmailPlaceholder: 'An authorized domain or email address',
   routerLinkElement: 'mailchimp',
 };
 
@@ -153,6 +157,19 @@ export const BrevoDefaultSettings: ProviderDefaultSettings = {
   routerLinkElement: 'brevo',
 };
 
+export const OutlookDefaultSettings: ProviderDefaultSettings = {
+  name: 'outlook.com',
+  requiredTls: true,
+  host: 'smtp-mail.outlook.com',
+  unencryptedPort: 587,
+  encryptedPort: 587,
+  user: { value: '', placeholder: 'Your outlook.com email address' },
+  password: { value: '', placeholder: 'Your outlook.com password' },
+  image: './assets/images/smtp/outlook.svg',
+  senderEmailPlaceholder: 'Your outlook.com email address',
+  routerLinkElement: 'outlook',
+};
+
 export const GenericDefaultSettings: ProviderDefaultSettings = {
   name: 'generic',
   requiredTls: false,
@@ -170,5 +187,6 @@ export const SMTPKnownProviders = [
   MailjetDefaultSettings,
   PostmarkDefaultSettings,
   SendgridDefaultSettings,
+  OutlookDefaultSettings,
   GenericDefaultSettings,
 ];

console/src/app/modules/smtp-provider/smtp-provider-routing.module.ts

@@ -13,6 +13,7 @@ const types = [
   { path: 'mailjet', component: SMTPProviderComponent },
   { path: 'mailchimp', component: SMTPProviderComponent },
   { path: 'brevo', component: SMTPProviderComponent },
+  { path: 'outlook', component: SMTPProviderComponent },
 ];
 
 const routes: Routes = types.map((value) => {

console/src/app/modules/smtp-provider/smtp-provider.component.html

@@ -106,7 +106,13 @@
 
         <cnsl-form-field class="smtp-form-field" label="Sender Address">
           <cnsl-label>{{ 'SETTING.SMTP.SENDERADDRESS' | translate }}</cnsl-label>
-          <input cnslInput name="senderAddress" formControlName="senderAddress" placeholder="sender@example.com" required />
+          <input
+            cnslInput
+            name="senderAddress"
+            formControlName="senderAddress"
+            placeholder="{{ senderEmailPlaceholder }}"
+            required
+          />
         </cnsl-form-field>
 
         <cnsl-form-field class="smtp-form-field" label="Sender Name">

console/src/app/modules/smtp-provider/smtp-provider.component.ts

@@ -28,6 +28,7 @@ import {
   MailjetDefaultSettings,
   PostmarkDefaultSettings,
   ProviderDefaultSettings,
+  OutlookDefaultSettings,
   SendgridDefaultSettings,
 } from './known-smtp-providers-settings';
 
@@ -56,6 +57,8 @@ export class SMTPProviderComponent {
   public firstFormGroup!: UntypedFormGroup;
   public secondFormGroup!: UntypedFormGroup;
 
+  public senderEmailPlaceholder = 'sender@example.com';
+
   constructor(
     private service: AdminService,
     private _location: Location,
@@ -91,6 +94,9 @@ export class SMTPProviderComponent {
         case 'brevo':
           this.providerDefaultSetting = BrevoDefaultSettings;
           break;
+        case 'outlook':
+          this.providerDefaultSetting = OutlookDefaultSettings;
+          break;
       }
 
       this.firstFormGroup = this.fb.group({
@@ -106,6 +112,8 @@ export class SMTPProviderComponent {
         password: [this.providerDefaultSetting?.password.value || ''],
       });
 
+      this.senderEmailPlaceholder = this.providerDefaultSetting?.senderEmailPlaceholder || 'sender@example.com';
+
       this.secondFormGroup = this.fb.group({
         senderAddress: ['', [requiredValidator]],
         senderName: ['', [requiredValidator]],

console/src/app/modules/smtp-table/smtp-table.component.html

@@ -11,7 +11,8 @@
     '/instance/smtpprovider/postmark/create',
     '/instance/smtpprovider/sendgrid/create',
     '/instance/smtpprovider/mailchimp/create',
-    '/instance/smtpprovider/brevo/create'
+    '/instance/smtpprovider/brevo/create',
+    '/instance/smtpprovider/outlook/create'
   ]"
   [timestamp]="configsResult?.details?.viewTimestamp"
   [selection]="selection"

console/src/assets/i18n/en.json

@@ -1994,7 +1994,7 @@
     },
     "CREATE": {
       "TITLE": "Add provider",
-      "DESCRIPTION": "Select one ore more of the following providers.",
+      "DESCRIPTION": "Select one or more of the following providers.",
       "STEPPERTITLE": "Create Provider",
       "OIDC": {
         "TITLE": "OIDC Provider",
@@ -2264,7 +2264,7 @@
     },
     "CREATE": {
       "TITLE": "Add SMTP provider",
-      "DESCRIPTION": "Select one ore more of the following providers.",
+      "DESCRIPTION": "Select one or more of the following providers.",
       "STEPS": {
         "TITLE": "Add {{ value }} SMTP Provider",
         "CREATE_DESC_TITLE": "Enter your {{ value }} SMTP settings step by step",