Skip to content

Commit

Permalink
Redesign landing page #207
Browse files Browse the repository at this point in the history
  • Loading branch information
@Levminer
Levminer committed Apr 27, 2022
1 parent 5e89ed0 commit 6c5cf81
Show file tree
Hide file tree
Showing 7 changed files with 75 additions and 147 deletions.
65 changes: 34 additions & 31 deletions app/landing/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<link rel="stylesheet" href="../.././styles/global.css" />
<link rel="stylesheet" href="../../styles/tailwind.css" />
<!-- js -->
<script defer src="./src/js/index.js"></script>
<script defer src="./index.js"></script>
</head>
<body>
<!-- build number -->
Expand All @@ -21,9 +21,40 @@ <h5 class="build-content m-0 mx-3 flex flex-row text-center font-bold">You are r
</div>

<!-- content -->
<div class="relative m-auto mt-40 mb-60 w-3/5 rounded-2xl bg-gray-700 p-1 text-center">
<div class="relative m-auto mt-40 mb-60 rounded-2xl bg-gray-700 p-1 text-center md:w-11/12 xl:w-3/5">
<h1>Authme</h1>
<div class="mx-auto mb-16 w-2/3 rounded-2xl bg-gray-800" id="choose">

<div class="chooseLogin mx-auto mb-20 rounded-2xl bg-gray-800 md:w-11/12 xl:w-2/3">
<h3 data-loc class="pt-5">Welcome to Authme!</h3>
<h4 data-loc>Choose how you want to use Authme. Your 2FA codes are encrypted either way.</h4>

<div class="flex flex-row justify-center pb-5">
<div class="my-3 ml-3 mr-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">Require password</h4>
<h5 data-loc class="m-0 mb-3">You have to type in your password every time you launch Authme.</h5>

<button class="buttoni my-2" onclick="requirePassword()">
<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 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span data-loc>Continue</span>
</button>
</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">Don't require password</h4>
<h5 data-loc class="m-0 mb-3">If you don't want to type in your password every time you launch Authme.</h5>

<button onclick="noPassword()" class="buttoni my-2">
<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>
<span data-loc>Confirm</span>
</button>
</div>
</div>
</div>

<div class="createPassword mx-auto mb-16 hidden w-2/3 rounded-2xl bg-gray-800">
<h3 data-loc class="pt-3">Create password</h3>
<h4 data-loc id="text">Create a strong password to encrypt your 2FA codes!</h4>
<div class="flex select-none flex-row flex-wrap justify-center gap-3 pb-5">
Expand Down Expand Up @@ -56,34 +87,6 @@ <h4 data-loc id="text">Create a strong password to encrypt your 2FA codes!</h4>
</svg>
<span data-loc>Confirm</span>
</button>

<div class="mx-auto pb-3">
<details class="details mb-5 transform duration-200 ease-in" onclick="showMoreOptions()">
<summary data-loc class="summary mb-3 cursor-pointer font-bold">More options</summary>
</details>
</div>
</div>
<div>
<div id="more_options" class="animation invisible mx-auto mt-20 mb-20 hidden w-2/3 rounded-2xl bg-gray-800 pb-10">
<h3 data-loc class="pt-5">Don't require password</h3>
<h4 data-loc>If you don't want to type in your password every time you launch Authme.</h4>
<button onclick="noPassword()" class="buttoni mb-7">
<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>
<span data-loc>Confirm</span>
</button>
<hr />
<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="mx-auto flex h-[68px] w-72 items-center justify-center rounded-full bg-white">
<div class="relative mr-2 inline-block w-10 select-none rounded-full border-2 border-gray-900 bg-gray-900 align-middle">
<input onclick="toggleWindowCapture()" id="tgl0" type="checkbox" class="toggle absolute right-5 top-1 block h-4 w-4 cursor-pointer appearance-none rounded-full bg-black outline-none duration-200 ease-in checked:bg-white focus:outline-none" />
<label for="tgl0" class="toggle-bg block h-6 cursor-pointer overflow-hidden rounded-full bg-white"></label>
</div>
<span id="tgt0" class="text-xl text-black">Off</span>
</div>
</div>
</div>
</div>
</body>
Expand Down
97 changes: 23 additions & 74 deletions app/landing/src/js/index.js → app/landing/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,97 +159,46 @@ const hashPasswords = async () => {
ipc.send("toConfirm")

location.reload()
}, 1000)
}, 100)
}

/**
* Don't require password
*/
const noPassword = () => {
dialog
.showMessageBox({
title: "Authme",
buttons: [lang.button.yes, lang.button.no],
type: "warning",
defaultId: 1,
cancelId: 1,
noLink: true,
message: lang.landing_dialog.no_password,
})
.then((result) => {
if (result.response === 0) {
text.style.color = "#28A443"
text.textContent = lang.landing_text.please_wait

/**
* Read settings
* @type{LibSettings}
*/
settings = JSON.parse(fs.readFileSync(path.join(folder_path, "settings", "settings.json"), "utf-8"))

const salt = aes.generateSalt().toString("base64")
const password = Buffer.from(aes.generateRandomKey(salt))

settings.security.require_password = false

/** @type{LibStorage} */ storage = dev ? JSON.parse(localStorage.getItem("dev_storage")) : JSON.parse(localStorage.getItem("storage"))

storage.require_password = settings.security.require_password
storage.password = password.toString("base64")
storage.key = salt

dev ? localStorage.setItem("dev_storage", JSON.stringify(storage)) : localStorage.setItem("storage", JSON.stringify(storage))

fs.writeFileSync(path.join(folder_path, "settings", "settings.json"), JSON.stringify(settings, null, "\t"))
/**
* Read settings
* @type{LibSettings}
*/
settings = JSON.parse(fs.readFileSync(path.join(folder_path, "settings", "settings.json"), "utf-8"))

setInterval(() => {
password.fill(0)
const salt = aes.generateSalt().toString("base64")
const password = Buffer.from(aes.generateRandomKey(salt))

ipc.send("toApplicationFromLanding")
settings.security.require_password = false

location.reload()
}, 1000)
}
})
}
/** @type{LibStorage} */ storage = dev ? JSON.parse(localStorage.getItem("dev_storage")) : JSON.parse(localStorage.getItem("storage"))

