diff --git a/pass/public/js/create.js b/pass/public/js/create.js
index 0b08fa6f7fc486d979bcec9e83937c62222f10d6..92d8ec319aa4a008e90ee4590484d7bbc3440e7e 100644
--- a/pass/public/js/create.js
+++ b/pass/public/js/create.js
@@ -1,17 +1,26 @@
let container = document.getElementById("create");
-let keyContainer = document.getElementById("key");
+let keyContainer = document.getElementById("new_key");
let initializeButton = document.querySelector("div.initialize > button");
+let copy_key_button = document.querySelector(".key.copy-group > button");
+document.getElementById("key").remove();
+let key_password_field = document.createElement("input");
+key_password_field.type = "password";
+key_password_field.id = "key";
+key_password_field.name = "key";
+document.getElementById("charge-form").appendChild(key_password_field);
+
let key = keyContainer.dataset.key;
let characters = ["a", "b", "c", "d", "e", "f", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
container.dataset.state = "initialize";
keyContainer.parentNode.querySelector("button.button").classList.add("disabled");
+key_password_field.value = key;
-let runtime = 5000; // Runtime in milliseconds
+let runtime = 2500; // Runtime in milliseconds
let starttime = Date.now();
-initializeButton.addEventListener("click", () => {
+initializeButton.addEventListener("click", e => {
starttime = Date.now();
container.dataset.state = "processing";
generateRandomKey(0);
@@ -46,4 +55,9 @@ function generateRandomKey(skip) {
random_key += character;
}
keyContainer.value = random_key;
-}
\ No newline at end of file
+}
+
+copy_key_button.addEventListener("click", e => {
+ e.preventDefault();
+ console.log("test");
+});
\ No newline at end of file
diff --git a/pass/public/styles/key/create.less b/pass/public/styles/key/create.less
index fff98bd86e3af71620b45ab535ad2f6de2aa33f3..9f66c5231e4ea3b0ca30caca5b6d3691d50f7d10 100644
--- a/pass/public/styles/key/create.less
+++ b/pass/public/styles/key/create.less
@@ -13,6 +13,7 @@
> div.initialize {
display: grid;
gap: 1rem;
+
> button {
margin: 0 auto;
padding-block: 0.5rem;
@@ -84,9 +85,14 @@
> hr {
width: 100%;
}
- > a.button {
- margin: 0 auto;
- font-size: clamp(12px, 4vw, 16px);
+ > #charge-form {
+ > input#key {
+ display: none;
+ }
+ > button {
+ margin: 0 auto;
+ font-size: clamp(12px, 4vw, 16px);
+ }
}
&[data-state="initialize"] {
@@ -94,7 +100,7 @@
> div#processing-description,
> div#store,
> hr,
- > a.button {
+ > form#charge-form {
display: none;
}
}
@@ -108,7 +114,7 @@
> div.initialize,
> div#store,
> hr,
- > a.button {
+ > form#charge-form {
display: none;
}
}
diff --git a/pass/resources/js/base.js b/pass/resources/js/base.js
index 90244d1b7b05073c097eaed71102b4aa67bc5795..0c50b67bfe208f55289a80271141c697f0182852 100644
--- a/pass/resources/js/base.js
+++ b/pass/resources/js/base.js
@@ -16,7 +16,6 @@ document.querySelectorAll(".share").forEach((element) => {
document.querySelectorAll(".copy").forEach((element) => {
element.classList.add("active");
element.addEventListener("click", event => {
- event.preventDefault();
let target = document.getElementById(element.dataset.target);
target.focus();
target.setSelectionRange(0, target.value.length);
diff --git a/pass/resources/js/enter.js b/pass/resources/js/enter.js
index 1fecbb9b571a66dc50f08bbb5ba1caa3361c90cb..86397c95df139e7f0e2516abf7b0dfb8382bed29 100644
--- a/pass/resources/js/enter.js
+++ b/pass/resources/js/enter.js
@@ -63,4 +63,13 @@ function stopScanning() {
scanner.stop();
scanner.destroy();
container.style.display = "none";
-}
\ No newline at end of file
+}
+
+// Make Password field show key as cleartext
+let key_input = document.getElementById("key");
+key_input.addEventListener("focus", () => {
+ key_input.type = "text";
+});
+key_input.addEventListener("blur", () => {
+ key_input.type = "password";
+});
\ No newline at end of file
diff --git a/pass/routes/key.js b/pass/routes/key.js
index 200f709a43870e418161da98a87f2a331efc44e7..50e2b65bf5ba75a3d71d48df137fb17cf8b7548f 100644
--- a/pass/routes/key.js
+++ b/pass/routes/key.js
@@ -42,6 +42,15 @@ router.get("/create", function (req, res, next) {
});
});
+router.post("/create", (req, res) => {
+ let key = req.body.key;
+ Key.GET_KEY(key, false).then((key) => {
+ res.redirect(
+ `${res.locals.baseDir}/key/` + encodeURIComponent(key.get_key()) + "#charge"
+ );
+ });
+});
+
router.get("/remove", (req, res) => {
if (req.cookies.key) {
res.clearCookie("key");
@@ -76,6 +85,9 @@ router.get("/enter", function (req, res, next) {
});
} else {
// If the user is using a URL Parameter on MetaGer to use his key there might be a key in the referer
+ if (typeof req.headers.referer === "undefined") {
+ res.render("login/key");
+ }
let matches = req.header("referer").match(/\?.*key=([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})/);
if (matches) {
let key_from_referer = matches[1];
diff --git a/pass/views/login/create.ejs b/pass/views/login/create.ejs
index e80d6165349095e53890ee01e12886dfed5976b2..4a66f08edb62cdefbe67b8187909bb2cb31746ca 100644
--- a/pass/views/login/create.ejs
+++ b/pass/views/login/create.ejs
@@ -6,12 +6,12 @@
<h2>1. <%= req.t("generate.first_step", {ns: "login"}) _%></h2>
<div class="initialize">
<div><%= req.t("generate.initialize.description", {ns: "login"}) _%></div>
- <button class="button"><%= req.t("generate.initialize.button", {ns: "login"}) _%></button>
+ <button type="button" class="button"><%= req.t("generate.initialize.button", {ns: "login"}) _%></button>
</div>
<div class="copy-group key">
- <label for="key"><%= req.t("title", {ns: "pageheader"}) _%></label>
- <input type="text" name="key" id="key" value="<%= key.get_key() _%>" data-key="<%= key.get_key() _%>" readonly>
- <button class="copy button" data-target="key"><%= req.t("generate.copy-key", {ns: "login"}) _%></button>
+ <label for="new_key"><%= req.t("title", {ns: "pageheader"}) _%></label>
+ <input type="text" name="new_key" id="new_key" value="<%= key.get_key() _%>" data-key="<%= key.get_key() _%>" readonly>
+ <button type="submit" form="charge-form" class=" copy button" data-target="new_key"><%= req.t("generate.copy-key", {ns: "login"}) _%></button>
</div>
<div id="processing-description"><%= req.t("generate.processing.description", {ns: "login"}) _%></div>
<div id="store">
@@ -24,6 +24,9 @@
</div>
</div>
<hr>
- <a class="button" href="<%= baseDir _%>/key/<%= key.get_key() _%>#charge"><%= req.t("generate.next", {ns: "login"}) _%> <%= req.t("howitworks.steps.1.heading", {ns: "index"}) _%></a>
+ <form id="charge-form" method="post">
+ <input type="hidden" name="key" id="key" value="<%= key.get_key() %>">
+ <button type="submit" id="next-step" class="button"><%= req.t("generate.next", {ns: "login"}) _%> <%= req.t("howitworks.steps.1.heading", {ns: "index"}) _%></a>
+ </form>
<%- include('../templates/page_footer'); -%>
\ No newline at end of file
diff --git a/pass/views/login/key.ejs b/pass/views/login/key.ejs
index 7441d54921bf564fbb92371ec6ccc8297400d168..f1a9a52300ab0cd06d636e9ee244f674a5a8d689 100644
--- a/pass/views/login/key.ejs
+++ b/pass/views/login/key.ejs
@@ -9,8 +9,8 @@
<a href="<%= baseDir %>" class="hint-icon">?</a>
</h3>
<form id="key-form" action="<%= baseDir _%>/key/enter" method="post" enctype="multipart/form-data">
- <input type="text" name="key" id="key" placeholder="<%=
- req.t("key-input.placeholder", {ns: "login"}) _%>" />
+ <input type="password" name="key" id="key" placeholder="<%=
+ req.t("key-input.placeholder", {ns: "login"}) _%>" autofocus />
</form>
</div>
<div id="file-option" class="enter-option">