hosted databases: consistent behaviour with creds dialog

Author: lyubov-voloshko

frontend/src/app/components/hosted-databases/hosted-database-reset-password-dialog/hosted-database-reset-password-dialog.component.css

@@ -46,6 +46,12 @@
 	padding-top: 8px;
 }
 
+.reset-dialog__copy-check {
+	font-size: 18px;
+	width: 18px;
+	height: 18px;
+}
+
 @media (prefers-color-scheme: dark) {
 	.reset-dialog__credentials {
 		background: transparent;

frontend/src/app/components/hosted-databases/hosted-database-reset-password-dialog/hosted-database-reset-password-dialog.component.html

@@ -40,11 +40,18 @@ <h1 mat-dialog-title>New password for <strong>{{ result()!.databaseName }}</stro
 		</p>
 	</mat-dialog-content>
 	<mat-dialog-actions align="end" class="reset-dialog__actions">
-		<button type="button" mat-stroked-button mat-dialog-close>Close</button>
+		@if (canClose()) {
+			<button type="button" mat-stroked-button mat-dialog-close>Close</button>
+		}
 		<button type="button" mat-flat-button color="accent"
 			[cdkCopyToClipboard]="credentialsText"
 			(cdkCopyToClipboardCopied)="handleCredentialsCopied()">
-			Copy credentials
+			@if (copied()) {
+				<mat-icon class="reset-dialog__copy-check">check</mat-icon>
+				Credentials copied
+			} @else {
+				Copy connection string
+			}
 		</button>
 	</mat-dialog-actions>
 }

frontend/src/app/components/hosted-databases/hosted-database-reset-password-dialog/hosted-database-reset-password-dialog.component.ts

@@ -2,6 +2,7 @@ import { CdkCopyToClipboard } from '@angular/cdk/clipboard';
 import { Component, computed, inject, signal } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
 import posthog from 'posthog-js';
 import { CreatedHostedDatabase, FoundHostedDatabase } from 'src/app/models/hosted-database';
 import { HostedDatabaseService } from 'src/app/services/hosted-database.service';
@@ -11,7 +12,7 @@ import { NotificationsService } from 'src/app/services/notifications.service';
 	selector: 'app-hosted-database-reset-password-dialog',
 	templateUrl: './hosted-database-reset-password-dialog.component.html',
 	styleUrls: ['./hosted-database-reset-password-dialog.component.css'],
-	imports: [MatDialogModule, MatButtonModule, CdkCopyToClipboard],
+	imports: [MatDialogModule, MatButtonModule, MatIconModule, CdkCopyToClipboard],
 })
 export class HostedDatabaseResetPasswordDialogComponent {
 	private _hostedDatabaseService = inject(HostedDatabaseService);
@@ -21,6 +22,8 @@ export class HostedDatabaseResetPasswordDialogComponent {
 	protected submitting = signal(false);
 	protected result = signal<CreatedHostedDatabase | null>(null);
 	protected phase = computed(() => (this.result() ? 'result' : 'confirm'));
+	protected copied = signal(false);
+	protected canClose = signal(false);
 
 	get credentialsText(): string {
 		const r = this.result();
@@ -45,5 +48,8 @@ export class HostedDatabaseResetPasswordDialogComponent {
 
 	handleCredentialsCopied(): void {
 		this._notifications.showSuccessSnackbar('New credentials were copied to clipboard.');
+		this.copied.set(true);
+		this.canClose.set(true);
+		setTimeout(() => { this.copied.set(false); }, 2000);
 	}
 }

frontend/src/app/components/hosted-databases/hosted-databases.component.ts

@@ -66,6 +66,7 @@ export class HostedDatabasesComponent implements OnInit {
 			width: '32em',
 			maxWidth: '95vw',
 			data: db,
+			disableClose: true,
 		});
 	}