From 52fddfef4df3b3c162ebca7c7b2dbf4d748b28db Mon Sep 17 00:00:00 2001 From: ptkach Date: Mon, 5 Feb 2024 16:50:32 -0500 Subject: [PATCH] Restyle console based on the new design proposal --- console-webapp/angular.json | 6 +- console-webapp/build.gradle | 2 +- console-webapp/src/app/app-routing.module.ts | 103 +++-- console-webapp/src/app/app.component.html | 21 +- console-webapp/src/app/app.component.scss | 24 +- console-webapp/src/app/app.component.spec.ts | 2 +- console-webapp/src/app/app.component.ts | 22 +- console-webapp/src/app/app.module.ts | 47 +-- .../billingInfo/billingInfo.component.html | 14 + .../billingInfo/billingInfo.component.scss | 22 ++ .../billingInfo.component.ts} | 20 +- .../src/app/domains/domainList.component.html | 119 +++--- .../src/app/domains/domainList.component.scss | 21 ++ .../app/domains/domainList.component.spec.ts | 2 +- .../src/app/domains/domainList.component.ts | 2 +- .../src/app/domains/domainList.service.ts | 2 +- .../src/app/header/header.component.html | 68 +++- .../src/app/header/header.component.scss | 36 +- .../src/app/header/header.component.spec.ts | 2 +- .../src/app/header/header.component.ts | 5 +- .../src/app/home/home.component.html | 54 ++- .../src/app/home/home.component.scss | 30 +- .../src/app/home/home.component.spec.ts | 2 +- console-webapp/src/app/home/home.component.ts | 10 +- .../home/widgets/billingWidget.component.html | 22 -- .../home/widgets/contactWidget.component.html | 29 -- .../home/widgets/contactWidget.component.ts | 24 -- .../home/widgets/domainsWidget.component.html | 30 -- .../home/widgets/domainsWidget.component.ts | 29 -- .../app/home/widgets/eppWidget.component.html | 13 - .../widgets/promotionsWidget.component.html | 27 -- .../widgets/resourcesWidget.component.html | 17 - .../widgets/settingsWidget.component.html | 53 --- .../home/widgets/settingsWidget.component.ts | 44 --- .../home/widgets/tldsWidget.component.html | 13 - console-webapp/src/app/material.module.ts | 4 +- .../app/navigation/navigation.component.html | 44 +++ .../app/navigation/navigation.component.scss | 71 ++++ .../app/navigation/navigation.component.ts | 72 ++++ .../registrar/emptyRegistrar.component.html | 7 - .../app/registrar/emptyRegistrar.component.ts | 37 -- .../src/app/registrar/registrar.guard.spec.ts | 68 ---- .../src/app/registrar/registrar.guard.ts | 45 --- .../app/registrar/registrar.service.spec.ts | 2 +- .../src/app/registrar/registrar.service.ts | 215 ++++++++++- .../registrar/registrarDetails.component.html | 128 +++++-- .../registrar/registrarDetails.component.scss | 23 +- .../registrar/registrarDetails.component.ts | 52 +-- .../registrarSelector.component.html | 51 ++- .../registrarSelector.component.scss | 11 - .../registrarSelector.component.spec.ts | 2 +- .../registrar/registrarSelector.component.ts | 37 +- .../registrar/registrarsTable.component.html | 26 +- .../registrar/registrarsTable.component.scss | 1 - .../registrarsTable.component.spec.ts | 2 +- .../registrar/registrarsTable.component.ts | 122 +++--- .../app/resources/resources.component.html | 15 + .../app/resources/resources.component.scss | 22 ++ .../resources.component.ts} | 14 +- .../settings/contact/contact.component.html | 66 ++-- .../settings/contact/contact.component.scss | 55 +-- .../contact/contact.component.spec.ts | 2 +- .../app/settings/contact/contact.component.ts | 188 +++------- .../app/settings/contact/contact.service.ts | 87 ++++- .../contact/contactDetails.component.html | 214 +++++++---- .../contact/contactDetails.component.scss | 19 + .../contact/contactDetails.component.ts | 92 +++++ .../settings/security/security.component.html | 115 +----- .../settings/security/security.component.scss | 2 +- .../security/security.component.spec.ts | 2 +- .../settings/security/security.component.ts | 55 +-- .../security/security.service.spec.ts | 2 +- .../app/settings/security/security.service.ts | 2 +- .../security/securityEdit.component.html | 36 ++ .../security/securityEdit.component.scss} | 11 +- .../security/securityEdit.component.ts | 68 ++++ .../src/app/settings/settings.component.html | 50 +-- .../src/app/settings/settings.component.scss | 2 +- .../app/settings/settings.component.spec.ts | 2 +- .../src/app/settings/settings.component.ts | 2 +- .../app/settings/users/users.component.scss | 2 +- .../settings/users/users.component.spec.ts | 2 +- .../src/app/settings/users/users.component.ts | 2 +- .../app/settings/whois/whois.component.html | 353 ++++++------------ .../app/settings/whois/whois.component.scss | 68 +--- .../settings/whois/whois.component.spec.ts | 2 +- .../src/app/settings/whois/whois.component.ts | 32 +- .../src/app/settings/whois/whois.service.ts | 16 +- .../components/dialogBottomSheet.component.ts | 69 ---- .../notifications.component.html | 16 + .../notifications.component.scss | 23 ++ .../notifications/notifications.component.ts} | 22 +- .../selectedRegistrarWrapper.component.scss} | 0 .../selectedRegistrarWrapper.component.ts | 37 ++ .../directives/locationBack.directive.ts | 14 + .../app/shared/services/backend.service.ts | 18 +- .../app/shared/services/breakPoint.service.ts | 45 +++ .../shared/services/globalLoader.service.ts | 2 +- .../app/shared/services/userData.service.ts | 2 +- console-webapp/src/app/snackbar.module.ts | 2 +- .../src/app/support/support.component.html | 45 +++ .../src/app/support/support.component.scss | 16 + .../support.component.ts} | 13 +- .../src/app/tlds/tlds.component.html | 48 +-- .../src/app/tlds/tlds.component.scss | 2 +- .../src/app/tlds/tlds.component.spec.ts | 2 +- console-webapp/src/app/tlds/tlds.component.ts | 2 +- console-webapp/src/assets/billing.png | Bin 0 -> 78411 bytes console-webapp/src/assets/resources.png | Bin 0 -> 187326 bytes .../src/environments/environment.prod.ts | 2 +- .../src/environments/environment.ts | 2 +- console-webapp/src/index.html | 6 +- console-webapp/src/main.ts | 2 +- console-webapp/src/styles.scss | 80 ++-- console-webapp/src/theme.scss | 160 ++++++-- 115 files changed, 2246 insertions(+), 1941 deletions(-) create mode 100644 console-webapp/src/app/billingInfo/billingInfo.component.html create mode 100644 console-webapp/src/app/billingInfo/billingInfo.component.scss rename console-webapp/src/app/{home/widgets/billingWidget.component.ts => billingInfo/billingInfo.component.ts} (66%) delete mode 100644 console-webapp/src/app/home/widgets/billingWidget.component.html delete mode 100644 console-webapp/src/app/home/widgets/contactWidget.component.html delete mode 100644 console-webapp/src/app/home/widgets/contactWidget.component.ts delete mode 100644 console-webapp/src/app/home/widgets/domainsWidget.component.html delete mode 100644 console-webapp/src/app/home/widgets/domainsWidget.component.ts delete mode 100644 console-webapp/src/app/home/widgets/eppWidget.component.html delete mode 100644 console-webapp/src/app/home/widgets/promotionsWidget.component.html delete mode 100644 console-webapp/src/app/home/widgets/resourcesWidget.component.html delete mode 100644 console-webapp/src/app/home/widgets/settingsWidget.component.html delete mode 100644 console-webapp/src/app/home/widgets/settingsWidget.component.ts delete mode 100644 console-webapp/src/app/home/widgets/tldsWidget.component.html create mode 100644 console-webapp/src/app/navigation/navigation.component.html create mode 100644 console-webapp/src/app/navigation/navigation.component.scss create mode 100644 console-webapp/src/app/navigation/navigation.component.ts delete mode 100644 console-webapp/src/app/registrar/emptyRegistrar.component.html delete mode 100644 console-webapp/src/app/registrar/emptyRegistrar.component.ts delete mode 100644 console-webapp/src/app/registrar/registrar.guard.spec.ts delete mode 100644 console-webapp/src/app/registrar/registrar.guard.ts create mode 100644 console-webapp/src/app/resources/resources.component.html create mode 100644 console-webapp/src/app/resources/resources.component.scss rename console-webapp/src/app/{home/widgets/resourcesWidget.component.ts => resources/resources.component.ts} (61%) create mode 100644 console-webapp/src/app/settings/contact/contactDetails.component.scss create mode 100644 console-webapp/src/app/settings/contact/contactDetails.component.ts create mode 100644 console-webapp/src/app/settings/security/securityEdit.component.html rename console-webapp/src/app/{home/widgets/eppWidget.component.ts => settings/security/securityEdit.component.scss} (69%) create mode 100644 console-webapp/src/app/settings/security/securityEdit.component.ts delete mode 100644 console-webapp/src/app/shared/components/dialogBottomSheet.component.ts create mode 100644 console-webapp/src/app/shared/components/notifications/notifications.component.html create mode 100644 console-webapp/src/app/shared/components/notifications/notifications.component.scss rename console-webapp/src/app/{home/widgets/tldsWidget.component.ts => shared/components/notifications/notifications.component.ts} (56%) rename console-webapp/src/app/{registrar/emptyRegistrar.component.scss => shared/components/selectedRegistrarWrapper/selectedRegistrarWrapper.component.scss} (100%) create mode 100644 console-webapp/src/app/shared/components/selectedRegistrarWrapper/selectedRegistrarWrapper.component.ts create mode 100644 console-webapp/src/app/shared/directives/locationBack.directive.ts create mode 100644 console-webapp/src/app/shared/services/breakPoint.service.ts create mode 100644 console-webapp/src/app/support/support.component.html create mode 100644 console-webapp/src/app/support/support.component.scss rename console-webapp/src/app/{home/widgets/promotionsWidget.component.ts => support/support.component.ts} (62%) create mode 100644 console-webapp/src/assets/billing.png create mode 100644 console-webapp/src/assets/resources.png diff --git a/console-webapp/angular.json b/console-webapp/angular.json index 562b5c020f..a9f17c350a 100644 --- a/console-webapp/angular.json +++ b/console-webapp/angular.json @@ -73,10 +73,10 @@ "builder": "@angular-devkit/build-angular:dev-server", "configurations": { "production": { - "browserTarget": "console-webapp:build:production" + "buildTarget": "console-webapp:build:production" }, "development": { - "browserTarget": "console-webapp:build:development" + "buildTarget": "console-webapp:build:development" } }, "defaultConfiguration": "development" @@ -84,7 +84,7 @@ "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { - "browserTarget": "console-webapp:build" + "buildTarget": "console-webapp:build" } }, "test": { diff --git a/console-webapp/build.gradle b/console-webapp/build.gradle index a5c5a96f6a..a9fcbb0bc4 100644 --- a/console-webapp/build.gradle +++ b/console-webapp/build.gradle @@ -1,4 +1,4 @@ -// Copyright 2022 The Nomulus Authors. All Rights Reserved. +// Copyright 2024 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. diff --git a/console-webapp/src/app/app-routing.module.ts b/console-webapp/src/app/app-routing.module.ts index 62eca80f8d..3c9638a5e4 100644 --- a/console-webapp/src/app/app-routing.module.ts +++ b/console-webapp/src/app/app-routing.module.ts @@ -1,4 +1,4 @@ -// Copyright 2023 The Nomulus Authors. All Rights Reserved. +// Copyright 2024 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. @@ -13,69 +13,112 @@ // limitations under the License. import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; -import { TldsComponent } from './tlds/tlds.component'; +import { Route, RouterModule } from '@angular/router'; +import { BillingInfoComponent } from './billingInfo/billingInfo.component'; +import { DomainListComponent } from './domains/domainList.component'; import { HomeComponent } from './home/home.component'; -import { SettingsComponent } from './settings/settings.component'; -import SettingsContactComponent from './settings/contact/contact.component'; -import SettingsWhoisComponent from './settings/whois/whois.component'; -import SettingsUsersComponent from './settings/users/users.component'; -import SettingsSecurityComponent from './settings/security/security.component'; -import { RegistrarGuard } from './registrar/registrar.guard'; +import { RegistrarDetailsComponent } from './registrar/registrarDetails.component'; import { RegistrarComponent } from './registrar/registrarsTable.component'; -import { EmptyRegistrar } from './registrar/emptyRegistrar.component'; +import { ResourcesComponent } from './resources/resources.component'; import ContactComponent from './settings/contact/contact.component'; -import WhoisComponent from './settings/whois/whois.component'; +import { ContactDetailsComponent } from './settings/contact/contactDetails.component'; import SecurityComponent from './settings/security/security.component'; +import { SettingsComponent } from './settings/settings.component'; import UsersComponent from './settings/users/users.component'; -import { DomainListComponent } from './domains/domainList.component'; +import WhoisComponent from './settings/whois/whois.component'; +import { SupportComponent } from './support/support.component'; -const routes: Routes = [ +export interface RouteWithIcon extends Route { + iconName?: string; +} + +export const routes: RouteWithIcon[] = [ { path: '', redirectTo: '/home', pathMatch: 'full' }, { path: 'registrars', component: RegistrarComponent }, - { path: 'empty-registrar', component: EmptyRegistrar }, - { path: 'home', component: HomeComponent, canActivate: [RegistrarGuard] }, - { path: 'tlds', component: TldsComponent, canActivate: [RegistrarGuard] }, + { + path: 'home', + component: HomeComponent, + title: 'Dashboard', + iconName: 'view_comfy_alt', + }, + // { path: 'tlds', component: TldsComponent, title: "TLDs", iconName: "event_list" }, { path: DomainListComponent.PATH, component: DomainListComponent, - canActivate: [RegistrarGuard], + title: 'Domains', + iconName: 'view_list', }, { path: SettingsComponent.PATH, component: SettingsComponent, + title: 'Settings', + iconName: 'settings', children: [ { path: '', - redirectTo: 'registrars', + redirectTo: ContactComponent.PATH, pathMatch: 'full', }, { path: ContactComponent.PATH, - component: SettingsContactComponent, - canActivate: [RegistrarGuard], + component: ContactComponent, + title: 'Contacts', + }, + { + path: ContactDetailsComponent.PATH, + component: ContactDetailsComponent, }, { path: WhoisComponent.PATH, - component: SettingsWhoisComponent, - canActivate: [RegistrarGuard], + component: WhoisComponent, + title: 'WHOIS Info', }, { path: SecurityComponent.PATH, - component: SettingsSecurityComponent, - canActivate: [RegistrarGuard], + component: SecurityComponent, + title: 'Security', }, { path: UsersComponent.PATH, - component: SettingsUsersComponent, - canActivate: [RegistrarGuard], - }, - { - path: RegistrarComponent.PATH, - component: RegistrarComponent, + component: UsersComponent, + title: 'Users', }, ], }, + // { + // path: DomainListComponent.PATH, + // component: DomainListComponent, + // title: "EPP Console", + // iconName: "upgrade" + // }, + { + path: RegistrarComponent.PATH, + component: RegistrarComponent, + title: 'Registrars', + iconName: 'account_circle', + }, + { + path: RegistrarDetailsComponent.PATH, + component: RegistrarDetailsComponent, + }, + { + path: BillingInfoComponent.PATH, + component: BillingInfoComponent, + title: 'Billing Info', + iconName: 'credit_card', + }, + { + path: ResourcesComponent.PATH, + component: ResourcesComponent, + title: 'Resources', + iconName: 'description', + }, + { + path: SupportComponent.PATH, + component: SupportComponent, + title: 'Support', + iconName: 'help', + }, ]; @NgModule({ diff --git a/console-webapp/src/app/app.component.html b/console-webapp/src/app/app.component.html index db688b2dd5..d8aa46b7eb 100644 --- a/console-webapp/src/app/app.component.html +++ b/console-webapp/src/app/app.component.html @@ -1,18 +1,13 @@
- + - - - - Home page - - - TLDS - - - Settings - - + +