ESLint config

.eslintrc.json

@@ -13,6 +13,16 @@
     "plugin:prettier/recommended"
   ],
   "overrides": [
+    {
+      "files": ["**/*.cjs"],
+      "extends": [
+        "eslint:recommended",
+        "plugin:prettier/recommended"
+      ],
+      "rules": {
+        "prettier/prettier": "warn"
+      }
+    },
     {
       "files": ["**/*.ts"],
       "extends": [

package.json

@@ -35,6 +35,7 @@
 		"@smui/button": "^7.0.0-beta.14",
 		"@smui/circular-progress": "^7.0.0-beta.14",
 		"@smui/drawer": "^7.0.0-beta.14",
+		"@smui/fab": "^7.0.0-beta.14",
 		"@smui/icon-button": "^7.0.0-beta.14",
 		"@smui/list": "^7.0.0-beta.14",
 		"@smui/menu": "^7.0.0-beta.14",

src/electron.cjs

@@ -4,9 +4,9 @@ const serve = require('electron-serve');
 const path = require('path');
 
 try {
-	require('electron-reloader')(module);
+  require('electron-reloader')(module);
 } catch (e) {
-	console.error(e);
+  console.error(e);
 }
 
 const serveURL = serve({ directory: '.' });
@@ -15,70 +15,70 @@ const dev = !app.isPackaged;
 let mainWindow;
 
 function createWindow() {
-	let windowState = windowStateManager({
-		defaultWidth: 800,
-		defaultHeight: 600,
-	});
+  let windowState = windowStateManager({
+    defaultWidth: 800,
+    defaultHeight: 600,
+  });
 
-	const mainWindow = new BrowserWindow({
-		backgroundColor: 'whitesmoke',
-		titleBarStyle: 'default',
-		autoHideMenuBar: true,
-		webPreferences: {
-			enableRemoteModule: true,
-			contextIsolation: false,
-			nodeIntegration: true,
-			nodeIntegrationInWorker: true,
-			spellcheck: false,
-			devTools: dev,
-			preload: path.join(__dirname, 'preload.cjs'),
-		},
-		x: windowState.x,
-		y: windowState.y,
-		width: windowState.width,
-		height: windowState.height,
+  const mainWindow = new BrowserWindow({
+    backgroundColor: 'whitesmoke',
+    titleBarStyle: 'default',
+    autoHideMenuBar: true,
+    webPreferences: {
+      enableRemoteModule: true,
+      contextIsolation: false,
+      nodeIntegration: true,
+      nodeIntegrationInWorker: true,
+      spellcheck: false,
+      devTools: dev,
+      preload: path.join(__dirname, 'preload.cjs'),
+    },
+    x: windowState.x,
+    y: windowState.y,
+    width: windowState.width,
+    height: windowState.height,
     icon: path.join(__dirname, '../static/favicon.png'),
-	});
+  });
 
-	windowState.manage(mainWindow);
+  windowState.manage(mainWindow);
 
-	mainWindow.once('ready-to-show', () => {
-		mainWindow.show();
-		mainWindow.focus();
-	});
+  mainWindow.once('ready-to-show', () => {
+    mainWindow.show();
+    mainWindow.focus();
+  });
 
-	mainWindow.on('close', () => {
-		windowState.saveState(mainWindow);
-	});
+  mainWindow.on('close', () => {
+    windowState.saveState(mainWindow);
+  });
 
-	return mainWindow;
+  return mainWindow;
 }
 
 function loadVite(port) {
-	mainWindow.loadURL(`http://localhost:${port}`).catch((e) => {
-		console.log('Error loading URL, retrying', e);
-		setTimeout(() => {
-			loadVite(port);
-		}, 200);
-	});
+  mainWindow.loadURL(`http://localhost:${port}`).catch(e => {
+    console.log('Error loading URL, retrying', e);
+    setTimeout(() => {
+      loadVite(port);
+    }, 200);
+  });
 }
 
 function createMainWindow() {
-	mainWindow = createWindow();
-	mainWindow.once('close', () => {
-		mainWindow = null;
-	});
+  mainWindow = createWindow();
+  mainWindow.once('close', () => {
+    mainWindow = null;
+  });
 
-	if (dev) loadVite(port);
-	else serveURL(mainWindow);
+  if (dev) loadVite(port);
+  else serveURL(mainWindow);
 }
 
 app.once('ready', createMainWindow);
 app.on('activate', () => {
-	if (!mainWindow) {
-		createMainWindow();
-	}
+  if (!mainWindow) {
+    createMainWindow();
+  }
 });
 app.on('window-all-closed', () => {
-	if (process.platform !== 'darwin') app.quit();
+  if (process.platform !== 'darwin') app.quit();
 });

src/lib/electron-rpc/electron-rpc_main.cjs

@@ -1,8 +1,8 @@
 const { ipcMain } = require('electron');
 
-module.exports.rpcHandle = function(mainWindowProvider, name, handler) {
+module.exports.rpcHandle = function (mainWindowProvider, name, handler) {
   ipcMain.on(name, async (_, request) => {
     const result = await handler(request.arg);
     mainWindowProvider().webContents.send(`${name}:done`, { requestId: request.requestId, result });
   });
-}
+};

src/lib/totp-client/serial-port-async.ts

@@ -3,10 +3,10 @@ import delay from 'delay';
 import { SmartBuffer } from 'smart-buffer';
 import { tryDelay } from './try-delay';
 
-export interface ReadUntilOptions {
+export type ReadUntilOptions = {
   timeout: number;
   signal: AbortSignal;
-}
+};
 
 export class SerialPortAsync extends SerialPort {
   flushAsync() {

src/lib/totp-client/totp-client.ts

@@ -41,14 +41,14 @@ async function waitForFlipperZeroDevice(signal?: AbortSignal) {
   return flipperZeroDevice;
 }
 
-interface ExecuteCommandOptions {
+type ExecuteCommandOptions = {
   skipFirstLine: boolean;
   trimCommandEndSignature: boolean;
   trimEmptyLines: boolean;
   trimTerminalControlCommands: boolean;
   commandEndSign: string | RegExp;
   signal: AbortSignal | undefined;
-}
+};
 
 const ExecuteCommandDefaultOptions: ExecuteCommandOptions = {
   skipFirstLine: true,

src/preload.cjs

@@ -1 +1 @@
-console.log('Preload');
+console.log('Preload');

src/routes/add/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-  import Accordion, { Content, Header, Panel } from '@smui-extra/accordion';
+  import Fab, { Icon, Label } from '@smui/fab';
   import { Screenshots } from 'node-screenshots';
-  import Button from '@smui/button';
   import QrScanner from 'qr-scanner';
   import { onDestroy } from 'svelte';
 
@@ -34,20 +33,22 @@
   onDestroy(() => abortController.abort());
 </script>
 
-<Accordion>
-  <Panel open={true}>
-    <Header>Scan QR code</Header>
-    <Content>
-      <Button on:click={async () => await tryScanQrCode()}>Scan QR code</Button>
-      {#if scannedData}
-        <p>{scannedData}</p>
-      {/if}
-    </Content>
-  </Panel>
-  <Panel>
-    <Header>Enter details manually</Header>
-    <Content>TBD</Content>
-  </Panel>
-</Accordion>
+<div class="container">
+  <div class="scan-qr-container">
+    <Fab color="primary" on:click={async () => await tryScanQrCode()} extended>
+      <Icon class="material-icons">qr_code_scanner</Icon>
+      <Label>Scan QR Code</Label>
+    </Fab>
+  </div>
+  <form class="token-info"></form>
+</div>
 
-<style></style>
+<style lang="scss">
+  .container {
+    .scan-qr-container {
+      margin: 20px auto;
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>

src/stores/totp-shared-client.ts

@@ -1,4 +1,4 @@
-import { TotpAppClient } from "$lib/totp-client";
-import { readable } from "svelte/store";
+import { TotpAppClient } from '$lib/totp-client';
+import { readable } from 'svelte/store';
 
 export const SharedTotpAppClient = readable(new TotpAppClient());

src/stores/use-shared-store.ts

@@ -1,24 +1,18 @@
-import { getContext, hasContext, setContext } from "svelte";
-import { readable, writable } from "svelte/store";
+import { getContext, hasContext, setContext } from 'svelte';
+import { readable, writable } from 'svelte/store';
 
 // context for any type of store
-export const useSharedStore = <T, A>(
-    name: string,
-    fn: (value?: A) => T,
-    defaultValue?: A,
-) => {
-    if (hasContext(name)) {
-        return getContext<T>(name);
-    }
-    const _value = fn(defaultValue);
-    setContext(name, _value);
-    return _value;
+export const useSharedStore = <T, A>(name: string, fn: (value?: A) => T, defaultValue?: A) => {
+  if (hasContext(name)) {
+    return getContext<T>(name);
+  }
+  const _value = fn(defaultValue);
+  setContext(name, _value);
+  return _value;
 };
 
 // writable store context
-export const useWritable = <T>(name: string, value: T) =>
-    useSharedStore(name, writable, value);
+export const useWritable = <T>(name: string, value: T) => useSharedStore(name, writable, value);
 
 // readable store context
-export const useReadable = <T>(name: string, value: T) =>
-    useSharedStore(name, readable, value);
+export const useReadable = <T>(name: string, value: T) => useSharedStore(name, readable, value);

tsconfig.json

@@ -33,5 +33,5 @@
     "resolveJsonModule": true,
     "noImplicitAny": false
 	},
-	"include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.svelte", "src/electron.js"]
+	"include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.svelte"]
 }

yarn.lock

@@ -417,6 +417,25 @@
     "@material/theme" "^14.0.0"
     tslib "^2.1.0"
 
+"@material/fab@^14.0.0":
+  version "14.0.0"
+  resolved "https://registry.yarnpkg.com/@material/fab/-/fab-14.0.0.tgz#9561178ff593157ad07a0841c6e213a06d6fe6ce"
+  integrity sha512-s4rrw2TLU8ITKopHSTEHuJEFsGEZsb+ijwW16pQt0h9GArxPGaALT+CCJIPjf75D3wPEEMW0vnLj7oMoII2VFg==
+  dependencies:
+    "@material/animation" "^14.0.0"
+    "@material/dom" "^14.0.0"
+    "@material/elevation" "^14.0.0"
+    "@material/feature-targeting" "^14.0.0"
+    "@material/focus-ring" "^14.0.0"
+    "@material/ripple" "^14.0.0"
+    "@material/rtl" "^14.0.0"
+    "@material/shape" "^14.0.0"
+    "@material/theme" "^14.0.0"
+    "@material/tokens" "^14.0.0"
+    "@material/touch-target" "^14.0.0"
+    "@material/typography" "^14.0.0"
+    tslib "^2.1.0"
+
 "@material/feature-targeting@^14.0.0":
   version "14.0.0"
   resolved "https://registry.yarnpkg.com/@material/feature-targeting/-/feature-targeting-14.0.0.tgz#a6a878ae2be1f88d31b0bb95f05dbf5d486c4b3e"
@@ -780,6 +799,17 @@
     "@smui/common" "^7.0.0-beta.14"
     svelte2tsx "^0.6.15"
 
+"@smui/fab@^7.0.0-beta.14":
+  version "7.0.0-beta.14"
+  resolved "https://registry.yarnpkg.com/@smui/fab/-/fab-7.0.0-beta.14.tgz#8445583383da92a8876e915b4e873937bb1c6fde"
+  integrity sha512-ud+rkA1GyyV05idRI2BqQI2RIx0CgklQLfrunTmUB5HKg5PIkOWxOOBEUjNSOwKCBpJRkizM12xVz8XXoDJcJA==
+  dependencies:
+    "@material/fab" "^14.0.0"
+    "@material/feature-targeting" "^14.0.0"
+    "@smui/common" "^7.0.0-beta.14"
+    "@smui/ripple" "^7.0.0-beta.14"
+    svelte2tsx "^0.6.15"
+
 "@smui/icon-button@^7.0.0-beta.14":
   version "7.0.0-beta.14"
   resolved "https://registry.yarnpkg.com/@smui/icon-button/-/icon-button-7.0.0-beta.14.tgz#142fbb7602dced1ee25bb296f3c54860a5298e5d"