attachments modal
This commit is contained in:
Kyle Spearrin
parent
1995cee08d
commit
6316842a49
|
|
@ -12,6 +12,7 @@ import { ToasterModule } from 'angular2-toaster';
|
|||
|
||||
import { AddEditComponent } from './vault/add-edit.component';
|
||||
import { AppComponent } from './app.component';
|
||||
import { AttachmentsComponent } from './vault/attachments.component';
|
||||
import { BlurClickDirective } from './directives/blur-click.directive';
|
||||
import { CiphersComponent } from './vault/ciphers.component';
|
||||
import { FallbackSrcDirective } from './directives/fallback-src.directive';
|
||||
|
|
@ -43,6 +44,7 @@ import { ViewComponent } from './vault/view.component';
|
|||
declarations: [
|
||||
AddEditComponent,
|
||||
AppComponent,
|
||||
AttachmentsComponent,
|
||||
BlurClickDirective,
|
||||
CiphersComponent,
|
||||
FallbackSrcDirective,
|
||||
|
|
@ -59,6 +61,7 @@ import { ViewComponent } from './vault/view.component';
|
|||
ViewComponent,
|
||||
],
|
||||
entryComponents: [
|
||||
AttachmentsComponent,
|
||||
ModalComponent,
|
||||
PasswordGeneratorComponent,
|
||||
],
|
||||
|
|
|
|||
|
|
@ -185,9 +185,10 @@
|
|||
<label for="favorite">{{'favorite' | i18n}}</label>
|
||||
<input id="favorite" type="checkbox" name="Favorite" [(ngModel)]="cipher.favorite">
|
||||
</div>
|
||||
<a class="box-content-row" href="#" appStopClick (click)="attachments()" *ngIf="editMode">
|
||||
{{'attachments' | i18n}}
|
||||
<i class="fa fa-chevron-right icon-right"></i>
|
||||
<a class="box-content-row box-content-row-flex" href="#" appStopClick appBlurClick
|
||||
(click)="attachments()" *ngIf="editMode">
|
||||
<div class="row-main">{{'attachments' | i18n}}</div>
|
||||
<i class="fa fa-chevron-right row-sub-icon"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
<div class="modal fade">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<div class="box" *ngIf="cipher">
|
||||
<div class="box-header">
|
||||
{{'attachments' | i18n}}
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<div *ngIf="cipher.hasAttachments">
|
||||
<div class="box-content-row box-content-row-flex" *ngFor="let a of cipher.attachments">
|
||||
<div class="row-main">
|
||||
{{a.fileName}}
|
||||
</div>
|
||||
<small class="row-sub-label">{{a.sizeName}}</small>
|
||||
<div class="action-buttons no-pad">
|
||||
<a class="row-btn" href="#" appStopClick appBlurClick title="{{'delete' | i18n}}"
|
||||
(click)="delete(a)">
|
||||
<i class="fa fa-lg fa-trash-o"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box-header">
|
||||
{{'newAttachment' | i18n}}
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<div class="box-content-row">
|
||||
<label for="file">{{'file' | i18n}}</label>
|
||||
<input type="file" id="file" name="file">
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">
|
||||
{{'maxFileSize' | i18n}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="primary" appBlurClick (click)="save()">
|
||||
<i class="fa fa-lg fa-save"></i> {{'save' | i18n}}
|
||||
</button>
|
||||
<button type="button" data-dismiss="modal">{{'close' | i18n}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
import * as template from './attachments.component.html';
|
||||
|
||||
import {
|
||||
Component,
|
||||
EventEmitter,
|
||||
Input,
|
||||
OnInit,
|
||||
Output,
|
||||
} from '@angular/core';
|
||||
|
||||
import { Angulartics2 } from 'angulartics2';
|
||||
import { ToasterService } from 'angular2-toaster';
|
||||
|
||||
import { CipherService } from 'jslib/abstractions/cipher.service';
|
||||
import { CryptoService } from 'jslib/abstractions/crypto.service';
|
||||
import { I18nService } from 'jslib/abstractions/i18n.service';
|
||||
import { TokenService } from 'jslib/abstractions/token.service';
|
||||
|
||||
import { Cipher } from 'jslib/models/domain/cipher';
|
||||
|
||||
import { CipherView } from 'jslib/models/view/cipherView';
|
||||
import { AttachmentView } from 'jslib/models/view/attachmentView';
|
||||
|
||||
@Component({
|
||||
selector: 'app-vault-attachments',
|
||||
template: template,
|
||||
})
|
||||
export class AttachmentsComponent implements OnInit {
|
||||
@Input() cipherId: string;
|
||||
|
||||
cipher: CipherView;
|
||||
cipherDomain: Cipher;
|
||||
hasUpdatedKey: boolean;
|
||||
canAccessAttachments: boolean;
|
||||
|
||||
constructor(private cipherService: CipherService, private analytics: Angulartics2,
|
||||
private toasterService: ToasterService, private i18nService: I18nService,
|
||||
private cryptoService: CryptoService, private tokenService: TokenService) { }
|
||||
|
||||
async ngOnInit() {
|
||||
this.cipherDomain = await this.cipherService.get(this.cipherId);
|
||||
this.cipher = await this.cipherDomain.decrypt();
|
||||
|
||||
const key = await this.cryptoService.getEncKey();
|
||||
this.hasUpdatedKey = key != null;
|
||||
const isPremium = this.tokenService.getPremium();
|
||||
this.canAccessAttachments = isPremium || this.cipher.organizationId != null;
|
||||
|
||||
if (!this.canAccessAttachments) {
|
||||
alert(this.i18nService.t('premiumRequiredDesc'));
|
||||
} else if (!this.hasUpdatedKey) {
|
||||
alert(this.i18nService.t('updateKey'));
|
||||
}
|
||||
}
|
||||
|
||||
async save() {
|
||||
if (!this.hasUpdatedKey) {
|
||||
this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
|
||||
this.i18nService.t('updateKey'));
|
||||
return;
|
||||
}
|
||||
|
||||
const fileEl = document.getElementById('file') as HTMLInputElement;
|
||||
const files = fileEl.files;
|
||||
if (files == null || files.length === 0) {
|
||||
this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
|
||||
this.i18nService.t('selectFile'));
|
||||
return;
|
||||
}
|
||||
|
||||
if (files[0].size > 104857600) { // 100 MB
|
||||
this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
|
||||
this.i18nService.t('maxFileSize'));
|
||||
return;
|
||||
}
|
||||
|
||||
this.cipherDomain = await this.cipherService.saveAttachmentWithServer(this.cipherDomain, files[0]);
|
||||
this.cipher = await this.cipherDomain.decrypt();
|
||||
this.analytics.eventTrack.next({ action: 'Added Attachment' });
|
||||
this.toasterService.popAsync('success', null, this.i18nService.t('attachmentSaved'));
|
||||
|
||||
// reset file input
|
||||
// ref: https://stackoverflow.com/a/20552042
|
||||
fileEl.type = '';
|
||||
fileEl.type = 'file';
|
||||
fileEl.value = '';
|
||||
}
|
||||
|
||||
async delete(attachment: AttachmentView) {
|
||||
if (!confirm(this.i18nService.t('deleteAttachmentConfirmation'))) {
|
||||
return;
|
||||
}
|
||||
|
||||
await this.cipherService.deleteAttachmentWithServer(this.cipher.id, attachment.id);
|
||||
this.analytics.eventTrack.next({ action: 'Deleted Attachment' });
|
||||
this.toasterService.popAsync('success', null, this.i18nService.t('deletedAttachment'));
|
||||
const i = this.cipher.attachments.indexOf(attachment);
|
||||
if (i > -1) {
|
||||
this.cipher.attachments.splice(i, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -27,4 +27,5 @@
|
|||
(onGeneratePassword)="openPasswordGenerator()">
|
||||
</app-vault-add-edit>
|
||||
<ng-template #passwordGenerator></ng-template>
|
||||
<ng-template #attachments></ng-template>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ import {
|
|||
|
||||
import { Location } from '@angular/common';
|
||||
|
||||
import { AttachmentsComponent } from './attachments.component';
|
||||
import { AddEditComponent } from './add-edit.component';
|
||||
import { CiphersComponent } from './ciphers.component';
|
||||
import { GroupingsComponent } from './groupings.component';
|
||||
|
|
@ -38,6 +39,7 @@ export class VaultComponent implements OnInit {
|
|||
@ViewChild(CiphersComponent) ciphersComponent: CiphersComponent;
|
||||
@ViewChild(GroupingsComponent) groupingsComponent: GroupingsComponent;
|
||||
@ViewChild('passwordGenerator', { read: ViewContainerRef }) passwordGeneratorModal: ViewContainerRef;
|
||||
@ViewChild('attachments', { read: ViewContainerRef }) attachmentsModal: ViewContainerRef;
|
||||
|
||||
action: string;
|
||||
cipherId: string = null;
|
||||
|
|
@ -130,7 +132,11 @@ export class VaultComponent implements OnInit {
|
|||
}
|
||||
|
||||
editCipherAttachments(cipher: CipherView) {
|
||||
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
|
||||
const modal = this.attachmentsModal.createComponent(factory).instance;
|
||||
const childComponent = modal.show<AttachmentsComponent>(AttachmentsComponent, this.attachmentsModal);
|
||||
|
||||
childComponent.cipherId = cipher.id;
|
||||
}
|
||||
|
||||
cancelledAddEdit(cipher: CipherView) {
|
||||
|
|
@ -180,10 +186,9 @@ export class VaultComponent implements OnInit {
|
|||
}
|
||||
|
||||
async openPasswordGenerator() {
|
||||
let factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
|
||||
let componentRef = this.passwordGeneratorModal.createComponent(factory);
|
||||
let modal = componentRef.instance as ModalComponent;
|
||||
let childComponent = modal.show<PasswordGeneratorComponent>(PasswordGeneratorComponent,
|
||||
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
|
||||
const modal = this.passwordGeneratorModal.createComponent(factory).instance;
|
||||
const childComponent = modal.show<PasswordGeneratorComponent>(PasswordGeneratorComponent,
|
||||
this.passwordGeneratorModal);
|
||||
|
||||
childComponent.showSelect = true;
|
||||
|
|
|
|||
|
|
@ -219,12 +219,12 @@
|
|||
{{'attachments' | i18n}}
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<a class="box-content-row" *ngFor="let attachment of cipher.attachments" href="#" appStopClick
|
||||
(click)="downloadAttachment(attachment)">
|
||||
<i class="right-icon fa fa-download fa-fw" *ngIf="!attachment.downloading"></i>
|
||||
<i class="right-icon fa fa-spinner fa-fw fa-spin" *ngIf="attachment.downloading"></i>
|
||||
<a class="box-content-row box-content-row-flex" *ngFor="let attachment of cipher.attachments"
|
||||
href="#" appStopClick appBlurCLick (click)="downloadAttachment(attachment)">
|
||||
<span class="row-main">{{attachment.fileName}}</span>
|
||||
<small class="row-sub-label">{{attachment.sizeName}}</small>
|
||||
{{attachment.fileName}}
|
||||
<i class="fa fa-download fa-fw row-sub-icon" *ngIf="!attachment.downloading"></i>
|
||||
<i class="fa fa-spinner fa-fw fa-spin row-sub-icon" *ngIf="attachment.downloading"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -346,5 +346,29 @@
|
|||
"searchType": {
|
||||
"message": "Search type",
|
||||
"description": "Search item type"
|
||||
},
|
||||
"newAttachment": {
|
||||
"message": "Add New Attachment"
|
||||
},
|
||||
"deletedAttachment": {
|
||||
"message": "Deleted attachment"
|
||||
},
|
||||
"deleteAttachmentConfirmation": {
|
||||
"message": "Are you sure you want to delete this attachment?"
|
||||
},
|
||||
"attachmentSaved": {
|
||||
"message": "The attachment has been saved."
|
||||
},
|
||||
"file": {
|
||||
"message": "File"
|
||||
},
|
||||
"selectFile": {
|
||||
"message": "Select a file."
|
||||
},
|
||||
"maxFileSize": {
|
||||
"message": "Maximum file size is 100 MB."
|
||||
},
|
||||
"updateKey": {
|
||||
"message": "You cannot use this feature until you update your encryption key."
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
z-index: 1;
|
||||
color: $text-color;
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-all;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
|
|
@ -58,12 +59,6 @@
|
|||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.no-wrap {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.row-label, label {
|
||||
font-size: $font-size-small;
|
||||
color: $text-muted;
|
||||
|
|
@ -137,6 +132,10 @@
|
|||
input {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
label, span {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
input:not([type="checkbox"]), textarea {
|
||||
|
|
@ -160,8 +159,10 @@
|
|||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
margin-left: 5px;
|
||||
|
||||
.row-btn {
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
padding: 10px 8px;
|
||||
background: none;
|
||||
|
|
@ -184,6 +185,11 @@
|
|||
padding-right: 2px !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.no-pad .row-btn {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
select.field-type {
|
||||
|
|
@ -191,21 +197,14 @@
|
|||
width: calc(100% - 25px);
|
||||
}
|
||||
|
||||
.right-icon, .fa-chevron-right {
|
||||
float: right;
|
||||
margin-top: 4px;
|
||||
.row-sub-icon {
|
||||
color: $list-icon-color;
|
||||
}
|
||||
|
||||
.row-sub-label {
|
||||
float: right;
|
||||
display: block;
|
||||
margin-right: 15px;
|
||||
margin: 0 15px;
|
||||
color: $gray-light;
|
||||
}
|
||||
|
||||
small.row-sub-label {
|
||||
margin-top: 2px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue