sync ui updates on dashboard

src/app/accounts/environment.component.html

@@ -27,7 +27,8 @@
                 </div>
             </div>
             <div class="modal-footer justify-content-start">
-                <button appBlurClick type="submit" class="btn btn-primary">
+                <button type="submit" class="btn btn-primary">
+                    <i class="fa fa-save fa-fw"></i>
                     {{'save' | i18n}}
                 </button>
             </div>

src/app/accounts/login.component.html

@@ -15,11 +15,12 @@
                                 <input id="masterPassword" type="password" name="MasterPassword" [(ngModel)]="masterPassword" class="form-control">
                             </div>
                         </div>
-                        <button type="submit" class="btn btn-primary" [disabled]="form.loading" appBlurClick>
+                        <button type="submit" class="btn btn-primary" [disabled]="form.loading">
                             <i class="fa fa-spinner fa-spin" [hidden]="!form.loading"></i>
+                            <i class="fa fa-sign-in fa-fw" [hidden]="form.loading"></i>
                             {{'logIn' | i18n}}
                         </button>
-                        <button type="button" class="btn btn-link" (click)="settings()" appBlurClick>
+                        <button type="button" class="btn btn-link" (click)="settings()">
                             {{'settings' | i18n}}
                         </button>
                     </div>

src/app/accounts/two-factor.component.html

@@ -41,8 +41,9 @@
                             <p>{{'noTwoStepProviders' | i18n}}</p>
                             <p>{{'noTwoStepProviders2' | i18n}}</p>
                         </ng-container>
-                        <button type="submit" class="btn btn-primary" [disabled]="form.loading" appBlurClick *ngIf="selectedProviderType != null && selectedProviderType !== providerType.U2f && selectedProviderType !== providerType.Duo && 
+                        <button type="submit" class="btn btn-primary" [disabled]="form.loading" *ngIf="selectedProviderType != null && selectedProviderType !== providerType.U2f && selectedProviderType !== providerType.Duo && 
                         selectedProviderType !== providerType.OrganizationDuo">
+                            <i class="fa fa-sign-in fa-fw" [hidden]="form.loading"></i>
                             <i class="fa fa-spinner fa-spin" [hidden]="!form.loading"></i>
                             {{'continue' | i18n}}
                         </button>

src/app/tabs/dashboard.component.html

@@ -1,9 +1,30 @@
 <div class="card mb-3">
     <h3 class="card-header">{{'sync' | i18n}}</h3>
     <div class="card-body">
+        <p>
+            Last group sync:
+            <span *ngIf="!lastGroupSync">-</span>
+            {{lastGroupSync | date:'medium'}}
+            <br /> Last user sync:
+            <span *ngIf="!lastUserSync">-</span>
+            {{lastUserSync | date:'medium'}}
+        </p>
+        <p>
+            Sync status:
+            <strong *ngIf="syncRunning" class="text-success">Running</strong>
+            <strong *ngIf="!syncRunning" class="text-danger">Stopped</strong>
+        </p>
+        <button (click)="start()" class="btn btn-primary">
+            <i class="fa fa-play fa-fw"></i>
+            Start Sync
+        </button>
+        <button (click)="stop()" class="btn btn-primary">
+            <i class="fa fa-stop fa-fw"></i>
+            Stop Sync
+        </button>
         <button #syncBtn (click)="sync()" [appApiAction]="syncPromise" class="btn btn-primary" [disabled]="syncBtn.loading">
-            <i class="fa fa-spinner fa-spin" [hidden]="!syncBtn.loading"></i>
-            {{'sync' | i18n}}
+            <i class="fa fa-refresh fa-fw" [ngClass]="{'fa-spin': syncBtn.loading}"></i>
+            Sync Now
         </button>
     </div>
 </div>
@@ -11,8 +32,9 @@
     <h3 class="card-header">Testing</h3>
     <div class="card-body">
         <button #simBtn (click)="simulate()" [appApiAction]="simPromise" class="btn btn-primary" [disabled]="simBtn.loading">