/**
* Show more options div
*/
let more_options_shown = false
storage.require_password = settings.security.require_password
storage.password = password.toString("base64")
storage.key = salt

const showMoreOptions = () => {
const more_options = document.querySelector("#more_options")
dev ? localStorage.setItem("dev_storage", JSON.stringify(storage)) : localStorage.setItem("storage", JSON.stringify(storage))

if (more_options_shown === false) {
more_options.style.visibility = "visible"
fs.writeFileSync(path.join(folder_path, "settings", "settings.json"), JSON.stringify(settings, null, "\t"))

setTimeout(() => {
more_options.style.display = "block"
}, 10)
setInterval(() => {
password.fill(0)

more_options_shown = true
} else {
more_options.style.display = "none"
ipc.send("toApplicationFromLanding")

more_options_shown = false
}
location.reload()
}, 100)
}

/**
* Toggles window capture state
*/
const toggleWindowCapture = () => {
const tgl0 = document.querySelector("#tgl0").checked
const tgt0 = document.querySelector("#tgt0")

if (tgl0 === false) {
ipc.send("disableWindowCapture")
tgt0.textContent = "Off"
} else {
tgt0.textContent = "On"
ipc.send("enableWindowCapture")
}
const requirePassword = () => {
document.querySelector(".chooseLogin").style.display = "none"
document.querySelector(".createPassword").style.display = "block"
}

/**
Expand Down
18 changes: 8 additions & 10 deletions languages/en.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,23 +73,21 @@ module.exports = {
},

"landing": [
"Welcome to Authme!",
"Choose how you want to use Authme. Your 2FA codes are encrypted either way.",
"Require password",
"You have to type in your password every time you launch Authme.",
"Continue",
"Don't require password",
"If you don't want to type in your password every time you launch Authme.",
"Confirm",
"Create password",
"Create a strong password to encrypt your 2FA codes!",
"Password",
"Confirm password",
"Confirm",
"More options",
"Don't require password",
"If you don't want to type in your password every time you launch Authme.",
"Confirm",
"Window capture",
"Allows screenshots and screen capture. You can record or screenshot the app until you restart Authme.",
],

"landing_dialog": {
"no_password": "Are you sure? \n\nThis way everyone with access to your computer can access your 2FA codes too.",
},

"landing_text": {
"maximum_password": "Maximum password length is 64 characters!",
"minimum_password": "Minimum password length is 8 characters!",
Expand Down
18 changes: 8 additions & 10 deletions languages/hu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,23 +73,21 @@ module.exports = {
},

"landing": [
"Üdv!",
"Válaszd ki hogy akarod használn az Auhme-t. A 2FA kódjaid minden képpen titkosítva vannak.",
"Kötelező Jelszó",
"Be kell írnod a jelszavadat minden alkalommal amikor elindítod az Authme-t.",
"Folytatás",
"Ne kérjen jelszót",
"Ha nem akarsz beírni egy jelszót minden alkalommal amikor elindítod az Authme-t.",
"Megerősítés",
"Jelszó létrehozása",
"Hozz létre egy erős jelszót amivel titkosítva lesznek a 2FA kódjaid!",
"Jelszó",
"Jelszó megerősítése",
"Megerősítés",
"Több opció",
"Ne kérjen jelszót",
"Ha nem akarsz beírni egy jelszót minden alkalommal amikor elindítod az Authme-t.",
"Megerősítés",
"Ablak rögzítése",
"Képernyőképek és az ablak rögzítésének engedélyezése. Aktív amíg újra nem indítod az Atuhme-t.",
],

"landing_dialog": {
"no_password": "Biztos vagy benne? \n\nÍgy bárki megnézheti a 2FA kódjaidat akinek hozzáférése van a számítógépedhez!",
},

"landing_text": {
"maximum_password": "Maximum 64 karakter lehet a jelszavad hossza!",
"minimum_password": "Minimum 8 karakter kell hogy legyen a jelszavad hossza!",
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.

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

.input:hover ~ #show_pass_2 {
transition: 0.2s ease-in;
stroke: white;
}

.input:hover ~ #show_pass_21 {
transition: 0.2s ease-in;
stroke: white;
}

.input:hover ~ #show_pass_3 {
transition: 0.2s ease-in;
stroke: white;
}

.input:hover ~ #show_pass_31 {
transition: 0.2s ease-in;
stroke: white;
}

.input::placeholder {
color: gray;
font-weight: normal;
Expand Down
2 changes: 1 addition & 1 deletion styles/tailwind.css
View file

Large diffs are not rendered by default.

0 comments on commit 6c5cf81

Please sign in to comment.