Skip to content

Commit d22d81f

Browse files
lyubov-voloshkolyubov-voloshko
committed
wrap dialogs in form
1 parent 1ff72ec commit d22d81f

8 files changed

Lines changed: 77 additions & 73 deletions

File tree

‎frontend/src/app/components/company/invite-member-dialog/invite-member-dialog.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ <h1 mat-dialog-title>Add member to <strong>{{company.name}}</strong> company</h1
7979
</app-turnstile>
8080
<mat-dialog-actions align="end">
8181
<button type="button" mat-flat-button mat-dialog-close>Cancel</button>
82-
<button mat-flat-button color="primary"
82+
<button type="submit" mat-flat-button color="primary"
8383
[disabled]="submitting || addUserForm.form.invalid || (isSaas && !turnstileToken)">
8484
Add
8585
</button>

‎frontend/src/app/components/connect-db/db-connection-delete-dialog/db-connection-delete-dialog.component.html‎

Lines changed: 29 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,40 @@
11
<h1 mat-dialog-title>Delete <strong>{{ connectionName }}</strong> connection</h1>
2+
<form #deleteConnectionForm="ngForm" class="form" (ngSubmit)="deleteConnection()">
23
<mat-dialog-content>
34
<p class="mat-body">
45
Before you delete the connection, please let us know why.
56
Every bit of feedback helps!
67
</p>
78
<br>
8-
<form action="" #deleteConnectionForm="ngForm" class="form">
9-
<mat-radio-group required
10-
name="reasons"
11-
class="radio-group"
12-
[(ngModel)]="reason">
13-
<mat-radio-button value='missing-features' class="radio-button">
14-
Missing features I need
15-
</mat-radio-button>
16-
<mat-radio-button value='technical-issues' class="radio-button">
17-
Technical issues
18-
</mat-radio-button>
19-
<mat-radio-button value='another-product' class="radio-button">
20-
Another product
21-
</mat-radio-button>
22-
<mat-radio-button value='other' class="radio-button">
23-
Other
24-
</mat-radio-button>
25-
</mat-radio-group>
26-
<mat-form-field appearance="outline" class="message">
27-
<mat-label>Anything you want to share? (optional)</mat-label>
28-
<textarea matInput resizeToFitContent rows="8" name="message"
29-
[(ngModel)]="message"
30-
></textarea>
31-
</mat-form-field>
32-
</form>
9+
<mat-radio-group required
10+
name="reasons"
11+
class="radio-group"
12+
[(ngModel)]="reason">
13+
<mat-radio-button value='missing-features' class="radio-button">
14+
Missing features I need
15+
</mat-radio-button>
16+
<mat-radio-button value='technical-issues' class="radio-button">
17+
Technical issues
18+
</mat-radio-button>
19+
<mat-radio-button value='another-product' class="radio-button">
20+
Another product
21+
</mat-radio-button>
22+
<mat-radio-button value='other' class="radio-button">
23+
Other
24+
</mat-radio-button>
25+
</mat-radio-group>
26+
<mat-form-field appearance="outline" class="message">
27+
<mat-label>Anything you want to share? (optional)</mat-label>
28+
<textarea matInput resizeToFitContent rows="8" name="message"
29+
[(ngModel)]="message"
30+
></textarea>
31+
</mat-form-field>
3332
</mat-dialog-content>
3433
<mat-dialog-actions align="end">
35-
<button mat-flat-button mat-dialog-close mat-dialog-close="cancel">Abort</button>
36-
<button mat-flat-button color="warn"
37-
[disabled]="submitting"
38-
(click)="deleteConnection()">
34+
<button type="button" mat-flat-button mat-dialog-close mat-dialog-close="cancel">Abort</button>
35+
<button type="submit" mat-flat-button color="warn"
36+
[disabled]="submitting">
3937
Proceed
4038
</button>
41-
</mat-dialog-actions>
39+
</mat-dialog-actions>
40+
</form>

‎frontend/src/app/components/connections-list/hosted-database-rename-dialog/hosted-database-rename-dialog.component.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
<h1 mat-dialog-title>Name your connection</h1>
22