-            <i class="fa fa-spinner fa-spin" [hidden]="!simBtn.loading"></i>
-            Simulate
+            <i class="fa fa-spinner fa-fw fa-spin" [hidden]="!simBtn.loading"></i>
+            <i class="fa fa-bug fa-fw" [hidden]="simBtn.loading"></i>
+            Test Now
         </button>
         <div class="form-check mt-2">
             <input class="form-check-input" type="checkbox" id="simSinceLast" [(ngModel)]="simSinceLast">

src/app/tabs/dashboard.component.ts

@@ -1,4 +1,7 @@
-import { Component } from '@angular/core';
+import {
+    Component,
+    OnInit,
+} from '@angular/core';
 
 import { I18nService } from 'jslib/abstractions/i18n.service';
 
@@ -10,12 +13,13 @@ import { SyncService } from '../../services/sync.service';
 import { Entry } from '../../models/entry';
 import { GroupEntry } from '../../models/groupEntry';
 import { UserEntry } from '../../models/userEntry';
+import { ConfigurationService } from '../../services/configuration.service';
 
 @Component({
     selector: 'app-dashboard',
     templateUrl: 'dashboard.component.html',
 })
-export class DashboardComponent {
+export class DashboardComponent implements OnInit {
     simGroups: GroupEntry[];
     simUsers: UserEntry[];
     simEnabledUsers: UserEntry[] = [];
@@ -24,8 +28,25 @@ export class DashboardComponent {
     simPromise: Promise<any>;
     simSinceLast: boolean = false;
     syncPromise: Promise<any>;
+    lastGroupSync: Date;
+    lastUserSync: Date;
+    syncRunning: boolean;
 
-    constructor(private i18nService: I18nService, private syncService: SyncService) { }
+    constructor(private i18nService: I18nService, private syncService: SyncService,
+        private configurationService: ConfigurationService) { }
+
+    async ngOnInit() {
+        this.lastGroupSync = await this.configurationService.getLastGroupSyncDate();
+        this.lastUserSync = await this.configurationService.getLastUserSyncDate();
+    }
+
+    async start() {
+        this.syncRunning = true;
+    }
+
+    async stop() {
+        this.syncRunning = false;
+    }
 
     async sync() {
         this.syncPromise = this.syncService.sync(false, false);

src/app/tabs/more.component.html

@@ -4,11 +4,14 @@
             <h3 class="card-header">{{'about' | i18n}}</h3>
             <div class="card-body">
                 <p>
-                    {{'bitwardenDirectoryConnector' | i18n}}<br />
-                    {{'version' | i18n : version}}
+                    {{'bitwardenDirectoryConnector' | i18n}}
+                    <br /> {{'version' | i18n : version}}
                     <br /> &copy; 8bit Solutions LLC 2015-{{year}}
                 </p>
-                <button class="btn btn-primary" type="button" (click)="update()">{{'checkForUpdates' | i18n}}</button>
+                <button class="btn btn-primary" type="button" (click)="update()">
+                    <i class="fa fa-download fa-fw"></i>
+                    {{'checkForUpdates' | i18n}}
+                </button>
             </div>
         </div>
     </div>
@@ -16,7 +19,9 @@
         <div class="card">
             <h3 class="card-header">{{'other' | i18n}}</h3>
             <div class="card-body">
-                <button class="btn btn-primary" type="button" (click)="logOut()">{{'logOut' | i18n}}</button>
+                <button class="btn btn-primary" type="button" (click)="logOut()">
+                    {{'logOut' | i18n}}
+                </button>
             </div>
         </div>
     </div>

src/services/sync.service.ts

@@ -12,12 +12,13 @@ import { CryptoFunctionService } from 'jslib/abstractions/cryptoFunction.service
 import { LogService } from 'jslib/abstractions/log.service';
 import { StorageService } from 'jslib/abstractions/storage.service';
 
+import { Utils } from 'jslib/misc/utils';
+
 import { AzureDirectoryService } from './azure-directory.service';
 import { ConfigurationService } from './configuration.service';
 import { DirectoryService } from './directory.service';
 import { GSuiteDirectoryService } from './gsuite-directory.service';
 import { LdapDirectoryService } from './ldap-directory.service';
-import { Utils } from 'jslib/misc/utils';
 
 const Keys = {
 };