Fix layouts #207

Levminer · May 4, 2022 · 77caecd · 77caecd
1 parent e5d36bf
commit 77caecd
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 15 deletions.
diff --git a/app/confirm/index.html b/app/confirm/index.html
@@ -5,7 +5,7 @@
 		<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'" />
 		<meta charset="UTF-8" />
 		<!-- js -->
-		<script defer src="./src/js/index.js"></script>
+		<script defer src="./index.js"></script>
 		<!-- css -->
 		<link rel="stylesheet" href="../.././styles/global.css" />
 		<link rel="stylesheet" href="../../styles/tailwind.css" />
@@ -44,14 +44,15 @@ <h4 data-loc id="text">Please enter your password to continue!</h4>
 							<span data-loc>Confirm</span>
 						</button>
 					</div>
-					<div class="mx-auto pb-3">
-						<details class="details mb-5 transform duration-200 ease-in" onclick="showMoreOptions()">
-							<summary data-loc class="summary mb-3 cursor-pointer font-bold">More options</summary>
+					<div class="mx-auto mb-6">
+						<details class="details transform duration-200 ease-in" onclick="showMoreOptions()">
+							<summary data-loc class="summary cursor-pointer font-bold">More options</summary>
 						</details>
 					</div>
 				</div>
 			</div>
-			<div id="more_options" class="animation invisible mx-auto mt-20 mb-20 hidden w-2/3 rounded-2xl bg-gray-800 pb-10 pt-1">
+
+			<div class="moreOptions animation invisible mx-auto mt-20 mb-20 hidden w-2/3 rounded-2xl bg-gray-800 pb-10 pt-1">
 				<div>
 					<h3 data-loc>Window capture</h3>
 					<h4 data-loc>Allows screenshots and screen capture. You can record or screenshot the app until you restart Authme.</h4>

