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:
+66
-1
@@ -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");
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user