Skip to content

Commit

Permalink
Import page localization
Browse files Browse the repository at this point in the history
  • Loading branch information
@Levminer
Levminer committed Jan 12, 2024
1 parent 987fa6c commit 10629cc
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 52 deletions.
99 changes: 51 additions & 48 deletions interface/windows/import/import.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,98 +1,98 @@
<div class="transparent-900 m-auto my-20 w-4/5 rounded-2xl p-10 text-left">
<h1 class="px-10">Supported 2FA types</h1>
<h1 class="px-10">{language.import.supportedTypes}</h1>
<div class="mx-auto flex flex-col items-center justify-center rounded-2xl p-10">
<div class="transparent-800 mb-5 flex w-full flex-row items-center justify-between rounded-xl p-5 text-left sm:flex-wrap">
<div>
<h2>TOTP 2FA QR code</h2>
<h3>A TOTP QR code is what you find mostly everywhere, if you want to setup 2FA. Consist of 6 digits which are changing every 30 seconds.</h3>
<h2>{language.import.totpQRCode}</h2>
<h3>{language.import.totpQRCodeText}</h3>
</div>
<div class="ml-20 flex gap-3 sm:ml-0 sm:mt-5">
<button class="button" on:click={showTOTPDialog}>
<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>
Instructions
{language.import.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>If you are using Google Authenticator you can export all of your exiting codes and import them to Authme.</h3>
<h2>{language.import.googleAuthQRCode}</h2>
<h3>{language.import.googleAuthQRCodeText}</h3>
</div>
<div class="ml-20 flex gap-3 sm:ml-0 sm:mt-5">
<button class="button" on:click={showGADialog}>
<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>
Instructions
{language.import.instructions}
</button>
</div>
</div>
</div>
</div>

<div class="transparent-900 m-auto mb-20 w-4/5 rounded-2xl p-10 text-left">
<h1 class="px-10">Choose import method</h1>
<h1 class="px-10">{language.import.chooseImportMethod}</h1>
<div class="mx-auto flex flex-col items-center justify-center rounded-2xl p-10">
<div class="transparent-800 mb-5 flex w-full flex-row items-center justify-between rounded-xl p-5 text-left">
<div>
<h2>Import from images</h2>
<h3>Choose images that contain compatible QR codes.</h3>
<h2>{language.import.importFromImage}</h2>
<h3>{language.import.importFromImageText}.</h3>
</div>
<div class="ml-10 flex gap-3">
<button class="button" on:click={chooseImages}>
<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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2" /><circle cx="9" cy="9" r="2" /><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" /></svg>
Choose images
{language.import.chooseImageButton}
</button>
</div>
</div>

<div class="transparent-800 mb-5 flex w-full flex-row items-center justify-between rounded-xl p-5 text-left">
<div>
<h2>Enter secret manually</h2>
<h3>Enter a TOTP secret key and name manually.</h3>
<h2>{language.import.enterSecretManually}</h2>
<h3>{language.import.enterSecretManuallyText}</h3>
</div>
<div class="ml-10 flex gap-3">
<button class="button" on:click={showManualEntry}>
<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"><rect x="2" y="4" width="20" height="16" rx="2" ry="2" /><path d="M6 8h.001" /><path d="M10 8h.001" /><path d="M14 8h.001" /><path d="M18 8h.001" /><path d="M8 12h.001" /><path d="M12 12h.001" /><path d="M16 12h.001" /><path d="M7 16h10" /></svg>
<span>Manual entry</span>
<span>{language.import.enterSecretManuallyButton}</span>
</button>
</div>
</div>

<Details openByDefault={true}>
<div class="flex justify-between">
<div>
<h4 class="text-white">Screen capture</h4>
<h5>Capture a 2FA QR code from your screen.</h5>
<h4 class="text-white">{language.import.screenCapture}</h4>
<h5>{language.import.screenCaptureText}</h5>
</div>
<div>
<button class="smallButton" on:click={captureScreen}>
<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"><path d="M13 3H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-3" /><path d="M8 21h8" /><path d="M12 17v4" /><path d="m17 8 5-5" /><path d="M17 3h5v5" /></svg>
Capture screen
{language.import.screenCaptureButton}
</button>
</div>
</div>
<div class="mt-5 flex justify-between">
<div>
<h4 class="text-white">Webcam</h4>
<h5>Use your webcam to scan a 2FA QR code.</h5>
<h4 class="text-white">{language.import.webcam}</h4>
<h5>{language.import.webcamText}</h5>
</div>
<div>
<button class="smallButton" on:click={useWebcam}>
<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"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z" /><circle cx="12" cy="13" r="3" /></svg>
Use webcam
{language.import.webcamButton}
</button>
</div>
</div>

<div class="mt-5 flex justify-between">
<div>
<h4 class="text-white">Authme file</h4>
<h5>Import all codes from an Authme import file.</h5>
<h4 class="text-white">{language.import.authmeFile}</h4>
<h5>{language.import.authmeFileText}</h5>
</div>
<div>
<button class="smallButton" on:click={chooseFile}>
<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"><path d="M4 22h14a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v3" /><polyline points="14 2 14 8 20 8" /><path d="M5 17a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" /><path d="m9 18-1.5-1.5" /></svg>
Choose file
{language.import.authmeFileButton}
</button>
</div>
</div>
Expand All @@ -101,8 +101,8 @@
</div>

<dialog class="dialog dialog1 overflow-hidden">
<h2 class="dialog1Title">Capture screen import</h2>
<h3>Waiting for a QR code...</h3>
<h2 class="dialog1Title">{language.import.captureScreenTitle}</h2>
<h3>{language.import.captureScreenWaiting}</h3>

<div class="mt-10 flex aspect-video h-60 flex-row space-x-5">
<!-- svelte-ignore a11y-media-has-caption -->
Expand All @@ -114,26 +114,26 @@
<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>
Stop
{language.common.cancel}
</button>
</div>
</dialog>

<dialog class="dialog dialog0">
<h2>Manual entry</h2>
<h3>Please enter the 2FA secret and name!</h3>
<h2>{language.import.manualEntry}</h2>
<h3>{language.import.manualEntryText}</h3>

<div class="mt-10 flex flex-row gap-5 sm:flex-col">
<div>
<h5>Name (Required)</h5>
<h5>{language.import.manualEntryName}</h5>
<input class="input name mt-1" type="text" placeholder="Google" />
</div>
<div>
<h5>Secret (Required)</h5>
<input class="input secret mt-1 " type="text" placeholder="JBSWY3DPEHPK3PXP" />
<h5>{language.import.manualEntrySecret}</h5>
<input class="input secret mt-1" type="text" placeholder="JBSWY3DPEHPK3PXP" />
</div>
<div>
<h5>Description</h5>
<h5>{language.import.manualEntryDescription}</h5>
<input class="input description mt-1" type="text" placeholder="example@mail.com" />
</div>
</div>
Expand All @@ -143,27 +143,27 @@
<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>
Cancel
{language.common.cancel}
</button>
<button class="button" on:click={manualEntry}>
<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>
Confirm
{language.common.confirm}
</button>
</div>
</dialog>

<dialog class="dialog dialog2">
<h2>Google Authenticator QR code</h2>
<h3>Short tutorial on how to import your codes into Authme from Google Authenticator.</h3>
<h2>{language.import.googleAuthQRCode}</h2>
<h3>{language.import.googleAuthTutorialTitle}</h3>

<div class="mt-10 flex flex-row space-x-5">
<ol class="instructions">
<li>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</li>
<li>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</li>
<li>In Authme, go to the Import page: Sidebar > Import</li>
<li>Click the Choose images button and select the picture(s) you transferred from your phone</li>
<li>{language.import.googleAuthTutorial0}</li>
<li>{language.import.googleAuthTutorial1}</li>
<li>{language.import.googleAuthTutorial2}</li>
<li>{language.import.googleAuthTutorial3}</li>
</ol>
</div>

Expand All @@ -172,21 +172,21 @@
<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
{language.common.close}
</button>
</div>
</dialog>

<dialog class="dialog dialog3">
<h2>TOTP 2FA QR code</h2>
<h3>Short tutorial on how to import your codes into Authme from any TOTP 2FA QR code.</h3>
<h2>{language.import.totpQRCode}</h2>
<h3>{language.import.totpTutorialTitle}</h3>

<div class="mt-10 flex flex-row space-x-5">
<ol class="instructions">
<li>Go to the website where you want to setup 2FA</li>
<li>Take a screenshot (Windows key + Shift + S key combination on Windows, Cmd + Shift + 3 on macOS) of the QR code, and save the picture</li>
<li>In Authme, go to the Import page: Sidebar > Import</li>
<li>Click the Choose images button and select the picture</li>
<li>{language.import.totpTutorial0}</li>
<li>{language.import.totpTutorial1}</li>
<li>{language.import.totpTutorial2}</li>
<li>{language.import.totpTutorial3}</li>
</ol>
</div>

Expand All @@ -195,12 +195,15 @@
<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
{language.common.close}
</button>
</div>
</dialog>

<script>
import { captureScreen, chooseFile, chooseImages, manualEntry, showGADialog, showManualEntry, showTOTPDialog, useWebcam } from "./index"
import Details from "../../components/details.svelte"
import { getLanguage } from "@utils/language"
const language = getLanguage()
</script>
11 changes: 7 additions & 4 deletions interface/windows/import/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ import { getState, setState } from "../../stores/state"
import { navigate } from "../../utils/navigate"
import logger from "interface/utils/logger"
import { decodeBase64, migrationImageConverter, totpImageConverter } from "@utils/convert"
import { getLanguage } from "@utils/language"

const language = getLanguage()

/**
* Choose images, then read QR codes
Expand Down Expand Up @@ -51,7 +54,7 @@ export const chooseImages = async () => {

// QR codes found on all images
if (images.length === i + 1) {
dialog.message("Codes imported. \n\nYou can edit your codes on the edit page.")
dialog.message(language.codes.dialog.codesImported)

const state = getState()
state.importData = importString
Expand Down Expand Up @@ -162,7 +165,7 @@ export const chooseFile = async () => {
const file: LibAuthmeFile = JSON.parse(loadedFile)
const importString = decodeBase64(file.codes)

dialog.message("Codes imported. \n\nYou can edit your codes on the edit page.")
dialog.message(language.codes.dialog.codesImported)

state.importData = importString
setState(state)
Expand Down Expand Up @@ -229,7 +232,7 @@ export const captureScreen = async () => {
clearInterval(interval)
track.stop()

dialog.message("Codes imported. \n\nYou can edit your codes on the edit page.")
dialog.message(language.codes.dialog.codesImported)

navigate("codes")
} else {
Expand Down Expand Up @@ -340,7 +343,7 @@ export const useWebcam = async () => {
clearInterval(interval)
track.stop()

dialog.message("Codes imported. \n\nYou can edit your codes on the edit page.")
dialog.message(language.codes.dialog.codesImported)

navigate("codes")
} else {
Expand Down

0 comments on commit 10629cc

Please sign in to comment.