3+
<form (ngSubmit)="save()">
34
<mat-dialog-content class="rename-dialog__content">
45
<p class="rename-dialog__description">Give your hosted database a friendly title so you can find it easily.</p>
56
<mat-form-field appearance="outline" class="rename-dialog__field">
67
<mat-label>Connection title</mat-label>
7-
<input matInput [(ngModel)]="title" placeholder="e.g. Production DB, Staging, My App" (keyup.enter)="save()" cdkFocusInitial>
8+
<input matInput [(ngModel)]="title" name="title" placeholder="e.g. Production DB, Staging, My App" cdkFocusInitial>
89
</mat-form-field>
910
</mat-dialog-content>
1011

1112
<mat-dialog-actions align="end" class="rename-dialog__actions">
1213
<button type="button" mat-button mat-dialog-close>Skip</button>
13-
<button type="button" mat-flat-button color="accent" [disabled]="!title.trim() || saving" (click)="save()">
14+
<button type="submit" mat-flat-button color="accent" [disabled]="!title.trim() || saving">
1415
{{ saving ? 'Saving...' : 'Save' }}
1516
</button>
1617
</mat-dialog-actions>
18+
</form>

‎frontend/src/app/components/dashboard/db-table-view/db-table-export-dialog/db-table-export-dialog.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ <h1 mat-dialog-title>Export</h1>
2323
</mat-radio-group>
2424
</mat-dialog-content>
2525
<mat-dialog-actions align="end">
26-
<button mat-flat-button mat-dialog-close>Cancel</button>
27-
<button mat-flat-button type="" color="primary" mat-dialog-close="export">
26+
<button type="button" mat-flat-button mat-dialog-close>Cancel</button>
27+
<button type="submit" mat-flat-button color="primary" [disabled]="submitting">
2828
Export
2929
</button>
3030
</mat-dialog-actions>

‎frontend/src/app/components/dashboard/db-tables-list/db-folder-edit-dialog/db-folder-edit-dialog.component.html‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@ <h1 mat-dialog-title>
22
Edit folder
33
</h1>
44

5+
<form (ngSubmit)="onSave()">
56
<mat-dialog-content class="dialog-body">
67
<!-- Folder Name Section -->
78
<div class="folder-name-section">
89
<mat-form-field appearance="outline" class="folder-name-field">
910
<mat-label>Folder name</mat-label>
1011
<input matInput
1112
type="text"
13+
name="folderName"
1214
[(ngModel)]="folder.name"
1315
[disabled]="isAllTablesFolder()"
1416
required
@@ -49,7 +51,7 @@ <h4>Manage tables in this folder</h4>
4951
<div class="table-list">
5052
<div *ngFor="let table of tables" class="table-item">
5153
<span class="table-name">{{getTableName(table)}}</span>
52-
<button mat-button
54+
<button mat-button type="button"
5355
class="action-button"
5456
[class.add-button]="!isTableInFolder(table)"
5557
[class.remove-button]="isTableInFolder(table)"
@@ -62,6 +64,7 @@ <h4>Manage tables in this folder</h4>
6264
</mat-dialog-content>
6365

6466
<mat-dialog-actions align="end">
65-
<button mat-button (click)="onCancel()">Cancel</button>
66-
<button mat-button color="primary" (click)="onSave()">Save</button>
67-
</mat-dialog-actions>
67+
<button type="button" mat-button (click)="onCancel()">Cancel</button>
68+
<button type="submit" mat-button color="primary">Save</button>
69+
</mat-dialog-actions>
70+
</form>

‎frontend/src/app/components/hosted-databases/hosted-database-rename-dialog/hosted-database-rename-dialog.component.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
<h1 mat-dialog-title>Rename <strong>{{ data.databaseName }}</strong></h1>
2+
<form (ngSubmit)="save()">
23
<mat-dialog-content>
34
<mat-form-field appearance="outline" class="rename-dialog__field">
45
<mat-label>Connection name</mat-label>
5-
<input matInput [(ngModel)]="title" placeholder="e.g. Production DB, Staging, My App"
6-
(keyup.enter)="save()" cdkFocusInitial>
6+
<input matInput [(ngModel)]="title" name="title" placeholder="e.g. Production DB, Staging, My App" cdkFocusInitial>
77
</mat-form-field>
88
</mat-dialog-content>
99
<mat-dialog-actions align="end">
1010
<button type="button" mat-flat-button mat-dialog-close>Cancel</button>
11-
<button type="button" mat-flat-button color="accent"
12-
[disabled]="!title.trim() || submitting()"
13-
(click)="save()">
11+
<button type="submit" mat-flat-button color="accent"
12+
[disabled]="!title.trim() || submitting()">
1413
{{ submitting() ? 'Saving...' : 'Save' }}
1514
</button>
1615
</mat-dialog-actions>
16+
</form>

