Skip to content

Commit

Permalink
Enable manual import #204
Browse files Browse the repository at this point in the history
  • Loading branch information
@Levminer
Levminer committed Apr 22, 2022
1 parent 8c22d55 commit fa16d01
Show file tree
Hide file tree
Showing 9 changed files with 132 additions and 36 deletions.
135 changes: 102 additions & 33 deletions app/import/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,21 +51,21 @@ <h4 data-loc>List of the currently supported QR codes. You can import from more
<h4 data-loc class="m-0 mb-3">TOTP 2FA QR code</h4>
<h5 data-loc class="m-0">A TOTP QR code is that you find mostly everywhere, if you want to setup 2FA.</h5>
<h5 data-loc class="m-0">Example: Google, Facebook, Microsoft, etc.</h5>
<a data-loc class="link pt-3 !text-lg" href="#totp" onclick="totpLink()">Detailed steps</a>
<a data-loc class="link p-1 !text-lg" href="#totp" onclick="totpLink()">Detailed steps</a>
</div>
<div class="my-3 mr-3 ml-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">Google Authenticator 2FA QR code</h4>
<h5 data-loc class="m-0">A Google Authenticator code is what you can export, and contains all of your already imported codes.</h5>
<h5 data-loc class="m-0">Example: Google Authenticator.</h5>
<a data-loc class="link pt-3 !text-lg" href="#migration" onclick="migrationLink()">Detailed steps</a>
<a data-loc class="link p-1 !text-lg" href="#migration" onclick="migrationLink()">Detailed steps</a>
</div>
</div>
</div>

<!-- create import file -->
<div class="mx-auto mb-10 w-2/3 rounded-2xl bg-gray-800">
<h3 class="pt-5" data-loc>Import codes</h3>
<h4 data-loc>You can import your 2FA codes many way Choose the most convenient way for you.</h4>
<h4 data-loc>You can import your 2FA codes many way. Choose the most convenient way for you.</h4>
<div class="flex flex-col flex-wrap items-center justify-center gap-3">
<div class="chooseImages m-1">
<button class="buttoni" onclick="chooseImages()">
Expand All @@ -92,51 +92,81 @@ <h5 data-loc class="m-0 pt-4">Choose images that contain a 2FA QR code.</h5>
</div>
</div>
</div>
<div class="useWebcam m-1">
<button class="buttoni" onclick="useWebcam()">
<div class="manualEntry m-1">
<button class="buttoni" onclick="manualEntryDialog()">
<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>
<circle cx="12" cy="10" r="7"></circle>
<circle cx="12" cy="10" r="3"></circle>
<path d="M8 16l-2.091 3.486a1 1 0 0 0 .857 1.514h10.468a1 1 0 0 0 .857 -1.514l-2.091 -3.486"></path>
<rect x="2" y="6" width="20" height="12" rx="2"></rect>
<line x1="6" y1="10" x2="6" y2="10"></line>
<line x1="10" y1="10" x2="10" y2="10"></line>
<line x1="14" y1="10" x2="14" y2="10"></line>
<line x1="18" y1="10" x2="18" y2="10"></line>
<line x1="6" y1="14" x2="6" y2="14.01"></line>
<line x1="18" y1="14" x2="18" y2="14.01"></line>
<line x1="10" y1="14" x2="14" y2="14"></line>
</svg>
<span data-loc>Use webcam</span>
<span data-loc>Manual entry</span>
</button>
<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>
<h5 data-loc class="m-0 pt-4">Enter a TOTP secret key and name manually.</h5>
<div class="tooltipContainer">
<span class="tooltip">Make sure no program uses your webcam.</span>
<span class="tooltip -mt-11">The TOTP secret usually shown by clicking a button next to the QR code.</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">
<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>
<rect x="3" y="4" width="18" height="12" rx="1"></rect>
<line x1="7" y1="20" x2="17" y2="20"></line>
<line x1="9" y1="16" x2="9" y2="20"></line>
<line x1="15" y1="16" x2="15" y2="20"></line>
</svg>
<span data-loc>Capture screen</span>
</button>
<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" />

<details class="details mb-5 transform duration-200 ease-in">
<summary data-loc class="summary mx-auto mt-3 mb-10 cursor-pointer font-bold">More options</summary>

