add/edit connection: add mini alert when master password is on

Author: lyubov-voloshko

frontend/src/app/components/connect-db/master-encryption-password/master-encryption-password.component.css

@@ -8,12 +8,35 @@
 
 .encription-password {
     display: flex;
+    flex-direction: column;
     margin-top: 32px;
-    margin-bottom: 20px;
     width: 100%;
 }
 
-.encription-password__copy-button {
-    margin-top: 4px;
-    margin-left: 12px;
+.docs-notification {
+    display: flex;
+    gap: 8px;
+    background-color: var(--bg-color);
+    border-left: 12px solid #FF6F00;
+    color: var(--mat-sidenav-content-text-color);
+    margin-top: -8px;
+    padding: 16px 12px;
+}
+
+@media (prefers-color-scheme: dark) {
+    .docs-notification {
+        --bg-color: #292929;
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    .docs-notification {
+        --bg-color: #F4F4F4;
+    }
+}
+
+.docs-link {
+    color: #EF6C00;
+    font-weight: 500;
+    text-decoration: none;
 }

frontend/src/app/components/connect-db/master-encryption-password/master-encryption-password.component.html

@@ -16,19 +16,26 @@
                 name="masterPassword" #masterPassword="ngModel"
                 readonly
                 [(ngModel)]="masterKey">
-            <mat-hint>Rocketadmin does not store the key.
-                Please save this password on your computer in protected place,
-                we recommend using password managers.
-                Share this password with all users of the connection.
-            </mat-hint>
         </mat-form-field>
-        <button type="button" data-testid="connection-master-password-copy-button"
-            mat-icon-button
-            class="encription-password__copy-button"
-            matTooltip="Copy master password"
-            [cdkCopyToClipboard]="masterKey"
-            (cdkCopyToClipboardCopied)="showCopyNotification('Master password was copied to clipboard.')">
-            <mat-icon>content_copy</mat-icon>
-        </button>
+
+        <div class="docs-notification">
+            <div>
+                <p style="margin-bottom: 8px">
+                    Rocketadmin does not store the key.
+                    Please save this password in protected place.
+                    Share this password with all users of the connection.
+                </p>
+                <a href="https://docs.rocketadmin.com/Reference/MasterPassword"
+                    target="_blank" class="docs-link">
+                    Open docs
+                </a>
+            </div>
+            <button mat-button type="button" data-testid="connection-master-password-copy-button"
+                [cdkCopyToClipboard]="masterKey"
+                (cdkCopyToClipboardCopied)="showCopyNotification('Master password was copied to clipboard.')">
+                Copy
+            </button>
+
+        </div>
     </div>
 </div>