Merge branch 'master' into spencer/electron

.gitignore

@@ -4,6 +4,7 @@
 /dist
 /tmp
 /out-tsc
+/out
 # Only exists if Bazel was run
 /bazel-out
 

package.json

@@ -1,6 +1,10 @@
 {
   "name": "cic-staff-client",
-  "version": "0.0.0",
+  "version": "0.0.1",
+  "author": "Spencer Ofwiti <maxspencer56@gmail.com>",
+  "description": "A fully featured admin client for managing users and transactions in the CIC network.",
+  "main": "dist/main.js",
+  "license": "GPL-3.0-or-later",
   "scripts": {
     "config:dev": "ts-node set-env.ts --environment=dev",
     "config:prod": "ts-node set-env.ts --environment=prod",
@@ -18,7 +22,17 @@
     "e2e": "ng e2e",
     "precommit": "npm run format:fix && npm run lint",
     "postinstall": "node patch-webpack.js",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "electron": "ng build --base-href ./ && electron .",
+    "electron-tsc": "ng build --base-href ./ && tsc --p src-backend --outDir dist && electron .",
+    "electron:build:dev": "ng build -c dev --base-href ./ && tsc --lib ES2018,DOM  --target ES5 src-backend/main.ts --outDir dist && electron .",
+    "electron:package": "npx electron-forge import && npm run make",
+    "start": "electron-forge start",
+    "package": "electron-forge package",
+    "make": "electron-forge make",
+    "elec:package": "npm run build:dev && electron-packager . CICADA --out out --overwrite --asar --icon=dist/cic-staff-client/icons/manifest-icon-512.ico   --ignore=^e2e$ --ignore=^src$ --ignore=^src-backend$ --ignore=^.editorconfig$ --ignore=^.gitignore$ --ignore=^angular.json$ --ignore=^browserslist$ --ignore=^karma.conf.js$ --ignore=^package-lock.json$ --ignore=^README.md$ --ignore=^tslint --ignore=^tsconfig --all",
+    "clean": "rimraf dist",
+    "prebuild": "npm run clean"
   },
   "private": true,
   "dependencies": {
@@ -38,6 +52,7 @@
     "bootstrap": "^4.5.3",
     "cic-client": "0.1.4",
     "cic-client-meta": "0.0.7-alpha.6",
+    "electron-squirrel-startup": "^1.0.0",
     "ethers": "^5.0.31",
     "http-server": "^0.12.3",
     "jquery": "^3.5.1",
@@ -53,13 +68,21 @@
     "@angular-devkit/build-angular": "~0.1002.0",
     "@angular/cli": "~10.2.0",
     "@angular/compiler-cli": "~10.2.0",
+    "@electron-forge/cli": "^6.0.0-beta.55",
+    "@electron-forge/maker-deb": "^6.0.0-beta.55",
+    "@electron-forge/maker-rpm": "^6.0.0-beta.55",
+    "@electron-forge/maker-squirrel": "^6.0.0-beta.55",
+    "@electron-forge/maker-zip": "^6.0.0-beta.55",
     "@types/datatables.net": "^1.10.19",
+    "@types/electron": "^1.6.10",
     "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/jquery": "^3.5.4",
-    "@types/node": "^12.20.6",
+    "@types/node": "^15.6.1",
     "codelyzer": "^6.0.0",
     "dotenv": "^8.2.0",
+    "electron": "^12.0.9",
+    "electron-packager": "^15.2.0",
     "husky": "^6.0.0",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
@@ -72,6 +95,7 @@
     "prettier": "^2.3.0",
     "pretty-quick": "^3.1.0",
     "protractor": "~7.0.0",
+    "rimraf": "^3.0.2",
     "secp256k1": "^4.0.2",
     "ts-node": "~8.3.0",
     "tslint": "~6.1.0",
@@ -85,5 +109,32 @@
     "hooks": {
       "pre-commit": "pretty-quick --staged & ng lint"
     }
+  },
+  "config": {
+    "forge": {
+      "packagerConfig": {},
+      "makers": [
+        {
+          "name": "@electron-forge/maker-squirrel",
+          "config": {
+            "name": "cic_staff_client"
+          }
+        },
+        {
+          "name": "@electron-forge/maker-zip",
+          "platforms": [
+            "darwin"
+          ]
+        },
+        {
+          "name": "@electron-forge/maker-deb",
+          "config": {}
+        },
+        {
+          "name": "@electron-forge/maker-rpm",
+          "config": {}
+        }
+      ]
+    }
   }
 }