<div class="useWebcam m-1">
<button class="buttoni" onclick="useWebcam()">
<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>
<circle cx="12" cy="10" r="7"></circle>
<circle cx="12" cy="10" r="3"></circle>
<path d="M8 16l-2.091 3.486a1 1 0 0 0 .857 1.514h10.468a1 1 0 0 0 .857 -1.514l-2.091 -3.486"></path>
</svg>
<span data-loc>Use webcam</span>
</button>
<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 w-max text-base">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>
<div class="screenCapture m-1 mt-5">
<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>
<rect x="3" y="4" width="18" height="12" rx="1"></rect>
<line x1="7" y1="20" x2="17" y2="20"></line>
<line x1="9" y1="16" x2="9" y2="20"></line>
<line x1="15" y1="16" x2="15" y2="20"></line>
</svg>
<span data-loc>Capture screen</span>
</button>
<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-[72px] w-max text-base">
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>
</details>
</div>
<!-- video -->
<video id="qrVideo" class="mx-auto mb-8 hidden w-4/5 rounded-2xl bg-white p-2" autoplay></video>
Expand All @@ -159,5 +189,44 @@ <h5 data-loc class="m-0 pt-4 pb-6">Capture a 2FA QR code from your screen.</h5>
</div>
</div>
</div>

<!-- manual entry dialog -->
<dialog class="dialog dialog0 w-2/5">
<h2>Manual entry</h2>
<h4>Please enter the 2FA secret and name!</h4>

<div class="mt-10 flex flex-col items-center justify-center">
<div class="flex flex-col">
<label class="mb-1 mt-3">Name (Required)</label>
<input class="input" type="text" id="manual_issuer" spellcheck="false" placeholder="Google" />
</div>

<div class="flex flex-col">
<label class="mb-1 mt-3">Secret (Required)</label>
<input class="input" type="text" id="manual_secret" spellcheck="false" placeholder="JBSWY3DPEHPK3PXP" />
</div>

<div class="flex flex-col">
<label class="mb-1 mt-3">Description</label>
<input class="input" type="text" id="manual_description" spellcheck="false" placeholder="example@gmail.com" />
</div>
</div>

<div class="mt-10 flex items-center justify-center gap-3">
<button class="buttoni dialog0Close w-44">
<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" />
</svg>
Cancel
</button>

<button class="buttoni w-44" onclick="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
</button>
</div>
</dialog>
</body>
</html>
1 change: 1 addition & 0 deletions app/import/src/js/images.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// @ts-nocheck
module.exports = {
/**
* Read QR code(s) from image(s)
Expand Down
13 changes: 13 additions & 0 deletions app/import/src/js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ const { ipcRenderer: ipc } = require("electron")
const path = require("path")
const fs = require("fs")
const { chooseImages } = require(path.join(__dirname, "src", "js", "images.js"))
const { manualEntry } = require(path.join(__dirname, "src", "js", "manual.js"))
const { useWebcam } = require(path.join(__dirname, "src", "js", "webcam.js"))
const { captureFromScreen } = require(path.join(__dirname, "src", "js", "screen.js"))

Expand Down Expand Up @@ -201,3 +202,15 @@ const gaConvert = (data) => {

return return_string
}

/* Show/hide change password dialog */
const manualEntryDialog = () => {
const /** @type{LibDialogElement} */ dialog0 = document.querySelector(".dialog0")
const close_dialog = document.querySelector(".dialog0Close")

close_dialog.addEventListener("click", () => {
dialog0.close()
})

dialog0.showModal()
}
8 changes: 7 additions & 1 deletion app/import/src/js/manual.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,13 @@ module.exports = {
return logger.warn("Secret field empty")
}

const string = `\nName: ${manual_description.value} \nSecret: ${manual_secret.value} \nIssuer: ${manual_issuer.value} \nType: OTP_TOTP\n`
let description = manual_description.value

if (description === "") {
description = manual_issuer.value
}

const string = `\nName: ${description} \nSecret: ${manual_secret.value} \nIssuer: ${manual_issuer.value} \nType: OTP_TOTP\n`

const result = await dialog.showMessageBox(BrowserWindow.getFocusedWindow(), {
title: "Authme",
Expand Down
1 change: 1 addition & 0 deletions app/import/src/js/screen.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// @ts-nocheck
const { dialog, desktopCapturer, BrowserWindow } = require("@electron/remote")

module.exports = {
Expand Down
1 change: 1 addition & 0 deletions app/import/src/js/webcam.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// @ts-nocheck
module.exports = {
/**
* Capture QR codes from the webcam
Expand Down
2 changes: 1 addition & 1 deletion styles/global.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 5 additions & 0 deletions styles/partials/components/components.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,11 @@
stroke: white;
}

.input::placeholder {
color: gray;
font-weight: normal;
}

/* button */
.buttoni > svg {
position: relative;
Expand Down
2 changes: 1 addition & 1 deletion styles/tailwind.css
View file

Large diffs are not rendered by default.

0 comments on commit fa16d01

Please sign in to comment.