Load scripts dynamically + bugfixes

This commit is contained in:
MDMCK10 2024-11-04 20:06:30 +01:00
parent 07d12350ce
commit 11ba109885
2 changed files with 144 additions and 62 deletions

View file

@ -96,9 +96,9 @@
<input id="accountLoginUsername" type="text" class="form-control" name="username" required/><br>
<label for="accountLoginPassword" id="accountLoginPasswordLabel"></label><br/>
<input id="accountLoginPassword" type="password" class="form-control" name="password" required><br>
<div id="accountLoginCaptcha"></div>
<div id="accountLoginReCaptcha"></div>
<div id="accountLoginTurnstile"></div>
<div id="accountLoginCaptchaContainer"></div>
<div id="accountLoginReCaptchaContainer"></div>
<div id="accountLoginTurnstileContainer"></div>
<button type="submit" class="btn btn-primary" id="accountModalLoginBtn"></button> <button type="button" class="btn btn-secondary" id="accountForgotPasswordButton"></button>
</form>
</div>
@ -114,9 +114,9 @@
<input id="accountRegisterConfirmPassword" type="password" class="form-control" name="confirmpassword" required><br>
<label for="accountRegisterDateOfBirth" id="accountRegisterDateOfBirthLabel"></label><br/>
<input id="accountRegisterDateOfBirth" type="date" class="form-control" name="dateofbirth" required><br/>
<div id="accountRegisterCaptcha"></div>
<div id="accountRegisterReCaptcha"></div>
<div id="accountRegisterTurnstile"></div>
<div id="accountRegisterCaptchaContainer"></div>
<div id="accountRegisterReCaptchaContainer"></div>
<div id="accountRegisterTurnstileContainer"></div>
<button type="submit" class="btn btn-primary" id="accountModalRegisterBtn"></button>
</form>
</div>
@ -155,9 +155,9 @@
<input id="accountResetPasswordEmail" type="email" class="form-control" name="email" required/><br/>
<label for="accountResetPasswordUsername" id="accountResetPasswordUsernameLabel"></label>
<input id="accountResetPasswordUsername" type="text" class="form-control" name="username" required/><br/>
<div id="accountResetPasswordCaptcha"></div>
<div id="accountResetPasswordReCaptcha"></div>
<div id="accountResetPasswordTurnstile"></div>
<div id="accountResetPasswordCaptchaContainer"></div>
<div id="accountResetPasswordReCaptchaContainer"></div>
<div id="accountResetPasswordTurnstileContainer"></div>
<button type="submit" class="btn btn-primary" id="accountResetPasswordBtn"></button>
</div>
<div id="accountResetPasswordVerifySection">
@ -312,9 +312,6 @@
</div>
</div>
</div>
<script src="https://js.hcaptcha.com/1/api.js?render=explicit&recaptchacompat=off"></script>
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"></script>
<script src="https://www.google.com/recaptcha/api.js?render=explicit"></script>
<script type="module" src="../ts/main.ts" type="application/javascript"></script>
</body>
</html>

View file

