mirror of
https://github.com/google/nomulus.git
synced 2025-07-24 19:48:32 +02:00
Add console UI main layout, settings page and contact settings (#1989)
* Header initialized * Added settings page * switch history mode to hash * Add eslint * Add prettier and reformat * Contact details in a bottom sheet for mobile devices * Add contact details events abstraction * Fix formatting issue and update deps versions
This commit is contained in:
parent
894d05ce4e
commit
b319eff7cd
60 changed files with 4896 additions and 10476 deletions
47
console-webapp/.eslintrc.json
Normal file
47
console-webapp/.eslintrc.json
Normal file
|
@ -0,0 +1,47 @@
|
|||
{
|
||||
"root": true,
|
||||
"ignorePatterns": [
|
||||
"projects/**/*"
|
||||
],
|
||||
"overrides": [
|
||||
{
|
||||
"files": [
|
||||
"*.ts"
|
||||
],
|
||||
"extends": [
|
||||
"eslint:recommended",
|
||||
"plugin:@typescript-eslint/recommended",
|
||||
"plugin:@angular-eslint/recommended",
|
||||
"plugin:@angular-eslint/template/process-inline-templates"
|
||||
],
|
||||
"rules": {
|
||||
"@angular-eslint/directive-selector": [
|
||||
"error",
|
||||
{
|
||||
"type": "attribute",
|
||||
"prefix": "app",
|
||||
"style": "camelCase"
|
||||
}
|
||||
],
|
||||
"@angular-eslint/component-selector": [
|
||||
"error",
|
||||
{
|
||||
"type": "element",
|
||||
"prefix": "app",
|
||||
"style": "kebab-case"
|
||||
}
|
||||
],
|
||||
"eol-last": ["error", "always"]
|
||||
}
|
||||
},
|
||||
{
|
||||
"files": [
|
||||
"*.html"
|
||||
],
|
||||
"extends": [
|
||||
"plugin:@angular-eslint/template/recommended"
|
||||
],
|
||||
"rules": {}
|
||||
}
|
||||
]
|
||||
}
|
0
console-webapp/.prettierignore
Normal file
0
console-webapp/.prettierignore
Normal file
1
console-webapp/.prettierrc.json
Normal file
1
console-webapp/.prettierrc.json
Normal file
|
@ -0,0 +1 @@
|
|||
{}
|
|
@ -102,8 +102,23 @@
|
|||
],
|
||||
"scripts": []
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-eslint/builder:lint",
|
||||
"options": {
|
||||
"lintFilePatterns": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.html"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"cli": {
|
||||
"analytics": false,
|
||||
"schematicCollections": [
|
||||
"@angular-eslint/schematics"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
@ -50,5 +50,12 @@ task buildConsoleWebappProd(type: Exec) {
|
|||
args 'run', 'build'
|
||||
}
|
||||
|
||||
task applyFormatting() {
|
||||
exec {
|
||||
workingDir "${consoleDir}/"
|
||||
commandLine 'npm', 'run', 'prettify'
|
||||
}
|
||||
}
|
||||
|
||||
tasks.runConsoleWebappUnitTests.dependsOn(tasks.npmInstallDeps)
|
||||
tasks.buildConsoleWebappProd.dependsOn(tasks.npmInstallDeps)
|
||||
|
|
13592
console-webapp/package-lock.json
generated
13592
console-webapp/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -9,7 +9,9 @@
|
|||
"watch": "ng build --watch --configuration development",
|
||||
"test": "ng test --browsers=ChromeHeadless --watch=false",
|
||||
"run:dev": "",
|
||||
"start:dev": "concurrently \"./../gradlew :core:runTestServer\" \"ng serve --proxy-config dev-proxy.config.json\""
|
||||
"prettify": "npx prettier --write ./src/",
|
||||
"start:dev": "concurrently \"./../gradlew :core:runTestServer\" \"ng serve --proxy-config dev-proxy.config.json\"",
|
||||
"lint": "ng lint"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
|
@ -29,17 +31,26 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^15.2.4",
|
||||
"@angular-eslint/builder": "15.2.1",
|
||||
"@angular-eslint/eslint-plugin": "15.2.1",
|
||||
"@angular-eslint/eslint-plugin-template": "15.2.1",
|
||||
"@angular-eslint/schematics": "15.2.1",
|
||||
"@angular-eslint/template-parser": "15.2.1",
|
||||
"@angular/cli": "~15.2.4",
|
||||
"@angular/compiler-cli": "^15.2.2",
|
||||
"@types/jasmine": "~4.0.0",
|
||||
"@types/node": "^18.11.18",
|
||||
"@typescript-eslint/eslint-plugin": "5.48.2",
|
||||
"@typescript-eslint/parser": "5.48.2",
|
||||
"concurrently": "^7.6.0",
|
||||
"eslint": "^8.33.0",
|
||||
"jasmine-core": "~4.3.0",
|
||||
"karma": "~6.4.0",
|
||||
"karma-chrome-launcher": "~3.1.0",
|
||||
"karma-coverage": "~2.2.0",
|
||||
"karma-jasmine": "~5.1.0",
|
||||
"karma-jasmine-html-reporter": "~2.0.0",
|
||||
"prettier": "2.8.7",
|
||||
"typescript": "~4.9.4"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
// Copyright 2022 The Nomulus Authors. All Rights Reserved.
|
||||
// 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.
|
||||
|
@ -14,16 +14,58 @@
|
|||
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
import {TldsComponent} from './tlds/tlds.component';
|
||||
import {HomeComponent} from './home/home.component';
|
||||
import { TldsComponent } from './tlds/tlds.component';
|
||||
import { HomeComponent } from './home/home.component';
|
||||
import { SettingsComponent } from './settings/settings.component';
|
||||
import SettingsContactComponent from './settings/contact/contact.component';
|
||||
import SettingsRegistrarsComponent from './settings/registrars/registrars.component';
|
||||
import SettingsWhoisComponent from './settings/whois/whois.component';
|
||||
import SettingsUsersComponent from './settings/users/users.component';
|
||||
import SettingsSecurityComponent from './settings/security/security.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: '', redirectTo: '/settings/contact', pathMatch: 'full' },
|
||||
{ path: 'home', component: HomeComponent },
|
||||
{ path: 'tlds', component: TldsComponent },
|
||||
{
|
||||
path: 'settings',
|
||||
component: SettingsComponent,
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
redirectTo: 'contact',
|
||||
pathMatch: 'full',
|
||||
},
|
||||
{
|
||||
path: 'contact',
|
||||
component: SettingsContactComponent,
|
||||
},
|
||||
{
|
||||
path: 'whois',
|
||||
component: SettingsWhoisComponent,
|
||||
},
|
||||
{
|
||||
path: 'security',
|
||||
component: SettingsSecurityComponent,
|
||||
},
|
||||
{
|
||||
path: 'epp-password',
|
||||
component: SettingsSecurityComponent,
|
||||
},
|
||||
{
|
||||
path: 'users',
|
||||
component: SettingsUsersComponent,
|
||||
},
|
||||
{
|
||||
path: 'registrars',
|
||||
component: SettingsRegistrarsComponent,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forRoot(routes)],
|
||||
exports: [RouterModule]
|
||||
imports: [RouterModule.forRoot(routes, { useHash: true })],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
export class AppRoutingModule { }
|
||||
export class AppRoutingModule {}
|
||||
|
|
|
@ -1,14 +1,21 @@
|
|||
<div class="toolbar" role="banner">
|
||||
Nomulus Console
|
||||
<div class="console-app">
|
||||
<app-header (toggleNavOpen)="sidenav.toggle()"></app-header>
|
||||
<mat-sidenav-container class="console-app__content-wrapper">
|
||||
<mat-sidenav #sidenav class="console-app__sidebar">
|
||||
<mat-nav-list>
|
||||
<a mat-list-item [routerLink]="'/home'" routerLinkActive="active">
|
||||
Home page
|
||||
</a>
|
||||
<a mat-list-item [routerLink]="'/tlds'" routerLinkActive="active">
|
||||
TLDS
|
||||
</a>
|
||||
<a mat-list-item [routerLink]="'/settings'" routerLinkActive="active">
|
||||
Settings
|
||||
</a>
|
||||
</mat-nav-list>
|
||||
</mat-sidenav>
|
||||
<mat-sidenav-content class="console-app__content">
|
||||
<router-outlet></router-outlet>
|
||||
</mat-sidenav-content>
|
||||
</mat-sidenav-container>
|
||||
</div>
|
||||
|
||||
<div class="content" role="main">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a routerLink="/home" routerLinkActive="active" ariaCurrentWhenActive="page">Home page</a></li>
|
||||
<li><a routerLink="/tlds" routerLinkActive="active" ariaCurrentWhenActive="page">TLDs</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<router-outlet></router-outlet>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
// Copyright 2022 The Nomulus Authors. All Rights Reserved.
|
||||
// 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.
|
||||
|
@ -13,7 +13,8 @@
|
|||
// limitations under the License.
|
||||
|
||||
:host {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
|
||||
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
box-sizing: border-box;
|
||||
|
@ -21,15 +22,25 @@
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
.console-app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
&__content-wrapper {
|
||||
flex: 1;
|
||||
margin-top: -12px;
|
||||
padding-bottom: 36px;
|
||||
}
|
||||
&__sidebar {
|
||||
min-width: 300px;
|
||||
a::before {
|
||||
background-color: transparent;
|
||||
}
|
||||
.active {
|
||||
background: #eae1e1;
|
||||
}
|
||||
}
|
||||
&__content {
|
||||
margin: 12px 24px;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -19,12 +19,8 @@ import { AppComponent } from './app.component';
|
|||
describe('AppComponent', () => {
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [
|
||||
RouterTestingModule
|
||||
],
|
||||
declarations: [
|
||||
AppComponent
|
||||
],
|
||||
imports: [RouterTestingModule],
|
||||
declarations: [AppComponent],
|
||||
}).compileComponents();
|
||||
});
|
||||
|
||||
|
@ -33,5 +29,4 @@ describe('AppComponent', () => {
|
|||
const app = fixture.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
@ -17,8 +17,6 @@ import { Component } from '@angular/core';
|
|||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.less']
|
||||
styleUrls: ['./app.component.less'],
|
||||
})
|
||||
export class AppComponent {
|
||||
|
||||
}
|
||||
export class AppComponent {}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
// Copyright 2022 The Nomulus Authors. All Rights Reserved.
|
||||
// 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.
|
||||
|
@ -14,28 +14,43 @@
|
|||
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
import { AppRoutingModule } from './app-routing.module';
|
||||
import { AppComponent } from './app.component';
|
||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||
import {MaterialModule} from './material.module';
|
||||
import { MaterialModule } from './material.module';
|
||||
|
||||
import { BackendService } from './shared/services/backend.service';
|
||||
|
||||
import { HomeComponent } from './home/home.component';
|
||||
import { TldsComponent } from './tlds/tlds.component';
|
||||
import { HeaderComponent } from './header/header.component';
|
||||
import { SettingsComponent } from './settings/settings.component';
|
||||
import SettingsContactComponent, {
|
||||
ContactDetailsDialogComponent,
|
||||
} from './settings/contact/contact.component';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent,
|
||||
HomeComponent,
|
||||
TldsComponent,
|
||||
HeaderComponent,
|
||||
SettingsComponent,
|
||||
SettingsContactComponent,
|
||||
ContactDetailsDialogComponent,
|
||||
],
|
||||
imports: [
|
||||
HttpClientModule,
|
||||
FormsModule,
|
||||
MaterialModule,
|
||||
BrowserModule,
|
||||
AppRoutingModule,
|
||||
BrowserAnimationsModule
|
||||
BrowserAnimationsModule,
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
providers: [BackendService],
|
||||
bootstrap: [AppComponent],
|
||||
})
|
||||
export class AppModule { }
|
||||
export class AppModule {}
|
||||
|
|
15
console-webapp/src/app/header/header.component.html
Normal file
15
console-webapp/src/app/header/header.component.html
Normal file
|
@ -0,0 +1,15 @@
|
|||
<p>
|
||||
<mat-toolbar color="primary">
|
||||
<button mat-icon-button aria-label="Open menu" (click)="toggleNavPane()">
|
||||
<mat-icon>menu</mat-icon>
|
||||
</button>
|
||||
<span>Google Registry</span>
|
||||
<span class="spacer"></span>
|
||||
<button mat-icon-button aria-label="Open FAQ">
|
||||
<mat-icon>question_mark</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button aria-label="Open user info">
|
||||
<mat-icon>person</mat-icon>
|
||||
</button>
|
||||
</mat-toolbar>
|
||||
</p>
|
17
console-webapp/src/app/header/header.component.less
Normal file
17
console-webapp/src/app/header/header.component.less
Normal file
|
@ -0,0 +1,17 @@
|
|||
// 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.
|
||||
|
||||
.spacer {
|
||||
flex: 1;
|
||||
}
|
36
console-webapp/src/app/header/header.component.spec.ts
Normal file
36
console-webapp/src/app/header/header.component.spec.ts
Normal file
|
@ -0,0 +1,36 @@
|
|||
// 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 { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { HeaderComponent } from './header.component';
|
||||
|
||||
describe('HeaderComponent', () => {
|
||||
let component: HeaderComponent;
|
||||
let fixture: ComponentFixture<HeaderComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [HeaderComponent],
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(HeaderComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
31
console-webapp/src/app/header/header.component.ts
Normal file
31
console-webapp/src/app/header/header.component.ts
Normal file
|
@ -0,0 +1,31 @@
|
|||
// 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 { Component, EventEmitter, Output } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-header',
|
||||
templateUrl: './header.component.html',
|
||||
styleUrls: ['./header.component.less'],
|
||||
})
|
||||
export class HeaderComponent {
|
||||
private isNavOpen = false;
|
||||
|
||||
@Output() toggleNavOpen = new EventEmitter<boolean>();
|
||||
|
||||
toggleNavPane() {
|
||||
this.isNavOpen = !this.isNavOpen;
|
||||
this.toggleNavOpen.emit(this.isNavOpen);
|
||||
}
|
||||
}
|
|
@ -1,14 +1,21 @@
|
|||
<h3>Recent Activity</h3>
|
||||
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8 console-home__activity">
|
||||
<ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
|
||||
<table
|
||||
mat-table
|
||||
[dataSource]="dataSource"
|
||||
class="mat-elevation-z8 console-home__activity"
|
||||
>
|
||||
<ng-container
|
||||
*ngFor="let column of columns"
|
||||
[matColumnDef]="column.columnDef"
|
||||
>
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
{{column.header}}
|
||||
{{ column.header }}
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let row">
|
||||
{{column.cell(row)}}
|
||||
{{ column.cell(row) }}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
|
||||
</table>
|
||||
|
|
|
@ -11,4 +11,3 @@
|
|||
// 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.
|
||||
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { HomeComponent } from './home.component';
|
||||
import {MaterialModule} from '../material.module';
|
||||
import { MaterialModule } from '../material.module';
|
||||
|
||||
describe('HomeComponent', () => {
|
||||
let component: HomeComponent;
|
||||
|
@ -24,9 +24,8 @@ describe('HomeComponent', () => {
|
|||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [MaterialModule],
|
||||
declarations: [ HomeComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
declarations: [HomeComponent],
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(HomeComponent);
|
||||
component = fixture.componentInstance;
|
||||
|
|
|
@ -19,76 +19,213 @@ export interface ActivityRecord {
|
|||
userName: string;
|
||||
registrarName: string;
|
||||
timestamp: string;
|
||||
details: string
|
||||
details: string;
|
||||
}
|
||||
|
||||
const MOCK_DATA: ActivityRecord[] = [
|
||||
{eventType: "Export DUMS", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
|
||||
{eventType: "Update Contact", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
|
||||
{eventType: "Delete Domain", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
|
||||
{eventType: "Export DUMS", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
|
||||
{eventType: "Update Contact", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
|
||||
{eventType: "Delete Domain", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
|
||||
{eventType: "Export DUMS", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
|
||||
{eventType: "Update Contact", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
|
||||
{eventType: "Delete Domain", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
|
||||
{eventType: "Export DUMS", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
|
||||
{eventType: "Update Contact", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
|
||||
{eventType: "Delete Domain", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
|
||||
{eventType: "Export DUMS", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
|
||||
{eventType: "Update Contact", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
|
||||
{eventType: "Delete Domain", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
|
||||
{eventType: "Export DUMS", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
|
||||
{eventType: "Update Contact", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
|
||||
{eventType: "Delete Domain", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
|
||||
{eventType: "Export DUMS", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
|
||||
{eventType: "Update Contact", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
|
||||
{eventType: "Delete Domain", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
|
||||
{eventType: "Export DUMS", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
|
||||
{eventType: "Update Contact", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
|
||||
{eventType: "Delete Domain", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
|
||||
{
|
||||
eventType: 'Export DUMS',
|
||||
userName: 'user3',
|
||||
registrarName: 'registrar1',
|
||||
timestamp: '2022-03-15T19:46:39.007',
|
||||
details: 'All Domains under management exported as .csv file',
|
||||
},
|
||||
{
|
||||
eventType: 'Update Contact',
|
||||
userName: 'user3',
|
||||
registrarName: 'registrar1',
|
||||
timestamp: '2022-03-15T19:46:39.007',
|
||||
details: 'All Domains under management exported as .csv file',
|
||||
},
|
||||
{
|
||||
eventType: 'Delete Domain',
|
||||
userName: 'user3',
|
||||
registrarName: 'registrar1',
|
||||
timestamp: '2022-03-15T19:46:39.007',
|
||||
details: 'All Domains under management exported as .csv file',
|
||||
},
|
||||
{
|
||||
eventType: 'Export DUMS',
|
||||
userName: 'user3',
|
||||
registrarName: 'registrar1',
|
||||
timestamp: '2022-03-15T19:46:39.007',
|
||||
details: 'All Domains under management exported as .csv file',
|
||||
},
|
||||
{
|
||||
eventType: 'Update Contact',
|
||||
userName: 'user3',
|
||||
registrarName: 'registrar1',
|
||||
timestamp: '2022-03-15T19:46:39.007',
|
||||
details: 'All Domains under management exported as .csv file',
|
||||
},
|
||||
{
|
||||
eventType: 'Delete Domain',
|
||||
userName: 'user3',
|
||||
registrarName: 'registrar1',
|
||||
timestamp: '2022-03-15T19:46:39.007',
|
||||
details: 'All Domains under management exported as .csv file',
|
||||
},
|
||||
{
|
||||
eventType: 'Export DUMS',
|
||||
userName: 'user3',
|
||||
registrarName: 'registrar1',
|
||||
timestamp: '2022-03-15T19:46:39.007',
|
||||
details: 'All Domains under management exported as .csv file',
|
||||
},
|
||||
{
|
||||
eventType: 'Update Contact',
|
||||
userName: 'user3',
|
||||
registrarName: 'registrar1',
|
||||
timestamp: '2022-03-15T19:46:39.007',
|
||||
details: 'All Domains under management exported as .csv file',
|
||||
},
|
||||
{
|
||||
eventType: 'Delete Domain',
|
||||
userName: 'user3',
|
||||
registrarName: 'registrar1',
|
||||
timestamp: '2022-03-15T19:46:39.007',
|
||||
details: 'All Domains under management exported as .csv file',
|
||||
},
|
||||
{
|
||||
eventType: 'Export DUMS',
|
||||
userName: 'user3',
|
||||
registrarName: 'registrar1',
|
||||
timestamp: '2022-03-15T19:46:39.007',
|
||||
details: 'All Domains under management exported as .csv file',
|
||||
},
|
||||
{
|
||||
eventType: 'Update Contact',
|
||||
userName: 'user3',
|
||||
registrarName: 'registrar1',
|
||||
timestamp: '2022-03-15T19:46:39.007',
|
||||
details: 'All Domains under management exported as .csv file',
|
||||
},
|
||||
{
|
||||
eventType: 'Delete Domain',
|
||||
userName: 'user3',
|
||||
registrarName: 'registrar1',
|
||||
timestamp: '2022-03-15T19:46:39.007',
|
||||
details: 'All Domains under management exported as .csv file',
|
||||
},
|
||||
{
|
||||
eventType: 'Export DUMS',
|
||||
userName: 'user3',
|
||||
registrarName: 'registrar1',
|
||||
timestamp: '2022-03-15T19:46:39.007',
|
||||
details: 'All Domains under management exported as .csv file',
|
||||
},
|
||||
{
|
||||
eventType: 'Update Contact',
|
||||
userName: 'user3',
|
||||
registrarName: 'registrar1',
|
||||
timestamp: '2022-03-15T19:46:39.007',
|
||||
details: 'All Domains under management exported as .csv file',
|
||||
},
|
||||
{
|
||||
eventType: 'Delete Domain',
|
||||
userName: 'user3',
|
||||
registrarName: 'registrar1',
|
||||
timestamp: '2022-03-15T19:46:39.007',
|
||||
details: 'All Domains under management exported as .csv file',
|
||||
},
|
||||
{
|
||||
eventType: 'Export DUMS',
|
||||
userName: 'user3',
|
||||
registrarName: 'registrar1',
|
||||
timestamp: '2022-03-15T19:46:39.007',
|
||||
details: 'All Domains under management exported as .csv file',
|
||||
},
|
||||
{
|
||||
eventType: 'Update Contact',
|
||||
userName: 'user3',
|
||||
registrarName: 'registrar1',
|
||||
timestamp: '2022-03-15T19:46:39.007',
|
||||
details: 'All Domains under management exported as .csv file',
|
||||
},
|
||||
{
|
||||
eventType: 'Delete Domain',
|
||||
userName: 'user3',
|
||||
registrarName: 'registrar1',
|
||||
timestamp: '2022-03-15T19:46:39.007',
|
||||
details: 'All Domains under management exported as .csv file',
|
||||
},
|
||||
{
|
||||
eventType: 'Export DUMS',
|
||||
userName: 'user3',
|
||||
registrarName: 'registrar1',
|
||||
timestamp: '2022-03-15T19:46:39.007',
|
||||
details: 'All Domains under management exported as .csv file',
|
||||
},
|
||||
{
|
||||
eventType: 'Update Contact',
|
||||
userName: 'user3',
|
||||
registrarName: 'registrar1',
|
||||
timestamp: '2022-03-15T19:46:39.007',
|
||||
details: 'All Domains under management exported as .csv file',
|
||||
},
|
||||
{
|
||||
eventType: 'Delete Domain',
|
||||
userName: 'user3',
|
||||
registrarName: 'registrar1',
|
||||
timestamp: '2022-03-15T19:46:39.007',
|
||||
details: 'All Domains under management exported as .csv file',
|
||||
},
|
||||
{
|
||||
eventType: 'Export DUMS',
|
||||
userName: 'user3',
|
||||
registrarName: 'registrar1',
|
||||
timestamp: '2022-03-15T19:46:39.007',
|
||||
details: 'All Domains under management exported as .csv file',
|
||||
},
|
||||
{
|
||||
eventType: 'Update Contact',
|
||||
userName: 'user3',
|
||||
registrarName: 'registrar1',
|
||||
timestamp: '2022-03-15T19:46:39.007',
|
||||
details: 'All Domains under management exported as .csv file',
|
||||
},
|
||||
{
|
||||
eventType: 'Delete Domain',
|
||||
userName: 'user3',
|
||||
registrarName: 'registrar1',
|
||||
timestamp: '2022-03-15T19:46:39.007',
|
||||
details: 'All Domains under management exported as .csv file',
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-home',
|
||||
templateUrl: './home.component.html',
|
||||
styleUrls: ['./home.component.less']
|
||||
styleUrls: ['./home.component.less'],
|
||||
})
|
||||
export class HomeComponent {
|
||||
|
||||
columns = [
|
||||
{
|
||||
columnDef: 'eventType',
|
||||
header: 'Event Type',
|
||||
cell:(record: ActivityRecord) => `${record.eventType}`,
|
||||
cell: (record: ActivityRecord) => `${record.eventType}`,
|
||||
},
|
||||
{
|
||||
columnDef: 'userName',
|
||||
header: 'User',
|
||||
cell: (record: ActivityRecord) => `${record.userName}`,
|
||||
cell: (record: ActivityRecord) => `${record.userName}`,
|
||||
},
|
||||
{
|
||||
columnDef: 'registrarName',
|
||||
header: 'Registrar',
|
||||
cell: (record: ActivityRecord) => `${record.registrarName}`,
|
||||
cell: (record: ActivityRecord) => `${record.registrarName}`,
|
||||
},
|
||||
{
|
||||
columnDef: 'timestamp',
|
||||
header: 'Timestamp',
|
||||
cell: (record: ActivityRecord) => `${record.timestamp}`,
|
||||
cell: (record: ActivityRecord) => `${record.timestamp}`,
|
||||
},
|
||||
{
|
||||
columnDef: 'details',
|
||||
header: 'Details',
|
||||
cell: (record: ActivityRecord) => `${record.details}`,
|
||||
cell: (record: ActivityRecord) => `${record.details}`,
|
||||
},
|
||||
];
|
||||
dataSource = MOCK_DATA;
|
||||
displayedColumns = this.columns.map(c => c.columnDef);
|
||||
|
||||
constructor() {
|
||||
|
||||
|
||||
}
|
||||
displayedColumns = this.columns.map((c) => c.columnDef);
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
// Copyright 2022 The Nomulus Authors. All Rights Reserved.
|
||||
// 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.
|
||||
|
@ -12,15 +12,73 @@
|
|||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
import {NgModule} from '@angular/core';
|
||||
import {MatCardModule} from '@angular/material/card';
|
||||
import {MatTableModule} from '@angular/material/table';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { A11yModule } from '@angular/cdk/a11y';
|
||||
import { CdkTableModule } from '@angular/cdk/table';
|
||||
import { CdkTreeModule } from '@angular/cdk/tree';
|
||||
import { MatBadgeModule } from '@angular/material/badge';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
||||
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatDialogModule } from '@angular/material/dialog';
|
||||
import { MatDividerModule } from '@angular/material/divider';
|
||||
import { MatGridListModule } from '@angular/material/grid-list';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatListModule } from '@angular/material/list';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
|
||||
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { MatRadioModule } from '@angular/material/radio';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatTableModule } from '@angular/material/table';
|
||||
import { MatTabsModule } from '@angular/material/tabs';
|
||||
import { MatToolbarModule } from '@angular/material/toolbar';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { MatTreeModule } from '@angular/material/tree';
|
||||
import { OverlayModule } from '@angular/cdk/overlay';
|
||||
import { CdkMenuModule } from '@angular/cdk/menu';
|
||||
import { DialogModule } from '@angular/cdk/dialog';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { MatSnackBarModule } from '@angular/material/snack-bar';
|
||||
|
||||
const MATERIAL_MODULES = [
|
||||
MatCardModule,
|
||||
MatTableModule,
|
||||
];
|
||||
|
||||
@NgModule({imports: MATERIAL_MODULES, exports: MATERIAL_MODULES})
|
||||
export class MaterialModule {
|
||||
}
|
||||
@NgModule({
|
||||
exports: [
|
||||
A11yModule,
|
||||
CdkMenuModule,
|
||||
CdkTableModule,
|
||||
CdkTreeModule,
|
||||
MatBadgeModule,
|
||||
MatButtonModule,
|
||||
MatButtonToggleModule,
|
||||
MatBottomSheetModule,
|
||||
MatCardModule,
|
||||
MatCheckboxModule,
|
||||
MatDialogModule,
|
||||
MatDividerModule,
|
||||
MatGridListModule,
|
||||
MatIconModule,
|
||||
MatInputModule,
|
||||
MatListModule,
|
||||
MatMenuModule,
|
||||
MatNativeDateModule,
|
||||
MatProgressBarModule,
|
||||
MatProgressSpinnerModule,
|
||||
MatRadioModule,
|
||||
MatRippleModule,
|
||||
MatSelectModule,
|
||||
MatSidenavModule,
|
||||
MatTableModule,
|
||||
MatTabsModule,
|
||||
MatToolbarModule,
|
||||
MatTooltipModule,
|
||||
MatTreeModule,
|
||||
OverlayModule,
|
||||
DialogModule,
|
||||
MatSnackBarModule,
|
||||
],
|
||||
})
|
||||
export class MaterialModule {}
|
||||
|
|
|
@ -0,0 +1,105 @@
|
|||
<h3 mat-dialog-title>Contact details</h3>
|
||||
<div mat-dialog-content>
|
||||
<form>
|
||||
<div>
|
||||
<mat-form-field class="contact-details__input">
|
||||
<mat-label>Name: </mat-label>
|
||||
<input
|
||||
matInput
|
||||
[(ngModel)]="contact.name"
|
||||
[ngModelOptions]="{ standalone: true }"
|
||||
/>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<mat-form-field class="contact-details__input">
|
||||
<mat-label>Primary account email: </mat-label>
|
||||
<input
|
||||
type="email"
|
||||
matInput
|
||||
[email]="true"
|
||||
[(ngModel)]="contact.emailAddress"
|
||||
[ngModelOptions]="{ standalone: true }"
|
||||
/>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<mat-form-field class="contact-details__input">
|
||||
<mat-label>Phone: </mat-label>
|
||||
<input
|
||||
matInput
|
||||
[(ngModel)]="contact.phoneNumber"
|
||||
[ngModelOptions]="{ standalone: true }"
|
||||
/>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<mat-form-field class="contact-details__input">
|
||||
<mat-label>Fax: </mat-label>
|
||||
<input
|
||||
matInput
|
||||
[(ngModel)]="contact.faxNumber"
|
||||
[ngModelOptions]="{ standalone: true }"
|
||||
/>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="contact-details__group">
|
||||
<label>Contact type:</label>
|
||||
<div class="contact-details__group-content">
|
||||
<mat-checkbox
|
||||
*ngFor="let contactType of contactTypes"
|
||||
[checked]="contact.types.includes(contactType.value)"
|
||||
(change)="
|
||||
$event.checked
|
||||
? contact.types.push(contactType.value)
|
||||
: contact.types.splice(
|
||||
contact.types.indexOf(contactType.value),
|
||||
1
|
||||
)
|
||||
"
|
||||
[disabled]="
|
||||
contact.types.length === 1 && contact.types[0] === contactType.value
|
||||
"
|
||||
>
|
||||
{{ contactType.label }}
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<mat-checkbox
|
||||
[(ngModel)]="contact.visibleInWhoisAsAdmin"
|
||||
[ngModelOptions]="{ standalone: true }"
|
||||
>Show in Registrar WHOIS record as admin contact</mat-checkbox
|
||||
>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<mat-checkbox
|
||||
[(ngModel)]="contact.visibleInWhoisAsTech"
|
||||
[ngModelOptions]="{ standalone: true }"
|
||||
>Show in Registrar WHOIS record as technical contact</mat-checkbox
|
||||
>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<mat-checkbox
|
||||
[(ngModel)]="contact.visibleInDomainWhoisAsAbuse"
|
||||
[ngModelOptions]="{ standalone: true }"
|
||||
>Show Phone and Email in Domain WHOIS Record as registrar abuse contact
|
||||
(per CL&D requirements)</mat-checkbox
|
||||
>
|
||||
</section>
|
||||
</form>
|
||||
|
||||
<p></p>
|
||||
|
||||
<mat-dialog-actions>
|
||||
<button mat-button (click)="onClose()">Cancel</button>
|
||||
<button mat-button (click)="saveAndClose()">Save</button>
|
||||
</mat-dialog-actions>
|
||||
</div>
|
|
@ -0,0 +1,35 @@
|
|||
<div *ngIf="loading" class="contact__loading">
|
||||
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
|
||||
</div>
|
||||
<div *ngIf="!loading">
|
||||
<div *ngFor="let group of groupedData">
|
||||
<div class="contact__cards-wrapper" *ngIf="group.contacts.length">
|
||||
<h3>{{ group.label }}s</h3>
|
||||
<mat-divider></mat-divider>
|
||||
<div class="contact__cards">
|
||||
<mat-card class="contact__card" *ngFor="let contact of group.contacts">
|
||||
<mat-card-title>{{ contact.name }}</mat-card-title>
|
||||
<p *ngIf="contact.phoneNumber">{{ contact.phoneNumber }}</p>
|
||||
<p *ngIf="contact.emailAddress">{{ contact.emailAddress }}</p>
|
||||
<mat-card-actions class="contact__card-actions">
|
||||
<button
|
||||
mat-button
|
||||
color="primary"
|
||||
(click)="openDetails($event, contact)"
|
||||
>
|
||||
<mat-icon>edit</mat-icon>Edit
|
||||
</button>
|
||||
<button mat-button color="accent" (click)="deleteContact(contact)">
|
||||
<mat-icon>delete</mat-icon>Delete
|
||||
</button>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact__actions">
|
||||
<button mat-raised-button color="primary" (click)="openCreateNew($event)">
|
||||
<mat-icon>add</mat-icon>Create a Contact
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,58 @@
|
|||
// 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.
|
||||
|
||||
.contact {
|
||||
&__cards-wrapper {
|
||||
margin-top: 22px;
|
||||
}
|
||||
&__card {
|
||||
width: 400px;
|
||||
padding: 15px;
|
||||
}
|
||||
&__card-actions {
|
||||
padding: 0;
|
||||
}
|
||||
&__loading {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
&__cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
&__actions {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
}
|
||||
.contact-details {
|
||||
&__input {
|
||||
width: 100%;
|
||||
}
|
||||
&__group {
|
||||
margin: 20px 0;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
&__group-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
max-width: 450px;
|
||||
* {
|
||||
min-width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,36 @@
|
|||
// 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 { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ContactComponent } from './contact.component';
|
||||
|
||||
describe('ContactComponent', () => {
|
||||
let component: ContactComponent;
|
||||
let fixture: ComponentFixture<ContactComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ContactComponent],
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(ContactComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
198
console-webapp/src/app/settings/contact/contact.component.ts
Normal file
198
console-webapp/src/app/settings/contact/contact.component.ts
Normal file
|
@ -0,0 +1,198 @@
|
|||
// 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 { Component, Inject } from '@angular/core';
|
||||
import {
|
||||
MatDialog,
|
||||
MAT_DIALOG_DATA,
|
||||
MatDialogRef,
|
||||
} from '@angular/material/dialog';
|
||||
import {
|
||||
MatBottomSheet,
|
||||
MAT_BOTTOM_SHEET_DATA,
|
||||
MatBottomSheetRef,
|
||||
} from '@angular/material/bottom-sheet';
|
||||
import { Contact, ContactService } from './contact.service';
|
||||
import { BreakpointObserver } from '@angular/cdk/layout';
|
||||
import { HttpErrorResponse } from '@angular/common/http';
|
||||
import { MatSnackBar } from '@angular/material/snack-bar';
|
||||
|
||||
enum Operations {
|
||||
DELETE,
|
||||
ADD,
|
||||
UPDATE,
|
||||
}
|
||||
|
||||
interface GroupedContacts {
|
||||
value: string;
|
||||
label: string;
|
||||
contacts: Array<Contact>;
|
||||
}
|
||||
|
||||
let isMobile: boolean;
|
||||
|
||||
const contactTypes: Array<GroupedContacts> = [
|
||||
{ value: 'ADMIN', label: 'Primary contact', contacts: [] },
|
||||
{ value: 'ABUSE', label: 'Abuse contact', contacts: [] },
|
||||
{ value: 'BILLING', label: 'Billing contact', contacts: [] },
|
||||
{ value: 'LEGAL', label: 'Legal contact', contacts: [] },
|
||||
{ value: 'MARKETING', label: 'Marketing contact', contacts: [] },
|
||||
{ value: 'TECH', label: 'Technical contact', contacts: [] },
|
||||
{ value: 'WHOIS', label: 'WHOIS-Inquiry contact', contacts: [] },
|
||||
];
|
||||
|
||||
class ContactDetailsEventsResponder {
|
||||
private ref?: MatDialogRef<any> | MatBottomSheetRef;
|
||||
constructor() {
|
||||
this.onClose = this.onClose.bind(this);
|
||||
}
|
||||
|
||||
setRef(ref: MatDialogRef<any> | MatBottomSheetRef) {
|
||||
this.ref = ref;
|
||||
}
|
||||
|
||||
onClose() {
|
||||
if (this.ref == undefined) {
|
||||
throw "Reference to ContactDetailsDialogComponent hasn't been set. ";
|
||||
}
|
||||
if (this.ref instanceof MatBottomSheetRef) {
|
||||
this.ref.dismiss();
|
||||
} else if (this.ref instanceof MatDialogRef) {
|
||||
this.ref.close();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-contact-details-dialog',
|
||||
templateUrl: 'contact-details.component.html',
|
||||
styleUrls: ['./contact.component.less'],
|
||||
})
|
||||
export class ContactDetailsDialogComponent {
|
||||
onClose!: Function;
|
||||
contact: Contact;
|
||||
contactTypes = contactTypes;
|
||||
operation: Operations;
|
||||
contactIndex: number;
|
||||
|
||||
constructor(
|
||||
public contactService: ContactService,
|
||||
private _snackBar: MatSnackBar,
|
||||
@Inject(isMobile ? MAT_BOTTOM_SHEET_DATA : MAT_DIALOG_DATA)
|
||||
public data: {
|
||||
onClose: Function;
|
||||
contact: Contact;
|
||||
operation: Operations;
|
||||
}
|
||||
) {
|
||||
this.onClose = data.onClose;
|
||||
this.contactIndex = contactService.contacts.findIndex(
|
||||
(c) => c === data.contact
|
||||
);
|
||||
this.contact = JSON.parse(JSON.stringify(data.contact));
|
||||
this.operation = data.operation;
|
||||
}
|
||||
|
||||
saveAndClose() {
|
||||
let operationObservable;
|
||||
if (this.operation === Operations.ADD) {
|
||||
operationObservable = this.contactService.addContact(this.contact);
|
||||
} else if (this.operation === Operations.UPDATE) {
|
||||
operationObservable = this.contactService.updateContact(
|
||||
this.contactIndex,
|
||||
this.contact
|
||||
);
|
||||
} else {
|
||||
throw 'Unknown operation type';
|
||||
}
|
||||
|
||||
operationObservable.subscribe({
|
||||
complete: this.onClose.bind(this),
|
||||
error: (err: HttpErrorResponse) => {
|
||||
this._snackBar.open(err.statusText, undefined, {
|
||||
duration: 1500,
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-contact',
|
||||
templateUrl: './contact.component.html',
|
||||
styleUrls: ['./contact.component.less'],
|
||||
})
|
||||
export default class ContactComponent {
|
||||
loading: boolean = false;
|
||||
constructor(
|
||||
private dialog: MatDialog,
|
||||
private bottomSheet: MatBottomSheet,
|
||||
private breakpointObserver: BreakpointObserver,
|
||||
public contactService: ContactService
|
||||
) {
|
||||
// TODO: Refactor to registrarId service
|
||||
this.loading = true;
|
||||
this.contactService.fetchContacts('zoomco').subscribe(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
|
||||
public get groupedData() {
|
||||
return this.contactService.contacts.reduce((acc, contact) => {
|
||||
contact.types.forEach((type) => {
|
||||
acc
|
||||
.find((group: GroupedContacts) => group.value === type)
|
||||
?.contacts.push(contact);
|
||||
});
|
||||
return acc;
|
||||
}, JSON.parse(JSON.stringify(contactTypes)));
|
||||
}
|
||||
|
||||
deleteContact(contact: Contact) {
|
||||
this.contactService.deleteContact(contact);
|
||||
}
|
||||
|
||||
openCreateNew(e: Event) {
|
||||
const newContact: Contact = {
|
||||
name: '',
|
||||
phoneNumber: '',
|
||||
emailAddress: '',
|
||||
types: [contactTypes[0].value],
|
||||
};
|
||||
this.openDetails(e, newContact, Operations.ADD);
|
||||
}
|
||||
|
||||
openDetails(
|
||||
e: Event,
|
||||
contact: Contact,
|
||||
operation: Operations = Operations.UPDATE
|
||||
) {
|
||||
e.preventDefault();
|
||||
// TODO: handle orientation change
|
||||
isMobile = this.breakpointObserver.isMatched('(max-width: 599px)');
|
||||
const responder = new ContactDetailsEventsResponder();
|
||||
const config = { data: { onClose: responder.onClose, contact, operation } };
|
||||
|
||||
if (isMobile) {
|
||||
const bottomSheetRef = this.bottomSheet.open(
|
||||
ContactDetailsDialogComponent,
|
||||
config
|
||||
);
|
||||
responder.setRef(bottomSheetRef);
|
||||
} else {
|
||||
const dialogRef = this.dialog.open(ContactDetailsDialogComponent, config);
|
||||
responder.setRef(dialogRef);
|
||||
}
|
||||
}
|
||||
}
|
77
console-webapp/src/app/settings/contact/contact.service.ts
Normal file
77
console-webapp/src/app/settings/contact/contact.service.ts
Normal file
|
@ -0,0 +1,77 @@
|
|||
// 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 'src/app/shared/services/backend.service';
|
||||
|
||||
export interface Contact {
|
||||
name: string;
|
||||
phoneNumber: string;
|
||||
emailAddress: string;
|
||||
registrarId?: string;
|
||||
faxNumber?: string;
|
||||
types: Array<string>;
|
||||
visibleInWhoisAsAdmin?: boolean;
|
||||
visibleInWhoisAsTech?: boolean;
|
||||
visibleInDomainWhoisAsAbuse?: boolean;
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root',
|
||||
})
|
||||
export class ContactService {
|
||||
contacts: Contact[] = [];
|
||||
|
||||
constructor(private backend: BackendService) {}
|
||||
|
||||
// TODO: Come up with a better handling for registrarId
|
||||
fetchContacts(registrarId: string): Observable<Contact[]> {
|
||||
return this.backend.getContacts(registrarId).pipe(
|
||||
tap((contacts) => {
|
||||
this.contacts = contacts;
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
saveContacts(
|
||||
contacts: Contact[],
|
||||
registrarId?: string
|
||||
): Observable<Contact[]> {
|
||||
return this.backend
|
||||
.postContacts(registrarId || 'default', contacts)
|
||||
.pipe(
|
||||
tap((_) => {
|
||||
this.contacts = contacts;
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
updateContact(index: number, contact: Contact) {
|
||||
const newContacts = this.contacts.map((c, i) =>
|
||||
i === index ? contact : c
|
||||
);
|
||||
return this.saveContacts(newContacts);
|
||||
}
|
||||
|
||||
addContact(contact: Contact) {
|
||||
const newContacts = this.contacts.concat([contact]);
|
||||
return this.saveContacts(newContacts);
|
||||
}
|
||||
|
||||
deleteContact(contact: Contact) {
|
||||
const newContacts = this.contacts.filter((c) => c !== contact);
|
||||
return this.saveContacts(newContacts);
|
||||
}
|
||||
}
|
|
@ -0,0 +1 @@
|
|||
<p>registrars component works!</p>
|
|
@ -0,0 +1,13 @@
|
|||
// 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.
|
|
@ -0,0 +1,36 @@
|
|||
// 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 { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { RegistrarsComponent } from './registrars.component';
|
||||
|
||||
describe('RegistrarsComponent', () => {
|
||||
let component: RegistrarsComponent;
|
||||
let fixture: ComponentFixture<RegistrarsComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [RegistrarsComponent],
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(RegistrarsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
|
@ -0,0 +1,22 @@
|
|||
// 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 { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-registrars',
|
||||
templateUrl: './registrars.component.html',
|
||||
styleUrls: ['./registrars.component.less'],
|
||||
})
|
||||
export default class RegistrarsComponent {}
|
|
@ -0,0 +1 @@
|
|||
<p>security works!</p>
|
|
@ -0,0 +1,13 @@
|
|||
// 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.
|
|
@ -0,0 +1,36 @@
|
|||
// 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 { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { SecurityComponent } from './security.component';
|
||||
|
||||
describe('SecurityComponent', () => {
|
||||
let component: SecurityComponent;
|
||||
let fixture: ComponentFixture<SecurityComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [SecurityComponent],
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(SecurityComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
|
@ -0,0 +1,22 @@
|
|||
// 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 { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-security',
|
||||
templateUrl: './security.component.html',
|
||||
styleUrls: ['./security.component.less'],
|
||||
})
|
||||
export default class SecurityComponent {}
|
24
console-webapp/src/app/settings/settings.component.html
Normal file
24
console-webapp/src/app/settings/settings.component.html
Normal file
|
@ -0,0 +1,24 @@
|
|||
<div class="console-settings">
|
||||
<h1>Settings</h1>
|
||||
<nav mat-tab-nav-bar [tabPanel]="tabPanel">
|
||||
<a mat-tab-link routerLink="contact" routerLinkActive="active-link"
|
||||
>Contact Info</a
|
||||
>
|
||||
<a mat-tab-link routerLink="whois" routerLinkActive="active-link"
|
||||
>WHOIS Info</a
|
||||
>
|
||||
<a mat-tab-link routerLink="security" routerLinkActive="active-link"
|
||||
>Security</a
|
||||
>
|
||||
<a mat-tab-link routerLink="epp-password" routerLinkActive="active-link"
|
||||
>EPP Password</a
|
||||
>
|
||||
<a mat-tab-link routerLink="users" routerLinkActive="active-link">Users</a>
|
||||
<a mat-tab-link routerLink="registrars" routerLinkActive="active-link"
|
||||
>Registrars</a
|
||||
>
|
||||
</nav>
|
||||
<mat-tab-nav-panel #tabPanel>
|
||||
<router-outlet></router-outlet>
|
||||
</mat-tab-nav-panel>
|
||||
</div>
|
24
console-webapp/src/app/settings/settings.component.less
Normal file
24
console-webapp/src/app/settings/settings.component.less
Normal file
|
@ -0,0 +1,24 @@
|
|||
// 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.
|
||||
|
||||
.console-settings {
|
||||
.mdc-tab {
|
||||
&.active-link {
|
||||
border-bottom: 2px solid #673ab7;
|
||||
.mdc-tab__text-label {
|
||||
color: #673ab7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
36
console-webapp/src/app/settings/settings.component.spec.ts
Normal file
36
console-webapp/src/app/settings/settings.component.spec.ts
Normal file
|
@ -0,0 +1,36 @@
|
|||
// 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 { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { SettingsComponent } from './settings.component';
|
||||
|
||||
describe('SettingsComponent', () => {
|
||||
let component: SettingsComponent;
|
||||
let fixture: ComponentFixture<SettingsComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [SettingsComponent],
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(SettingsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
23
console-webapp/src/app/settings/settings.component.ts
Normal file
23
console-webapp/src/app/settings/settings.component.ts
Normal file
|
@ -0,0 +1,23 @@
|
|||
// 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 { Component, ViewEncapsulation } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-settings',
|
||||
templateUrl: './settings.component.html',
|
||||
styleUrls: ['./settings.component.less'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class SettingsComponent {}
|
|
@ -0,0 +1 @@
|
|||
<p>users works!</p>
|
13
console-webapp/src/app/settings/users/users.component.less
Normal file
13
console-webapp/src/app/settings/users/users.component.less
Normal file
|
@ -0,0 +1,13 @@
|
|||
// 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.
|
|
@ -0,0 +1,36 @@
|
|||
// 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 { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { UsersComponent } from './users.component';
|
||||
|
||||
describe('UsersComponent', () => {
|
||||
let component: UsersComponent;
|
||||
let fixture: ComponentFixture<UsersComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [UsersComponent],
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(UsersComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
22
console-webapp/src/app/settings/users/users.component.ts
Normal file
22
console-webapp/src/app/settings/users/users.component.ts
Normal file
|
@ -0,0 +1,22 @@
|
|||
// 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 { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-users',
|
||||
templateUrl: './users.component.html',
|
||||
styleUrls: ['./users.component.less'],
|
||||
})
|
||||
export default class UsersComponent {}
|
|
@ -0,0 +1 @@
|
|||
<p>whois works!</p>
|
13
console-webapp/src/app/settings/whois/whois.component.less
Normal file
13
console-webapp/src/app/settings/whois/whois.component.less
Normal file
|
@ -0,0 +1,13 @@
|
|||
// 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.
|
|
@ -0,0 +1,36 @@
|
|||
// 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 { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { WhoisComponent } from './whois.component';
|
||||
|
||||
describe('WhoisComponent', () => {
|
||||
let component: WhoisComponent;
|
||||
let fixture: ComponentFixture<WhoisComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [WhoisComponent],
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(WhoisComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
22
console-webapp/src/app/settings/whois/whois.component.ts
Normal file
22
console-webapp/src/app/settings/whois/whois.component.ts
Normal file
|
@ -0,0 +1,22 @@
|
|||
// 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 { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-whois',
|
||||
templateUrl: './whois.component.html',
|
||||
styleUrls: ['./whois.component.less'],
|
||||
})
|
||||
export default class WhoisComponent {}
|
75
console-webapp/src/app/shared/services/backend.service.ts
Normal file
75
console-webapp/src/app/shared/services/backend.service.ts
Normal file
|
@ -0,0 +1,75 @@
|
|||
// 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 { HttpClient, HttpErrorResponse } from '@angular/common/http';
|
||||
import { Observable, catchError, of } from 'rxjs';
|
||||
import { Contact } from '../../settings/contact/contact.service';
|
||||
|
||||
@Injectable()
|
||||
export class BackendService {
|
||||
constructor(private http: HttpClient) {}
|
||||
|
||||
errorCatcher<Type>(
|
||||
error: HttpErrorResponse,
|
||||
mockData?: Type
|
||||
): Observable<Type> {
|
||||
if (error.error instanceof Error) {
|
||||
// A client-side or network error occurred. Handle it accordingly.
|
||||
console.error('An error occurred:', error.error.message);
|
||||
} else {
|
||||
// The backend returned an unsuccessful response code.
|
||||
// The response body may contain clues as to what went wrong,
|
||||
console.error(
|
||||
`Backend returned code ${error.status}, body was: ${error.error}`
|
||||
);
|
||||
}
|
||||
|
||||
// return throwError(() => {throw "Failed"});
|
||||
return of(<Type>mockData);
|
||||
}
|
||||
|
||||
getContacts(registrarId: string): Observable<Contact[]> {
|
||||
const mockData = [
|
||||
{
|
||||
name: 'Name Lastname',
|
||||
emailAddress: 'test@google.com',
|
||||
registrarId: 'zoomco',
|
||||
types: ['ADMIN'],
|
||||
visibleInWhoisAsAdmin: false,
|
||||
visibleInWhoisAsTech: false,
|
||||
visibleInDomainWhoisAsAbuse: false,
|
||||
},
|
||||
{
|
||||
name: 'Testname testlastname',
|
||||
emailAddress: 'testasd@google.com',
|
||||
registrarId: 'zoomco',
|
||||
visibleInWhoisAsAdmin: false,
|
||||
visibleInWhoisAsTech: false,
|
||||
visibleInDomainWhoisAsAbuse: false,
|
||||
types: ['BILLING'],
|
||||
},
|
||||
];
|
||||
return this.http
|
||||
.get<Contact[]>(`/console-api/settings/contacts?registrarId=${registrarId}`)
|
||||
.pipe(catchError((err) => this.errorCatcher<Contact[]>(err, <Contact[]>mockData)));
|
||||
}
|
||||
|
||||
postContacts(registrarId: string, contacts: Contact[]): Observable<Contact[]> {
|
||||
return this.http.post<Contact[]>(
|
||||
`/console-api/settings/contacts?registrarId=${registrarId}`,
|
||||
{ contacts }
|
||||
);
|
||||
}
|
||||
}
|
|
@ -1,12 +1,23 @@
|
|||
|
||||
<div class="console-tlds__cards">
|
||||
<mat-card class="console-tlds__card">
|
||||
<mat-card-title>.how</mat-card-title>
|
||||
<mat-card-subtitle>A place for thinkers, tinkerers, and knowledge seekers</mat-card-subtitle>
|
||||
<mat-card-subtitle
|
||||
>A place for thinkers, tinkerers, and knowledge seekers</mat-card-subtitle
|
||||
>
|
||||
<mat-card-actions class="console-tlds__card-links">
|
||||
<a title="Onboarding Now" href="#" target="_blank" rel="noopener">Onboarding Now</a>
|
||||
<a title="Marketing Materials" href="#" target="_blank" rel="noopener">Marketing Materials</a>
|
||||
<a title="Visit get.how for more information" href="#" target="_blank" rel="noopener">Visit get.how for more information</a>
|
||||
<a title="Onboarding Now" href="#" target="_blank" rel="noopener"
|
||||
>Onboarding Now</a
|
||||
>
|
||||
<a title="Marketing Materials" href="#" target="_blank" rel="noopener"
|
||||
>Marketing Materials</a
|
||||
>
|
||||
<a
|
||||
title="Visit get.how for more information"
|
||||
href="#"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>Visit get.how for more information</a
|
||||
>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
@ -14,11 +25,23 @@
|
|||
<div class="console-tlds__cards">
|
||||
<mat-card class="console-tlds__card">
|
||||
<mat-card-title>.soy</mat-card-title>
|
||||
<mat-card-subtitle>A place for thinkers, tinkerers, and knowledge seekers</mat-card-subtitle>
|
||||
<mat-card-subtitle
|
||||
>A place for thinkers, tinkerers, and knowledge seekers</mat-card-subtitle
|
||||
>
|
||||
<mat-card-actions class="console-tlds__card-links">
|
||||
<a title="Onboarding Now" href="#" target="_blank" rel="noopener">Onboarding Now</a>
|
||||
<a title="Marketing Materials" href="#" target="_blank" rel="noopener">Marketing Materials</a>
|
||||
<a title="Visit get.how for more information" href="#" target="_blank" rel="noopener">Visit iam.soy for more information</a>
|
||||
<a title="Onboarding Now" href="#" target="_blank" rel="noopener"
|
||||
>Onboarding Now</a
|
||||
>
|
||||
<a title="Marketing Materials" href="#" target="_blank" rel="noopener"
|
||||
>Marketing Materials</a
|
||||
>
|
||||
<a
|
||||
title="Visit get.how for more information"
|
||||
href="#"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>Visit iam.soy for more information</a
|
||||
>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
// Copyright 2022 The Nomulus Authors. All Rights Reserved.
|
||||
// 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.
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
// Copyright 2022 The Nomulus Authors. All Rights Reserved.
|
||||
// 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.
|
||||
|
@ -15,7 +15,7 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { TldsComponent } from './tlds.component';
|
||||
import {MaterialModule} from '../material.module';
|
||||
import { MaterialModule } from '../material.module';
|
||||
|
||||
describe('TldsComponent', () => {
|
||||
let component: TldsComponent;
|
||||
|
@ -24,9 +24,8 @@ describe('TldsComponent', () => {
|
|||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [MaterialModule],
|
||||
declarations: [ TldsComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
declarations: [TldsComponent],
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(TldsComponent);
|
||||
component = fixture.componentInstance;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
// Copyright 2022 The Nomulus Authors. All Rights Reserved.
|
||||
// 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.
|
||||
|
@ -12,18 +12,11 @@
|
|||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-tlds',
|
||||
templateUrl: './tlds.component.html',
|
||||
styleUrls: ['./tlds.component.less']
|
||||
styleUrls: ['./tlds.component.less'],
|
||||
})
|
||||
export class TldsComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
}
|
||||
export class TldsComponent {}
|
||||
|
|
|
@ -13,5 +13,5 @@
|
|||
// limitations under the License.
|
||||
|
||||
export const environment = {
|
||||
production: true
|
||||
production: true,
|
||||
};
|
||||
|
|
|
@ -17,7 +17,7 @@
|
|||
// The list of file replacements can be found in `angular.json`.
|
||||
|
||||
export const environment = {
|
||||
production: false
|
||||
production: false,
|
||||
};
|
||||
|
||||
/*
|
||||
|
|
|
@ -1,16 +1,22 @@
|
|||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Nomulus Console</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
</head>
|
||||
<body class="mat-typography">
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Nomulus Console</title>
|
||||
<base href="/" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
<body class="mat-typography">
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -22,5 +22,6 @@ if (environment.production) {
|
|||
enableProdMode();
|
||||
}
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule)
|
||||
.catch(err => console.error(err));
|
||||
platformBrowserDynamic()
|
||||
.bootstrapModule(AppModule)
|
||||
.catch((err) => console.error(err));
|
||||
|
|
|
@ -45,8 +45,7 @@
|
|||
/***************************************************************************************************
|
||||
* Zone JS is required by default for Angular itself.
|
||||
*/
|
||||
import 'zone.js'; // Included with Angular CLI.
|
||||
|
||||
import 'zone.js'; // Included with Angular CLI.
|
||||
|
||||
/***************************************************************************************************
|
||||
* APPLICATION IMPORTS
|
||||
|
|
|
@ -12,7 +12,11 @@
|
|||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
|
||||
|
||||
html, body { height: 100%; }
|
||||
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Roboto, "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
|
|
@ -4,11 +4,11 @@ import 'zone.js/testing';
|
|||
import { getTestBed } from '@angular/core/testing';
|
||||
import {
|
||||
BrowserDynamicTestingModule,
|
||||
platformBrowserDynamicTesting
|
||||
platformBrowserDynamicTesting,
|
||||
} from '@angular/platform-browser-dynamic/testing';
|
||||
|
||||
// First, initialize the Angular testing environment.
|
||||
getTestBed().initTestEnvironment(
|
||||
BrowserDynamicTestingModule,
|
||||
platformBrowserDynamicTesting(),
|
||||
platformBrowserDynamicTesting()
|
||||
);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue