vaultwarden
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

Send layout & search

This commit is contained in:
addison 2021-02-03 16:24:49 -05:00
parent 62a43e536c
commit 6e49c481f0
15 changed files with 413 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
jslib

@ -1 +1 @@
Subproject commit d1c46e6bdc9332bcf47acbd235c3a6278e086d8a
Subproject commit a16d8f7de7abe63532bcf7452cb7517f9174189a

6
src/app/app-routing.module.ts
View File

@ -15,6 +15,7 @@ import { SsoComponent } from './accounts/sso.component';
import { TwoFactorComponent } from './accounts/two-factor.component';
import { VaultComponent } from './vault/vault.component';
import { SendComponent } from './send/send.component';
const routes: Routes = [
{ path: '', redirectTo: '/vault', pathMatch: 'full' },
@ -30,6 +31,11 @@ const routes: Routes = [
{ path: 'hint', component: HintComponent },
{ path: 'set-password', component: SetPasswordComponent },
{ path: 'sso', component: SsoComponent },
{
path: 'send',
component: SendComponent,
canActivate: [AuthGuardService],
},
];
@NgModule({

11
src/app/app.module.ts
View File

@ -10,6 +10,7 @@ import { AppRoutingModule } from './app-routing.module';
import { ServicesModule } from './services.module';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { DatePipe } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
@ -62,6 +63,10 @@ import { ShareComponent } from './vault/share.component';
import { VaultComponent } from './vault/vault.component';
import { ViewComponent } from './vault/view.component';
import { AccessComponent } from './send/access.component';
import { AddEditComponent as SendAddEditComponent } from './send/add-edit.component';
import { SendComponent } from './send/send.component';
import { registerLocaleData } from '@angular/common';
import localeBe from '@angular/common/locales/be';
import localeBg from '@angular/common/locales/bg';
@ -155,6 +160,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
],
declarations: [
A11yTitleDirective,
AccessComponent,
AddEditComponent,
ApiActionDirective,
AppComponent,
@ -184,6 +190,8 @@ registerLocaleData(localeZhTw, 'zh-TW');
RegisterComponent,
SearchCiphersPipe,
SelectCopyDirective,
SendAddEditComponent,
SendComponent,
SetPasswordComponent,
SettingsComponent,
ShareComponent,
@ -209,9 +217,10 @@ registerLocaleData(localeZhTw, 'zh-TW');
PremiumComponent,
SettingsComponent,
ShareComponent,
SendAddEditComponent,
TwoFactorOptionsComponent,
],
providers: [],
providers: [DatePipe],
bootstrap: [AppComponent],
})
export class AppModule { }

7
src/app/send/access.component.html Normal file
View File

@ -0,0 +1,7 @@
<div class="details">
<div clas="content">
<div class="inner-content">
<p>Under construction</p>
</div>
</div>
</div>

14
src/app/send/access.component.ts Normal file
View File

@ -0,0 +1,14 @@
import {
Component,
OnInit,
} from '@angular/core';
@Component({
selector: 'app-send-access',
templateUrl: 'access.component.html',
})
export class AccessComponent implements OnInit {
constructor() { }
ngOnInit() { }
}

7
src/app/send/add-edit.component.html Normal file
View File

@ -0,0 +1,7 @@
<div class="details">
<div clas="content">
<div class="inner-content">
<p>Under construction</p>
</div>
</div>
</div>

26
src/app/send/add-edit.component.ts Normal file
View File

@ -0,0 +1,26 @@
import { DatePipe } from '@angular/common';
import { Component } from '@angular/core';
import { EnvironmentService } from 'jslib/abstractions/environment.service';
import { I18nService } from 'jslib/abstractions/i18n.service';
import { MessagingService } from 'jslib/abstractions/messaging.service';
import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
import { SendService } from 'jslib/abstractions/send.service';
import { UserService } from 'jslib/abstractions/user.service';
import { AddEditComponent as BaseAddEditComponent } from 'jslib/angular/components/send/add-edit.component';
@Component({
selector: 'app-send-add-edit',
templateUrl: 'add-edit.component.html',
})
export class AddEditComponent extends BaseAddEditComponent {
constructor(i18nService: I18nService, platformUtilsService: PlatformUtilsService,
environmentService: EnvironmentService, datePipe: DatePipe,
sendService: SendService, userService: UserService,
messagingService: MessagingService) {
super(i18nService, platformUtilsService, environmentService,
datePipe, sendService, userService, messagingService);
}
}

80
src/app/send/send.component.html Normal file
View File

@ -0,0 +1,80 @@
<div id="sends" class="vault">
<div class="groupings">
<div class="mac-bar"></div>
<div class="content">
<div class="inner-content">
<div class="top-content">
<h2 class="sr-only">{{'filters' | i18n}}</h2>
<ul>
<li [ngClass]="{active: selectedAll}">
<a href="#" appStopClick appBlurClick (click)="selectAll()">
<i class="fa fa-fw fa-th" aria-hidden="true"></i>&nbsp;{{'allSends' | i18n}}
</a>
</li>
</ul>
<h2>{{'types' | i18n}}</h2>
<ul>
<li [ngClass]="{active: selectedType === sendType.Text}">
<a href="#" appStopClick appBlurClick (click)="selectType(sendType.Text)">
<i class="fa fa-fw fa-file-text-o" aria-hidden="true"></i>&nbsp;{{'sendTypeText' | i18n}}
</a>
</li>
<li [ngClass]="{active: selectedType === sendType.File}">
<a href="#" appStopClick appBlurClick (click)="selectType(sendType.File)">
<i class="fa fa-fw fa-file-o" aria-hidden="true"></i>&nbsp;{{'sendTypeFile' | i18n}}
</a>
</li>
</ul>
</div>
<div class="bottom-content">
<a routerLink="/" class="fa fa-lock btn primary icon-link" title="Bitwarden Vault"></a>
</div>
</div>
</div>
</div>
<div id="items" class="items">
<div class="header header-search">
<div class="search">
<input type="search" placeholder="{{'searchSends' | i18n}}" id="search"
[(ngModel)]="searchText" (input)="searchTextChanged()" autocomplete="off" appAutofocus>
<i class="fa fa-search" aria-hidden="true"></i>
</div>
</div>
<div class="content">
<div class="list" *ngIf="filteredSends.length" infiniteScroll [infiniteScrollDistance]="1"
[infiniteScrollContainer]="'#items .content'" [fromRoot]="true" (scrolled)="loadMore()">
<a *ngFor="let s of filteredSends" appStopClick (click)="selectSend(s)"
href="#" title="{{'viewItem' | i18n}}"
[ngClass]="{'active': s.id === activeSendId}">
<div class="icon" aria-hidden="true">
<i class="fa fa-fw fa-lg" [ngClass]="s.type == 0 ? 'fa-file-o' : 'fa-file-text-o'"></i>
</div>
<span class="text">
{{s.name}}
</span>
<span class="detail">{{s.deletionDate | date}}</span>
</a>
</div>
<div class="no-items" *ngIf="!filteredSends.length">
<i class="fa fa-spinner fa-spin fa-3x" *ngIf="!loaded" aria-hidden="true"></i>
<ng-container *ngIf="loaded">
<i class="fa fa-frown-o fa-4x" aria-hidden="true"></i>
<p>{{'noItemsInList' | i18n}}</p>
</ng-container>
</div>
</div>
<div class="footer">
<button appBlurClick (click)="addSend()" class="block primary" appA11yTitle="{{'addItem' | i18n}}">
<i class="fa fa-plus fa-lg" aria-hidden="true"></i>
</button>
</div>
</div>
<app-send-add-edit *ngIf="action == 'add' || action == 'edit'"></app-send-add-edit>
<div class="logo" *ngIf="!action">
<div class="content">
<div class="inner-content">
<img class="logo-image" alt="Bitwarden" aria-hidden="true" />
</div>
</div>
</div>
</div>

126
src/app/send/send.component.ts Normal file
View File

@ -0,0 +1,126 @@
import {
Component,
NgZone,
OnInit,
} from '@angular/core';
import {
ActivatedRoute ,
Router,
} from '@angular/router';
import { EnvironmentService } from 'jslib/abstractions/environment.service';
import { I18nService } from 'jslib/abstractions/i18n.service';
import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
import { SearchService } from 'jslib/abstractions/search.service';
import { SendService } from 'jslib/abstractions/send.service';
import { ModalComponent } from 'jslib/angular/components/modal.component';
import { SendComponent as BaseSendComponent } from 'jslib/angular/components/send/send.component';
import { BroadcasterService } from 'jslib/angular/services/broadcaster.service';
import { SendType } from 'jslib/enums/sendType';
import { SendView } from 'jslib/models/view/sendView';
enum Action {
None = '',
Add = 'add',
Edit = 'edit',
View = 'view',
}
@Component({
selector: 'app-send',
templateUrl: 'send.component.html',
})
export class SendComponent extends BaseSendComponent implements OnInit {
sendId: string;
modal: ModalComponent = null;
action: Action = Action.None;
constructor(sendService: SendService, i18nService: I18nService,
platformUtilsService: PlatformUtilsService, environmentService: EnvironmentService,
broadcasterService: BroadcasterService, ngZone: NgZone,
private router: Router, private route: ActivatedRoute, searchService: SearchService) {
super(sendService, i18nService, platformUtilsService,
environmentService, broadcasterService, ngZone, searchService);
}
async load(filter: (send: SendView) => boolean = null) {
this.loading = true;
this.sends = await this.sendService.getAllDecrypted();
this.route.queryParams.subscribe(async (params) => {
if (params == null) {
this.selectedAll = true;
await this.reload();
} else {
const sendView = new SendView();
if (params.sendId) {
sendView.id = params.sendId;
if (params.action === 'edit') {
this.editSend(sendView);
} else if (params.action === 'view') {
// TODO: this
// this.viewSend(sendView);
}
} else if (params.action === 'add') {
this.addSend();
} else {
if (params.files) {
sendView.type = SendType.File;
this.filter = (s) => {
return filter(s) && s.text != null;
};
this.filter(sendView);
} else if (params.text) {
sendView.type = SendType.Text;
this.filter = (s) => {
return filter(s) && s.file != null;
};
this.filter(sendView);
} else {
this.selectAll();
}
}
}
});
this.loading = false;
this.loaded = true;
}
addSend() {
if (this.action === Action.Add) {
return;
}
this.action = Action.Add;
this.sendId = null;
this.go();
}
editSend(send: SendView) {
if (this.action === Action.Edit && this.sendId === send.id) {
return;
}
this.action = Action.Edit;
this.sendId = send.id;
this.go();
}
private go(queryParams: any = null) {
if (queryParams == null) {
queryParams = {
id: this.sendId,
action: this.action,
};
}
this.router.navigate([], {
relativeTo: this.route,
queryParams: queryParams,
replaceUrl: true,
});
}
}

5
src/app/vault/groupings.component.html
View File

@ -1,6 +1,7 @@
<div class="mac-bar"></div>
<div class="content">
<div class="inner-content">
<div class="top-content">
<h2 class="sr-only">{{'filters' | i18n}}</h2>
<ul>
<li [ngClass]="{active: selectedAll}">
@ -98,4 +99,8 @@
</div>
</ng-container>
</div>
<div class="bottom-content">
<a routerLink="/send" class="fa fa-paper-plane btn primary icon-link" title="Bitwarden Send"></a>
</div>
</div>
</div>

12
src/app/vault/vault.component.html
View File

