Import tutorial

Levminer · Sep 22, 2022 · 7660d5c · 7660d5c
1 parent 95994e9
commit 7660d5c
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 12 deletions.
diff --git a/interface/libraries/types.d.ts b/interface/libraries/types.d.ts
@@ -56,7 +56,6 @@ declare global {
 			optionalAnalytics: boolean
 			codesDescription: boolean
 			blurCodes: boolean
-			searchHistory: boolean
 			sortCodes: number
 			codesLayout: number
 		}

diff --git a/interface/stores/settings.ts b/interface/stores/settings.ts
@@ -21,7 +21,6 @@ const defaultSettings: LibSettings = {
 		optionalAnalytics: true,
 		codesDescription: false,
 		blurCodes: false,
-		searchHistory: true,
 		sortCodes: 0,
 		codesLayout: 0,
 	},

diff --git a/interface/styles/index.css b/interface/styles/index.css
@@ -177,7 +177,7 @@ h5 {
 }
 
 dialog[open] {
-	animation: show 0.5s ease normal;
+	animation: show 0.3s ease normal;
 }
 
 dialog.hide {
@@ -186,12 +186,13 @@ dialog.hide {
 
 @keyframes show {
 	from {
-		transform: translateY(-50%);
+		transform: scale(0.8);
 	}
 	to {
-		transform: translateY(0%);
+		transform: scale(1);
 	}
 }
+
 @keyframes hide {
 	to {
 		transform: translateY(-110%);
@@ -208,3 +209,13 @@ dialog.hide {
 	background-color: hsla(0, 0%, 100%, 5.12%);
 	cursor: default;
 }
+
+ol {
+	list-style-type: decimal;
+}
+
+li {
+	padding: 0.3rem;
+	font-size: 18px;
+	margin-left: 20px;
+}
diff --git a/interface/windows/codes/codes.svelte b/interface/windows/codes/codes.svelte
@@ -17,7 +17,7 @@
 	<div class="content mx-auto flex flex-col flex-wrap items-center justify-center gap-10 rounded-2xl p-10 sm:w-full">
 		<div class="importCodes transparent-800 hidden w-full max-w-2xl rounded-2xl p-5">
 			<h2>Import your codes</h2>
-			<h3>Import your existing 2FA codes, or choose your import file if you already have one.</h3>
+			<h3>Import your existing 2FA codes, or choose your Authme import file if you already have one.</h3>
 			<div class="mx-auto mt-6 flex flex-row items-center justify-center gap-3 sm:flex-wrap">
 				<button class="button" on:click={() => navigate("import")}>
 					<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">

diff --git a/interface/windows/import/import.svelte b/interface/windows/import/import.svelte
@@ -7,26 +7,26 @@
 				<h3>A TOTP QR code is that you find mostly everywhere, if you want to setup 2FA. Consist of 6 digits which are changing every 30 seconds.</h3>
 			</div>
 			<div class="ml-20 flex gap-3 sm:ml-0 sm:mt-5">
-				<button class="button">
+				<button class="button" on:click={showTOTPDialog}>
 					<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>
-					More information
+					Instructions
 				</button>
 			</div>
 		</div>
 
 		<div class="transparent-800 flex w-full flex-row items-center justify-between rounded-xl p-5 text-left sm:flex-wrap">
 			<div>
 				<h2>Google Authenticator QR code</h2>
-				<h3>A Google Authenticator code is what you can export, and contains all of your already imported codes.</h3>
+				<h3>If you are using Google Authenticator you can export all of your exiting codes and import them to Authme.</h3>
 			</div>
 			<div class="ml-20 flex gap-3 sm:ml-0 sm:mt-5">
-				<button class="button">
+				<button class="button" on:click={showGADialog}>
 					<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>
-					More information
+					Instructions
 				</button>
 			</div>
 		</div>
@@ -186,7 +186,57 @@
 	</div>
 </dialog>
 
+<dialog class="dialog dialog2">
+	<h2>Google Authenticator QR code</h2>
+	<h3>Short tutorial on how to import your codes to Authme from Google Authenticator.</h3>
+
+	<div class="mt-10 flex flex-row space-x-5">
+		<ol>
+			<li>Export the QR codes from the Google Authenticator app: Tap on the three dots on the top right of the screen > Transfer Accounts > Export Accounts</li>
+			<li>Save the two or more QR code with a screenshot or take a picture of them from another phone. Then transfer the pictures to your computer</li>
+			<li>Back to Authme, go to the Import page: Sidebar > Import</li>
+			<li>Click the Choose images button</li>
+			<li>A popup windows will open, just select the picture(s)</li>
+			<li>That's it you are done!</li>
+		</ol>
+	</div>
+
+	<div class="mt-10 flex space-x-5">
+		<button class="button dialog2Close">
+			<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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+			</svg>
+			Close
+		</button>
+	</div>
+</dialog>
+
+<dialog class="dialog dialog3">
+	<h2>TOTP 2FA QR code</h2>
+	<h3>Short tutorial on how to import your codes to Authme from any TOTP 2FA QR code.</h3>
+
+	<div class="mt-10 flex flex-row space-x-5">
+		<ol>
+			<li>Go to the website(s) you want to get the QR codes from</li>
+			<li>Take screenshots (Windows key + Shift + S key combination on Windows) of the QR codes, and save the pictures</li>
+			<li>Back to Authme, go to the Import page: Sidebar > Import</li>
+			<li>Click the Choose images button</li>
+			<li>A popup windows will open, just select the picture(s)</li>
+			<li>That's it you are done!</li>
+		</ol>
+	</div>
+
+	<div class="mt-10 flex space-x-5">
+		<button class="button dialog3Close">
+			<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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+			</svg>
+			Close
+		</button>
+	</div>
+</dialog>
+
 <script>
-	import { captureScreen, chooseFile, chooseImages, manualEntry, showManualEntry, useWebcam } from "./index"
+	import { captureScreen, chooseFile, chooseImages, manualEntry, showGADialog, showManualEntry, showTOTPDialog, useWebcam } from "./index"
 	import Details from "../../components/details.svelte"
 </script>
diff --git a/interface/windows/import/index.ts b/interface/windows/import/index.ts
@@ -82,6 +82,34 @@ export const showManualEntry = () => {
 	dialog.showModal()
 }
 
+/**
+ * Show Google Authenticator tutorial dialog
+ */
+export const showGADialog = () => {
+	const dialog: LibDialogElement = document.querySelector(".dialog2")
+	const closeDialog = document.querySelector(".dialog2Close")
+
+	closeDialog.addEventListener("click", () => {
+		dialog.close()
+	})
+
+	dialog.showModal()
+}
+
+/**
+ * Show TOTP tutorial dialog
+ */
+export const showTOTPDialog = () => {
+	const dialog: LibDialogElement = document.querySelector(".dialog3")
+	const closeDialog = document.querySelector(".dialog3Close")
+
+	closeDialog.addEventListener("click", () => {
+		dialog.close()
+	})
+
+	dialog.showModal()
+}
+
 /**
  * Enter a TOTP code manually
  */