mirror of
https://github.com/bitwarden/directory-connector
synced 2025-12-15 15:53:41 +00:00
Add visibility toggle to secrets
Added visibility toggle to login and directory secrets
This commit is contained in:
@@ -15,8 +15,15 @@
|
|||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<div class="row-main">
|
<div class="row-main">
|
||||||
<label for="client_secret">{{'clientSecret' | i18n}}</label>
|
<label for="client_secret">{{'clientSecret' | i18n}}</label>
|
||||||
<input id="client_secret" name="ClientSecret"
|
<div class="input-group">
|
||||||
|
<input type="{{showSecret ? 'text' : 'password'}}" id="client_secret" name="ClientSecret"
|
||||||
[(ngModel)]="clientSecret" class="form-control">
|
[(ngModel)]="clientSecret" class="form-control">
|
||||||
|
<div class="input-group-append">
|
||||||
|
<button type="button" class="btn btn-outline-primary" appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleSecret()">
|
||||||
|
<i class="fa fa-lg" aria-hidden="true"[ngClass]="{'fa-eye': !showSecret, 'fa-eye-slash': showSecret}"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex">
|
<div class="d-flex">
|
||||||
|
|||||||
@@ -29,6 +29,7 @@ export class ApiKeyComponent {
|
|||||||
|
|
||||||
formPromise: Promise<any>;
|
formPromise: Promise<any>;
|
||||||
successRoute = '/tabs/dashboard';
|
successRoute = '/tabs/dashboard';
|
||||||
|
showSecret: boolean = false;
|
||||||
|
|
||||||
constructor(private authService: AuthService, private apiKeyService: ApiKeyService, private router: Router,
|
constructor(private authService: AuthService, private apiKeyService: ApiKeyService, private router: Router,
|
||||||
private i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver,
|
private i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver,
|
||||||
@@ -77,4 +78,8 @@ export class ApiKeyComponent {
|
|||||||
modal.close();
|
modal.close();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
toggleSecret() {
|
||||||
|
this.showSecret = !this.showSecret;
|
||||||
|
document.getElementById('clientSecret').focus();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -121,8 +121,15 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="password">{{'password' | i18n}}</label>
|
<label for="password">{{'password' | i18n}}</label>
|
||||||
<input type="password" class="form-control" id="password" name="Password"
|
<div class="input-group">
|
||||||
|
<input type="{{showLdapPassword ? 'text' : 'password'}}" class="form-control" id="password" name="Password"
|
||||||
[(ngModel)]="ldap.password">
|
[(ngModel)]="ldap.password">
|
||||||
|
<div class="input-group-append">
|
||||||
|
<button type="button" class="btn btn-outline-primary" appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleLdapPassword()">
|
||||||
|
<i class="fa fa-lg" aria-hidden="true"[ngClass]="{'fa-eye': !showLdapPassword, 'fa-eye-slash': showLdapPassword}"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -139,7 +146,15 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="secretKey">{{'secretKey' | i18n}}</label>
|
<label for="secretKey">{{'secretKey' | i18n}}</label>
|
||||||
<input type="text" class="form-control" id="secretKey" name="SecretKey" [(ngModel)]="azure.key">
|
<div class="input-group">
|
||||||
|
<input type="{{showAzureKey ? 'text' : 'password'}}" class="form-control" id="secretKey" name="SecretKey"
|
||||||
|
[(ngModel)]="azure.key">
|
||||||
|
<div class="input-group-append">
|
||||||
|
<button type="button" class="btn btn-outline-primary" appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleAzureKey()">
|
||||||
|
<i class="fa fa-lg" aria-hidden="true"[ngClass]="{'fa-eye': !showAzureKey, 'fa-eye-slash': showAzureKey}"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div [hidden]="directory != directoryType.Okta">
|
<div [hidden]="directory != directoryType.Okta">
|
||||||
@@ -150,8 +165,15 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="oktaToken">{{'token' | i18n}}</label>
|
<label for="oktaToken">{{'token' | i18n}}</label>
|
||||||
<input type="text" class="form-control" id="oktaToken" name="OktaToken"
|
<div class="input-group">
|
||||||
|
<input type="{{showOktaKey ? 'text' : 'password'}}" class="form-control" id="oktaToken" name="OktaToken"
|
||||||
[(ngModel)]="okta.token">
|
[(ngModel)]="okta.token">
|
||||||
|
<div class="input-group-append">
|
||||||
|
<button type="button" class="btn btn-outline-primary" appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleOktaKey()">
|
||||||
|
<i class="fa fa-lg" aria-hidden="true"[ngClass]="{'fa-eye': !showOktaKey, 'fa-eye-slash': showOktaKey}"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div [hidden]="directory != directoryType.OneLogin">
|
<div [hidden]="directory != directoryType.OneLogin">
|
||||||
@@ -162,8 +184,15 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="oneLoginClientSecret">{{'clientSecret' | i18n}}</label>
|
<label for="oneLoginClientSecret">{{'clientSecret' | i18n}}</label>
|
||||||
<input type="text" class="form-control" id="oneLoginClientSecret" name="OneLoginClientSecret"
|
<div class="input-group">
|
||||||
|
<input type="{{showOneLoginSecret ? 'text' : 'password'}}" class="form-control" id="oneLoginClientSecret" name="OneLoginClientSecret"
|
||||||
[(ngModel)]="oneLogin.clientSecret">
|
[(ngModel)]="oneLogin.clientSecret">
|
||||||
|
<div class="input-group-append">
|
||||||
|
<button type="button" class="btn btn-outline-primary" appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleOneLoginSecret()">
|
||||||
|
<i class="fa fa-lg" aria-hidden="true"[ngClass]="{'fa-eye': !showOneLoginSecret, 'fa-eye-slash': showOneLoginSecret}"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="oneLoginRegion">{{'region' | i18n}}</label>
|
<label for="oneLoginRegion">{{'region' | i18n}}</label>
|
||||||
|
|||||||
@@ -38,6 +38,10 @@ export class SettingsComponent implements OnInit, OnDestroy {
|
|||||||
oneLogin = new OneLoginConfiguration();
|
oneLogin = new OneLoginConfiguration();
|
||||||
sync = new SyncConfiguration();
|
sync = new SyncConfiguration();
|
||||||
directoryOptions: any[];
|
directoryOptions: any[];
|
||||||
|
showLdapPassword: boolean = false;
|
||||||
|
showAzureKey: boolean = false;
|
||||||
|
showOktaKey: boolean = false;
|
||||||
|
showOneLoginSecret: boolean = false;
|
||||||
|
|
||||||
constructor(private i18nService: I18nService, private configurationService: ConfigurationService,
|
constructor(private i18nService: I18nService, private configurationService: ConfigurationService,
|
||||||
private changeDetectorRef: ChangeDetectorRef, private ngZone: NgZone,
|
private changeDetectorRef: ChangeDetectorRef, private ngZone: NgZone,
|
||||||
@@ -126,4 +130,20 @@ export class SettingsComponent implements OnInit, OnDestroy {
|
|||||||
filePicker.type = 'file';
|
filePicker.type = 'file';
|
||||||
filePicker.value = '';
|
filePicker.value = '';
|
||||||
}
|
}
|
||||||
|
toggleLdapPassword() {
|
||||||
|
this.showLdapPassword = !this.showLdapPassword;
|
||||||
|
document.getElementById('masterPassword').focus();
|
||||||
|
}
|
||||||
|
toggleAzureKey() {
|
||||||
|
this.showAzureKey = !this.showAzureKey;
|
||||||
|
document.getElementById('masterPassword').focus();
|
||||||
|
}
|
||||||
|
toggleOktaKey() {
|
||||||
|
this.showOktaKey = !this.showOktaKey;
|
||||||
|
document.getElementById('masterPassword').focus();
|
||||||
|
}
|
||||||
|
toggleOneLoginSecret() {
|
||||||
|
this.showOneLoginSecret = !this.showOneLoginSecret;
|
||||||
|
document.getElementById('masterPassword').focus();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user