1 import { Component, linkEvent } from "inferno";
2 import { T } from "inferno-i18next-dess";
10 } from "lemmy-js-client";
11 import { Subscription } from "rxjs";
12 import { i18n } from "../../i18next";
13 import { Options, passwordStrength } from "check-password-strength";
14 import { UserService, WebSocketService } from "../../services";
27 import { HtmlTags } from "../common/html-tags";
28 import { Icon, Spinner } from "../common/icon";
29 import {I18nKeys} from "i18next";
31 const passwordStrengthOptions: Options<string> = [
59 registerForm: Register;
60 registerLoading: boolean;
61 captcha: GetCaptchaResponse;
62 captchaPlaying: boolean;
66 export class Signup extends Component<any, State> {
67 private isoData = setIsoData(this.context);
68 private subscription: Subscription;
69 private audio: HTMLAudioElement;
75 password_verify: undefined,
77 captcha_uuid: undefined,
78 captcha_answer: undefined,
80 registerLoading: false,
82 captchaPlaying: false,
83 site_view: this.isoData.site_res.site_view,
86 constructor(props: any, context: any) {
87 super(props, context);
89 this.state = this.emptyState;
91 this.parseMessage = this.parseMessage.bind(this);
92 this.subscription = wsSubscribe(this.parseMessage);
95 WebSocketService.Instance.send(wsClient.getCaptcha());
99 componentWillUnmount() {
101 this.subscription.unsubscribe();
105 get documentTitle(): string {
106 return `${i18n.t("login")} - ${this.state.site_view.site.name}`;
109 get isLemmyMl(): boolean {
110 return isBrowser() && window.location.hostname == "lemmy.ml";
115 <div class="container">
117 title={this.documentTitle}
118 path={this.context.router.route.match.url}
121 <div class="col-12 col-lg-6 offset-lg-3">{this.registerForm()}</div>
129 <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
130 <h5>{i18n.t("sign_up")}</h5>
132 <div class="form-group row">
133 <label class="col-sm-2 col-form-label" htmlFor="register-username">
137 <div class="col-sm-10">
140 id="register-username"
142 value={this.state.registerForm.username}
143 onInput={linkEvent(this, this.handleRegisterUsernameChange)}
146 pattern="[a-zA-Z0-9_]+"
147 title={i18n.t("community_reqs")}
152 <div class="form-group row">
153 <label class="col-sm-2 col-form-label" htmlFor="register-email">
156 <div class="col-sm-10">
161 placeholder={i18n.t("optional")}
162 value={this.state.registerForm.email}
164 onInput={linkEvent(this, this.handleRegisterEmailChange)}
167 {!validEmail(this.state.registerForm.email) && (
168 <div class="mt-2 mb-0 alert alert-light" role="alert">
169 <Icon icon="alert-triangle" classes="icon-inline mr-2" />
170 {i18n.t("no_password_reset")}
176 <div class="form-group row">
177 <label class="col-sm-2 col-form-label" htmlFor="register-password">
180 <div class="col-sm-10">
183 id="register-password"
184 value={this.state.registerForm.password}
185 autoComplete="new-password"
186 onInput={linkEvent(this, this.handleRegisterPasswordChange)}
192 {this.state.registerForm.password && (
193 <div class={this.passwordColorClass}>
194 {i18n.t(this.passwordStrength as I18nKeys)}
200 <div class="form-group row">
202 class="col-sm-2 col-form-label"
203 htmlFor="register-verify-password"
205 {i18n.t("verify_password")}
207 <div class="col-sm-10">
210 id="register-verify-password"
211 value={this.state.registerForm.password_verify}
212 autoComplete="new-password"
213 onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
221 {this.state.captcha && (
222 <div class="form-group row">
223 <label class="col-sm-2" htmlFor="register-captcha">
224 <span class="mr-2">{i18n.t("enter_code")}</span>
227 class="btn btn-secondary"
228 onClick={linkEvent(this, this.handleRegenCaptcha)}
229 aria-label={i18n.t("captcha")}
231 <Icon icon="refresh-cw" classes="icon-refresh-cw" />
235 <div class="col-sm-6">
239 id="register-captcha"
240 value={this.state.registerForm.captcha_answer}
243 this.handleRegisterCaptchaAnswerChange
250 {this.state.site_view.site.enable_nsfw && (
251 <div class="form-group row">
252 <div class="col-sm-10">
253 <div class="form-check">
255 class="form-check-input"
256 id="register-show-nsfw"
258 checked={this.state.registerForm.show_nsfw}
259 onChange={linkEvent(this, this.handleRegisterShowNsfwChange)}
261 <label class="form-check-label" htmlFor="register-show-nsfw">
262 {i18n.t("show_nsfw")}
269 <div class="mt-2 mb-0 alert alert-light" role="alert">
270 <T i18nKey="lemmy_ml_registration_message">
271 #<a href={joinLemmyUrl}>#</a>
275 <div class="form-group row">
276 <div class="col-sm-10">
277 <button type="submit" class="btn btn-secondary">
278 {this.state.registerLoading ? <Spinner /> : i18n.t("sign_up")}
288 <div class="col-sm-4">
289 {this.state.captcha.ok && (
292 class="rounded-top img-fluid"
293 src={this.captchaPngSrc()}
294 style="border-bottom-right-radius: 0; border-bottom-left-radius: 0;"
295 alt={i18n.t("captcha")}
297 {this.state.captcha.ok.wav && (
299 class="rounded-bottom btn btn-sm btn-secondary btn-block"
300 style="border-top-right-radius: 0; border-top-left-radius: 0;"
301 title={i18n.t("play_captcha_audio")}
302 onClick={linkEvent(this, this.handleCaptchaPlay)}
304 disabled={this.state.captchaPlaying}
306 <Icon icon="play" classes="icon-play" />
315 get passwordStrength() {
316 return passwordStrength(
317 this.state.registerForm.password,
318 passwordStrengthOptions
322 get passwordColorClass(): string {
323 let strength = this.passwordStrength;
325 if (["weak", "medium"].includes(strength)) {
326 return "text-warning";
327 } else if (strength == "strong") {
328 return "text-success";
330 return "text-danger";
334 handleRegisterSubmit(i: Signup, event: any) {
335 event.preventDefault();
336 i.state.registerLoading = true;
338 WebSocketService.Instance.send(wsClient.register(i.state.registerForm));
341 handleRegisterUsernameChange(i: Signup, event: any) {
342 i.state.registerForm.username = event.target.value;
346 handleRegisterEmailChange(i: Signup, event: any) {
347 i.state.registerForm.email = event.target.value;
348 if (i.state.registerForm.email == "") {
349 i.state.registerForm.email = undefined;
354 handleRegisterPasswordChange(i: Signup, event: any) {
355 i.state.registerForm.password = event.target.value;
359 handleRegisterPasswordVerifyChange(i: Signup, event: any) {
360 i.state.registerForm.password_verify = event.target.value;
364 handleRegisterShowNsfwChange(i: Signup, event: any) {
365 i.state.registerForm.show_nsfw = event.target.checked;
369 handleRegisterCaptchaAnswerChange(i: Signup, event: any) {
370 i.state.registerForm.captcha_answer = event.target.value;
374 handleRegenCaptcha(i: Signup) {
376 i.state.captchaPlaying = false;
378 WebSocketService.Instance.send(wsClient.getCaptcha());
381 handleCaptchaPlay(i: Signup) {
382 // This was a bad bug, it should only build the new audio on a new file.
383 // Replays would stop prematurely if this was rebuilt every time.
384 if (i.audio == null) {
385 let base64 = `data:audio/wav;base64,${i.state.captcha.ok.wav}`;
386 i.audio = new Audio(base64);
391 i.state.captchaPlaying = true;
394 i.audio.addEventListener("ended", () => {
395 i.audio.currentTime = 0;
396 i.state.captchaPlaying = false;
402 return `data:image/png;base64,${this.state.captcha.ok.png}`;
405 parseMessage(msg: any) {
406 let op = wsUserOp(msg);
409 toast(i18n.t(msg.error), "danger");
410 this.state = this.emptyState;
411 this.state.registerForm.captcha_answer = undefined;
412 // Refetch another captcha
413 WebSocketService.Instance.send(wsClient.getCaptcha());
414 this.setState(this.state);
417 if (op == UserOperation.Register) {
418 let data = wsJsonToRes<LoginResponse>(msg).data;
419 this.state = this.emptyState;
420 this.setState(this.state);
421 UserService.Instance.login(data);
422 WebSocketService.Instance.send(
427 this.props.history.push("/communities");
428 } else if (op == UserOperation.GetCaptcha) {
429 let data = wsJsonToRes<GetCaptchaResponse>(msg).data;
431 this.state.captcha = data;
432 this.state.registerForm.captcha_uuid = data.ok.uuid;
433 this.setState(this.state);
435 } else if (op == UserOperation.PasswordReset) {
436 toast(i18n.t("reset_password_mail_sent"));
437 } else if (op == UserOperation.GetSite) {
438 let data = wsJsonToRes<GetSiteResponse>(msg).data;
439 this.state.site_view = data.site_view;
440 this.setState(this.state);