From dded258864b9f7729e18584021afb18673e51b3f Mon Sep 17 00:00:00 2001 From: Pavlo Tkach <3469726+ptkach@users.noreply.github.com> Date: Thu, 21 Sep 2023 13:59:40 -0400 Subject: [PATCH] Add resources widget front-end (#2151) --- console-webapp/src/app/app-routing.module.ts | 21 ++++--- console-webapp/src/app/app.component.ts | 2 + console-webapp/src/app/app.module.ts | 2 + .../widgets/contact-widget.component.html | 4 +- .../widgets/resources-widget.component.html | 7 ++- .../widgets/resources-widget.component.ts | 3 +- .../widgets/settings-widget.component.html | 21 ++++++- .../home/widgets/settings-widget.component.ts | 23 +++++++- .../src/app/registrar/registrar.service.ts | 8 ++- .../registrar/registrarsTable.component.ts | 1 + .../app/settings/contact/contact.component.ts | 2 + .../settings/security/security.component.ts | 2 + .../src/app/settings/settings.component.ts | 4 +- .../src/app/settings/users/users.component.ts | 4 +- .../src/app/settings/whois/whois.component.ts | 4 +- .../app/shared/services/backend.service.ts | 7 +++ .../app/shared/services/userData.service.ts | 56 +++++++++++++++++++ console-webapp/src/styles.scss | 9 +-- 18 files changed, 151 insertions(+), 29 deletions(-) create mode 100644 console-webapp/src/app/shared/services/userData.service.ts diff --git a/console-webapp/src/app/app-routing.module.ts b/console-webapp/src/app/app-routing.module.ts index 647cf6dee..e06425e91 100644 --- a/console-webapp/src/app/app-routing.module.ts +++ b/console-webapp/src/app/app-routing.module.ts @@ -24,6 +24,10 @@ import SettingsSecurityComponent from './settings/security/security.component'; import { RegistrarGuard } from './registrar/registrar.guard'; import { RegistrarComponent } from './registrar/registrarsTable.component'; import { EmptyRegistrar } from './registrar/emptyRegistrar.component'; +import ContactComponent from './settings/contact/contact.component'; +import WhoisComponent from './settings/whois/whois.component'; +import SecurityComponent from './settings/security/security.component'; +import UsersComponent from './settings/users/users.component'; const routes: Routes = [ { path: '', redirectTo: '/home', pathMatch: 'full' }, @@ -32,7 +36,7 @@ const routes: Routes = [ { path: 'home', component: HomeComponent, canActivate: [RegistrarGuard] }, { path: 'tlds', component: TldsComponent, canActivate: [RegistrarGuard] }, { - path: 'settings', + path: SettingsComponent.PATH, component: SettingsComponent, children: [ { @@ -41,32 +45,27 @@ const routes: Routes = [ pathMatch: 'full', }, { - path: 'contact', + path: ContactComponent.PATH, component: SettingsContactComponent, canActivate: [RegistrarGuard], }, { - path: 'whois', + path: WhoisComponent.PATH, component: SettingsWhoisComponent, canActivate: [RegistrarGuard], }, { - path: 'security', + path: SecurityComponent.PATH, component: SettingsSecurityComponent, canActivate: [RegistrarGuard], }, { - path: 'epp-password', - component: SettingsSecurityComponent, - canActivate: [RegistrarGuard], - }, - { - path: 'users', + path: UsersComponent.PATH, component: SettingsUsersComponent, canActivate: [RegistrarGuard], }, { - path: 'registrars', + path: RegistrarComponent.PATH, component: RegistrarComponent, }, ], diff --git a/console-webapp/src/app/app.component.ts b/console-webapp/src/app/app.component.ts index 9fdaf0173..f4cc2884b 100644 --- a/console-webapp/src/app/app.component.ts +++ b/console-webapp/src/app/app.component.ts @@ -14,6 +14,7 @@ import { Component } from '@angular/core'; import { RegistrarService } from './registrar/registrar.service'; +import { UserDataService } from './shared/services/userData.service'; import { GlobalLoaderService } from './shared/services/globalLoader.service'; @Component({ @@ -25,6 +26,7 @@ export class AppComponent { renderRouter: boolean = true; constructor( protected registrarService: RegistrarService, + protected userDataService: UserDataService, protected globalLoader: GlobalLoaderService ) { registrarService.activeRegistrarIdChange.subscribe(() => { diff --git a/console-webapp/src/app/app.module.ts b/console-webapp/src/app/app.module.ts index 0029a9126..b58960fcc 100644 --- a/console-webapp/src/app/app.module.ts +++ b/console-webapp/src/app/app.module.ts @@ -46,6 +46,7 @@ import { EppWidgetComponent } from './home/widgets/epp-widget.component'; import { BillingWidgetComponent } from './home/widgets/billing-widget.component'; import { DomainsWidgetComponent } from './home/widgets/domains-widget.component'; import { SettingsWidgetComponent } from './home/widgets/settings-widget.component'; +import { UserDataService } from './shared/services/userData.service'; @NgModule({ declarations: [ @@ -81,6 +82,7 @@ import { SettingsWidgetComponent } from './home/widgets/settings-widget.componen BackendService, GlobalLoaderService, RegistrarGuard, + UserDataService, { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { diff --git a/console-webapp/src/app/home/widgets/contact-widget.component.html b/console-webapp/src/app/home/widgets/contact-widget.component.html index 5003d7c89..6511c6069 100644 --- a/console-webapp/src/app/home/widgets/contact-widget.component.html +++ b/console-webapp/src/app/home/widgets/contact-widget.component.html @@ -13,13 +13,13 @@ Give us a Call

- Call Google Registry support at +1 (404) 978 8419 + Call Google Registry support at +1 (404) 978 8419

- Email Google Registry at support@google.com + Email Google Registry at support@google.com

diff --git a/console-webapp/src/app/home/widgets/resources-widget.component.html b/console-webapp/src/app/home/widgets/resources-widget.component.html index 65cc39777..e0cc78142 100644 --- a/console-webapp/src/app/home/widgets/resources-widget.component.html +++ b/console-webapp/src/app/home/widgets/resources-widget.component.html @@ -1,13 +1,16 @@
-
+ menu_book

Resources

Use Google Drive to view onboarding FAQs, and technical documentation.

-
+
diff --git a/console-webapp/src/app/home/widgets/resources-widget.component.ts b/console-webapp/src/app/home/widgets/resources-widget.component.ts index acebf562a..8e7f12161 100644 --- a/console-webapp/src/app/home/widgets/resources-widget.component.ts +++ b/console-webapp/src/app/home/widgets/resources-widget.component.ts @@ -13,11 +13,12 @@ // limitations under the License. import { Component } from '@angular/core'; +import { UserDataService } from 'src/app/shared/services/userData.service'; @Component({ selector: '[app-resources-widget]', templateUrl: './resources-widget.component.html', }) export class ResourcesWidgetComponent { - constructor() {} + constructor(public userDataService: UserDataService) {} } diff --git a/console-webapp/src/app/home/widgets/settings-widget.component.html b/console-webapp/src/app/home/widgets/settings-widget.component.html index 7ed630b31..d75f01104 100644 --- a/console-webapp/src/app/home/widgets/settings-widget.component.html +++ b/console-webapp/src/app/home/widgets/settings-widget.component.html @@ -10,11 +10,21 @@
-

Manage Primary, Technical, etc contacts.

-

@@ -28,7 +38,12 @@ User Management

Create and manage console user accounts

-

Create and manage registrar accounts

diff --git a/console-webapp/src/app/home/widgets/settings-widget.component.ts b/console-webapp/src/app/home/widgets/settings-widget.component.ts index f87bd98e8..a0591428b 100644 --- a/console-webapp/src/app/home/widgets/settings-widget.component.ts +++ b/console-webapp/src/app/home/widgets/settings-widget.component.ts @@ -13,11 +13,32 @@ // limitations under the License. import { Component } from '@angular/core'; +import { Router } from '@angular/router'; +import { RegistrarComponent } from 'src/app/registrar/registrarsTable.component'; +import ContactComponent from 'src/app/settings/contact/contact.component'; +import SecurityComponent from 'src/app/settings/security/security.component'; +import { SettingsComponent } from 'src/app/settings/settings.component'; @Component({ selector: '[app-settings-widget]', templateUrl: './settings-widget.component.html', }) export class SettingsWidgetComponent { - constructor() {} + constructor(private router: Router) {} + + openRegistrarsPage() { + this.navigate(RegistrarComponent.PATH); + } + + openSecurityPage() { + this.navigate(SecurityComponent.PATH); + } + + openContactsPage() { + this.navigate(ContactComponent.PATH); + } + + private navigate(route: string) { + this.router.navigate([SettingsComponent.PATH, route]); + } } diff --git a/console-webapp/src/app/registrar/registrar.service.ts b/console-webapp/src/app/registrar/registrar.service.ts index 17f72314c..d24811099 100644 --- a/console-webapp/src/app/registrar/registrar.service.ts +++ b/console-webapp/src/app/registrar/registrar.service.ts @@ -19,6 +19,7 @@ import { GlobalLoader, GlobalLoaderService, } from '../shared/services/globalLoader.service'; +import { MatSnackBar } from '@angular/material/snack-bar'; interface Address { street?: string[]; @@ -52,7 +53,8 @@ export class RegistrarService implements GlobalLoader { constructor( private backend: BackendService, - private globalLoader: GlobalLoaderService + private globalLoader: GlobalLoaderService, + private _snackBar: MatSnackBar ) { this.loadRegistrars().subscribe((r) => { this.globalLoader.stopGlobalLoader(this); @@ -82,6 +84,8 @@ export class RegistrarService implements GlobalLoader { } loadingTimeout() { - // TODO: Decide what to do when timeout happens + this._snackBar.open('Timeout loading registrars', undefined, { + duration: 1500, + }); } } diff --git a/console-webapp/src/app/registrar/registrarsTable.component.ts b/console-webapp/src/app/registrar/registrarsTable.component.ts index 86cb3731b..fe5a945db 100644 --- a/console-webapp/src/app/registrar/registrarsTable.component.ts +++ b/console-webapp/src/app/registrar/registrarsTable.component.ts @@ -21,6 +21,7 @@ import { Registrar, RegistrarService } from './registrar.service'; styleUrls: ['./registrarsTable.component.scss'], }) export class RegistrarComponent { + public static PATH = 'registrars'; columns = [ { columnDef: 'registrarId', diff --git a/console-webapp/src/app/settings/contact/contact.component.ts b/console-webapp/src/app/settings/contact/contact.component.ts index f1e8bf704..938fe8743 100644 --- a/console-webapp/src/app/settings/contact/contact.component.ts +++ b/console-webapp/src/app/settings/contact/contact.component.ts @@ -143,6 +143,8 @@ export class ContactDetailsDialogComponent { styleUrls: ['./contact.component.scss'], }) export default class ContactComponent { + public static PATH = 'contact'; + loading: boolean = false; constructor( private dialog: MatDialog, diff --git a/console-webapp/src/app/settings/security/security.component.ts b/console-webapp/src/app/settings/security/security.component.ts index 51eeb019d..c612603d6 100644 --- a/console-webapp/src/app/settings/security/security.component.ts +++ b/console-webapp/src/app/settings/security/security.component.ts @@ -29,6 +29,8 @@ import { RegistrarService } from 'src/app/registrar/registrar.service'; providers: [SecurityService], }) export default class SecurityComponent { + public static PATH = 'security'; + loading: boolean = false; inEdit: boolean = false; dataSource: SecuritySettings = {}; diff --git a/console-webapp/src/app/settings/settings.component.ts b/console-webapp/src/app/settings/settings.component.ts index 2ac660a67..5e7cdbd67 100644 --- a/console-webapp/src/app/settings/settings.component.ts +++ b/console-webapp/src/app/settings/settings.component.ts @@ -20,4 +20,6 @@ import { Component, ViewEncapsulation } from '@angular/core'; styleUrls: ['./settings.component.scss'], encapsulation: ViewEncapsulation.None, }) -export class SettingsComponent {} +export class SettingsComponent { + public static PATH = 'settings'; +} diff --git a/console-webapp/src/app/settings/users/users.component.ts b/console-webapp/src/app/settings/users/users.component.ts index 4495d6281..5828ce4ee 100644 --- a/console-webapp/src/app/settings/users/users.component.ts +++ b/console-webapp/src/app/settings/users/users.component.ts @@ -19,4 +19,6 @@ import { Component } from '@angular/core'; templateUrl: './users.component.html', styleUrls: ['./users.component.scss'], }) -export default class UsersComponent {} +export default class UsersComponent { + public static PATH = 'users'; +} diff --git a/console-webapp/src/app/settings/whois/whois.component.ts b/console-webapp/src/app/settings/whois/whois.component.ts index 3b0a10533..c83108526 100644 --- a/console-webapp/src/app/settings/whois/whois.component.ts +++ b/console-webapp/src/app/settings/whois/whois.component.ts @@ -19,4 +19,6 @@ import { Component } from '@angular/core'; templateUrl: './whois.component.html', styleUrls: ['./whois.component.scss'], }) -export default class WhoisComponent {} +export default class WhoisComponent { + public static PATH = 'whois'; +} diff --git a/console-webapp/src/app/shared/services/backend.service.ts b/console-webapp/src/app/shared/services/backend.service.ts index a1e3132d1..f352c4fcb 100644 --- a/console-webapp/src/app/shared/services/backend.service.ts +++ b/console-webapp/src/app/shared/services/backend.service.ts @@ -19,6 +19,7 @@ import { SecuritySettingsBackendModel } from 'src/app/settings/security/security import { Contact } from '../../settings/contact/contact.service'; import { Registrar } from '../../registrar/registrar.service'; +import { UserData } from './userData.service'; @Injectable() export class BackendService { @@ -90,4 +91,10 @@ export class BackendService { securitySettings ); } + + getUserData(): Observable { + return this.http + .get(`/console-api/userdata`) + .pipe(catchError((err) => this.errorCatcher(err))); + } } diff --git a/console-webapp/src/app/shared/services/userData.service.ts b/console-webapp/src/app/shared/services/userData.service.ts new file mode 100644 index 000000000..b1cd107fe --- /dev/null +++ b/console-webapp/src/app/shared/services/userData.service.ts @@ -0,0 +1,56 @@ +// Copyright 2023 The Nomulus Authors. All Rights Reserved. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import { Injectable } from '@angular/core'; +import { Observable, tap } from 'rxjs'; +import { BackendService } from './backend.service'; +import { MatSnackBar } from '@angular/material/snack-bar'; +import { GlobalLoader, GlobalLoaderService } from './globalLoader.service'; + +export interface UserData { + isAdmin: boolean; + globalRole: string; + technicalDocsUrl: string; +} + +@Injectable({ + providedIn: 'root', +}) +export class UserDataService implements GlobalLoader { + public userData?: UserData; + constructor( + private backend: BackendService, + protected globalLoader: GlobalLoaderService, + private _snackBar: MatSnackBar + ) { + this.getUserData().subscribe(() => { + this.globalLoader.stopGlobalLoader(this); + }); + this.globalLoader.startGlobalLoader(this); + } + + getUserData(): Observable { + return this.backend.getUserData().pipe( + tap((userData: UserData) => { + this.userData = userData; + }) + ); + } + + loadingTimeout() { + this._snackBar.open('Timeout loading user data', undefined, { + duration: 1500, + }); + } +} diff --git a/console-webapp/src/styles.scss b/console-webapp/src/styles.scss index abd938ce5..2220a284d 100644 --- a/console-webapp/src/styles.scss +++ b/console-webapp/src/styles.scss @@ -45,15 +45,16 @@ body { padding: 0 !important; text-align: left; height: 20px !important; + min-width: auto !important; } &-title { color: var(--primary) !important; } &-icon { - font-size: 4rem; - line-height: 4rem; - height: 4rem !important; - width: 4rem !important; + font-size: 5rem; + line-height: 5rem; + height: 5rem !important; + width: 5rem !important; } &_left { flex: 1;