import { Component, linkEvent } from "inferno"; import { T } from "inferno-i18next"; import { GetCaptchaResponse, GetSiteResponse, Login as LoginForm, LoginResponse, PasswordReset, 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"; interface State { loginForm: LoginForm; registerForm: Register; loginLoading: boolean; registerLoading: boolean; captcha: GetCaptchaResponse; captchaPlaying: boolean; site_view: SiteView; } export class Login extends Component { private isoData = setIsoData(this.context); private subscription: Subscription; private audio: HTMLAudioElement; emptyState: State = { loginForm: { username_or_email: undefined, password: undefined, }, registerForm: { username: undefined, password: undefined, password_verify: undefined, show_nsfw: false, captcha_uuid: undefined, captcha_answer: undefined, }, loginLoading: false, 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.loginForm()}
{this.registerForm()}
); } loginForm() { return (
{i18n.t("login")}
); } registerForm() { return (
{i18n.t("sign_up")}
{!validEmail(this.state.registerForm.email) && ( )}
{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 && ( )} )}
); } handleLoginSubmit(i: Login, event: any) { event.preventDefault(); i.state.loginLoading = true; i.setState(i.state); WebSocketService.Instance.send(wsClient.login(i.state.loginForm)); } handleLoginUsernameChange(i: Login, event: any) { i.state.loginForm.username_or_email = event.target.value; i.setState(i.state); } handleLoginPasswordChange(i: Login, event: any) { i.state.loginForm.password = event.target.value; i.setState(i.state); } handleRegisterSubmit(i: Login, event: any) { event.preventDefault(); i.state.registerLoading = true; i.setState(i.state); WebSocketService.Instance.send(wsClient.register(i.state.registerForm)); } handleRegisterUsernameChange(i: Login, event: any) { i.state.registerForm.username = event.target.value; i.setState(i.state); } handleRegisterEmailChange(i: Login, 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: Login, event: any) { i.state.registerForm.password = event.target.value; i.setState(i.state); } handleRegisterPasswordVerifyChange(i: Login, event: any) { i.state.registerForm.password_verify = event.target.value; i.setState(i.state); } handleRegisterShowNsfwChange(i: Login, event: any) { i.state.registerForm.show_nsfw = event.target.checked; i.setState(i.state); } handleRegisterCaptchaAnswerChange(i: Login, event: any) { i.state.registerForm.captcha_answer = event.target.value; i.setState(i.state); } handleRegenCaptcha(i: Login) { i.audio = null; i.state.captchaPlaying = false; i.setState(i.state); WebSocketService.Instance.send(wsClient.getCaptcha()); } handlePasswordReset(i: Login, event: any) { event.preventDefault(); let resetForm: PasswordReset = { email: i.state.loginForm.username_or_email, }; WebSocketService.Instance.send(wsClient.passwordReset(resetForm)); } handleCaptchaPlay(i: Login) { // 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.Login) { let data = wsJsonToRes(msg).data; this.state = this.emptyState; this.setState(this.state); UserService.Instance.login(data); WebSocketService.Instance.send( wsClient.userJoin({ auth: authField(), }) ); toast(i18n.t("logged_in")); this.props.history.push("/"); } 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); } } } }