From f5459f4c857bc950f9bac8bf162160f0ea816957 Mon Sep 17 00:00:00 2001 From: Kyle Spearrin Date: Thu, 25 Jan 2018 16:15:47 -0500 Subject: [PATCH] ui elements for add cipher --- src/app/app-routing.module.ts | 2 +- src/app/vault/add.component.html | 160 ++++++++++++++++++++++++++++--- src/app/vault/add.component.ts | 56 ++++++++++- src/locales/en/messages.json | 102 ++++++++++++++++++++ src/scss/styles.scss | 21 +++- 5 files changed, 323 insertions(+), 18 deletions(-) diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index fc858be02e..278a80f8e6 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -8,7 +8,7 @@ import { LoginComponent } from './accounts/login.component'; import { VaultComponent } from './vault/vault.component'; const routes: Routes = [ - { path: '', redirectTo: '/login', pathMatch: 'full' }, + { path: '', redirectTo: '/vault', pathMatch: 'full' }, { path: 'login', component: LoginComponent }, { path: 'vault', component: VaultComponent }, ]; diff --git a/src/app/vault/add.component.html b/src/app/vault/add.component.html index 7863790a0e..a3f8807e31 100644 --- a/src/app/vault/add.component.html +++ b/src/app/vault/add.component.html @@ -1,31 +1,163 @@
-
+
{{'itemInformation' | i18n}}
-
+
- {{'name' | i18n}} - {{cipher.name}} + +
-
+
+ + +
+ +
- {{'uri' | i18n}} - {{cipher.login.uri}} + +
- {{'username' | i18n}} - {{cipher.login.username}} + +
- {{'password' | i18n}} - {{cipher.login.password}} + + +
+ + {{'generatePassword' | i18n}} + + +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
-
-
- Some footer information for add.
diff --git a/src/app/vault/add.component.ts b/src/app/vault/add.component.ts index 5ac1c0a1ae..6171546200 100644 --- a/src/app/vault/add.component.ts +++ b/src/app/vault/add.component.ts @@ -7,12 +7,16 @@ import { } from '@angular/core'; import { CipherType } from 'jslib/enums/cipherType'; +import { FieldType } from 'jslib/enums/fieldType'; import { SecureNoteType } from 'jslib/enums/secureNoteType'; import { CipherService } from 'jslib/abstractions/cipher.service'; +import { FolderService } from 'jslib/abstractions/folder.service'; +import { I18nService } from 'jslib/abstractions/i18n.service'; import { CardView } from 'jslib/models/view/cardView'; import { CipherView } from 'jslib/models/view/cipherView'; +import { FolderView } from 'jslib/models/view/folderView'; import { IdentityView } from 'jslib/models/view/identityView'; import { LoginView } from 'jslib/models/view/loginView'; import { SecureNoteView } from 'jslib/models/view/secureNoteView'; @@ -24,8 +28,56 @@ import { SecureNoteView } from 'jslib/models/view/secureNoteView'; export class AddComponent implements OnChanges { @Input() folderId: string; cipher: CipherView; + folders: FolderView[]; + cipherType = CipherType; + fieldType = FieldType; + typeOptions: any[]; + cardBrandOptions: any[]; + cardExpMonthOptions: any[]; + identityTitleOptions: any[]; - constructor(private cipherService: CipherService) { + constructor(private cipherService: CipherService, private folderService: FolderService, + private i18nService: I18nService) { + this.typeOptions = [ + { name: i18nService.t('typeLogin'), value: CipherType.Login }, + { name: i18nService.t('typeCard'), value: CipherType.Card }, + { name: i18nService.t('typeIdentity'), value: CipherType.Identity }, + { name: i18nService.t('typeSecureNote'), value: CipherType.SecureNote }, + ]; + this.cardBrandOptions = [ + { name: '-- ' + i18nService.t('select') + ' --', value: null }, + { name: 'Visa', value: 'Visa' }, + { name: 'Mastercard', value: 'Mastercard' }, + { name: 'American Express', value: 'Amex' }, + { name: 'Discover', value: 'Discover' }, + { name: 'Diners Club', value: 'Diners Club' }, + { name: 'JCB', value: 'JCB' }, + { name: 'Maestro', value: 'Maestro' }, + { name: 'UnionPay', value: 'UnionPay' }, + { name: i18nService.t('other'), value: 'Other' }, + ]; + this.cardExpMonthOptions = [ + { name: '-- ' + i18nService.t('select') + ' --', value: null }, + { name: '01 - ' + i18nService.t('january'), value: '1' }, + { name: '02 - ' + i18nService.t('february'), value: '2' }, + { name: '03 - ' + i18nService.t('march'), value: '3' }, + { name: '04 - ' + i18nService.t('april'), value: '4' }, + { name: '05 - ' + i18nService.t('may'), value: '5' }, + { name: '06 - ' + i18nService.t('june'), value: '6' }, + { name: '07 - ' + i18nService.t('july'), value: '7' }, + { name: '08 - ' + i18nService.t('august'), value: '8' }, + { name: '09 - ' + i18nService.t('september'), value: '9' }, + { name: '10 - ' + i18nService.t('october'), value: '10' }, + { name: '11 - ' + i18nService.t('november'), value: '11' }, + { name: '12 - ' + i18nService.t('december'), value: '12' }, + ]; + this.identityTitleOptions = [ + { name: '-- ' + i18nService.t('select') + ' --', value: null }, + { name: i18nService.t('mr'), value: i18nService.t('mr') }, + { name: i18nService.t('mrs'), value: i18nService.t('mrs') }, + { name: i18nService.t('ms'), value: i18nService.t('ms') }, + { name: i18nService.t('dr'), value: i18nService.t('dr') }, + ]; } async ngOnChanges() { @@ -37,5 +89,7 @@ export class AddComponent implements OnChanges { this.cipher.identity = new IdentityView(); this.cipher.secureNote = new SecureNoteView(); this.cipher.secureNote.type = SecureNoteType.Generic; + + this.folders = await this.folderService.getAllDecrypted(); } } diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json index 620e47640e..b4bc3a6989 100644 --- a/src/locales/en/messages.json +++ b/src/locales/en/messages.json @@ -142,5 +142,107 @@ }, "error": { "message": "Error" + }, + "january": { + "message": "January" + }, + "february": { + "message": "February" + }, + "march": { + "message": "March" + }, + "april": { + "message": "April" + }, + "may": { + "message": "May" + }, + "june": { + "message": "June" + }, + "july": { + "message": "July" + }, + "august": { + "message": "August" + }, + "september": { + "message": "September" + }, + "october": { + "message": "October" + }, + "november": { + "message": "November" + }, + "december": { + "message": "December" + }, + "ex": { + "message": "ex." + }, + "title": { + "message": "Title" + }, + "mr": { + "message": "Mr" + }, + "mrs": { + "message": "Mrs" + }, + "ms": { + "message": "Ms" + }, + "dr": { + "message": "Dr" + }, + "expirationMonth": { + "message": "Expiration Month" + }, + "expirationYear": { + "message": "Expiration Year" + }, + "select": { + "message": "Select" + }, + "other": { + "message": "Other" + }, + "generatePassword": { + "message": "Generate Password" + }, + "type": { + "message": "Type" + }, + "firstName": { + "message": "First Name" + }, + "middleName": { + "message": "Middle Name" + }, + "lastName": { + "message": "Last Name" + }, + "address1": { + "message": "Address 1" + }, + "address2": { + "message": "Address 2" + }, + "address3": { + "message": "Address 3" + }, + "cityTown": { + "message": "City / Town" + }, + "stateProvince": { + "message": "State / Province" + }, + "zipPostalCode": { + "message": "Zip / Postal Code" + }, + "country": { + "message": "Country" } } diff --git a/src/scss/styles.scss b/src/scss/styles.scss index 2b93eab7b4..be5ea0298f 100644 --- a/src/scss/styles.scss +++ b/src/scss/styles.scss @@ -635,7 +635,7 @@ a { text-overflow: ellipsis; } - .row-label { + .row-label, label { font-size: $font-size-small; color: $text-muted; display: block; @@ -644,7 +644,24 @@ a { margin-bottom: 5px; } - input { + 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%); + } + + &:focus { + outline: none; + } + } + + input[type="checkbox"] { + float: right; + display: inline-block; } .action-buttons {