‎frontend/src/app/components/secrets/master-password-dialog/master-password-dialog.component.html‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ <h2 mat-dialog-title>
33
Master Password Required
44
</h2>
55

6+
<form (ngSubmit)="onSubmit()">
67
<mat-dialog-content>
78
<p class="description">
89
This secret is protected with master password encryption.
@@ -12,9 +13,9 @@ <h2 mat-dialog-title>
1213
<mat-form-field appearance="outline" class="full-width">
1314
<mat-label>Master Password</mat-label>
1415
<input matInput
16+
name="masterPassword"
1517
[(ngModel)]="masterPassword"
1618
[type]="showPassword ? 'text' : 'password'"
17-
(keyup.enter)="onSubmit()"
1819
placeholder="Enter master password"
1920
data-testid="master-password-input">
2021
<button mat-icon-button matSuffix type="button"
@@ -27,11 +28,11 @@ <h2 mat-dialog-title>
2728
</mat-dialog-content>
2829

2930
<mat-dialog-actions align="end">
30-
<button mat-button mat-dialog-close>Cancel</button>
31-
<button mat-flat-button color="primary"
32-
(click)="onSubmit()"
31+
<button type="button" mat-button mat-dialog-close>Cancel</button>
32+
<button type="submit" mat-flat-button color="primary"
3333
data-testid="master-password-submit-button">
3434
<mat-icon>lock_open</mat-icon>
3535
Unlock
3636
</button>
3737
</mat-dialog-actions>
38+
</form>

‎frontend/src/app/components/user-settings/account-delete-dialog/account-delete-dialog.component.html‎

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,35 @@
11
<h1 mat-dialog-title>Delete <strong>{{ userEmail }}</strong> account</h1>
2+
<form #deleteConnectionForm="ngForm" class="form" (ngSubmit)="openDeleteConfirmation()">
23
<mat-dialog-content>
34
<p class="mat-body">
45
Tell us why are you deleting your account.
56
</p>
67
<br>
7-
<form action="" #deleteConnectionForm="ngForm" class="form">
8-
<mat-radio-group required
9-
name="reasons"
10-
class="radio-group"
11-
[(ngModel)]="reason">
12-
<div *ngFor="let reasonItem of reasonsList">
13-
<mat-radio-button [value]="reasonItem.id" class="radio-button">
14-
{{ reasonItem.caption }}
15-
</mat-radio-button>
16-
<p *ngIf="reasonItem.message && reason === reasonItem.id"
17-
[innerHtml]="reasonItem.message"
18-
class="mat-body-1 radio-group__message">
19-
</p>
20-
</div>
21-
</mat-radio-group>
22-
<mat-form-field appearance="outline" class="message">
23-
<mat-label>Anything you want to share? (optional)</mat-label>
24-
<textarea matInput resizeToFitContent rows="3" name="message"
25-
[(ngModel)]="message"
26-
></textarea>
27-
</mat-form-field>
28-
</form>
8+
<mat-radio-group required
9+
name="reasons"
10+
class="radio-group"
11+
[(ngModel)]="reason">
12+
<div *ngFor="let reasonItem of reasonsList">
13+
<mat-radio-button [value]="reasonItem.id" class="radio-button">
14+
{{ reasonItem.caption }}
15+
</mat-radio-button>
16+
<p *ngIf="reasonItem.message && reason === reasonItem.id"
17+
[innerHtml]="reasonItem.message"
18+
class="mat-body-1 radio-group__message">
19+
</p>
20+
</div>
21+
</mat-radio-group>
22+
<mat-form-field appearance="outline" class="message">
23+
<mat-label>Anything you want to share? (optional)</mat-label>
24+
<textarea matInput resizeToFitContent rows="3" name="message"
25+
[(ngModel)]="message"
26+
></textarea>
27+
</mat-form-field>
2928
</mat-dialog-content>
3029
<mat-dialog-actions align="end">
31-
<button mat-flat-button mat-dialog-close mat-dialog-close="cancel">Abort</button>
32-
<button mat-flat-button color="warn"
33-
(click)="openDeleteConfirmation()">
30+
<button type="button" mat-flat-button mat-dialog-close mat-dialog-close="cancel">Abort</button>
31+
<button type="submit" mat-flat-button color="warn">
3432
Delete
3533
</button>
3634
</mat-dialog-actions>
35+
</form>

0 commit comments

Comments
 (0)