3 Commits

Author SHA1 Message Date
Spencer Ofwiti
7e82930282 Merge branch 'master' into spencer/electron 2021-06-09 08:49:05 +03:00
Spencer Ofwiti
3a6d3bb8c2 Refactor file management functions. 2021-05-26 10:00:08 +03:00
Spencer Ofwiti
7ddca00871 Wrap web app into electron. 2021-05-26 09:54:55 +03:00
20 changed files with 8358 additions and 420 deletions

1
.gitignore vendored
View File

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

8167
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -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": {
@@ -33,13 +47,12 @@
"@angular/platform-browser-dynamic": "~10.2.0",
"@angular/router": "~10.2.0",
"@angular/service-worker": "~10.2.0",
"@cicnet/cic-client-meta": "^0.0.11",
"@cicnet/crdt-meta": "^0.0.10",
"@cicnet/schemas-data-validator": "*",
"@popperjs/core": "^2.5.4",
"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",
@@ -55,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",
@@ -74,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",
@@ -88,7 +110,31 @@
"pre-commit": "pretty-quick --staged & ng lint"
}
},
"browser":{
"child_process": false
"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": {}
}
]
}
}
}

View File

@@ -29,7 +29,7 @@ export const environment = {
function setConfigs(configs): void {
writeFile(targetPath, configs, err => {
if (err) {
console.error(err);
throw console.error(err);
} else {
console.log(colors.green(`Wrote variables to '${targetPath}`));
}

139
src-backend/main.ts Normal file
View File

@@ -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();
});

View File

@@ -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
}
}

2
src/app/_pgp/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export * from '@app/_pgp/pgp-key-store';
export * from '@app/_pgp/pgp-signer';

View File

@@ -0,0 +1,7 @@
import { MutablePgpKeyStore } from '@app/_pgp/pgp-key-store';
describe('PgpKeyStore', () => {
it('should create an instance', () => {
expect(new MutablePgpKeyStore()).toBeTruthy();
});
});

View File

