Add an admin section for configuring email info

src/app/app.module.ts

@@ -75,6 +75,7 @@ import { environment } from 'src/environments/environment';
 import { AppInitService } from './services/app-init.service';
 import { appConfigFactory } from './app-config-factory';
 import { VerificationComponent } from './pages/admin/verification/verification.component';
+import { EmailComponent } from './pages/admin/email/email.component';
 import { InventoryResourcesComponent } from './pages/product-inventory/inventory-resources/inventory-resources.component';
 import { InventoryServicesComponent } from './pages/product-inventory/inventory-services/inventory-services.component';
 import { ProductInvDetailComponent } from './pages/product-inventory/inventory-items/product-inv-detail/product-inv-detail.component';
@@ -158,6 +159,7 @@ import { OperatorRevenueSharingComponent } from "src/app/pages/admin/operator-re
     ContactUsComponent,
     ContactUsFormComponent,
     VerificationComponent,
+    EmailComponent,
     InventoryResourcesComponent,
     InventoryServicesComponent,
     ProductInvDetailComponent,

src/app/pages/admin/admin.component.html

@@ -25,6 +25,12 @@ <h1 class="mb-8 mt-4 text-4xl font-extrabold leading-none tracking-tight text-gr
         <li>
           <a (click)="goToVerification()" class="cursor-pointer block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">{{ 'ADMIN._verification' | translate }}</a>
         </li>
+        <li>
+          <a (click)="goToRevenue()" class="cursor-pointer block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">{{ 'ADMIN._revenue' | translate }}</a>
+        </li>
+        <li>
+          <a (click)="goToEmail()" class="cursor-pointer block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">{{ 'ADMIN._email' | translate }}</a>
+        </li>
       </ul>
     </div>
 
@@ -40,6 +46,9 @@ <h1 class="mb-8 mt-4 text-4xl font-extrabold leading-none tracking-tight text-gr
             <button (click)="goToRevenue()" id="revenue-button" class="block w-full px-4 py-2 border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-secondary-400 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
               {{ 'ADMIN._revenue' | translate }}
             </button>
+            <button (click)="goToEmail()" id="email-button" class="block w-full px-4 py-2 border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-secondary-400 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
+              {{ 'ADMIN._email' | translate }}
+            </button>
           </div>
        </div>
 
@@ -58,5 +67,8 @@ <h1 class="mb-8 mt-4 text-4xl font-extrabold leading-none tracking-tight text-gr
         @if(show_revenue){
           <operator-revenue-sharing></operator-revenue-sharing>
         }
+        @if(show_email){
+          <email></email>
+        }
     </div>
 </div>

src/app/pages/admin/admin.component.ts

