Skip to content

Commit

Permalink
Settings page localization
Browse files Browse the repository at this point in the history
  • Loading branch information
@Levminer
Levminer committed Jan 17, 2022
1 parent 5e2a563 commit 41f3353
Show file tree
Hide file tree
Showing 4 changed files with 73 additions and 70 deletions.
18 changes: 18 additions & 0 deletions app/application/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,5 +216,23 @@ <h4 data-loc>Save your 2FA codes to your computer for future use.</h4>
</div>
<!-- codes -->
</div>
<div class="sticky bottom-5 z-10 w-max mx-auto">
<div class="flex items-center justify-center p-2 bg-popup-magenta rounded-2xl shadow text-white">
<svg class="relative p-1" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<g fill-rule="evenodd">
<path fill="#fff" d="M512 512H0V0h512z" />
<path fill="#388d00" d="M512 512H0V341.3h512z" />
<path fill="#d43516" d="M512 170.8H0V.1h512z" />
</g>
</svg>
<h5 class="m-0 text-center mx-5">A magyar nyelv már elérhető!</h5>

<a onclick="this.parentElement.style.display='none'" id="updateClose" class="top-0.5 relative p-1 transition-colors duration-200 transform rounded-md hover:text-gray-800 cursor-pointer">
<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="M6 18L18 6M6 6l12 12" />
</svg>
</a>
</div>
</div>
</body>
</html>
111 changes: 48 additions & 63 deletions app/settings/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,31 +22,31 @@
<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>
General
<span data-loc>General</span>
</button>
</div>
<div class="mb-1 mt-1 mr-4 ml-4">
<button id="codes " class="buttonm codes" onclick="menu(event, 'codes')">
<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="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>
Codes
<span data-loc>Codes</span>
</button>
</div>
<div class="mb-1 mt-1 mr-4 ml-4">
<button id="shortcuts " class="buttonm shortcuts" onclick="menu(event, 'shortcuts')">
<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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
</svg>
Shortcuts
<span data-loc>Shortcuts</span>
</button>
</div>
<div class="mb-1 mt-1 mr-4 ml-4">
<button id="experimental " class="buttonm experimental" onclick="menu(event, 'experimental')">
<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="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
</svg>
Experimental
<span data-loc>Experimental</span>
</button>
</div>
</div>
Expand All @@ -56,15 +56,15 @@
<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="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z" />
</svg>
Feedback
<span data-loc>Feedback</span>
</button>
</div>
<div class="mb-12 mt-1 mr-4 ml-4">
<button class="buttonm" onclick="about()">
<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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
About
<span data-loc>About</span>
</button>
</div>
</div>
Expand Down Expand Up @@ -188,21 +188,21 @@ <h5 class="mx-3 flex flex-row m-0 font-bold build-content text-center">You are r
<!-- header -->
<div id="header" class="mx-auto rounded-2xl bg-gray-700 w-3/5 text-center mt-40">
<img src="../../img/header.png" class="h-16 w-16 relative top-5" />
<h2>Settings</h2>
<h4>You can configure the app settings here.</h4>
<h2 data-loc>Settings</h2>
<h4 data-loc>You can configure the app settings here.</h4>
<button class="buttoni mb-6" onclick="hide()">
<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>
Close window
<span data-loc>Close window</span>
</button>
</div>

