import { None, Option, Some } from "@sniptt/monads"; import { Options, passwordStrength } from "check-password-strength"; import { I18nKeys } from "i18next"; import { Component, linkEvent } from "inferno"; import { T } from "inferno-i18next-dess"; import { CaptchaResponse, GetCaptchaResponse, GetSiteResponse, LoginResponse, Register, SiteView, toUndefined, 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 { registerForm: Register; registerLoading: boolean; captcha: Option; captchaPlaying: boolean; siteRes: GetSiteResponse; } export class Signup extends Component { private isoData = setIsoData(this.context); private subscription: Subscription; private audio: HTMLAudioElement; emptyState: State = { registerForm: new Register({ username: undefined, password: undefined, password_verify: undefined, show_nsfw: false, captcha_uuid: None, captcha_answer: None, honeypot: None, answer: None, email: None, }), registerLoading: false, captcha: None, captchaPlaying: false, siteRes: this.isoData.site_res, }; constructor(props: any, context: any) { super(props, context); this.state = this.emptyState; 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 { return this.state.siteRes.site_view.match({ some: siteView => `${this.titleName(siteView)} - ${siteView.site.name}`, none: "", }); } titleName(siteView: SiteView): string { return i18n.t(siteView.site.private_instance ? "apply_to_join" : "sign_up"); } get isLemmyMl(): boolean { return isBrowser() && window.location.hostname == "lemmy.ml"; } render() { return (
{this.registerForm()}
); } registerForm() { return this.state.siteRes.site_view.match({ some: siteView => (
{this.titleName(siteView)}
{this.isLemmyMl && (
)}
{!siteView.site.require_email_verification && !this.state.registerForm.email .map(validEmail) .unwrapOr(true) && ( )}
{this.state.registerForm.password && (
{i18n.t(this.passwordStrength as I18nKeys)}
)}
{siteView.site.require_application && ( <>
{siteView.site.application_question.match({ some: question => (
), none: <>, })}
)} {this.state.captcha.isSome() && (
{this.showCaptcha()}
)} {siteView.site.enable_nsfw && (
)}
), none: <>, }); } showCaptcha() { return this.state.captcha.match({ some: captcha => (
{captcha.ok.match({ some: res => ( <> {i18n.t("captcha")} {res.wav.isSome() && ( )} ), none: <>, })}
), none: <>, }); } get passwordStrength() { return passwordStrength( this.state.registerForm.password, passwordStrengthOptions ).value; } get passwordColorClass(): string { let strength = this.passwordStrength; if (["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.state.registerLoading = true; i.setState(i.state); WebSocketService.Instance.send(wsClient.register(i.state.registerForm)); } handleRegisterUsernameChange(i: Signup, event: any) { i.state.registerForm.username = event.target.value; i.setState(i.state); } handleRegisterEmailChange(i: Signup, event: any) { i.state.registerForm.email = Some(event.target.value); if (i.state.registerForm.email.unwrap() == "") { i.state.registerForm.email = None; } i.setState(i.state); } handleRegisterPasswordChange(i: Signup, event: any) { i.state.registerForm.password = event.target.value; i.setState(i.state); } handleRegisterPasswordVerifyChange(i: Signup, event: any) { i.state.registerForm.password_verify = event.target.value; i.setState(i.state); } handleRegisterShowNsfwChange(i: Signup, event: any) { i.state.registerForm.show_nsfw = event.target.checked; i.setState(i.state); } handleRegisterCaptchaAnswerChange(i: Signup, event: any) { i.state.registerForm.captcha_answer = Some(event.target.value); i.setState(i.state); } handleAnswerChange(val: string) { this.state.registerForm.answer = Some(val); this.setState(this.state); } handleHoneyPotChange(i: Signup, event: any) { i.state.registerForm.honeypot = Some(event.target.value); i.setState(i.state); } handleRegenCaptcha(i: Signup) { i.audio = null; i.state.captchaPlaying = false; i.setState(i.state); 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. i.state.captcha.match({ some: captcha => captcha.ok.match({ some: res => { if (i.audio == null) { let base64 = `data:audio/wav;base64,${res.wav}`; i.audio = new Audio(base64); } i.audio.play(); i.state.captchaPlaying = true; i.setState(i.state); i.audio.addEventListener("ended", () => { i.audio.currentTime = 0; i.state.captchaPlaying = false; i.setState(i.state); }); }, none: void 0, }), none: void 0, }); } 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.state = this.emptyState; this.state.registerForm.captcha_answer = undefined; // Refetch another captcha // WebSocketService.Instance.send(wsClient.getCaptcha()); this.setState(this.state); return; } else { if (op == UserOperation.Register) { let data = wsJsonToRes(msg, LoginResponse); this.state = this.emptyState; this.setState(this.state); // Only log them in if a jwt was set if (data.jwt.isSome()) { UserService.Instance.login(data); this.props.history.push("/communities"); } 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, GetCaptchaResponse); data.ok.match({ some: res => { this.state.captcha = Some(data); this.state.registerForm.captcha_uuid = Some(res.uuid); this.setState(this.state); }, none: void 0, }); } else if (op == UserOperation.PasswordReset) { toast(i18n.t("reset_password_mail_sent")); } else if (op == UserOperation.GetSite) { let data = wsJsonToRes(msg, GetSiteResponse); this.state.siteRes = data; this.setState(this.state); } } } }