Skip to content

Commit

Permalink
Rewrite import instructions
Browse files Browse the repository at this point in the history
  • Loading branch information
@Levminer
Levminer committed Mar 5, 2024
1 parent ea0e9ce commit c1a2396
Show file tree
Hide file tree
Showing 5 changed files with 54 additions and 117 deletions.
13 changes: 3 additions & 10 deletions interface/utils/language/en.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,16 +119,9 @@ export const localeEN = {
manualEntrySecret: "Secret (Required)",
manualEntryDescription: "Description",
// tutorial
googleAuthTutorialTitle: "Short tutorial on how to import your codes into Authme from Google Authenticator.",
googleAuthTutorial0: "Export the 2FA codes from the Google Authenticator app: Tap on the hamburger menu in the top left corner of the screen: Transfer Accounts > Export Accounts",
googleAuthTutorial1: "Save the migration QR code(s) with a screenshot or take a picture with another phone if you are on Android. Transfer these pictures to your computer",
googleAuthTutorial2: "In Authme, go to the Import page: Sidebar > Import",
googleAuthTutorial3: "Click the Choose images button and select the picture(s) you transferred from your phone",
totpTutorialTitle: "Short tutorial on how to import your codes into Authme from any TOTP 2FA QR code.",
totpTutorial0: "Go to the website where you want to setup 2FA",
totpTutorial1: "Take a screenshot (Windows key + Shift + S key combination on Windows, Cmd + Shift + 3 on macOS) of the QR code, and save the picture",
totpTutorial2: "In Authme, go to the Import page: Sidebar > Import",
totpTutorial3: "Click the Choose images button and select the picture",
googleAuthTutorial: ["Export the 2FA codes from the Google Authenticator app: Tap on the hamburger menu in the top left corner of the screen: Transfer Accounts > Export Accounts", "Save the migration QR code(s) with a screenshot or take a picture with another phone if you are on Android. Transfer these pictures to your computer", "In Authme, go to the Import page: Sidebar > Import", "Click the Choose images button and select the picture(s) you transferred from your phone"],
totpTutorial: ["Go to the website where you want to setup 2FA", "Take a screenshot (Windows key + Shift + S key combination on Windows, Cmd + Shift + 3 on macOS) of the QR code, and save the picture", "In Authme, go to the Import page: Sidebar > Import", "Click the Choose images button and select the picture"],
authmeTutorial: ["In Authme go to the Export page and choose Export Authme file", "You can import this file in Authme on the Import page"]
},

