status-im
/
keycard-certify
mirror of https://github.com/status-im/keycard-certify.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

added icon

This commit is contained in:
Ksenia Lebedeva 2022-11-18 01:50:09 +01:00
parent 0003dd6215
commit f28dde65fe
15 changed files with 65 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
build/icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 88 KiB

After

Width:  |  Height:  |  Size: 72 KiB

78
css/app.css
View File

@ -91,6 +91,17 @@ input[disabled="disabled"], input[disabled="disabled"]:hover {
height: 5px; height: 5px;
} }
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
@keyframes fade { @keyframes fade {
0% { 0% {
opacity: 0; opacity: 0;
@ -151,7 +162,7 @@ input[disabled="disabled"], input[disabled="disabled"]:hover {
padding: .2em 2em; padding: .2em 2em;
} }
.keycard__ident-container { .keycard-ident__container {
height: 60%; height: 60%;
box-sizing: border-box; box-sizing: border-box;
padding: 2em 0; padding: 2em 0;
@ -165,18 +176,18 @@ input[disabled="disabled"], input[disabled="disabled"]:hover {
display: inherit; display: inherit;
} }
.keycard__ident-form-container { .keycard-ident__form-container {
width: 80%; width: 80%;
box-sizing: border-box; box-sizing: border-box;
margin: 1em auto; margin: 1em auto;
} }
.keycard__ident-form-field-container { .keycard-ident__form-field-container {
padding: .8em 0; padding: .8em 0;
box-sizing: border-box; box-sizing: border-box;
} }
.keycard__ident-form-field-label { .keycard-ident__form-field-label {
float: left; float: left;
width: 37%; width: 37%;
font-weight: bold; font-weight: bold;
@ -258,7 +269,7 @@ input[disabled="disabled"], input[disabled="disabled"]:hover {
.keycard__btn-container { .keycard__btn-container {
text-align: center; text-align: center;
padding: 2em 0; padding: 1em 0;
} }
.keycard__btn { .keycard__btn {
@ -283,6 +294,7 @@ input[disabled="disabled"], input[disabled="disabled"]:hover {
height: 148px; height: 148px;
margin: 4em auto; margin: 4em auto;
} }
.keycard__loading div { .keycard__loading div {
position: absolute; position: absolute;
border: 4px solid rgb(112, 112, 191); border: 4px solid rgb(112, 112, 191);
@ -290,9 +302,11 @@ input[disabled="disabled"], input[disabled="disabled"]:hover {
border-radius: 50%; border-radius: 50%;
animation: keycard__loading 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; animation: keycard__loading 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
} }
.keycard__loading div:nth-child(2) { .keycard__loading div:nth-child(2) {
animation-delay: -0.5s; animation-delay: -0.5s;
} }
@keyframes keycard__loading { @keyframes keycard__loading {
0% { 0% {
top: 72px; top: 72px;
@ -310,11 +324,11 @@ input[disabled="disabled"], input[disabled="disabled"]:hover {
} }
} }
.keycard__ident-form-enc-field-container { .keycard-ident__form-enc-field-container {
position: relative; position: relative;
} }
.keycard__ident-file-field { .keycard-ident__file-field {
float: left; float: left;
margin: .8em 0; margin: .8em 0;
position: relative; position: relative;
@ -322,7 +336,7 @@ input[disabled="disabled"], input[disabled="disabled"]:hover {
border: none; border: none;
} }
.keycard__ident-file-label { .keycard-ident__file-label {
position: relative; position: relative;
z-index: 0; z-index: 0;
display: inline-block; display: inline-block;
@ -340,7 +354,7 @@ input[disabled="disabled"], input[disabled="disabled"]:hover {
font-weight: bold; font-weight: bold;
} }
.keycard__ident-file-input { .keycard-ident__file-input {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
@ -356,49 +370,7 @@ input[disabled="disabled"], input[disabled="disabled"]:hover {
display: block; display: block;
padding-top: .4em; padding-top: .4em;
overflow-x: scroll; overflow-x: scroll;
width: 200%; width: 220%;
}
.keycard__check {
padding: 0;
height: initial;
width: initial;
margin-bottom: 0;
display: none;
cursor: pointer;
}
.keycard__check-label {
position: relative;
cursor: pointer;
margin-right: 2.5em;
}
.keycard__check-label:before {
content:'';
-webkit-appearance: none;
background-color: transparent;
border: 2px solid rgb(72, 151, 127);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
padding: .56em;
display: inline-block;
position: relative;
vertical-align: middle;
cursor: pointer;
margin-right: .8em;
}
.keycard__check:checked + .keycard__check-label:after {
content: '';
display: block;
position: absolute;
top: .1em;
left: .5em;
width: .25em;
height: .8em;
border: solid rgb(72, 151, 127);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
} }
.keycard-ident__destination-path-container { .keycard-ident__destination-path-container {
@ -408,7 +380,7 @@ input[disabled="disabled"], input[disabled="disabled"]:hover {
.keycard-ident__select-btn { .keycard-ident__select-btn {
font-family: "Material Symbols Outlined", monospace; font-family: "Material Symbols Outlined", monospace;
margin-top: .4em; margin-top: .65em;
float: right; float: right;
background: white; background: white;
border-radius: 5px; border-radius: 5px;

BIN
img/app_info_bg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 596 KiB

BIN
img/smartcard_install.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 30 KiB

BIN
img/smartcard_unpair.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 32 KiB

BIN
img/smartcard_update.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 32 KiB

38
index.html
View File

@ -2,7 +2,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Keycard Desktop</title> <title>Keycard Certify</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" /> <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
<link href="https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@700&display=swap" rel="stylesheet">
@ -12,38 +12,38 @@
<body class="keycard__body-container"> <body class="keycard__body-container">
<div class="keycard__main-container group" id="main-container"> <div class="keycard__main-container group" id="main-container">
<div class="keycard__ident-container"> <div class="keycard-ident__container">
<div class="keycard__ident-form-container" id="ident-form"> <div class="keycard-ident__form-container" id="ident-form">
<div class="keycard__ident-form"> <div class="keycard-ident__form">
<div class="keycard__ident-form-field-container group"> <div class="keycard-ident__form-field-container group">
<label for="lot-number" class="keycard__ident-form-field-label">Lot number</label> <label for="lot-number" class="keycard-ident__form-field-label">Lot number</label>
<input type="text" class="keycard__ident-form-field-input-text keycard__inp-right" id="lot-number" name="lot-number" placeholder="Lot number" required> <input type="text" class="keycard-ident__form-field-input-text keycard__inp-right" id="lot-number" name="lot-number" placeholder="Lot number" required>
</div> </div>
<div class="keycard__ident-form-field-container group"> <div class="keycard-ident__form-field-container group">
<label for="card-quantity" class="keycard__ident-form-field-label">Number of cards</label> <label for="card-quantity" class="keycard-ident__form-field-label">Number of cards</label>
<input type="number" class="keycard__ident-form-field-input-number keycard__inp-right" id="card-quantity" name="card-quantity" value="1" required> <input type="number" class="keycard-ident__form-field-input-number keycard__inp-right" id="card-quantity" name="card-quantity" value="1" required>
</div> </div>
<div class="keycard-ident__destination-path-container keycard__ident-form-field-container group"> <div class="keycard-ident__destination-path-container keycard-ident__form-field-container group">
<span class="keycard__ident-form-field-label">Destination file</span> <span class="keycard-ident__form-field-label">Destination file</span>
<div class="group"> <div class="group">
<span class="keycard-ident__destination-path" id="show-destination-path">No destination file selected</span> <span class="keycard-ident__destination-path" id="show-destination-path">No destination file selected</span>
<button id="destination-path" class="keycard-ident__select-btn material-symbols-outlined">folder_open</button> <button id="destination-path" class="keycard-ident__select-btn material-symbols-outlined">folder_open</button>
</div> </div>
</div> </div>
<div class="keycard__ident-form-field-container keycard__ident-form-enc-field-container group"> <div class="keycard-ident__form-field-container keycard-ident__form-enc-field-container group">
<label for="encryption-key" class="keycard__ident-form-field-label keycard-ident__enc-file-label">Output encryption key</label> <label for="encryption-key" class="keycard-ident__form-field-label keycard-ident__enc-file-label">Output encryption key</label>
<div class="keycard__ident-file-field keycard__inp-right group"> <div class="keycard-ident__file-field keycard__inp-right group">
<div class="keycard__file-inp-left"> <div class="keycard__file-inp-left">
<input type="file" class="keycard__ident-file-input" accept=".asc" id="encryption-key" name="encryption-key" required> <input type="file" class="keycard-ident__file-input" accept=".asc" id="encryption-key" name="encryption-key" required>
<span class="keycard__ident-file-label"> <span class="keycard-ident__file-label">
Choose File Choose File
</span> </span>
</div> </div>
<span id="file-enc-path-label" class="keycard__file-path-label">No file selected</span> <span id="file-enc-path-label" class="keycard__file-path-label">No file selected</span>
</div> </div>
</div> </div>
<div class="keycard__ident-start-btn-container keycard__btn-container"> <div class="keycard-ident__start-btn-container keycard__btn-container">
<button class="keycard__ident-start-btn keycard__btn" id="start-btn" disabled>Start</button> <button class="keycard-ident__start-btn keycard__btn" id="start-btn" disabled>Start</button>
</div> </div>
</div> </div>
</div> </div>

4
package.json
View File

@ -11,8 +11,8 @@
"postinstall": "electron-builder install-app-deps" "postinstall": "electron-builder install-app-deps"
}, },
"build": { "build": {
"appId": "com.github.choppu.keycard-desktop", "appId": "com.github.choppu.keycard-certify",
"productName": "Keycard Desktop", "productName": "Keycard Certify",
"files": [ "files": [
"**/*", "**/*",
"!tsconfig.json", "!tsconfig.json",

9
src/card.ts
View File

@ -19,7 +19,6 @@ const path = require('path');
const maxPINRetryCount = 3; const maxPINRetryCount = 3;
const maxPUKRetryCount = 5; const maxPUKRetryCount = 5;
const maxPairing = 5;
const dataHeader = "80e2000082"; const dataHeader = "80e2000082";
export class Card { export class Card {
@ -211,15 +210,15 @@ export class Card {
this.window.send("certificate-creation-success"); this.window.send("certificate-creation-success");
} }
openDestinationDialog() : void { openDestinationDialog(): void {
let options = { let options = {
title: 'Select the destination path to save the processed file', title: 'Select the destination path to save the processed file',
buttonLabel: "Choose", buttonLabel: "Choose",
defaultPath: path.join(__dirname, 'certificates.csv.asc'), defaultPath: path.join(__dirname, 'certificates.csv.asc'),
filters: [ filters: [
{ {
name: 'ASC Files', name: 'ASC Files',
extensions: ['csv.asc'] extensions: ['csv.asc']
} }
] ]
}; };
@ -227,7 +226,7 @@ export class Card {
dialog.showSaveDialog(options).then((path) => { dialog.showSaveDialog(options).then((path) => {
this.window.send("destination-path-selected", path.filePath); this.window.send("destination-path-selected", path.filePath);
}).catch((err) => { }).catch((err) => {
throw(err); throw (err);
}); });
} }

5
src/ident.ts
View File

@ -2,9 +2,8 @@ import { ipcRenderer } from "electron";
import { UI } from "./ui"; import { UI } from "./ui";
export namespace Ident { export namespace Ident {
export function initUI() : void { export function initUI(): void {
let filePath: string | undefined; let filePath: string | undefined;
let destinationPath: string;
let fileLabel = document.getElementById("file-enc-path-label"); let fileLabel = document.getElementById("file-enc-path-label");
let fileField = document.getElementById("encryption-key") as HTMLInputElement; let fileField = document.getElementById("encryption-key") as HTMLInputElement;
let lot = document.getElementById("lot-number") as HTMLInputElement; let lot = document.getElementById("lot-number") as HTMLInputElement;
@ -49,7 +48,7 @@ export namespace Ident {
}); });
} }
export function setDestinationPath(path: string) : void { export function setDestinationPath(path: string): void {
let destinationPathLabel = document.getElementById("show-destination-path"); let destinationPathLabel = document.getElementById("show-destination-path");
destinationPathLabel!.innerHTML = path; destinationPathLabel!.innerHTML = path;
} }

2
src/main.ts
View File

@ -28,7 +28,7 @@ export namespace Main {
mainWindow.webContents.once("dom-ready", () => { mainWindow.webContents.once("dom-ready", () => {
card.start(); card.start();
}); });
mainWindow.webContents.openDevTools(); //mainWindow.webContents.openDevTools();
mainWindow.on('closed', Main.onClose); mainWindow.on('closed', Main.onClose);
} }

2
src/pin.ts
View File

@ -3,7 +3,7 @@ import { Utils } from "./utils";
import { ipcRenderer } from "electron"; import { ipcRenderer } from "electron";
export namespace PIN { export namespace PIN {
export function verifyPIN() : void { export function verifyPIN(): void {
let pin = document.getElementById("verify-pin-inp") as HTMLInputElement; let pin = document.getElementById("verify-pin-inp") as HTMLInputElement;
let submitBtn = document.getElementById("verify-pin-btn") as HTMLInputElement; let submitBtn = document.getElementById("verify-pin-btn") as HTMLInputElement;
let cancelBtn = document.getElementById("verify-pin-cancel"); let cancelBtn = document.getElementById("verify-pin-cancel");

2
src/renderer.ts
View File

@ -67,7 +67,7 @@ ipcRenderer.on("pub-key", (_, key) => {
ipcRenderer.on("pairing-needed", (_, defpair: boolean) => { ipcRenderer.on("pairing-needed", (_, defpair: boolean) => {
UI.addMessageToLog("No pairing found"); UI.addMessageToLog("No pairing found");
if(defaultPass) { if (defaultPass) {
defaultPass = false; defaultPass = false;
ipcRenderer.send("pairing-pass-submitted", "KeycardDefaultPairing"); ipcRenderer.send("pairing-pass-submitted", "KeycardDefaultPairing");
} else { } else {

6
src/session-info.ts
View File

@ -20,7 +20,7 @@ export class SessionInfo {
this.reset(); this.reset();
} }
setApplicationInfo(appInfo: ApplicationInfo) { setApplicationInfo(appInfo: ApplicationInfo) : void {
this.instanceUID = Utils.hx(appInfo.instanceUID); this.instanceUID = Utils.hx(appInfo.instanceUID);
this.appVersion = appInfo.getAppVersionString(); this.appVersion = appInfo.getAppVersionString();
this.pairingSlots = appInfo.freePairingSlots.toString(); this.pairingSlots = appInfo.freePairingSlots.toString();
@ -28,12 +28,12 @@ export class SessionInfo {
this.hasMasterKey = appInfo.hasMasterKey(); this.hasMasterKey = appInfo.hasMasterKey();
} }
setApplicationStatus(appStatus: ApplicationStatus) { setApplicationStatus(appStatus: ApplicationStatus) : void {
this.pinRetry = appStatus.pinRetryCount; this.pinRetry = appStatus.pinRetryCount;
this.pukRetry = appStatus.pukRetryCount; this.pukRetry = appStatus.pukRetryCount;
} }
reset() { reset() : void {
this.cashAddress = ""; this.cashAddress = "";
this.instanceUID = ""; this.instanceUID = "";
this.appVersion = ""; this.appVersion = "";

14
src/ui.ts
View File

@ -12,7 +12,7 @@ export namespace UI {
const btns = document.getElementsByClassName("keycard__cmd-disabled"); const btns = document.getElementsByClassName("keycard__cmd-disabled");
export function saveCardInfo(appInfo: SessionInfo) : void { export function saveCardInfo(appInfo: SessionInfo): void {
cardInfo = appInfo; cardInfo = appInfo;
} }
@ -32,18 +32,18 @@ export namespace UI {
let msg = document.getElementById("no-card-detected-msg"); let msg = document.getElementById("no-card-detected-msg");
} }
export function renderCmdScreenLayout(btn: HTMLElement, layoutPath: string, onLoad: () => void) : void { export function renderCmdScreenLayout(btn: HTMLElement, layoutPath: string, onLoad: () => void): void {
btn.addEventListener("click", (e) => { btn.addEventListener("click", (e) => {
loadFragment(layoutPath, onLoad); loadFragment(layoutPath, onLoad);
e.preventDefault(); e.preventDefault();
}); });
} }
export function renderVerifyPinLayout(layoutPin: string, layoutPuk: string, pinFunc: () => void, pukFunc: () => void) : void { export function renderVerifyPinLayout(layoutPin: string, layoutPuk: string, pinFunc: () => void, pukFunc: () => void): void {
cardInfo.pinRetry > 0 ? loadFragment(layoutPin, pinFunc) : loadFragment(layoutPuk, pukFunc); cardInfo.pinRetry > 0 ? loadFragment(layoutPin, pinFunc) : loadFragment(layoutPuk, pukFunc);
} }
export function loadFragment(filename: string, onLoad: () => void) : void { export function loadFragment(filename: string, onLoad: () => void): void {
let path = `${__dirname}/../layouts/${filename}`; let path = `${__dirname}/../layouts/${filename}`;
layoutContainer!.innerHTML = ""; layoutContainer!.innerHTML = "";
@ -82,14 +82,14 @@ export namespace UI {
}); });
} }
export function renderErrorMess(errMessage: string, messField: HTMLElement) : void { export function renderErrorMess(errMessage: string, messField: HTMLElement): void {
messField.innerHTML = errMessage; messField.innerHTML = errMessage;
setTimeout(() => { setTimeout(() => {
messField.innerHTML = ""; messField.innerHTML = "";
}, 10000); }, 10000);
} }
export function renderNoAppInfo() : void { export function renderNoAppInfo(): void {
let header = document.getElementById("app-info-header"); let header = document.getElementById("app-info-header");
header!.innerHTML = "No card connected"; header!.innerHTML = "No card connected";
header!.classList.remove("keycard__app-info-header"); header!.classList.remove("keycard__app-info-header");