diff --git a/src/app/vault/add-edit.component.html b/src/app/vault/add-edit.component.html index 648a2b919c..404d0a2e10 100644 --- a/src/app/vault/add-edit.component.html +++ b/src/app/vault/add-edit.component.html @@ -26,15 +26,24 @@ -
- - +
+
+ + +
+
- - {{'generatePassword' | i18n}} - -
@@ -203,7 +212,7 @@ -
+
@@ -212,9 +221,9 @@ *ngIf="f.type === fieldType.Text" placeholder="{{'value' | i18n}}"> -
+
diff --git a/src/app/vault/add-edit.component.ts b/src/app/vault/add-edit.component.ts index add71960b2..e8feab704d 100644 --- a/src/app/vault/add-edit.component.ts +++ b/src/app/vault/add-edit.component.ts @@ -44,6 +44,7 @@ export class AddEditComponent implements OnChanges { editMode: boolean = false; cipher: CipherView; folders: FolderView[]; + showPassword: boolean = false; cipherType = CipherType; fieldType = FieldType; addFieldType: FieldType = FieldType.Text; @@ -182,4 +183,9 @@ export class AddEditComponent implements OnChanges { this.onGeneratePassword.emit(); } + + togglePassword() { + this.analytics.eventTrack.next({ action: 'Toggled Password on Edit' }); + this.showPassword = !this.showPassword; + } } diff --git a/src/app/vault/view.component.html b/src/app/vault/view.component.html index a3c1e324ea..c1365a4f64 100644 --- a/src/app/vault/view.component.html +++ b/src/app/vault/view.component.html @@ -11,7 +11,12 @@
-
+
+
+ {{'uri' | i18n}} + {{'website' | i18n}} + {{cipher.login.domainOrUri}} +
- {{'uri' | i18n}} - {{'website' | i18n}} - {{cipher.login.domainOrUri}}
-
+
+
+ {{'username' | i18n}} + {{cipher.login.username}} +
- {{'username' | i18n}} - {{cipher.login.username}}
-
+
+
+ {{'password' | i18n}} + {{cipher.login.maskedPassword}} + {{cipher.login.password}} +
- {{'password' | i18n}} - {{cipher.login.maskedPassword}} - {{cipher.login.password}}
-
-
- - - +
+ {{'verificationCodeTotp' | i18n}} + {{totpCodeFormatted}}
{{totpSec}} @@ -70,8 +74,12 @@ - {{'verificationCodeTotp' | i18n}} - {{totpCodeFormatted}} +
+ + + +
@@ -80,15 +88,17 @@ {{'cardholderName' | i18n}} {{cipher.card.cardholderName}}
-
+
+
+ {{'number' | i18n}} + {{cipher.card.number}} +
- {{'number' | i18n}} - {{cipher.card.number}}
{{'brand' | i18n}} @@ -98,15 +108,17 @@ {{'expiration' | i18n}} {{cipher.card.expiration}}
-
+
+
+ {{'securityCode' | i18n}} + {{cipher.card.code}} +
- {{'securityCode' | i18n}} - {{cipher.card.code}}
@@ -172,7 +184,21 @@ {{'customFields' | i18n}}
-
+
+
+ {{field.name}} +
+ {{field.value || ' '}} +
+
+ {{field.value}} + {{field.maskedValue}} +
+
+ + +
+
- {{field.name}} -
- {{field.value || ' '}} -
-
- {{field.value}} - {{field.maskedValue}} -
-
- - -
diff --git a/src/scss/box.scss b/src/scss/box.scss index 92bfbbe1f6..68a55d91fb 100644 --- a/src/scss/box.scss +++ b/src/scss/box.scss @@ -15,10 +15,10 @@ box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2); .box-content-row { + display: block; padding: 10px 15px; position: relative; z-index: 1; - display: block; color: $text-color; overflow-wrap: break-word; @@ -64,21 +64,6 @@ text-overflow: ellipsis; } - &.box-content-row-cf { - display: flex; - align-items: center; - width: 100%; - - > a { - padding: 8px 10px 8px 5px; - color: $brand-danger; - } - - > div { - width: 100%; - } - } - .row-label, label { font-size: $font-size-small; color: $text-muted; @@ -87,10 +72,29 @@ margin-bottom: 5px; } - &.box-content-row-checkbox, &.box-content-row-input, &.box-content-row-slider { + &.box-content-row-flex, &.box-content-row-checkbox, &.box-content-row-input, + &.box-content-row-slider, &.box-content-row-cf { display: flex; align-items: center; + } + &.box-content-row-flex { + .row-main { + flex-grow: 1; + } + } + + &.box-content-row-cf { + width: 100%; + + > a { + padding: 8px 10px 8px 5px; + color: $brand-danger; + margin: 0; + } + } + + &.box-content-row-checkbox, &.box-content-row-input, &.box-content-row-slider { label, .row-label { font-size: $font-size-base; color: $text-color; @@ -147,14 +151,7 @@ } } - input[type="checkbox"] { - float: right; - display: inline-block; - } - .action-buttons { - float: right; - .row-btn { float: left; cursor: pointer; diff --git a/src/scss/misc.scss b/src/scss/misc.scss index 2d81a682b4..70bf0344e3 100644 --- a/src/scss/misc.scss +++ b/src/scss/misc.scss @@ -33,7 +33,6 @@ margin: 3px 3px 0 0; display: block; user-select: none; - float: right; .totp-sec { font-size: 0.85em;