Change all remaining modals to be scrollable (#976)

* Change all remaining modals to be scrollable

* Fix password-generator-history and two-factor-options not using modal-body

* Remove modal-dialog-scrollable on two-factor-setup components

src/app/accounts/two-factor-options.component.html

@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="twoStepOptionsTitle">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h2 class="modal-title" id="twoStepOptionsTitle">{{'twoStepOptions' | i18n}}</h2>
@@ -7,17 +7,19 @@
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
-            <div class="list-group list-group-flush">
+            <div class="modal-body">
-                <a href="#" appStopClick *ngFor="let p of providers" (click)="choose(p)"
+                <div class="list-group list-group-flush">
-                    class="list-group-item list-group-item-action">
+                    <a href="#" appStopClick *ngFor="let p of providers" (click)="choose(p)"
-                    <img [src]="'images/two-factor/' + p.type + '.png'" alt="" class="pull-right">
+                        class="list-group-item list-group-item-action">
-                    <h3>{{p.name}}</h3>
+                        <img [src]="'images/two-factor/' + p.type + '.png'" alt="" class="pull-right">
-                    {{p.description}}
+                        <h3>{{p.name}}</h3>
-                </a>
+                        {{p.description}}
-                <a href="#" appStopClick class="list-group-item list-group-item-action" (click)="recover()">
+                    </a>
-                    <h3>{{'recoveryCodeTitle' | i18n}}</h3>
+                    <a href="#" appStopClick class="list-group-item list-group-item-action" (click)="recover()">
-                    {{'recoveryCodeDesc' | i18n}}
+                        <h3>{{'recoveryCodeTitle' | i18n}}</h3>
-                </a>
+                        {{'recoveryCodeDesc' | i18n}}
+                    </a>
+                </div>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>

src/app/organizations/manage/collection-add-edit.component.html

@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="collectionAddEditTitle">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
                 <h2 class="modal-title" id="collectionAddEditTitle">{{title}}</h2>

src/app/organizations/manage/entity-events.component.html

@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="eventLogsTitle">
-    <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h2 class="modal-title" id="eventLogsTitle">

src/app/organizations/manage/entity-users.component.html

@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="userAccessTitle">
-    <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
                 <h2 class="modal-title" id="userAccessTitle">

src/app/organizations/manage/group-add-edit.component.html

@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="groupAddEditTitle">
-    <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
                 <h2 class="modal-title" id="groupAddEditTitle">{{title}}</h2>

src/app/organizations/manage/policy-edit.component.html

@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="policiesEditTitle">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
                 <h2 class="modal-title" id="policiesEditTitle">{{'editPolicy' | i18n}} - {{name}}</h2>

src/app/organizations/manage/user-add-edit.component.html

@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="userAddEditTitle">
-    <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
                 <h2 class="modal-title" id="userAddEditTitle">

src/app/organizations/manage/user-confirm.component.html

@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="confirmUserTitle">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()">
             <div class="modal-header">
                 <h2 class="modal-title" id="confirmUserTitle">

src/app/organizations/manage/user-groups.component.html

@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="groupAccessTitle">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
             <div class="modal-header">
                 <h2 class="modal-title" id="groupAccessTitle">

src/app/organizations/settings/delete-organization.component.html

@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="deleteOrganizationTitle">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
                 <h2 class="modal-title" id="deleteOrganizationTitle">{{'deleteOrganization' | i18n}}</h2>

src/app/send/add-edit.component.html

@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="sendAddEditTitle">
-    <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate
             autocomplete="off">
             <div class="modal-header">

src/app/settings/api-key.component.html

@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="apiKeyTitle">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
                 <h2 class="modal-title" id="apiKeyTitle">{{apiKeyTitle | i18n}}</h2>

src/app/settings/deauthorize-sessions.component.html

@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="deAuthTitle">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
                 <h2 class="modal-title" id="deAuthTitle">{{'deauthorizeSessions' | i18n}}</h2>

src/app/settings/delete-account.component.html

@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="deleteAccountTitle">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
                 <h2 class="modal-title" id="deleteAccountTitle">{{'deleteAccount' | i18n}}</h2>

src/app/settings/emergency-access-add-edit.component.html

@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="userAddEditTitle">
-    <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
                 <h2 class="modal-title" id="userAddEditTitle">

src/app/settings/emergency-access-confirm.component.html

@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="confirmUserTitle">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
             <div class="modal-header">
                 <h2 class="modal-title" id="confirmUserTitle">

src/app/settings/emergency-access-takeover.component.html

@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="userAddEditTitle">
-    <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
                 <h2 class="modal-title" id="userAddEditTitle">

src/app/settings/purge-vault.component.html

@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="purgeVaultTitle">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
                 <h2 class="modal-title" id="purgeVaultTitle">{{'purgeVault' | i18n}}</h2>

src/app/settings/update-key.component.html

@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="updateEncKeyTitle">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
                 <h2 class="modal-title" id="updateEncKeyTitle">{{'updateEncryptionKey' | i18n}}</h2>

src/app/tools/password-generator-history.component.html

@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="passHistoryTitle">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h2 class="modal-title" id="passHistoryTitle">{{'passwordHistory' | i18n}}</h2>
@@ -7,21 +7,23 @@
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
-            <ul class="list-group list-group-flush" *ngIf="history.length">
+            <div class="modal-body" *ngIf="history.length">
-                <li class="list-group-item d-flex" *ngFor="let h of history">
+                <ul class="list-group list-group-flush">
-                    <div class="password-row">
+                    <li class="list-group-item d-flex" *ngFor="let h of history">
-                        <div class="text-monospace password-wrapper" [innerHTML]="h.password | colorPassword"
+                        <div class="password-row">
-                            appSelectCopy></div>
+                            <div class="text-monospace password-wrapper" [innerHTML]="h.password | colorPassword"
-                        <small class="text-muted">{{h.date | date:'medium'}}</small>
+                                appSelectCopy></div>
-                    </div>
+                            <small class="text-muted">{{h.date | date:'medium'}}</small>
-                    <div class="ml-auto">
+                        </div>
-                        <button class="btn btn-link" appA11yTitle="{{'copyPassword' | i18n}}"
+                        <div class="ml-auto">
-                            (click)="copy(h.password)">
+                            <button class="btn btn-link" appA11yTitle="{{'copyPassword' | i18n}}"
-                            <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
+                                (click)="copy(h.password)">
-                        </button>
+                                <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
-                    </div>
+                            </button>
-                </li>
+                        </div>
-            </ul>
+                    </li>
+                </ul>
+            </div>
             <div class="modal-body" *ngIf="!history.length">
                 {{'noPasswordsInList' | i18n}}
             </div>

src/app/vault/attachments.component.html

@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="attachmentsTitle">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
                 <h2 class="modal-title" id="attachmentsTitle">

src/app/vault/bulk-delete.component.html

@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="deleteSelectedTitle">
-    <div class="modal-dialog modal-sm" role="document">
+    <div class="modal-dialog modal-dialog-scrollable modal-sm" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
             <div class="modal-header">
                 <h2 class="modal-title" id="deleteSelectedTitle">

src/app/vault/bulk-move.component.html

@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="moveSelectedTitle">
-    <div class="modal-dialog modal-sm" role="document">
+    <div class="modal-dialog modal-dialog-scrollable modal-sm" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
             <div class="modal-header">
                 <h2 class="modal-title" id="moveSelectedTitle">

src/app/vault/bulk-restore.component.html

@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="restoreSelectedTitle">
-    <div class="modal-dialog modal-sm" role="document">
+    <div class="modal-dialog modal-dialog-scrollable modal-sm" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
             <div class="modal-header">
                 <h2 class="modal-title" id="restoreSelectedTitle">

src/app/vault/bulk-share.component.html

@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="shareSelectedTitle">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
             <div class="modal-header">
                 <h2 class="modal-title" id="shareSelectedTitle">

src/app/vault/collections.component.html

@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="collectionsTitle">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
             <div class="modal-header">
                 <h2 class="modal-title" id="collectionsTitle">

src/app/vault/folder-add-edit.component.html

@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="folderAddEditTitle">
-    <div class="modal-dialog modal-sm" role="document">
+    <div class="modal-dialog modal-dialog-scrollable modal-sm" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
                 <h2 class="modal-title" id="folderAddEditTitle">{{title}}</h2>

src/app/vault/share.component.html

@@ -1,5 +1,5 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="shareTitle">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
             <div class="modal-header">
                 <h2 class="modal-title" id="shareTitle">