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, Register, RegistrationMode, SiteView, UserOperation, wsJsonToRes, wsUserOp, } from "lemmy-js-client"; import { Subscription } from "rxjs"; import { i18n } from "../../i18next"; import { UserService, WebSocketService } from "../../services"; import { isBrowser, joinLemmyUrl, mdToHtml, setIsoData, toast, validEmail, wsClient, wsSubscribe, } from "../../utils"; 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 { form: { username?: string; email?: string; password?: string; password_verify?: string; show_nsfw: boolean; captcha_uuid?: string; captcha_answer?: string; honeypot?: string; answer?: string; }; registerLoading: boolean; captcha?: GetCaptchaResponse; captchaPlaying: boolean; siteRes: GetSiteResponse; } export class Signup extends Component { private isoData = setIsoData(this.context); private subscription?: Subscription; private audio?: HTMLAudioElement; state: State = { form: { show_nsfw: false, }, registerLoading: false, captchaPlaying: false, siteRes: this.isoData.site_res, }; constructor(props: any, context: any) { super(props, context); this.handleAnswerChange = this.handleAnswerChange.bind(this); this.parseMessage = this.parseMessage.bind(this); this.subscription = wsSubscribe(this.parseMessage); if (isBrowser()) { WebSocketService.Instance.send(wsClient.getCaptcha()); } } componentWillUnmount() { if (isBrowser()) { this.subscription?.unsubscribe(); } } get documentTitle(): string { let 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() { let 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 == RegistrationMode.RequireApplication && ( <>
{i18n.t("fill_out_application")}
{siteView.local_site.application_question && (
)}
)} {this.state.captcha && (
{this.showCaptcha()}
)} {siteView.local_site.enable_nsfw && (
)}
); } showCaptcha() { let captchaRes = this.state.captcha?.ok; return captchaRes ? (
<> {i18n.t("captcha")} {captchaRes.wav && ( )}
) : ( <> ); } get passwordStrength(): string | undefined { let password = this.state.form.password; return password ? passwordStrength(password, passwordStrengthOptions).value : undefined; } get passwordColorClass(): string { let strength = this.passwordStrength; if (strength && ["weak", "medium"].includes(strength)) { return "text-warning"; } else if (strength == "strong") { return "text-success"; } else { return "text-danger"; } } handleRegisterSubmit(i: Signup, event: any) { event.preventDefault(); i.setState({ registerLoading: true }); let cForm = i.state.form; if (cForm.username && cForm.password && cForm.password_verify) { let form: Register = { username: cForm.username, password: cForm.password, password_verify: cForm.password_verify, email: cForm.email, show_nsfw: cForm.show_nsfw, captcha_uuid: cForm.captcha_uuid, captcha_answer: cForm.captcha_answer, honeypot: cForm.honeypot, answer: cForm.answer, }; WebSocketService.Instance.send(wsClient.register(form)); } } handleRegisterUsernameChange(i: Signup, event: any) { i.state.form.username = event.target.value; 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); } handleRegenCaptcha(i: Signup) { i.audio = undefined; i.setState({ captchaPlaying: false }); WebSocketService.Instance.send(wsClient.getCaptcha()); } 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. let captchaRes = i.state.captcha?.ok; if (captchaRes) { if (!i.audio) { let 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}`; } parseMessage(msg: any) { let op = wsUserOp(msg); console.log(msg); if (msg.error) { toast(i18n.t(msg.error), "danger"); this.setState(s => ((s.form.captcha_answer = undefined), s)); // Refetch another captcha // WebSocketService.Instance.send(wsClient.getCaptcha()); return; } else { if (op == UserOperation.Register) { let data = wsJsonToRes(msg); // Only log them in if a jwt was set if (data.jwt) { UserService.Instance.login(data); this.props.history.push("/communities"); location.reload(); } else { if (data.verify_email_sent) { toast(i18n.t("verify_email_sent")); } if (data.registration_created) { toast(i18n.t("registration_application_sent")); } this.props.history.push("/"); } } else if (op == UserOperation.GetCaptcha) { let data = wsJsonToRes(msg); if (data.ok) { this.setState({ captcha: data }); this.setState(s => ((s.form.captcha_uuid = data.ok?.uuid), s)); } } else if (op == UserOperation.PasswordReset) { toast(i18n.t("reset_password_mail_sent")); } else if (op == UserOperation.GetSite) { let data = wsJsonToRes(msg); this.setState({ siteRes: data }); } } } }