@ -96,12 +96,12 @@ const elements = {
accountLoginForm: document.getElementById("accountLoginForm") as HTMLFormElement,
accountRegisterForm: document.getElementById("accountRegisterForm") as HTMLFormElement,
accountVerifyEmailForm: document.getElementById("accountVerifyEmailForm") as HTMLFormElement,
accountLoginCaptcha: document.getElementById("accountLoginCaptcha") as HTMLDivElement,
accountLoginRecaptcha: document.getElementById("accountLoginReCaptcha") as HTMLDivElement,
accountLoginTurnstile: document.getElementById("accountLoginTurnstile") as HTMLDivElement,
accountRegisterCaptcha: document.getElementById("accountRegisterCaptcha") as HTMLDivElement,
accountRegisterRecaptcha: document.getElementById("accountRegisterReCaptcha") as HTMLDivElement,
accountRegisterTurnstile: document.getElementById("accountRegisterTurnstile") as HTMLDivElement,
accountLoginCaptchaContainer: document.getElementById("accountLoginCaptchaContainer") as HTMLDivElement,
accountLoginRecaptchaContainer: document.getElementById("accountLoginReCaptchaContainer") as HTMLDivElement,
accountLoginTurnstileContainer: document.getElementById("accountLoginTurnstileContainer") as HTMLDivElement,
accountRegisterCaptchaContainer: document.getElementById("accountRegisterCaptchaContainer") as HTMLDivElement,
accountRegisterRecaptchaContainer: document.getElementById("accountRegisterReCaptchaContainer") as HTMLDivElement,
accountRegisterTurnstileContainer: document.getElementById("accountRegisterTurnstileContainer") as HTMLDivElement,
accountLoginUsername: document.getElementById("accountLoginUsername") as HTMLInputElement,
accountLoginPassword: document.getElementById("accountLoginPassword") as HTMLInputElement,
@ -126,9 +126,9 @@ const elements = {
accountResetPasswordForm: document.getElementById("accountResetPasswordForm") as HTMLFormElement,
accountResetPasswordEmail: document.getElementById("accountResetPasswordEmail") as HTMLInputElement,
accountResetPasswordUsername: document.getElementById("accountResetPasswordUsername") as HTMLInputElement,
accountResetPasswordCaptcha: document.getElementById("accountResetPasswordCaptcha") as HTMLDivElement,
accountResetPasswordRecaptcha: document.getElementById("accountResetPasswordReCaptcha") as HTMLDivElement,
accountResetPasswordTurnstile: document.getElementById("accountResetPasswordTurnstile") as HTMLDivElement,
accountResetPasswordCaptchaContainer: document.getElementById("accountResetPasswordCaptchaContainer") as HTMLDivElement,
accountResetPasswordRecaptchaContainer: document.getElementById("accountResetPasswordReCaptchaContainer") as HTMLDivElement,
accountResetPasswordTurnstileContainer: document.getElementById("accountResetPasswordTurnstileContainer") as HTMLDivElement,
accountResetPasswordVerifySection: document.getElementById("accountResetPasswordVerifySection") as HTMLDivElement,
accountVerifyPasswordResetText: document.getElementById("accountVerifyPasswordResetText") as HTMLParagraphElement,
@ -946,47 +946,132 @@ async function renderAuth() {
elements.accountLoginButton.style.display = "block";
elements.accountSettingsButton.style.display = "none";
elements.accountLogoutButton.style.display = "none";
elements.accountRegisterCaptcha.innerHTML = "";
elements.accountLoginCaptcha.innerHTML = "";
elements.accountResetPasswordCaptcha.innerHTML = "";
elements.accountRegisterTurnstile.innerHTML = "";
elements.accountLoginTurnstile.innerHTML = "";
elements.accountResetPasswordTurnstile.innerHTML = "";
elements.accountRegisterRecaptcha.innerHTML = "";
elements.accountLoginRecaptcha.innerHTML = "";
elements.accountResetPasswordRecaptcha.innerHTML = "";
for (let element of document.querySelectorAll("[id^=accountRegisterCaptcha-], [id^=accountLoginCaptcha-], [id^=accountResetPasswordCaptcha-]")) {
hcaptcha.remove((element as HTMLElement).parentElement!.getAttribute("data-hcaptcha-widget-id")!);
element.remove();
}
for (let element of document.querySelectorAll("[id^=accountRegisterTurnstile-], [id^=accountLoginTurnstile-], [id^=accountResetPasswordTurnstile-]")) {
turnstile.remove((element as HTMLElement).parentElement!.getAttribute("data-turnstile-widget-id")!);
element.remove();
}
for (let element of document.querySelectorAll("[id^=accountRegisterRecaptcha-], [id^=accountLoginRecaptcha-], [id^=accountResetPasswordRecaptcha-]")) {
grecaptcha.reset(parseInt((element as HTMLElement).parentElement!.getAttribute("data-recaptcha-widget-id")!));
element.remove();
}
if (auth!.info!.hcaptcha.required) {
var hconfig = {sitekey: auth!.info!.hcaptcha.siteKey!};
hcaptcha.render(elements.accountRegisterCaptcha, hconfig);
hcaptcha.render(elements.accountLoginCaptcha, hconfig);
hcaptcha.render(elements.accountResetPasswordCaptcha, hconfig);
const hconfig = { sitekey: auth!.info!.hcaptcha.siteKey! };
let renderHcaptcha = () => {
let uuid = Math.random().toString(36).substring(7);
let accountRegisterCaptcha = document.createElement("div");
accountRegisterCaptcha.id = `accountRegisterCaptcha-${uuid}`;
elements.accountRegisterCaptchaContainer.appendChild(accountRegisterCaptcha);
let accountLoginCaptcha = document.createElement("div");
accountLoginCaptcha.id = `accountLoginCaptcha-${uuid}`;
elements.accountLoginCaptchaContainer.appendChild(accountLoginCaptcha);
let accountResetPasswordCaptcha = document.createElement("div");
accountResetPasswordCaptcha.id = `accountResetPasswordCaptcha-${uuid}`;
elements.accountResetPasswordCaptchaContainer.appendChild(accountResetPasswordCaptcha);
const hCaptchaRegisterWidgetId = hcaptcha.render(accountRegisterCaptcha, hconfig);
const hCaptchaLoginWidgetId = hcaptcha.render(accountLoginCaptcha, hconfig);
const hCaptchaResetPasswordWidgetId = hcaptcha.render(accountResetPasswordCaptcha, hconfig);
elements.accountRegisterCaptchaContainer.setAttribute("data-hcaptcha-widget-id", hCaptchaRegisterWidgetId!);
elements.accountLoginCaptchaContainer.setAttribute("data-hcaptcha-widget-id", hCaptchaLoginWidgetId!);
elements.accountResetPasswordCaptchaContainer.setAttribute("data-hcaptcha-widget-id", hCaptchaResetPasswordWidgetId!);
};
if (typeof hcaptcha === "undefined") {
let script = document.createElement("script");
script.src = "https://js.hcaptcha.com/1/api.js?render=explicit&recaptchacompat=off&onload=hCaptchaLoad";
(window as any).hCaptchaLoad = renderHcaptcha;
document.head.appendChild(script);
} else {
renderHcaptcha();
}
}
if (auth!.info?.turnstile.required) {
const turnstileConfig = { sitekey: auth!.info!.turnstile.siteKey! };
let renderTurnstile = () => {
let uuid = Math.random().toString(36).substring(7);
if(auth!.info?.turnstile.required) {
var turnstileconfig = {sitekey: auth!.info!.turnstile.siteKey!};
let accountRegisterTurnstile = document.createElement("div");
accountRegisterTurnstile.id = `accountRegisterTurnstile-${uuid}`;
elements.accountRegisterTurnstileContainer.appendChild(accountRegisterTurnstile);
// hCaptcha does this automatically, but Turnstile doesn't, oh well.
var turnstileRegisterWidgetId = turnstile.render(elements.accountRegisterTurnstile, turnstileconfig);
var turnstileLoginWidgetId = turnstile.render(elements.accountLoginTurnstile, turnstileconfig);
var turnstileResetPasswordWidgetId = turnstile.render(elements.accountResetPasswordTurnstile, turnstileconfig);
let accountLoginTurnstile = document.createElement("div");
accountLoginTurnstile.id = `accountLoginTurnstile-${uuid}`;
elements.accountLoginTurnstileContainer.appendChild(accountLoginTurnstile);
elements.accountRegisterTurnstile.children[0].setAttribute("data-turnstile-widget-id", turnstileRegisterWidgetId!);
elements.accountLoginTurnstile.children[0].setAttribute("data-turnstile-widget-id", turnstileLoginWidgetId!);
elements.accountResetPasswordTurnstile.children[0].setAttribute("data-turnstile-widget-id", turnstileResetPasswordWidgetId!);
let accountResetPasswordTurnstile = document.createElement("div");
accountResetPasswordTurnstile.id = `accountResetPasswordTurnstile-${uuid}`;
elements.accountResetPasswordTurnstileContainer.appendChild(accountResetPasswordTurnstile);
const turnstileRegisterWidgetId = turnstile.render(accountRegisterTurnstile, turnstileConfig);
const turnstileLoginWidgetId = turnstile.render(accountLoginTurnstile, turnstileConfig);
const turnstileResetPasswordWidgetId = turnstile.render(accountResetPasswordTurnstile, turnstileConfig);
elements.accountRegisterTurnstileContainer.setAttribute("data-turnstile-widget-id", turnstileRegisterWidgetId!);
elements.accountLoginTurnstileContainer.setAttribute("data-turnstile-widget-id", turnstileLoginWidgetId!);
elements.accountResetPasswordTurnstileContainer.setAttribute("data-turnstile-widget-id", turnstileResetPasswordWidgetId!);
};
if (typeof turnstile === "undefined") {
let script = document.createElement("script");
script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit&onload=turnstileLoad";
(window as any).turnstileLoad = renderTurnstile;
document.head.appendChild(script);
} else {
renderTurnstile();
}
}
if (auth!.info?.recaptcha.required) {
const recaptchaConfig = { sitekey: auth!.info!.recaptcha.siteKey! };
let renderRecaptcha = () => {
let uuid = Math.random().toString(36).substring(7);
if(auth!.info?.recaptcha.required) {
var recaptchaconfig = {sitekey: auth!.info!.recaptcha.siteKey!};
let accountRegisterRecaptcha = document.createElement("div");
accountRegisterRecaptcha.id = `accountRegisterRecaptcha-${uuid}`;
elements.accountRegisterRecaptchaContainer.appendChild(accountRegisterRecaptcha);
// Same deal as with Turnstile
var RecaptchaRegisterWidgetId = grecaptcha.render(elements.accountRegisterRecaptcha, recaptchaconfig);
var RecaptchaLoginWidgetId = grecaptcha.render(elements.accountLoginRecaptcha, recaptchaconfig);
var RecaptchaResetPasswordWidgetId = grecaptcha.render(elements.accountResetPasswordRecaptcha, recaptchaconfig);
let accountLoginRecaptcha = document.createElement("div");
accountLoginRecaptcha.id = `accountLoginRecaptcha-${uuid}`;
elements.accountLoginRecaptchaContainer.appendChild(accountLoginRecaptcha);
elements.accountRegisterRecaptcha.children[0].setAttribute("data-recaptcha-widget-id", RecaptchaRegisterWidgetId!.toString());
elements.accountLoginRecaptcha.children[0].setAttribute("data-recaptcha-widget-id", RecaptchaLoginWidgetId!.toString());
elements.accountResetPasswordRecaptcha.children[0].setAttribute("data-recaptcha-widget-id", RecaptchaResetPasswordWidgetId!.toString());
}
let accountResetPasswordRecaptcha = document.createElement("div");
accountResetPasswordRecaptcha.id = `accountResetPasswordRecaptcha-${uuid}`;
elements.accountResetPasswordRecaptchaContainer.appendChild(accountResetPasswordRecaptcha);
const RecaptchaRegisterWidgetId = grecaptcha.render(accountRegisterRecaptcha, recaptchaConfig);
const RecaptchaLoginWidgetId = grecaptcha.render(accountLoginRecaptcha, recaptchaConfig);
const RecaptchaResetPasswordWidgetId = grecaptcha.render(accountResetPasswordRecaptcha, recaptchaConfig);
elements.accountRegisterRecaptchaContainer.setAttribute("data-recaptcha-widget-id", RecaptchaRegisterWidgetId!.toString());
elements.accountLoginRecaptchaContainer.setAttribute("data-recaptcha-widget-id", RecaptchaLoginWidgetId!.toString());
elements.accountResetPasswordRecaptchaContainer.setAttribute("data-recaptcha-widget-id", RecaptchaResetPasswordWidgetId!.toString());
};
if (typeof grecaptcha === "undefined") {
let script = document.createElement("script");
script.src = "https://www.google.com/recaptcha/api.js?render=explicit&onload=recaptchaLoad";
(window as any).recaptchaLoad = renderRecaptcha;
document.head.appendChild(script);
} else {
grecaptcha.ready(renderRecaptcha);
}
}
var token = localStorage.getItem("collabvm_session_" + new URL(auth!.apiEndpoint).host);
if (token) {
@ -1062,7 +1147,7 @@ elements.accountLoginForm.addEventListener('submit', async (e) => {
var hcaptchaToken = undefined;
var hcaptchaID = undefined;
if (auth!.info!.hcaptcha.required) {
hcaptchaID = elements.accountLoginCaptcha.children[0].getAttribute("data-hcaptcha-widget-id")!
hcaptchaID = elements.accountLoginCaptchaContainer.getAttribute("data-hcaptcha-widget-id")!
var response = hcaptcha.getResponse(hcaptchaID);
if (response === "") {
elements.accountModalErrorText.innerHTML = TheI18n.GetString(I18nStringKey.kMissingCaptcha);
@ -1076,7 +1161,7 @@ elements.accountLoginForm.addEventListener('submit', async (e) => {
var turnstileID = undefined;
if (auth!.info!.turnstile.required) {
turnstileID = elements.accountLoginTurnstile.children[0].getAttribute("data-turnstile-widget-id")!
turnstileID = elements.accountLoginTurnstileContainer.getAttribute("data-turnstile-widget-id")!
var response: string = turnstile.getResponse(turnstileID) || "";
if (response === "") {
elements.accountModalErrorText.innerHTML = TheI18n.GetString(I18nStringKey.kMissingCaptcha);
@ -1090,7 +1175,7 @@ elements.accountLoginForm.addEventListener('submit', async (e) => {
var recaptchaID = undefined;
if (auth!.info!.recaptcha.required) {
recaptchaID = parseInt(elements.accountLoginRecaptcha.children[0].getAttribute("data-recaptcha-widget-id")!)
recaptchaID = parseInt(elements.accountLoginRecaptchaContainer.getAttribute("data-recaptcha-widget-id")!)
var response = grecaptcha.getResponse(recaptchaID);
if (response === "") {
elements.accountModalErrorText.innerHTML = TheI18n.GetString(I18nStringKey.kMissingCaptcha);
@ -1130,7 +1215,7 @@ elements.accountRegisterForm.addEventListener('submit', async (e) => {
var hcaptchaToken = undefined;
var hcaptchaID = undefined;
if (auth!.info!.hcaptcha.required) {
hcaptchaID = elements.accountRegisterCaptcha.children[0].getAttribute("data-hcaptcha-widget-id")!
hcaptchaID = elements.accountRegisterCaptchaContainer.getAttribute("data-hcaptcha-widget-id")!
var response = hcaptcha.getResponse(hcaptchaID);
if (response === "") {
elements.accountModalErrorText.innerHTML = TheI18n.GetString(I18nStringKey.kMissingCaptcha);
@ -1144,7 +1229,7 @@ elements.accountRegisterForm.addEventListener('submit', async (e) => {
var turnstileID = undefined;
if (auth!.info!.turnstile.required) {
turnstileID = elements.accountRegisterTurnstile.children[0].getAttribute("data-turnstile-widget-id")!
turnstileID = elements.accountRegisterTurnstileContainer.getAttribute("data-turnstile-widget-id")!
var response: string = turnstile.getResponse(turnstileID) || "";
if (response === "") {
elements.accountModalErrorText.innerHTML = TheI18n.GetString(I18nStringKey.kMissingCaptcha);
@ -1158,7 +1243,7 @@ elements.accountRegisterForm.addEventListener('submit', async (e) => {
var recaptchaID = undefined;
if (auth!.info!.recaptcha.required) {
recaptchaID = parseInt(elements.accountRegisterRecaptcha.children[0].getAttribute("data-recaptcha-widget-id")!)
recaptchaID = parseInt(elements.accountRegisterRecaptchaContainer.getAttribute("data-recaptcha-widget-id")!)
var response = grecaptcha.getResponse(recaptchaID);
if (response === "") {
elements.accountModalErrorText.innerHTML = TheI18n.GetString(I18nStringKey.kMissingCaptcha);
@ -1274,7 +1359,7 @@ elements.accountResetPasswordForm.addEventListener('submit', async e => {
var hcaptchaToken = undefined;
var hcaptchaID = undefined;
if (auth!.info!.hcaptcha.required) {
hcaptchaID = elements.accountResetPasswordCaptcha.children[0].getAttribute("data-hcaptcha-widget-id")!
hcaptchaID = elements.accountResetPasswordCaptchaContainer.getAttribute("data-hcaptcha-widget-id")!
var response = hcaptcha.getResponse(hcaptchaID);
if (response === "") {
elements.accountModalErrorText.innerHTML = TheI18n.GetString(I18nStringKey.kMissingCaptcha);
@ -1288,7 +1373,7 @@ elements.accountResetPasswordForm.addEventListener('submit', async e => {
var turnstileID = undefined;
if (auth!.info!.turnstile.required) {
turnstileID = elements.accountResetPasswordTurnstile.children[0].getAttribute("data-turnstile-widget-id")!
turnstileID = elements.accountResetPasswordTurnstileContainer.getAttribute("data-turnstile-widget-id")!
var response: string = turnstile.getResponse(turnstileID) || "";
if (response === "") {
elements.accountModalErrorText.innerHTML = TheI18n.GetString(I18nStringKey.kMissingCaptcha);
@ -1302,7 +1387,7 @@ elements.accountResetPasswordForm.addEventListener('submit', async e => {
var recaptchaID = undefined;
if (auth!.info!.recaptcha.required) {
recaptchaID = parseInt(elements.accountResetPasswordRecaptcha.children[0].getAttribute("data-recaptcha-widget-id")!)
recaptchaID = parseInt(elements.accountResetPasswordRecaptchaContainer.getAttribute("data-recaptcha-widget-id")!)
var response = grecaptcha.getResponse(recaptchaID);
if (response === "") {
elements.accountModalErrorText.innerHTML = TheI18n.GetString(I18nStringKey.kMissingCaptcha);