mirror of
https://github.com/google/nomulus
synced 2026-08-04 22:36:09 +00:00
126 lines
3.8 KiB
HTML
126 lines
3.8 KiB
HTML
<div class="console-app__user-details">
|
|
@if(isEditing) {
|
|
<h1 class="mat-headline-4">Editing {{ userDetails().emailAddress }}</h1>
|
|
<mat-divider></mat-divider>
|
|
<div class="console-app__user-details-controls">
|
|
<button
|
|
mat-icon-button
|
|
aria-label="Back to view user"
|
|
(click)="isEditing = false"
|
|
>
|
|
<mat-icon>arrow_back</mat-icon>
|
|
</button>
|
|
</div>
|
|
<form (ngSubmit)="saveEdit()">
|
|
<p>
|
|
<mat-form-field appearance="outline">
|
|
<mat-label
|
|
>User Role:
|
|
<mat-icon
|
|
matTooltip="Viewer role doesn't allow making updates; Editor role allows updates, like Contacts delete or SSL certificate change"
|
|
>help_outline</mat-icon
|
|
></mat-label
|
|
>
|
|
<mat-select [(ngModel)]="userRole" name="userRole">
|
|
<mat-option value="PRIMARY_CONTACT">Editor</mat-option>
|
|
<mat-option value="ACCOUNT_MANAGER">Viewer</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
</p>
|
|
<button
|
|
mat-flat-button
|
|
color="primary"
|
|
aria-label="Save user"
|
|
type="submit"
|
|
>
|
|
Save
|
|
</button>
|
|
</form>
|
|
} @else { @if(isNewUser) {
|
|
<h1 class="mat-headline-4">
|
|
{{ userDetails().emailAddress + " successfully created" }}
|
|
</h1>
|
|
} @else {
|
|
<h1 class="mat-headline-4">User details</h1>
|
|
<mat-divider></mat-divider>
|
|
<div class="console-app__user-details-controls">
|
|
<button mat-icon-button aria-label="Back to users list" (click)="goBack()">
|
|
<mat-icon>arrow_back</mat-icon>
|
|
</button>
|
|
<div class="spacer"></div>
|
|
<button
|
|
mat-flat-button
|
|
color="primary"
|
|
aria-label="Edit User"
|
|
(click)="userRole = userDetails().role; isEditing = true"
|
|
>
|
|
<mat-icon>edit</mat-icon>
|
|
Edit
|
|
</button>
|
|
<button
|
|
mat-icon-button
|
|
aria-label="Delete User"
|
|
(click)="deleteUser()"
|
|
[disabled]="isLoading"
|
|
>
|
|
<mat-icon>delete</mat-icon>
|
|
</button>
|
|
</div>
|
|
<div *ngIf="isNewUser" class="console-app__user-details-save-password">
|
|
<mat-icon>priority_high</mat-icon>
|
|
Please save the password. For your security, we do not store passwords in a
|
|
recoverable format.
|
|
</div>
|
|
|
|
<p *ngIf="isLoading">
|
|
<mat-progress-bar mode="query"></mat-progress-bar>
|
|
</p>
|
|
|
|
<mat-card appearance="outlined">
|
|
<mat-card-content>
|
|
<mat-list role="list">
|
|
<mat-list-item role="listitem">
|
|
<h2>User details</h2>
|
|
</mat-list-item>
|
|
<mat-divider></mat-divider>
|
|
<mat-list-item role="listitem">
|
|
<span class="console-app__list-key">User email</span>
|
|
<span class="console-app__list-value">{{
|
|
userDetails().emailAddress
|
|
}}</span>
|
|
</mat-list-item>
|
|
<mat-divider></mat-divider>
|
|
<mat-list-item role="listitem">
|
|
<span class="console-app__list-key">User role</span>
|
|
<span class="console-app__list-value">{{
|
|
roleToDescription(userDetails().role)
|
|
}}</span>
|
|
</mat-list-item>
|
|
@if (userDetails().password) {
|
|
<mat-divider></mat-divider>
|
|
<mat-list-item role="listitem">
|
|
<span class="console-app__list-key">Password</span>
|
|
<span
|
|
class="console-app__list-value console-app__user-details-password"
|
|
>
|
|
<input
|
|
[type]="isPasswordVisible ? 'text' : 'password'"
|
|
[value]="userDetails().password"
|
|
disabled
|
|
/>
|
|
<button
|
|
mat-button
|
|
aria-label="Show password"
|
|
(click)="isPasswordVisible = !isPasswordVisible"
|
|
>
|
|
{{ isPasswordVisible ? "Hide" : "View" }} password
|
|
</button>
|
|
</span>
|
|
</mat-list-item>
|
|
}
|
|
</mat-list>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
}}
|
|
</div>
|