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 { mdToHtml } from "../../markdown";
17 import { FirstLoadService, I18NextService, UserService } from "../../services";
18 import { HttpService, RequestState } from "../../services/HttpService";
19 import { toast } from "../../toast";
20 import { HtmlTags } from "../common/html-tags";
21 import { Icon, Spinner } from "../common/icon";
22 import { MarkdownTextArea } from "../common/markdown-textarea";
24 const passwordStrengthOptions: Options<string> = [
52 registerRes: RequestState<LoginResponse>;
53 captchaRes: RequestState<GetCaptchaResponse>;
58 password_verify?: string;
60 captcha_uuid?: string;
61 captcha_answer?: string;
65 captchaPlaying: boolean;
66 siteRes: GetSiteResponse;
69 export class Signup extends Component<any, State> {
70 private isoData = setIsoData(this.context);
71 private audio?: HTMLAudioElement;
74 registerRes: { state: "empty" },
75 captchaRes: { state: "empty" },
79 captchaPlaying: false,
80 siteRes: this.isoData.site_res,
83 constructor(props: any, context: any) {
84 super(props, context);
86 this.handleAnswerChange = this.handleAnswerChange.bind(this);
88 FirstLoadService.isFirstLoad;
91 async componentDidMount() {
92 if (this.state.siteRes.site_view.local_site.captcha_enabled) {
93 await this.fetchCaptcha();
97 async fetchCaptcha() {
98 this.setState({ captchaRes: { state: "loading" } });
100 captchaRes: await HttpService.client.getCaptcha({}),
104 if (s.captchaRes.state == "success") {
105 s.form.captcha_uuid = s.captchaRes.data.ok?.uuid;
111 get documentTitle(): string {
112 const siteView = this.state.siteRes.site_view;
113 return `${this.titleName(siteView)} - ${siteView.site.name}`;
116 titleName(siteView: SiteView): string {
117 return I18NextService.i18n.t(
118 siteView.local_site.private_instance ? "apply_to_join" : "sign_up"
122 get isLemmyMl(): boolean {
123 return isBrowser() && window.location.hostname == "lemmy.ml";
128 <div className="home-signup container-lg">
130 title={this.documentTitle}
131 path={this.context.router.route.match.url}
133 <div className="row">
134 <div className="col-12 col-lg-6 offset-lg-3">
135 {this.registerForm()}
143 const siteView = this.state.siteRes.site_view;
145 <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
146 <h5>{this.titleName(siteView)}</h5>
149 <div className="mb-3 row">
150 <div className="mt-2 mb-0 alert alert-warning" role="alert">
151 <T i18nKey="lemmy_ml_registration_message">
152 #<a href={joinLemmyUrl}>#</a>
158 <div className="mb-3 row">
160 className="col-sm-2 col-form-label"
161 htmlFor="register-username"
163 {I18NextService.i18n.t("username")}
166 <div className="col-sm-10">
169 id="register-username"
170 className="form-control"
171 value={this.state.form.username}
172 onInput={linkEvent(this, this.handleRegisterUsernameChange)}
175 pattern="[a-zA-Z0-9_]+"
176 title={I18NextService.i18n.t("community_reqs")}
181 <div className="mb-3 row">
182 <label className="col-sm-2 col-form-label" htmlFor="register-email">
183 {I18NextService.i18n.t("email")}
185 <div className="col-sm-10">
189 className="form-control"
191 siteView.local_site.require_email_verification
192 ? I18NextService.i18n.t("required")
193 : I18NextService.i18n.t("optional")
195 value={this.state.form.email}
197 onInput={linkEvent(this, this.handleRegisterEmailChange)}
198 required={siteView.local_site.require_email_verification}
201 {!siteView.local_site.require_email_verification &&
202 this.state.form.email &&
203 !validEmail(this.state.form.email) && (
204 <div className="mt-2 mb-0 alert alert-warning" role="alert">
205 <Icon icon="alert-triangle" classes="icon-inline me-2" />
206 {I18NextService.i18n.t("no_password_reset")}
212 <div className="mb-3 row">
214 className="col-sm-2 col-form-label"
215 htmlFor="register-password"
217 {I18NextService.i18n.t("password")}
219 <div className="col-sm-10">
222 id="register-password"
223 value={this.state.form.password}
224 autoComplete="new-password"
225 onInput={linkEvent(this, this.handleRegisterPasswordChange)}
228 className="form-control"
231 {this.state.form.password && (
232 <div className={this.passwordColorClass}>
233 {I18NextService.i18n.t(
234 this.passwordStrength as NoOptionI18nKeys
241 <div className="mb-3 row">
243 className="col-sm-2 col-form-label"
244 htmlFor="register-verify-password"
246 {I18NextService.i18n.t("verify_password")}
248 <div className="col-sm-10">
251 id="register-verify-password"
252 value={this.state.form.password_verify}
253 autoComplete="new-password"
254 onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
256 className="form-control"
262 {siteView.local_site.registration_mode == "RequireApplication" && (
264 <div className="mb-3 row">
265 <div className="offset-sm-2 col-sm-10">
266 <div className="mt-2 alert alert-warning" role="alert">
267 <Icon icon="alert-triangle" classes="icon-inline me-2" />
268 {I18NextService.i18n.t("fill_out_application")}
270 {siteView.local_site.application_question && (
273 dangerouslySetInnerHTML={mdToHtml(
274 siteView.local_site.application_question
281 <div className="mb-3 row">
283 className="col-sm-2 col-form-label"
284 htmlFor="application_answer"
286 {I18NextService.i18n.t("answer")}
288 <div className="col-sm-10">
291 onContentChange={this.handleAnswerChange}
292 hideNavigationWarnings
300 {this.renderCaptcha()}
301 <div className="mb-3 row">
302 <div className="col-sm-10">
303 <div className="form-check">
305 className="form-check-input"
306 id="register-show-nsfw"
308 checked={this.state.form.show_nsfw}
309 onChange={linkEvent(this, this.handleRegisterShowNsfwChange)}
311 <label className="form-check-label" htmlFor="register-show-nsfw">
312 {I18NextService.i18n.t("show_nsfw")}
322 className="form-control honeypot"
324 value={this.state.form.honeypot}
325 onInput={linkEvent(this, this.handleHoneyPotChange)}
327 <div className="mb-3 row">
328 <div className="col-sm-10">
329 <button type="submit" className="btn btn-secondary">
330 {this.state.registerRes.state == "loading" ? (
333 this.titleName(siteView)
343 switch (this.state.captchaRes.state) {
347 const res = this.state.captchaRes.data;
349 <div className="mb-3 row">
350 <label className="col-sm-2" htmlFor="register-captcha">
351 <span className="me-2">
352 {I18NextService.i18n.t("enter_code")}
356 className="btn btn-secondary"
357 onClick={linkEvent(this, this.handleRegenCaptcha)}
358 aria-label={I18NextService.i18n.t("captcha")}
360 <Icon icon="refresh-cw" classes="icon-refresh-cw" />
363 {this.showCaptcha(res)}
364 <div className="col-sm-6">
367 className="form-control"
368 id="register-captcha"
369 value={this.state.form.captcha_answer}
372 this.handleRegisterCaptchaAnswerChange
383 showCaptcha(res: GetCaptchaResponse) {
384 const captchaRes = res?.ok;
385 return captchaRes ? (
386 <div className="col-sm-4">
389 className="rounded-top img-fluid"
390 src={this.captchaPngSrc(captchaRes)}
391 style="border-bottom-right-radius: 0; border-bottom-left-radius: 0;"
392 alt={I18NextService.i18n.t("captcha")}
396 className="rounded-bottom btn btn-sm btn-secondary d-block"
397 style="border-top-right-radius: 0; border-top-left-radius: 0;"
398 title={I18NextService.i18n.t("play_captcha_audio")}
399 onClick={linkEvent(this, this.handleCaptchaPlay)}
401 disabled={this.state.captchaPlaying}
403 <Icon icon="play" classes="icon-play" />
413 get passwordStrength(): string | undefined {
414 const password = this.state.form.password;
416 ? passwordStrength(password, passwordStrengthOptions).value
420 get passwordColorClass(): string {
421 const strength = this.passwordStrength;
423 if (strength && ["weak", "medium"].includes(strength)) {
424 return "text-warning";
425 } else if (strength == "strong") {
426 return "text-success";
428 return "text-danger";
432 async handleRegisterSubmit(i: Signup, event: any) {
433 event.preventDefault();
445 if (username && password && password_verify) {
446 i.setState({ registerRes: { state: "loading" } });
448 const registerRes = await HttpService.client.register({
459 switch (registerRes.state) {
461 toast(registerRes.msg, "danger");
462 i.setState({ registerRes: { state: "empty" } });
467 const data = registerRes.data;
469 // Only log them in if a jwt was set
471 UserService.Instance.login(data);
473 const site = await HttpService.client.getSite({ auth: myAuth() });
475 if (site.state === "success") {
476 UserService.Instance.myUserInfo = site.data.my_user;
479 i.props.history.replace("/communities");
481 if (data.verify_email_sent) {
482 toast(I18NextService.i18n.t("verify_email_sent"));
484 if (data.registration_created) {
485 toast(I18NextService.i18n.t("registration_application_sent"));
487 i.props.history.push("/");
495 handleRegisterUsernameChange(i: Signup, event: any) {
496 i.state.form.username = event.target.value.trim();
500 handleRegisterEmailChange(i: Signup, event: any) {
501 i.state.form.email = event.target.value;
502 if (i.state.form.email == "") {
503 i.state.form.email = undefined;
508 handleRegisterPasswordChange(i: Signup, event: any) {
509 i.state.form.password = event.target.value;
513 handleRegisterPasswordVerifyChange(i: Signup, event: any) {
514 i.state.form.password_verify = event.target.value;
518 handleRegisterShowNsfwChange(i: Signup, event: any) {
519 i.state.form.show_nsfw = event.target.checked;
523 handleRegisterCaptchaAnswerChange(i: Signup, event: any) {
524 i.state.form.captcha_answer = event.target.value;
528 handleAnswerChange(val: string) {
529 this.setState(s => ((s.form.answer = val), s));
532 handleHoneyPotChange(i: Signup, event: any) {
533 i.state.form.honeypot = event.target.value;
537 async handleRegenCaptcha(i: Signup) {
539 i.setState({ captchaPlaying: false });
540 await i.fetchCaptcha();
543 handleCaptchaPlay(i: Signup) {
544 // This was a bad bug, it should only build the new audio on a new file.
545 // Replays would stop prematurely if this was rebuilt every time.
547 if (i.state.captchaRes.state == "success" && i.state.captchaRes.data.ok) {
548 const captchaRes = i.state.captchaRes.data.ok;
550 const base64 = `data:audio/wav;base64,${captchaRes.wav}`;
551 i.audio = new Audio(base64);
554 i.setState({ captchaPlaying: true });
556 i.audio.addEventListener("ended", () => {
558 i.audio.currentTime = 0;
559 i.setState({ captchaPlaying: false });
566 captchaPngSrc(captcha: CaptchaResponse) {
567 return `data:image/png;base64,${captcha.png}`;