src-backend/main.ts

@@ -0,0 +1,139 @@
+import { BrowserWindow, Menu, Tray, app, ipcMain } from 'electron';
+import * as path from 'path';
+import * as url from 'url';
+import * as fs from 'fs';
+
+let mainWindow: BrowserWindow;
+
+async function createWindow(): Promise<void> {
+  // Create the browser window.
+  mainWindow = new BrowserWindow({
+    fullscreen: false,
+    width: 1000,
+    height: 800,
+    icon: path.join(__dirname, '/cic-staff-client/assets/icons/manifest-icon-512.png'),
+    // Allows IPC and other APIs
+    webPreferences: {
+      nodeIntegration: true,
+      enableRemoteModule: true,
+      nodeIntegrationInWorker: true,
+    }
+  });
+  // load the dist folder from Angular
+  await mainWindow.loadURL(
+    url.format({
+      pathname: path.join(__dirname, '/cic-staff-client/index.html'),
+      protocol: 'file',
+      slashes: true
+    })
+  );
+
+  // Open the DevTools.
+  // mainWindow.webContents.openDevTools();
+
+  mainWindow.on('closed', () => {
+    mainWindow = null;
+  });
+}
+
+async function openModal(): Promise<void> {
+  const modal = new BrowserWindow({
+    parent: mainWindow,
+    modal: true,
+    show: false,
+  });
+  await modal.loadURL('https://dashboard.sarafu.network/');
+  modal.once('ready-to-show', () => {
+    modal.show();
+  });
+}
+
+function isRoot(): boolean {
+  return path.parse(process.cwd()).root === process.cwd();
+}
+
+function getImages(): void {
+  const cwd = process.cwd();
+  fs.readdir('.', { withFileTypes: true }, ((err, files) => {
+    if (!err) {
+      const re = /(?:\.([^.]+))?$/;
+      const images = files.filter(file => file.isFile() && ['jpg', 'png'].includes(re.exec(file.name)[1])).map(file => `file://${cwd}/${file.name}`);
+      mainWindow.webContents.send('getImagesResponse', images);
+    }
+  }));
+}
+
+function getDirectory(): void {
+  fs.readdir('.', { withFileTypes: true }, (err, files) => {
+    if (!err) {
+      const directories = files.filter(file =>  file.isDirectory()).map(file => file.name);
+      if (!isRoot()) {
+        directories.unshift('..');
+      }
+      mainWindow.webContents.send('getDirectoryResponse', directories);
+    }
+  });
+}
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on('ready', async () => {
+  let tray = null;
+  tray = new Tray(path.join(__dirname, '/cic-staff-client/assets/icons/manifest-icon-512.png'));
+  const contextMenu = Menu.buildFromTemplate([
+    { label: 'Item1', type: 'radio' },
+    { label: 'Item2', type: 'radio' },
+    { label: 'Item3', type: 'radio', checked: true },
+    { label: 'Exit', type: 'normal', click: () => { app.quit(); } },
+  ]);
+  tray.setToolTip('CIC Administration Dashboard.');
+  // Overrides 'right-click' event.
+  tray.setContextMenu(contextMenu);
+  tray.on('click', (event, arg) => {
+    console.log('Systray was left-clicked.', event, arg);
+  });
+  tray.on('double-click', (event, arg) => {
+    console.log('Systray was double-clicked.', event, arg);
+  });
+  await createWindow();
+});
+
+app.on('activate', async () => {
+  // On macOS it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (BrowserWindow.getAllWindows().length === 0) {
+    await createWindow();
+  }
+});
+
+// Quit when all windows are closed, except on macOS. There, it's common
+// for applications and their menu bar to stay active until the user quits
+// explicitly with Cmd + Q.
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});
+
+ipcMain.on('my-custom-signal', (event, arg) => {
+  console.log('Print to the main process terminal (STDOUT) when signal received from renderer process.');
+  console.log(event);
+  console.log(arg);
+  mainWindow.webContents.send('other-custom-signal', 'message from the backend process');
+});
+
+ipcMain.on('navigateDirectory', (event, arg) => {
+  process.chdir(arg);
+  getImages();
+  getDirectory();
+});
+
+ipcMain.on('getFiles', (event, arg) => {
+  const files = fs.readdirSync(__dirname);
+  mainWindow.webContents.send('getFilesResponse', files);
+});
+
+ipcMain.on('openModal', async (event, arg) => {
+  await openModal();
+});