@@ -0,0 +1,169 @@
import { KeyStore } from 'cic-client-meta';
// TODO should we put this on the mutable key store object
import * as openpgp from 'openpgp';
const keyring = new openpgp.Keyring();
interface MutableKeyStore extends KeyStore {
loadKeyring(): void;
importKeyPair(publicKey: any, privateKey: any): Promise<void>;
importPublicKey(publicKey: any): Promise<void>;
importPrivateKey(privateKey: any): Promise<void>;
getPublicKeys(): Array<any>;
getTrustedKeys(): Array<any>;
getTrustedActiveKeys(): Array<any>;
getEncryptKeys(): Array<any>;
getPrivateKeys(): Array<any>;
getPrivateKey(): any;
isValidKey(key: any): Promise<boolean>;
isEncryptedPrivateKey(privateKey: any): Promise<boolean>;
getFingerprint(): string;
getKeyId(key: any): string;
getPrivateKeyId(): string;
getKeysForId(keyId: string): Array<any>;
getPublicKeyForId(keyId: string): any;
getPrivateKeyForId(keyId: string): any;
getPublicKeyForSubkeyId(subkeyId: string): any;
getPublicKeysForAddress(address: string): Array<any>;
removeKeysForId(keyId: string): Array<any>;
removePublicKeyForId(keyId: string): any;
removePublicKey(publicKey: any): any;
clearKeysInKeyring(): void;
sign(plainText: string): Promise<any>;
}
class MutablePgpKeyStore implements MutableKeyStore {
async loadKeyring(): Promise<void> {
await keyring.load();
await keyring.store();
}
async importKeyPair(publicKey: any, privateKey: any): Promise<void> {
await keyring.publicKeys.importKey(publicKey);
await keyring.privateKeys.importKey(privateKey);
}
async importPublicKey(publicKey: any): Promise<void> {
await keyring.publicKeys.importKey(publicKey);
}
async importPrivateKey(privateKey: any): Promise<void> {
await keyring.privateKeys.importKey(privateKey);
}
getPublicKeys(): Array<any> {
return keyring.publicKeys.keys;
}
getTrustedKeys(): Array<any> {
return keyring.publicKeys.keys;
}
getTrustedActiveKeys(): Array<any> {
return keyring.publicKeys.keys;
}
getEncryptKeys(): Array<any> {
return [];
}
getPrivateKeys(): Array<any> {
return keyring.privateKeys.keys;
}
getPrivateKey(): any {
return keyring.privateKeys && keyring.privateKeys.keys[0];
}
async isValidKey(key): Promise<boolean> {
// There is supposed to be an openpgp.readKey() method but I can't find it?
const testKey = await openpgp.key.readArmored(key);
return !testKey.err;
}
async isEncryptedPrivateKey(privateKey: any): Promise<boolean> {
const imported = await openpgp.key.readArmored(privateKey);
for (const key of imported.keys) {
if (key.isDecrypted()) {
return false;
}
}
return true;
}
getFingerprint(): string {
// TODO Handle multiple keys
return (
keyring.privateKeys &&
keyring.privateKeys.keys[0] &&
keyring.privateKeys.keys[0].keyPacket &&
keyring.privateKeys.keys[0].keyPacket.fingerprint
);
}
getKeyId(key: any): string {
return key.getKeyId().toHex();
}
getPrivateKeyId(): string {
// TODO is there a library that comes with angular for doing this?
return (
keyring.privateKeys &&
keyring.privateKeys.keys[0] &&
keyring.privateKeys.keys[0].getKeyId().toHex()
);
}
getKeysForId(keyId: string): Array<any> {
return keyring.getKeysForId(keyId);
}
getPublicKeyForId(keyId): any {
return keyring.publicKeys.getForId(keyId);
}
getPrivateKeyForId(keyId): any {
return keyring.privateKeys.getForId(keyId);
}
getPublicKeyForSubkeyId(subkeyId): any {
return keyring.publicKeys.getForId(subkeyId, true);
}
getPublicKeysForAddress(address): Array<any> {
return keyring.publicKeys.getForAddress(address);
}
removeKeysForId(keyId): Array<any> {
return keyring.removeKeysForId(keyId);
}
removePublicKeyForId(keyId): any {
return keyring.publicKeys.removeForId(keyId);
}
removePublicKey(publicKey: any): any {
const keyId = publicKey.getKeyId().toHex();
return keyring.publicKeys.removeForId(keyId);
}
clearKeysInKeyring(): void {
keyring.clear();
}
async sign(plainText): Promise<any> {
const privateKey = this.getPrivateKey();
if (!privateKey.isDecrypted()) {
const password = window.prompt('password');
await privateKey.decrypt(password);
}
const opts = {
message: openpgp.message.fromText(plainText),
privateKeys: [privateKey],
detached: true,
};
const signatureObject = await openpgp.sign(opts);
return signatureObject.signature;
}
}
export { MutablePgpKeyStore, MutableKeyStore };

View File

@@ -0,0 +1,9 @@
import { PGPSigner } from '@app/_pgp/pgp-signer';
import { MutableKeyStore, MutablePgpKeyStore } from '@app/_pgp/pgp-key-store';
const keystore: MutableKeyStore = new MutablePgpKeyStore();
describe('PgpSigner', () => {
it('should create an instance', () => {
expect(new PGPSigner(keystore)).toBeTruthy();
});
});

114
src/app/_pgp/pgp-signer.ts Normal file
View File

