diff --git a/src/app/vault/add.component.html b/src/app/vault/add.component.html index 09b27c48fae..9e2d21de6cd 100644 --- a/src/app/vault/add.component.html +++ b/src/app/vault/add.component.html @@ -160,6 +160,70 @@ +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+ +
+
+
+ +
+
+
+
+
+ {{'customFields' | i18n}} +
+
+
+
+ + + +
+ + + + + + +
+
+
+
+ + {{'newCustomField' | i18n}} + + + +
+
+
diff --git a/src/app/vault/add.component.ts b/src/app/vault/add.component.ts index 6171546200e..e16102f6bbf 100644 --- a/src/app/vault/add.component.ts +++ b/src/app/vault/add.component.ts @@ -16,6 +16,7 @@ import { I18nService } from 'jslib/abstractions/i18n.service'; import { CardView } from 'jslib/models/view/cardView'; import { CipherView } from 'jslib/models/view/cipherView'; +import { FieldView } from 'jslib/models/view/fieldView'; import { FolderView } from 'jslib/models/view/folderView'; import { IdentityView } from 'jslib/models/view/identityView'; import { LoginView } from 'jslib/models/view/loginView'; @@ -31,10 +32,12 @@ export class AddComponent implements OnChanges { folders: FolderView[]; cipherType = CipherType; fieldType = FieldType; + addFieldType: FieldType = FieldType.Text; typeOptions: any[]; cardBrandOptions: any[]; cardExpMonthOptions: any[]; identityTitleOptions: any[]; + addFieldTypeOptions: any[]; constructor(private cipherService: CipherService, private folderService: FolderService, private i18nService: I18nService) { @@ -78,6 +81,11 @@ export class AddComponent implements OnChanges { { name: i18nService.t('ms'), value: i18nService.t('ms') }, { name: i18nService.t('dr'), value: i18nService.t('dr') }, ]; + this.addFieldTypeOptions = [ + { name: i18nService.t('cfTypeText'), value: FieldType.Text }, + { name: i18nService.t('cfTypeHidden'), value: FieldType.Hidden }, + { name: i18nService.t('cfTypeBoolean'), value: FieldType.Boolean }, + ]; } async ngOnChanges() { @@ -92,4 +100,21 @@ export class AddComponent implements OnChanges { this.folders = await this.folderService.getAllDecrypted(); } + + addField() { + if (this.cipher.fields == null) { + this.cipher.fields = []; + } + + const f = new FieldView(); + f.type = this.addFieldType; + this.cipher.fields.push(f); + }; + + removeField(field: FieldView) { + const i = this.cipher.fields.indexOf(field); + if (i > -1) { + this.cipher.fields.splice(i, 1); + } + }; } diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json index 1b36137307c..dad80abbae5 100644 --- a/src/locales/en/messages.json +++ b/src/locales/en/messages.json @@ -259,5 +259,29 @@ }, "edit": { "message": "Edit" + }, + "authenticatorKeyTotp": { + "message": "Authenticator Key (TOTP)" + }, + "folder": { + "message": "Folder" + }, + "newCustomField": { + "message": "New Custom Field" + }, + "value": { + "message": "Value" + }, + "cfTypeText": { + "message": "Text" + }, + "cfTypeHidden": { + "message": "Hidden" + }, + "cfTypeBoolean": { + "message": "Boolean" + }, + "remove": { + "message": "Remove" } } diff --git a/src/scss/styles.scss b/src/scss/styles.scss index 61088e81cda..4f3ce5beb69 100644 --- a/src/scss/styles.scss +++ b/src/scss/styles.scss @@ -71,6 +71,7 @@ html, body { font-family: $font-family-sans-serif; font-size: $font-size-base; color: $text-color; + line-height: 1.42857143; } body { @@ -92,6 +93,21 @@ a { font-family: $font-family-monospace; } +.sr-only { + position: absolute !important; + width: 1px !important; + height: 1px !important; + padding: 0 !important; + margin: -1px !important; + overflow: hidden !important; + clip: rect(0, 0, 0, 0) !important; + border: 0 !important; +} + +input, select, textarea, button { + font-size: $font-size-base; +} + #vault { height: 100vh; display: flex; @@ -619,6 +635,10 @@ a { margin-top: 10px; } + &:last-child { + margin-bottom: 30px; + } + .box-header { margin: 0 10px 5px 10px; color: $gray-light; @@ -680,20 +700,48 @@ a { 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; display: block; width: 100%; - font-weight: normal; margin-bottom: 5px; } + &.box-content-row-checkbox, &.box-content-row-input, &.box-content-row-slider { + label, .row-label { + font-size: $font-size-base; + color: $text-color; + display: inline; + width: initial; + margin-bottom: 0; + float: left; + } + + input.row-label { + width: calc(100% - 40px); + } + } + input:not([type="checkbox"]), select, textarea { border: none; width: 100%; background-color: transparent; - font-size: $font-size-base; &::-webkit-input-placeholder { color: lighten($gray-light, 35%); @@ -738,6 +786,11 @@ a { } } + select.field-type { + margin: 5px 0 0 25px; + width: calc(100% - 25px); + } + .right-icon { float: right; margin-top: 4px;