src-backend/tsconfig.json

@@ -0,0 +1,9 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../dist",
+    "module": "commonjs",
+    "skipLibCheck": true
+  }
+}

src/app/_services/auth.service.ts

@@ -14,6 +14,7 @@ import { BehaviorSubject, Observable } from 'rxjs';
   providedIn: 'root',
 })
 export class AuthService {
+  sessionToken: any;
   mutableKeyStore: MutableKeyStore;
   trustedUsers: Array<Staff> = [];
   private trustedUsersList: BehaviorSubject<Array<Staff>> = new BehaviorSubject<Array<Staff>>(
@@ -31,99 +32,128 @@ export class AuthService {
 
   async init(): Promise<void> {
     await this.mutableKeyStore.loadKeyring();
+    // TODO setting these together should be atomic
+    if (sessionStorage.getItem(btoa('CICADA_SESSION_TOKEN'))) {
+      this.sessionToken = sessionStorage.getItem(btoa('CICADA_SESSION_TOKEN'));
+    }
     if (localStorage.getItem(btoa('CICADA_PRIVATE_KEY'))) {
       await this.mutableKeyStore.importPrivateKey(localStorage.getItem(btoa('CICADA_PRIVATE_KEY')));
     }
   }
 
-  getSessionToken(): string {
-    return sessionStorage.getItem(btoa('CICADA_SESSION_TOKEN'));
-  }
-
-  setSessionToken(token): void {
-    sessionStorage.setItem(btoa('CICADA_SESSION_TOKEN'), token);
-  }
-
   setState(s): void {
     document.getElementById('state').innerHTML = s;
   }
 
   getWithToken(): Promise<boolean> {
-    const headers = {
-      Authorization: 'Bearer ' + this.getSessionToken,
-      'Content-Type': 'application/json;charset=utf-8',
-      'x-cic-automerge': 'none',
-    };
-    const options = {
-      headers,
-    };
-    return fetch(environment.cicMetaUrl, options).then((response) => {
-      if (!response.ok) {
-        this.loggingService.sendErrorLevelMessage('failed to get with auth token.', this, {
-          error: '',
-        });
-
-        return false;
-      }
-      return true;
+    return new Promise((resolve, reject) => {
+      const headers = {
+        Authorization: 'Bearer ' + this.sessionToken,
+        'Content-Type': 'application/json;charset=utf-8',
+        'x-cic-automerge': 'none',
+      };
+      const options = {
+        headers,
+      };
+      fetch(environment.cicMetaUrl, options).then((response) => {
+        if (response.status === 401) {
+          return reject(rejectBody(response));
+        }
+        return resolve(true);
+      });
     });
   }
 
   // TODO rename to send signed challenge and set session. Also separate these responsibilities
-  sendSignedChallenge(hobaResponseEncoded: any): Promise<any> {
-    const headers = {
-      Authorization: 'HOBA ' + hobaResponseEncoded,
-      'Content-Type': 'application/json;charset=utf-8',
-      'x-cic-automerge': 'none',
-    };
-    const options = {
-      headers,
-    };
-    return fetch(environment.cicMetaUrl, options);
+  sendResponse(hobaResponseEncoded: any): Promise<boolean> {
+    return new Promise((resolve, reject) => {
+      const headers = {
+        Authorization: 'HOBA ' + hobaResponseEncoded,
+        'Content-Type': 'application/json;charset=utf-8',
+        'x-cic-automerge': 'none',
+      };
+      const options = {
+        headers,
+      };
+      fetch(environment.cicMetaUrl, options).then((response) => {
+        if (response.status === 401) {
+          return reject(rejectBody(response));
+        }
+        this.sessionToken = response.headers.get('Token');
+        sessionStorage.setItem(btoa('CICADA_SESSION_TOKEN'), this.sessionToken);
+        this.setState('Click button to log in');
+        return resolve(true);
+      });
+    });
   }
 
   getChallenge(): Promise<any> {
-    return fetch(environment.cicMetaUrl).then((response) => {
-      if (response.status === 401) {
-        const authHeader: string = response.headers.get('WWW-Authenticate');
-        return hobaParseChallengeHeader(authHeader);
-      }
+    return new Promise((resolve, reject) => {
+      fetch(environment.cicMetaUrl).then(async (response) => {
+        if (response.status === 401) {
+          const authHeader: string = response.headers.get('WWW-Authenticate');
+          return resolve(hobaParseChallengeHeader(authHeader));
+        }
+        if (!response.ok) {
+          return reject(rejectBody(response));
+        }
+      });
     });
   }
 
   async login(): Promise<boolean> {
-    if (this.getSessionToken()) {
-      sessionStorage.removeItem(btoa('CICADA_SESSION_TOKEN'));
-    } else {
-      const o = await this.getChallenge();
-
-      const r = await signChallenge(
-        o.challenge,
-        o.realm,
-        environment.cicMetaUrl,
-        this.mutableKeyStore
-      );
-
-      const tokenResponse = await this.sendSignedChallenge(r).then((response) => {
-        const token = response.headers.get('Token');
-        if (token) {
-          return token;
-        }
-        if (response.status === 401) {
-          throw new HttpError('You are not authorized to use this system', response.status);
-        }
-        if (!response.ok) {
-          throw new HttpError('Unknown error from authentication server', response.status);
-        }
-      });
-
-      if (tokenResponse) {
-        this.setSessionToken(tokenResponse);
-        this.setState('Click button to log in');
-        return true;
+    if (this.sessionToken !== undefined) {
+      try {
+        const response: boolean = await this.getWithToken();
+        return response === true;
+      } catch (e) {
+        this.loggingService.sendErrorLevelMessage('Login token failed', this, { error: e });
+      }
+    } else {
+      try {
+        const o = await this.getChallenge();
+        const response: boolean = await this.loginResponse(o);
+        return response === true;
+      } catch (e) {
+        this.loggingService.sendErrorLevelMessage('Login challenge failed', this, { error: e });
       }
-      return false;
     }
+    return false;
+  }
+
+  async loginResponse(o: { challenge: string; realm: any }): Promise<any> {
+    return new Promise(async (resolve, reject) => {
+      try {
+        const r = await signChallenge(
+          o.challenge,
+          o.realm,
+          environment.cicMetaUrl,
+          this.mutableKeyStore
+        );
+        const response: boolean = await this.sendResponse(r);
+        resolve(response);
+      } catch (error) {
+        if (error instanceof HttpError) {
+          if (error.status === 403) {
+            this.errorDialogService.openDialog({
+              message: 'You are not authorized to use this system',
+            });
+          } else if (error.status === 401) {
+            this.errorDialogService.openDialog({
+              message:
+                'Unable to authenticate with the service. ' +
+                'Please speak with the staff at Grassroots ' +
+                'Economics for requesting access ' +
+                'staff@grassrootseconomics.net.',
+            });
+          }
+        } else {
+          // TODO define this error
+          this.errorDialogService.openDialog({ message: 'Incorrect key passphrase.' });
+        }
+        resolve(false);
+      }
+    });
   }
 
   loginView(): void {
@@ -141,7 +171,7 @@ export class AuthService {
       // TODO leaving this out for now.
       // const isEncryptedKeyCheck = await this.mutableKeyStore.isEncryptedPrivateKey(privateKeyArmored);
       // if (!isEncryptedKeyCheck) {
-      //   throw Error('The private key does not have a password!');
+      //   throw Error('The private key doesn\'t have a password!');
       // }
       const key = await this.mutableKeyStore.importPrivateKey(privateKeyArmored);
       localStorage.setItem(btoa('CICADA_PRIVATE_KEY'), privateKeyArmored);
@@ -163,6 +193,7 @@ export class AuthService {
   logout(): void {
     sessionStorage.removeItem(btoa('CICADA_SESSION_TOKEN'));
     localStorage.removeItem(btoa('CICADA_PRIVATE_KEY'));
+    this.sessionToken = undefined;
     window.location.reload();
   }
 

src/app/_services/electron.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ElectronService } from './electron.service';
+
+describe('ElectronService', () => {
+  let service: ElectronService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ElectronService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/_services/electron.service.ts

@@ -0,0 +1,65 @@
+import { Injectable } from '@angular/core';
+import { IpcRenderer } from 'electron';
+import {BehaviorSubject} from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ElectronService {
+  private ipc: IpcRenderer;
+  images = new BehaviorSubject<string[]>([]);
+  directory = new BehaviorSubject<string[]>([]);
+
+  constructor() {
+    if ((window as any).require) {
+      console.log('Pass');
+      try {
+        console.log('supported');
+        this.ipc = (window as any).require('electron').ipcRenderer;
+      } catch (error) {
+        console.error(error);
+        throw error;
+      }
+    } else {
+      console.warn('Could not load electron ipc');
+    }
+  }
+
+  testIpc(): void {
+    this.ipc.on('my-custom-signal', (event, arg) => {
+      console.log('Received acknowledged from backend about receipt of our signal.');
+      console.log(event);
+      console.log(arg);
+    });
+
+    this.ipc.on('getImageResponse', (event, images) => {
+      this.images.next(images);
+    });
+
+    this.ipc.on('getDirectoryResponse', (event, directory) => {
+      this.directory.next(directory);
+    });
+
+    console.log('Sending message to backend.');
+    this.ipc.send('my-custom-signal', 'hello, are you there?');
+  }
+
+  navigateDirectory(path): any {
+    this.ipc.send('navigateDirectory', path);
+  }
+
+  async getFiles(): Promise<string[]> {
+    console.log('Starting');
+    return new Promise<string[]>((resolve, reject) => {
+      this.ipc.once('getFilesResponse', (event, arg) => {
+        resolve(arg);
+      });
+      this.ipc.send('getFiles');
+    });
+  }
+
+  openModal(): void {
+    console.log('Open a modal.');
+    this.ipc.send('openModal');
+  }
+}

src/app/_services/token.service.ts

@@ -4,7 +4,7 @@ import { TokenRegistry } from '@app/_eth';
 import { HttpClient } from '@angular/common/http';
 import { RegistryService } from '@app/_services/registry.service';
 import { Token } from '@app/_models';
-import { BehaviorSubject, Observable, Subject } from 'rxjs';
+import {BehaviorSubject, Observable, Subject} from 'rxjs';
 
 @Injectable({
   providedIn: 'root',
@@ -14,9 +14,7 @@ export class TokenService {
   tokenRegistry: TokenRegistry;
   onload: (status: boolean) => void;
   tokens: Array<Token> = [];
-  private tokensList: BehaviorSubject<Array<Token>> = new BehaviorSubject<Array<Token>>(
-    this.tokens
-  );
+  private tokensList: BehaviorSubject<Array<Token>> = new BehaviorSubject<Array<Token>>(this.tokens);
   tokensSubject: Observable<Array<Token>> = this.tokensList.asObservable();
 
   constructor(private httpClient: HttpClient) {}

src/app/auth/auth.component.html

@@ -8,7 +8,7 @@
             <h1 class="text-white">CICADA</h1>
           </a>
         </mat-card-title>
-        <div id="one" style="display: block" class="card-body p-4">
+        <div  id="one" style="display: block" class="card-body p-4">
 
           <div class="text-center w-75 m-auto">
             <h4 class="text-dark-50 text-center font-weight-bold">Add Private Key</h4>
@@ -32,7 +32,7 @@
 
           </form>
         </div>
-        <div id="two" style="display: none" class="card-body p-4 align-items-center">
+        <div  id="two" style="display: none" class="card-body p-4 align-items-center">
 
           <div class="text-center w-75 m-auto">
             <h4 id="state" class="text-dark-50 text-center font-weight-bold"></h4>

src/app/auth/auth.component.ts

@@ -2,8 +2,6 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { CustomErrorStateMatcher } from '@app/_helpers';
 import { AuthService } from '@app/_services';
-import { ErrorDialogService } from '@app/_services/error-dialog.service';
-import { LoggingService } from '@app/_services/logging.service';
 import { Router } from '@angular/router';
 
 @Component({
@@ -21,17 +19,18 @@ export class AuthComponent implements OnInit {
   constructor(
     private authService: AuthService,
     private formBuilder: FormBuilder,
-    private router: Router,
-    private errorDialogService: ErrorDialogService
+    private router: Router
   ) {}
 
   async ngOnInit(): Promise<void> {
     this.keyForm = this.formBuilder.group({
       key: ['', Validators.required],
     });
-    if (this.authService.getPrivateKey()) {
-      this.authService.loginView();
-    }
+    await this.authService.init();
+    // if (this.authService.privateKey !== undefined) {
+    //   const setKey = await this.authService.setKey(this.authService.privateKey);
+    //   }
+    // }
   }
 
   get keyFormStub(): any {
@@ -50,20 +49,19 @@ export class AuthComponent implements OnInit {
     this.loading = false;
   }
 
-  async login(): Promise<void> {
-    try {
-      const loginResult = await this.authService.login();
-      if (loginResult) {
-        this.router.navigate(['/home']);
-      }
-    } catch (HttpError) {
-      this.errorDialogService.openDialog({
-        message: HttpError.message,
-      });
+  login(): void {
+    // TODO check if we have privatekey
+    // Send us to home if we have a private key
+    // talk to meta somehow
+    // in the error interceptor if 401/403 handle it
+    // if 200 go /home
+    if (this.authService.getPrivateKey()) {
+      this.router.navigate(['/home']);
     }
   }
 
   switchWindows(): void {
+    this.authService.sessionToken = undefined;
     const divOne: HTMLElement = document.getElementById('one');
     const divTwo: HTMLElement = document.getElementById('two');
     this.toggleDisplay(divOne);

src/index.html

@@ -3,10 +3,11 @@
 <head>
   <meta charset="utf-8">
   <title>CICADA</title>
-  <base href="/">
+  <base href="./">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta content="A fully featured admin client for managing users and transactions in the CIC network." name="description"/>
   <meta content="Spencer Ofwiti" name="author"/>
+  <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
   <link rel="icon" type="image/x-icon" href="assets/icons/manifest-icon-512.png">
   <link rel="apple-touch-icon" href="assets/icons/apple-icon-180.png">
   <meta name="apple-mobile-web-app-capable" content="yes">

tsconfig.json

@@ -14,9 +14,11 @@
     "downlevelIteration": true,
     "experimentalDecorators": true,
     "moduleResolution": "node",
+    "esModuleInterop": true,
     "importHelpers": true,
-    "target": "es2015",
+    "target": "es5",
     "module": "es2020",
+    "typeRoots": ["node_modules/@types"],
     "lib": [
       "es2018",
       "dom"