authme 1.3.0

README.md

@@ -1,28 +1,16 @@
 # Authme
 
--   A simple 2FA app for desktop built with Electron and Node.js.
+-   A simple 2FA cross platform app for desktop built with Electron and Node.js.
 
 # How to use
 
--   Check out `extract/README.md`
+-   For technical people: Check out `extract/README.md`
+-   For simple people: Instructions in the app
 
-# Build
+# Development
 
-`electron-packager . Authme --overwrite --platform=all --arch=x64 --icon=img/icon.icns --out=build`
-
-# NPM Pacages used
-
-### Dev
-
--   electron
--   electron-packager
-
-### Main
-
--   bcrypt
--   create-desktop-shortcuts
--   cryptr
--   speakeasy
+-   Start `npm run start`
+-   Build `npm run build`
 
 # License
 

app/application/index.html

@@ -23,6 +23,16 @@ <h2 id="title">Here are your 2FA codes:</h2>
 			<button type="button" class="button1" class="input" id="input" onclick="document.getElementById('file').click()">Choose a file</button>
 			<br />
 			<button class="button1" id="save" onclick="save()">Save config</button>
+			<br />
+			<input
+				name="search"
+				spellcheck="false"
+				id="search"
+				class="input2"
+				onkeyup="search()"
+				onkeydown="search()"
+				placeholder="Search for names..."
+			/>
 			<!-- grid -->
 		</div>
 	</body>

app/application/src/css/index.css

@@ -1,6 +1,7 @@
 body {
 	background: rgb(0, 0, 0);
 	background: linear-gradient(90deg, rgba(0, 0, 0, 1) 30%, rgba(42, 36, 36, 1) 100%);
+	overflow-y: scroll;
 }
 
 .center {
@@ -125,31 +126,44 @@ body {
 	font-size: 1.3rem;
 }
 
-#grid0,
-#grid1,
-#grid2,
-#grid3,
-#grid4,
-#grid5,
-#grid6,
-#grid7,
-#grid8,
-#grid9,
-#grid10,
-#grid11,
-#grid12,
-#grid13,
-#grid14,
-#grid15,
-#grid16,
-#grid17,
-#grid18,
-#grid19 {
+.input2 {
+	width: 300px;
+	margin: 0 auto;
+	color: rgb(0, 0, 0);
+	background-color: white;
+	border-color: white;
+	font-size: 1rem;
+	padding: 15px 30px;
+	border-radius: 30px;
+	cursor: text;
+	text-align: center;
+	transition: 0.2s ease-in;
+	margin-bottom: 50px;
 	display: none;
 }
 
+.input2:hover {
+	background-color: var(--df_gray);
+	color: white;
+	border-color: white;
+}
+
+.input2::placeholder {
+	color: black;
+}
+
 #save {
 	display: unset;
 	visibility: hidden;
 	margin-bottom: 20px;
 }
+
+input:focus::placeholder {
+	transition: 0.2s ease-in;
+	color: transparent;
+}
+
+input:hover::placeholder {
+	transition: 0.2s ease-in;
+	color: transparent;
+}

app/application/src/js/index.js

