src/shared/components/home/signup.tsx

   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";
   5 import {
   6   GetCaptchaResponse,
   7   GetSiteResponse,
   8   LoginResponse,
   9   Register,
  10   SiteView,
  11   UserOperation,
  12 } from "lemmy-js-client";
  13 import { Subscription } from "rxjs";
  14 import { i18n } from "../../i18next";
  15 import { UserService, WebSocketService } from "../../services";
  16 import {
  17   authField,
  18   isBrowser,
  19   joinLemmyUrl,
  20   setIsoData,
  21   toast,
  22   validEmail,
  23   wsClient,
  24   wsJsonToRes,
  25   wsSubscribe,
  26   wsUserOp,
  27 } from "../../utils";
  28 import { HtmlTags } from "../common/html-tags";
  29 import { Icon, Spinner } from "../common/icon";
  30
  31 const passwordStrengthOptions: Options<string> = [
  32   {
  33     id: 0,
  34     value: "very_weak",
  35     minDiversity: 0,
  36     minLength: 0,
  37   },
  38   {
  39     id: 1,
  40     value: "weak",
  41     minDiversity: 2,
  42     minLength: 10,
  43   },
  44   {
  45     id: 2,
  46     value: "medium",
  47     minDiversity: 3,
  48     minLength: 12,
  49   },
  50   {
  51     id: 3,
  52     value: "strong",
  53     minDiversity: 4,
  54     minLength: 14,
  55   },
  56 ];
  57
  58 interface State {
  59   registerForm: Register;
  60   registerLoading: boolean;
  61   captcha: GetCaptchaResponse;
  62   captchaPlaying: boolean;
  63   site_view: SiteView;
  64 }
  65
  66 export class Signup extends Component<any, State> {
  67   private isoData = setIsoData(this.context);
  68   private subscription: Subscription;
  69   private audio: HTMLAudioElement;
  70
  71   emptyState: State = {
  72     registerForm: {
  73       username: undefined,
  74       password: undefined,
  75       password_verify: undefined,
  76       show_nsfw: false,
  77       captcha_uuid: undefined,
  78       captcha_answer: undefined,
  79       honeypot: undefined,
  80     },
  81     registerLoading: false,
  82     captcha: undefined,
  83     captchaPlaying: false,
  84     site_view: this.isoData.site_res.site_view,
  85   };
  86
  87   constructor(props: any, context: any) {
  88     super(props, context);
  89
  90     this.state = this.emptyState;
  91
  92     this.parseMessage = this.parseMessage.bind(this);
  93     this.subscription = wsSubscribe(this.parseMessage);
  94
  95     if (isBrowser()) {
  96       WebSocketService.Instance.send(wsClient.getCaptcha());
  97     }
  98   }
  99
 100   componentWillUnmount() {
 101     if (isBrowser()) {
 102       this.subscription.unsubscribe();
 103     }
 104   }
 105
 106   get documentTitle(): string {
 107     return `${i18n.t("login")} - ${this.state.site_view.site.name}`;
 108   }
 109
 110   get isLemmyMl(): boolean {
 111     return isBrowser() && window.location.hostname == "lemmy.ml";
 112   }
 113
 114   render() {
 115     return (
 116       <div class="container">
 117         <HtmlTags
 118           title={this.documentTitle}
 119           path={this.context.router.route.match.url}
 120         />
 121         <div class="row">
 122           <div class="col-12 col-lg-6 offset-lg-3">{this.registerForm()}</div>
 123         </div>
 124       </div>
 125     );
 126   }
 127
 128   registerForm() {
 129     return (
 130       <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
 131         <h5>{i18n.t("sign_up")}</h5>
 132
 133         <div class="form-group row">
 134           <label class="col-sm-2 col-form-label" htmlFor="register-username">
 135             {i18n.t("username")}
 136           </label>
 137
 138           <div class="col-sm-10">
 139             <input
 140               type="text"
 141               id="register-username"
 142               class="form-control"
 143               value={this.state.registerForm.username}
 144               onInput={linkEvent(this, this.handleRegisterUsernameChange)}
 145               required
 146               minLength={3}
 147               pattern="[a-zA-Z0-9_]+"
 148               title={i18n.t("community_reqs")}
 149             />
 150           </div>
 151         </div>
 152
 153         <div class="form-group row">
 154           <label class="col-sm-2 col-form-label" htmlFor="register-email">
 155             {i18n.t("email")}
 156           </label>
 157           <div class="col-sm-10">
 158             <input
 159               type="email"
 160               id="register-email"
 161               class="form-control"
 162               placeholder={i18n.t("optional")}
 163               value={this.state.registerForm.email}
 164               autoComplete="email"
 165               onInput={linkEvent(this, this.handleRegisterEmailChange)}
 166               minLength={3}
 167             />
 168             {!validEmail(this.state.registerForm.email) && (
 169               <div class="mt-2 mb-0 alert alert-light" role="alert">
 170                 <Icon icon="alert-triangle" classes="icon-inline mr-2" />
 171                 {i18n.t("no_password_reset")}
 172               </div>
 173             )}
 174           </div>
 175         </div>
 176
 177         <div class="form-group row">
 178           <label class="col-sm-2 col-form-label" htmlFor="register-password">
 179             {i18n.t("password")}
 180           </label>
 181           <div class="col-sm-10">
 182             <input
 183               type="password"
 184               id="register-password"
 185               value={this.state.registerForm.password}
 186               autoComplete="new-password"
 187               onInput={linkEvent(this, this.handleRegisterPasswordChange)}
 188               minLength={10}
 189               maxLength={60}
 190               class="form-control"
 191               required
 192             />
 193             {this.state.registerForm.password && (
 194               <div class={this.passwordColorClass}>
 195                 {i18n.t(this.passwordStrength as I18nKeys)}
 196               </div>
 197             )}
 198           </div>
 199         </div>
 200
 201         <div class="form-group row">
 202           <label
 203             class="col-sm-2 col-form-label"
 204             htmlFor="register-verify-password"
 205           >
 206             {i18n.t("verify_password")}
 207           </label>
 208           <div class="col-sm-10">
 209             <input
 210               type="password"
 211               id="register-verify-password"
 212               value={this.state.registerForm.password_verify}
 213               autoComplete="new-password"
 214               onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
 215               maxLength={60}
 216               class="form-control"
 217               required
 218             />
 219           </div>
 220         </div>
 221
 222         {this.state.captcha && (
 223           <div class="form-group row">
 224             <label class="col-sm-2" htmlFor="register-captcha">
 225               <span class="mr-2">{i18n.t("enter_code")}</span>
 226               <button
 227                 type="button"
 228                 class="btn btn-secondary"
 229                 onClick={linkEvent(this, this.handleRegenCaptcha)}
 230                 aria-label={i18n.t("captcha")}
 231               >
 232                 <Icon icon="refresh-cw" classes="icon-refresh-cw" />
 233               </button>
 234             </label>
 235             {this.showCaptcha()}
 236             <div class="col-sm-6">
 237               <input
 238                 type="text"
 239                 class="form-control"
 240                 id="register-captcha"
 241                 value={this.state.registerForm.captcha_answer}
 242                 onInput={linkEvent(
 243                   this,
 244                   this.handleRegisterCaptchaAnswerChange
 245                 )}
 246                 required
 247               />
 248             </div>
 249           </div>
 250         )}
 251         {this.state.site_view.site.enable_nsfw && (
 252           <div class="form-group row">
 253             <div class="col-sm-10">
 254               <div class="form-check">
 255                 <input
 256                   class="form-check-input"
 257                   id="register-show-nsfw"
 258                   type="checkbox"
 259                   checked={this.state.registerForm.show_nsfw}
 260                   onChange={linkEvent(this, this.handleRegisterShowNsfwChange)}
 261                 />
 262                 <label class="form-check-label" htmlFor="register-show-nsfw">
 263                   {i18n.t("show_nsfw")}
 264                 </label>
 265               </div>
 266             </div>
 267           </div>
 268         )}
 269         {this.isLemmyMl && (
 270           <div class="mt-2 mb-0 alert alert-light" role="alert">
 271             <T i18nKey="lemmy_ml_registration_message">
 272               #<a href={joinLemmyUrl}>#</a>
 273             </T>
 274           </div>
 275         )}
 276         <input
 277           tabIndex={-1}
 278           autoComplete="false"
 279           name="a_password"
 280           type="text"
 281           class="form-control honeypot"
 282           id="register-honey"
 283           value={this.state.registerForm.honeypot}
 284           onInput={linkEvent(this, this.handleHoneyPotChange)}
 285         />
 286         <div class="form-group row">
 287           <div class="col-sm-10">
 288             <button type="submit" class="btn btn-secondary">
 289               {this.state.registerLoading ? <Spinner /> : i18n.t("sign_up")}
 290             </button>
 291           </div>
 292         </div>
 293       </form>
 294     );
 295   }
 296
 297   showCaptcha() {
 298     return (
 299       <div class="col-sm-4">
 300         {this.state.captcha.ok && (
 301           <>
 302             <img
 303               class="rounded-top img-fluid"
 304               src={this.captchaPngSrc()}
 305               style="border-bottom-right-radius: 0; border-bottom-left-radius: 0;"
 306               alt={i18n.t("captcha")}
 307             />
 308             {this.state.captcha.ok.wav && (
 309               <button
 310                 class="rounded-bottom btn btn-sm btn-secondary btn-block"
 311                 style="border-top-right-radius: 0; border-top-left-radius: 0;"
 312                 title={i18n.t("play_captcha_audio")}
 313                 onClick={linkEvent(this, this.handleCaptchaPlay)}
 314                 type="button"
 315                 disabled={this.state.captchaPlaying}
 316               >
 317                 <Icon icon="play" classes="icon-play" />
 318               </button>
 319             )}
 320           </>
 321         )}
 322       </div>
 323     );
 324   }
 325
 326   get passwordStrength() {
 327     return passwordStrength(
 328       this.state.registerForm.password,
 329       passwordStrengthOptions
 330     ).value;
 331   }
 332
 333   get passwordColorClass(): string {
 334     let strength = this.passwordStrength;
 335
 336     if (["weak", "medium"].includes(strength)) {
 337       return "text-warning";
 338     } else if (strength == "strong") {
 339       return "text-success";
 340     } else {
 341       return "text-danger";
 342     }
 343   }
 344
 345   handleRegisterSubmit(i: Signup, event: any) {
 346     event.preventDefault();
 347     i.state.registerLoading = true;
 348     i.setState(i.state);
 349     WebSocketService.Instance.send(wsClient.register(i.state.registerForm));
 350   }
 351
 352   handleRegisterUsernameChange(i: Signup, event: any) {
 353     i.state.registerForm.username = event.target.value;
 354     i.setState(i.state);
 355   }
 356
 357   handleRegisterEmailChange(i: Signup, event: any) {
 358     i.state.registerForm.email = event.target.value;
 359     if (i.state.registerForm.email == "") {
 360       i.state.registerForm.email = undefined;
 361     }
 362     i.setState(i.state);
 363   }
 364
 365   handleRegisterPasswordChange(i: Signup, event: any) {
 366     i.state.registerForm.password = event.target.value;
 367     i.setState(i.state);
 368   }
 369
 370   handleRegisterPasswordVerifyChange(i: Signup, event: any) {
 371     i.state.registerForm.password_verify = event.target.value;
 372     i.setState(i.state);
 373   }
 374
 375   handleRegisterShowNsfwChange(i: Signup, event: any) {
 376     i.state.registerForm.show_nsfw = event.target.checked;
 377     i.setState(i.state);
 378   }
 379
 380   handleRegisterCaptchaAnswerChange(i: Signup, event: any) {
 381     i.state.registerForm.captcha_answer = event.target.value;
 382     i.setState(i.state);
 383   }
 384
 385   handleHoneyPotChange(i: Signup, event: any) {
 386     i.state.registerForm.honeypot = event.target.value;
 387     i.setState(i.state);
 388   }
 389
 390   handleRegenCaptcha(i: Signup) {
 391     i.audio = null;
 392     i.state.captchaPlaying = false;
 393     i.setState(i.state);
 394     WebSocketService.Instance.send(wsClient.getCaptcha());
 395   }
 396
 397   handleCaptchaPlay(i: Signup) {
 398     // This was a bad bug, it should only build the new audio on a new file.
 399     // Replays would stop prematurely if this was rebuilt every time.
 400     if (i.audio == null) {
 401       let base64 = `data:audio/wav;base64,${i.state.captcha.ok.wav}`;
 402       i.audio = new Audio(base64);
 403     }
 404
 405     i.audio.play();
 406
 407     i.state.captchaPlaying = true;
 408     i.setState(i.state);
 409
 410     i.audio.addEventListener("ended", () => {
 411       i.audio.currentTime = 0;
 412       i.state.captchaPlaying = false;
 413       i.setState(i.state);
 414     });
 415   }
 416
 417   captchaPngSrc() {
 418     return `data:image/png;base64,${this.state.captcha.ok.png}`;
 419   }
 420
 421   parseMessage(msg: any) {
 422     let op = wsUserOp(msg);
 423     console.log(msg);
 424     if (msg.error) {
 425       toast(i18n.t(msg.error), "danger");
 426       this.state = this.emptyState;
 427       this.state.registerForm.captcha_answer = undefined;
 428       // Refetch another captcha
 429       WebSocketService.Instance.send(wsClient.getCaptcha());
 430       this.setState(this.state);
 431       return;
 432     } else {
 433       if (op == UserOperation.Register) {
 434         let data = wsJsonToRes<LoginResponse>(msg).data;
 435         this.state = this.emptyState;
 436         this.setState(this.state);
 437         UserService.Instance.login(data);
 438         WebSocketService.Instance.send(
 439           wsClient.userJoin({
 440             auth: authField(),
 441           })
 442         );
 443         this.props.history.push("/communities");
 444       } else if (op == UserOperation.GetCaptcha) {
 445         let data = wsJsonToRes<GetCaptchaResponse>(msg).data;
 446         if (data.ok) {
 447           this.state.captcha = data;
 448           this.state.registerForm.captcha_uuid = data.ok.uuid;
 449           this.setState(this.state);
 450         }
 451       } else if (op == UserOperation.PasswordReset) {
 452         toast(i18n.t("reset_password_mail_sent"));
 453       } else if (op == UserOperation.GetSite) {
 454         let data = wsJsonToRes<GetSiteResponse>(msg).data;
 455         this.state.site_view = data.site_view;
 456         this.setState(this.state);
 457       }
 458     }
 459   }
 460 }