import { Options, passwordStrength } from "check-password-strength"; import { I18nKeys } from "i18next"; import { Component, linkEvent } from "inferno"; import { T } from "inferno-i18next-dess"; import { GetCaptchaResponse, GetSiteResponse, LoginResponse, Register, SiteView, UserOperation, } from "lemmy-js-client"; import { Subscription } from "rxjs"; import { i18n } from "../../i18next"; import { UserService, WebSocketService } from "../../services"; import { authField, isBrowser, joinLemmyUrl, setIsoData, toast, validEmail, wsClient, wsJsonToRes, wsSubscribe, wsUserOp, } from "../../utils"; import { HtmlTags } from "../common/html-tags"; import { Icon, Spinner } from "../common/icon"; 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: GetCaptchaResponse; captchaPlaying: boolean; site_view: SiteView; } export class Signup extends Component { private isoData = setIsoData(this.context); private subscription: Subscription; private audio: HTMLAudioElement; emptyState: State = { registerForm: { username: undefined, password: undefined, password_verify: undefined, show_nsfw: false, captcha_uuid: undefined, captcha_answer: undefined, honeypot: undefined, }, registerLoading: false, captcha: undefined, captchaPlaying: false, site_view: this.isoData.site_res.site_view, }; constructor(props: any, context: any) { super(props, context); this.state = this.emptyState; 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 `${i18n.t("login")} - ${this.state.site_view.site.name}`; } get isLemmyMl(): boolean { return isBrowser() && window.location.hostname == "lemmy.ml"; } render() { return (
{this.registerForm()}
); } registerForm() { return (
{i18n.t("sign_up")}
{!validEmail(this.state.registerForm.email) && ( )}
{this.state.registerForm.password && (
{i18n.t(this.passwordStrength as I18nKeys)}
)}
{this.state.captcha && (
{this.showCaptcha()}
)} {this.state.site_view.site.enable_nsfw && (
)} {this.isLemmyMl && ( )}
); } showCaptcha() { return (
{this.state.captcha.ok && ( <> {i18n.t("captcha")} {this.state.captcha.ok.wav && ( )} )}
); } 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 = event.target.value; if (i.state.registerForm.email == "") { i.state.registerForm.email = undefined; } 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 = event.target.value; i.setState(i.state); } handleHoneyPotChange(i: Signup, event: any) { i.state.registerForm.honeypot = 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. if (i.audio == null) { let base64 = `data:audio/wav;base64,${i.state.captcha.ok.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); }); } captchaPngSrc() { return `data:image/png;base64,${this.state.captcha.ok.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).data; this.state = this.emptyState; this.setState(this.state); UserService.Instance.login(data); WebSocketService.Instance.send( wsClient.userJoin({ auth: authField(), }) ); this.props.history.push("/communities"); } else if (op == UserOperation.GetCaptcha) { let data = wsJsonToRes(msg).data; if (data.ok) { this.state.captcha = data; this.state.registerForm.captcha_uuid = data.ok.uuid; this.setState(this.state); } } else if (op == UserOperation.PasswordReset) { toast(i18n.t("reset_password_mail_sent")); } else if (op == UserOperation.GetSite) { let data = wsJsonToRes(msg).data; this.state.site_view = data.site_view; this.setState(this.state); } } } }