X-Git-Url: http://these/git/?a=blobdiff_plain;f=src%2Fshared%2Fcomponents%2Fhome%2Fsignup.tsx;h=3efeac6208e104b99b3cf123dbc1afeceaa495a0;hb=2b1af707c3df6126b3e6890106c03c60ad49b1be;hp=65741eba3c789f7d5d91ab84addbb9addb7ece3c;hpb=f61037f5d89f12818c8100f907a98b74e980112a;p=lemmy-ui.git diff --git a/src/shared/components/home/signup.tsx b/src/shared/components/home/signup.tsx index 65741eb..3efeac6 100644 --- a/src/shared/components/home/signup.tsx +++ b/src/shared/components/home/signup.tsx @@ -7,24 +7,19 @@ import { GetCaptchaResponse, GetSiteResponse, LoginResponse, - Register, SiteView, - UserOperation, - wsJsonToRes, - wsUserOp, } from "lemmy-js-client"; -import { Subscription } from "rxjs"; import { i18n } from "../../i18next"; -import { UserService, WebSocketService } from "../../services"; +import { UserService } from "../../services"; +import { HttpService, RequestState } from "../../services/HttpService"; import { isBrowser, joinLemmyUrl, mdToHtml, + myAuth, setIsoData, toast, validEmail, - wsClient, - wsSubscribe, } from "../../utils"; import { HtmlTags } from "../common/html-tags"; import { Icon, Spinner } from "../common/icon"; @@ -58,6 +53,8 @@ const passwordStrengthOptions: Options = [ ]; interface State { + registerRes: RequestState; + captchaRes: RequestState; form: { username?: string; email?: string; @@ -69,22 +66,20 @@ interface State { 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 = { + registerRes: { state: "empty" }, + captchaRes: { state: "empty" }, form: { show_nsfw: false, }, - registerLoading: false, captchaPlaying: false, siteRes: this.isoData.site_res, }; @@ -93,19 +88,26 @@ export class Signup extends Component { 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({})); + async componentDidMount() { + if (this.state.siteRes.site_view.local_site.captcha_enabled) { + await this.fetchCaptcha(); } } - componentWillUnmount() { - if (isBrowser()) { - this.subscription?.unsubscribe(); - } + async fetchCaptcha() { + this.setState({ captchaRes: { state: "loading" } }); + this.setState({ + captchaRes: await HttpService.client.getCaptcha({}), + }); + + this.setState(s => { + if (s.captchaRes.state == "success") { + s.form.captcha_uuid = s.captchaRes.data.ok?.uuid; + } + return s; + }); } get documentTitle(): string { @@ -285,6 +287,7 @@ export class Signup extends Component {
{
)} - - {this.state.captcha && ( -
- - {this.showCaptcha()} -
- -
-
- )} + {this.renderCaptcha()} {siteView.local_site.enable_nsfw && (
@@ -358,7 +332,7 @@ export class Signup extends Component {
+ + {this.showCaptcha(res)} +
+ +
+
+ ); + } + } + } + + showCaptcha(res: GetCaptchaResponse) { + const captchaRes = res?.ok; return captchaRes ? (
<> @@ -419,23 +432,66 @@ export class Signup extends Component { } } - handleRegisterSubmit(i: Signup, event: any) { + async handleRegisterSubmit(i: Signup, event: any) { event.preventDefault(); - i.setState({ registerLoading: true }); - const cForm = i.state.form; - if (cForm.username && cForm.password && cForm.password_verify) { - const 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)); + const { + show_nsfw, + answer, + captcha_answer, + captcha_uuid, + email, + honeypot, + password, + password_verify, + username, + } = i.state.form; + if (username && password && password_verify) { + i.setState({ registerRes: { state: "loading" } }); + + const registerRes = await HttpService.client.register({ + username, + password, + password_verify, + email, + show_nsfw, + captcha_uuid, + captcha_answer, + honeypot, + answer, + }); + switch (registerRes.state) { + case "failed": { + toast(registerRes.msg, "danger"); + i.setState({ registerRes: { state: "empty" } }); + break; + } + + case "success": { + const data = registerRes.data; + + // Only log them in if a jwt was set + if (data.jwt) { + UserService.Instance.login(data); + + const site = await HttpService.client.getSite({ auth: myAuth() }); + + if (site.state === "success") { + UserService.Instance.myUserInfo = site.data.my_user; + } + + i.props.history.replace("/communities"); + } else { + if (data.verify_email_sent) { + toast(i18n.t("verify_email_sent")); + } + if (data.registration_created) { + toast(i18n.t("registration_application_sent")); + } + i.props.history.push("/"); + } + break; + } + } } } @@ -481,17 +537,18 @@ export class Signup extends Component { i.setState(i.state); } - handleRegenCaptcha(i: Signup) { + async handleRegenCaptcha(i: Signup) { i.audio = undefined; i.setState({ captchaPlaying: false }); - WebSocketService.Instance.send(wsClient.getCaptcha({})); + await i.fetchCaptcha(); } 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. - const captchaRes = i.state.captcha?.ok; - if (captchaRes) { + + if (i.state.captchaRes.state == "success" && i.state.captchaRes.data.ok) { + const captchaRes = i.state.captchaRes.data.ok; if (!i.audio) { const base64 = `data:audio/wav;base64,${captchaRes.wav}`; i.audio = new Audio(base64); @@ -512,45 +569,4 @@ export class Signup extends Component { captchaPngSrc(captcha: CaptchaResponse) { return `data:image/png;base64,${captcha.png}`; } - - parseMessage(msg: any) { - const 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) { - const 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) { - const 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) { - const data = wsJsonToRes(msg); - this.setState({ siteRes: data }); - } - } - } }