export: {
Expand Down
13 changes: 3 additions & 10 deletions interface/utils/language/es.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,16 +121,9 @@ export const localeES: typeof localeEN = {
manualEntrySecret: "Secreto (requerido)",
manualEntryDescription: "Descripción",
// tutorial
googleAuthTutorialTitle: "Breve tutorial sobre cómo importar sus códigos a Authme desde Google Authenticator.",
googleAuthTutorial0: "Exporte los códigos 2FA desde la aplicación Google Authenticator: toque el menú de hamburguesas en la esquina superior izquierda de la pantalla: Transferir cuentas > Exportar cuentas",
googleAuthTutorial1: "Guarde los códigos QR de migración con una captura de pantalla o tome una fotografía con otro teléfono si tiene Android. Transfiere estas imágenes a tu computadora",
googleAuthTutorial2: "En Authme, vaya a la página Importar: Barra lateral > Importar",
googleAuthTutorial3: "Haga clic en el botón Elegir imágenes y seleccione las imágenes que transfirió desde su teléfono.",
totpTutorialTitle: "Breve tutorial sobre cómo importar sus códigos a Authme desde cualquier código QR TOTP 2FA.",
totpTutorial0: "Vaya al sitio web donde desea configurar 2FA",
totpTutorial1: "Tome una captura de pantalla (tecla de Windows + combinación de teclas Shift + S en Windows, Cmd + Shift + 3 en macOS) del código QR y guarde la imagen.",
totpTutorial2: "En Authme, vaya a la página Importar: Barra lateral > Importar",
totpTutorial3: "Haga clic en el botón Elegir imágenes y seleccione la imagen.",
googleAuthTutorial: ["Export the 2FA codes from the Google Authenticator app: Tap on the hamburger menu in the top left corner of the screen: Transfer Accounts > Export Accounts", "Save the migration QR code(s) with a screenshot or take a picture with another phone if you are on Android. Transfer these pictures to your computer", "In Authme, go to the Import page: Sidebar > Import", "Click the Choose images button and select the picture(s) you transferred from your phone"],
totpTutorial: ["Go to the website where you want to setup 2FA", "Take a screenshot (Windows key + Shift + S key combination on Windows, Cmd + Shift + 3 on macOS) of the QR code, and save the picture", "In Authme, go to the Import page: Sidebar > Import", "Click the Choose images button and select the picture"],
authmeTutorial: ["In Authme go to the Export page and choose Export Authme file", "You can import this file in Authme on the Import page"]
},

export: {
Expand Down
13 changes: 3 additions & 10 deletions interface/utils/language/hu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,16 +121,9 @@ export const localeHU: typeof localeEN = {
manualEntrySecret: "Titkos kulcs (Kötelező)",
manualEntryDescription: "Leírás",
// tutorial
googleAuthTutorialTitle: "Rövid útmutató, arról hogy hogyan importálhatod a kódjaidat az Authme-be a Google Hitelesítőből.",
googleAuthTutorial0: "Exportáld a 2FA kódokat a Google Hitelesítő alkalmazásból: Kattints a hamburger menüre a képernyő tetején balra: Átvitel > Kódok exportálása",
googleAuthTutorial1: "Mentsd el a migrációs QR kódot képernyőmentéssel vagy készíts egy képet egy másik telefonnal, ha Androidon vagy. Másold át ezeket a képeket a számítógépedre.",
googleAuthTutorial2: "Az Authme-ben menj az Importálás oldalra: Oldalsáv > Importálás",
googleAuthTutorial3: "Kattints a Képek kiválasztása gombra és válaszd ki a telefonodról átmásolt képeket",
totpTutorialTitle: "Rövid útmutató, hogyan importálhatod a kódjaidat az Authme-be bármilyen TOTP 2FA QR kódból.",
totpTutorial0: "Menj az oldalra, ahol 2FA-t akarsz beállítani",
totpTutorial1: "Készíts egy képernyőmentést (Windows billentyű + Shift + S kombináció Windows-on, Cmd + Shift + 3 macOS-en) a QR kódról, és mentsd el a képet",
totpTutorial2: "Az Authme-ben menj az Importálás oldalra: Oldalsáv > Importálás",
totpTutorial3: "Kattints a Képek kiválasztása gombra és válaszd ki a telefonodról átmásolt képet",
googleAuthTutorial: ["Export the 2FA codes from the Google Authenticator app: Tap on the hamburger menu in the top left corner of the screen: Transfer Accounts > Export Accounts", "Save the migration QR code(s) with a screenshot or take a picture with another phone if you are on Android. Transfer these pictures to your computer", "In Authme, go to the Import page: Sidebar > Import", "Click the Choose images button and select the picture(s) you transferred from your phone"],
totpTutorial: ["Go to the website where you want to setup 2FA", "Take a screenshot (Windows key + Shift + S key combination on Windows, Cmd + Shift + 3 on macOS) of the QR code, and save the picture", "In Authme, go to the Import page: Sidebar > Import", "Click the Choose images button and select the picture"],
authmeTutorial: ["In Authme go to the Export page and choose Export Authme file", "You can import this file in Authme on the Import page"],
},

export: {
Expand Down
70 changes: 11 additions & 59 deletions interface/windows/import/import.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<h3>{language.import.totpQRCodeText}</h3>
</div>
<div class="mt-5 flex w-full">
<button class="button" on:click={showTOTPDialog}>
<button class="button" on:click={() => showTutorial("totp")}>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><line x1="12" y1="16" x2="12" y2="12" /><line x1="12" y1="8" x2="12.01" y2="8" /></svg>
{language.import.instructions}
</button>
Expand Down Expand Up @@ -77,7 +77,7 @@
<h3>{language.import.googleAuthQRCodeText}</h3>
</div>
<div class="mt-5 flex w-full">
<button class="button" on:click={showGADialog}>
<button class="button" on:click={() => showTutorial("google")}>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><line x1="12" y1="16" x2="12" y2="12" /><line x1="12" y1="8" x2="12.01" y2="8" /></svg>
{language.import.instructions}
</button>
Expand Down Expand Up @@ -121,7 +121,7 @@
<h3>{language.import.aegisAuthText}</h3>
</div>
<div class="mt-5 flex w-full">
<button class="button" on:click={showAuthmeFileDialog}>
<button class="button" on:click={() => showTutorial("aegis")}>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><line x1="12" y1="16" x2="12" y2="12" /><line x1="12" y1="8" x2="12.01" y2="8" /></svg>
{language.import.instructions}
</button>
Expand Down Expand Up @@ -150,7 +150,7 @@
<h3>{language.import.twoFasAuthText}</h3>
</div>
<div class="mt-5 flex w-full">
<button class="button" on:click={showAuthmeFileDialog}>
<button class="button" on:click={() => showTutorial("2fas")}>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><line x1="12" y1="16" x2="12" y2="12" /><line x1="12" y1="8" x2="12.01" y2="8" /></svg>
{language.import.instructions}
</button>
Expand Down Expand Up @@ -179,7 +179,7 @@
<h3>{language.import.authmeText}</h3>
</div>
<div class="mt-5 flex w-full">
<button class="button" on:click={showAuthmeFileDialog}>
<button class="button" on:click={() => showTutorial("authme")}>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><line x1="12" y1="16" x2="12" y2="12" /><line x1="12" y1="8" x2="12.01" y2="8" /></svg>
{language.import.instructions}
</button>
Expand Down Expand Up @@ -258,64 +258,16 @@
</div>
</dialog>

<dialog class="dialog dialog2">
<h2>{language.import.googleAuthQRCode}</h2>
<h3>{language.import.googleAuthTutorialTitle}</h3>
<dialog class="dialog tutorialDialog">
<h2 class="tutorialTitle">-</h2>
<h3 class="tutorialDescription">-</h3>

<div class="mt-10 flex flex-row space-x-5">
<ol class="instructions">
<li>{language.import.googleAuthTutorial0}</li>
<li>{language.import.googleAuthTutorial1}</li>
<li>{language.import.googleAuthTutorial2}</li>
<li>{language.import.googleAuthTutorial3}</li>
</ol>
<ol class="instructions tutorialList" />
</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>
{language.common.close}
</button>
</div>
</dialog>

<dialog class="dialog dialog3">
<h2>{language.import.totpQRCode}</h2>
<h3>{language.import.totpTutorialTitle}</h3>

<div class="mt-10 flex flex-row space-x-5">
<ol class="instructions">
<li>{language.import.totpTutorial0}</li>
<li>{language.import.totpTutorial1}</li>
<li>{language.import.totpTutorial2}</li>
<li>{language.import.totpTutorial3}</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>
{language.common.close}
</button>
</div>
</dialog>

<dialog class="dialog dialog4">
<h2>{language.import.authmeFile}</h2>
<h3>{language.import.authmeFileText}</h3>

<div class="mt-10 flex flex-row space-x-5">
<ol class="instructions">
<li>In Authme go to the Export page and choose Export Authme file.</li>
</ol>
</div>

<div class="mt-10 flex space-x-5">
<button class="button dialog4Close">
<button class="button tutorialDialogClose">
<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>
Expand All @@ -325,7 +277,7 @@
</dialog>

<script>
import { aegisFile, captureScreen, chooseFile, chooseImages, manualEntry, showAuthmeFileDialog, showGADialog, showManualEntry, showTOTPDialog, twoFasAuthFile, useWebcam } from "./index"
import { aegisFile, captureScreen, chooseFile, chooseImages, manualEntry,showManualEntry, showTutorial, twoFasAuthFile, useWebcam } from "./index"
import Details from "../../components/details.svelte"
import { getLanguage } from "@utils/language"
Expand Down
62 changes: 34 additions & 28 deletions interface/windows/import/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,39 +97,45 @@ export const showManualEntry = () => {
}

/**
* Show Google Authenticator tutorial dialog
* Show tutorial dialog
*/
export const showGADialog = () => {
const dialog: LibDialogElement = document.querySelector(".dialog2")
const closeDialog = document.querySelector(".dialog2Close")
type tutorialType = "google" | "totp" | "authme" | "aegis" | "2fas"

closeDialog.addEventListener("click", () => {
dialog.close()
})
export const showTutorial = (type: tutorialType) => {
const dialog: LibDialogElement = document.querySelector(".tutorialDialog")
const closeDialog = document.querySelector(".tutorialDialogClose")

dialog.showModal()
}
// list element
const list = document.querySelector(".tutorialList")
const tutorialTitle = document.querySelector(".tutorialTitle")
const tutorialDescription = document.querySelector(".tutorialDescription")
list.innerHTML = ""

/**
* Show TOTP tutorial dialog
*/
export const showTOTPDialog = () => {
const dialog: LibDialogElement = document.querySelector(".dialog3")
const closeDialog = document.querySelector(".dialog3Close")
if (type === "google") {
const elements = language.import.googleAuthTutorial
tutorialTitle.innerHTML = language.import.googleAuthQRCode
tutorialDescription.innerHTML = language.import.googleAuthQRCodeText

closeDialog.addEventListener("click", () => {
dialog.close()
})
for (let i = 0; i < elements.length; i++) {
list.innerHTML += `<li>${elements[i]}</li>`
}
} else if (type === "totp") {
const elements = language.import.totpTutorial
tutorialTitle.innerHTML = language.import.totpQRCode
tutorialDescription.innerHTML = language.import.totpQRCodeText

dialog.showModal()
}
for (let i = 0; i < elements.length; i++) {
list.innerHTML += `<li>${elements[i]}</li>`
}
} else if (type === "authme") {
const elements = language.import.authmeTutorial
tutorialTitle.innerHTML = language.import.authme
tutorialDescription.innerHTML = language.import.authmeText

/**
* Show Authme file dialog
*/
export const showAuthmeFileDialog = () => {
const dialog: LibDialogElement = document.querySelector(".dialog4")
const closeDialog = document.querySelector(".dialog4Close")
for (let i = 0; i < elements.length; i++) {
list.innerHTML += `<li>${elements[i]}</li>`
}
}

closeDialog.addEventListener("click", () => {
dialog.close()
Expand Down Expand Up @@ -235,12 +241,12 @@ export const aegisFile = async () => {
const filePath = await dialog.open({ filters: [{ name: "Aegis vault file", extensions: ["json"] }] })

interface AegisFile {
db:{
db: {
entries: {
type: string
name: string
issuer: string
info:{
info: {
secret: string
}
}[]
Expand Down

0 comments on commit c1a2396

Please sign in to comment.