Skip to content

Commit f649d96

Browse files
ptkachptkach
authored
Add user email prefix to the console user create (#2623)
1 parent e5ebc5a commit f649d96

File tree

11 files changed

+224
-130
lines changed

11 files changed

+224
-130
lines changed

console-webapp/src/app/users/userEdit.component.html renamed to console-webapp/src/app/users/userDetails.component.html

Lines changed: 5 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -11,31 +11,10 @@ <h1 class="mat-headline-4">Editing {{ userDetails().emailAddress }}</h1>
1111
<mat-icon>arrow_back</mat-icon>
1212
</button>
1313
</div>
14-
<form (ngSubmit)="saveEdit()">
15-
<p>
16-
<mat-form-field appearance="outline">
17-
<mat-label
18-
>User Role:
19-
<mat-icon
20-
matTooltip="Viewer role doesn't allow making updates; Editor role allows updates, like Contacts delete or SSL certificate change"
21-
>help_outline</mat-icon
22-
></mat-label
23-
>
24-
<mat-select [(ngModel)]="userRole" name="userRole">
25-
<mat-option value="PRIMARY_CONTACT">Editor</mat-option>
26-
<mat-option value="ACCOUNT_MANAGER">Viewer</mat-option>
27-
</mat-select>
28-
</mat-form-field>
29-
</p>
30-
<button
31-
mat-flat-button
32-
color="primary"
33-
aria-label="Save user"
34-
type="submit"
35-
>
36-
Save
37-
</button>
38-
</form>
14+
<app-user-edit-form
15+
[user]="userDetails()"
16+
(onEditComplete)="saveEdit($event)"
17+
/>
3918
} @else { @if(isNewUser) {
4019
<h1 class="mat-headline-4">
4120
{{ userDetails().emailAddress + " successfully created" }}
@@ -53,7 +32,7 @@ <h1 class="mat-headline-4">User details</h1>
5332
mat-flat-button
5433
color="primary"
5534
aria-label="Edit User"
56-
(click)="userRole = userDetails().role; isEditing = true"
35+
(click)="isEditing = true"
5736
>
5837
<mat-icon>edit</mat-icon>
5938
Edit

console-webapp/src/app/users/userEdit.component.scss renamed to console-webapp/src/app/users/userDetails.component.scss

File renamed without changes.

console-webapp/src/app/users/userEdit.component.ts renamed to console-webapp/src/app/users/userDetails.component.ts

Lines changed: 17 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -19,29 +19,30 @@ import { SelectedRegistrarModule } from '../app.module';
1919
import { MaterialModule } from '../material.module';
2020
import { RegistrarService } from '../registrar/registrar.service';
2121
import { SnackBarModule } from '../snackbar.module';
22-
import { UsersService, roleToDescription } from './users.service';
22+
import { UsersService, roleToDescription, User } from './users.service';
2323
import { FormsModule } from '@angular/forms';
24+
import { UserEditFormComponent } from './userEditForm.component';
2425

2526
@Component({
2627
selector: 'app-user-edit',
27-
templateUrl: './userEdit.component.html',
28-
styleUrls: ['./userEdit.component.scss'],
28+
templateUrl: './userDetails.component.html',
29+
styleUrls: ['./userDetails.component.scss'],
2930
standalone: true,
3031
imports: [
3132
FormsModule,
3233
MaterialModule,
3334
SnackBarModule,
3435
CommonModule,
3536
SelectedRegistrarModule,
37+
UserEditFormComponent,
3638
],
3739
providers: [],
3840
})
39-
export class UserEditComponent {
41+
export class UserDetailsComponent {
4042
isEditing = false;
4143
isPasswordVisible = false;
4244
isNewUser = false;
4345
isLoading = false;
44-
userRole = '';
4546

4647
userDetails = computed(() => {
4748
return this.usersService
@@ -84,22 +85,17 @@ export class UserEditComponent {
8485
this.usersService.currentlyOpenUserEmail.set('');
8586
}
8687

87-
saveEdit() {
88+
saveEdit(user: User) {
8889
this.isLoading = true;
89-
this.usersService
90-
.updateUser({
91-
role: this.userRole,
92-
emailAddress: this.userDetails().emailAddress,
93-
})
94-
.subscribe({
95-
error: (err) => {
96-
this._snackBar.open(err.error || err.message);
97-
this.isLoading = false;
98-
},
99-
complete: () => {
100-
this.isLoading = false;
101-
this.isEditing = false;
102-
},
103-
});
90+
this.usersService.updateUser(user).subscribe({
91+
error: (err) => {
92+
this._snackBar.open(err.error || err.message);
93+
this.isLoading = false;
94+
},
95+
complete: () => {
96+
this.isLoading = false;
97+
this.isEditing = false;
98+
},
99+
});
104100
}
105101
}

‎console-webapp/src/app/users/userEditForm.component.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<form (ngSubmit)="saveEdit($event)" #form>
2+
<p *ngIf="isNew()">
3+
<mat-form-field appearance="outline">
4+
<mat-label
5+
>User name prefix:
6+
<mat-icon
7+
matTooltip="Prefix will be combined with registrar ID to create a unique user name - {prefix}.{registrarId}@registry.google"
8+
>help_outline</mat-icon
9+
></mat-label
10+
>
11+
<input
12+
matInput
13+
minlength="3"
14+
maxlength="3"
15+
[required]="true"
16+
[(ngModel)]="user().emailAddress"
17+
[ngModelOptions]="{ standalone: true }"
18+
/>
19+
</mat-form-field>
20+
</p>
21+
<p>
22+
<mat-form-field appearance="outline">
23+
<mat-label
24+
>User Role:
25+
<mat-icon
26+
matTooltip="Viewer role doesn't allow making updates; Editor role allows updates, like Contacts delete or SSL certificate change"
27+
>help_outline</mat-icon
28+
></mat-label
29+
>
30+
<mat-select [(ngModel)]="user().role" name="userRole">
31+
<mat-option value="PRIMARY_CONTACT">Editor</mat-option>
32+
<mat-option value="ACCOUNT_MANAGER">Viewer</mat-option>
33+
</mat-select>
34+
</mat-form-field>
35+
</p>
36+
<button mat-flat-button color="primary" aria-label="Save user" type="submit">
37+
Save
38+
</button>
39+
</form>

‎console-webapp/src/app/users/userEditForm.component.scss‎

Whitespace-only changes.

‎console-webapp/src/app/users/userEditForm.component.ts‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
// Copyright 2024 The Nomulus Authors. All Rights Reserved.
2+
//
3+
// Licensed under the Apache License, Version 2.0 (the "License");
4+
// you may not use this file except in compliance with the License.
5+
// You may obtain a copy of the License at
6+
//
7+
// http://www.apache.org/licenses/LICENSE-2.0
8+
//
9+
// Unless required by applicable law or agreed to in writing, software
10+
// distributed under the License is distributed on an "AS IS" BASIS,
11+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12+
// See the License for the specific language governing permissions and
13+
// limitations under the License.
14+
15+
import { CommonModule } from '@angular/common';
16+
import {
17+
Component,
18+
ElementRef,
19+
EventEmitter,
20+
input,
21+
Output,
22+
ViewChild,
23+
} from '@angular/core';
24+
import { MaterialModule } from '../material.module';
25+
import { FormsModule } from '@angular/forms';
26+
import { User } from './users.service';
27+
28+
@Component({
29+
selector: 'app-user-edit-form',
30+
templateUrl: './userEditForm.component.html',
31+
styleUrls: ['./userEditForm.component.scss'],
32+
standalone: true,
33+
imports: [FormsModule, MaterialModule, CommonModule],
34+
providers: [],
35+
})
36+
export class UserEditFormComponent {
37+
@ViewChild('form') form!: ElementRef;
38+
isNew = input<boolean>(false);
39+
user = input<User>(
40+
{
41+
emailAddress: '',
42+
role: 'ACCOUNT_MANAGER',
43+
},
44+
// @ts-ignore - legit option, typescript fails to match it to a proper type
45+
{ transform: (user: User) => structuredClone(user) }
46+
);
47+
48+
@Output() onEditComplete = new EventEmitter<User>();
49+
50+
saveEdit(e: SubmitEvent) {
51+
e.preventDefault();
52+
if (this.form.nativeElement.checkValidity()) {
53+
this.onEditComplete.emit(this.user());
54+
} else {
55+
this.form.nativeElement.reportValidity();
56+
}
57+
}
58+
}

‎console-webapp/src/app/users/users.component.html‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,8 @@
44
<mat-spinner />
55
</div>
66
} @else if(selectingExistingUser) {
7-
87
<div class="console-app__users">
98
<h1 class="mat-headline-4">Add existing user</h1>
10-
119
<p>
1210
<button
1311
mat-icon-button
@@ -61,6 +59,19 @@ <h1>Select registrar from which to add a new user</h1>
6159
</div>
6260
} @else if(usersService.currentlyOpenUserEmail()) {
6361
<app-user-edit></app-user-edit>
62+
} @else if(isNew) {
63+
<h1 class="mat-headline-4">New User Form</h1>
64+
<div class="spacer"></div>
65+
<p>
66+
<button
67+
mat-icon-button
68+
aria-label="Back to users list"
69+
(click)="isNew = false"
70+
>
71+
<mat-icon>arrow_back</mat-icon>
72+
</button>
73+
</p>
74+
<app-user-edit-form [isNew]="true" (onEditComplete)="createNewUser($event)" />
6475
} @else {
6576
<div class="console-app__users">
6677
<div class="console-app__users-header">
@@ -79,11 +90,11 @@ <h1 class="mat-headline-4">Users</h1>
7990
</button>
8091
<button
8192
mat-flat-button
82-
(click)="createNewUser()"
93+
(click)="isNew = true"
8394
aria-label="Create new user"
8495
color="primary"
8596
>
86-
Create a Viewer User
97+
Create New User
8798
</button>
8899
</div>
89100
</div>

‎console-webapp/src/app/users/users.component.ts‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,13 @@ import { SelectedRegistrarModule } from '../app.module';
2020
import { MaterialModule } from '../material.module';
2121
import { RegistrarService } from '../registrar/registrar.service';
2222
import { SnackBarModule } from '../snackbar.module';
23-
import { UserEditComponent } from './userEdit.component';
23+
import { UserDetailsComponent } from './userDetails.component';
2424
import { User, UsersService } from './users.service';
2525
import { UserDataService } from '../shared/services/userData.service';
2626
import { FormsModule } from '@angular/forms';
2727
import { UsersListComponent } from './usersList.component';
2828
import { MatSelectChange } from '@angular/material/select';
29+
import { UserEditFormComponent } from './userEditForm.component';
2930

3031
@Component({
3132
selector: 'app-users',
@@ -39,12 +40,14 @@ import { MatSelectChange } from '@angular/material/select';
3940
CommonModule,
4041
SelectedRegistrarModule,
4142
UsersListComponent,
42-
UserEditComponent,
43+
UserEditFormComponent,
44+
UserDetailsComponent,
4345
],
4446
providers: [UsersService],
4547
})
4648
export class UsersComponent {
4749
isLoading = false;
50+
isNew = false;
4851
selectingExistingUser = false;
4952
selectedRegistrarId = '';
5053
usersSelection: User[] = [];
@@ -87,9 +90,9 @@ export class UsersComponent {
8790
});
8891
}
8992

90-
createNewUser() {
93+
createNewUser(user: User) {
9194
this.isLoading = true;
92-
this.usersService.createOrAddNewUser(null).subscribe({
95+
this.usersService.createOrAddNewUser(user).subscribe({
9396
error: (err: HttpErrorResponse) => {
9497
this._snackBar.open(err.error || err.message);
9598
this.isLoading = false;

‎console-webapp/src/app/users/users.service.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,9 +60,9 @@ export class UsersService {
6060
);
6161
}
6262

63-
createOrAddNewUser(maybeExistingUser: User | null) {
63+
createOrAddNewUser(user: User) {
6464
return this.backendService
65-
.createUser(this.registrarService.registrarId(), maybeExistingUser)
65+
.createUser(this.registrarService.registrarId(), user)
6666
.pipe(
6767
tap((newUser: User) => {
6868
if (newUser) {

0 commit comments

Comments
 (0)