1 import { Options, passwordStrength } from "check-password-strength";
2 import { I18nKeys } from "i18next";
3 import { Component, linkEvent } from "inferno";
4 import { T } from "inferno-i18next-dess";
12 } from "lemmy-js-client";
13 import { Subscription } from "rxjs";
14 import { i18n } from "../../i18next";
15 import { UserService, WebSocketService } from "../../services";
29 import { HtmlTags } from "../common/html-tags";
30 import { Icon, Spinner } from "../common/icon";
31 import { MarkdownTextArea } from "../common/markdown-textarea";
33 const passwordStrengthOptions: Options<string> = [
61 registerForm: Register;
62 registerLoading: boolean;
63 captcha: GetCaptchaResponse;
64 captchaPlaying: boolean;
68 export class Signup extends Component<any, State> {
69 private isoData = setIsoData(this.context);
70 private subscription: Subscription;
71 private audio: HTMLAudioElement;
77 password_verify: undefined,
79 captcha_uuid: undefined,
80 captcha_answer: undefined,
84 registerLoading: false,
86 captchaPlaying: false,
87 site_view: this.isoData.site_res.site_view,
90 constructor(props: any, context: any) {
91 super(props, context);
93 this.state = this.emptyState;
94 this.handleAnswerChange = this.handleAnswerChange.bind(this);
96 this.parseMessage = this.parseMessage.bind(this);
97 this.subscription = wsSubscribe(this.parseMessage);
100 WebSocketService.Instance.send(wsClient.getCaptcha());
104 componentWillUnmount() {
106 this.subscription.unsubscribe();
110 get documentTitle(): string {
111 return `${this.titleName} - ${this.state.site_view.site.name}`;
114 get titleName(): string {
116 this.state.site_view.site.private_instance ? "apply_to_join" : "sign_up"
120 get isLemmyMl(): boolean {
121 return isBrowser() && window.location.hostname == "lemmy.ml";
126 <div class="container">
128 title={this.documentTitle}
129 path={this.context.router.route.match.url}
132 <div class="col-12 col-lg-6 offset-lg-3">{this.registerForm()}</div>
140 <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
141 <h5>{this.titleName}</h5>
143 <div class="form-group row">
144 <label class="col-sm-2 col-form-label" htmlFor="register-username">
148 <div class="col-sm-10">
151 id="register-username"
153 value={this.state.registerForm.username}
154 onInput={linkEvent(this, this.handleRegisterUsernameChange)}
158 title={i18n.t("community_reqs")}
163 <div class="form-group row">
164 <label class="col-sm-2 col-form-label" htmlFor="register-email">
167 <div class="col-sm-10">
173 this.state.site_view.site.require_email_verification
177 value={this.state.registerForm.email}
179 onInput={linkEvent(this, this.handleRegisterEmailChange)}
180 required={this.state.site_view.site.require_email_verification}
183 {!this.state.site_view.site.require_email_verification &&
184 !validEmail(this.state.registerForm.email) && (
185 <div class="mt-2 mb-0 alert alert-light" role="alert">
186 <Icon icon="alert-triangle" classes="icon-inline mr-2" />
187 {i18n.t("no_password_reset")}
193 <div class="form-group row">
194 <label class="col-sm-2 col-form-label" htmlFor="register-password">
197 <div class="col-sm-10">
200 id="register-password"
201 value={this.state.registerForm.password}
202 autoComplete="new-password"
203 onInput={linkEvent(this, this.handleRegisterPasswordChange)}
209 {this.state.registerForm.password && (
210 <div class={this.passwordColorClass}>
211 {i18n.t(this.passwordStrength as I18nKeys)}
217 <div class="form-group row">
219 class="col-sm-2 col-form-label"
220 htmlFor="register-verify-password"
222 {i18n.t("verify_password")}
224 <div class="col-sm-10">
227 id="register-verify-password"
228 value={this.state.registerForm.password_verify}
229 autoComplete="new-password"
230 onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
238 {this.state.site_view.site.require_application && (
240 <div class="form-group row">
241 <div class="offset-sm-2 col-sm-10">
242 <div class="mt-2 alert alert-light" role="alert">
243 <Icon icon="alert-triangle" classes="icon-inline mr-2" />
244 {i18n.t("fill_out_application")}
248 dangerouslySetInnerHTML={mdToHtml(
249 this.state.site_view.site.application_question || ""
255 <div class="form-group row">
257 class="col-sm-2 col-form-label"
258 htmlFor="application_answer"
262 <div class="col-sm-10">
264 onContentChange={this.handleAnswerChange}
265 hideNavigationWarnings
272 {this.state.captcha && (
273 <div class="form-group row">
274 <label class="col-sm-2" htmlFor="register-captcha">
275 <span class="mr-2">{i18n.t("enter_code")}</span>
278 class="btn btn-secondary"
279 onClick={linkEvent(this, this.handleRegenCaptcha)}
280 aria-label={i18n.t("captcha")}
282 <Icon icon="refresh-cw" classes="icon-refresh-cw" />
286 <div class="col-sm-6">
290 id="register-captcha"
291 value={this.state.registerForm.captcha_answer}
294 this.handleRegisterCaptchaAnswerChange
301 {this.state.site_view.site.enable_nsfw && (
302 <div class="form-group row">
303 <div class="col-sm-10">
304 <div class="form-check">
306 class="form-check-input"
307 id="register-show-nsfw"
309 checked={this.state.registerForm.show_nsfw}
310 onChange={linkEvent(this, this.handleRegisterShowNsfwChange)}
312 <label class="form-check-label" htmlFor="register-show-nsfw">
313 {i18n.t("show_nsfw")}
320 <div class="mt-2 mb-0 alert alert-light" role="alert">
321 <T i18nKey="lemmy_ml_registration_message">
322 #<a href={joinLemmyUrl}>#</a>
331 class="form-control honeypot"
333 value={this.state.registerForm.honeypot}
334 onInput={linkEvent(this, this.handleHoneyPotChange)}
336 <div class="form-group row">
337 <div class="col-sm-10">
338 <button type="submit" class="btn btn-secondary">
339 {this.state.registerLoading ? <Spinner /> : this.titleName}
349 <div class="col-sm-4">
350 {this.state.captcha.ok && (
353 class="rounded-top img-fluid"
354 src={this.captchaPngSrc()}
355 style="border-bottom-right-radius: 0; border-bottom-left-radius: 0;"
356 alt={i18n.t("captcha")}
358 {this.state.captcha.ok.wav && (
360 class="rounded-bottom btn btn-sm btn-secondary btn-block"
361 style="border-top-right-radius: 0; border-top-left-radius: 0;"
362 title={i18n.t("play_captcha_audio")}
363 onClick={linkEvent(this, this.handleCaptchaPlay)}
365 disabled={this.state.captchaPlaying}
367 <Icon icon="play" classes="icon-play" />
376 get passwordStrength() {
377 return passwordStrength(
378 this.state.registerForm.password,
379 passwordStrengthOptions
383 get passwordColorClass(): string {
384 let strength = this.passwordStrength;
386 if (["weak", "medium"].includes(strength)) {
387 return "text-warning";
388 } else if (strength == "strong") {
389 return "text-success";
391 return "text-danger";
395 handleRegisterSubmit(i: Signup, event: any) {
396 event.preventDefault();
397 i.state.registerLoading = true;
399 WebSocketService.Instance.send(wsClient.register(i.state.registerForm));
402 handleRegisterUsernameChange(i: Signup, event: any) {
403 i.state.registerForm.username = event.target.value;
407 handleRegisterEmailChange(i: Signup, event: any) {
408 i.state.registerForm.email = event.target.value;
409 if (i.state.registerForm.email == "") {
410 i.state.registerForm.email = undefined;
415 handleRegisterPasswordChange(i: Signup, event: any) {
416 i.state.registerForm.password = event.target.value;
420 handleRegisterPasswordVerifyChange(i: Signup, event: any) {
421 i.state.registerForm.password_verify = event.target.value;
425 handleRegisterShowNsfwChange(i: Signup, event: any) {
426 i.state.registerForm.show_nsfw = event.target.checked;
430 handleRegisterCaptchaAnswerChange(i: Signup, event: any) {
431 i.state.registerForm.captcha_answer = event.target.value;
435 handleAnswerChange(val: string) {
436 this.state.registerForm.answer = val;
437 this.setState(this.state);
440 handleHoneyPotChange(i: Signup, event: any) {
441 i.state.registerForm.honeypot = event.target.value;
445 handleRegenCaptcha(i: Signup) {
447 i.state.captchaPlaying = false;
449 WebSocketService.Instance.send(wsClient.getCaptcha());
452 handleCaptchaPlay(i: Signup) {
453 // This was a bad bug, it should only build the new audio on a new file.
454 // Replays would stop prematurely if this was rebuilt every time.
455 if (i.audio == null) {
456 let base64 = `data:audio/wav;base64,${i.state.captcha.ok.wav}`;
457 i.audio = new Audio(base64);
462 i.state.captchaPlaying = true;
465 i.audio.addEventListener("ended", () => {
466 i.audio.currentTime = 0;
467 i.state.captchaPlaying = false;
473 return `data:image/png;base64,${this.state.captcha.ok.png}`;
476 parseMessage(msg: any) {
477 let op = wsUserOp(msg);
480 toast(i18n.t(msg.error), "danger");
481 this.state = this.emptyState;
482 this.state.registerForm.captcha_answer = undefined;
483 // Refetch another captcha
484 // WebSocketService.Instance.send(wsClient.getCaptcha());
485 this.setState(this.state);
488 if (op == UserOperation.Register) {
489 let data = wsJsonToRes<LoginResponse>(msg).data;
490 this.state = this.emptyState;
491 this.setState(this.state);
492 // Only log them in if a jwt was set
494 UserService.Instance.login(data);
495 WebSocketService.Instance.send(
500 this.props.history.push("/communities");
502 if (data.verify_email_sent) {
503 toast(i18n.t("verify_email_sent"));
505 if (data.registration_created) {
506 toast(i18n.t("registration_application_sent"));
508 this.props.history.push("/");
510 } else if (op == UserOperation.GetCaptcha) {
511 let data = wsJsonToRes<GetCaptchaResponse>(msg).data;
513 this.state.captcha = data;
514 this.state.registerForm.captcha_uuid = data.ok.uuid;
515 this.setState(this.state);
517 } else if (op == UserOperation.PasswordReset) {
518 toast(i18n.t("reset_password_mail_sent"));
519 } else if (op == UserOperation.GetSite) {
520 let data = wsJsonToRes<GetSiteResponse>(msg).data;
521 this.state.site_view = data.site_view;
522 this.setState(this.state);