Skip to content

Commit 170c761

Browse files
authored
Add an admin section for configuring email info (#178)
1 parent 0433ee4 commit 170c761

File tree

9 files changed

+259
-2
lines changed

9 files changed

+259
-2
lines changed

src/app/app.module.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ import { environment } from 'src/environments/environment';
7575
import { AppInitService } from './services/app-init.service';
7676
import { appConfigFactory } from './app-config-factory';
7777
import { VerificationComponent } from './pages/admin/verification/verification.component';
78+
import { EmailComponent } from './pages/admin/email/email.component';
7879
import { InventoryResourcesComponent } from './pages/product-inventory/inventory-resources/inventory-resources.component';
7980
import { InventoryServicesComponent } from './pages/product-inventory/inventory-services/inventory-services.component';
8081
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
158159
ContactUsComponent,
159160
ContactUsFormComponent,
160161
VerificationComponent,
162+
EmailComponent,
161163
InventoryResourcesComponent,
162164
InventoryServicesComponent,
163165
ProductInvDetailComponent,

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,12 @@ <h1 class="mb-8 mt-4 text-4xl font-extrabold leading-none tracking-tight text-gr
2525
<li>
2626
<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>
2727
</li>
28+
<li>
29+
<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>
30+
</li>
31+
<li>
32+
<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>
33+
</li>
2834
</ul>
2935
</div>
3036

@@ -40,6 +46,9 @@ <h1 class="mb-8 mt-4 text-4xl font-extrabold leading-none tracking-tight text-gr
4046
<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">
4147
{{ 'ADMIN._revenue' | translate }}
4248
</button>
49+
<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">
50+
{{ 'ADMIN._email' | translate }}
51+
</button>
4352
</div>
4453
</div>
4554

@@ -58,5 +67,8 @@ <h1 class="mb-8 mt-4 text-4xl font-extrabold leading-none tracking-tight text-gr
5867
@if(show_revenue){
5968
<operator-revenue-sharing></operator-revenue-sharing>
6069
}
70+
@if(show_email){
71+
<email></email>
72+
}
6173
</div>
6274
</div>

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export class AdminComponent implements OnInit, OnDestroy {
2424
show_update_categories:boolean = false;
2525
show_verification:boolean = false;
2626
show_revenue:boolean = false;
27+
show_email:boolean = false;
2728
private destroy$ = new Subject<void>();
2829

2930
category_to_update:any;
@@ -64,6 +65,7 @@ export class AdminComponent implements OnInit, OnDestroy {
6465
this.show_update_categories = false;
6566
this.show_verification = false;
6667
this.show_revenue = false;
68+
this.show_email = false;
6769
this.cdr.detectChanges();
6870
}
6971

@@ -73,6 +75,7 @@ export class AdminComponent implements OnInit, OnDestroy {
7375
this.show_update_categories = false;
7476
this.show_verification = false;
7577
this.show_revenue = false;
78+
this.show_email = false;
7679
this.cdr.detectChanges();
7780
}
7881

@@ -82,6 +85,7 @@ export class AdminComponent implements OnInit, OnDestroy {
8285
this.show_update_categories = true;
8386
this.show_verification = false;
8487
this.show_revenue = false;
88+
this.show_email = false;
8589
this.cdr.detectChanges();
8690
}
8791

@@ -92,6 +96,7 @@ export class AdminComponent implements OnInit, OnDestroy {
9296
this.show_update_categories = false;
9397
this.show_verification = true;
9498
this.show_revenue = false;
99+
this.show_email = false;
95100
this.cdr.detectChanges();
96101
}
97102

@@ -102,37 +107,67 @@ export class AdminComponent implements OnInit, OnDestroy {
102107
this.show_update_categories = false;
103108
this.show_verification = false;
104109
this.show_revenue = true;
110+
this.show_email = false;
111+
this.cdr.detectChanges();
112+
}
113+
114+
goToEmail() {
115+
this.selectEmail()
116+
this.show_categories = false;
117+
this.show_create_categories = false;
118+
this.show_update_categories = false;
119+
this.show_verification = false;
120+
this.show_revenue = false;
121+
this.show_email = true;
105122
this.cdr.detectChanges();
106123
}
107124

108125
selectCategories(){
109126
let categories_button = document.getElementById('categories-button')
110127
let verify_button = document.getElementById('verify-button')
111128
let revenue_button = document.getElementById('revenue-button')
129+
let email_button = document.getElementById('email-button')
112130

113131
this.selectMenu(categories_button,'text-white bg-primary-100');
114132
this.unselectMenu(verify_button,'text-white bg-primary-100');
115133
this.unselectMenu(revenue_button,'text-white bg-primary-100');
134+
this.unselectMenu(email_button,'text-white bg-primary-100');
116135
}
117136

118137
selectVerification(){
119138
let categories_button = document.getElementById('categories-button')
120139
let verify_button = document.getElementById('verify-button')
121140
let revenue_button = document.getElementById('revenue-button')
141+
let email_button = document.getElementById('email-button')
122142

123143
this.selectMenu(verify_button,'text-white bg-primary-100');
124144
this.unselectMenu(categories_button,'text-white bg-primary-100');
125145
this.unselectMenu(revenue_button,'text-white bg-primary-100');
146+
this.unselectMenu(email_button,'text-white bg-primary-100');
126147
}
127148

128149
selectRevenue(){
129150
let categories_button = document.getElementById('categories-button')
130151
let verify_button = document.getElementById('verify-button')
131152
let revenue_button = document.getElementById('revenue-button')
153+
let email_button = document.getElementById('email-button')
132154

133155
this.unselectMenu(verify_button,'text-white bg-primary-100');
134156
this.unselectMenu(categories_button,'text-white bg-primary-100');
135157
this.selectMenu(revenue_button,'text-white bg-primary-100')
158+
this.unselectMenu(email_button,'text-white bg-primary-100');
159+
}
160+
161+
selectEmail(){
162+
let categories_button = document.getElementById('categories-button')
163+
let verify_button = document.getElementById('verify-button')
164+
let revenue_button = document.getElementById('revenue-button')
165+
let email_button = document.getElementById('email-button')
166+
167+
this.unselectMenu(verify_button,'text-white bg-primary-100');
168+
this.unselectMenu(categories_button,'text-white bg-primary-100');
169+
this.unselectMenu(revenue_button,'text-white bg-primary-100');
170+
this.selectMenu(email_button,'text-white bg-primary-100')
136171
}
137172

138173
removeClass(elem: HTMLElement, cls:string) {

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

Whitespace-only changes.
Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<div>
2+
<!-- Breadcrumb -->
3+
<div class="pb-4">
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">
5+
<ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
6+
<li class="inline-flex items-center">
7+
<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">
8+
<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">
9+
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 1 1 5l4 4m6-8L7 5l4 4"/>
10+
</svg>
11+
{{ 'CREATE_CATEGORIES._back' | translate }}
12+
</button>
13+
</li>
14+
<li aria-current="page">
15+
<div class="flex items-center">
16+
<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">
17+
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
18+
</svg>
19+
<span class="ms-1 text-sm font-medium text-gray-500 dark:text-white md:ms-2 ">{{ 'ADMIN._verification' | translate }}</span>
20+
</div>
21+
</li>
22+
</ol>
23+
</nav>
24+
</div>
25+
<!-- End Breadcrumb -->
26+
27+
28+
<div class="bg-secondary-50 dark:bg-secondary-100 border border-secondary-50 dark:border-gray-800 mt-4 p-8 rounded-lg">
29+
<h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'ADMIN._verification' | translate }}</h2>
30+
<hr class="h-px m-4 bg-gray-300 dark:bg-gray-200 border-0">
31+
32+
<div class="md:grid">
33+
<div>
34+
<form class="m-4 gap-4" [formGroup]="emailForm">
35+
<label for="smtp-server" class="font-bold text-lg dark:text-white">{{ 'ADMIN._smtpServer' | translate }}</label>
36+
<input formControlName="smtpServer" type="text" id="smtp-server"
37+
[ngClass]="emailForm.get('smtpServer')?.invalid == true && emailForm.value.smtpServer != '' ? 'border-red-600' : 'border-gray-300'"
38+
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" />
39+
40+
<label for="smtp-port" class="font-bold text-lg dark:text-white">{{ 'ADMIN._smtpPort' | translate }}</label>
41+
<input formControlName="smtpPort" type="text" id="smtp-port"
42+
[ngClass]="emailForm.get('smtpPort')?.invalid == true && emailForm.value.smtpPort != '' ? 'border-red-600' : 'border-gray-300'"
43+
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" />
44+
45+
<label for="email" class="font-bold text-lg dark:text-white">{{ 'ADMIN._email' | translate }}</label>
46+
<input formControlName="email" type="text" id="email"
47+
[ngClass]="emailForm.get('email')?.invalid == true && emailForm.value.email != '' ? 'border-red-600' : 'border-gray-300'"
48+
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" />
49+
50+
<label for="email-user" class="font-bold text-lg dark:text-white">{{ 'ADMIN._emailUser' | translate }}</label>
51+
<input formControlName="emailUser" type="text" id="email-user"
52+
[ngClass]="emailForm.get('emailUser')?.invalid == true && emailForm.value.emailUser != '' ? 'border-red-600' : 'border-gray-300'"
53+
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" />
54+
55+
<label for="email-pass" class="font-bold text-lg dark:text-white">{{ 'ADMIN._emailPass' | translate }}</label>
56+
<input formControlName="emailPassword" type="password" id="email-pass"
57+
[ngClass]="emailForm.get('emailPassword')?.invalid == true && emailForm.value.emailPassword != '' ? 'border-red-600' : 'border-gray-300'"
58+
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" />
59+
</form>
60+
61+
<div class="flex w-full justify-items-end justify-end ml-4">
62+
<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">
63+
{{ 'ADMIN._add' | translate }}
64+
<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">
65+
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
66+
</svg>
67+
</button>
68+
</div>
69+
</div>
70+
</div>
71+
</div>
72+
</div>
73+
74+
@if(showError){
75+
<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>
76+
}
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { EmailComponent } from './email.component';
4+
5+
describe('EmailComponent', () => {
6+
let component: EmailComponent;
7+
let fixture: ComponentFixture<EmailComponent>;
8+
beforeEach(async () => {
9+
await TestBed.configureTestingModule({
10+
declarations: [EmailComponent]
11+
})
12+
.compileComponents();
13+
14+
fixture = TestBed.createComponent(EmailComponent);
15+
component = fixture.componentInstance;
16+
fixture.detectChanges();
17+
});
18+
19+
it('should create', () => {
20+
expect(component).toBeTruthy();
21+
});
22+
});
Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import { HttpClient } from '@angular/common/http';
2+
import { Component } from '@angular/core';
3+
import { FormGroup, FormControl, Validators } from '@angular/forms';
4+
import { EventMessageService } from 'src/app/services/event-message.service';
5+
import { environment } from 'src/environments/environment';
6+
7+
@Component({
8+
selector: 'email',
9+
templateUrl: './email.component.html',
10+
styleUrl: './email.component.css'
11+
})
12+
export class EmailComponent {
13+
14+
showError: boolean = false;
15+
errorMessage: string = '';
16+
17+
emailForm = new FormGroup({
18+
smtpServer: new FormControl('', [Validators.required]),
19+
smtpPort: new FormControl('', [Validators.required]),
20+
email: new FormControl('', [Validators.required]),
21+
emailUser: new FormControl('', [Validators.required]),
22+
emailPassword: new FormControl('', [Validators.required])
23+
});
24+
25+
constructor(
26+
private eventMessage: EventMessageService,
27+
private http: HttpClient
28+
) {}
29+
30+
ngOnInit() {
31+
this.getConfig();
32+
}
33+
34+
goBack() {
35+
this.eventMessage.emitAdminCategories(true);
36+
}
37+
38+
fillData(data: any) {
39+
this.emailForm.setValue({
40+
smtpServer: data.smtpServer,
41+
smtpPort: data.smtpPort,
42+
email: data.email,
43+
emailUser: data.emailUser,
44+
emailPassword: ''
45+
});
46+
}
47+
48+
getConfig() {
49+
const url = `${environment.BASE_URL}/charging/api/orderManagement/notify/config`;
50+
return this.http.get<any>(url).subscribe({
51+
next: data => {
52+
this.fillData(data);
53+
},
54+
error: error => {
55+
console.error('There was an error while getting config!', error);
56+
if(error.error.error){
57+
console.log(error)
58+
this.errorMessage = 'Error: ' + error.error.error;
59+
} else {
60+
this.errorMessage = 'There was an error while getting the config';
61+
}
62+
this.showError = true;
63+
setTimeout(() => {
64+
this.showError = false;
65+
}, 3000);
66+
}
67+
})
68+
}
69+
70+
addConfig() {
71+
// Get the product specification
72+
const url = `${environment.BASE_URL}/charging/api/orderManagement/notify/config`;
73+
const body = {
74+
"smtpServer": this.emailForm.value.smtpServer,
75+
"smtpPort": this.emailForm.value.smtpPort,
76+
"email": this.emailForm.value.email,
77+
"emailUser": this.emailForm.value.emailUser,
78+
"emailPassword": this.emailForm.value.emailPassword
79+
}
80+
81+
return this.http.post<any>(url, body).subscribe({
82+
next: data => {
83+
this.fillData(data);
84+
},
85+
error: error => {
86+
console.error('There was an error while updating!', error);
87+
if(error.error.error){
88+
console.log(error)
89+
this.errorMessage = 'Error: ' + error.error.error;
90+
} else {
91+
this.errorMessage = 'There was an error while updating the config';
92+
}
93+
this.showError = true;
94+
setTimeout(() => {
95+
this.showError = false;
96+
}, 3000);
97+
}
98+
})
99+
}
100+
}

src/assets/i18n/en.json

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1006,7 +1006,12 @@
10061006
"_productId": "Product ID",
10071007
"_vc": "Verifiable Credential",
10081008
"_add": "Add",
1009-
"_revenue": "Revenue sharing"
1009+
"_revenue": "Revenue sharing",
1010+
"_email": "Email",
1011+
"_smtpServer": "SMTP Server",
1012+
"_smtpPort": "SMTP Port",
1013+
"_emailUser": "Email User",
1014+
"_emailPass": "Email Password"
10101015
},
10111016
"CATEGORIES":{
10121017
"_categories": "Categories",

src/assets/i18n/es.json

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1006,7 +1006,12 @@
10061006
"_productId": "Product ID",
10071007
"_vc": "Verifiable Credential",
10081008
"_add": "Add",
1009-
"_revenue": "Revenue sharing"
1009+
"_revenue": "Revenue sharing",
1010+
"_email": "Email",
1011+
"_smtpServer": "SMTP Server",
1012+
"_smtpPort": "SMTP Port",
1013+
"_emailUser": "Email User",
1014+
"_emailPass": "Email Password"
10101015
},
10111016
"CATEGORIES":{
10121017
"_categories": "Categories",

0 commit comments

Comments
 (0)