Import from screen capture #161 and tooltips

Levminer · Apr 9, 2022 · af25d5a · af25d5a
1 parent 0c0439b
commit af25d5a
Show file tree

Hide file tree

Showing 12 changed files with 59 additions and 106 deletions.
diff --git a/app/import/index.html b/app/import/index.html
@@ -9,7 +9,6 @@
 		<!-- css -->
 		<link rel="stylesheet" href="../.././styles/global.css" />
 		<link rel="stylesheet" href="../../styles/tailwind.css" />
-		<link rel="stylesheet" href="./src/css/index.css" />
 	</head>
 	<body>
 		<!-- build number -->
@@ -81,7 +80,19 @@ <h4 data-loc>You can import your 2FA codes many way Choose the most convenient w
 							</svg>
 							<span data-loc>Choose images</span>
 						</button>
-						<h5 data-loc class="m-0 pt-4">Choose images that contain a 2FA QR code.</h5>
+						<div class="flex flex-row gap-3">
+							<h5 data-loc class="m-0 pt-4">Choose images that contain a 2FA QR code.</h5>
+							<div class="tooltipContainer">
+								<span class="tooltip -mt-16">
+									Takeing a screenshot: <br />
+									Windows: Windows + Shift + S <br />
+									macOS: Shift + Command + 3
+								</span>
+								<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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+								</svg>
+							</div>
+						</div>
 					</div>
 					<div class="useWebcam m-1">
 						<button class="buttoni" onclick="useWebcam()">
@@ -93,9 +104,17 @@ <h5 data-loc class="m-0 pt-4">Choose images that contain a 2FA QR code.</h5>
 							</svg>
 							<span data-loc>Use webcam</span>
 						</button>
-						<h5 data-loc class="m-0 pt-4">Use your webcam to scan 2FA QR codes.</h5>
+						<div class="flex flex-row gap-3">
+							<h5 data-loc class="m-0 pt-4">Use your webcam to scan a 2FA QR code.</h5>
+							<div class="tooltipContainer">
+								<span class="tooltip">Make sure no program uses your webcam.</span>
+								<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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+								</svg>
+							</div>
+						</div>
 					</div>
-					<div class="screenCapture m-1 hidden">
+					<div class="screenCapture m-1">
 						<button class="buttoni w-[576px] sm:w-72" onclick="captureFromScreen()">
 							<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
 								<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
@@ -106,11 +125,23 @@ <h5 data-loc class="m-0 pt-4">Use your webcam to scan 2FA QR codes.</h5>
 							</svg>
 							<span data-loc>Capture screen</span>
 						</button>
-						<h5 data-loc class="m-0 pt-4 pb-6">Capture a 2FA QR code from your screen.</h5>
+						<div class="flex flex-row gap-3">
+							<h5 data-loc class="m-0 pt-4 pb-6">Capture a 2FA QR code from your screen.</h5>
+							<div class="tooltipContainer">
+								<span class="tooltip -mt-16">
+									This is a preview feature! <br />
+									Make sure that the picture is visible <br />
+									under the application window.
+								</span>
+								<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="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+								</svg>
+							</div>
+						</div>
 					</div>
 				</div>
 				<!-- video -->
-				<video id="qrVideo" class="mx-auto mb-8 hidden" autoplay></video>
+				<video id="qrVideo" class="mx-auto mb-8 hidden w-4/5 rounded-2xl bg-white p-2" autoplay></video>
 				<button class="buttoni mb-8 hidden" id="qrStop">
 					<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />

