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 let 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}
137 <div className="row">
138 <div className="col-12 col-lg-6 offset-lg-3">
139 {this.registerForm()}
147 let siteView = this.state.siteRes.site_view;
149 <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
150 <h5>{this.titleName(siteView)}</h5>
153 <div className="form-group row">
154 <div className="mt-2 mb-0 alert alert-warning" role="alert">
155 <T i18nKey="lemmy_ml_registration_message">
156 #<a href={joinLemmyUrl}>#</a>
162 <div className="form-group row">
164 className="col-sm-2 col-form-label"
165 htmlFor="register-username"
170 <div className="col-sm-10">
173 id="register-username"
174 className="form-control"
175 value={this.state.registerForm.username}
176 onInput={linkEvent(this, this.handleRegisterUsernameChange)}
179 pattern="[a-zA-Z0-9_]+"
180 title={i18n.t("community_reqs")}
185 <div className="form-group row">
186 <label className="col-sm-2 col-form-label" htmlFor="register-email">
189 <div className="col-sm-10">
193 className="form-control"
195 siteView.local_site.require_email_verification
199 value={toUndefined(this.state.registerForm.email)}
201 onInput={linkEvent(this, this.handleRegisterEmailChange)}
202 required={siteView.local_site.require_email_verification}
205 {!siteView.local_site.require_email_verification &&
206 !this.state.registerForm.email.map(validEmail).unwrapOr(true) && (
207 <div className="mt-2 mb-0 alert alert-warning" role="alert">
208 <Icon icon="alert-triangle" classes="icon-inline mr-2" />
209 {i18n.t("no_password_reset")}
215 <div className="form-group row">
217 className="col-sm-2 col-form-label"
218 htmlFor="register-password"
222 <div className="col-sm-10">
225 id="register-password"
226 value={this.state.registerForm.password}
227 autoComplete="new-password"
228 onInput={linkEvent(this, this.handleRegisterPasswordChange)}
231 className="form-control"
234 {this.state.registerForm.password && (
235 <div className={this.passwordColorClass}>
236 {i18n.t(this.passwordStrength as I18nKeys)}
242 <div className="form-group row">
244 className="col-sm-2 col-form-label"
245 htmlFor="register-verify-password"
247 {i18n.t("verify_password")}
249 <div className="col-sm-10">
252 id="register-verify-password"
253 value={this.state.registerForm.password_verify}
254 autoComplete="new-password"
255 onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
257 className="form-control"
263 {siteView.local_site.require_application && (
265 <div className="form-group row">
266 <div className="offset-sm-2 col-sm-10">
267 <div className="mt-2 alert alert-warning" role="alert">
268 <Icon icon="alert-triangle" classes="icon-inline mr-2" />
269 {i18n.t("fill_out_application")}
271 {siteView.local_site.application_question.match({
275 dangerouslySetInnerHTML={mdToHtml(question)}
283 <div className="form-group row">
285 className="col-sm-2 col-form-label"
286 htmlFor="application_answer"
290 <div className="col-sm-10">
292 initialContent={None}
293 initialLanguageId={None}
297 onContentChange={this.handleAnswerChange}
298 hideNavigationWarnings
307 {this.state.captcha.isSome() && (
308 <div className="form-group row">
309 <label className="col-sm-2" htmlFor="register-captcha">
310 <span className="mr-2">{i18n.t("enter_code")}</span>
313 className="btn btn-secondary"
314 onClick={linkEvent(this, this.handleRegenCaptcha)}
315 aria-label={i18n.t("captcha")}
317 <Icon icon="refresh-cw" classes="icon-refresh-cw" />
321 <div className="col-sm-6">
324 className="form-control"
325 id="register-captcha"
326 value={toUndefined(this.state.registerForm.captcha_answer)}
329 this.handleRegisterCaptchaAnswerChange
336 {siteView.local_site.enable_nsfw && (
337 <div className="form-group row">
338 <div className="col-sm-10">
339 <div className="form-check">
341 className="form-check-input"
342 id="register-show-nsfw"
344 checked={this.state.registerForm.show_nsfw}
345 onChange={linkEvent(this, this.handleRegisterShowNsfwChange)}
348 className="form-check-label"
349 htmlFor="register-show-nsfw"
351 {i18n.t("show_nsfw")}
362 className="form-control honeypot"
364 value={toUndefined(this.state.registerForm.honeypot)}
365 onInput={linkEvent(this, this.handleHoneyPotChange)}
367 <div className="form-group row">
368 <div className="col-sm-10">
369 <button type="submit" className="btn btn-secondary">
370 {this.state.registerLoading ? (
373 this.titleName(siteView)
383 return this.state.captcha.match({
385 <div className="col-sm-4">
390 className="rounded-top img-fluid"
391 src={this.captchaPngSrc(res)}
392 style="border-bottom-right-radius: 0; border-bottom-left-radius: 0;"
393 alt={i18n.t("captcha")}
395 {res.wav.isSome() && (
397 className="rounded-bottom btn btn-sm btn-secondary btn-block"
398 style="border-top-right-radius: 0; border-top-left-radius: 0;"
399 title={i18n.t("play_captcha_audio")}
400 onClick={linkEvent(this, this.handleCaptchaPlay)}
402 disabled={this.state.captchaPlaying}
404 <Icon icon="play" classes="icon-play" />
417 get passwordStrength() {
418 return passwordStrength(
419 this.state.registerForm.password,
420 passwordStrengthOptions
424 get passwordColorClass(): string {
425 let strength = this.passwordStrength;
427 if (["weak", "medium"].includes(strength)) {
428 return "text-warning";
429 } else if (strength == "strong") {
430 return "text-success";
432 return "text-danger";
436 handleRegisterSubmit(i: Signup, event: any) {
437 event.preventDefault();
438 i.setState({ registerLoading: true });
439 WebSocketService.Instance.send(wsClient.register(i.state.registerForm));
442 handleRegisterUsernameChange(i: Signup, event: any) {
443 i.state.registerForm.username = event.target.value;
447 handleRegisterEmailChange(i: Signup, event: any) {
448 i.state.registerForm.email = Some(event.target.value);
449 if (i.state.registerForm.email.unwrap() == "") {
450 i.state.registerForm.email = None;
455 handleRegisterPasswordChange(i: Signup, event: any) {
456 i.state.registerForm.password = event.target.value;
460 handleRegisterPasswordVerifyChange(i: Signup, event: any) {
461 i.state.registerForm.password_verify = event.target.value;
465 handleRegisterShowNsfwChange(i: Signup, event: any) {
466 i.state.registerForm.show_nsfw = event.target.checked;
470 handleRegisterCaptchaAnswerChange(i: Signup, event: any) {
471 i.state.registerForm.captcha_answer = Some(event.target.value);
475 handleAnswerChange(val: string) {
476 this.setState(s => ((s.registerForm.answer = Some(val)), s));
479 handleHoneyPotChange(i: Signup, event: any) {
480 i.state.registerForm.honeypot = Some(event.target.value);
484 handleRegenCaptcha(i: Signup) {
486 i.setState({ captchaPlaying: false });
487 WebSocketService.Instance.send(wsClient.getCaptcha());
490 handleCaptchaPlay(i: Signup) {
491 // This was a bad bug, it should only build the new audio on a new file.
492 // Replays would stop prematurely if this was rebuilt every time.
493 i.state.captcha.match({
497 if (i.audio == null) {
498 let base64 = `data:audio/wav;base64,${res.wav}`;
499 i.audio = new Audio(base64);
504 i.setState({ captchaPlaying: true });
506 i.audio.addEventListener("ended", () => {
507 i.audio.currentTime = 0;
508 i.setState({ captchaPlaying: false });
517 captchaPngSrc(captcha: CaptchaResponse) {
518 return `data:image/png;base64,${captcha.png}`;
521 parseMessage(msg: any) {
522 let op = wsUserOp(msg);
525 toast(i18n.t(msg.error), "danger");
526 this.setState(this.emptyState);
527 this.setState(s => ((s.registerForm.captcha_answer = undefined), s));
528 // Refetch another captcha
529 // WebSocketService.Instance.send(wsClient.getCaptcha());
532 if (op == UserOperation.Register) {
533 let data = wsJsonToRes<LoginResponse>(msg, LoginResponse);
534 this.setState(this.emptyState);
535 // Only log them in if a jwt was set
536 if (data.jwt.isSome()) {
537 UserService.Instance.login(data);
538 this.props.history.push("/communities");
541 if (data.verify_email_sent) {
542 toast(i18n.t("verify_email_sent"));
544 if (data.registration_created) {
545 toast(i18n.t("registration_application_sent"));
547 this.props.history.push("/");
549 } else if (op == UserOperation.GetCaptcha) {
550 let data = wsJsonToRes<GetCaptchaResponse>(msg, GetCaptchaResponse);
553 this.setState({ captcha: Some(data) });
555 s => ((s.registerForm.captcha_uuid = Some(res.uuid)), s)
560 } else if (op == UserOperation.PasswordReset) {
561 toast(i18n.t("reset_password_mail_sent"));
562 } else if (op == UserOperation.GetSite) {
563 let data = wsJsonToRes<GetSiteResponse>(msg, GetSiteResponse);
564 this.setState({ siteRes: data });