<!-- settings -->
<div class="mx-auto text-center mt-20 mb-20 pt-5 pb-10 rounded-2xl bg-gray-700 w-3/5">
<div id="setting" class="tabcontent">
<h3>Launch on startup</h3>
<h4>Start Authme after your computer started. Authme will start on the system tray.</h4>
<h3 data-loc>Launch on startup</h3>
<h4 data-loc>Start Authme after your computer started. Authme will start on the system tray.</h4>
<div class="flex justify-center items-center w-72 h-[68px] bg-white mx-auto rounded-full">
<div class="relative inline-block w-10 mr-2 align-middle select-none bg-gray-900 border-2 border-gray-900 rounded-full">
<input id="tgl0" onclick="launchStartup()" type="checkbox" class="toggle" />
Expand All @@ -211,8 +211,8 @@ <h4>Start Authme after your computer started. Authme will start on the system tr
<span id="tgt0" class="text-black text-xl">-</span>
</div>
<hr />
<h3>Close app to tray</h3>
<h4>When closing Authme the app will not quit. You can open Authme from the system tray.</h4>
<h3 data-loc>Close app to tray</h3>
<h4 data-loc>When closing Authme the app will not quit. You can open Authme from the system tray.</h4>
<div class="flex justify-center items-center w-72 h-[68px] bg-white mx-auto rounded-full">
<div class="relative inline-block w-10 mr-2 align-middle select-none bg-gray-900 border-2 border-gray-900 rounded-full">
<input id="tgl1" onclick="closeTray()" type="checkbox" class="toggle" />
Expand All @@ -222,8 +222,8 @@ <h4>When closing Authme the app will not quit. You can open Authme from the syst
</div>
<hr />
<div class="windowCapture">
<h3>Window capture</h3>
<h4>Allows screenshots and screen capture. You can record or screenshot the app until you restart Authme.</h4>
<h3 data-loc>Window capture</h3>
<h4 data-loc>Allows screenshots and screen capture. You can record or screenshot the app until you restart Authme.</h4>
<div class="flex justify-center items-center w-72 h-[68px] bg-white mx-auto rounded-full">
<div class="relative inline-block w-10 mr-2 align-middle select-none bg-gray-900 border-2 border-gray-900 rounded-full">
<input id="tgl2" onclick="toggleWindowCapture()" type="checkbox" class="toggle" />
Expand All @@ -234,8 +234,8 @@ <h4>Allows screenshots and screen capture. You can record or screenshot the app
<hr />
</div>
<div>
<h3>Hardware acceleration</h3>
<h4>Uses GPU for smoother experience. Enable this option if you experience frame drops or lags.</h4>
<h3 data-loc>Hardware acceleration</h3>
<h4 data-loc>Uses GPU for smoother experience. Enable this option if you experience frame drops or lags.</h4>
<div class="flex justify-center items-center w-72 h-[68px] bg-white mx-auto rounded-full">
<a href="#" onclick="hardwareAcceleration()">
<div class="pointer-events-none relative inline-block w-10 mr-2 align-middle select-none bg-gray-900 border-2 border-gray-900 rounded-full">
Expand All @@ -246,8 +246,8 @@ <h4>Uses GPU for smoother experience. Enable this option if you experience frame
</div>
<hr />
</div>
<h3>Default display</h3>
<h4>Choose which display should Authme open by default. Authme will fall back to the primary display if the chosen one is not available.</h4>
<h3 data-loc>Default display</h3>
<h4 data-loc>Choose which display should Authme open by default. Authme will fall back to the primary display if the chosen one is not available.</h4>
<div class="relative inline-block">
<button id="dropdownButton1" class="buttoni" onclick="display()">
<svg xmlns="http://www.w3.org/2000/svg" class="relative top-1 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
Expand All @@ -261,64 +261,60 @@ <h4>Choose which display should Authme open by default. Authme will fall back to
</div>
</div>
<hr />
<h3>Clear data</h3>
<h4>Clear password, 2FA codes and all other settings. Be careful.</h4>
<h3 data-loc>Clear data</h3>
<h4 data-loc>Clear password, 2FA codes and all other settings. Be careful.</h4>
<button class="buttoni" onclick="clearData()">
<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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
Clear data
<span data-loc>Clear data</span>
</button>
<hr />
<h3>Open folders</h3>
<h4>You can open the folders Authme uses. Editing or deleting files might cause problems.</h4>
<h3 data-loc>Open folders</h3>
<h4 data-loc>You can open the folders Authme uses. Editing or deleting files might cause problems.</h4>
<div class="flex justify-center gap-3 flex-row flex-wrap">
<button class="buttoni" onclick="authmeFolder()">
<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="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z" />
</svg>
Authme folder
<span data-loc>Authme folder</span>
</button>
<button class="buttoni" onclick="settingsFolder()">
<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="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z" />
</svg>
Settings folder
<span data-loc>Settings folder</span>
</button>
<button class="buttoni" onclick="cacheFolder()">
<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="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z" />
</svg>
Cache folder
<span data-loc>Cache folder</span>
</button>
</div>
<hr />
<h3>Logs</h3>
<h4>You can view the logs for debugging. You can view all the logs in the settings folder.</h4>
<h3 data-loc>Logs</h3>
<h4 data-loc>You can view the logs for debugging. You can view all the logs in the settings folder.</h4>
<div class="flex justify-center gap-3 flex-row flex-wrap">
<button class="buttoni" onclick="latestLog()">
<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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
</svg>
Latest log
<span data-loc>Latest log</span>
</button>
<button class="buttoni" onclick="logsFolder()">
<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="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z" />
</svg>
Logs folder
<span data-loc>Logs folder</span>
</button>
</div>
<hr />
<h3>Version</h3>
<h4>Your current Authme version. Click for more info about Authme.</h4>
<button class="buttoni about" onclick="about()">-</button>
</div>

