bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-17 08:43:33 +00:00
Code Issues Releases Wiki Activity

groupings and content

Browse Source
This commit is contained in:
Kyle Spearrin
2018-04-05 10:29:11 -04:00
parent 2215989322
commit fa4589c15f
13 changed files with 407 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/_locales/en/messages.json
View File

@@ -1052,5 +1052,8 @@
}, },
"loading": { "loading": {
"message": "Loading..." "message": "Loading..."
},
"types": {
"message": "Types"
} }
} }

72
src/popup2/accounts/environment.component.html
View File

@@ -13,45 +13,47 @@
</button> </button>
</div> </div>
</header> </header>
<div class="box"> <content>
<div class="box-header"> <div class="box">
{{'selfHostedEnvironment' | i18n}} <div class="box-header">
</div> {{'selfHostedEnvironment' | i18n}}
<div class="box-content"> </div>
<div class="box-content-row" appBoxRow> <div class="box-content">
<label for="baseUrl">{{'baseUrl' | i18n}}</label> <div class="box-content-row" appBoxRow>
<input id="baseUrl" type="text" name="BaseUrl" [(ngModel)]="baseUrl" <label for="baseUrl">{{'baseUrl' | i18n}}</label>
placeholder="ex. https://bitwarden.company.com"> <input id="baseUrl" type="text" name="BaseUrl" [(ngModel)]="baseUrl"
placeholder="ex. https://bitwarden.company.com">
</div>
</div>
<div class="box-footer">
{{'selfHostedEnvironmentFooter' | i18n}}
</div> </div>
</div> </div>
<div class="box-footer"> <div class="box">
{{'selfHostedEnvironmentFooter' | i18n}} <div class="box-header">
</div> {{'customEnvironment' | i18n}}
</div>
<div class="box">
<div class="box-header">
{{'customEnvironment' | i18n}}
</div>
<div class="box-content" [hidden]="!showCustom">
<div class="box-content-row" appBoxRow>
<label for="webVaultUrl">{{'webVaultUrl' | i18n}}</label>
<input id="webVaultUrl" type="text" name="WebVaultUrl" [(ngModel)]="webVaultUrl">
</div> </div>
<div class="box-content-row" appBoxRow> <div class="box-content" [hidden]="!showCustom">
<label for="apiUrl">{{'apiUrl' | i18n}}</label> <div class="box-content-row" appBoxRow>
<input id="apiUrl" type="text" name="ApiUrl" [(ngModel)]="apiUrl"> <label for="webVaultUrl">{{'webVaultUrl' | i18n}}</label>
<input id="webVaultUrl" type="text" name="WebVaultUrl" [(ngModel)]="webVaultUrl">
</div>
<div class="box-content-row" appBoxRow>
<label for="apiUrl">{{'apiUrl' | i18n}}</label>
<input id="apiUrl" type="text" name="ApiUrl" [(ngModel)]="apiUrl">
</div>
<div class="box-content-row" appBoxRow>
<label for="identityUrl">{{'identityUrl' | i18n}}</label>
<input id="identityUrl" type="text" name="IdentityUrl" [(ngModel)]="identityUrl">
</div>
<div class="box-content-row" appBoxRow>
<label for="iconsUrl">{{'iconsUrl' | i18n}}</label>
<input id="iconsUrl" type="text" name="IconsUrl" [(ngModel)]="iconsUrl">
</div>
</div> </div>
<div class="box-content-row" appBoxRow> <div class="box-footer" [hidden]="!showCustom">
<label for="identityUrl">{{'identityUrl' | i18n}}</label> {{'customEnvironmentFooter' | i18n}}
<input id="identityUrl" type="text" name="IdentityUrl" [(ngModel)]="identityUrl">
</div>
<div class="box-content-row" appBoxRow>
<label for="iconsUrl">{{'iconsUrl' | i18n}}</label>
<input id="iconsUrl" type="text" name="IconsUrl" [(ngModel)]="iconsUrl">
</div> </div>
</div> </div>
<div class="box-footer" [hidden]="!showCustom"> </content>
{{'customEnvironmentFooter' | i18n}}
</div>
</div>
</form> </form>

