diff --git a/src/app/views/vault/vault.component.html b/src/app/views/vault/vault.component.html index 762126c..41661a3 100644 --- a/src/app/views/vault/vault.component.html +++ b/src/app/views/vault/vault.component.html @@ -1,360 +1,398 @@ - - -
-
- Settings -
-
- Passwords -
-
- - -
- - -
- - - + + + + +
+
+ + Settings + +
+
+ + Passwords + +
+
+ + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - -
User Exceptions
- - - - - -
-
- -
- 		- -
- - - - - - -   {{value}} - - - - - - - - - - -
- - -
Password list
- - - - - -
-
- -
- 		- -
- - - - - -   {{value}} - - - - - - - - - - - - - - - - - - - - -
Efected Groups
- - - -   {{value}} - - - - - - - - - - - - - - - - - - - -
Reports
- - - -   {{value}} - - - -   {{value}} - - - - - - - - - - - - - - -
- - - Username - - - - Device IP - - - - Device Name - - - -
- - - - - - - - -   {{value}} - - - - {{value}} + + + +
+
+ +
+
Password Vault Settings
+

Configure automated password management for your device groups. Set schedules, define password policies, and manage affected devices.

+
+
+
+ + +
+
Password Vault Configuration
+ + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + +
User Exceptions
+ Users excluded from password changes + + +
+ + +
+ + +
+ + + + {{value}} - - - {{value}} - - - - - {{value}} - - - + - - - - - +
+
+ +
+ + +
Password List
+ Pre-defined passwords for rotation + + +
+ + +
+ + +
+ + + + •••••••• + + + + + + + + +
+
+ +
+ + +
Affected Device Groups
+ Device groups where password changes will be applied + + + + + +
+ + + + {{value}} + + + + + + + + +
+
+ +
+
+ + +
+
Execution Reports
+ + + + {{value}} + + + + + {{value}} + + + + + + + + +
+ + + + + + + +
+
+ +
+
Stored Passwords
+

View and manage passwords stored by the vault system. Use filters to find specific devices or users.

+
+
+
+ + +
+
Filters
+ + + + Username + + + + + + Device IP + + + + + + Device Name + + + + +
+ + +
+
Stored Passwords
+ + + +
+ +
+
{{value}}
+ {{item.devip}} +
+
+ + + + + {{value}} + + + + + {{value}} + + + + + + + + +
+ + + -
Password
+
Password Reveal
 -

- - - - -

- - Your attempt to reveal password is logged in system! - +
+ + Security Notice: Your attempt to reveal this password is logged in the system. +
+
+ + + +
- + - - + -
Confirm RUN {{ SelectedTask['name'] }}
+
Confirm Execution
 - Are you sure that You want to run Vault Password Job ? -
+
+ Warning: This will execute the password vault job and change passwords on all configured device groups. +
+

Are you sure you want to proceed with the password vault execution?

 - + - + -
Editing Group
+
Add Device Groups
 - -
Group Members :
- - - -   {{value}} - - - - {{value}} - - - - - {{value}} - - - -
- -
+

Select device groups to include in the password vault task:

+ + + + {{value}} + + + + + {{value}} + + + + + {{value}} + + + - - - + + + + All Local Users:
+ Changes passwords for all router users except exceptions.

+ MikroWizard Users Only:
+ Changes only passwords for users defined in MikroWizard system. + + + + Frequency:
+ How often passwords should be changed automatically.

+ Manual:
+ Only when executed manually. + + + + Random:
+ System generates random passwords.