diff --git a/app/import/src/css/index.css b/app/import/src/css/index.css
diff --git a/app/import/src/js/index.js b/app/import/src/js/index.js
@@ -90,15 +90,6 @@ const buildNumber = async () => {
 
 buildNumber()
 
-/**
- * Show experimental import screen capture
- */
-if (settings.experimental.screen_capture === true) {
-	document.querySelector(".screenCapture").style.display = "block"
-} else {
-	document.querySelector(".useWebcam").style.paddingBottom = "40px"
-}
-
 /**
  * Save created file
  * @param {string} string

diff --git a/app/settings/index.html b/app/settings/index.html
@@ -342,23 +342,6 @@ <h4 class="pt-5" data-loc>These features are under development and can be unstab
 									<span data-loc>Features</span>
 								</button>
 							</div>
-
-							<br />
-							<hr />
-
-							<div>
-								<h3>Import screen capture</h3>
-								<h4>You can turn on Import screen capture. You can scan QR codes from your screen.</h4>
-							</div>
-
-							<div class="mx-auto flex h-[68px] w-72 items-center justify-center rounded-full bg-white">
-								<a href="#" onclick="screenCapture()">
-									<div class="pointer-events-none relative mr-2 inline-block w-10 select-none rounded-full border-2 border-gray-900 bg-gray-900 align-middle">
-										<input tabindex="-1" id="tgl8" type="checkbox" class="toggle" />
-										<label for="tgl8" class="toggle-bg block h-6 cursor-pointer overflow-hidden rounded-full bg-white"></label></div
-								></a>
-								<span id="tgt8" class="text-xl text-black">-</span>
-							</div>
 							<hr />
 							<div>
 								<h3>Backup</h3>

diff --git a/app/settings/src/js/index.js b/app/settings/src/js/index.js
@@ -105,18 +105,6 @@ const tgl6 = document.querySelector("#tgl6")
 const tgt6 = document.querySelector("#tgt6")
 const tgl7 = document.querySelector("#tgl7")
 const tgt7 = document.querySelector("#tgt7")
-const tgl8 = document.querySelector("#tgl8")
-const tgt8 = document.querySelector("#tgt8")
-
-// import screen capture
-let screen_capture_state = settings.experimental.screen_capture
-if (screen_capture_state === true) {
-	tgt8.textContent = "On"
-	tgl8.checked = true
-} else {
-	tgt8.textContent = "Off"
-	tgl8.checked = false
-}
 
 // launch on startup
 let launch_startup_state = settings.settings.launch_on_startup
@@ -894,54 +882,6 @@ window.addEventListener("click", (event) => {
 	}
 })
 
-/**
- * Toggle import screen capture
- */
-const screenCapture = () => {
-	const toggle = () => {
-		if (screen_capture_state === true) {
-			settings.experimental.screen_capture = false
-
-			save()
-
-			tgt8.textContent = "Off"
-			tgl8.checked = false
-
-			screen_capture_state = false
-		} else {
-			settings.experimental.screen_capture = true
-
-			save()
-
-			tgt8.textContent = "On"
-			tgl8.checked = true
-
-			screen_capture_state = true
-		}
-	}
-
-	dialog
-		.showMessageBox({
-			title: "Authme",
-			buttons: [lang.button.yes, lang.button.no, lang.button.cancel],
-			defaultId: 2,
-			cancelId: 2,
-			noLink: true,
-			type: "warning",
-			message: lang.settings_dialog.restart,
-		})
-		.then((result) => {
-			if (result.response === 0) {
-				toggle()
-				restart()
-			}
-
-			if (result.response === 1) {
-				toggle()
-			}
-		})
-}
-
 /* Experimental docs */
 const experimentalDocs = () => {
 	shell.openExternal("https://docs.authme.levminer.com/#/settings?id=experimental-features")

diff --git a/languages/en.js b/languages/en.js
@@ -232,7 +232,7 @@ module.exports = {
 		"Choose images",
 		"Choose images that contain a 2FA QR code.",
 		"Use webcam",
-		"Use your webcam to scan 2FA QR codes.",
+		"Use your webcam to scan a 2FA QR code.",
 		"Capture screen",
 		"Capture a 2FA QR code from your screen.",
 		"Stop"

diff --git a/languages/hu.js b/languages/hu.js
@@ -232,9 +232,9 @@ module.exports = {
 		"Képek kiválasztása",
 		"Válassz olyan képeket amik 2FA QR-kódokat tartalmaznak.",
 		"Webkamera",
-		"Használd a webkamerádat a a 2FA QR-kódok beszkenneléséhez.",
+		"Használd a webkamerádat a 2FA QR-kód beszkenneléséhez.",
 		"Képernyő felvétel",
-		"2FA QR-kódok rögzítése a képernyődről.",
+		"2FA QR-kód importálása a képernyődről.",
 		"Stop"
     ],
 

diff --git a/main.js b/main.js
@@ -198,9 +198,6 @@ const settings_file = {
 		language: null,
 		sort: null,
 	},
-	experimental: {
-		screen_capture: false,
-	},
 	security: {
 		require_password: null,
 		password: null,

diff --git a/styles/global.css b/styles/global.css
diff --git a/styles/partials/components/components.scss b/styles/partials/components/components.scss
@@ -106,3 +106,16 @@
 dialog[open] {
 	animation: fadeEffect 0.5s;
 }
+
+/* tooltip */
+.tooltipContainer:hover .tooltip {
+	animation: fadeEffect 0.5s;
+	visibility: visible;
+	z-index: 50;
+}
+
+.tooltipContainer > svg {
+	animation: fadeEffect 0.5s;
+	position: relative;
+	top: 1rem;
+}
diff --git a/styles/tailwind.css b/styles/tailwind.css
diff --git a/styles/tailwind.scss b/styles/tailwind.scss
@@ -34,6 +34,10 @@
 	.summary {
 		@apply cursor-pointer font-bold;
 	}
+
+	.tooltip {
+		@apply invisible absolute -mt-6 rounded-xl bg-white p-2 text-black;
+	}
 }
 
 @layer base {