@ -1,19 +1,19 @@
<div id="vault" attr.aria-hidden="{{showingModal}}">
<app-vault-groupings id="groupings" (onAllClicked)="clearGroupingFilters()" (onFavoritesClicked)="filterFavorites()"
<div id="vault" class="vault" attr.aria-hidden="{{showingModal}}">
<app-vault-groupings id="groupings" class="groupings" (onAllClicked)="clearGroupingFilters()" (onFavoritesClicked)="filterFavorites()"
(onCipherTypeClicked)="filterCipherType($event)" (onFolderClicked)="filterFolder($event.id)"
(onAddFolder)="addFolder()" (onEditFolder)="editFolder($event.id)"
(onCollectionClicked)="filterCollection($event.id)" (onTrashClicked)="filterDeleted()">
</app-vault-groupings>
<app-vault-ciphers id="items" [activeCipherId]="cipherId" (onCipherClicked)="viewCipher($event)"
<app-vault-ciphers id="items" class="items" [activeCipherId]="cipherId" (onCipherClicked)="viewCipher($event)"
(onCipherRightClicked)="viewCipherMenu($event)" (onAddCipher)="addCipher($event)"
(onAddCipherOptions)="addCipherOptions()">
</app-vault-ciphers>
<app-vault-view id="details" *ngIf="cipherId && action === 'view'" [cipherId]="cipherId"
<app-vault-view id="details" class="details" *ngIf="cipherId && action === 'view'" [cipherId]="cipherId"
(onCloneCipher)="cloneCipher($event)" (onEditCipher)="editCipher($event)"
(onViewCipherPasswordHistory)="viewCipherPasswordHistory($event)" (onRestoredCipher)="restoredCipher($event)"
(onDeletedCipher)="deletedCipher($event)">
</app-vault-view>
<app-vault-add-edit id="details" *ngIf="action === 'add' || action === 'edit' || action === 'clone'"
<app-vault-add-edit id="addEdit" class="details" *ngIf="action === 'add' || action === 'edit' || action === 'clone'"
[cloneMode]="action === 'clone'"
[folderId]="action === 'add' && folderId !== 'none' ? folderId : null"
[organizationId]="action === 'add' ? addOrganizationId : null"
@ -24,7 +24,7 @@
(onShareCipher)="shareCipher($event)" (onEditCollections)="cipherCollections($event)"
(onGeneratePassword)="openPasswordGenerator(true)">
</app-vault-add-edit>
<div id="logo" *ngIf="action !== 'add' && action !== 'edit' && action !== 'view' && action !== 'clone'">
<div id="logo" class="logo" *ngIf="action !== 'add' && action !== 'edit' && action !== 'view' && action !== 'clone'">
<div class="content">
<div class="inner-content">
<img class="logo-image" alt="Bitwarden" aria-hidden="true" />

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

@ -1497,5 +1497,18 @@
},
"personalOwnershipPolicyInEffect": {
"message": "An organization policy is affecting your ownership options."
},
"allSends": {
"message": "All Sends"
},
"sendTypeFile": {
"message": "File"
},
"sendTypeText": {
"message": "Text"
},
"searchSends": {
"message": "Search Sends",
"description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
}
}

12
src/scss/buttons.scss
View File

@ -1,6 +1,6 @@
@import "variables.scss";
.btn, #vault .footer button, .modal-footer button {
.btn, .vault .footer button, .modal-footer button {
border-radius: $border-radius;
padding: 7px 15px;
border: 1px solid #000000;
@ -77,6 +77,16 @@
text-decoration: underline;
}
}
&.icon-link {
padding: 10px;
font-size: 20px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
width: 45px;
}
}
.action-buttons {

6
src/scss/environment.scss
View File

@ -33,7 +33,7 @@ html.os_macos {
}
}
#vault .header-search {
.vault .header-search {
-webkit-app-region: drag;
input, i {
@ -41,12 +41,12 @@ html.os_macos {
}
}
#vault .mac-bar {
.vault .mac-bar {
height: 48px;
-webkit-app-region: drag;
}
#vault > #groupings > .content > .inner-content {
.vault > .groupings > .content > .inner-content {
padding-top: 0;
}
}

18
src/scss/vault.scss
View File

@ -1,10 +1,10 @@
@import "variables.scss";
#vault {
.vault {
height: 100%;
display: flex;
> #groupings, > #items, > #details, > #logo {
> .groupings, > .items, > .details, > .logo {
display: flex;
flex-direction: column;
@ -13,7 +13,7 @@
}
}
> #groupings {
> .groupings {
width: 22%;
min-width: 175px;
max-width: 250px;
@ -25,7 +25,11 @@
}
.inner-content {
padding-bottom: 0;
display: flex;
height: 100%;
flex-direction: column;
flex-grow: 1;
justify-content: space-between;
padding-right: 5px;
user-select: none;
@ -254,7 +258,7 @@
}
}
> #items {
> .items {
width: 28%;
min-width: 200px;
max-width: 350px;
@ -284,7 +288,7 @@
}
}
> #details {
> .details {
flex: 1;
min-width: 0;
@ -316,7 +320,7 @@
}
}
> #logo {
> .logo {
flex: 1;
min-width: 0;