Update styles and small fixes

interface/layout/app.svelte

@@ -32,10 +32,10 @@
 
 	import Landing from "../windows/landing/landing.svelte"
 	import Codes from "../windows/codes/codes.svelte"
-	import Settings from "../windows/settings.svelte"
+	import Settings from "../windows/settings/settings.svelte"
 	import Import from "../windows/import/import.svelte"
 	import Export from "../windows/export/export.svelte"
-	import Confirm from "../windows/confirm.svelte"
+	import Confirm from "../windows/confirm/confirm.svelte"
 	import Navigation from "../components/navigation.svelte"
 	import Edit from "../windows/edit/edit.svelte"
 

interface/libraries/auth.ts

@@ -1,5 +1,4 @@
-import crypto from "crypto"
-import { scrypt } from "scrypt-js"
+import WebCrypto from "easy-web-crypto"
 
 const ALGORITHM = {
 	BLOCK_CIPHER: "aes-256-gcm",
@@ -13,18 +12,17 @@ const ALGORITHM = {
  * Generate salt
  * @return {Buffer} salt
  */
-export const generateSalt = (): Buffer => {
-	return crypto.randomBytes(ALGORITHM.SALT_BYTE_LEN)
+export const generateSalt = () => {
+	return Buffer.from(window.crypto.getRandomValues(new Uint8Array(16)))
 }
 
 /**
  * Generate random key
  * @param {Buffer|string} salt
  * @return {Buffer} key
  */
-export const generateRandomKey = async (salt: Buffer): Promise<Buffer> => {
-	const key = crypto.randomBytes(ALGORITHM.KEY_BYTE_LEN)
-	return Buffer.from(await scrypt(key, salt, 16384, 8, 1, ALGORITHM.KEY_BYTE_LEN))
+export const generateRandomKey = async (salt: Buffer) => {
+	return Buffer.from(window.crypto.getRandomValues(new Uint8Array(32)))
 }
 
 /**
@@ -34,7 +32,6 @@ export const generateRandomKey = async (salt: Buffer): Promise<Buffer> => {
  * @return {Buffer} masterKey
  */
 export const generateMasterKey = async (password: Buffer, key: Buffer) => {
-	// return Buffer.from(await scrypt(password, key, 16384, 8, 1, ALGORITHM.KEY_BYTE_LEN))
 	const keyMaterial = await window.crypto.subtle.importKey("raw", password, "PBKDF2", false, ["deriveBits", "deriveKey"])
 
 	return window.crypto.subtle.deriveKey(
@@ -57,14 +54,14 @@ export const generateMasterKey = async (password: Buffer, key: Buffer) => {
  * @param {Buffer} masterKey
  * @return {Buffer} encrypted text
  */
-export const encrypt = async (text: string, masterKey) => {
+export const encrypt = async (text: string, masterKey: CryptoKey) => {
 	const iv = window.crypto.getRandomValues(new Uint8Array(12))
-	let encoder = new TextEncoder()
+	const encoder = new TextEncoder()
 
 	const encrypted = await window.crypto.subtle.encrypt(
 		{
 			name: "AES-GCM",
-			iv: iv,
+			iv,
 		},
 		masterKey,
 		encoder.encode(text)
@@ -82,22 +79,22 @@ export const encrypt = async (text: string, masterKey) => {
  * @param {Buffer} masterKey
  * @returns {Buffer} decrypted text
  */
-export const decrypt = async (text: string, masterKey) => {
-	let value = text.split("@")
+export const decrypt = async (text: string, masterKey: CryptoKey) => {
+	const value = text.split("@")
 
-	let ciphertext = Buffer.from(value[0], "base64")
-	let iv = Buffer.from(value[1], "base64")
+	const ciphertext = Buffer.from(value[0], "base64")
+	const iv = Buffer.from(value[1], "base64")
 
-	let decrypted = await window.crypto.subtle.decrypt(
+	const decrypted = await window.crypto.subtle.decrypt(
 		{
 			name: "AES-GCM",
-			iv: iv,
+			iv,
 		},
 		masterKey,
 		ciphertext
 	)
 
-	let dec = new TextDecoder()
+	const dec = new TextDecoder()
 
 	return dec.decode(decrypted)
 }
@@ -107,6 +104,6 @@ export const decrypt = async (text: string, masterKey) => {
  * @param {string|Buffer} text
  * @returns {string} sha512 text
  */
-export const hash = (text: string | Buffer): string => {
+/* export const hash = (text: string | Buffer): string => {
 	return crypto.createHash("sha512").update(text).digest("base64")
-}
+} */

interface/libraries/navigate.ts

@@ -1,5 +1,20 @@
+import { shell } from "@tauri-apps/api"
 import { router } from "tinro"
 
+/**
+ * Go to the specified link
+ * @param link
+ * @example navigate("codes")
+ */
 export const navigate = (link: string) => {
 	router.goto(link)
 }
+
+/**
+ * Open a specified link in the default program
+ * @param link
+ * @example open("https://github.com/levminer/authme")
+ */
+export const open = (link: string) => {
+	shell.open(link)
+}

interface/styles/index.css

@@ -34,6 +34,14 @@
 	.code {
 		@apply transparent-800 mb-10 flex w-full flex-col rounded-2xl p-3;
 	}
+
+	.dialog {
+		@apply mx-auto rounded-2xl bg-gray-700 p-10 text-white;
+	}
+
+	.edit {
+		@apply transparent-800 mb-5 flex w-full flex-row items-center justify-between rounded-xl p-5 text-left;
+	}
 }
 
 /* body */
@@ -43,9 +51,10 @@ body {
 	display: flex;
 	flex-direction: column;
 	min-height: 100vh;
-	background: url("../../images/mica.png");
+	/* background: url("../../images/mica.png"); */
 	line-height: normal;
 	font-family: system-ui, Arial;
+	user-select: none;
 }
 
 /* headings */
@@ -76,6 +85,7 @@ h5 {
 	color: #d3cfcf;
 }
 
+/* backdrops */
 .transparent-900 {
 	background-color: hsla(0, 0%, 100%, 5.12%);
 }
@@ -106,6 +116,11 @@ h5 {
 	background: gray;
 }
 
+::-ms-reveal {
+	display: none;
+}
+
+/* progress bar */
 .progress {
 	position: relative;
 	width: 95%;
@@ -121,3 +136,45 @@ h5 {
 	background: white;
 	transition: all 0.2s;
 }
+
+/* scrollbar */
+::-webkit-scrollbar-track {
+	background-color: #000000;
+}
+
+::-webkit-scrollbar {
+	width: 12px;
+	background-color: #f5f5f5;
+}
+
+::-webkit-scrollbar-thumb {
+	background-color: rgb(40, 40, 40);
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background-color: rgb(50, 50, 50);
+}
+
+::-webkit-scrollbar-corner {
+	background-color: #000000;
+}
+
+/* dialog */
+.dialog::backdrop {
+	background: rgb(0 0 0 / 0.9);
+}
+
+dialog[open] {
+	animation: fadeEffect 0.5s;
+}
+
+/* input */
+.input::placeholder {
+	color: gray;
+	font-weight: normal;
+}
+
+.input:read-only {
+	background-color: hsla(0, 0%, 100%, 5.12%);
+	cursor: default;
+}

interface/windows/codes/index.ts

@@ -204,8 +204,6 @@ export const chooseImportFile = async () => {
 }
 
 const saveCodes = async () => {
-	console.log("codes saved")
-
 	const settings = getSettings()
 
 	const password = Buffer.from(settings.security.password, "base64")

interface/windows/confirm.svelte → interface/windows/confirm/confirm.svelte

@@ -24,7 +24,7 @@
 				</div>
 			</div>
 
-			<button class="button mx-auto mt-10">
+			<button class="button mx-auto mt-10" on:click={confirmPassword}>
 				<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 					<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
 				</svg>
@@ -52,21 +52,6 @@
 </div>
 
 <script>
-	import Details from "../components/details.svelte"
-
-	const showPassword = () => {
-		const inputState = document.querySelector(".passwordInput").getAttribute("type")
-
-		if (inputState === "password") {
-			document.querySelector(".showPassword").style.display = "none"
-			document.querySelector(".hidePassword").style.display = "block"
-
-			document.querySelector(".passwordInput").setAttribute("type", "text")
-		} else {
-			document.querySelector(".showPassword").style.display = "block"
-			document.querySelector(".hidePassword").style.display = "none"
-
-			document.querySelector(".passwordInput").setAttribute("type", "password")
-		}
-	}
+	import Details from "../../components/details.svelte"
+	import { confirmPassword, showPassword } from "./index"
 </script>

interface/windows/export/index.ts

@@ -27,7 +27,7 @@ export const exportCodes = async () => {
 		codesArray = textConverter(decrypted, 0)
 		codesText = decrypted
 	} catch (error) {
-		dialog.message("No save file found. \n\nGo back to the codes page and save your codes!", { type: "error" })
+		return dialog.message("No save file found. \n\nGo to the codes or the import page and import your codes!", { type: "error" })
 	}
 }