@@ -47,6 +47,7 @@ let separation = () => {
 
 let go = () => {
 	document.querySelector("#title").textContent = "Here are your 2FA codes"
+	document.querySelector("#search").style.display = "grid"
 
 	let generate = () => {
 		// counter
@@ -133,5 +134,47 @@ let go = () => {
 	} else {
 		document.querySelector("#input").style.display = "none"
 		document.querySelector("#save").style.display = "none"
+		document.querySelector("#search").style.display = "grid"
+	}
+}
+
+//? search
+let search = () => {
+	const querry = []
+	let search = document.querySelector("#search")
+	let input = search.value.toLowerCase()
+	let i = 0
+
+	// restart
+	for (let i = 0; i < names.length; i++) {
+		let div = document.querySelector(`#grid${[i]}`)
+		div.style.display = "grid"
+	}
+
+	// get names 
+	for (let i = 0; i < names.length; i++) {
+		let name = document.querySelector(`#name${[i]}`)
+
+		querry.push(name.textContent.toLowerCase().trim())
+	}
+
+	// search
+	console.log(input)
+	querry.forEach((e) => {
+		if (e.startsWith(input)) {
+			console.log("found")
+		} else {
+			let div = document.querySelector(`#grid${[i]}`)
+			div.style.display = "none"
+		}
+		i++
+	})
+
+	// if search empty
+	if (search.value == "") {
+		for (let i = 0; i < names.length; i++) {
+			let div = document.querySelector(`#grid${[i]}`)
+			div.style.display = "grid"
+		}
 	}
 }

app/application/src/js/save.js

@@ -11,7 +11,8 @@ fs.readFile(path.join(file_path, "hash.md"), "utf-8", (err, content) => {
 	if (err) {
 		console.log("The hash.md fle dont exist!")
 
-		document.querySelector("#title").textContent = "Please choose your exported file"
+		document.querySelector("#title").textContent =
+			"Please choose your exported file, if you don't have one: Go to the top menu > Advanced > Import"
 	} else {
 		prev = true
 

app/export/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<title>Authme</title>
+		<!-- js -->
+		<script defer src="./src/js/index.js"></script>
+		<script defer src="./src/js/convert.js"></script>
+		<!-- css -->
+		<link rel="stylesheet" href="../.././src/dragonfly@1.1.0.css" />
+		<link rel="stylesheet" href="./src/css/index.css" />
+		<!-- favicon -->
+		<link rel="shortcut icon" href="../../img/icon.ico" type="image/x-icon" />
+	</head>
+	<body>
+		<div class="center">
+			<h1>Authme</h1>
+			<h2>Export</h2>
+			<p class="text3">You can export everything form your saved config.</p>
+			<button class="button1" onclick="hide()">Close</button>
+			<h3>Export</h3>
+			<p class="text3">If you saved your config you can export the secrects and the QR codes.</p>
+			<button class="button1" id="but0" onclick="exp()">Export</button>
+			<br />
+			<textarea readonly="readonly" id="result" cols="30" rows="10"></textarea>
+		</div>
+	</body>
+</html>

app/export/src/css/index.css

@@ -0,0 +1,90 @@
+body {
+	background: rgb(0, 0, 0);
+	background: linear-gradient(90deg, rgba(0, 0, 0, 1) 30%, rgba(42, 36, 36, 1) 100%);
+}
+
+.center {
+	top: -50px;
+	width: 1000px;
+	height: auto;
+	padding-bottom: 50px;
+}
+
+.button1 {
+	color: black;
+	background-color: white;
+	border-color: white;
+}
+
+.button1:hover {
+	color: white;
+	border-color: white;
+}
+
+.input1 {
+	color: black;
+	background-color: white;
+	border-color: white;
+	width: 250px;
+}
+
+.input1:hover {
+	color: white;
+	border-color: white;
+}
+
+#password_input2 {
+	position: relative;
+	top: 20px;
+}
+
+#password_label2 {
+	position: relative;
+	top: 20px;
+}
+
+#button1 {
+	position: relative;
+	top: 45px;
+}
+
+.link1 {
+	font-size: 1rem !important;
+	position: relative;
+	top: 50px;
+	color: white !important;
+}
+
+#result {
+	position: relative;
+	top: 50px;
+	margin: 0 auto;
+	border: 1px solid rgb(0, 0, 0);
+	padding: 1rem;
+	border-radius: 28px;
+	width: 550px;
+	height: 250px;
+	transition: 0.3s;
+	background-color: rgb(0, 0, 0);
+	color: rgb(255, 255, 255);
+	font-family: Arial, Helvetica, sans-serif;
+	font-size: 20px;
+	margin-bottom: 100px;
+	display: none;
+}
+
+#result::-webkit-scrollbar {
+	width: 0px;
+	background: transparent; /* make scrollbar transparent */
+}
+
+.qr {
+	padding-top: 250px;
+	background-color: black;
+	margin-top: 50px;
+	border-radius: 30px;
+	margin: 0 auto;
+	margin-top: 20px;
+	width: 600px;
+	height: 500px;
+}

app/export/src/js/convert.js

@@ -0,0 +1,61 @@
+let data = []
+let save_text
+
+const handlefiles = (files) => {
+	// read file
+	if (window.FileReader) {
+		getastext(files[0])
+		console.log("File uploaded successfully!")
+		/* state = 1 */
+	} else {
+		console.log("Can't upload file!")
+	}
+}
+
+const getastext = (fileToRead) => {
+	const reader = new FileReader()
+	reader.onload = loadhandler
+	reader.onerror = errorhandler
+	reader.readAsText(fileToRead)
+}
+
+const loadhandler = (event) => {
+	const text = event.target.result
+	console.log(text)
+	save_text = text
+	console.log(save_text)
+	processdata(text)
+}
+
+const errorhandler = (evt) => {
+	if (evt.target.error.name == "NotReadableError") {
+		alert("Failed to upload the file! You uploaded a corrupted or not supported file!")
+	}
+}
+
+const processdata = (text) => {
+	// remove double qoutes
+	const pre_data1 = text.replace(/"/g, "")
+
+	// new line
+	const pre_data2 = pre_data1.replace(/,/g, "\n")
+
+	// make the array
+	const pre_data3 = pre_data2.split(/\n/)
+	while (pre_data3.length) {
+		data.push(pre_data3.shift())
+	}
+
+	// remove first blank
+	data.splice(0, 1)
+
+	data = data.filter((_, i) => {
+		return (i + 1) % 5
+	})
+
+	console.log("Data:")
+	console.log(data.length)
+	console.log(data)
+
+	separation()
+}