20
src/popup2/accounts/hint.component.html
View File

@@ -13,15 +13,17 @@
</button> </button>
</div> </div>
</header> </header>
<div class="box"> <content>
<div class="box-content"> <div class="box">
<div class="box-content-row" appBoxRow> <div class="box-content">
<label for="email">{{'emailAddress' | i18n}}</label> <div class="box-content-row" appBoxRow>
<input id="email" type="text" name="Email" [(ngModel)]="email" required appAutofocus> <label for="email">{{'emailAddress' | i18n}}</label>
<input id="email" type="text" name="Email" [(ngModel)]="email" required appAutofocus>
</div>
</div>
<div class="box-footer">
{{'enterEmailToGetHint' | i18n}}
</div> </div>
</div> </div>
<div class="box-footer"> </content>
{{'enterEmailToGetHint' | i18n}}
</div>
</div>
</form> </form>

38
src/popup2/accounts/lock.component.html
View File

@@ -8,25 +8,27 @@
<button type="submit" appBlurClick>{{'submit' | i18n}}</button> <button type="submit" appBlurClick>{{'submit' | i18n}}</button>
</div> </div>
</header> </header>
<div class="box"> <content>
<div class="box-content"> <div class="box">
<div class="box-content-row box-content-row-flex" appBoxRow> <div class="box-content">
<div class="row-main"> <div class="box-content-row box-content-row-flex" appBoxRow>
<label for="masterPassword">{{'masterPass' | i18n}}</label> <div class="row-main">
<input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}" name="MasterPassword" <label for="masterPassword">{{'masterPass' | i18n}}</label>
class="monospaced" [(ngModel)]="masterPassword" required appAutofocus> <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}" name="MasterPassword"
</div> class="monospaced" [(ngModel)]="masterPassword" required appAutofocus>
<div class="action-buttons"> </div>
<a class="row-btn" href="#" appStopClick appBlurClick <div class="action-buttons">
title="{{'toggleVisibility' | i18n}}" (click)="togglePassword()"> <a class="row-btn" href="#" appStopClick appBlurClick
<i class="fa fa-lg" title="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
[ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i> <i class="fa fa-lg"
</a> [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
</a>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <p class="text-center">
<p class="text-center"> <a href="#" appStopClick (click)="logOut()">{{'logOut' | i18n}}</a>
<a href="#" appStopClick (click)="logOut()">{{'logOut' | i18n}}</a> </p>
</p> </content>
</form> </form>

46
src/popup2/accounts/login.component.html
View File

@@ -13,30 +13,32 @@
</button> </button>
</div> </div>
</header> </header>
<div class="box"> <content>
<div class="box-content"> <div class="box">
<div class="box-content-row" appBoxRow> <div class="box-content">
<label for="email">{{'emailAddress' | i18n}}</label> <div class="box-content-row" appBoxRow>
<input id="email" type="text" name="Email" [(ngModel)]="email" required <label for="email">{{'emailAddress' | i18n}}</label>
[appAutofocus]="email === ''"> <input id="email" type="text" name="Email" [(ngModel)]="email" required
</div> [appAutofocus]="email === ''">
<div class="box-content-row box-content-row-flex" appBoxRow>
<div class="row-main">
<label for="masterPassword">{{'masterPass' | i18n}}</label>
<input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}" name="MasterPassword"
class="monospaced" [(ngModel)]="masterPassword" required [appAutofocus]="email !== ''">
</div> </div>
<div class="action-buttons"> <div class="box-content-row box-content-row-flex" appBoxRow>
<a class="row-btn" href="#" appStopClick appBlurClick <div class="row-main">
title="{{'toggleVisibility' | i18n}}" (click)="togglePassword()"> <label for="masterPassword">{{'masterPass' | i18n}}</label>
<i class="fa fa-lg" <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}" name="MasterPassword"
[ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i> class="monospaced" [(ngModel)]="masterPassword" required [appAutofocus]="email !== ''">
</a> </div>
<div class="action-buttons">
<a class="row-btn" href="#" appStopClick appBlurClick
title="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
<i class="fa fa-lg"
[ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
</a>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <p class="text-center">
<p class="text-center"> <a routerLink="/hint">{{'getMasterPasswordHint' | i18n}}</a>
<a routerLink="/hint">{{'getMasterPasswordHint' | i18n}}</a> </p>
</p> </content>
</form> </form>

94
src/popup2/accounts/register.component.html
View File

@@ -13,56 +13,58 @@
</button> </button>
</div> </div>
</header> </header>
<div class="box"> <content>
<div class="box-content"> <div class="box">
<div class="box-content-row" appBoxRow> <div class="box-content">
<label for="email">{{'emailAddress' | i18n}}</label> <div class="box-content-row" appBoxRow>
<input id="email" type="text" name="Email" [(ngModel)]="email" required <label for="email">{{'emailAddress' | i18n}}</label>
[appAutofocus]="email === ''"> <input id="email" type="text" name="Email" [(ngModel)]="email" required
</div> [appAutofocus]="email === ''">
<div class="box-content-row box-content-row-flex" appBoxRow>
<div class="row-main">
<label for="masterPassword">{{'masterPass' | i18n}}</label>
<input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}" name="MasterPassword"
class="monospaced" [(ngModel)]="masterPassword" required [appAutofocus]="email !== ''">
</div> </div>
<div class="action-buttons"> <div class="box-content-row box-content-row-flex" appBoxRow>
<a class="row-btn" href="#" appStopClick appBlurClick <div class="row-main">
title="{{'toggleVisibility' | i18n}}" (click)="togglePassword(false)"> <label for="masterPassword">{{'masterPass' | i18n}}</label>
<i class="fa fa-lg" <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}" name="MasterPassword"
[ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i> class="monospaced" [(ngModel)]="masterPassword" required [appAutofocus]="email !== ''">
</a> </div>
<div class="action-buttons">
<a class="row-btn" href="#" appStopClick appBlurClick
title="{{'toggleVisibility' | i18n}}" (click)="togglePassword(false)">
<i class="fa fa-lg"
[ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
</a>
</div>
</div> </div>
</div> </div>
</div> <div class="box-footer">
<div class="box-footer"> {{'masterPassDesc' | i18n}}
{{'masterPassDesc' | i18n}}
</div>
</div>
<div class="box last">
<div class="box-content">
<div class="box-content-row box-content-row-flex" appBoxRow>
<div class="row-main">
<label for="masterPasswordRetype">{{'reTypeMasterPass' | i18n}}</label>
<input id="masterPasswordRetype" type="{{showPassword ? 'text' : 'password'}}"
name="MasterPasswordRetype" class="monospaced" [(ngModel)]="confirmMasterPassword"
required>
</div>
<div class="action-buttons">
<a class="row-btn" href="#" appStopClick appBlurClick
title="{{'toggleVisibility' | i18n}}" (click)="togglePassword(true)">
<i class="fa fa-lg"
[ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
</a>
</div>
</div>
<div class="box-content-row" appBoxRow>
<label for="hint">{{'masterPassHint' | i18n}}</label>
<input id="hint" type="text" name="Hint" [(ngModel)]="hint">
</div> </div>
</div> </div>
<div class="box-footer"> <div class="box last">
{{'masterPassHintDesc' | i18n}} <div class="box-content">
<div class="box-content-row box-content-row-flex" appBoxRow>
<div class="row-main">
<label for="masterPasswordRetype">{{'reTypeMasterPass' | i18n}}</label>
<input id="masterPasswordRetype" type="{{showPassword ? 'text' : 'password'}}"
name="MasterPasswordRetype" class="monospaced" [(ngModel)]="confirmMasterPassword"
required>
</div>
<div class="action-buttons">
<a class="row-btn" href="#" appStopClick appBlurClick
title="{{'toggleVisibility' | i18n}}" (click)="togglePassword(true)">
<i class="fa fa-lg"
[ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
</a>
</div>
</div>
<div class="box-content-row" appBoxRow>
<label for="hint">{{'masterPassHint' | i18n}}</label>
<input id="hint" type="text" name="Hint" [(ngModel)]="hint">
</div>
</div>
<div class="box-footer">
{{'masterPassHintDesc' | i18n}}
</div>
</div> </div>
</div> </content>
</form> </form>

26
src/popup2/accounts/two-factor-options.component.html
View File

@@ -7,16 +7,18 @@
</div> </div>
<div class="right"></div> <div class="right"></div>
</header> </header>
<div class="box"> <content>
<div class="box-content"> <div class="box">
<a href="#" appStopClick *ngFor="let p of providers" class="box-content-row" <div class="box-content">
(click)="choose(p)"> <a href="#" appStopClick *ngFor="let p of providers" class="box-content-row"
<span class="text">{{p.name}}</span> (click)="choose(p)">
<span class="detail">{{p.description}}</span> <span class="text">{{p.name}}</span>
</a> <span class="detail">{{p.description}}</span>
<a href="#" appStopClick class="box-content-row" (click)="recover()"> </a>
<span class="text">{{'recoveryCodeTitle' | i18n}}</span> <a href="#" appStopClick class="box-content-row" (click)="recover()">
<span class="detail">{{'recoveryCodeDesc' | i18n}}</span> <span class="text">{{'recoveryCodeTitle' | i18n}}</span>
</a> <span class="detail">{{'recoveryCodeDesc' | i18n}}</span>
</a>
</div>
</div> </div>
</div> </content>

154
src/popup2/accounts/two-factor.component.html
View File

@@ -15,92 +15,94 @@
</button> </button>
</div> </div>
</header> </header>
<ng-container *ngIf="selectedProviderType === providerType.Authenticator || <content>
<ng-container *ngIf="selectedProviderType === providerType.Authenticator ||
selectedProviderType === providerType.Email"> selectedProviderType === providerType.Email">
<div class="content text-center"> <div class="content text-center">
<span *ngIf="selectedProviderType === providerType.Authenticator"> <span *ngIf="selectedProviderType === providerType.Authenticator">
{{'enterVerificationCodeApp' | i18n}} {{'enterVerificationCodeApp' | i18n}}
</span> </span>
<span *ngIf="selectedProviderType === providerType.Email"> <span *ngIf="selectedProviderType === providerType.Email">
{{'enterVerificationCodeEmail' | i18n : twoFactorEmail}} {{'enterVerificationCodeEmail' | i18n : twoFactorEmail}}
</span> </span>
</div> </div>
<div class="box first"> <div class="box first">
<div class="box-content"> <div class="box-content">
<div class="box-content-row" appBoxRow> <div class="box-content-row" appBoxRow>
<label for="code">{{'verificationCode' | i18n}}</label> <label for="code">{{'verificationCode' | i18n}}</label>
<input id="code" type="text" name="Code" [(ngModel)]="token" required appAutofocus> <input id="code" type="text" name="Code" [(ngModel)]="token" required appAutofocus>
</div> </div>
<div class="box-content-row box-content-row-checkbox" appBoxRow> <div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="remember">{{'rememberMe' | i18n}}</label> <label for="remember">{{'rememberMe' | i18n}}</label>
<input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember"> <input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember">
</div>
</div> </div>
</div> </div>
</div> </ng-container>
</ng-container> <ng-container *ngIf="selectedProviderType === providerType.Yubikey">
<ng-container *ngIf="selectedProviderType === providerType.Yubikey"> <div class="content text-center">
<div class="content text-center"> <p>{{'insertYubiKey' | i18n}}</p>
<p>{{'insertYubiKey' | i18n}}</p> <img src="../images/yubikey.jpg" class="img-rounded img-responsive" alt="">
<img src="../images/yubikey.jpg" class="img-rounded img-responsive" alt=""> </div>
</div> <div class="box first">
<div class="box first"> <div class="box-content">
<div class="box-content"> <div class="box-content-row" appBoxRow>
<div class="box-content-row" appBoxRow> <label for="code" class="sr-only">{{'verificationCode' | i18n}}</label>
<label for="code" class="sr-only">{{'verificationCode' | i18n}}</label> <input id="code" type="password" name="Code" [(ngModel)]="token" required appAutofocus>
<input id="code" type="password" name="Code" [(ngModel)]="token" required appAutofocus> </div>
</div> <div class="box-content-row box-content-row-checkbox" appBoxRow>
<div class="box-content-row box-content-row-checkbox" appBoxRow> <label for="remember">{{'rememberMe' | i18n}}</label>
<label for="remember">{{'rememberMe' | i18n}}</label> <input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember">
<input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember"> </div>
</div> </div>
</div> </div>
</div> </ng-container>
</ng-container> <ng-container *ngIf="selectedProviderType === providerType.U2f">
<ng-container *ngIf="selectedProviderType === providerType.U2f"> <div class="content text-center">
<div class="content text-center"> <span *ngIf="!u2fReady">{{'loading' | i18n}}</span>
<span *ngIf="!u2fReady">{{'loading' | i18n}}</span> <div *ngIf="u2fReady">
<div *ngIf="u2fReady"> <p>{{'insertU2f' | i18n}}</p>
<p>{{'insertU2f' | i18n}}</p> <img src="../images/u2fkey.jpg" alt="" class="img-rounded img-responsive" />
<img src="../images/u2fkey.jpg" alt="" class="img-rounded img-responsive" />
</div>
</div>
<div class="box first">
<div class="box-content">
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="remember">{{'rememberMe' | i18n}}</label>
<input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember">
</div> </div>
</div> </div>
</div> <div class="box first">
</ng-container> <div class="box-content">
<ng-container *ngIf="selectedProviderType === providerType.Duo || <div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="remember">{{'rememberMe' | i18n}}</label>
<input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember">
</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="selectedProviderType === providerType.Duo ||
selectedProviderType === providerType.OrganizationDuo"> selectedProviderType === providerType.OrganizationDuo">
<div id="duo-frame" *ngIf="!showNewWindowMessage"><iframe id="duo_iframe"></iframe></div> <div id="duo-frame" *ngIf="!showNewWindowMessage"><iframe id="duo_iframe"></iframe></div>
<div *ngIf="showNewWindowMessage" class="content no-vpad text-center"> <div *ngIf="showNewWindowMessage" class="content no-vpad text-center">
{{'twoStepNewWindowMessage' | i18n}} {{'twoStepNewWindowMessage' | i18n}}
</div> </div>
<div class="box"> <div class="box">
<div class="box-content"> <div class="box-content">
<div class="box-content-row box-content-row-checkbox" appBoxRow> <div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="remember">{{'rememberMe' | i18n}}</label> <label for="remember">{{'rememberMe' | i18n}}</label>
<input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember"> <input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember">
</div>
</div> </div>
</div> </div>
</ng-container>
<div class="content text-center" *ngIf="selectedProviderType == null">
<p>{{'noTwoStepProviders' | i18n}}</p>
<p>{{'noTwoStepProviders2' | i18n}}</p>
</div> </div>
</ng-container> <div class="content no-vpad text-center" *ngIf="selectedProviderType != null">
<div class="content text-center" *ngIf="selectedProviderType == null"> <p>
<p>{{'noTwoStepProviders' | i18n}}</p> <a href="#" appStopClick (click)="anotherMethod()">{{'useAnotherTwoStepMethod' | i18n}}</a>
<p>{{'noTwoStepProviders2' | i18n}}</p> </p>
</div> <p *ngIf="selectedProviderType === providerType.Email">
<div class="content no-vpad text-center" *ngIf="selectedProviderType != null"> <a href="#" appStopClick (click)="sendEmail(true)" [appApiAction]="emailPromise">
<p> {{'sendVerificationCodeEmailAgain' | i18n}}
<a href="#" appStopClick (click)="anotherMethod()">{{'useAnotherTwoStepMethod' | i18n}}</a> </a>
</p> </p>
<p *ngIf="selectedProviderType === providerType.Email"> </div>
<a href="#" appStopClick (click)="sendEmail(true)" [appApiAction]="emailPromise"> </content>
{{'sendVerificationCodeEmailAgain' | i18n}}
</a>
</p>
</div>
</form> </form>
<iframe id="u2f_iframe" hidden></iframe> <iframe id="u2f_iframe" hidden></iframe>

4
src/popup2/tabs.component.ts
View File

@@ -13,6 +13,7 @@ import { Router } from '@angular/router';
@Component({ @Component({
selector: 'app-tabs', selector: 'app-tabs',
template: ` template: `
<div class="tab-page">
<router-outlet></router-outlet> <router-outlet></router-outlet>
<nav class="tabs"> <nav class="tabs">
<ul> <ul>
@@ -37,6 +38,7 @@ import { Router } from '@angular/router';
</a> </a>
</li> </li>
</ul> </ul>
</nav>`, </nav>
</div>`,
}) })
export class TabsComponent { } export class TabsComponent { }

73
src/popup2/vault/groupings.component.html Normal file
View File

@@ -0,0 +1,73 @@
<header>
<div class="left">
</div>
<div class="center">
<span class="title">{{'myVault' | i18n}}</span>
</div>
<div class="right">
</div>
</header>
<content>
<div class="box">
<div class="box-header">
{{'favorites' | i18n}}
</div>
<div class="box-content">
<a *ngFor="let c of favoriteCiphers" href="#" class="box-content-row" appStopClick appBlurClick>
{{c.name}}
</a>
</div>
</div>
<div class="box">
<div class="box-header">
{{'types' | i18n}}
</div>
<div class="box-content">
<a href="#" class="box-content-row" appStopClick appBlurClick (click)="selectType(cipherType.Login)">
{{'typeLogin' | i18n}}
<span>{{typeCounts.get(cipherType.Login) || 0}}</span>
</a>
<a href="#" class="box-content-row" appStopClick appBlurClick (click)="selectType(cipherType.Card)">
{{'typeCard' | i18n}}
<span>{{typeCounts.get(cipherType.Card) || 0}}</span>
</a>
<a href="#" class="box-content-row" appStopClick appBlurClick (click)="selectType(cipherType.Identity)">
{{'typeIdentity' | i18n}}
<span>{{typeCounts.get(cipherType.Identity) || 0}}</span>
</a>
<a href="#" class="box-content-row" appStopClick appBlurClick (click)="selectType(cipherType.SecureNote)">
{{'typeSecureNote' | i18n}}
<span>{{typeCounts.get(cipherType.SecureNote) || 0}}</span>
</a>
</div>
</div>
<p *ngIf="!loaded" class="text-muted">{{'loading' | i18n}}</p>
<ng-container *ngIf="loaded">
<div class="box">
<div class="box-header">
{{'folders' | i18n}}
</div>
<div class="box-content">
<a *ngFor="let f of folders" href="#" class="box-content-row" appStopClick appBlurClick
(click)="selectFolder(f)">
{{f.name}}
<span>{{folderCounts.get(f.id) || 0}}</span>
</a>
</div>
</div>
<div class="box">
<div class="box-header">
{{'collections' | i18n}}
</div>
<div class="box-content">
<a *ngFor="let c of collections" href="#" class="box-content-row" appStopClick appBlurClick
(click)="selectCollection(f)">
{{c.name}}
<span>{{collectionCounts.get(c.id) || 0}}</span>
</a>
</div>
</div>
</ng-container>
</content>

74
src/popup2/vault/groupings.component.ts
View File

@@ -1,22 +1,74 @@
import * as template from './groupings.component.html';
import { import {
Component, Component,
ComponentFactoryResolver,
NgZone,
OnDestroy,
OnInit, OnInit,
Type,
ViewChild,
ViewContainerRef,
} from '@angular/core'; } from '@angular/core';
import { Router } from '@angular/router';
import { CipherType } from 'jslib/enums/cipherType';
import { CipherView } from 'jslib/models/view/cipherView';
import { CollectionService } from 'jslib/abstractions/collection.service';
import { CipherService } from 'jslib/abstractions/cipher.service';
import { FolderService } from 'jslib/abstractions/folder.service';
import { GroupingsComponent as BaseGroupingsComponent } from 'jslib/angular/components/groupings.component';
@Component({ @Component({
selector: 'app-vault-groupings', selector: 'app-vault-groupings',
styles: [], template: template,
template: `Groupings`,
}) })
export class GroupingsComponent { export class GroupingsComponent extends BaseGroupingsComponent implements OnInit {
constructor() { ciphers: CipherView[];
favoriteCiphers: CipherView[];
folderCounts = new Map<string, number>();
collectionCounts = new Map<string, number>();
typeCounts = new Map<CipherType, number>();
constructor(collectionService: CollectionService, folderService: FolderService,
private cipherService: CipherService) {
super(collectionService, folderService);
}
async ngOnInit() {
this.load();
this.loaded = false;
await this.loadCiphers();
this.loaded = true;
}
async loadCiphers() {
this.ciphers = await this.cipherService.getAllDecrypted();
this.ciphers.forEach((c) => {
if (c.favorite) {
if (this.favoriteCiphers == null) {
this.favoriteCiphers = [];
}
this.favoriteCiphers.push(c);
}
if (this.typeCounts.has(c.type)) {
this.typeCounts.set(c.type, this.typeCounts.get(c.type) + 1);
} else {
this.typeCounts.set(c.type, 1);
}
if (this.folderCounts.has(c.folderId)) {
this.folderCounts.set(c.folderId, this.folderCounts.get(c.folderId) + 1);
} else {
this.folderCounts.set(c.folderId, 1);
}
if (c.collectionIds != null) {
c.collectionIds.forEach((colId) => {
if (this.collectionCounts.has(colId)) {
this.collectionCounts.set(colId, this.collectionCounts.get(colId) + 1);
} else {
this.collectionCounts.set(colId, 1);
}
});
}
});
} }
} }

34
src/scss/base.scss
View File

@@ -7,7 +7,7 @@
} }
html, body { html, body {
background-color: $background-color-alt2; background-color: $background-color;
font-family: $font-family-sans-serif; font-family: $font-family-sans-serif;
font-size: $font-size-base; font-size: $font-size-base;
color: $text-color; color: $text-color;
@@ -71,16 +71,16 @@ textarea {
resize: vertical; resize: vertical;
} }
div::-webkit-scrollbar { content::-webkit-scrollbar {
width: 10px; width: 10px;
height: 10px; height: 10px;
} }
div::-webkit-scrollbar-track { content::-webkit-scrollbar-track {
background-color: transparent; background-color: transparent;
} }
div::-webkit-scrollbar-thumb { content::-webkit-scrollbar-thumb {
background-color: rgba(100,100,100,.2); background-color: rgba(100,100,100,.2);
border-radius: 10px; border-radius: 10px;
margin-right: 1px; margin-right: 1px;
@@ -196,3 +196,29 @@ header {
} }
} }
} }
app-root {
position: absolute;
width: 100%;
height: 100%;
z-index: 980;
}
content {
position: absolute;
top: 44px;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
&.no-header {
top: 0;
}
}
.tab-page {
content {
bottom: 55px;
}
}

7
src/scss/variables.scss
View File

@@ -23,11 +23,10 @@ $brand-info: #555555;
$brand-warning: #bf7e16; $brand-warning: #bf7e16;
$brand-primary-accent: #286090; $brand-primary-accent: #286090;
$background-color: white; $background-color: #f9fafc;
$background-color-alt: #f9fafc; $background-color-alt: #ecf0f5;
$background-color-alt2: #ecf0f5;
$box-background-color: $background-color; $box-background-color: white;
$box-background-hover-color: $list-item-hover; $box-background-hover-color: $list-item-hover;
$box-border-color: $border-color; $box-border-color: $border-color;