@@ -0,0 +1,114 @@
import { MutableKeyStore } from '@app/_pgp/pgp-key-store';
import { LoggingService } from '@app/_services/logging.service';
const openpgp = require('openpgp');
interface Signable {
digest(): string;
}
interface Signature {
engine: string;
algo: string;
data: string;
digest: string;
}
interface Signer {
onsign(signature: Signature): void;
onverify(flag: boolean): void;
fingerprint(): string;
prepare(material: Signable): boolean;
verify(digest: string, signature: Signature): void;
sign(digest: string): Promise<void>;
}
class PGPSigner implements Signer {
engine = 'pgp';
algo = 'sha256';
dgst: string;
signature: Signature;
keyStore: MutableKeyStore;
onsign: (signature: Signature) => void;
onverify: (flag: boolean) => void;
loggingService: LoggingService;
constructor(keyStore: MutableKeyStore) {
this.keyStore = keyStore;
this.onsign = (signature: Signature) => {};
this.onverify = (flag: boolean) => {};
}
public fingerprint(): string {
return this.keyStore.getFingerprint();
}
public prepare(material: Signable): boolean {
this.dgst = material.digest();
return true;
}
public verify(digest: string, signature: Signature): void {
openpgp.signature
.readArmored(signature.data)
.then((sig) => {
const opts = {
message: openpgp.cleartext.fromText(digest),
publicKeys: this.keyStore.getTrustedKeys(),
signature: sig,
};
openpgp.verify(opts).then((v) => {
let i = 0;
for (i = 0; i < v.signatures.length; i++) {
const s = v.signatures[i];
if (s.valid) {
this.onverify(s);
return;
}
}
this.loggingService.sendErrorLevelMessage(
`Checked ${i} signature(s) but none valid`,
this,
{ error: '404 Not found!' }
);
this.onverify(false);
});
})
.catch((e) => {
this.loggingService.sendErrorLevelMessage(e.message, this, { error: e });
this.onverify(false);
});
}
public async sign(digest: string): Promise<void> {
const m = openpgp.cleartext.fromText(digest);
const pk = this.keyStore.getPrivateKey();
if (!pk.isDecrypted()) {
const password = window.prompt('password');
await pk.decrypt(password);
}
const opts = {
message: m,
privateKeys: [pk],
detached: true,
};
openpgp
.sign(opts)
.then((s) => {
this.signature = {
engine: this.engine,
algo: this.algo,
data: s.signature,
// TODO: fix for browser later
digest,
};
this.onsign(this.signature);
})
.catch((e) => {
this.loggingService.sendErrorLevelMessage(e.message, this, { error: e });
this.onsign(undefined);
});
}
}
export { Signable, Signature, Signer, PGPSigner };

View File

@@ -3,7 +3,7 @@ import { hobaParseChallengeHeader } from '@src/assets/js/hoba.js';
import { signChallenge } from '@src/assets/js/hoba-pgp.js';
import { environment } from '@src/environments/environment';
import { LoggingService } from '@app/_services/logging.service';
import { MutableKeyStore, MutablePgpKeyStore } from '@cicnet/crdt-meta';
import { MutableKeyStore, MutablePgpKeyStore } from '@app/_pgp';
import { ErrorDialogService } from '@app/_services/error-dialog.service';
import { HttpClient } from '@angular/common/http';
import { HttpError, rejectBody } from '@app/_helpers/global-error-handler';

View File

@@ -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();
});
});

View File

@@ -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');
}
}

View File

@@ -2,8 +2,7 @@ import { Injectable } from '@angular/core';
import { first } from 'rxjs/operators';
import { BehaviorSubject, Observable } from 'rxjs';
import { environment } from '@src/environments/environment';
import {User} from '@cicnet/cic-client-meta';
import {Envelope} from '@cicnet/crdt-meta';
import { Envelope, User } from 'cic-client-meta';
import { UserService } from '@app/_services/user.service';
import { Keccak } from 'sha3';
import { utils } from 'ethers';

View File

@@ -3,12 +3,12 @@ import { BehaviorSubject, Observable, Subject } from 'rxjs';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { environment } from '@src/environments/environment';
import { first } from 'rxjs/operators';
import {Phone, User} from '@cicnet/cic-client-meta';
import {ArgPair, Envelope, Syncable, MutableKeyStore, PGPSigner, Signer} from '@cicnet/crdt-meta';
import { ArgPair, Envelope, Phone, Syncable, User } from 'cic-client-meta';
import { AccountDetails } from '@app/_models';
import { LoggingService } from '@app/_services/logging.service';
import { TokenService } from '@app/_services/token.service';
import { AccountIndex } from '@app/_eth';
import { MutableKeyStore, PGPSigner, Signer } from '@app/_pgp';
import { RegistryService } from '@app/_services/registry.service';
import { CICRegistry } from 'cic-client';
import { AuthService } from '@app/_services/auth.service';

View File

@@ -12,7 +12,7 @@ import { AuthGuard } from '@app/_guards';
import { LoggerModule } from 'ngx-logger';
import { environment } from '@src/environments/environment';
import { ErrorInterceptor, HttpConfigInterceptor, LoggingInterceptor } from '@app/_interceptors';
import { MutablePgpKeyStore } from '@cicnet/crdt-meta';
import { MutablePgpKeyStore } from '@app/_pgp';
import { ServiceWorkerModule } from '@angular/service-worker';
@NgModule({

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@@ -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">

View File

@@ -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"