1
0
mirror of https://github.com/bitwarden/desktop.git synced 2024-11-28 12:35:40 +01:00

Color passwords (#177)

* Highlight passwords in the cipher view

* Highlight generated password
This commit is contained in:
Andreas Schneider 2018-12-08 17:06:46 +01:00 committed by Kyle Spearrin
parent bfd8f55b4d
commit 4597390166
5 changed files with 22 additions and 2 deletions

View File

@ -37,6 +37,7 @@ import { StopClickDirective } from 'jslib/angular/directives/stop-click.directiv
import { StopPropDirective } from 'jslib/angular/directives/stop-prop.directive';
import { TrueFalseValueDirective } from 'jslib/angular/directives/true-false-value.directive';
import { ColorPasswordPipe } from 'jslib/angular/pipes/color-password.pipe';
import { I18nPipe } from 'jslib/angular/pipes/i18n.pipe';
import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe';
@ -141,6 +142,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
BoxRowDirective,
CiphersComponent,
CollectionsComponent,
ColorPasswordPipe,
EnvironmentComponent,
ExportComponent,
FallbackSrcDirective,

View File

@ -2,7 +2,7 @@
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body">
<div class="password-block">{{password}}</div>
<div class="password-block" [innerHTML]="password | colorPassword"></div>
<div class="box">
<div class="box-content condensed">
<a class="box-content-row" href="#" appStopClick appBlurClick

View File

@ -27,7 +27,7 @@
<div class="row-main">
<span class="row-label">{{'password' | i18n}}</span>
<span [hidden]="showPassword" class="monospaced">{{cipher.login.maskedPassword}}</span>
<span [hidden]="!showPassword" class="monospaced">{{cipher.login.password}}</span>
<span [hidden]="!showPassword" class="monospaced" [innerHTML]="cipher.login.password | colorPassword"></span>
</div>
<div class="action-buttons">
<button type="button" #checkPasswordBtn class="row-btn btn" appBlurClick

View File

@ -64,6 +64,18 @@ input, select, textarea {
}
}
.passwordNumber {
@include themify($themes) {
color: themed('passwordNumberColor');
}
}
.passwordSpecial {
@include themify($themes) {
color: themed('passwordSpecialColor');
}
}
input, select, textarea, button {
font-size: $font-size-base;
font-family: $font-family-sans-serif;

View File

@ -41,6 +41,8 @@ $button-color-danger: darken($brand-danger, 10%);
$themes: (
light: (
textColor: $text-color,
passwordNumberColor: #007fde,
passwordSpecialColor: #c40800,
borderColor: $border-color-dark,
backgroundColor: $background-color,
backgroundColorAlt: $background-color-alt,
@ -87,6 +89,8 @@ $themes: (
),
dark: (
textColor: #ffffff,
passwordNumberColor: #9fd9ff,
passwordSpecialColor: #ff7c70,
borderColor: #2f2f2f,
backgroundColor: #363636,
backgroundColorAlt: #3d3d3d,
@ -133,6 +137,8 @@ $themes: (
),
nord: (
textColor: $nord5,
passwordNumberColor: $nord8,
passwordSpecialColor: $nord12,
borderColor: $nord0,
backgroundColor: $nord2,
backgroundColorAlt: $nord1,