<!-- codes -->
<div id="codes" class="tabcontent part hidden">
<h3>Codes description</h3>
<h4>The saved codes description will be visible. You can copy it after clicking it.</h4>
<h3 data-loc>Codes description</h3>
<h4 data-loc>The saved codes description will be visible. You can copy it after clicking it.</h4>
<div class="flex justify-center items-center w-72 h-[68px] bg-white mx-auto rounded-full">
<a href="#" onclick="codesDescription()">
<div class="pointer-events-none relative inline-block w-10 mr-2 align-middle select-none bg-gray-900 border-2 border-gray-900 rounded-full">
Expand All @@ -329,20 +325,21 @@ <h4>The saved codes description will be visible. You can copy it after clicking
</div>
<br />
<hr />
<h3>Blur codes</h3>
<h4>Blur the saved codes. You can still copy the codes or hover over the codes to show them.</h4>
<h3 data-loc>Blur codes</h3>
<h4 data-loc>Blur the saved codes. You can still copy the codes or hover over the codes to show them.</h4>
<div class="flex justify-center items-center w-72 h-[68px] bg-white mx-auto rounded-full">
<a href="#" onclick="blurCodes()">
<div class="pointer-events-none relative inline-block w-10 mr-2 align-middle select-none bg-gray-900 border-2 border-gray-900 rounded-full">
<input tabindex="-1" id="tgl4" type="checkbox" class="toggle" />
<label for="tgl4" class="toggle-bg block overflow-hidden h-6 rounded-full bg-white cursor-pointer"></label></div
></a>
<label for="tgl4" class="toggle-bg block overflow-hidden h-6 rounded-full bg-white cursor-pointer"></label>
</div>
</a>
<span id="tgt4" class="text-black text-xl">-</span>
</div>
<br />
<hr />
<h3>Search history</h3>
<h4>Save the latest code you searched for. Works even after restart.</h4>
<h3 data-loc>Search history</h3>
<h4 data-loc>Save the latest code you searched for. Works even after restart.</h4>
<div class="flex justify-center items-center w-72 h-[68px] bg-white mx-auto rounded-full">
<a href="#" onclick="searchHistory()">
<div class="pointer-events-none relative inline-block w-10 mr-2 align-middle select-none bg-gray-900 border-2 border-gray-900 rounded-full">
Expand All @@ -353,8 +350,8 @@ <h4>Save the latest code you searched for. Works even after restart.</h4>
</div>
<br />
<hr />
<h3>Reset search after copy</h3>
<h4>Reset the search bar after you copied a code. Useful if you copy and search for a lot of codes.</h4>
<h3 data-loc>Reset search after copy</h3>
<h4 data-loc>Reset the search bar after you copied a code. Useful if you copy and search for a lot of codes.</h4>
<div class="flex justify-center items-center w-72 h-[68px] bg-white mx-auto rounded-full">
<a href="#" onclick="resetCopy()">
<div class="pointer-events-none relative inline-block w-10 mr-2 align-middle select-none bg-gray-900 border-2 border-gray-900 rounded-full">
Expand All @@ -367,12 +364,8 @@ <h4>Reset the search bar after you copied a code. Useful if you copy and search

<!-- shortcuts -->
<div id="shortcuts" class="tabcontent part hidden">
<h3>Shortcuts</h3>
<h4>
You can modify the shortcuts here, read the documentation for more information.
<br />
Shortcuts not work on this tab, go to any other settings tab to reactivate them!
</h4>
<h3 data-loc>Shortcuts</h3>
<h4 data-loc>You can modify the shortcuts here, read the documentation for more information. Shortcuts not work on this tab, go to any other settings tab to reactivate them!</h4>
<br />
<div class="flex flex-col md:w-4/5 lg:w-2/3 mx-auto rounded-2xl bg-gray-800 mb-20">
<div class="flex justify-center items-center">
Expand Down Expand Up @@ -783,12 +776,8 @@ <h3>Info</h3>
</div>
<br />
<hr />
<h3>Global shortcuts</h3>
<h4>
You can modify the global shortcuts here, read the documentation for more information.
<br />
Shortcuts not work on this tab, go to any other settings tab to reactivate them!
</h4>
<h3 data-loc>Global shortcuts</h3>
<h4 data-loc>You can modify the global shortcuts here, read the documentation for more information. Shortcuts not work on this tab, go to any other settings tab to reactivate them!</h4>
<br />
<div class="flex flex-col md:w-4/5 lg:w-2/3 mx-auto rounded-2xl bg-gray-800 mb-20">
<div class="flex justify-center items-center">
Expand Down Expand Up @@ -874,12 +863,8 @@ <h3>Exit App</h3>

<br />
<hr />
<h3>Quick copy shortcuts</h3>
<h4>
You can create a shortcut for your most used codes to copy quickly.
<br />
Shortcuts not work on this tab, go to any other settings tab to reactivate them!
</h4>
<h3 data-loc>Quick copy shortcuts</h3>
<h4 data-loc>You can create a shortcut for your most used codes to copy quickly. Shortcuts not work on this tab, go to any other settings tab to reactivate them!</h4>
<br />
<div class="quick"></div>
</div>
Expand Down
12 changes: 6 additions & 6 deletions app/settings/src/js/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const { shell, app, dialog, BrowserWindow, screen } = require("@electron/remote")
const { convert, localization } = require("@levminer/lib")
const logger = require("@levminer/lib/logger/renderer")
const { ipcRenderer: ipc } = require("electron")
const { convert } = require("@levminer/lib")
const path = require("path")
const fs = require("fs")

Expand All @@ -17,6 +17,11 @@ window.onerror = (error) => {
*/
logger.getWindow("application")

/**
* Localization
*/
localization.localize("settings")

/**
* Get app information
*/
Expand All @@ -33,11 +38,6 @@ if (res.build_number.startsWith("alpha")) {
document.querySelector(".build").style.display = "block"
}

// set app version
document.querySelector(".about").innerHTML = `<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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg> Authme (${res.authme_version})`

/**
* If running in development
*/
Expand Down
Loading

0 comments on commit 41f3353

Please sign in to comment.