Skip to content

Commit

Permalink
Application page refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@Levminer
Levminer committed Apr 2, 2022
1 parent 134de3d commit f01ec60
Show file tree
Hide file tree
Showing 3 changed files with 45 additions and 48 deletions.
58 changes: 28 additions & 30 deletions app/application/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,37 +129,37 @@ <h5 class="build-content m-0 mx-3 flex flex-row text-center font-bold">You are r
</div>

<!-- content -->
<div class="content relative mx-auto mt-20 mb-60 rounded-2xl bg-gray-700 p-1 text-center md:w-9/12 lg:w-3/5">
<h1 class="h1 mb-5">Authme</h1>
<div class="mx-auto hidden w-2/3 rounded-2xl bg-gray-800 pb-5" id="choose">
<div class="content relative mx-auto mt-20 mb-60 rounded-2xl bg-gray-700 pb-5 text-center md:w-9/12 lg:w-3/5">
<h1 class="h1 m-0 p-6">Authme</h1>
<div class="mx-auto -mt-5 hidden w-2/3 rounded-2xl bg-gray-800 pb-5" id="choose">
<h3 data-loc class="pt-3">Import your codes</h3>
<h4 data-loc>Import your 2FA codes, or if you have an import file choose it.</h4>
<div class="flex flex-row flex-wrap items-center justify-center gap-3">
<button class="buttoni" onclick="createFile()">
<button class="buttoni" onclick="importPage()">
<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="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
</svg>
<span data-loc>Import codes</span>
</button>
<button class="buttoni" id="input" onclick="loadFile()">
<button class="buttoni" onclick="chooseImportFile()">
<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 21h7a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v11m0 5l4.879-4.879m0 0a3 3 0 104.243-4.242 3 3 0 00-4.243 4.242z" />
</svg>
<span data-loc>Choose import file</span>
</button>
</div>
</div>
<div class="mx-auto hidden w-2/3 rounded-2xl bg-gray-800 pb-5" id="starting">
<div class="mx-auto mb-10 hidden w-2/3 rounded-2xl bg-gray-800 pb-5" id="starting">
<h3 data-loc class="pt-3">Getting started</h3>
<h4 data-loc>Importing files</h4>
<div class="flex flex-row flex-wrap items-center justify-center gap-3">
<button class="buttoni" onclick="readDocs()">
<button class="buttoni" onclick="help()">
<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="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
<span data-loc>Help</span>
</button>
<button class="buttoni" onclick="sampleImport()">
<button class="buttoni" onclick="sampleFile()">
<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 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
Expand All @@ -168,48 +168,46 @@ <h4 data-loc>Importing files</h4>
</div>
<h4 data-loc>Useful options</h4>
<div class="flex flex-row flex-wrap items-center justify-center gap-3">
<button class="buttoni" onclick="configureSettings()">
<button class="buttoni" onclick="settingsPage()">
<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.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<span data-loc>Settings</span>
</button>
<button class="buttoni" onclick="supportDevelopment()">
<button class="buttoni" onclick="support()">
<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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
<span data-loc>Support</span>
</button>
</div>
</div>
<div class="save_container mb-5 hidden justify-center" id="save">
<div class="mx-auto mb-8 w-2/3 rounded-2xl bg-gray-800 pb-5">
<h3 data-loc class="pt-3">Save codes</h3>
<h4 data-loc>Save your 2FA codes to your computer for future use.</h4>
<div class="flex flex-row items-center justify-center">
<div class="gap-3">
<button class="buttoni" onclick="saveCodes()">
<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>
<path d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2"></path>
<circle cx="12" cy="14" r="2"></circle>
<polyline points="14 4 14 8 8 8 8 4"></polyline>
</svg>
<span data-loc>Save codes</span>
</button>
</div>
<div class="mx-auto -mt-5 mb-10 hidden w-2/3 justify-center rounded-2xl bg-gray-800 pb-5" id="save">
<h3 data-loc class="pt-3">Save codes</h3>
<h4 data-loc>Save your 2FA codes to your computer for future use.</h4>
<div class="flex flex-row items-center justify-center">
<div class="gap-3">
<button class="buttoni" onclick="saveCodes()">
<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>
<path d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2"></path>
<circle cx="12" cy="14" r="2"></circle>
<polyline points="14 4 14 8 8 8 8 4"></polyline>
</svg>
<span data-loc>Save codes</span>
</button>
</div>
</div>
</div>
<div class="search_container relative inline-block pt-8">
<input name="search" spellcheck="false" id="search" class="input mb-1 hidden w-80 text-2xl" onkeyup="search()" onkeydown="search()" />
<div class="relative hidden pt-2" id="searchContainer">
<input name="search" spellcheck="false" id="search" class="input mb-1 grid w-80 text-2xl" onkeyup="search()" onkeydown="search()" />
<!-- search icon -->
<svg id="searchIcon" xmlns="http://www.w3.org/2000/svg" class="searchIcon pointer-events-none relative top-[-50px] right-[150px] hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="black">
<svg id="searchIcon" xmlns="http://www.w3.org/2000/svg" class="searchIcon pointer-events-none relative top-[-50px] right-[150px] inline-block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="black">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
<!-- filter icon -->
<svg id="filterIcon" onclick="dropdown()" xmlns="http://www.w3.org/2000/svg" class="searchIcon relative top-[-50px] left-[150px] hidden h-6 w-6 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="black">
<svg id="filterIcon" onclick="dropdown()" xmlns="http://www.w3.org/2000/svg" class="searchIcon relative top-[-50px] left-[150px] inline-block h-6 w-6 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="black">
<path id="filterPath" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
</svg>
<!-- dropdown -->
Expand Down
33 changes: 16 additions & 17 deletions app/application/src/js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ const sort_number = settings.settings.sort
/**
* Load file first time from dialog
*/
const loadFile = () => {
const chooseImportFile = () => {
dialog
.showOpenDialog({
title: lang.application_dialog.choose_import_file,
Expand Down Expand Up @@ -186,13 +186,10 @@ const processData = (text) => {
* @param {LibImportFile} data
*/
const generateCodeElements = (data) => {
document.querySelector("#search").style.display = "grid"
document.querySelector(".h1").style.marginBottom = "0px"
document.querySelector(".content").style.top = "80px"
document.querySelector("#searchContainer").style.display = "inline-block"
document.querySelector(".content").style.top = "100px"
document.querySelector("#choose").style.display = "none"
document.querySelector("#starting").style.display = "none"
document.querySelector("#searchIcon").style.display = "inline-block"
document.querySelector("#filterIcon").style.display = "inline-block"

const names = data.names
const secrets = data.secrets
Expand Down Expand Up @@ -271,6 +268,12 @@ const generateCodeElements = (data) => {
// set div in html
document.querySelector(".content").appendChild(element)

// remove margin from first element
if (i === 0) {
element.style.marginTop = "-24px"
}

// add padding to last element
if (i == names.length - 1) {
element.style.paddingBottom = "8px"
}
Expand Down Expand Up @@ -306,8 +309,8 @@ const generateCodeElements = (data) => {
time.textContent = remaining_time

if (description_state === true) {
const grid = document.querySelector(`#codes${i}`)
grid.style.height = "310px"
const element = document.querySelector(`#codes${i}`)
element.style.height = "310px"
}
}
}
Expand Down Expand Up @@ -335,11 +338,7 @@ const generateCodeElements = (data) => {

// prev
if (saved_codes === false) {
document.querySelector("#input").style.display = "none"
document.querySelector("#save").style.display = "block"
} else {
document.querySelector("#input").style.display = "none"
document.querySelector("#search").style.display = "grid"
}
}

Expand Down Expand Up @@ -740,23 +739,23 @@ const provideFeedback = () => {
ipc.send("provideFeedback")
}

const createFile = () => {
const importPage = () => {
ipc.send("toggleImport")
}

const configureSettings = () => {
const settingsPage = () => {
ipc.send("toggleSettings")
}

const supportDevelopment = () => {
const support = () => {
ipc.send("support")
}

const readDocs = () => {
const help = () => {
shell.openExternal("https://docs.authme.levminer.com/#/import")
}

const sampleImport = () => {
const sampleFile = () => {
shell.openExternal("https://github.com/Levminer/authme/blob/dev/samples/authme/authme_import_sample.zip?raw=true")
}

Expand Down
Loading

0 comments on commit f01ec60

Please sign in to comment.