import { Component, linkEvent } from 'inferno'; import { Helmet } from 'inferno-helmet'; import { Subscription } from 'rxjs'; import { retryWhen, delay, take } from 'rxjs/operators'; import { LoginForm, RegisterForm, LoginResponse, UserOperation, PasswordResetForm, GetSiteResponse, GetCaptchaResponse, WebSocketJsonResponse, Site, } from 'lemmy-js-client'; import { WebSocketService, UserService } from '../services'; import { wsJsonToRes, validEmail, toast } from '../utils'; import { i18n } from '../i18next'; interface State { loginForm: LoginForm; registerForm: RegisterForm; loginLoading: boolean; registerLoading: boolean; captcha: GetCaptchaResponse; captchaPlaying: boolean; site: Site; } export class Login extends Component { private subscription: Subscription; emptyState: State = { loginForm: { username_or_email: undefined, password: undefined, }, registerForm: { username: undefined, password: undefined, password_verify: undefined, admin: false, show_nsfw: false, captcha_uuid: undefined, captcha_answer: undefined, }, loginLoading: false, registerLoading: false, captcha: undefined, captchaPlaying: false, site: { id: undefined, name: undefined, creator_id: undefined, published: undefined, creator_name: undefined, number_of_users: undefined, number_of_posts: undefined, number_of_comments: undefined, number_of_communities: undefined, enable_downvotes: undefined, open_registration: undefined, enable_nsfw: undefined, }, }; constructor(props: any, context: any) { super(props, context); this.state = this.emptyState; this.subscription = WebSocketService.Instance.subject .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10)))) .subscribe( msg => this.parseMessage(msg), err => console.error(err), () => console.log('complete') ); WebSocketService.Instance.getSite(); WebSocketService.Instance.getCaptcha(); } componentWillUnmount() { this.subscription.unsubscribe(); } get documentTitle(): string { if (this.state.site.name) { return `${i18n.t('login')} - ${this.state.site.name}`; } else { return 'Lemmy'; } } render() { return (
{this.loginForm()}
{this.registerForm()}
); } loginForm() { return (
{i18n.t('login')}
{validEmail(this.state.loginForm.username_or_email) && ( )}
); } registerForm() { return (
{i18n.t('sign_up')}
{!validEmail(this.state.registerForm.email) && ( )}
{this.state.captcha && (
{this.showCaptcha()}
)} {this.state.site.enable_nsfw && (
)}
); } showCaptcha() { return (
{this.state.captcha.ok && ( <> {this.state.captcha.ok.wav && ( )} )}
); } handleLoginSubmit(i: Login, event: any) { event.preventDefault(); i.state.loginLoading = true; i.setState(i.state); WebSocketService.Instance.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.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, _event: any) { event.preventDefault(); WebSocketService.Instance.getCaptcha(); } handlePasswordReset(i: Login) { event.preventDefault(); let resetForm: PasswordResetForm = { email: i.state.loginForm.username_or_email, }; WebSocketService.Instance.passwordReset(resetForm); } handleCaptchaPlay(i: Login) { event.preventDefault(); let snd = new Audio('data:audio/wav;base64,' + i.state.captcha.ok.wav); snd.play(); i.state.captchaPlaying = true; i.setState(i.state); snd.addEventListener('ended', () => { snd.currentTime = 0; i.state.captchaPlaying = false; i.setState(this.state); }); } captchaPngSrc() { return `data:image/png;base64,${this.state.captcha.ok.png}`; } parseMessage(msg: WebSocketJsonResponse) { let res = wsJsonToRes(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.getCaptcha(); this.setState(this.state); return; } else { if (res.op == UserOperation.Login) { let data = res.data as LoginResponse; this.state = this.emptyState; this.setState(this.state); UserService.Instance.login(data); WebSocketService.Instance.userJoin(); toast(i18n.t('logged_in')); this.props.history.push('/'); } else if (res.op == UserOperation.Register) { let data = res.data as LoginResponse; this.state = this.emptyState; this.setState(this.state); UserService.Instance.login(data); WebSocketService.Instance.userJoin(); this.props.history.push('/communities'); } else if (res.op == UserOperation.GetCaptcha) { let data = res.data as GetCaptchaResponse; if (data.ok) { this.state.captcha = data; this.state.registerForm.captcha_uuid = data.ok.uuid; this.setState(this.state); } } else if (res.op == UserOperation.PasswordReset) { toast(i18n.t('reset_password_mail_sent')); } else if (res.op == UserOperation.GetSite) { let data = res.data as GetSiteResponse; this.state.site = data.site; this.setState(this.state); } } } }