From fe4179160897e49c9941a12098c23f0e945deeff Mon Sep 17 00:00:00 2001 From: Nguyen Ha Khue Date: Mon, 24 Apr 2023 17:01:16 +0700 Subject: [PATCH] Deployment 24.4 - Edit Category - Verify oobCode before reset pass - Change invoice -> account, delete account in User --- src/app/app.module.ts | 5 +- .../account-routing.module.ts} | 10 +- .../components/account/account.component.html | 105 +++++++++++++++++ .../account.component.scss} | 0 .../components/account/account.component.ts | 110 ++++++++++++++++++ .../account.module.ts} | 11 +- .../reset-password.component.ts | 22 ++-- .../auth/send-email/send-email.component.html | 13 ++- .../auth/send-email/send-email.component.ts | 18 ++- .../components/invoice/invoice.component.html | 57 --------- .../components/invoice/invoice.component.ts | 45 ------- .../category-detail.component.html | 5 +- .../category-detail.component.ts | 4 +- .../physical/category/category.component.html | 36 ++---- .../physical/category/category.component.ts | 35 ++++-- .../edit-product/edit-product.component.html | 2 +- .../products/products-routing.module.ts | 4 +- src/app/components/users/users.module.ts | 1 - src/app/shared/routes/content-routes.ts | 4 +- src/app/shared/service/auth.service.ts | 4 + src/app/shared/service/nav.service.ts | 11 +- src/environments/environment.ts | 1 + 22 files changed, 328 insertions(+), 175 deletions(-) rename src/app/components/{invoice/invoice-routing.module.ts => account/account-routing.module.ts} (53%) create mode 100644 src/app/components/account/account.component.html rename src/app/components/{invoice/invoice.component.scss => account/account.component.scss} (100%) create mode 100644 src/app/components/account/account.component.ts rename src/app/components/{invoice/invoice.module.ts => account/account.module.ts} (51%) delete mode 100644 src/app/components/invoice/invoice.component.html delete mode 100644 src/app/components/invoice/invoice.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index ce9754d..0e949ad 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -17,7 +17,7 @@ import { MenusModule } from './components/menus/menus.module'; import { VendorsModule } from './components/vendors/vendors.module'; import { UsersModule } from './components/users/users.module'; import { LocalizationModule } from './components/localization/localization.module'; -import { InvoiceModule } from './components/invoice/invoice.module'; +import { AccountModule } from './components/account/account.module'; import { SettingModule } from './components/setting/setting.module'; import { ReportsModule } from './components/reports/reports.module'; import { AuthModule } from './components/auth/auth.module'; @@ -28,7 +28,6 @@ import { AngularFireModule } from "@angular/fire/compat"; import { environment } from "../environments/environment"; import { FirebaseService } from "./shared/service/firebase.service"; import { AuthInterceptor } from "./shared/inceptor/auth-interceptor"; -import { NgImageSliderModule } from 'ng-image-slider' @NgModule({ declarations: [ @@ -39,7 +38,7 @@ import { NgImageSliderModule } from 'ng-image-slider' BrowserModule.withServerTransition({ appId: 'serverApp' }), AppRoutingModule, DashboardModule, - InvoiceModule, + AccountModule, SettingModule, ReportsModule, AuthModule, diff --git a/src/app/components/invoice/invoice-routing.module.ts b/src/app/components/account/account-routing.module.ts similarity index 53% rename from src/app/components/invoice/invoice-routing.module.ts rename to src/app/components/account/account-routing.module.ts index 826ae72..7830a79 100644 --- a/src/app/components/invoice/invoice-routing.module.ts +++ b/src/app/components/account/account-routing.module.ts @@ -1,15 +1,17 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; -import { InvoiceComponent } from './invoice.component'; +import { AccountComponent } from './account.component'; +import { AdminGuard } from 'src/app/shared/guard/admin-guard.service'; const routes: Routes = [ { path: '', - component: InvoiceComponent, + canActivate: [AdminGuard], + component: AccountComponent, data: { - title: "Invoice", - breadcrumb: "Invoice" + title: "Tài khoản", + breadcrumb: "Danh sách" } }, ]; diff --git a/src/app/components/account/account.component.html b/src/app/components/account/account.component.html new file mode 100644 index 0000000..c65e0c9 --- /dev/null +++ b/src/app/components/account/account.component.html @@ -0,0 +1,105 @@ + +
+
+ +
+
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
#Ảnh đại diệnHọ và tênEmailSố điện thoạiVai trò
{{i + 1}} + + + {{user.fullName}} + {{user.email}}{{user.phoneNumber}} + Quản trị viên + Người dùng + Người bán hàng + Shipper + +   + +
+ + +
+       + + +       + + +
+
+ +
+
+ +
+
+

Không tìm thấy tài khoản

+
+
+
+
+
+
+ + + +
+
Bạn chắc chắn muốn xoá người dùng này ?
+    + +
+ + + +
+
Xoá người dùng thành công
+ +
+ \ No newline at end of file diff --git a/src/app/components/invoice/invoice.component.scss b/src/app/components/account/account.component.scss similarity index 100% rename from src/app/components/invoice/invoice.component.scss rename to src/app/components/account/account.component.scss diff --git a/src/app/components/account/account.component.ts b/src/app/components/account/account.component.ts new file mode 100644 index 0000000..7a52fb8 --- /dev/null +++ b/src/app/components/account/account.component.ts @@ -0,0 +1,110 @@ +import { DecimalPipe } from '@angular/common'; +import { Component, OnInit, TemplateRef } from '@angular/core'; +import { Observable } from 'rxjs'; +import { TableService } from 'src/app/shared/service/table.service'; +import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal'; +import { User } from 'src/app/shared/tables/user'; +import { UserService } from 'src/app/shared/service/user.service'; +import { FormBuilder } from '@angular/forms'; +import { FirebaseService } from 'src/app/shared/service/firebase.service'; + +@Component({ + selector: 'app-invoice', + templateUrl: './account.component.html', + styleUrls: ['./account.component.scss'], + providers: [TableService, DecimalPipe] +}) +export class AccountComponent implements OnInit { + users: User[] = []; + userDel: User + + searchName: string = ''; + + //Pagination Properties + role: string = 'ALL' + thePageNumber = 1; + thePageSize = 10; + sortBy = 'id'; + sortDir = 'asc'; + theTotalElements = 0; + + isSearch: boolean = false; + + constructor( + private userService: UserService, + private formBuilder: FormBuilder, + private firebaseService: FirebaseService, + private modalService: BsModalService) { + + } + + ngOnInit() { + this.listAllUsers() + } + + listAllUsers() { + if (this.role != 'ALL') { + this.userService.getAllUsersByRole(this.role, this.thePageNumber - 1, this.thePageSize, this.sortBy, this.sortDir).subscribe(this.processResult()); + } + else { + this.userService.getAllUsers(this.thePageNumber - 1, this.thePageSize, this.sortBy, this.sortDir).subscribe(this.processResult()); + } + + } + + searchUser() { + if (this.searchName.trim() !== '') { + if (this.role != 'ALL') { + this.userService.getAllUsersByRoleAndEmailOrPhoneNumber(this.searchName, this.role, this.thePageNumber - 1, this.thePageSize, this.sortBy, this.sortDir).subscribe(this.processResult()); + } + else { + this.userService.getAllUsersByEmailOrPhoneNumber(this.searchName, this.thePageNumber - 1, this.thePageSize, this.sortBy, this.sortDir).subscribe(this.processResult()); + } + } + else { + this.listAllUsers(); + } + } + + processResult() { + return (data: any) => { + this.users = data.users; + this.thePageNumber = data.page.pageNo + 1; + this.thePageSize = data.page.pageSize; + this.theTotalElements = data.page.totalElements; + } + } + + onSort(sortItem: string) { + if (this.sortDir == 'asc') { + this.sortBy = sortItem; + this.sortDir = 'desc'; + } + else { + this.sortDir = 'asc' + } + this.listAllUsers(); + } + + //Modal + layer1: BsModalRef; + + openModal(user: User, template: TemplateRef) { + this.userDel = user; + this.layer1 = this.modalService.show(template, { class: 'modal-sm' }); + } + + confirmDeleted(success: TemplateRef) { + this.userService.deleteUserById(this.userDel.id).subscribe(); + this.firebaseService.deleteUserByEmail(this.userDel.email).subscribe(() => { + this.listAllUsers(); + this.layer1.hide(); + this.layer1 = this.modalService.show(success, { class: 'modal-sm' }); + }); + + } + + closeLayer1() { + this.layer1.hide(); + } +} diff --git a/src/app/components/invoice/invoice.module.ts b/src/app/components/account/account.module.ts similarity index 51% rename from src/app/components/invoice/invoice.module.ts rename to src/app/components/account/account.module.ts index 94a0b12..0a34790 100644 --- a/src/app/components/invoice/invoice.module.ts +++ b/src/app/components/account/account.module.ts @@ -1,18 +1,21 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { InvoiceRoutingModule } from './invoice-routing.module'; -import { InvoiceComponent } from './invoice.component'; +import { InvoiceRoutingModule } from './account-routing.module'; +import { AccountComponent } from './account.component'; import { SharedModule } from 'src/app/shared/shared.module'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; @NgModule({ - declarations: [InvoiceComponent], + declarations: [AccountComponent], imports: [ CommonModule, InvoiceRoutingModule, + FormsModule, SharedModule, + ReactiveFormsModule, NgbModule ] }) -export class InvoiceModule { } +export class AccountModule { } diff --git a/src/app/components/auth/reset-password/reset-password.component.ts b/src/app/components/auth/reset-password/reset-password.component.ts index e69a88b..bd108e0 100644 --- a/src/app/components/auth/reset-password/reset-password.component.ts +++ b/src/app/components/auth/reset-password/reset-password.component.ts @@ -4,6 +4,8 @@ import { FirebaseService } from "../../../shared/service/firebase.service"; import { ActivatedRoute, Router } from '@angular/router'; import { Validation } from 'src/app/constants/Validation'; import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal'; +import { AngularFireAuth } from '@angular/fire/compat/auth'; +import { error } from 'console'; @Component({ selector: "app-reset-password", @@ -27,6 +29,7 @@ export class ResetPasswordComponent { private formBuilder: UntypedFormBuilder, private activatedRoute: ActivatedRoute, private firebaseService: FirebaseService, + private firebaseAuth: AngularFireAuth, private modalService: BsModalService, private router: Router ) { @@ -57,6 +60,13 @@ export class ResetPasswordComponent { //Get Token from link this.oobCode = this.activatedRoute.snapshot.queryParamMap.get('oobCode'); this.action = this.activatedRoute.snapshot.queryParamMap.get('mode'); + this.resetPasswordForm = this.formBuilder.group({ + password: new FormControl("", [Validators.required, Validators.pattern(Validation.Regex.Password)]), + confirmPassword: new FormControl("", [Validators.required, Validators.pattern(Validation.Regex.Password)]), + }, + { + validator: this.ConfirmedValidator("password", "confirmPassword"), + }) if (this.action == 'verifyEmail') { this.firebaseService.confirmVerifyEmail(this.oobCode) @@ -64,13 +74,11 @@ export class ResetPasswordComponent { } if (this.oobCode) { - this.resetPasswordForm = this.formBuilder.group({ - password: new FormControl("", [Validators.required, Validators.pattern(Validation.Regex.Password)]), - confirmPassword: new FormControl("", [Validators.required, Validators.pattern(Validation.Regex.Password)]), - }, - { - validator: this.ConfirmedValidator("password", "confirmPassword"), - }) + this.firebaseAuth.checkActionCode(this.oobCode).then((info) => { + + }).catch(error => { + this.router.navigate(['/auth/forbidden']); + }) } else { this.router.navigate(['/auth/forbidden']); diff --git a/src/app/components/auth/send-email/send-email.component.html b/src/app/components/auth/send-email/send-email.component.html index c2181b7..ebb9427 100644 --- a/src/app/components/auth/send-email/send-email.component.html +++ b/src/app/components/auth/send-email/send-email.component.html @@ -176,8 +176,15 @@

Đã gửi đường dẫn thay đổi mật khẩu đến email của bạn

-

Vui lòng kiểm tra hòm thư

-       - +

Vui lòng kiểm tra hòm thư của bạn

+ + +
+ + + +
+

Tài khoản này không tồn tại trong hệ thống. Vui lòng kiểm tra lại địa chỉ email

+
\ No newline at end of file diff --git a/src/app/components/auth/send-email/send-email.component.ts b/src/app/components/auth/send-email/send-email.component.ts index 18e32fb..59871d8 100644 --- a/src/app/components/auth/send-email/send-email.component.ts +++ b/src/app/components/auth/send-email/send-email.component.ts @@ -4,6 +4,7 @@ import { FirebaseService } from "../../../shared/service/firebase.service"; import { Router } from "@angular/router"; import { Validation } from "src/app/constants/Validation"; import { BsModalRef, BsModalService } from "ngx-bootstrap/modal"; +import { AuthService } from "src/app/shared/service/auth.service"; @Component({ selector: "app-send-email", @@ -19,10 +20,12 @@ export class SendEmailComponent { public active = 1; @ViewChild('sendMailCompleted') sendMailCompleted: TemplateRef + @ViewChild('emailNotExisted') emailNotExisted: TemplateRef constructor( private formBuilder: UntypedFormBuilder, private firebaseService: FirebaseService, + private authService: AuthService, private modalService: BsModalService, private router: Router ) { @@ -62,8 +65,19 @@ export class SendEmailComponent { this.sendEmailForm.markAllAsTouched(); return; } - this.firebaseService.resetPassword(this.email.value); - this.layer1 = this.modalService.show(this.sendMailCompleted, { class: "modal-sm" }); + + this.authService.checkEmailInDB(this.email.value).subscribe({ + next: (response) => { + if (response.isTrue == true) { + this.firebaseService.resetPassword(this.email.value); + this.layer1 = this.modalService.show(this.sendMailCompleted, { class: "modal-sm" }); + } + else { + this.layer1 = this.modalService.show(this.emailNotExisted, { class: "modal-sm" }) + } + } + }) + } gmail() { diff --git a/src/app/components/invoice/invoice.component.html b/src/app/components/invoice/invoice.component.html deleted file mode 100644 index e7272fe..0000000 --- a/src/app/components/invoice/invoice.component.html +++ /dev/null @@ -1,57 +0,0 @@ - -
-
-
-
-
-
Invoice List
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - -
NoInvoiceDateShippingAmountTaxTotalActions
- {{item.no}} - - {{item.invoice}} - {{item.date}}{{item.shipping}}{{item.amount}}{{item.tax}}{{item.total}} -   - -
-
- - -
-
-
-
-
-
-
-
- \ No newline at end of file diff --git a/src/app/components/invoice/invoice.component.ts b/src/app/components/invoice/invoice.component.ts deleted file mode 100644 index 163cd27..0000000 --- a/src/app/components/invoice/invoice.component.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { DecimalPipe } from '@angular/common'; -import { Component, OnInit, QueryList, ViewChildren } from '@angular/core'; -import { Observable } from 'rxjs'; -import { NgbdSortableHeader, SortEvent } from 'src/app/shared/directives/NgbdSortableHeader'; -import { TableService } from 'src/app/shared/service/table.service'; -import { InvoiceDB, INVOICEDB } from '../../shared/tables/invoice'; - -@Component({ - selector: 'app-invoice', - templateUrl: './invoice.component.html', - styleUrls: ['./invoice.component.scss'], - providers: [TableService, DecimalPipe] -}) -export class InvoiceComponent implements OnInit { - - public tableItem$: Observable; - public searchText; - total$: Observable; - - constructor(public service: TableService) { - this.tableItem$ = service.tableItem$; - this.total$ = service.total$; - this.service.setUserData(INVOICEDB) - } - - @ViewChildren(NgbdSortableHeader) headers: QueryList; - - onSort({ column, direction }: SortEvent) { - // resetting other headers - this.headers.forEach((header) => { - if (header.sortable !== column) { - header.direction = ''; - } - }); - - this.service.sortColumn = column; - this.service.sortDirection = direction; - - } - - - ngOnInit() { - } - -} diff --git a/src/app/components/products/physical/category-detail/category-detail.component.html b/src/app/components/products/physical/category-detail/category-detail.component.html index 78a323f..0356564 100644 --- a/src/app/components/products/physical/category-detail/category-detail.component.html +++ b/src/app/components/products/physical/category-detail/category-detail.component.html @@ -3,7 +3,7 @@
-
Product Lists
+
Danh sách sản phẩm
@@ -36,11 +36,12 @@ -
+
+       +
- +
diff --git a/src/app/components/products/physical/category/category.component.ts b/src/app/components/products/physical/category/category.component.ts index f1e9a61..73aee41 100644 --- a/src/app/components/products/physical/category/category.component.ts +++ b/src/app/components/products/physical/category/category.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, TemplateRef } from '@angular/core'; +import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core'; import { DecimalPipe } from '@angular/common'; import { TableService } from 'src/app/shared/service/table.service'; import { CategoryService } from 'src/app/shared/service/category.service'; @@ -7,7 +7,6 @@ import { FormBuilder, FormGroup } from '@angular/forms'; import { Category } from 'src/app/shared/tables/category'; import { AngularFireStorage } from '@angular/fire/compat/storage'; import { finalize, Observable } from 'rxjs'; -import { resolve } from 'path'; import { Router } from '@angular/router'; @Component({ @@ -24,11 +23,15 @@ export class CategoryComponent implements OnInit { categories: Category[]; categoryId: number; + isChanged: boolean = false; + //File imageFile: File; imageUrl; downloadURL: Observable; + @ViewChild('productCategoryTemplate') editCategoryModal: TemplateRef + constructor( private categoryService: CategoryService, private modalService: BsModalService, @@ -36,8 +39,7 @@ export class CategoryComponent implements OnInit { private storage: AngularFireStorage, private router: Router) { this.categoryForm = this.formBuilder.group({ - categoryName: [''], - categoryImage: [''] + categoryName: [''] }) } @@ -71,19 +73,30 @@ export class CategoryComponent implements OnInit { this.modalRef.hide(); } - editCategory(template: TemplateRef, category: Category) { + editCategory(category: Category) { this.categoryId = category.id + this.imageUrl = category.imageUrl; this.categoryForm.patchValue({ - categoryName: category.name, - categoryImage: category.imageUrl + categoryName: category?.name }) - this.modalRef = this.modalService.show(template, { class: 'modal-md' }); + this.modalRef = this.modalService.show(this.editCategoryModal, { class: 'modal-md' }); } onSaveCategory(event, template: TemplateRef) { - this.uploadImage().then(() => { + if (this.isChanged == true) { + this.uploadImage().then(() => { + const category = new Category() + category.name = this.categoryName + category.imageUrl = this.imageUrl; + + this.categoryService.editCategoryById(this.categoryId, category).subscribe() + this.modalRef.hide(); + this.modalRef = this.modalService.show(template, { class: 'modal-md' }); + }) + } + else { const category = new Category() category.name = this.categoryName category.imageUrl = this.imageUrl; @@ -91,7 +104,8 @@ export class CategoryComponent implements OnInit { this.categoryService.editCategoryById(this.categoryId, category).subscribe() this.modalRef.hide(); this.modalRef = this.modalService.show(template, { class: 'modal-md' }); - }) + } + } success(): void { @@ -101,6 +115,7 @@ export class CategoryComponent implements OnInit { } onFileSelected(event) { + this.isChanged = true; this.imageFile = event.target.files[0]; } diff --git a/src/app/components/products/physical/edit-product/edit-product.component.html b/src/app/components/products/physical/edit-product/edit-product.component.html index cc438b0..385e50f 100644 --- a/src/app/components/products/physical/edit-product/edit-product.component.html +++ b/src/app/components/products/physical/edit-product/edit-product.component.html @@ -220,7 +220,7 @@
-
diff --git a/src/app/components/products/products-routing.module.ts b/src/app/components/products/products-routing.module.ts index ef68033..cdb85d3 100644 --- a/src/app/components/products/products-routing.module.ts +++ b/src/app/components/products/products-routing.module.ts @@ -39,8 +39,8 @@ const routes: Routes = [ canActivate: [AdminGuard], component: CategoryDetailComponent, data: { - title: "Danh sách sản phẩm", - breadcrumb: "Thể loại" + title: "Chi tiết thể loại", + breadcrumb: "Chi tiết" } }, { diff --git a/src/app/components/users/users.module.ts b/src/app/components/users/users.module.ts index a43508e..c33c2df 100644 --- a/src/app/components/users/users.module.ts +++ b/src/app/components/users/users.module.ts @@ -22,7 +22,6 @@ import { ListAccountComponent } from './list-account/list-account.component'; SharedModule, FormsModule, ReactiveFormsModule, - ReactiveFormsModule, UsersRoutingModule ] }) diff --git a/src/app/shared/routes/content-routes.ts b/src/app/shared/routes/content-routes.ts index 92c51da..9d3fccd 100644 --- a/src/app/shared/routes/content-routes.ts +++ b/src/app/shared/routes/content-routes.ts @@ -84,8 +84,8 @@ export const content: Routes = [ } }, { - path: 'invoice', - loadChildren: () => import('../../components/invoice/invoice.module').then(m => m.InvoiceModule), + path: 'account', + loadChildren: () => import('../../components/account/account.module').then(m => m.AccountModule), data: { breadcrumb: "Hoá đơn" } diff --git a/src/app/shared/service/auth.service.ts b/src/app/shared/service/auth.service.ts index 9c0e863..0298392 100644 --- a/src/app/shared/service/auth.service.ts +++ b/src/app/shared/service/auth.service.ts @@ -35,4 +35,8 @@ export class AuthService { checkEmailOrPhoneNumberExist(userDto: User) { return this.httpClient.post(this.baseUrl + `/check`, userDto); } + + checkEmailInDB(email: string) { + return this.httpClient.get(this.baseUrl + `/check-email?email=${email}`) + } } diff --git a/src/app/shared/service/nav.service.ts b/src/app/shared/service/nav.service.ts index ea72051..19f7c4f 100644 --- a/src/app/shared/service/nav.service.ts +++ b/src/app/shared/service/nav.service.ts @@ -112,11 +112,13 @@ export class NavService { // { path: '/menus/create-menu', title: 'Create Menu', type: 'link' }, // ] // }, + { + title: 'Tài khoản', path: '/account', icon: 'user', type: 'link', active: false + }, { title: 'Người dùng', icon: 'user-plus', type: 'sub', active: false, children: [ { path: '/users/list', title: 'Danh sách', type: 'link' }, - { path: '/users/create', title: 'Tạo người dùng', type: 'link' }, - { path: '/users/accounts/list', title: 'Tài khoản', type: 'link' }, + { path: '/users/create', title: 'Tạo người dùng', type: 'link' } ] }, { @@ -136,7 +138,7 @@ export class NavService { { path: '/utilities/list-address', title: 'Địa chỉ', type: 'link' }, { path: '/utilities/list-slider', title: 'Slider', type: 'link' } ] - } + }, // { // title: 'Localization', icon: 'chrome', type: 'sub', children: [ // {path: '/localization/translations', title: 'Translations', type: 'link'}, @@ -148,9 +150,6 @@ export class NavService { // title: 'Báo cáo', path: '/reports', icon: 'bar-chart', type: 'link', active: false // }, // { - // title: 'Hoá đơn', path: '/invoice', icon: 'archive', type: 'link', active: false - // }, - // { // title: 'Cài đặt', icon: 'settings', type: 'sub', children: [ // { path: '/settings/profile', title: 'Trang cá nhân', type: 'link' }, // ] diff --git a/src/environments/environment.ts b/src/environments/environment.ts index 7f616ea..f0a7c9e 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -4,6 +4,7 @@ export const environment = { production: false, + // foodOrderingBaseApiUrl: 'http://localhost:8080/api', foodOrderingBaseApiUrl: 'https://foodify-backend-production.up.railway.app/api', firebaseConfig: { apiKey: 'AIzaSyAZFFIuXkbgdp2F-Em4CK2z8kVJ2L4p_UU',