+ Pre-defined:
+ Use passwords from your custom list. + + \ No newline at end of file diff --git a/src/app/views/vault/vault.component.ts b/src/app/views/vault/vault.component.ts index 861e550..9fbe59a 100644 --- a/src/app/views/vault/vault.component.ts +++ b/src/app/views/vault/vault.component.ts @@ -435,6 +435,14 @@ export class VaultComponent implements OnInit { + copyToClipboard(text: string) { + navigator.clipboard.writeText(text).then(() => { + this.show_toast('Success', 'Password copied to clipboard', 'success'); + }).catch(() => { + this.show_toast('Error', 'Failed to copy password', 'danger'); + }); + } + logger(item: any) { console.dir(item); } diff --git a/src/app/views/vault/vault.module.ts b/src/app/views/vault/vault.module.ts index e98d364..d52b8c2 100644 --- a/src/app/views/vault/vault.module.ts +++ b/src/app/views/vault/vault.module.ts @@ -12,6 +12,7 @@ import { TabsModule, ToastModule, CollapseModule, + TooltipModule, } from "@coreui/angular"; import { VaultRoutingModule } from "./vault-routing.module"; import { VaultComponent } from "./vault.component"; @@ -36,7 +37,8 @@ import { MatFormFieldModule } from "@angular/material/form-field"; ToastModule, MatInputModule, MatFormFieldModule, - CollapseModule + CollapseModule, + TooltipModule ], declarations: [VaultComponent], }) diff --git a/src/app/views/vault/vault.scss b/src/app/views/vault/vault.scss index 6acb3bb..da87598 100644 --- a/src/app/views/vault/vault.scss +++ b/src/app/views/vault/vault.scss @@ -1,29 +1,278 @@ - +// Compact Navigation Styles .nav-underline { - border-bottom: 2px solid var(--cui-nav-underline-border-color, #c4c9d0) + border-bottom: 2px solid var(--cui-nav-underline-border-color, #c4c9d0); + + .nav-item { + margin-bottom: -2px; + cursor: pointer; + } + + .nav-link { + color: var(--cui-nav-underline-link-color, #768192); + border-style: none none solid!important; + border-width: 2px; + position: relative; + bottom: -1px; + cursor: pointer; + font-size: 0.9rem; + padding: 0.5rem 1rem; + + &:hover, &:focus { + border-color: var(--cui-nav-underline-link-active-border-color, #321fdb); + } + + &.active, .show > & { + color: var(--cui-nav-underline-link-active-color, #321fdb); + background: transparent; + border-color: var(--cui-nav-underline-link-active-border-color, #321fdb); + } + } } -.nav-underline .nav-item { - margin-bottom: -2px; - cursor: pointer; +// Compact Form Styles +.form-label.small { + font-size: 0.8rem; + font-weight: 600; + color: #495057; + margin-bottom: 0.25rem; } -.nav-underline .nav-link { - color: var(--cui-nav-underline-link-color, #768192); - border-style: none none solid!important; - border-width:2px; - position:relative; - bottom:-1px; - cursor: pointer; - +.form-select-sm { + font-size: 0.85rem; + padding: 0.25rem 0.5rem; } -.nav-underline .nav-link:hover,.nav-underline .nav-link:focus { - border-color: var(--cui-nav-underline-link-active-border-color, #321fdb) +// Card Header Improvements +.c-card-header { + background: #f8f9fa; + border-bottom: 1px solid #dee2e6; + padding: 0.75rem 1rem; + + h6 { + font-size: 0.9rem; + font-weight: 600; + color: #495057; + + i { + color: #6c757d; + } + } + + .text-muted { + font-size: 0.75rem; + } } -.nav-underline .nav-link.active,.nav-underline .show>.nav-link { - color: var(--cui-nav-underline-link-active-color, #321fdb); - background: transparent; - border-color: var(--cui-nav-underline-link-active-border-color, #321fdb) +// Grid Improvements +gui-grid { + .gui-grid { + font-size: 0.85rem; + } } + +// Input Group Compact +.input-group-sm { + .form-control, .input-group-text { + font-size: 0.8rem; + padding: 0.25rem 0.5rem; + } +} + +// Alert Improvements +.alert { + font-size: 0.85rem; + padding: 0.5rem 0.75rem; + + i { + margin-right: 0.5rem; + } +} + +// Button Improvements +.btn { + font-size: 0.85rem; + + &.btn-sm { + font-size: 0.8rem; + padding: 0.25rem 0.5rem; + } + + i { + font-size: 0.8rem; + } +} + +// Modal Improvements +.c-modal-header { + padding: 0.75rem 1rem; + + h6 { + font-size: 0.95rem; + font-weight: 600; + } +} + +.c-modal-body { + padding: 1rem; + font-size: 0.9rem; +} + +.c-modal-footer { + padding: 0.75rem 1rem; +} + +// Responsive Design +@media (max-width: 768px) { + .c-card-header { + .nav-underline { + margin-bottom: 0.5rem; + } + + .text-end { + text-align: left !important; + } + } + + .input-group-sm { + flex-direction: column; + + .form-control { + margin-bottom: 0.25rem; + } + + .btn { + width: 100%; + } + } + + .c-modal-dialog { + margin: 0.5rem; + } + + .c-card-footer { + .btn { + width: 100%; + margin-bottom: 0.5rem; + + &:last-child { + margin-bottom: 0; + } + } + } +} + +@media (max-width: 576px) { + .nav-underline .nav-link { + font-size: 0.8rem; + padding: 0.4rem 0.8rem; + } + + .c-card-header h6 { + font-size: 0.85rem; + } + + .form-label.small { + font-size: 0.75rem; + } + + .btn { + font-size: 0.8rem; + + &.btn-sm { + font-size: 0.75rem; + padding: 0.2rem 0.4rem; + } + } +} + +// Material Form Field Compact +::ng-deep .mat-form-field { + .mat-form-field-wrapper { + padding-bottom: 0.5em; + } + + .mat-form-field-infix { + padding: 0.5em 0; + } + + .mat-form-field-label { + font-size: 0.85rem; + } + + input { + font-size: 0.85rem; + } +} + +// Grid Cell Improvements +::ng-deep gui-grid { + .gui-grid-cell { + padding: 0.5rem; + font-size: 0.85rem; + } + + .gui-grid-header-cell { + font-size: 0.8rem; + font-weight: 600; + padding: 0.5rem; + } +} + +// Tab Info Headers +.tab-info-header { + padding: 1rem 0; + + h5 { + color: #495057; + font-weight: 600; + font-size: 1.1rem; + } + + .fs-4 { + font-size: 1.5rem !important; + } +} + +// Utility Classes +.fw-semibold { + font-weight: 600; +} + +.text-xs { + font-size: 0.75rem; +} + +.compact-spacing { + .c-row { + margin-bottom: 0.5rem; + } + + .c-col { + padding: 0.25rem; + } +} + +// Responsive tab headers +@media (max-width: 576px) { + .tab-info-header { + padding: 0.75rem 0; + + h5 { + font-size: 1rem; + } + + .fs-4 { + font-size: 1.25rem !important; + } + + .d-flex { + flex-direction: column; + text-align: center; + } + + .me-2 { + margin-right: 0 !important; + margin-bottom: 0.5rem; + } + } +} \ No newline at end of file