@@ -24,6 +24,7 @@ export class AdminComponent implements OnInit, OnDestroy {
   show_update_categories:boolean = false;
   show_verification:boolean = false;
   show_revenue:boolean = false;
+  show_email:boolean = false;
   private destroy$ = new Subject<void>();
 
   category_to_update:any;
@@ -64,6 +65,7 @@ export class AdminComponent implements OnInit, OnDestroy {
     this.show_update_categories = false;
     this.show_verification = false;
     this.show_revenue = false;
+    this.show_email = false;
     this.cdr.detectChanges();
   }
 
@@ -73,6 +75,7 @@ export class AdminComponent implements OnInit, OnDestroy {
     this.show_update_categories = false;
     this.show_verification = false;
     this.show_revenue = false;
+    this.show_email = false;
     this.cdr.detectChanges();
   }
 
@@ -82,6 +85,7 @@ export class AdminComponent implements OnInit, OnDestroy {
     this.show_update_categories = true;
     this.show_verification = false;
     this.show_revenue = false;
+    this.show_email = false;
     this.cdr.detectChanges();
   }
 
@@ -92,6 +96,7 @@ export class AdminComponent implements OnInit, OnDestroy {
     this.show_update_categories = false;
     this.show_verification = true;
     this.show_revenue = false;
+    this.show_email = false;
     this.cdr.detectChanges();
   }
 
@@ -102,37 +107,67 @@ export class AdminComponent implements OnInit, OnDestroy {
     this.show_update_categories = false;
     this.show_verification = false;
     this.show_revenue = true;
+    this.show_email = false;
+    this.cdr.detectChanges();
+  }
+
+  goToEmail() {
+    this.selectEmail()
+    this.show_categories = false;
+    this.show_create_categories = false;
+    this.show_update_categories = false;
+    this.show_verification = false;
+    this.show_revenue = false;
+    this.show_email = true;
     this.cdr.detectChanges();
   }
 
   selectCategories(){
     let categories_button = document.getElementById('categories-button')
     let verify_button = document.getElementById('verify-button')
     let revenue_button = document.getElementById('revenue-button')
+    let email_button = document.getElementById('email-button')
 
     this.selectMenu(categories_button,'text-white bg-primary-100');
     this.unselectMenu(verify_button,'text-white bg-primary-100');
     this.unselectMenu(revenue_button,'text-white bg-primary-100');
+    this.unselectMenu(email_button,'text-white bg-primary-100');
   }
 
   selectVerification(){
     let categories_button = document.getElementById('categories-button')
     let verify_button = document.getElementById('verify-button')
     let revenue_button = document.getElementById('revenue-button')
+    let email_button = document.getElementById('email-button')
 
     this.selectMenu(verify_button,'text-white bg-primary-100');
     this.unselectMenu(categories_button,'text-white bg-primary-100');
     this.unselectMenu(revenue_button,'text-white bg-primary-100');
+    this.unselectMenu(email_button,'text-white bg-primary-100');
   }
 
   selectRevenue(){
     let categories_button = document.getElementById('categories-button')
     let verify_button = document.getElementById('verify-button')
     let revenue_button = document.getElementById('revenue-button')
+    let email_button = document.getElementById('email-button')
 
     this.unselectMenu(verify_button,'text-white bg-primary-100');
     this.unselectMenu(categories_button,'text-white bg-primary-100');
     this.selectMenu(revenue_button,'text-white bg-primary-100')
+    this.unselectMenu(email_button,'text-white bg-primary-100');
+  }
+
+  selectEmail(){
+    let categories_button = document.getElementById('categories-button')
+    let verify_button = document.getElementById('verify-button')
+    let revenue_button = document.getElementById('revenue-button')
+    let email_button = document.getElementById('email-button')
+
+    this.unselectMenu(verify_button,'text-white bg-primary-100');
+    this.unselectMenu(categories_button,'text-white bg-primary-100');
+    this.unselectMenu(revenue_button,'text-white bg-primary-100');
+    this.selectMenu(email_button,'text-white bg-primary-100')
   }
 
   removeClass(elem: HTMLElement, cls:string) {

src/app/pages/admin/email/email.component.html

@@ -0,0 +1,76 @@
+<div>
+    <!-- Breadcrumb -->
+    <div class="pb-4">
+        <nav class="flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-secondary-50 dark:bg-secondary-100 dark:border-gray-800 dark:text-white" aria-label="Breadcrumb">
+        <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
+            <li class="inline-flex items-center">
+                <button (click)="goBack()" class="inline-flex items-center text-sm font-medium text-gray-500 dark:text-white hover:text-primary-100 dark:hover:text-primary-50">
+                <svg class="w-3 h-3 mr-2 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 10">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 1 1 5l4 4m6-8L7 5l4 4"/>
+                </svg>
+                {{ 'CREATE_CATEGORIES._back' | translate }}
+                </button>
+            </li>
+            <li aria-current="page">
+                <div class="flex items-center">
+                <svg class="rtl:rotate-180  w-3 h-3 mx-1 text-gray-400 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
+                </svg>
+                <span class="ms-1 text-sm font-medium text-gray-500 dark:text-white md:ms-2 ">{{ 'ADMIN._verification' | translate }}</span>
+                </div>
+            </li>
+            </ol>
+        </nav>
+    </div>
+    <!-- End Breadcrumb -->
+
+
+    <div class="bg-secondary-50 dark:bg-secondary-100 border border-secondary-50 dark:border-gray-800 mt-4 p-8 rounded-lg">
+        <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'ADMIN._verification' | translate }}</h2>
+        <hr class="h-px m-4 bg-gray-300 dark:bg-gray-200 border-0">
+
+        <div class="md:grid">
+            <div>
+                <form class="m-4 gap-4" [formGroup]="emailForm">
+                    <label for="smtp-server" class="font-bold text-lg dark:text-white">{{ 'ADMIN._smtpServer' | translate }}</label>
+                    <input formControlName="smtpServer" type="text" id="smtp-server"
+                            [ngClass]="emailForm.get('smtpServer')?.invalid == true && emailForm.value.smtpServer != '' ? 'border-red-600' : 'border-gray-300'"
+                            class="mb-2 bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
+
+                    <label for="smtp-port" class="font-bold text-lg dark:text-white">{{ 'ADMIN._smtpPort' | translate }}</label>
+                    <input formControlName="smtpPort" type="text" id="smtp-port"
+                            [ngClass]="emailForm.get('smtpPort')?.invalid == true && emailForm.value.smtpPort != '' ? 'border-red-600' : 'border-gray-300'"
+                            class="mb-2 bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
+
+                    <label for="email" class="font-bold text-lg dark:text-white">{{ 'ADMIN._email' | translate }}</label>
+                    <input formControlName="email" type="text" id="email"
+                            [ngClass]="emailForm.get('email')?.invalid == true && emailForm.value.email != '' ? 'border-red-600' : 'border-gray-300'"
+                            class="mb-2 bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
+
+                    <label for="email-user" class="font-bold text-lg dark:text-white">{{ 'ADMIN._emailUser' | translate }}</label>
+                    <input formControlName="emailUser" type="text" id="email-user"
+                            [ngClass]="emailForm.get('emailUser')?.invalid == true && emailForm.value.emailUser != '' ? 'border-red-600' : 'border-gray-300'"
+                            class="mb-2 bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
+
+                    <label for="email-pass" class="font-bold text-lg dark:text-white">{{ 'ADMIN._emailPass' | translate }}</label>
+                    <input formControlName="emailPassword" type="password" id="email-pass"
+                            [ngClass]="emailForm.get('emailPassword')?.invalid == true && emailForm.value.emailPassword != '' ? 'border-red-600' : 'border-gray-300'"
+                            class="mb-2 bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
+                </form>
+
+                <div class="flex w-full justify-items-end justify-end ml-4">
+                    <button data-cy="adminAddCredential" type="button" (click)="addConfig();" class="flex text-white justify-end bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center">
+                        {{ 'ADMIN._add' | translate }}
+                        <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+@if(showError){
+    <error-message class="flex justify-center items-center fixed w-fit top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50" [message]="errorMessage"></error-message>
+}

