move various angular bits into shared jslib

src/angular/directives/api-action.directive.ts

@@ -0,0 +1,32 @@
+import {
+    Directive,
+    ElementRef,
+    Input,
+    OnChanges,
+} from '@angular/core';
+
+import { ValidationService } from '../services/validation.service';
+
+@Directive({
+    selector: '[appApiAction]',
+})
+export class ApiActionDirective implements OnChanges {
+    @Input() appApiAction: Promise<any>;
+
+    constructor(private el: ElementRef, private validationService: ValidationService) { }
+
+    ngOnChanges(changes: any) {
+        if (this.appApiAction == null || this.appApiAction.then == null) {
+            return;
+        }
+
+        this.el.nativeElement.loading = true;
+
+        this.appApiAction.then((response: any) => {
+            this.el.nativeElement.loading = false;
+        }, (e: any) => {
+            this.el.nativeElement.loading = false;
+            this.validationService.showError(e);
+        });
+    }
+}

src/angular/directives/autofocus.directive.ts

@@ -0,0 +1,24 @@
+import {
+    Directive,
+    ElementRef,
+    Input,
+} from '@angular/core';
+
+@Directive({
+    selector: '[appAutofocus]',
+})
+export class AutofocusDirective {
+    @Input() set appAutofocus(condition: boolean | string) {
+        this.autofocus = condition === '' || condition === true;
+    }
+
+    private autofocus: boolean;
+
+    constructor(private el: ElementRef) { }
+
+    ngOnInit() {
+        if (this.autofocus) {
+            this.el.nativeElement.focus();
+        }
+    }
+}

src/angular/directives/blur-click.directive.ts

@@ -0,0 +1,17 @@
+import {
+    Directive,
+    ElementRef,
+    HostListener,
+} from '@angular/core';
+
+@Directive({
+    selector: '[appBlurClick]',
+})
+export class BlurClickDirective {
+    constructor(private el: ElementRef) {
+    }
+
+    @HostListener('click') onClick() {
+        this.el.nativeElement.blur();
+    }
+}

src/angular/directives/fallback-src.directive.ts

@@ -0,0 +1,20 @@
+import {
+    Directive,
+    ElementRef,
+    HostListener,
+    Input,
+} from '@angular/core';
+
+@Directive({
+    selector: '[appFallbackSrc]',
+})
+export class FallbackSrcDirective {
+    @Input('appFallbackSrc') appFallbackSrc: string;
+
+    constructor(private el: ElementRef) {
+    }
+
+    @HostListener('error') onError() {
+        this.el.nativeElement.src = this.appFallbackSrc;
+    }
+}

src/angular/directives/stop-click.directive.ts

@@ -0,0 +1,13 @@
+import {
+    Directive,
+    HostListener,
+} from '@angular/core';
+
+@Directive({
+    selector: '[appStopClick]',
+})
+export class StopClickDirective {
+    @HostListener('click', ['$event']) onClick($event: MouseEvent) {
+        $event.preventDefault();
+    }
+}

src/angular/directives/stop-prop.directive.ts

@@ -0,0 +1,13 @@
+import {
+    Directive,
+    HostListener,
+} from '@angular/core';
+
+@Directive({
+    selector: '[appStopProp]',
+})
+export class StopPropDirective {
+    @HostListener('click', ['$event']) onClick($event: MouseEvent) {
+        $event.stopPropagation();
+    }
+}

src/angular/pipes/i18n.pipe.ts

@@ -0,0 +1,17 @@
+import {
+    Pipe,
+    PipeTransform,
+} from '@angular/core';
+
+import { I18nService } from '../../abstractions/i18n.service';
+
+@Pipe({
+    name: 'i18n',
+})
+export class I18nPipe implements PipeTransform {
+    constructor(private i18nService: I18nService) { }
+
+    transform(id: string, p1?: string, p2?: string, p3?: string): string {
+        return this.i18nService.t(id, p1, p2, p3);
+    }
+}

src/angular/services/auth-guard.service.ts

@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import {
+    CanActivate,
+    Router,
+} from '@angular/router';
+
+import { CryptoService } from '../../abstractions/crypto.service';
+import { MessagingService } from '../../abstractions/messaging.service';
+import { UserService } from '../../abstractions/user.service';
+
+@Injectable()
+export class AuthGuardService implements CanActivate {
+    constructor(private cryptoService: CryptoService, private userService: UserService, private router: Router,
+        private messagingService: MessagingService) { }
+
+    async canActivate() {
+        const isAuthed = await this.userService.isAuthenticated();
+        if (!isAuthed) {
+            this.messagingService.send('logout');
+            return false;
+        }
+
+        const key = await this.cryptoService.getKey();
+        if (key == null) {
+            this.router.navigate(['lock']);
+            return false;
+        }
+
+        return true;
+    }
+}

src/angular/services/validation.service.ts

@@ -0,0 +1,37 @@
+import { Injectable } from '@angular/core';
+
+import { ToasterService } from 'angular2-toaster';
+
+import { I18nService } from '../../abstractions/i18n.service';
+
+@Injectable()
+export class ValidationService {
+    constructor(private toasterService: ToasterService, private i18nService: I18nService) { }
+
+    showError(data: any): string[] {
+        const defaultErrorMessage = this.i18nService.t('unexpectedError');
+        const errors: string[] = [];
+
+        if (data == null || typeof data !== 'object') {
+            errors.push(defaultErrorMessage);
+        } else if (data.validationErrors == null) {
+            errors.push(data.message ? data.message : defaultErrorMessage);
+        } else {
+            for (const key in data.validationErrors) {
+                if (!data.validationErrors.hasOwnProperty(key)) {
+                    continue;
+                }
+
+                data.validationErrors[key].forEach((item: string) => {
+                    errors.push(item);
+                });
+            }
+        }
+
+        if (errors.length > 0) {
+            this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'), errors[0]);
+        }
+
+        return errors;
+    }
+}