..
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88 | const avatarImageElement = document.getElementById("avatar-image-element");
const avatarTextElement = document.getElementById("avatar-text-element");
const avatarFileInputElement = document.getElementById("avatar-file-input");
const createNewAccountButtonElement = document.getElementById(
"createNewAccount"
);
[avatarImageElement, avatarTextElement].forEach((element) => {
element.addEventListener("click", () => {
avatarFileInputElement.click();
});
});
avatarFileInputElement.addEventListener("change", (file) => {
encodeImageFileAsURL(avatarFileInputElement);
});
function encodeImageFileAsURL(fileElement) {
const file = fileElement.files[0];
const fileReader = new FileReader();
fileReader.onloadend = (event) => {
avatarImageElement.style.backgroundImage = `url('${fileReader.result}')`;
localStorage.setItem("encodedAvatar", fileReader.result);
};
try {
fileReader.readAsDataURL(file);
} catch (e) {
alert("Failed to read image file.");
}
}
async function sha512(str) {
const buf = await crypto.subtle.digest(
"SHA-512",
new TextEncoder("utf-8").encode(str)
);
return Array.prototype.map
.call(new Uint8Array(buf), (x) => ("00" + x.toString(16)).slice(-2))
.join("");
}
createNewAccountButtonElement.addEventListener("click", () => {
const fullNameElement = document.getElementById("fullname").value;
const passwordElement = document.getElementById("password").value;
const confirmPasswordElement = document.getElementById("confirmPassword")
.value;
const errorElement = document.getElementById("error");
errorElement.innerHTML = "";
if (!fullNameElement || !passwordElement || !confirmPasswordElement) {
errorElement.innerHTML = "Please fill in all the fields.";
} else if (passwordElement !== confirmPasswordElement) {
errorElement.innerHTML = "Passwords do not match.";
} else {
const avatarImage = localStorage.getItem("encodedAvatar");
if (!avatarImage) {
errorElement.innerHTML = "Please set your avatar.";
} else {
sha512(passwordElement).then((hashedPassword) => {
const currentAccount = {
fullName: fullNameElement,
password: hashedPassword,
avatar: avatarImage,
};
const accounts = localStorage.getItem("accounts");
if (!accounts) {
const accounts = [];
accounts.push(currentAccount);
localStorage.setItem("accounts", JSON.stringify(accounts));
localStorage.removeItem("encodedAvatar");
} else {
const previousAccounts = JSON.parse(localStorage.getItem("accounts"));
console.log(previousAccounts);
const ifUsernameExists = previousAccounts.find(
(account) => account.fullName === fullNameElement
);
if (!ifUsernameExists) {
previousAccounts.push(currentAccount);
localStorage.removeItem("encodedAvatar");
localStorage.setItem("accounts", JSON.stringify(accounts));
} else {
errorElement.innerHTML = 'An account with that name already exists.';
}
}
});
}
}
});
|
|