From 1c41dfa1964f90d5f5a7d1adb2bc2fb49f33ae52 Mon Sep 17 00:00:00 2001 From: Kyle Spearrin Date: Wed, 31 Jan 2018 12:52:12 -0500 Subject: [PATCH] api actions on add/edit --- src/app/accounts/login.component.html | 2 +- src/app/app.module.ts | 4 +- ...m.directive.ts => api-action.directive.ts} | 10 +- src/app/vault/add-edit.component.html | 505 +++++++++--------- src/app/vault/add-edit.component.ts | 30 +- src/app/vault/folder-add-edit.component.html | 17 +- src/app/vault/folder-add-edit.component.ts | 30 +- src/app/vault/groupings.component.html | 2 +- src/app/vault/view.component.html | 4 +- src/locales/en/messages.json | 3 - src/scss/buttons.scss | 2 +- src/scss/vault.scss | 5 + 12 files changed, 324 insertions(+), 290 deletions(-) rename src/app/directives/{api-form.directive.ts => api-action.directive.ts} (69%) diff --git a/src/app/accounts/login.component.html b/src/app/accounts/login.component.html index 881cac1101..9d4f05f79f 100644 --- a/src/app/accounts/login.component.html +++ b/src/app/accounts/login.component.html @@ -1,5 +1,5 @@
-
+
bitwarden

{{'loginOrCreateNewAccount' | i18n}}

diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 3ef33ffc56..8c42e6187e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -11,7 +11,7 @@ import { ServicesModule } from './services/services.module'; import { ToasterModule } from 'angular2-toaster'; import { AddEditComponent } from './vault/add-edit.component'; -import { ApiFormDirective } from './directives/api-form.directive'; +import { ApiActionDirective } from './directives/api-action.directive'; import { AppComponent } from './app.component'; import { AttachmentsComponent } from './vault/attachments.component'; import { AutofocusDirective } from './directives/autofocus.directive'; @@ -47,7 +47,7 @@ import { ViewComponent } from './vault/view.component'; ], declarations: [ AddEditComponent, - ApiFormDirective, + ApiActionDirective, AppComponent, AttachmentsComponent, AutofocusDirective, diff --git a/src/app/directives/api-form.directive.ts b/src/app/directives/api-action.directive.ts similarity index 69% rename from src/app/directives/api-form.directive.ts rename to src/app/directives/api-action.directive.ts index 4425507533..a04eb47947 100644 --- a/src/app/directives/api-form.directive.ts +++ b/src/app/directives/api-action.directive.ts @@ -8,21 +8,21 @@ import { import { ValidationService } from '../services/validation.service'; @Directive({ - selector: '[appApiForm]', + selector: '[appApiAction]', }) -export class ApiFormDirective implements OnChanges { - @Input() appApiForm: Promise; +export class ApiActionDirective implements OnChanges { + @Input() appApiAction: Promise; constructor(private el: ElementRef, private validationService: ValidationService) { } ngOnChanges(changes: any) { - if (this.appApiForm == null || this.appApiForm.then == null) { + if (this.appApiAction == null || this.appApiAction.then == null) { return; } this.el.nativeElement.loading = true; - this.appApiForm.then((response: any) => { + this.appApiAction.then((response: any) => { this.el.nativeElement.loading = false; }, (e: any) => { this.el.nativeElement.loading = false; diff --git a/src/app/vault/add-edit.component.html b/src/app/vault/add-edit.component.html index 4adbfbc590..de081aebc2 100644 --- a/src/app/vault/add-edit.component.html +++ b/src/app/vault/add-edit.component.html @@ -1,265 +1,272 @@ -
-
-
-
- {{'itemInformation' | i18n}} -
-
-
- - + +
+
+
+
+ {{title}}
-
- - -
- -
-
- - -
-
- - -
-
-
- - -
-
- - - - - - -
-
-
- -
-
- - -
-
- - -
-
- - +
- - + +
-
- - -
-
- - -
-
- -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
-
-
-
-
-
- - -
-
- - -
-
- - -
- -
{{'attachments' | i18n}}
- - -
-
-
-
- -
-
-
- -
-
-
-
-
- {{'customFields' | i18n}} -
-
-
-
- - - - - -
- - - + +
+
+ +
- -
- - - +
+ + +
+
+
+ + +
+
+ + + + + + +
+
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
-
- - {{'newCustomField' | i18n}} +
+
+
+
+ + +
+
+ + +
+
+ + +
+ +
{{'attachments' | i18n}}
+ - - +
+
+
+
+ +
+
+
+ +
+
+
+
+
+ {{'customFields' | i18n}} +
+
+
+
+ + + + + +
+ + + +
+ +
+ + + +
+
+
+
+ + {{'newCustomField' | i18n}} + + + +
-
-
- - -
- + +
+ +
-
+ diff --git a/src/app/vault/add-edit.component.ts b/src/app/vault/add-edit.component.ts index 6e54122ade..1141370fc8 100644 --- a/src/app/vault/add-edit.component.ts +++ b/src/app/vault/add-edit.component.ts @@ -44,6 +44,9 @@ export class AddEditComponent implements OnChanges { editMode: boolean = false; cipher: CipherView; folders: FolderView[]; + title: string; + formPromise: Promise; + deletePromise: Promise; showPassword: boolean = false; cipherType = CipherType; fieldType = FieldType; @@ -109,9 +112,11 @@ export class AddEditComponent implements OnChanges { if (this.editMode) { this.editMode = true; + this.title = this.i18nService.t('editItem'); const cipher = await this.cipherService.get(this.cipherId); this.cipher = await cipher.decrypt(); } else { + this.title = this.i18nService.t('addItem'); this.cipher = new CipherView(); this.cipher.folderId = this.folderId; this.cipher.type = CipherType.Login; @@ -125,7 +130,7 @@ export class AddEditComponent implements OnChanges { this.folders = await this.folderService.getAllDecrypted(); } - async save() { + async submit() { if (this.cipher.name == null || this.cipher.name === '') { this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'), this.i18nService.t('nameRequired')); @@ -133,10 +138,14 @@ export class AddEditComponent implements OnChanges { } const cipher = await this.cipherService.encrypt(this.cipher); - await this.cipherService.saveWithServer(cipher); - this.analytics.eventTrack.next({ action: this.editMode ? 'Edited Cipher' : 'Added Cipher' }); - this.toasterService.popAsync('success', null, this.i18nService.t(this.editMode ? 'editedItem' : 'addedItem')); - this.onSavedCipher.emit(this.cipher); + + try { + this.formPromise = this.cipherService.saveWithServer(cipher); + await this.formPromise; + this.analytics.eventTrack.next({ action: this.editMode ? 'Edited Cipher' : 'Added Cipher' }); + this.toasterService.popAsync('success', null, this.i18nService.t(this.editMode ? 'editedItem' : 'addedItem')); + this.onSavedCipher.emit(this.cipher); + } catch { } } addField() { @@ -169,10 +178,13 @@ export class AddEditComponent implements OnChanges { return; } - await this.cipherService.deleteWithServer(this.cipher.id); - this.analytics.eventTrack.next({ action: 'Deleted Cipher' }); - this.toasterService.popAsync('success', null, this.i18nService.t('deletedItem')); - this.onDeletedCipher.emit(this.cipher); + try { + this.deletePromise = this.cipherService.deleteWithServer(this.cipher.id); + await this.deletePromise; + this.analytics.eventTrack.next({ action: 'Deleted Cipher' }); + this.toasterService.popAsync('success', null, this.i18nService.t('deletedItem')); + this.onDeletedCipher.emit(this.cipher); + } catch { } } generatePassword() { diff --git a/src/app/vault/folder-add-edit.component.html b/src/app/vault/folder-add-edit.component.html index 0fcf314d3f..b6dce984f7 100644 --- a/src/app/vault/folder-add-edit.component.html +++ b/src/app/vault/folder-add-edit.component.html @@ -1,6 +1,6 @@
-
+
@@ -16,17 +16,20 @@
-
-
-
+
diff --git a/src/app/vault/folder-add-edit.component.ts b/src/app/vault/folder-add-edit.component.ts index d57bd72a82..c939811382 100644 --- a/src/app/vault/folder-add-edit.component.ts +++ b/src/app/vault/folder-add-edit.component.ts @@ -28,6 +28,8 @@ export class FolderAddEditComponent implements OnInit { editMode: boolean = false; folder: FolderView = new FolderView(); title: string; + formPromise: Promise; + deletePromise: Promise; constructor(private folderService: FolderService, private i18nService: I18nService, private analytics: Angulartics2, private toasterService: ToasterService) { } @@ -45,19 +47,22 @@ export class FolderAddEditComponent implements OnInit { } } - async save() { + async submit() { if (this.folder.name == null || this.folder.name === '') { this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'), this.i18nService.t('nameRequired')); return; } - const folder = await this.folderService.encrypt(this.folder); - await this.folderService.saveWithServer(folder); - this.analytics.eventTrack.next({ action: this.editMode ? 'Edited Folder' : 'Added Folder' }); - this.toasterService.popAsync('success', null, - this.i18nService.t(this.editMode ? 'editedFolder' : 'addedFolder')); - this.onSavedFolder.emit(this.folder); + try { + const folder = await this.folderService.encrypt(this.folder); + this.formPromise = this.folderService.saveWithServer(folder);; + await this.formPromise; + this.analytics.eventTrack.next({ action: this.editMode ? 'Edited Folder' : 'Added Folder' }); + this.toasterService.popAsync('success', null, + this.i18nService.t(this.editMode ? 'editedFolder' : 'addedFolder')); + this.onSavedFolder.emit(this.folder); + } catch { } } async delete() { @@ -65,9 +70,12 @@ export class FolderAddEditComponent implements OnInit { return; } - await this.folderService.deleteWithServer(this.folder.id); - this.analytics.eventTrack.next({ action: 'Deleted Folder' }); - this.toasterService.popAsync('success', null, this.i18nService.t('deletedFolder')); - this.onDeletedFolder.emit(this.folder); + try { + this.deletePromise = this.folderService.deleteWithServer(this.folder.id); + await this.deletePromise; + this.analytics.eventTrack.next({ action: 'Deleted Folder' }); + this.toasterService.popAsync('success', null, this.i18nService.t('deletedFolder')); + this.onDeletedFolder.emit(this.folder); + } catch { } } } diff --git a/src/app/vault/groupings.component.html b/src/app/vault/groupings.component.html index e67de20cda..0106e4c083 100644 --- a/src/app/vault/groupings.component.html +++ b/src/app/vault/groupings.component.html @@ -45,7 +45,7 @@
  • {{f.name}} - + diff --git a/src/app/vault/view.component.html b/src/app/vault/view.component.html index 30ad8e1c67..b607e7ec90 100644 --- a/src/app/vault/view.component.html +++ b/src/app/vault/view.component.html @@ -231,5 +231,7 @@
    • - +
    diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json index 77f955a9b2..c5adbb78c2 100644 --- a/src/locales/en/messages.json +++ b/src/locales/en/messages.json @@ -59,9 +59,6 @@ "editItem": { "message": "Edit Item" }, - "itemInformation": { - "message": "Item Information" - }, "emailAddress": { "message": "Email Address" }, diff --git a/src/scss/buttons.scss b/src/scss/buttons.scss index ec094249ec..51353290ff 100644 --- a/src/scss/buttons.scss +++ b/src/scss/buttons.scss @@ -21,7 +21,7 @@ } &[disabled] { - background-color: darken($button-backgound-color, 1.5%); + opacity: 0.65; cursor: default; } diff --git a/src/scss/vault.scss b/src/scss/vault.scss index a3f195a676..b70e3d17b0 100644 --- a/src/scss/vault.scss +++ b/src/scss/vault.scss @@ -125,6 +125,11 @@ margin-bottom: 30px; } } + + > form { + display: flex; + flex-direction: column; + } } #groupings, #items, #details {