src/app/pages/admin/email/email.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EmailComponent } from './email.component';
+
+describe('EmailComponent', () => {
+  let component: EmailComponent;
+  let fixture: ComponentFixture<EmailComponent>;
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [EmailComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(EmailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/admin/email/email.component.ts

@@ -0,0 +1,100 @@
+import { HttpClient } from '@angular/common/http';
+import { Component } from '@angular/core';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { EventMessageService } from 'src/app/services/event-message.service';
+import { environment } from 'src/environments/environment';
+
+@Component({
+  selector: 'email',
+  templateUrl: './email.component.html',
+  styleUrl: './email.component.css'
+})
+export class EmailComponent {
+
+  showError: boolean = false;
+  errorMessage: string = '';
+
+  emailForm = new FormGroup({
+    smtpServer: new FormControl('', [Validators.required]),
+    smtpPort: new FormControl('', [Validators.required]),
+    email: new FormControl('', [Validators.required]),
+    emailUser: new FormControl('', [Validators.required]),
+    emailPassword: new FormControl('', [Validators.required])
+  });
+
+  constructor(
+    private eventMessage: EventMessageService,
+    private http: HttpClient
+  ) {}
+
+  ngOnInit() {
+    this.getConfig();
+  }
+
+  goBack() {
+    this.eventMessage.emitAdminCategories(true);
+  }
+
+  fillData(data: any) {
+    this.emailForm.setValue({
+      smtpServer: data.smtpServer,
+      smtpPort: data.smtpPort,
+      email: data.email,
+      emailUser: data.emailUser,
+      emailPassword: ''
+    });
+  }
+
+  getConfig() {
+    const url = `${environment.BASE_URL}/charging/api/orderManagement/notify/config`;
+    return this.http.get<any>(url).subscribe({
+      next: data => {
+        this.fillData(data);
+      },
+      error: error => {
+        console.error('There was an error while getting config!', error);
+        if(error.error.error){
+          console.log(error)
+          this.errorMessage = 'Error: ' + error.error.error;
+        } else {
+          this.errorMessage = 'There was an error while getting the config';
+        }
+        this.showError = true;
+        setTimeout(() => {
+          this.showError = false;
+        }, 3000);
+      }
+    })
+  }
+
+  addConfig() {
+    // Get the product specification
+    const url = `${environment.BASE_URL}/charging/api/orderManagement/notify/config`;
+    const body = {
+      "smtpServer": this.emailForm.value.smtpServer,
+      "smtpPort": this.emailForm.value.smtpPort,
+      "email": this.emailForm.value.email,
+      "emailUser": this.emailForm.value.emailUser,
+      "emailPassword": this.emailForm.value.emailPassword
+    }
+
+    return this.http.post<any>(url, body).subscribe({
+      next: data => {
+        this.fillData(data);
+      },
+      error: error => {
+        console.error('There was an error while updating!', error);
+        if(error.error.error){
+          console.log(error)
+          this.errorMessage = 'Error: ' + error.error.error;
+        } else {
+          this.errorMessage = 'There was an error while updating the config';
+        }
+        this.showError = true;
+        setTimeout(() => {
+          this.showError = false;
+        }, 3000);
+      }
+    })
+  }
+}

src/assets/i18n/en.json

@@ -1006,7 +1006,12 @@
         "_productId": "Product ID",
         "_vc": "Verifiable Credential",
         "_add": "Add",
-        "_revenue": "Revenue sharing"
+        "_revenue": "Revenue sharing",
+        "_email": "Email",
+        "_smtpServer": "SMTP Server",
+        "_smtpPort": "SMTP Port",
+        "_emailUser": "Email User",
+        "_emailPass": "Email Password"
     },
     "CATEGORIES":{
         "_categories": "Categories",

src/assets/i18n/es.json

@@ -1006,7 +1006,12 @@
         "_productId": "Product ID",
         "_vc": "Verifiable Credential",
         "_add": "Add",
-        "_revenue": "Revenue sharing"
+        "_revenue": "Revenue sharing",
+        "_email": "Email",
+        "_smtpServer": "SMTP Server",
+        "_smtpPort": "SMTP Port",
+        "_emailUser": "Email User",
+        "_emailPass": "Email Password"
     },
     "CATEGORIES":{
         "_categories": "Categories",