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 {
122 return isBrowser() && window.location.hostname == "lemmy.ml";
127 <div class="container">
129 title={this.documentTitle}
130 path={this.context.router.route.match.url}
133 <div class="col-12 col-lg-6 offset-lg-3">{this.registerForm()}</div>
141 <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
142 <h5>{this.titleName}</h5>
145 <div class="form-group row">
146 <div class="mt-2 mb-0 alert alert-warning" role="alert">
147 <T i18nKey="lemmy_ml_registration_message">
148 #<a href={joinLemmyUrl}>#</a>
154 <div class="form-group row">
155 <label class="col-sm-2 col-form-label" htmlFor="register-username">
159 <div class="col-sm-10">
162 id="register-username"
164 value={this.state.registerForm.username}
165 onInput={linkEvent(this, this.handleRegisterUsernameChange)}
168 pattern="[a-zA-Z0-9_]+"
169 title={i18n.t("community_reqs")}
174 <div class="form-group row">
175 <label class="col-sm-2 col-form-label" htmlFor="register-email">
178 <div class="col-sm-10">
184 this.state.site_view.site.require_email_verification
188 value={this.state.registerForm.email}
190 onInput={linkEvent(this, this.handleRegisterEmailChange)}
191 required={this.state.site_view.site.require_email_verification}
194 {!this.state.site_view.site.require_email_verification &&
195 !validEmail(this.state.registerForm.email) && (
196 <div class="mt-2 mb-0 alert alert-warning" role="alert">
197 <Icon icon="alert-triangle" classes="icon-inline mr-2" />
198 {i18n.t("no_password_reset")}
204 <div class="form-group row">
205 <label class="col-sm-2 col-form-label" htmlFor="register-password">
208 <div class="col-sm-10">
211 id="register-password"
212 value={this.state.registerForm.password}
213 autoComplete="new-password"
214 onInput={linkEvent(this, this.handleRegisterPasswordChange)}
220 {this.state.registerForm.password && (
221 <div class={this.passwordColorClass}>
222 {i18n.t(this.passwordStrength as I18nKeys)}
228 <div class="form-group row">
230 class="col-sm-2 col-form-label"
231 htmlFor="register-verify-password"
233 {i18n.t("verify_password")}
235 <div class="col-sm-10">
238 id="register-verify-password"
239 value={this.state.registerForm.password_verify}
240 autoComplete="new-password"
241 onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
249 {this.state.site_view.site.require_application && (
251 <div class="form-group row">
252 <div class="offset-sm-2 col-sm-10">
253 <div class="mt-2 alert alert-warning" role="alert">
254 <Icon icon="alert-triangle" classes="icon-inline mr-2" />
255 {i18n.t("fill_out_application")}
259 dangerouslySetInnerHTML={mdToHtml(
260 this.state.site_view.site.application_question || ""
266 <div class="form-group row">
268 class="col-sm-2 col-form-label"
269 htmlFor="application_answer"
273 <div class="col-sm-10">
275 onContentChange={this.handleAnswerChange}
276 hideNavigationWarnings
283 {this.state.captcha && (
284 <div class="form-group row">
285 <label class="col-sm-2" htmlFor="register-captcha">
286 <span class="mr-2">{i18n.t("enter_code")}</span>
289 class="btn btn-secondary"
290 onClick={linkEvent(this, this.handleRegenCaptcha)}
291 aria-label={i18n.t("captcha")}
293 <Icon icon="refresh-cw" classes="icon-refresh-cw" />
297 <div class="col-sm-6">
301 id="register-captcha"
302 value={this.state.registerForm.captcha_answer}
305 this.handleRegisterCaptchaAnswerChange
312 {this.state.site_view.site.enable_nsfw && (
313 <div class="form-group row">
314 <div class="col-sm-10">
315 <div class="form-check">
317 class="form-check-input"
318 id="register-show-nsfw"
320 checked={this.state.registerForm.show_nsfw}
321 onChange={linkEvent(this, this.handleRegisterShowNsfwChange)}
323 <label class="form-check-label" htmlFor="register-show-nsfw">
324 {i18n.t("show_nsfw")}
335 class="form-control honeypot"
337 value={this.state.registerForm.honeypot}
338 onInput={linkEvent(this, this.handleHoneyPotChange)}
340 <div class="form-group row">
341 <div class="col-sm-10">
342 <button type="submit" class="btn btn-secondary">
343 {this.state.registerLoading ? <Spinner /> : this.titleName}
353 <div class="col-sm-4">
354 {this.state.captcha.ok && (
357 class="rounded-top img-fluid"
358 src={this.captchaPngSrc()}
359 style="border-bottom-right-radius: 0; border-bottom-left-radius: 0;"
360 alt={i18n.t("captcha")}
362 {this.state.captcha.ok.wav && (
364 class="rounded-bottom btn btn-sm btn-secondary btn-block"
365 style="border-top-right-radius: 0; border-top-left-radius: 0;"
366 title={i18n.t("play_captcha_audio")}
367 onClick={linkEvent(this, this.handleCaptchaPlay)}
369 disabled={this.state.captchaPlaying}
371 <Icon icon="play" classes="icon-play" />
380 get passwordStrength() {
381 return passwordStrength(
382 this.state.registerForm.password,
383 passwordStrengthOptions
387 get passwordColorClass(): string {
388 let strength = this.passwordStrength;
390 if (["weak", "medium"].includes(strength)) {
391 return "text-warning";
392 } else if (strength == "strong") {
393 return "text-success";
395 return "text-danger";
399 handleRegisterSubmit(i: Signup, event: any) {
400 event.preventDefault();
401 i.state.registerLoading = true;
403 WebSocketService.Instance.send(wsClient.register(i.state.registerForm));
406 handleRegisterUsernameChange(i: Signup, event: any) {
407 i.state.registerForm.username = event.target.value;
411 handleRegisterEmailChange(i: Signup, event: any) {
412 i.state.registerForm.email = event.target.value;
413 if (i.state.registerForm.email == "") {
414 i.state.registerForm.email = undefined;
419 handleRegisterPasswordChange(i: Signup, event: any) {
420 i.state.registerForm.password = event.target.value;
424 handleRegisterPasswordVerifyChange(i: Signup, event: any) {
425 i.state.registerForm.password_verify = event.target.value;
429 handleRegisterShowNsfwChange(i: Signup, event: any) {
430 i.state.registerForm.show_nsfw = event.target.checked;
434 handleRegisterCaptchaAnswerChange(i: Signup, event: any) {
435 i.state.registerForm.captcha_answer = event.target.value;
439 handleAnswerChange(val: string) {
440 this.state.registerForm.answer = val;
441 this.setState(this.state);
444 handleHoneyPotChange(i: Signup, event: any) {
445 i.state.registerForm.honeypot = event.target.value;
449 handleRegenCaptcha(i: Signup) {
451 i.state.captchaPlaying = false;
453 WebSocketService.Instance.send(wsClient.getCaptcha());
456 handleCaptchaPlay(i: Signup) {
457 // This was a bad bug, it should only build the new audio on a new file.
458 // Replays would stop prematurely if this was rebuilt every time.
459 if (i.audio == null) {
460 let base64 = `data:audio/wav;base64,${i.state.captcha.ok.wav}`;
461 i.audio = new Audio(base64);
466 i.state.captchaPlaying = true;
469 i.audio.addEventListener("ended", () => {
470 i.audio.currentTime = 0;
471 i.state.captchaPlaying = false;
477 return `data:image/png;base64,${this.state.captcha.ok.png}`;
480 parseMessage(msg: any) {
481 let op = wsUserOp(msg);
484 toast(i18n.t(msg.error), "danger");
485 this.state = this.emptyState;
486 this.state.registerForm.captcha_answer = undefined;
487 // Refetch another captcha
488 // WebSocketService.Instance.send(wsClient.getCaptcha());
489 this.setState(this.state);
492 if (op == UserOperation.Register) {
493 let data = wsJsonToRes<LoginResponse>(msg).data;
494 this.state = this.emptyState;
495 this.setState(this.state);
496 // Only log them in if a jwt was set
498 UserService.Instance.login(data);
499 WebSocketService.Instance.send(
504 this.props.history.push("/communities");
506 if (data.verify_email_sent) {
507 toast(i18n.t("verify_email_sent"));
509 if (data.registration_created) {
510 toast(i18n.t("registration_application_sent"));
512 this.props.history.push("/");
514 } else if (op == UserOperation.GetCaptcha) {
515 let data = wsJsonToRes<GetCaptchaResponse>(msg).data;
517 this.state.captcha = data;
518 this.state.registerForm.captcha_uuid = data.ok.uuid;
519 this.setState(this.state);
521 } else if (op == UserOperation.PasswordReset) {
522 toast(i18n.t("reset_password_mail_sent"));
523 } else if (op == UserOperation.GetSite) {
524 let data = wsJsonToRes<GetSiteResponse>(msg).data;
525 this.state.site_view = data.site_view;
526 this.setState(this.state);