userpage: generate & display referral links

shown on a new card, with an explanation, the number of remaining uses,
and expiry of the current referral.
This commit is contained in:
Harvey Tindall
2023-09-07 16:25:47 +01:00
parent 0a82f889f3
commit 311ecb7030
50 changed files with 166 additions and 54 deletions
+66 -1
View File
@@ -1,7 +1,7 @@
import { ThemeManager } from "./modules/theme.js";
import { lang, LangFile, loadLangSelector } from "./modules/lang.js";
import { Modal } from "./modules/modal.js";
import { _get, _post, _delete, notificationBox, whichAnimationEvent, toDateString, toggleLoader, addLoader, removeLoader } from "./modules/common.js";
import { _get, _post, _delete, notificationBox, whichAnimationEvent, toDateString, toggleLoader, addLoader, removeLoader, toClipboard } from "./modules/common.js";
import { Login } from "./modules/login.js";
import { Discord, Telegram, Matrix, ServiceConfiguration, MatrixConfiguration } from "./modules/account-linking.js";
import { Validator, ValidatorConf, ValidatorRespDTO } from "./modules/validator.js";
@@ -18,6 +18,7 @@ interface userWindow extends Window {
matrixUserID: string;
discordSendPINMessage: string;
pwrEnabled: string;
referralsEnabled: boolean;
}
declare var window: userWindow;
@@ -107,6 +108,14 @@ interface MyDetails {
discord?: MyDetailsContactMethod;
telegram?: MyDetailsContactMethod;
matrix?: MyDetailsContactMethod;
has_referrals: boolean;
}
interface MyReferral {
code: string;
remaining_uses: string;
no_limit: boolean;
expiry: number;
}
interface ContactDTO {
@@ -513,6 +522,62 @@ document.addEventListener("details-reload", () => {
} else if (!statusCard.classList.contains("unfocused")) {
setBestRowSpan(passwordCard, true);
}
let referralCard = document.getElementById("card-referrals");
if (window.referralsEnabled && typeof(referralCard) != "undefined" && referralCard != null) {
if (details.has_referrals) {
_get("/my/referral", null, (req: XMLHttpRequest) => {
if (req.readyState != 4 || req.status != 200) return;
const referral: MyReferral = req.response as MyReferral;
const infoArea = referralCard.querySelector(".user-referrals-info") as HTMLDivElement;
infoArea.innerHTML = `
<div class="row my-3">
<div class="inline baseline">
<span class="text-2xl">${referral.no_limit ? "∞" : referral.remaining_uses}</span> <span class="text-gray-400 text-lg">${window.lang.strings("inviteRemainingUses")}</span>
</div>
</div>
<div class="row my-3">
<div class="inline baseline">
<span class="text-gray-400 text-lg">${window.lang.strings("expiry")}</span> <span class="text-2xl">${toDateString(new Date(referral.expiry * 1000))}</span>
<div>
</div>
`;
const linkButton = referralCard.querySelector(".user-referrals-button") as HTMLButtonElement;
let codeLink = window.location.href;
for (let split of ["#", "?", "account", "my"]) {
codeLink = codeLink.split(split)[0];
}
if (codeLink.slice(-1) != "/") { codeLink += "/"; }
codeLink = codeLink + "invite/" + referral.code;
linkButton.addEventListener("click", () => {
toClipboard(codeLink);
const content = linkButton.innerHTML;
linkButton.innerHTML = `
${window.lang.strings("copied")} <i class="ri-check-line ml-2"></i>
`;
linkButton.classList.add("~positive");
linkButton.classList.remove("~info");
setTimeout(() => {
linkButton.classList.add("~info");
linkButton.classList.remove("~positive");
linkButton.innerHTML = content;
}, 2000);
});
referralCard.classList.remove("unfocused");
});
} else {
referralCard.classList.add("unfocused");
}
}
}
});
});