import { Options, passwordStrength } from "check-password-strength"; import { NoOptionI18nKeys } from "i18next"; import { Component, linkEvent } from "inferno"; import { T } from "inferno-i18next-dess"; import { CaptchaResponse, GetCaptchaResponse, GetSiteResponse, LoginResponse, SiteView, } from "lemmy-js-client"; import { i18n } from "../../i18next"; import { UserService } from "../../services"; import { HttpService, RequestState } from "../../services/HttpService"; import { joinLemmyUrl, mdToHtml, myAuth, setIsoData, toast, validEmail, } from "../../utils"; import isBrowser from "../../utils/browser/is-browser"; import { HtmlTags } from "../common/html-tags"; import { Icon, Spinner } from "../common/icon"; import { MarkdownTextArea } from "../common/markdown-textarea"; const passwordStrengthOptions: Options = [ { id: 0, value: "very_weak", minDiversity: 0, minLength: 0, }, { id: 1, value: "weak", minDiversity: 2, minLength: 10, }, { id: 2, value: "medium", minDiversity: 3, minLength: 12, }, { id: 3, value: "strong", minDiversity: 4, minLength: 14, }, ]; interface State { registerRes: RequestState; captchaRes: RequestState; form: { username?: string; email?: string; password?: string; password_verify?: string; show_nsfw: boolean; captcha_uuid?: string; captcha_answer?: string; honeypot?: string; answer?: string; }; captchaPlaying: boolean; siteRes: GetSiteResponse; } export class Signup extends Component { private isoData = setIsoData(this.context); private audio?: HTMLAudioElement; state: State = { registerRes: { state: "empty" }, captchaRes: { state: "empty" }, form: { show_nsfw: false, }, captchaPlaying: false, siteRes: this.isoData.site_res, }; constructor(props: any, context: any) { super(props, context); this.handleAnswerChange = this.handleAnswerChange.bind(this); } async componentDidMount() { if (this.state.siteRes.site_view.local_site.captcha_enabled) { await this.fetchCaptcha(); } } async fetchCaptcha() { this.setState({ captchaRes: { state: "loading" } }); this.setState({ captchaRes: await HttpService.client.getCaptcha({}), }); this.setState(s => { if (s.captchaRes.state == "success") { s.form.captcha_uuid = s.captchaRes.data.ok?.uuid; } return s; }); } get documentTitle(): string { const siteView = this.state.siteRes.site_view; return `${this.titleName(siteView)} - ${siteView.site.name}`; } titleName(siteView: SiteView): string { return i18n.t( siteView.local_site.private_instance ? "apply_to_join" : "sign_up" ); } get isLemmyMl(): boolean { return isBrowser() && window.location.hostname == "lemmy.ml"; } render() { return (
{this.registerForm()}
); } registerForm() { const siteView = this.state.siteRes.site_view; return (
{this.titleName(siteView)}
{this.isLemmyMl && (
##
)}
{!siteView.local_site.require_email_verification && this.state.form.email && !validEmail(this.state.form.email) && (
{i18n.t("no_password_reset")}
)}
{this.state.form.password && (
{i18n.t(this.passwordStrength as NoOptionI18nKeys)}
)}
{siteView.local_site.registration_mode == "RequireApplication" && ( <>
{i18n.t("fill_out_application")}
{siteView.local_site.application_question && (
)}
)} {this.renderCaptcha()}
); } renderCaptcha() { switch (this.state.captchaRes.state) { case "loading": return ; case "success": { const res = this.state.captchaRes.data; return (
{this.showCaptcha(res)}
); } } } showCaptcha(res: GetCaptchaResponse) { const captchaRes = res?.ok; return captchaRes ? (
<> {i18n.t("captcha")} {captchaRes.wav && ( )}
) : ( <> ); } get passwordStrength(): string | undefined { const password = this.state.form.password; return password ? passwordStrength(password, passwordStrengthOptions).value : undefined; } get passwordColorClass(): string { const strength = this.passwordStrength; if (strength && ["weak", "medium"].includes(strength)) { return "text-warning"; } else if (strength == "strong") { return "text-success"; } else { return "text-danger"; } } async handleRegisterSubmit(i: Signup, event: any) { event.preventDefault(); const { show_nsfw, answer, captcha_answer, captcha_uuid, email, honeypot, password, password_verify, username, } = i.state.form; if (username && password && password_verify) { i.setState({ registerRes: { state: "loading" } }); const registerRes = await HttpService.client.register({ username, password, password_verify, email, show_nsfw, captcha_uuid, captcha_answer, honeypot, answer, }); switch (registerRes.state) { case "failed": { toast(registerRes.msg, "danger"); i.setState({ registerRes: { state: "empty" } }); break; } case "success": { const data = registerRes.data; // Only log them in if a jwt was set if (data.jwt) { UserService.Instance.login(data); const site = await HttpService.client.getSite({ auth: myAuth() }); if (site.state === "success") { UserService.Instance.myUserInfo = site.data.my_user; } i.props.history.replace("/communities"); } else { if (data.verify_email_sent) { toast(i18n.t("verify_email_sent")); } if (data.registration_created) { toast(i18n.t("registration_application_sent")); } i.props.history.push("/"); } break; } } } } handleRegisterUsernameChange(i: Signup, event: any) { i.state.form.username = event.target.value.trim(); i.setState(i.state); } handleRegisterEmailChange(i: Signup, event: any) { i.state.form.email = event.target.value; if (i.state.form.email == "") { i.state.form.email = undefined; } i.setState(i.state); } handleRegisterPasswordChange(i: Signup, event: any) { i.state.form.password = event.target.value; i.setState(i.state); } handleRegisterPasswordVerifyChange(i: Signup, event: any) { i.state.form.password_verify = event.target.value; i.setState(i.state); } handleRegisterShowNsfwChange(i: Signup, event: any) { i.state.form.show_nsfw = event.target.checked; i.setState(i.state); } handleRegisterCaptchaAnswerChange(i: Signup, event: any) { i.state.form.captcha_answer = event.target.value; i.setState(i.state); } handleAnswerChange(val: string) { this.setState(s => ((s.form.answer = val), s)); } handleHoneyPotChange(i: Signup, event: any) { i.state.form.honeypot = event.target.value; i.setState(i.state); } async handleRegenCaptcha(i: Signup) { i.audio = undefined; i.setState({ captchaPlaying: false }); await i.fetchCaptcha(); } handleCaptchaPlay(i: Signup) { // This was a bad bug, it should only build the new audio on a new file. // Replays would stop prematurely if this was rebuilt every time. if (i.state.captchaRes.state == "success" && i.state.captchaRes.data.ok) { const captchaRes = i.state.captchaRes.data.ok; if (!i.audio) { const base64 = `data:audio/wav;base64,${captchaRes.wav}`; i.audio = new Audio(base64); i.audio.play(); i.setState({ captchaPlaying: true }); i.audio.addEventListener("ended", () => { if (i.audio) { i.audio.currentTime = 0; i.setState({ captchaPlaying: false }); } }); } } } captchaPngSrc(captcha: CaptchaResponse) { return `data:image/png;base64,${captcha.png}`; } }