print folder, collections, and ciphers to vault

src/app/accounts/login.component.html

@@ -1,3 +1,8 @@
-<form>
-    Login form.
+<form (ngSubmit)="onSubmit()" #heroForm="ngForm">
+    <label for="email">Email Address</label>
+    <input id="email" type="text" [(ngModel)]="email" name="email" required /><br /><br />
+    <label for="master-password">Master Password</label>
+    <input id="master-password" type="password" [(ngModel)]="masterPassword"
+           name="masterPassword" required /><br /><br />
+    <button type="submit">Submit</button>
 </form>

src/app/accounts/login.component.ts

@@ -5,6 +5,8 @@ import {
     OnInit,
 } from '@angular/core';
 
+import { Router } from '@angular/router';
+
 import { AuthService } from 'jslib/abstractions/auth.service';
 
 @Component({
@@ -12,11 +14,19 @@ import { AuthService } from 'jslib/abstractions/auth.service';
     template: template
 })
 export class LoginComponent implements OnInit {
-    constructor(authService: AuthService) {
-        console.log(authService);
+    email: string = '';
+    masterPassword: string = '';
+
+    constructor(private authService: AuthService, private router: Router) {
+
     }
 
     ngOnInit() {
         // TODO?
     }
+
+    async onSubmit() {
+        const response = await this.authService.logIn(this.email, this.masterPassword);
+        this.router.navigate(['vault']);
+    }
 }

src/app/app.module.ts

@@ -3,6 +3,7 @@ import 'zone.js/dist/zone';
 
 import { AppRoutingModule } from './app-routing.module';
 import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
 import { NgModule } from '@angular/core';
 import { ServicesModule } from './services/services.module';
 
@@ -13,6 +14,7 @@ import { VaultComponent } from './vault/vault.component';
 @NgModule({
     imports: [
         BrowserModule,
+        FormsModule,
         AppRoutingModule,
         ServicesModule,
     ],

src/app/services/services.module.ts

@@ -1,4 +1,4 @@
-//import { remote } from 'electron';
+import { webFrame } from 'electron';
 
 import { NgModule } from '@angular/core';
 
@@ -50,6 +50,8 @@ import {
     UtilsService as UtilsServiceAbstraction,
 } from 'jslib/abstractions';
 
+webFrame.registerURLSchemeAsPrivileged('file');
+
 const utilsService = new UtilsService();
 const platformUtilsService = new DesktopPlatformUtilsService();
 const messagingService = new DesktopMessagingService();
@@ -82,11 +84,19 @@ const authService: AuthServiceAbstraction = new AuthService(cryptoService, apiSe
     userService, tokenService, appIdService, platformUtilsService, constantsService,
     messagingService);
 
+containerService.attachToWindow(window);
+environmentService.setUrlsFromStorage().then(() => {
+    return syncService.fullSync(true);
+});
+
 @NgModule({
     imports: [],
     declarations: [],
     providers: [
         { provide: AuthServiceAbstraction, useValue: authService },
+        { provide: CipherServiceAbstraction, useValue: cipherService },
+        { provide: FolderServiceAbstraction, useValue: folderService },
+        { provide: CollectionServiceAbstraction, useValue: collectionService },
     ],
 })
 export class ServicesModule {

src/app/vault/vault.component.html

@@ -26,13 +26,15 @@
             </ul>
             <h2><i class="fa fa-folder"></i> Folders</h2>
             <ul>
-                <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> Folder 1</a></li>
-                <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> Folder 2</a></li>
+                <li *ngFor="let folder of vaultFolders">
+                    <a href="#"><i class="fa fa-fw fa-caret-right"></i> {{folder.name}}</a>
+                </li>
             </ul>
             <h2><i class="fa fa-cubes"></i> Collections</h2>
             <ul>
-                <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> Collection 1</a></li>
-                <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> Collection 2</a></li>
+                <li *ngFor="let collection of vaultCollections">
+                    <a href="#"><i class="fa fa-fw fa-caret-right"></i> {{collection.name}}</a>
+                </li>
             </ul>
         </div>
     </div>
@@ -49,32 +51,14 @@
         <div class="content">
             <div class="list">
                 <div class="list-section" style="padding-top: 0; padding-bottom: 0;">
-                    <a href="#"
-                       class="list-section-item condensed" title="View Item">
+                    <a *ngFor="let cipher of vaultCiphers"
+                       href="#" class="list-section-item condensed" title="View Item">
                         <span class="text">
-                            Item 1
-                            <i class="fa fa-share-alt text-muted"></i>
-                            <i class="fa fa-paperclip text-muted"></i>
+                            {{cipher.name}}
+                            <i class="fa fa-share-alt text-muted" *ngIf="cipher.organizationId"></i>
+                            <i class="fa fa-paperclip text-muted" *ngIf="cipher.attachments"></i>
                         </span>
-                        <span class="detail">Sub</span>
-                    </a>
-                    <a href="#"
-                       class="list-section-item condensed" title="View Item">
-                        <span class="text">
-                            Item 1
-                            <i class="fa fa-share-alt text-muted"></i>
-                            <i class="fa fa-paperclip text-muted"></i>
-                        </span>
-                        <span class="detail">Sub</span>
-                    </a>
-                    <a href="#"
-                       class="list-section-item condensed" title="View Item">
-                        <span class="text">
-                            Item 1
-                            <i class="fa fa-share-alt text-muted"></i>
-                            <i class="fa fa-paperclip text-muted"></i>
-                        </span>
-                        <span class="detail">Sub</span>
+                        <span class="detail">{{cipher.subTitle}}</span>
                     </a>
                 </div>
             </div>

src/app/vault/vault.component.ts

@@ -5,12 +5,29 @@ import {
     OnInit,
 } from '@angular/core';
 
+import { CipherService } from 'jslib/abstractions/cipher.service';
+import { CollectionService } from 'jslib/abstractions/collection.service';
+import { FolderService } from 'jslib/abstractions/folder.service';
+
 @Component({
     selector: 'app-vault',
     template: template,
 })
 export class VaultComponent implements OnInit {
-    ngOnInit() {
+    vaultFolders: any[];
+    vaultCiphers: any[];
+    vaultCollections: any[];
+
+    constructor(private cipherService: CipherService, private collectionService: CollectionService,
+        private folderService: FolderService) {
+
+    }
+
+    async ngOnInit() {
         // TODO?
+
+        this.vaultFolders = await this.folderService.getAllDecrypted();
+        this.vaultCollections = await this.collectionService.getAllDecrypted();
+        this.vaultCiphers = await this.cipherService.getAllDecrypted();
     }
 }

webpack.renderer.js

@@ -69,7 +69,8 @@ const renderer = {
                     loader: 'file-loader',
                     options: {
                         name: '[name].[ext]',
-                        outputPath: 'fonts/'
+                        outputPath: 'fonts/',
+                        publicPath: '../'
                     }
                 }]
             },