import { state, property } from "lit/decorators.js"; import { msg, str, localized } from "@lit/localize"; import LiteElement, { html } from "../utils/LiteElement"; import type { LoggedInEvent } from "../utils/AuthService"; import AuthService from "../utils/AuthService"; @localized() export class Join extends LiteElement { @property({ type: String }) token?: string; @property({ type: String }) email?: string; @state() private serverError?: string; @state() private inviteInfo: { inviterEmail: string; inviterName: string; archiveName: string; } = { inviterEmail: "", inviterName: "", archiveName: "", }; connectedCallback(): void { if (this.token && this.email) { super.connectedCallback(); } else { throw new Error("Missing email or token"); } } firstUpdated() { this.getInviteInfo(); } render() { if (this.serverError) { return html`${this.serverError}`; } const hasInviteInfo = Boolean(this.inviteInfo.inviterEmail); const placeholder = html` `; return html`
${msg("Invited by ")} ${this.inviteInfo.inviterName || this.inviteInfo.inviterEmail || placeholder}

${msg( html`You've been invited to join ${hasInviteInfo ? this.inviteInfo.archiveName || msg("Browsertrix Cloud") : placeholder}` )}

`; } private async getInviteInfo() { const resp = await fetch( `/api/users/invite/${this.token}?email=${encodeURIComponent(this.email!)}` ); if (resp.status === 200) { const body = await resp.json(); this.inviteInfo = { inviterEmail: body.inviterEmail, inviterName: body.inviterName, archiveName: body.archiveName, }; } else { this.serverError = msg("This invitation is not valid"); } } private onAuthenticated(event: LoggedInEvent) { this.dispatchEvent( AuthService.createLoggedInEvent({ ...event.detail, // TODO separate logic for confirmation message // firstLogin: true, }) ); } }