1 import { None, Option, Some } from "@sniptt/monads";
2 import { Options, passwordStrength } from "check-password-strength";
3 import { I18nKeys } from "i18next";
4 import { Component, linkEvent } from "inferno";
5 import { T } from "inferno-i18next-dess";
17 } from "lemmy-js-client";
18 import { Subscription } from "rxjs";
19 import { i18n } from "../../i18next";
20 import { UserService, WebSocketService } from "../../services";
31 import { HtmlTags } from "../common/html-tags";
32 import { Icon, Spinner } from "../common/icon";
33 import { MarkdownTextArea } from "../common/markdown-textarea";
35 const passwordStrengthOptions: Options<string> = [
63 registerForm: Register;
64 registerLoading: boolean;
65 captcha: Option<GetCaptchaResponse>;
66 captchaPlaying: boolean;
67 siteRes: GetSiteResponse;
70 export class Signup extends Component<any, State> {
71 private isoData = setIsoData(this.context);
72 private subscription: Subscription;
73 private audio: HTMLAudioElement;
76 registerForm: new Register({
79 password_verify: undefined,
87 registerLoading: false,
89 captchaPlaying: false,
90 siteRes: this.isoData.site_res,
93 constructor(props: any, context: any) {
94 super(props, context);
96 this.state = this.emptyState;
97 this.handleAnswerChange = this.handleAnswerChange.bind(this);
99 this.parseMessage = this.parseMessage.bind(this);
100 this.subscription = wsSubscribe(this.parseMessage);
103 WebSocketService.Instance.send(wsClient.getCaptcha());
107 componentWillUnmount() {
109 this.subscription.unsubscribe();
113 get documentTitle(): string {
114 return this.state.siteRes.site_view.match({
115 some: siteView => `${this.titleName(siteView)} - ${siteView.site.name}`,
120 titleName(siteView: SiteView): string {
121 return i18n.t(siteView.site.private_instance ? "apply_to_join" : "sign_up");
124 get isLemmyMl(): boolean {
125 return isBrowser() && window.location.hostname == "lemmy.ml";
130 <div class="container">
132 title={this.documentTitle}
133 path={this.context.router.route.match.url}
138 <div class="col-12 col-lg-6 offset-lg-3">{this.registerForm()}</div>
145 return this.state.siteRes.site_view.match({
147 <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
148 <h5>{this.titleName(siteView)}</h5>
151 <div class="form-group row">
152 <div class="mt-2 mb-0 alert alert-warning" role="alert">
153 <T i18nKey="lemmy_ml_registration_message">
154 #<a href={joinLemmyUrl}>#</a>
160 <div class="form-group row">
161 <label class="col-sm-2 col-form-label" htmlFor="register-username">
165 <div class="col-sm-10">
168 id="register-username"
170 value={this.state.registerForm.username}
171 onInput={linkEvent(this, this.handleRegisterUsernameChange)}
174 pattern="[a-zA-Z0-9_]+"
175 title={i18n.t("community_reqs")}
180 <div class="form-group row">
181 <label class="col-sm-2 col-form-label" htmlFor="register-email">
184 <div class="col-sm-10">
190 siteView.site.require_email_verification
194 value={toUndefined(this.state.registerForm.email)}
196 onInput={linkEvent(this, this.handleRegisterEmailChange)}
197 required={siteView.site.require_email_verification}
200 {!siteView.site.require_email_verification &&
201 !this.state.registerForm.email
204 <div class="mt-2 mb-0 alert alert-warning" role="alert">
205 <Icon icon="alert-triangle" classes="icon-inline mr-2" />
206 {i18n.t("no_password_reset")}
212 <div class="form-group row">
213 <label class="col-sm-2 col-form-label" htmlFor="register-password">
216 <div class="col-sm-10">
219 id="register-password"
220 value={this.state.registerForm.password}
221 autoComplete="new-password"
222 onInput={linkEvent(this, this.handleRegisterPasswordChange)}
228 {this.state.registerForm.password && (
229 <div class={this.passwordColorClass}>
230 {i18n.t(this.passwordStrength as I18nKeys)}
236 <div class="form-group row">
238 class="col-sm-2 col-form-label"
239 htmlFor="register-verify-password"
241 {i18n.t("verify_password")}
243 <div class="col-sm-10">
246 id="register-verify-password"
247 value={this.state.registerForm.password_verify}
248 autoComplete="new-password"
251 this.handleRegisterPasswordVerifyChange
260 {siteView.site.require_application && (
262 <div class="form-group row">
263 <div class="offset-sm-2 col-sm-10">
264 <div class="mt-2 alert alert-warning" role="alert">
265 <Icon icon="alert-triangle" classes="icon-inline mr-2" />
266 {i18n.t("fill_out_application")}
268 {siteView.site.application_question.match({
272 dangerouslySetInnerHTML={mdToHtml(question)}
280 <div class="form-group row">
282 class="col-sm-2 col-form-label"
283 htmlFor="application_answer"
287 <div class="col-sm-10">
289 initialContent={None}
293 onContentChange={this.handleAnswerChange}
294 hideNavigationWarnings
301 {this.state.captcha.isSome() && (
302 <div class="form-group row">
303 <label class="col-sm-2" htmlFor="register-captcha">
304 <span class="mr-2">{i18n.t("enter_code")}</span>
307 class="btn btn-secondary"
308 onClick={linkEvent(this, this.handleRegenCaptcha)}
309 aria-label={i18n.t("captcha")}
311 <Icon icon="refresh-cw" classes="icon-refresh-cw" />
315 <div class="col-sm-6">
319 id="register-captcha"
320 value={toUndefined(this.state.registerForm.captcha_answer)}
323 this.handleRegisterCaptchaAnswerChange
330 {siteView.site.enable_nsfw && (
331 <div class="form-group row">
332 <div class="col-sm-10">
333 <div class="form-check">
335 class="form-check-input"
336 id="register-show-nsfw"
338 checked={this.state.registerForm.show_nsfw}
341 this.handleRegisterShowNsfwChange
344 <label class="form-check-label" htmlFor="register-show-nsfw">
345 {i18n.t("show_nsfw")}
356 class="form-control honeypot"
358 value={toUndefined(this.state.registerForm.honeypot)}
359 onInput={linkEvent(this, this.handleHoneyPotChange)}
361 <div class="form-group row">
362 <div class="col-sm-10">
363 <button type="submit" class="btn btn-secondary">
364 {this.state.registerLoading ? (
367 this.titleName(siteView)
379 return this.state.captcha.match({
381 <div class="col-sm-4">
386 class="rounded-top img-fluid"
387 src={this.captchaPngSrc(res)}
388 style="border-bottom-right-radius: 0; border-bottom-left-radius: 0;"
389 alt={i18n.t("captcha")}
391 {res.wav.isSome() && (
393 class="rounded-bottom btn btn-sm btn-secondary btn-block"
394 style="border-top-right-radius: 0; border-top-left-radius: 0;"
395 title={i18n.t("play_captcha_audio")}
396 onClick={linkEvent(this, this.handleCaptchaPlay)}
398 disabled={this.state.captchaPlaying}
400 <Icon icon="play" classes="icon-play" />
413 get passwordStrength() {
414 return passwordStrength(
415 this.state.registerForm.password,
416 passwordStrengthOptions
420 get passwordColorClass(): string {
421 let strength = this.passwordStrength;
423 if (["weak", "medium"].includes(strength)) {
424 return "text-warning";
425 } else if (strength == "strong") {
426 return "text-success";
428 return "text-danger";
432 handleRegisterSubmit(i: Signup, event: any) {
433 event.preventDefault();
434 i.state.registerLoading = true;
436 WebSocketService.Instance.send(wsClient.register(i.state.registerForm));
439 handleRegisterUsernameChange(i: Signup, event: any) {
440 i.state.registerForm.username = event.target.value;
444 handleRegisterEmailChange(i: Signup, event: any) {
445 i.state.registerForm.email = Some(event.target.value);
446 if (i.state.registerForm.email.unwrap() == "") {
447 i.state.registerForm.email = None;
452 handleRegisterPasswordChange(i: Signup, event: any) {
453 i.state.registerForm.password = event.target.value;
457 handleRegisterPasswordVerifyChange(i: Signup, event: any) {
458 i.state.registerForm.password_verify = event.target.value;
462 handleRegisterShowNsfwChange(i: Signup, event: any) {
463 i.state.registerForm.show_nsfw = event.target.checked;
467 handleRegisterCaptchaAnswerChange(i: Signup, event: any) {
468 i.state.registerForm.captcha_answer = Some(event.target.value);
472 handleAnswerChange(val: string) {
473 this.state.registerForm.answer = Some(val);
474 this.setState(this.state);
477 handleHoneyPotChange(i: Signup, event: any) {
478 i.state.registerForm.honeypot = Some(event.target.value);
482 handleRegenCaptcha(i: Signup) {
484 i.state.captchaPlaying = false;
486 WebSocketService.Instance.send(wsClient.getCaptcha());
489 handleCaptchaPlay(i: Signup) {
490 // This was a bad bug, it should only build the new audio on a new file.
491 // Replays would stop prematurely if this was rebuilt every time.
492 i.state.captcha.match({
496 if (i.audio == null) {
497 let base64 = `data:audio/wav;base64,${res.wav}`;
498 i.audio = new Audio(base64);
503 i.state.captchaPlaying = true;
506 i.audio.addEventListener("ended", () => {
507 i.audio.currentTime = 0;
508 i.state.captchaPlaying = false;
518 captchaPngSrc(captcha: CaptchaResponse) {
519 return `data:image/png;base64,${captcha.png}`;
522 parseMessage(msg: any) {
523 let op = wsUserOp(msg);
526 toast(i18n.t(msg.error), "danger");
527 this.state = this.emptyState;
528 this.state.registerForm.captcha_answer = undefined;
529 // Refetch another captcha
530 // WebSocketService.Instance.send(wsClient.getCaptcha());
531 this.setState(this.state);
534 if (op == UserOperation.Register) {
535 let data = wsJsonToRes<LoginResponse>(msg, LoginResponse);
536 this.state = this.emptyState;
537 this.setState(this.state);
538 // Only log them in if a jwt was set
539 if (data.jwt.isSome()) {
540 UserService.Instance.login(data);
541 this.props.history.push("/communities");
543 if (data.verify_email_sent) {
544 toast(i18n.t("verify_email_sent"));
546 if (data.registration_created) {
547 toast(i18n.t("registration_application_sent"));
549 this.props.history.push("/");
551 } else if (op == UserOperation.GetCaptcha) {
552 let data = wsJsonToRes<GetCaptchaResponse>(msg, GetCaptchaResponse);
555 this.state.captcha = Some(data);
556 this.state.registerForm.captcha_uuid = Some(res.uuid);
557 this.setState(this.state);
561 } else if (op == UserOperation.PasswordReset) {
562 toast(i18n.t("reset_password_mail_sent"));
563 } else if (op == UserOperation.GetSite) {
564 let data = wsJsonToRes<GetSiteResponse>(msg, GetSiteResponse);
565 this.state.siteRes = data;
566 this.setState(this.state);