diff --git a/app/confirm/src/js/index.js → app/confirm/index.js b/app/confirm/src/js/index.js → app/confirm/index.js
@@ -164,13 +164,13 @@ const unhashPassword = async () => {
 		text.style.color = "#28A443"
 		text.textContent = lang.landing_text.passwords_match
 
-		setInterval(() => {
+		setTimeout(() => {
 			password_input.fill(0)
 
 			ipc.send("toApplicationFromConfirm")
 
 			location.reload()
-		}, 1000)
+		}, 100)
 	} else {
 		logger.warn("Passwords dont match!")
 
@@ -187,7 +187,7 @@ const unhashPassword = async () => {
 let more_options_shown = false
 
 const showMoreOptions = () => {
-	const more_options = document.querySelector("#more_options")
+	const more_options = document.querySelector(".moreOptions")
 
 	if (more_options_shown === false) {
 		more_options.style.visibility = "visible"

diff --git a/app/landing/index.html b/app/landing/index.html
@@ -28,7 +28,7 @@ <h1>Authme</h1>
 				<h3 data-loc class="pt-5">Welcome to Authme!</h3>
 				<h4 data-loc>Choose how you want to use Authme. Your 2FA codes are encrypted either way.</h4>
 
-				<div class="flex flex-row justify-center pb-5">
+				<div class="flex flex-row justify-center pb-3">
 					<div class="my-3 ml-3 mr-1.5 flex w-1/2 flex-wrap items-center justify-center rounded-2xl bg-gray-700 p-4">
 						<h4 data-loc class="m-0 mb-3">Require password</h4>
 						<h5 data-loc class="m-0 mb-3">You have to type in your password every time you launch Authme.</h5>
@@ -52,10 +52,18 @@ <h5 data-loc class="m-0 mb-3">If you don't want to type in your password every t
 						</button>
 					</div>
 				</div>
+
+				<div class="flex items-center justify-center">
+					<div class="mx-auto pb-6">
+						<details class="details transform duration-200 ease-in" onclick="showMoreOptions()">
+							<summary data-loc class="summary cursor-pointer font-bold">More options</summary>
+						</details>
+					</div>
+				</div>
 			</div>
 
 			<div class="createPassword mx-auto mb-16 hidden w-2/3 rounded-2xl bg-gray-800">
-				<h3 data-loc class="pt-3">Create password</h3>
+				<h3 data-loc class="pt-5">Create password</h3>
 				<h4 data-loc id="text">Create a strong password to encrypt your 2FA codes!</h4>
 				<div class="flex select-none flex-row flex-wrap justify-center gap-3 pb-5">
 					<div class="flex flex-col">
@@ -81,13 +89,27 @@ <h4 data-loc id="text">Create a strong password to encrypt your 2FA codes!</h4>
 						</svg>
 					</div>
 				</div>
-				<button class="buttoni mb-5" onclick="comparePasswords()">
+				<button class="buttoni mb-8" onclick="comparePasswords()">
 					<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>
 					<span data-loc>Confirm</span>
 				</button>
 			</div>
+
+			<div class="moreOptions animation invisible mx-auto mt-20 mb-20 hidden w-2/3 rounded-2xl bg-gray-800 pb-10 pt-1">
+				<div>
+					<h3 data-loc>Window capture</h3>
+					<h4 data-loc>Allows screenshots and screen capture. You can record or screenshot the app until you restart Authme.</h4>
+					<div class="mx-auto flex h-[68px] w-72 items-center justify-center rounded-full bg-white">
+						<div class="relative mr-2 inline-block w-10 select-none rounded-full border-2 border-gray-900 bg-gray-900 align-middle">
+							<input onclick="toggleWindowCapture()" id="tgl0" type="checkbox" class="toggle absolute right-5 top-1 block h-4 w-4 cursor-pointer appearance-none rounded-full bg-black outline-none duration-200 ease-in checked:bg-white focus:outline-none" />
+							<label for="tgl0" class="toggle-bg block h-6 cursor-pointer overflow-hidden rounded-full bg-white"></label>
+						</div>
+						<span id="tgt0" class="text-xl text-black">Off</span>
+					</div>
+				</div>
+			</div>
 		</div>
 	</body>
 </html>
diff --git a/app/landing/index.js b/app/landing/index.js
@@ -157,8 +157,6 @@ const hashPasswords = async () => {
 		password_input.fill(0)
 
 		ipc.send("toConfirm")
-
-		location.reload()
 	}, 100)
 }
 
@@ -191,12 +189,11 @@ const noPassword = () => {
 		password.fill(0)
 
 		ipc.send("toApplicationFromLanding")
-
-		location.reload()
 	}, 100)
 }
 
 const requirePassword = () => {
+	document.querySelector(".moreOptions").style.display = "none"
 	document.querySelector(".chooseLogin").style.display = "none"
 	document.querySelector(".createPassword").style.display = "block"
 }
@@ -231,3 +228,42 @@ document.querySelector("#show_pass_11").addEventListener("click", () => {
 	document.querySelector("#show_pass_1").style.display = "flex"
 	document.querySelector("#show_pass_11").style.display = "none"
 })
+
+/**
+ * Show more options div
+ */
+let more_options_shown = false
+
+const showMoreOptions = () => {
+	const more_options = document.querySelector(".moreOptions")
+
+	if (more_options_shown === false) {
+		more_options.style.visibility = "visible"
+
+		setTimeout(() => {
+			more_options.style.display = "block"
+		}, 10)
+
+		more_options_shown = true
+	} else {
+		more_options.style.display = "none"
+
+		more_options_shown = false
+	}
+}
+
+/**
+ * Toggles window capture state
+ */
+const toggleWindowCapture = () => {
+	const tgl0 = document.querySelector("#tgl0").checked
+	const tgt0 = document.querySelector("#tgt0")
+
+	if (tgl0 === false) {
+		ipc.send("disableWindowCapture")
+		tgt0.textContent = "Off"
+	} else {
+		tgt0.textContent = "On"
+		ipc.send("enableWindowCapture")
+	}
+}