1
0
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:
Luc
2021-06-08 15:53:44 -07:00
parent 56d05af07a
commit a6aafe7593
4 changed files with 66 additions and 5 deletions

View File

@@ -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">

View File

@@ -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();
}
} }

View File

@@ -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>

View File

@@ -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();
}
} }