NAS-133459 / 25.04 / Allow From Name and Email to be used with oAuth …

…email config (#11320)

src/app/pages/system/general-settings/email/email-card/email-card.component.html

@@ -28,7 +28,7 @@ <h3>{{ 'Email' | translate }}</h3>
       </mat-list-item>
 
       <ng-container *ixWithLoadingState="emailConfig$ as emailConfig">
-        @if (!emailConfig?.oauth?.client_id) {
+        @if (emailConfig?.fromemail || emailConfig?.fromname) {
           <mat-list-item>
             <span class="label">{{ 'From' | translate }}:</span>
             <span *ixWithLoadingState="emailConfig$ as emailConfig" class="value">

src/app/pages/system/general-settings/email/email-card/email-card.component.spec.ts

@@ -92,6 +92,7 @@ describe('EmailCardComponent with Gmail OAuth', () => {
 
     expect(itemTexts).toEqual([
       'Send Mail Method: GMail OAuth',
+      'From: Test [email protected] via google.com',
     ]);
   });
 });

src/app/pages/system/general-settings/email/email-form/email-form.component.html

@@ -14,20 +14,20 @@
           [options]="sendMethodOptions$"
         ></ix-radio-group>
 
-        @if (isSmtp) {
-          <ix-input
-            formControlName="fromemail"
-            [label]="'From Email' | translate"
-            [required]="true"
-            [tooltip]="helptext.fromemail.tooltip | translate"
-          ></ix-input>
+        <ix-input
+          formControlName="fromemail"
+          [label]="'From Email' | translate"
+          [required]="isSmtp"
+          [tooltip]="helptext.fromemail.tooltip | translate"
+        ></ix-input>
 
-          <ix-input
-            formControlName="fromname"
-            [label]="'From Name' | translate"
-            [tooltip]="helptext.fromname.tooltip | translate"
-          ></ix-input>
+        <ix-input
+          formControlName="fromname"
+          [label]="'From Name' | translate"
+          [tooltip]="helptext.fromname.tooltip | translate"
+        ></ix-input>
 
+        @if (isSmtp) {
           <ix-input
             formControlName="outgoingserver"
             [label]="'Outgoing Mail Server' | translate"

src/app/pages/system/general-settings/email/email-form/email-form.component.spec.ts

@@ -159,6 +159,8 @@ describe('EmailFormComponent', () => {
 
     it('saves Gmail Oauth config when user authorizes via Gmail and saves the form', async () => {
       await form.fillForm({
+        'From Email': '[email protected]',
+        'From Name': 'Johnny',
         'Send Mail Method': 'GMail OAuth',
       });
 
@@ -169,8 +171,8 @@ describe('EmailFormComponent', () => {
       await saveButton.click();
 
       expect(api.call).toHaveBeenCalledWith('mail.update', [{
-        fromemail: '',
-        fromname: '',
+        fromemail: '[email protected]',
+        fromname: 'Johnny',
         oauth: {
           client_id: 'new_client_id',
           client_secret: 'new_secret',
@@ -202,8 +204,8 @@ describe('EmailFormComponent', () => {
             text: 'This is a test message from TrueNAS SCALE.',
           },
           {
-            fromemail: '',
-            fromname: '',
+            fromemail: '[email protected]',
+            fromname: 'John Smith',
             oauth: {
               client_id: 'new_client_id',
               client_secret: 'new_secret',
@@ -253,6 +255,8 @@ describe('EmailFormComponent', () => {
 
     it('saves Outlook Oauth config when user authorizes via Outlook and saves the form', async () => {
       await form.fillForm({
+        'From Email': '[email protected]',
+        'From Name': 'Johnny',
         'Send Mail Method': 'Outlook OAuth',
       });
 
@@ -263,8 +267,8 @@ describe('EmailFormComponent', () => {
       await saveButton.click();
 
       expect(api.call).toHaveBeenCalledWith('mail.update', [{
-        fromemail: '',
-        fromname: '',
+        fromemail: '[email protected]',
+        fromname: 'Johnny',
         outgoingserver: 'smtp-mail.outlook.com',
         port: 587,
         security: 'TLS',
@@ -299,8 +303,8 @@ describe('EmailFormComponent', () => {
             text: 'This is a test message from TrueNAS SCALE.',
           },
           {
-            fromemail: '',
-            fromname: '',
+            fromemail: '[email protected]',
+            fromname: 'John Smith',
             outgoingserver: 'smtp-mail.outlook.com',
             port: 587,
             security: 'TLS',
@@ -426,6 +430,8 @@ describe('EmailFormComponent', () => {
       const values = await form.getValues();
 
       expect(values).toEqual({
+        'From Email': '[email protected]',
+        'From Name': 'John Smith',
         'Send Mail Method': 'GMail OAuth',
       });
       expect(spectator.query('.oauth-message')).toHaveText('Gmail credentials have been applied.');
@@ -458,6 +464,8 @@ describe('EmailFormComponent', () => {
       const values = await form.getValues();
 
       expect(values).toEqual({
+        'From Email': '[email protected]',
+        'From Name': 'John Smith',
         'Send Mail Method': 'Outlook OAuth',
       });
       expect(spectator.query('.oauth-message')).toHaveText('Outlook credentials have been applied.');

src/app/pages/system/general-settings/email/email-form/email-form.component.ts

@@ -68,7 +68,7 @@ export class EmailFormComponent implements OnInit {
   sendMethodControl = new FormControl(MailSendMethod.Smtp, { nonNullable: true });
 
   form = this.formBuilder.group({
-    fromemail: ['', [Validators.required, emailValidator()]],
+    fromemail: ['', [emailValidator()]],
     fromname: [''],
     outgoingserver: [''],
     port: [null as number | null, [
@@ -271,8 +271,8 @@ export class EmailFormComponent implements OnInit {
       }
     } else {
       update = {
-        fromemail: '',
-        fromname: '',
+        fromemail: this.form.value.fromemail,
+        fromname: this.form.value.fromname,
         oauth: {
           ...this.oauthCredentials as MailOauthConfig,
           provider: this.sendMethodControl.value,