mirrors/nomulus
1
0
Fork 0
mirror of https://github.com/google/nomulus synced 2025-12-23 06:15:42 +00:00
Code Issues Releases Wiki Activity

Add console users screen (#2576)

Browse Source
This commit is contained in:
Pavlo Tkach
2024-10-08 12:00:47 -04:00
committed by GitHub
parent 5e41e84b8d
commit 6e77c89cd6
15 changed files with 298 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
console-webapp/src/app/app-routing.module.ts
View File

@@ -18,15 +18,12 @@ import { BillingInfoComponent } from './billingInfo/billingInfo.component';
import { DomainListComponent } from './domains/domainList.component';
import { HomeComponent } from './home/home.component';
import { RegistryLockVerifyComponent } from './lock/registryLockVerify.component';
import { NewOteComponent } from './ote/newOte.component';
import { OteStatusComponent } from './ote/oteStatus.component';
import { RegistrarDetailsComponent } from './registrar/registrarDetails.component';
import { RegistrarComponent } from './registrar/registrarsTable.component';
import { ResourcesComponent } from './resources/resources.component';
import ContactComponent from './settings/contact/contact.component';
import SecurityComponent from './settings/security/security.component';
import { SettingsComponent } from './settings/settings.component';
import UsersComponent from './settings/users/users.component';
import WhoisComponent from './settings/whois/whois.component';
import { SupportComponent } from './support/support.component';
@@ -37,6 +34,7 @@ export interface RouteWithIcon extends Route {
export const PATHS = {
NewOteComponent: 'new-ote',
OteStatusComponent: 'ote-status/:registrarId',
UsersComponent: 'users',
};
export const routes: RouteWithIcon[] = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
@@ -94,10 +92,6 @@ export const routes: RouteWithIcon[] = [
component: SecurityComponent,
title: 'Security',
},
{
path: UsersComponent.PATH,
component: UsersComponent,
},
],
},
// {
@@ -128,6 +122,13 @@ export const routes: RouteWithIcon[] = [
title: 'Resources',
iconName: 'description',
},
{
path: PATHS.UsersComponent,
title: 'Users',
iconName: 'manage_accounts',
loadComponent: () =>
import('./users/users.component').then((mod) => mod.UsersComponent),
},
{
path: SupportComponent.PATH,
component: SupportComponent,

13
console-webapp/src/app/app.module.ts
View File

@@ -32,8 +32,6 @@ import { HeaderComponent } from './header/header.component';
import { HomeComponent } from './home/home.component';
import { RegistryLockVerifyComponent } from './lock/registryLockVerify.component';
import { NavigationComponent } from './navigation/navigation.component';
import { NewOteComponent } from './ote/newOte.component';
import { OteStatusComponent } from './ote/oteStatus.component';
import NewRegistrarComponent from './registrar/newRegistrar.component';
import { RegistrarDetailsComponent } from './registrar/registrarDetails.component';
import { RegistrarSelectorComponent } from './registrar/registrarSelector.component';
@@ -58,6 +56,14 @@ import { SnackBarModule } from './snackbar.module';
import { SupportComponent } from './support/support.component';
import { TldsComponent } from './tlds/tlds.component';
@NgModule({
declarations: [SelectedRegistrarWrapper],
imports: [MaterialModule],
exports: [SelectedRegistrarWrapper],
providers: [],
})
export class SelectedRegistrarModule {}
@NgModule({
declarations: [
AppComponent,
@@ -80,7 +86,6 @@ import { TldsComponent } from './tlds/tlds.component';
ResourcesComponent,
SecurityComponent,
SecurityEditComponent,
SelectedRegistrarWrapper,
SettingsComponent,
SettingsContactComponent,
SupportComponent,
@@ -96,8 +101,8 @@ import { TldsComponent } from './tlds/tlds.component';
FormsModule,
MaterialModule,
SnackBarModule,
SelectedRegistrarModule,
],
exports: [SelectedRegistrarWrapper],
providers: [
BackendService,
BreakPointObserverService,

12
console-webapp/src/app/navigation/navigation.component.ts
View File

@@ -17,8 +17,9 @@ import { Component } from '@angular/core';
import { MatTreeNestedDataSource } from '@angular/material/tree';
import { NavigationEnd, Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { RouteWithIcon, routes } from '../app-routing.module';
import { RouteWithIcon, routes, PATHS } from '../app-routing.module';
import { RESTRICTED_ELEMENTS } from '../shared/directives/userLevelVisiblity.directive';
import { RegistrarComponent } from '../registrar/registrarsTable.component';
interface NavMenuNode extends RouteWithIcon {
parentRoute?: RouteWithIcon;
@@ -59,9 +60,12 @@ export class NavigationComponent {
}
getElementId(node: RouteWithIcon) {
return node.path === 'registrars'
? RESTRICTED_ELEMENTS.REGISTRAR_ELEMENT
: null;
if (node.path === RegistrarComponent.PATH) {
return RESTRICTED_ELEMENTS.REGISTRAR_ELEMENT;
} else if (node.path === PATHS.UsersComponent) {
return RESTRICTED_ELEMENTS.USERS;
}
return null;
}
syncExpandedNavigationWithRoute(url: string) {

1
console-webapp/src/app/settings/users/users.component.html
View File

@@ -1 +0,0 @@
<p>users works!</p>

13
console-webapp/src/app/settings/users/users.component.scss
View File

@@ -1,13 +0,0 @@
// 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.
// 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.

36
console-webapp/src/app/settings/users/users.component.spec.ts
View File

@@ -1,36 +0,0 @@
// 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.
// 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();
});
});

9
console-webapp/src/app/shared/directives/userLevelVisiblity.directive.ts
View File

@@ -18,10 +18,17 @@ import { UserDataService } from '../services/userData.service';
export enum RESTRICTED_ELEMENTS {
REGISTRAR_ELEMENT,
OTE,
USERS,
}
export const DISABLED_ELEMENTS_PER_ROLE = {
NONE: [RESTRICTED_ELEMENTS.REGISTRAR_ELEMENT, RESTRICTED_ELEMENTS.OTE],
NONE: [
RESTRICTED_ELEMENTS.REGISTRAR_ELEMENT,
RESTRICTED_ELEMENTS.OTE,
RESTRICTED_ELEMENTS.USERS,
],
SUPPORT_LEAD: [RESTRICTED_ELEMENTS.USERS],
SUPPORT_AGENT: [RESTRICTED_ELEMENTS.USERS],
};
@Directive({

13
console-webapp/src/app/shared/services/backend.service.ts
View File

@@ -21,6 +21,7 @@ import { DomainLocksResult } from 'src/app/domains/registryLock.service';
import { RegistryLockVerificationResponse } from 'src/app/lock/registryLockVerify.service';
import { OteCreateResponse } from 'src/app/ote/newOte.component';
import { OteStatusResponse } from 'src/app/ote/oteStatus.component';
import { User } from 'src/app/users/users.service';
import {
Registrar,
SecuritySettingsBackendModel,
@@ -159,6 +160,18 @@ export class BackendService {
);
}
getUsers(registrarId: string): Observable<User[]> {
return this.http
.get<User[]>(`/console-api/users?registrarId=${registrarId}`)
.pipe(catchError((err) => this.errorCatcher<User[]>(err)));
}
createUser(registrarId: string): Observable<User> {
return this.http
.post<User>(`/console-api/users?registrarId=${registrarId}`, {})
.pipe(catchError((err) => this.errorCatcher<User>(err)));
}
getUserData(): Observable<UserData> {
return this.http
.get<UserData>('/console-api/userdata')

43
console-webapp/src/app/users/users.component.html Normal file
View File

@@ -0,0 +1,43 @@
<app-selected-registrar-wrapper>
@if (usersService.isLoaded) {
<div class="console-app__users">
<div class="console-app__users-header">
<h1 class="mat-headline-4">Users</h1>
<div class="spacer"></div>
<button
mat-flat-button
(click)="createNewUser()"
aria-label="Create new user"
color="primary"
>
Create New User
</button>
</div>
<mat-table
[dataSource]="dataSource"
class="mat-elevation-z0"
class="console-app__users-table"
matSort
>
<ng-container
*ngFor="let column of columns"
[matColumnDef]="column.columnDef"
>
<mat-header-cell *matHeaderCellDef>
{{ column.header }}
</mat-header-cell>
<mat-cell
*matCellDef="let row"
[innerHTML]="column.cell(row)"
></mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
</div>
} @else {
<div class="console-app__users-spinner">
<mat-spinner />
</div>
}
</app-selected-registrar-wrapper>

30
console-webapp/src/app/settings/users/users.component.ts → console-webapp/src/app/users/users.component.scss
View File

@@ -12,13 +12,27 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component } from '@angular/core';
.console-app {
&__users-spinner {
align-items: center;
display: flex;
justify-content: center;
}
@Component({
selector: 'app-users',
templateUrl: './users.component.html',
styleUrls: ['./users.component.scss'],
})
export default class UsersComponent {
public static PATH = 'users';
$min-width: 756px;
$max-width: 1024px;
&__users-table {
min-width: $min-width !important;
max-width: $max-width;
}
&__users-new {
margin-left: 20px;
}
&__users-header {
display: flex;
justify-content: space-between;
}
}

105
console-webapp/src/app/users/users.component.ts Normal file
View File

@@ -0,0 +1,105 @@
// 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.
// 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 { CommonModule } from '@angular/common';
import { HttpErrorResponse } from '@angular/common/http';
import { Component, effect, ViewChild } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { SelectedRegistrarModule } from '../app.module';
import { MaterialModule } from '../material.module';
import { RegistrarService } from '../registrar/registrar.service';
import { SnackBarModule } from '../snackbar.module';
import { User, UsersService } from './users.service';
export const columns = [
{
columnDef: 'emailAddress',
header: 'User email',
cell: (record: User) => `${record.emailAddress || ''}`,
},
{
columnDef: 'role',
header: 'User role',
cell: (record: User) => `${record.role || ''}`,
},
];
@Component({
selector: 'app-users',
templateUrl: './users.component.html',
styleUrls: ['./users.component.scss'],
standalone: true,
imports: [
MaterialModule,
SnackBarModule,
CommonModule,
SelectedRegistrarModule,
],
providers: [UsersService],
})
export class UsersComponent {
dataSource: MatTableDataSource<User>;
columns = columns;
displayedColumns = this.columns.map((c) => c.columnDef);
@ViewChild(MatSort) sort!: MatSort;
constructor(
protected registrarService: RegistrarService,
protected usersService: UsersService,
private _snackBar: MatSnackBar
) {
this.dataSource = new MatTableDataSource<User>(usersService.users());
effect(() => {
if (registrarService.registrarId()) {
this.loadUsers();
}
});
effect(() => {
this.dataSource.data = usersService.users();
});
}
ngAfterViewInit() {
this.dataSource.sort = this.sort;
}
loadUsers() {
this.usersService.fetchUsers().subscribe({
error: (err: HttpErrorResponse) => {
this._snackBar.open(err.error || err.message);
},
});
}
createNewUser() {
this.usersService.createNewUser().subscribe({
next: (newUser) => {
this._snackBar.open(
`New user with email ${newUser.emailAddress} has been created.`,
'',
{
duration: 2000,
}
);
},
error: (err: HttpErrorResponse) => {
this._snackBar.open(err.error || err.message);
},
});
}
}

60
console-webapp/src/app/users/users.service.ts Normal file
View File

@@ -0,0 +1,60 @@
// 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.
// 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, signal } from '@angular/core';
import { tap } from 'rxjs';
import { RegistrarService } from '../registrar/registrar.service';
import { BackendService } from '../shared/services/backend.service';
export interface CreateAutoTimestamp {
creationTime: string;
}
export interface User {
emailAddress: String;
role: String;
password?: String;
}
@Injectable()
export class UsersService {
isLoaded = false;
users = signal<User[]>([]);
constructor(
private backendService: BackendService,
private registrarService: RegistrarService
) {}
fetchUsers() {
return this.backendService
.getUsers(this.registrarService.registrarId())
.pipe(
tap((users: User[]) => {
this.isLoaded = true;
this.users.set(users);
})
);
}
createNewUser() {
return this.backendService
.createUser(this.registrarService.registrarId())
.pipe(
tap((newUser: User) => {
this.users.set([...this.users(), newUser]);
})
);
}
}