1 import { myAuth, setIsoData } from "@utils/app";
2 import { isBrowser } from "@utils/browser";
3 import { validEmail } from "@utils/helpers";
4 import { Options, passwordStrength } from "check-password-strength";
5 import { NoOptionI18nKeys } from "i18next";
6 import { Component, linkEvent } from "inferno";
7 import { T } from "inferno-i18next-dess";
14 } from "lemmy-js-client";
15 import { joinLemmyUrl } from "../../config";
16 import { i18n } from "../../i18next";
17 import { mdToHtml } from "../../markdown";
18 import { UserService } from "../../services";
19 import { HttpService, RequestState } from "../../services/HttpService";
20 import { toast } from "../../toast";
21 import { HtmlTags } from "../common/html-tags";
22 import { Icon, Spinner } from "../common/icon";
23 import { MarkdownTextArea } from "../common/markdown-textarea";
25 const passwordStrengthOptions: Options<string> = [
53 registerRes: RequestState<LoginResponse>;
54 captchaRes: RequestState<GetCaptchaResponse>;
59 password_verify?: string;
61 captcha_uuid?: string;
62 captcha_answer?: string;
66 captchaPlaying: boolean;
67 siteRes: GetSiteResponse;
70 export class Signup extends Component<any, State> {
71 private isoData = setIsoData(this.context);
72 private audio?: HTMLAudioElement;
75 registerRes: { state: "empty" },
76 captchaRes: { state: "empty" },
80 captchaPlaying: false,
81 siteRes: this.isoData.site_res,
84 constructor(props: any, context: any) {
85 super(props, context);
87 this.handleAnswerChange = this.handleAnswerChange.bind(this);
90 async componentDidMount() {
91 if (this.state.siteRes.site_view.local_site.captcha_enabled) {
92 await this.fetchCaptcha();
96 async fetchCaptcha() {
97 this.setState({ captchaRes: { state: "loading" } });
99 captchaRes: await HttpService.client.getCaptcha({}),
103 if (s.captchaRes.state == "success") {
104 s.form.captcha_uuid = s.captchaRes.data.ok?.uuid;
110 get documentTitle(): string {
111 const siteView = this.state.siteRes.site_view;
112 return `${this.titleName(siteView)} - ${siteView.site.name}`;
115 titleName(siteView: SiteView): string {
117 siteView.local_site.private_instance ? "apply_to_join" : "sign_up"
121 get isLemmyMl(): boolean {
122 return isBrowser() && window.location.hostname == "lemmy.ml";
127 <div className="home-signup container-lg">
129 title={this.documentTitle}
130 path={this.context.router.route.match.url}
132 <div className="row">
133 <div className="col-12 col-lg-6 offset-lg-3">
134 {this.registerForm()}
142 const siteView = this.state.siteRes.site_view;
144 <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
145 <h5>{this.titleName(siteView)}</h5>
148 <div className="mb-3 row">
149 <div className="mt-2 mb-0 alert alert-warning" role="alert">
150 <T i18nKey="lemmy_ml_registration_message">
151 #<a href={joinLemmyUrl}>#</a>
157 <div className="mb-3 row">
159 className="col-sm-2 col-form-label"
160 htmlFor="register-username"
165 <div className="col-sm-10">
168 id="register-username"
169 className="form-control"
170 value={this.state.form.username}
171 onInput={linkEvent(this, this.handleRegisterUsernameChange)}
174 pattern="[a-zA-Z0-9_]+"
175 title={i18n.t("community_reqs")}
180 <div className="mb-3 row">
181 <label className="col-sm-2 col-form-label" htmlFor="register-email">
184 <div className="col-sm-10">
188 className="form-control"
190 siteView.local_site.require_email_verification
194 value={this.state.form.email}
196 onInput={linkEvent(this, this.handleRegisterEmailChange)}
197 required={siteView.local_site.require_email_verification}
200 {!siteView.local_site.require_email_verification &&
201 this.state.form.email &&
202 !validEmail(this.state.form.email) && (
203 <div className="mt-2 mb-0 alert alert-warning" role="alert">
204 <Icon icon="alert-triangle" classes="icon-inline me-2" />
205 {i18n.t("no_password_reset")}
211 <div className="mb-3 row">
213 className="col-sm-2 col-form-label"
214 htmlFor="register-password"
218 <div className="col-sm-10">
221 id="register-password"
222 value={this.state.form.password}
223 autoComplete="new-password"
224 onInput={linkEvent(this, this.handleRegisterPasswordChange)}
227 className="form-control"
230 {this.state.form.password && (
231 <div className={this.passwordColorClass}>
232 {i18n.t(this.passwordStrength as NoOptionI18nKeys)}
238 <div className="mb-3 row">
240 className="col-sm-2 col-form-label"
241 htmlFor="register-verify-password"
243 {i18n.t("verify_password")}
245 <div className="col-sm-10">
248 id="register-verify-password"
249 value={this.state.form.password_verify}
250 autoComplete="new-password"
251 onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
253 className="form-control"
259 {siteView.local_site.registration_mode == "RequireApplication" && (
261 <div className="mb-3 row">
262 <div className="offset-sm-2 col-sm-10">
263 <div className="mt-2 alert alert-warning" role="alert">
264 <Icon icon="alert-triangle" classes="icon-inline me-2" />
265 {i18n.t("fill_out_application")}
267 {siteView.local_site.application_question && (
270 dangerouslySetInnerHTML={mdToHtml(
271 siteView.local_site.application_question
278 <div className="mb-3 row">
280 className="col-sm-2 col-form-label"
281 htmlFor="application_answer"
285 <div className="col-sm-10">
288 onContentChange={this.handleAnswerChange}
289 hideNavigationWarnings
297 {this.renderCaptcha()}
298 <div className="mb-3 row">
299 <div className="col-sm-10">
300 <div className="form-check">
302 className="form-check-input"
303 id="register-show-nsfw"
305 checked={this.state.form.show_nsfw}
306 onChange={linkEvent(this, this.handleRegisterShowNsfwChange)}
308 <label className="form-check-label" htmlFor="register-show-nsfw">
309 {i18n.t("show_nsfw")}
319 className="form-control honeypot"
321 value={this.state.form.honeypot}
322 onInput={linkEvent(this, this.handleHoneyPotChange)}
324 <div className="mb-3 row">
325 <div className="col-sm-10">
326 <button type="submit" className="btn btn-secondary">
327 {this.state.registerRes.state == "loading" ? (
330 this.titleName(siteView)
340 switch (this.state.captchaRes.state) {
344 const res = this.state.captchaRes.data;
346 <div className="mb-3 row">
347 <label className="col-sm-2" htmlFor="register-captcha">
348 <span className="me-2">{i18n.t("enter_code")}</span>
351 className="btn btn-secondary"
352 onClick={linkEvent(this, this.handleRegenCaptcha)}
353 aria-label={i18n.t("captcha")}
355 <Icon icon="refresh-cw" classes="icon-refresh-cw" />
358 {this.showCaptcha(res)}
359 <div className="col-sm-6">
362 className="form-control"
363 id="register-captcha"
364 value={this.state.form.captcha_answer}
367 this.handleRegisterCaptchaAnswerChange
378 showCaptcha(res: GetCaptchaResponse) {
379 const captchaRes = res?.ok;
380 return captchaRes ? (
381 <div className="col-sm-4">
384 className="rounded-top img-fluid"
385 src={this.captchaPngSrc(captchaRes)}
386 style="border-bottom-right-radius: 0; border-bottom-left-radius: 0;"
387 alt={i18n.t("captcha")}
391 className="rounded-bottom btn btn-sm btn-secondary d-block"
392 style="border-top-right-radius: 0; border-top-left-radius: 0;"
393 title={i18n.t("play_captcha_audio")}
394 onClick={linkEvent(this, this.handleCaptchaPlay)}
396 disabled={this.state.captchaPlaying}
398 <Icon icon="play" classes="icon-play" />
408 get passwordStrength(): string | undefined {
409 const password = this.state.form.password;
411 ? passwordStrength(password, passwordStrengthOptions).value
415 get passwordColorClass(): string {
416 const strength = this.passwordStrength;
418 if (strength && ["weak", "medium"].includes(strength)) {
419 return "text-warning";
420 } else if (strength == "strong") {
421 return "text-success";
423 return "text-danger";
427 async handleRegisterSubmit(i: Signup, event: any) {
428 event.preventDefault();
440 if (username && password && password_verify) {
441 i.setState({ registerRes: { state: "loading" } });
443 const registerRes = await HttpService.client.register({
454 switch (registerRes.state) {
456 toast(registerRes.msg, "danger");
457 i.setState({ registerRes: { state: "empty" } });
462 const data = registerRes.data;
464 // Only log them in if a jwt was set
466 UserService.Instance.login(data);
468 const site = await HttpService.client.getSite({ auth: myAuth() });
470 if (site.state === "success") {
471 UserService.Instance.myUserInfo = site.data.my_user;
474 i.props.history.replace("/communities");
476 if (data.verify_email_sent) {
477 toast(i18n.t("verify_email_sent"));
479 if (data.registration_created) {
480 toast(i18n.t("registration_application_sent"));
482 i.props.history.push("/");
490 handleRegisterUsernameChange(i: Signup, event: any) {
491 i.state.form.username = event.target.value.trim();
495 handleRegisterEmailChange(i: Signup, event: any) {
496 i.state.form.email = event.target.value;
497 if (i.state.form.email == "") {
498 i.state.form.email = undefined;
503 handleRegisterPasswordChange(i: Signup, event: any) {
504 i.state.form.password = event.target.value;
508 handleRegisterPasswordVerifyChange(i: Signup, event: any) {
509 i.state.form.password_verify = event.target.value;
513 handleRegisterShowNsfwChange(i: Signup, event: any) {
514 i.state.form.show_nsfw = event.target.checked;
518 handleRegisterCaptchaAnswerChange(i: Signup, event: any) {
519 i.state.form.captcha_answer = event.target.value;
523 handleAnswerChange(val: string) {
524 this.setState(s => ((s.form.answer = val), s));
527 handleHoneyPotChange(i: Signup, event: any) {
528 i.state.form.honeypot = event.target.value;
532 async handleRegenCaptcha(i: Signup) {
534 i.setState({ captchaPlaying: false });
535 await i.fetchCaptcha();
538 handleCaptchaPlay(i: Signup) {
539 // This was a bad bug, it should only build the new audio on a new file.
540 // Replays would stop prematurely if this was rebuilt every time.
542 if (i.state.captchaRes.state == "success" && i.state.captchaRes.data.ok) {
543 const captchaRes = i.state.captchaRes.data.ok;
545 const base64 = `data:audio/wav;base64,${captchaRes.wav}`;
546 i.audio = new Audio(base64);
549 i.setState({ captchaPlaying: true });
551 i.audio.addEventListener("ended", () => {
553 i.audio.currentTime = 0;
554 i.setState({ captchaPlaying: false });
561 captchaPngSrc(captcha: CaptchaResponse) {
562 return `data:image/png;base64,${captcha.png}`;