sync component

src/popup/app-routing.animations.ts

@@ -136,4 +136,7 @@ export const routerTransition = trigger('routerTransition', [
     transition('edit-folder => folders, add-folder => folders', outSlideDown),
 
     transition('tabs => lock', inSlideDown),
+
+    transition('tabs => sync', inSlideLeft),
+    transition('sync => tabs', outSlideRight),
 ]);

src/popup/app-routing.module.ts

@@ -22,6 +22,7 @@ import { ExportComponent } from './settings/export.component';
 import { FolderAddEditComponent } from './settings/folder-add-edit.component';
 import { FoldersComponent } from './settings/folders.component';
 import { SettingsComponent } from './settings/settings.component';
+import { SyncComponent } from './settings/sync.component';
 import { TabsComponent } from './tabs.component';
 import { AddEditComponent } from './vault/add-edit.component';
 import { AttachmentsComponent } from './vault/attachments.component';
@@ -154,6 +155,12 @@ const routes: Routes = [
         canActivate: [AuthGuardService],
         data: { state: 'edit-folder' },
     },
+    {
+        path: 'sync',
+        component: SyncComponent,
+        canActivate: [AuthGuardService],
+        data: { state: 'sync' },
+    },
     {
         path: 'tabs',
         component: TabsComponent,

src/popup/app.module.ts

@@ -30,6 +30,7 @@ import { ExportComponent } from './settings/export.component';
 import { FolderAddEditComponent } from './settings/folder-add-edit.component';
 import { FoldersComponent } from './settings/folders.component';
 import { SettingsComponent } from './settings/settings.component';
+import { SyncComponent } from './settings/sync.component';
 import { TabsComponent } from './tabs.component';
 import { AddEditComponent } from './vault/add-edit.component';
 import { AttachmentsComponent } from './vault/attachments.component';
@@ -102,6 +103,7 @@ import { IconComponent } from 'jslib/angular/components/icon.component';
         SettingsComponent,
         StopClickDirective,
         StopPropDirective,
+        SyncComponent,
         TabsComponent,
         TwoFactorOptionsComponent,
         TwoFactorComponent,

src/popup/scss/base.scss

@@ -294,12 +294,15 @@ content {
     }
 }
 
-.no-items {
+.center-content, .no-items {
     display: flex;
-    height: 100%;
-    flex-direction: column;
     justify-content: center;
     align-items: center;
+    height: 100%;
+    flex-direction: column;
+}
+
+.no-items {
     text-align: center;
 
     .fa {

src/popup/scss/misc.scss

@@ -1,6 +1,6 @@
 @import "variables.scss";
 
-small {
+small, .small {
     font-size: $font-size-small;
 }
 

src/popup/scss/pages.scss

@@ -0,0 +1,9 @@
+@import "variables.scss";
+
+app-sync {
+    content {
+        .btn {
+            margin-bottom: 10px;
+        }
+    }
+}

src/popup/scss/popup.scss

@@ -1,4 +1,4 @@
-@import "../css/webfonts.css";
+@import "../css/webfonts.css";
 @import "variables.scss";
 @import "base.scss";
 @import "box.scss";
@@ -6,3 +6,4 @@
 @import "misc.scss";
 @import "plugins.scss";
 @import "environment.scss";
+@import "pages.scss";

src/popup/settings/sync.component.html

@@ -0,0 +1,22 @@
+<header>
+    <div class="left">
+        <button appBlurClick type="button" (click)="close()">
+            <span class="header-icon"><i class="fa fa-chevron-left"></i></span>
+            <span>{{'back' | i18n}}</span>
+        </button>
+    </div>
+    <div class="center">
+        <span class="title">{{'sync' | i18n}}</span>
+    </div>
+    <div class="right"></div>
+</header>
+<content>
+    <div class="content center-content">
+        <button type="button" class="btn block primary" (click)="sync()" #syncBtn
+                [disabled]="syncBtn.loading" [appApiAction]="syncPromise">
+            <span [hidden]="syncBtn.loading">{{'syncVaultNow' | i18n}}</span>
+            <i class="fa fa-spinner fa-lg fa-spin" [hidden]="!syncBtn.loading"></i>
+        </button>
+        <p class="text-center text-muted small">{{'lastSync' | i18n}} {{lastSync}}</p>
+    </div>
+</content>

src/popup/settings/sync.component.ts

@@ -0,0 +1,54 @@
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import {
+    Component,
+    OnInit,
+} from '@angular/core';
+import { Router } from '@angular/router';
+
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { SyncService } from 'jslib/abstractions/sync.service';
+
+@Component({
+    selector: 'app-sync',
+    templateUrl: 'sync.component.html',
+})
+export class SyncComponent implements OnInit {
+    lastSync = '--';
+    syncPromise: Promise<any>;
+
+    constructor(private syncService: SyncService, private router: Router,
+        private toasterService: ToasterService, private analytics: Angulartics2,
+        private i18nService: I18nService) {
+    }
+
+    async ngOnInit() {
+        await this.setLastSync();
+    }
+
+    async sync() {
+        this.syncPromise = this.syncService.fullSync(true);
+        const success = await this.syncPromise;
+        if (success) {
+            await this.setLastSync();
+            this.analytics.eventTrack.next({ action: 'Synced Full' });
+            this.toasterService.popAsync('success', null, this.i18nService.t('syncingComplete'));
+        } else {
+            this.toasterService.popAsync('error', null, this.i18nService.t('syncingFailed'));
+        }
+    }
+
+    async setLastSync() {
+        const last = await this.syncService.getLastSync();
+        if (last != null) {
+            this.lastSync = last.toLocaleDateString() + ' ' + last.toLocaleTimeString();
+        } else {
+            this.lastSync = this.i18nService.t('never');
+        }
+    }
+
+    close() {
+        this.router.navigate(['/tabs/settings']);
+    }
+}