1 import { Options, passwordStrength } from "check-password-strength";
2 import { NoOptionI18nKeys } from "i18next";
3 import { Component, linkEvent } from "inferno";
4 import { T } from "inferno-i18next-dess";
11 } from "lemmy-js-client";
12 import { i18n } from "../../i18next";
13 import { UserService } from "../../services";
14 import { HttpService, RequestState } from "../../services/HttpService";
23 import { isBrowser } from "../../utils/browser/is-browser";
24 import { HtmlTags } from "../common/html-tags";
25 import { Icon, Spinner } from "../common/icon";
26 import { MarkdownTextArea } from "../common/markdown-textarea";
28 const passwordStrengthOptions: Options<string> = [
56 registerRes: RequestState<LoginResponse>;
57 captchaRes: RequestState<GetCaptchaResponse>;
62 password_verify?: string;
64 captcha_uuid?: string;
65 captcha_answer?: string;
69 captchaPlaying: boolean;
70 siteRes: GetSiteResponse;
73 export class Signup extends Component<any, State> {
74 private isoData = setIsoData(this.context);
75 private audio?: HTMLAudioElement;
78 registerRes: { state: "empty" },
79 captchaRes: { state: "empty" },
83 captchaPlaying: false,
84 siteRes: this.isoData.site_res,
87 constructor(props: any, context: any) {
88 super(props, context);
90 this.handleAnswerChange = this.handleAnswerChange.bind(this);
93 async componentDidMount() {
94 if (this.state.siteRes.site_view.local_site.captcha_enabled) {
95 await this.fetchCaptcha();
99 async fetchCaptcha() {
100 this.setState({ captchaRes: { state: "loading" } });
102 captchaRes: await HttpService.client.getCaptcha({}),
106 if (s.captchaRes.state == "success") {
107 s.form.captcha_uuid = s.captchaRes.data.ok?.uuid;
113 get documentTitle(): string {
114 const siteView = this.state.siteRes.site_view;
115 return `${this.titleName(siteView)} - ${siteView.site.name}`;
118 titleName(siteView: SiteView): string {
120 siteView.local_site.private_instance ? "apply_to_join" : "sign_up"
124 get isLemmyMl(): boolean {
125 return isBrowser() && window.location.hostname == "lemmy.ml";
130 <div className="container-lg">
132 title={this.documentTitle}
133 path={this.context.router.route.match.url}
135 <div className="row">
136 <div className="col-12 col-lg-6 offset-lg-3">
137 {this.registerForm()}
145 const siteView = this.state.siteRes.site_view;
147 <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
148 <h5>{this.titleName(siteView)}</h5>
151 <div className="form-group row">
152 <div className="mt-2 mb-0 alert alert-warning" role="alert">
153 <T i18nKey="lemmy_ml_registration_message">
154 #<a href={joinLemmyUrl}>#</a>
160 <div className="form-group row">
162 className="col-sm-2 col-form-label"
163 htmlFor="register-username"
168 <div className="col-sm-10">
171 id="register-username"
172 className="form-control"
173 value={this.state.form.username}
174 onInput={linkEvent(this, this.handleRegisterUsernameChange)}
177 pattern="[a-zA-Z0-9_]+"
178 title={i18n.t("community_reqs")}
183 <div className="form-group row">
184 <label className="col-sm-2 col-form-label" htmlFor="register-email">
187 <div className="col-sm-10">
191 className="form-control"
193 siteView.local_site.require_email_verification
197 value={this.state.form.email}
199 onInput={linkEvent(this, this.handleRegisterEmailChange)}
200 required={siteView.local_site.require_email_verification}
203 {!siteView.local_site.require_email_verification &&
204 this.state.form.email &&
205 !validEmail(this.state.form.email) && (
206 <div className="mt-2 mb-0 alert alert-warning" role="alert">
207 <Icon icon="alert-triangle" classes="icon-inline mr-2" />
208 {i18n.t("no_password_reset")}
214 <div className="form-group row">
216 className="col-sm-2 col-form-label"
217 htmlFor="register-password"
221 <div className="col-sm-10">
224 id="register-password"
225 value={this.state.form.password}
226 autoComplete="new-password"
227 onInput={linkEvent(this, this.handleRegisterPasswordChange)}
230 className="form-control"
233 {this.state.form.password && (
234 <div className={this.passwordColorClass}>
235 {i18n.t(this.passwordStrength as NoOptionI18nKeys)}
241 <div className="form-group row">
243 className="col-sm-2 col-form-label"
244 htmlFor="register-verify-password"
246 {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="form-group 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 mr-2" />
268 {i18n.t("fill_out_application")}
270 {siteView.local_site.application_question && (
273 dangerouslySetInnerHTML={mdToHtml(
274 siteView.local_site.application_question
281 <div className="form-group row">
283 className="col-sm-2 col-form-label"
284 htmlFor="application_answer"
288 <div className="col-sm-10">
291 onContentChange={this.handleAnswerChange}
292 hideNavigationWarnings
300 {this.renderCaptcha()}
301 {siteView.local_site.enable_nsfw && (
302 <div className="form-group row">
303 <div className="col-sm-10">
304 <div className="form-check">
306 className="form-check-input"
307 id="register-show-nsfw"
309 checked={this.state.form.show_nsfw}
310 onChange={linkEvent(this, this.handleRegisterShowNsfwChange)}
313 className="form-check-label"
314 htmlFor="register-show-nsfw"
316 {i18n.t("show_nsfw")}
327 className="form-control honeypot"
329 value={this.state.form.honeypot}
330 onInput={linkEvent(this, this.handleHoneyPotChange)}
332 <div className="form-group row">
333 <div className="col-sm-10">
334 <button type="submit" className="btn btn-secondary">
335 {this.state.registerRes.state == "loading" ? (
338 this.titleName(siteView)
348 switch (this.state.captchaRes.state) {
352 const res = this.state.captchaRes.data;
354 <div className="form-group row">
355 <label className="col-sm-2" htmlFor="register-captcha">
356 <span className="mr-2">{i18n.t("enter_code")}</span>
359 className="btn btn-secondary"
360 onClick={linkEvent(this, this.handleRegenCaptcha)}
361 aria-label={i18n.t("captcha")}
363 <Icon icon="refresh-cw" classes="icon-refresh-cw" />
366 {this.showCaptcha(res)}
367 <div className="col-sm-6">
370 className="form-control"
371 id="register-captcha"
372 value={this.state.form.captcha_answer}
375 this.handleRegisterCaptchaAnswerChange
386 showCaptcha(res: GetCaptchaResponse) {
387 const captchaRes = res?.ok;
388 return captchaRes ? (
389 <div className="col-sm-4">
392 className="rounded-top img-fluid"
393 src={this.captchaPngSrc(captchaRes)}
394 style="border-bottom-right-radius: 0; border-bottom-left-radius: 0;"
395 alt={i18n.t("captcha")}
399 className="rounded-bottom btn btn-sm btn-secondary btn-block"
400 style="border-top-right-radius: 0; border-top-left-radius: 0;"
401 title={i18n.t("play_captcha_audio")}
402 onClick={linkEvent(this, this.handleCaptchaPlay)}
404 disabled={this.state.captchaPlaying}
406 <Icon icon="play" classes="icon-play" />
416 get passwordStrength(): string | undefined {
417 const password = this.state.form.password;
419 ? passwordStrength(password, passwordStrengthOptions).value
423 get passwordColorClass(): string {
424 const strength = this.passwordStrength;
426 if (strength && ["weak", "medium"].includes(strength)) {
427 return "text-warning";
428 } else if (strength == "strong") {
429 return "text-success";
431 return "text-danger";
435 async handleRegisterSubmit(i: Signup, event: any) {
436 event.preventDefault();
448 if (username && password && password_verify) {
449 i.setState({ registerRes: { state: "loading" } });
451 const registerRes = await HttpService.client.register({
462 switch (registerRes.state) {
464 toast(registerRes.msg, "danger");
465 i.setState({ registerRes: { state: "empty" } });
470 const data = registerRes.data;
472 // Only log them in if a jwt was set
474 UserService.Instance.login(data);
476 const site = await HttpService.client.getSite({ auth: myAuth() });
478 if (site.state === "success") {
479 UserService.Instance.myUserInfo = site.data.my_user;
482 i.props.history.replace("/communities");
484 if (data.verify_email_sent) {
485 toast(i18n.t("verify_email_sent"));
487 if (data.registration_created) {
488 toast(i18n.t("registration_application_sent"));
490 i.props.history.push("/");
498 handleRegisterUsernameChange(i: Signup, event: any) {
499 i.state.form.username = event.target.value.trim();
503 handleRegisterEmailChange(i: Signup, event: any) {
504 i.state.form.email = event.target.value;
505 if (i.state.form.email == "") {
506 i.state.form.email = undefined;
511 handleRegisterPasswordChange(i: Signup, event: any) {
512 i.state.form.password = event.target.value;
516 handleRegisterPasswordVerifyChange(i: Signup, event: any) {
517 i.state.form.password_verify = event.target.value;
521 handleRegisterShowNsfwChange(i: Signup, event: any) {
522 i.state.form.show_nsfw = event.target.checked;
526 handleRegisterCaptchaAnswerChange(i: Signup, event: any) {
527 i.state.form.captcha_answer = event.target.value;
531 handleAnswerChange(val: string) {
532 this.setState(s => ((s.form.answer = val), s));
535 handleHoneyPotChange(i: Signup, event: any) {
536 i.state.form.honeypot = event.target.value;
540 async handleRegenCaptcha(i: Signup) {
542 i.setState({ captchaPlaying: false });
543 await i.fetchCaptcha();
546 handleCaptchaPlay(i: Signup) {
547 // This was a bad bug, it should only build the new audio on a new file.
548 // Replays would stop prematurely if this was rebuilt every time.
550 if (i.state.captchaRes.state == "success" && i.state.captchaRes.data.ok) {
551 const captchaRes = i.state.captchaRes.data.ok;
553 const base64 = `data:audio/wav;base64,${captchaRes.wav}`;
554 i.audio = new Audio(base64);
557 i.setState({ captchaPlaying: true });
559 i.audio.addEventListener("ended", () => {
561 i.audio.currentTime = 0;
562 i.setState({ captchaPlaying: false });
569 captchaPngSrc(captcha: CaptchaResponse) {
570 return `data:image/png;base64,${captcha.png}`;