Skip to content

Commit 4538964

Browse files
KcchouetteKcchouette
committed
Switch from base64 to normal html args (as base64 seems a deprecated
solution)
1 parent 924bc1d commit 4538964

File tree

2 files changed

+89
-102
lines changed

2 files changed

+89
-102
lines changed

‎index.html‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -22,18 +22,14 @@ <h2 class="panel-heading">Import the JSON file</h2>
2222
<label for="lesspass-emplacement" class="label">
2323
The location of the LessPass WebComponent
2424
</label>
25-
<div class="field has-addons">
26-
<div class="control is-expanded">
27-
<input
28-
class="input"
29-
type="text"
30-
id="lesspass-emplacement"
31-
placeholder="https://www.lesspass.com"
32-
/>
33-
</div>
34-
<div class="control">
35-
<span class="button is-static">/</span>
36-
</div>
25+
<div class="field">
26+
<input
27+
class="input"
28+
type="text"
29+
id="lesspass-emplacement"
30+
placeholder="https://www.lesspass.com/"
31+
value="https://kcchouette.github.io/lesspass/"
32+
/>
3733
</div>
3834
</div>
3935
<div class="field">

‎js/main.js‎

Lines changed: 81 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,62 @@
11
function importData() {
22
toggle_visibility("importDatas");
3-
const json = document.getElementById("lesspass-input").value;
4-
const link = document.getElementById("lesspass-emplacement").value;
5-
if (json) {
6-
const obj = JSON.parse(json);
7-
document.getElementById("lesspass-links").innerHTML = cardCreation(
8-
obj,
9-
link,
10-
);
11-
document.getElementById("lesspass-output").innerHTML = JSON.stringify(
12-
obj,
13-
null,
14-
"\t",
15-
);
3+
const jsonInput = document.getElementById("lesspass-input").value;
4+
const linkBase = document.getElementById("lesspass-emplacement").value;
5+
if (jsonInput) {
6+
const dataObject = JSON.parse(jsonInput);
7+
updateLinksAndOutput(dataObject, linkBase);
168
}
179
toggle_visibility("panel-lesspass-links");
1810
toggle_visibility("exportDatas");
1911
}
2012

2113
function createData() {
22-
const json = document.getElementById("lesspass-output").value;
23-
let obj;
24-
if (json) {
25-
obj = JSON.parse(json);
26-
} else {
27-
obj = new Array();
28-
}
14+
const jsonOutput = document.getElementById("lesspass-output").value;
15+
const dataArray = parseJsonOutput(jsonOutput);
16+
17+
const newEntry = gatherFormData();
18+
dataArray.push(newEntry);
19+
20+
const linkBase = document.getElementById("lesspass-emplacement").value;
21+
22+
updateLinksAndOutput(dataArray, linkBase);
2923

30-
const site = document.getElementById("site").value;
31-
const login = document.getElementById("login").value;
32-
const lowercase = document.getElementById("lowercase").checked;
33-
const uppercase = document.getElementById("uppercase").checked;
34-
const digits = document.getElementById("digits").checked;
35-
const symbols = document.getElementById("symbols").checked;
36-
const length = document.getElementById("length").value;
37-
const counter = document.getElementById("counter").value;
38-
39-
const nObject = {
40-
site: site,
41-
login: login,
42-
lowercase: lowercase,
43-
uppercase: uppercase,
44-
digits: digits,
45-
symbols: symbols,
46-
length: length,
47-
counter: counter,
24+
/* init again */
25+
resetFormFields();
26+
27+
addPasswordProfileButton();
28+
}
29+
30+
function gatherFormData() {
31+
return {
32+
site: document.getElementById("site").value,
33+
login: document.getElementById("login").value,
34+
lowercase: document.getElementById("lowercase").checked,
35+
uppercase: document.getElementById("uppercase").checked,
36+
digits: document.getElementById("digits").checked,
37+
symbols: document.getElementById("symbols").checked,
38+
length: document.getElementById("length").value,
39+
counter: document.getElementById("counter").value,
4840
};
49-
obj.push(nObject);
50-
const link = document.getElementById("lesspass-emplacement").value;
51-
document.getElementById("lesspass-links").innerHTML = cardCreation(obj, link);
41+
}
42+
43+
function parseJsonOutput(jsonOutput) {
44+
return jsonOutput ? JSON.parse(jsonOutput) : [];
45+
}
46+
47+
function updateLinksAndOutput(dataArray, linkBase) {
48+
document.getElementById("lesspass-links").innerHTML = createCards(
49+
dataArray,
50+
linkBase,
51+
);
5252
document.getElementById("lesspass-output").innerHTML = JSON.stringify(
53-
obj,
53+
dataArray,
5454
null,
5555
"\t",
5656
);
57-
58-
/* init again */
59-
document.getElementById("site").value = "";
60-
document.getElementById("login").value = "";
61-
document.getElementById("lowercase").checked = true;
62-
document.getElementById("uppercase").checked = true;
63-
document.getElementById("digits").checked = true;
64-
document.getElementById("symbols").checked = true;
65-
document.getElementById("length").value = 16;
66-
document.getElementById("counter").value = 1;
67-
68-
addPasswordProfileButton();
6957
}
7058

71-
function cardCreation(arr, link) {
59+
function createCards(arr, link) {
7260
let data = "";
7361

7462
arr.forEach((item, index) => {
@@ -99,16 +87,7 @@ function cardCreation(arr, link) {
9987
</div>
10088
<footer class="card-footer">
10189
<div class="card-footer-item">
102-
<a href="${link}/?passwordProfileEncoded=${lesspassProfileToLesspassBase64(
103-
item.login,
104-
item.site,
105-
item.uppercase,
106-
item.lowercase,
107-
item.digits,
108-
item.symbols,
109-
item.length,
110-
item.counter,
111-
)}" class="has-text-left" target="_blank">
90+
<a href="${generateLink(item, link)}" class="has-text-left" target="_blank">
11291
LessPass Link <span class="icon">&#10093;</span>
11392
</a>
11493
</div>
@@ -125,29 +104,20 @@ function cardCreation(arr, link) {
125104
return data;
126105
}
127106

128-
function lesspassProfileToLesspassBase64(
129-
login,
130-
site,
131-
uppercase,
132-
lowercase,
133-
digits,
134-
symbols,
135-
length,
136-
counter,
137-
) {
138-
const obj = {
139-
login: login,
140-
site: site,
141-
uppercase: uppercase,
142-
lowercase: lowercase,
143-
digits: digits,
144-
symbols: symbols,
145-
length: length,
146-
counter: counter,
107+
const generateLink = (item, link) => {
108+
const params = new URLSearchParams({
109+
site: item.site,
110+
login: item.login,
111+
lowercase: item.lowercase,
112+
uppercase: item.uppercase,
113+
digits: item.digits,
114+
symbols: item.symbols,
115+
length: item.length,
116+
counter: item.counter,
147117
version: 2,
148-
};
149-
return encodeURIComponent(btoa(JSON.stringify(obj)));
150-
}
118+
});
119+
return `${link}?${params.toString()}`;
120+
};
151121

152122
function addPasswordProfileButton() {
153123
toggle_visibility("add-setting");
@@ -156,7 +126,28 @@ function addPasswordProfileButton() {
156126
}
157127

158128
function toggle_visibility(id) {
159-
let e = document.getElementById(id);
160-
if (e.style.display == "none") e.style.display = "";
161-
else e.style.display = "none";
129+
const element = document.getElementById(id);
130+
element.style.display = element.style.display === "none" ? "" : "none";
131+
}
132+
133+
function resetFormFields() {
134+
const defaultValues = {
135+
site: "",
136+
login: "",
137+
lowercase: true,
138+
uppercase: true,
139+
digits: true,
140+
symbols: true,
141+
length: 16,
142+
counter: 1,
143+
};
144+
145+
document.getElementById("site").value = defaultValues.site;
146+
document.getElementById("login").value = defaultValues.login;
147+
document.getElementById("lowercase").checked = defaultValues.lowercase;
148+
document.getElementById("uppercase").checked = defaultValues.uppercase;
149+
document.getElementById("digits").checked = defaultValues.digits;
150+
document.getElementById("symbols").checked = defaultValues.symbols;
151+
document.getElementById("length").value = defaultValues.length;
152+
document.getElementById("counter").value = defaultValues.counter;
162153
}

0 commit comments

Comments
 (0)