1 import { myAuth, setIsoData } from "@utils/app";
2 import { isBrowser } from "@utils/browser";
3 import { validEmail } from "@utils/helpers";
4 import { Component, linkEvent } from "inferno";
5 import { T } from "inferno-i18next-dess";
12 } from "lemmy-js-client";
13 import { joinLemmyUrl } from "../../config";
14 import { mdToHtml } from "../../markdown";
15 import { I18NextService, UserService } from "../../services";
16 import { HttpService, RequestState } from "../../services/HttpService";
17 import { toast } from "../../toast";
18 import { HtmlTags } from "../common/html-tags";
19 import { Icon, Spinner } from "../common/icon";
20 import { MarkdownTextArea } from "../common/markdown-textarea";
21 import PasswordInput from "../common/password-input";
24 registerRes: RequestState<LoginResponse>;
25 captchaRes: RequestState<GetCaptchaResponse>;
30 password_verify?: string;
32 captcha_uuid?: string;
33 captcha_answer?: string;
37 captchaPlaying: boolean;
38 siteRes: GetSiteResponse;
41 export class Signup extends Component<any, State> {
42 private isoData = setIsoData(this.context);
43 private audio?: HTMLAudioElement;
46 registerRes: { state: "empty" },
47 captchaRes: { state: "empty" },
51 captchaPlaying: false,
52 siteRes: this.isoData.site_res,
55 constructor(props: any, context: any) {
56 super(props, context);
58 this.handleAnswerChange = this.handleAnswerChange.bind(this);
61 async componentDidMount() {
62 if (this.state.siteRes.site_view.local_site.captcha_enabled) {
63 await this.fetchCaptcha();
67 async fetchCaptcha() {
68 this.setState({ captchaRes: { state: "loading" } });
70 captchaRes: await HttpService.client.getCaptcha({}),
74 if (s.captchaRes.state === "success") {
75 s.form.captcha_uuid = s.captchaRes.data.ok?.uuid;
81 get documentTitle(): string {
82 const siteView = this.state.siteRes.site_view;
83 return `${this.titleName(siteView)} - ${siteView.site.name}`;
86 titleName(siteView: SiteView): string {
87 return I18NextService.i18n.t(
88 siteView.local_site.private_instance ? "apply_to_join" : "sign_up",
92 get isLemmyMl(): boolean {
93 return isBrowser() && window.location.hostname === "lemmy.ml";
98 <div className="home-signup container-lg">
100 title={this.documentTitle}
101 path={this.context.router.route.match.url}
103 <div className="row">
104 <div className="col-12 col-lg-6 offset-lg-3">
105 {this.registerForm()}
113 const siteView = this.state.siteRes.site_view;
116 className="was-validated"
117 onSubmit={linkEvent(this, this.handleRegisterSubmit)}
119 <h1 className="h4 mb-4">{this.titleName(siteView)}</h1>
122 <div className="mb-3 row">
123 <div className="mt-2 mb-0 alert alert-warning" role="alert">
124 <T i18nKey="lemmy_ml_registration_message">
125 #<a href={joinLemmyUrl}>#</a>
131 <div className="mb-3 row">
133 className="col-sm-2 col-form-label"
134 htmlFor="register-username"
136 {I18NextService.i18n.t("username")}
139 <div className="col-sm-10">
142 id="register-username"
143 className="form-control"
144 value={this.state.form.username}
145 onInput={linkEvent(this, this.handleRegisterUsernameChange)}
148 pattern="[a-zA-Z0-9_]+"
149 title={I18NextService.i18n.t("community_reqs")}
154 <div className="mb-3 row">
155 <label className="col-sm-2 col-form-label" htmlFor="register-email">
156 {I18NextService.i18n.t("email")}
158 <div className="col-sm-10">
162 className="form-control"
164 siteView.local_site.require_email_verification
165 ? I18NextService.i18n.t("required")
166 : I18NextService.i18n.t("optional")
168 value={this.state.form.email}
170 onInput={linkEvent(this, this.handleRegisterEmailChange)}
171 required={siteView.local_site.require_email_verification}
174 {!siteView.local_site.require_email_verification &&
175 this.state.form.email &&
176 !validEmail(this.state.form.email) && (
177 <div className="mt-2 mb-0 alert alert-warning" role="alert">
178 <Icon icon="alert-triangle" classes="icon-inline me-2" />
179 {I18NextService.i18n.t("no_password_reset")}
185 <div className="mb-3">
187 id="register-password"
188 value={this.state.form.password}
189 onInput={linkEvent(this, this.handleRegisterPasswordChange)}
191 label={I18NextService.i18n.t("password")}
196 <div className="mb-3">
198 id="register-verify-password"
199 value={this.state.form.password_verify}
200 onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
201 label={I18NextService.i18n.t("verify_password")}
206 {siteView.local_site.registration_mode === "RequireApplication" && (
208 <div className="mb-3 row">
209 <div className="offset-sm-2 col-sm-10">
210 <div className="mt-2 alert alert-warning" role="alert">
211 <Icon icon="alert-triangle" classes="icon-inline me-2" />
212 {I18NextService.i18n.t("fill_out_application")}
214 {siteView.local_site.application_question && (
217 dangerouslySetInnerHTML={mdToHtml(
218 siteView.local_site.application_question,
225 <div className="mb-3 row">
227 className="col-sm-2 col-form-label"
228 htmlFor="application_answer"
230 {I18NextService.i18n.t("answer")}
232 <div className="col-sm-10">
235 onContentChange={this.handleAnswerChange}
236 hideNavigationWarnings
244 {this.renderCaptcha()}
245 <div className="mb-3 row">
246 <div className="col-sm-10">
247 <div className="form-check">
249 className="form-check-input"
250 id="register-show-nsfw"
252 checked={this.state.form.show_nsfw}
253 onChange={linkEvent(this, this.handleRegisterShowNsfwChange)}
255 <label className="form-check-label" htmlFor="register-show-nsfw">
256 {I18NextService.i18n.t("show_nsfw")}
266 className="form-control honeypot"
268 value={this.state.form.honeypot}
269 onInput={linkEvent(this, this.handleHoneyPotChange)}
271 <div className="mb-3 row">
272 <div className="col-sm-10">
273 <button type="submit" className="btn btn-secondary">
274 {this.state.registerRes.state === "loading" ? (
277 this.titleName(siteView)
287 switch (this.state.captchaRes.state) {
291 const res = this.state.captchaRes.data;
293 <div className="mb-3 row">
294 <label className="col-sm-2" htmlFor="register-captcha">
295 <span className="me-2">
296 {I18NextService.i18n.t("enter_code")}
300 className="btn btn-secondary"
301 onClick={linkEvent(this, this.handleRegenCaptcha)}
302 aria-label={I18NextService.i18n.t("captcha")}
304 <Icon icon="refresh-cw" classes="icon-refresh-cw" />
307 {this.showCaptcha(res)}
308 <div className="col-sm-6">
311 className="form-control"
312 id="register-captcha"
313 value={this.state.form.captcha_answer}
316 this.handleRegisterCaptchaAnswerChange,
327 showCaptcha(res: GetCaptchaResponse) {
328 const captchaRes = res?.ok;
329 return captchaRes ? (
330 <div className="col-sm-4">
333 className="rounded-top img-fluid"
334 src={this.captchaPngSrc(captchaRes)}
335 style="border-bottom-right-radius: 0; border-bottom-left-radius: 0;"
336 alt={I18NextService.i18n.t("captcha")}
340 className="rounded-bottom btn btn-sm btn-secondary d-block"
341 style="border-top-right-radius: 0; border-top-left-radius: 0;"
342 title={I18NextService.i18n.t("play_captcha_audio")}
343 onClick={linkEvent(this, this.handleCaptchaPlay)}
345 disabled={this.state.captchaPlaying}
347 <Icon icon="play" classes="icon-play" />
357 async handleRegisterSubmit(i: Signup, event: any) {
358 event.preventDefault();
370 if (username && password && password_verify) {
371 i.setState({ registerRes: { state: "loading" } });
373 const registerRes = await HttpService.client.register({
384 switch (registerRes.state) {
386 toast(registerRes.msg, "danger");
387 i.setState({ registerRes: { state: "empty" } });
392 const data = registerRes.data;
394 // Only log them in if a jwt was set
396 UserService.Instance.login({
400 const site = await HttpService.client.getSite({ auth: myAuth() });
402 if (site.state === "success") {
403 UserService.Instance.myUserInfo = site.data.my_user;
406 i.props.history.replace("/communities");
408 if (data.verify_email_sent) {
409 toast(I18NextService.i18n.t("verify_email_sent"));
411 if (data.registration_created) {
412 toast(I18NextService.i18n.t("registration_application_sent"));
414 i.props.history.push("/");
422 handleRegisterUsernameChange(i: Signup, event: any) {
423 i.state.form.username = event.target.value.trim();
427 handleRegisterEmailChange(i: Signup, event: any) {
428 i.state.form.email = event.target.value;
429 if (i.state.form.email === "") {
430 i.state.form.email = undefined;
435 handleRegisterPasswordChange(i: Signup, event: any) {
436 i.state.form.password = event.target.value;
440 handleRegisterPasswordVerifyChange(i: Signup, event: any) {
441 i.state.form.password_verify = event.target.value;
445 handleRegisterShowNsfwChange(i: Signup, event: any) {
446 i.state.form.show_nsfw = event.target.checked;
450 handleRegisterCaptchaAnswerChange(i: Signup, event: any) {
451 i.state.form.captcha_answer = event.target.value;
455 handleAnswerChange(val: string) {
456 this.setState(s => ((s.form.answer = val), s));
459 handleHoneyPotChange(i: Signup, event: any) {
460 i.state.form.honeypot = event.target.value;
464 async handleRegenCaptcha(i: Signup) {
466 i.setState({ captchaPlaying: false });
467 await i.fetchCaptcha();
470 handleCaptchaPlay(i: Signup) {
471 // This was a bad bug, it should only build the new audio on a new file.
472 // Replays would stop prematurely if this was rebuilt every time.
474 if (i.state.captchaRes.state === "success" && i.state.captchaRes.data.ok) {
475 const captchaRes = i.state.captchaRes.data.ok;
477 const base64 = `data:audio/wav;base64,${captchaRes.wav}`;
478 i.audio = new Audio(base64);
481 i.setState({ captchaPlaying: true });
483 i.audio.addEventListener("ended", () => {
485 i.audio.currentTime = 0;
486 i.setState({ captchaPlaying: false });
493 captchaPngSrc(captcha: CaptchaResponse) {
494 return `data:image/png;base64,${captcha.png}`;