Upstream/bitwarden-desktop
1
0
Fork 0
mirror of https://github.com/bitwarden/desktop.git synced 2024-11-24 11:55:50 +01:00
Code Issues Projects Releases Wiki Activity

finish add item fields

Browse Source
This commit is contained in:
Kyle Spearrin 2018-01-25 22:54:09 -05:00
parent 07d7f196a6
commit b94b879f53
4 changed files with 168 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/app/vault/add.component.html
View File

@ -160,6 +160,70 @@
</div>
</div>
</div>
<div class="box">
<div class="box-content">
<div class="box-content-row" *ngIf="cipher.type === cipherType.Login">
<label for="loginTotp">{{'authenticatorKeyTotp' | i18n}}</label>
<input id="loginTotp" type="text" name="Login.Totp" [(ngModel)]="cipher.login.totp">
</div>
<div class="box-content-row">
<label for="folder">{{'folder' | i18n}}</label>
<select id="folder" name="FolderId" [(ngModel)]="cipher.folderId">
<option *ngFor="let f of folders" [ngValue]="f.id">{{f.name}}</option>
</select>
</div>
<div class="box-content-row box-content-row-checkbox">
<label for="favorite">{{'favorite' | i18n}}</label>
<input id="favorite" type="checkbox" name="Favorite" [(ngModel)]="cipher.favorite">
</div>
</div>
</div>
<div class="box">
<div class="box-header">
<label for="notes">{{'notes' | i18n}}</label>
</div>
<div class="box-content">
<div class="box-content-row">
<textarea id="notes" name="Notes" rows="12" [(ngModel)]="cipher.notes"></textarea>
</div>
</div>
</div>
<div class="box">
<div class="box-header">
{{'customFields' | i18n}}
</div>
<div class="box-content">
<div *ngIf="cipher.hasFields">
<div class="box-content-row box-content-row-cf" *ngFor="let f of cipher.fields; let i = index"
[ngClass]="{'box-content-row-checkbox': f.type === fieldType.Boolean}">
<a href="#" appStopClick (click)="removeField(f)" title="{{'remove' | i18n}}">
<i class="fa fa-close fa-lg"></i>
</a>
<div>
<label for="fieldName{{i}}" class="sr-only">{{'name' | i18n}}</label>
<input id="fieldName{{i}}" type="text" name="Field.Name{{i}}" [(ngModel)]="f.name"
class="row-label" placeholder="{{'name' | i18n}}">
<label for="fieldValue{{i}}" class="sr-only">{{'value' | i18n}}</label>
<input id="fieldValue{{i}}" type="text" name="Field.Value{{i}}" [(ngModel)]="f.value"
*ngIf="f.type === fieldType.Text" placeholder="{{'value' | i18n}}">
<input id="fieldValue{{i}}" type="password" name="Field.Value{{i}}" [(ngModel)]="f.value"
*ngIf="f.type === fieldType.Hidden" placeholder="{{'value' | i18n}}">
<input id="fieldValue{{i}}" name="Field.Value{{i}}" type="checkbox"
[(ngModel)]="f.value" *ngIf="f.type === fieldType.Boolean">
</div>
</div>
</div>
<div class="box-content-row">
<a href="#" appStopClick (click)="addField()">
<i class="fa fa-plus-circle fa-fw fa-lg"></i> {{'newCustomField' | i18n}}
</a>
<label for="addFieldType" class="sr-only">{{'type' | i18n}}</label>
<select id="addFieldType" [(ngModel)]="addFieldType" class="field-type">
<option *ngFor="let o of addFieldTypeOptions" [ngValue]="o.value">{{o.name}}</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="footer">

25
src/app/vault/add.component.ts
View File

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

24
src/locales/en/messages.json
View File

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

57
src/scss/styles.scss
View File

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