X-Git-Url: http://these/git/?a=blobdiff_plain;f=src%2Fshared%2Fcomponents%2Fhome%2Fsignup.tsx;h=bb1e1f1142be867fd69c742914f90aa2b70d5ab6;hb=c3ab9e74f8775f4b811866d2675b00f9702bde3d;hp=d7dc2a27627b19489fec1c5e6bf1bd6bc5af4592;hpb=6320357d21bab63f6c4af285ff879b6c601ed48f;p=lemmy-ui.git

diff --git a/src/shared/components/home/signup.tsx b/src/shared/components/home/signup.tsx
index d7dc2a2..bb1e1f1 100644
--- a/src/shared/components/home/signup.tsx
+++ b/src/shared/components/home/signup.tsx
@@ -1,6 +1,8 @@
-import { None, Option, Some } from "@sniptt/monads";
+import { myAuth, setIsoData } from "@utils/app";
+import { isBrowser } from "@utils/browser";
+import { validEmail } from "@utils/helpers";
 import { Options, passwordStrength } from "check-password-strength";
-import { I18nKeys } from "i18next";
+import { NoOptionI18nKeys } from "i18next";
 import { Component, linkEvent } from "inferno";
 import { T } from "inferno-i18next-dess";
 import {
@@ -8,26 +10,13 @@ import {
   GetCaptchaResponse,
   GetSiteResponse,
   LoginResponse,
-  Register,
   SiteView,
-  toUndefined,
-  UserOperation,
-  wsJsonToRes,
-  wsUserOp,
 } from "lemmy-js-client";
-import { Subscription } from "rxjs";
-import { i18n } from "../../i18next";
-import { UserService, WebSocketService } from "../../services";
-import {
-  isBrowser,
-  joinLemmyUrl,
-  mdToHtml,
-  setIsoData,
-  toast,
-  validEmail,
-  wsClient,
-  wsSubscribe,
-} from "../../utils";
+import { joinLemmyUrl } from "../../config";
+import { mdToHtml } from "../../markdown";
+import { I18NextService, UserService } from "../../services";
+import { HttpService, RequestState } from "../../services/HttpService";
+import { toast } from "../../toast";
 import { HtmlTags } from "../common/html-tags";
 import { Icon, Spinner } from "../common/icon";
 import { MarkdownTextArea } from "../common/markdown-textarea";
@@ -60,32 +49,33 @@ const passwordStrengthOptions: Options<string> = [
 ];
 
 interface State {
-  registerForm: Register;
-  registerLoading: boolean;
-  captcha: Option<GetCaptchaResponse>;
+  registerRes: RequestState<LoginResponse>;
+  captchaRes: RequestState<GetCaptchaResponse>;
+  form: {
+    username?: string;
+    email?: string;
+    password?: string;
+    password_verify?: string;
+    show_nsfw: boolean;
+    captcha_uuid?: string;
+    captcha_answer?: string;
+    honeypot?: string;
+    answer?: string;
+  };
   captchaPlaying: boolean;
   siteRes: GetSiteResponse;
 }
 
 export class Signup extends Component<any, State> {
   private isoData = setIsoData(this.context);
-  private subscription: Subscription;
-  private audio: HTMLAudioElement;
-
-  emptyState: State = {
-    registerForm: new Register({
-      username: undefined,
-      password: undefined,
-      password_verify: undefined,
+  private audio?: HTMLAudioElement;
+
+  state: State = {
+    registerRes: { state: "empty" },
+    captchaRes: { state: "empty" },
+    form: {
       show_nsfw: false,
-      captcha_uuid: None,
-      captcha_answer: None,
-      honeypot: None,
-      answer: None,
-      email: None,
-    }),
-    registerLoading: false,
-    captcha: None,
+    },
     captchaPlaying: false,
     siteRes: this.isoData.site_res,
   };
@@ -93,32 +83,38 @@ export class Signup extends Component<any, State> {
   constructor(props: any, context: any) {
     super(props, context);
 
-    this.state = this.emptyState;
     this.handleAnswerChange = this.handleAnswerChange.bind(this);
+  }
 
-    this.parseMessage = this.parseMessage.bind(this);
-    this.subscription = wsSubscribe(this.parseMessage);
-
-    if (isBrowser()) {
-      WebSocketService.Instance.send(wsClient.getCaptcha());
+  async componentDidMount() {
+    if (this.state.siteRes.site_view.local_site.captcha_enabled) {
+      await this.fetchCaptcha();
     }
   }
 
-  componentWillUnmount() {
-    if (isBrowser()) {
-      this.subscription.unsubscribe();
-    }
+  async fetchCaptcha() {
+    this.setState({ captchaRes: { state: "loading" } });
+    this.setState({
+      captchaRes: await HttpService.client.getCaptcha({}),
+    });
+
+    this.setState(s => {
+      if (s.captchaRes.state == "success") {
+        s.form.captcha_uuid = s.captchaRes.data.ok?.uuid;
+      }
+      return s;
+    });
   }
 
   get documentTitle(): string {
-    return this.state.siteRes.site_view.match({
-      some: siteView => `${this.titleName(siteView)} - ${siteView.site.name}`,
-      none: "",
-    });
+    const siteView = this.state.siteRes.site_view;
+    return `${this.titleName(siteView)} - ${siteView.site.name}`;
   }
 
   titleName(siteView: SiteView): string {
-    return i18n.t(siteView.site.private_instance ? "apply_to_join" : "sign_up");
+    return I18NextService.i18n.t(
+      siteView.local_site.private_instance ? "apply_to_join" : "sign_up"
+    );
   }
 
   get isLemmyMl(): boolean {
@@ -127,12 +123,10 @@ export class Signup extends Component<any, State> {
 
   render() {
     return (
-      <div className="container">
+      <div className="home-signup container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
-          description={None}
-          image={None}
         />
         <div className="row">
           <div className="col-12 col-lg-6 offset-lg-3">
@@ -144,294 +138,290 @@ export class Signup extends Component<any, State> {
   }
 
   registerForm() {
-    return this.state.siteRes.site_view.match({
-      some: siteView => (
-        <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
-          <h5>{this.titleName(siteView)}</h5>
-
-          {this.isLemmyMl && (
-            <div className="form-group row">
-              <div className="mt-2 mb-0 alert alert-warning" role="alert">
-                <T i18nKey="lemmy_ml_registration_message">
-                  #<a href={joinLemmyUrl}>#</a>
-                </T>
-              </div>
-            </div>
-          )}
-
-          <div className="form-group row">
-            <label
-              className="col-sm-2 col-form-label"
-              htmlFor="register-username"
-            >
-              {i18n.t("username")}
-            </label>
-
-            <div className="col-sm-10">
-              <input
-                type="text"
-                id="register-username"
-                className="form-control"
-                value={this.state.registerForm.username}
-                onInput={linkEvent(this, this.handleRegisterUsernameChange)}
-                required
-                minLength={3}
-                pattern="[a-zA-Z0-9_]+"
-                title={i18n.t("community_reqs")}
-              />
+    const siteView = this.state.siteRes.site_view;
+    return (
+      <form
+        className="was-validated"
+        onSubmit={linkEvent(this, this.handleRegisterSubmit)}
+      >
+        <h1 className="h4 mb-4">{this.titleName(siteView)}</h1>
+
+        {this.isLemmyMl && (
+          <div className="mb-3 row">
+            <div className="mt-2 mb-0 alert alert-warning" role="alert">
+              <T i18nKey="lemmy_ml_registration_message">
+                #<a href={joinLemmyUrl}>#</a>
+              </T>
             </div>
           </div>
-
-          <div className="form-group row">
-            <label className="col-sm-2 col-form-label" htmlFor="register-email">
-              {i18n.t("email")}
-            </label>
-            <div className="col-sm-10">
-              <input
-                type="email"
-                id="register-email"
-                className="form-control"
-                placeholder={
-                  siteView.site.require_email_verification
-                    ? i18n.t("required")
-                    : i18n.t("optional")
-                }
-                value={toUndefined(this.state.registerForm.email)}
-                autoComplete="email"
-                onInput={linkEvent(this, this.handleRegisterEmailChange)}
-                required={siteView.site.require_email_verification}
-                minLength={3}
-              />
-              {!siteView.site.require_email_verification &&
-                !this.state.registerForm.email
-                  .map(validEmail)
-                  .unwrapOr(true) && (
-                  <div className="mt-2 mb-0 alert alert-warning" role="alert">
-                    <Icon icon="alert-triangle" classes="icon-inline mr-2" />
-                    {i18n.t("no_password_reset")}
-                  </div>
-                )}
-            </div>
+        )}
+
+        <div className="mb-3 row">
+          <label
+            className="col-sm-2 col-form-label"
+            htmlFor="register-username"
+          >
+            {I18NextService.i18n.t("username")}
+          </label>
+
+          <div className="col-sm-10">
+            <input
+              type="text"
+              id="register-username"
+              className="form-control"
+              value={this.state.form.username}
+              onInput={linkEvent(this, this.handleRegisterUsernameChange)}
+              required
+              minLength={3}
+              pattern="[a-zA-Z0-9_]+"
+              title={I18NextService.i18n.t("community_reqs")}
+            />
           </div>
+        </div>
 
-          <div className="form-group row">
-            <label
-              className="col-sm-2 col-form-label"
-              htmlFor="register-password"
-            >
-              {i18n.t("password")}
-            </label>
-            <div className="col-sm-10">
-              <input
-                type="password"
-                id="register-password"
-                value={this.state.registerForm.password}
-                autoComplete="new-password"
-                onInput={linkEvent(this, this.handleRegisterPasswordChange)}
-                minLength={10}
-                maxLength={60}
-                className="form-control"
-                required
-              />
-              {this.state.registerForm.password && (
-                <div className={this.passwordColorClass}>
-                  {i18n.t(this.passwordStrength as I18nKeys)}
+        <div className="mb-3 row">
+          <label className="col-sm-2 col-form-label" htmlFor="register-email">
+            {I18NextService.i18n.t("email")}
+          </label>
+          <div className="col-sm-10">
+            <input
+              type="email"
+              id="register-email"
+              className="form-control"
+              placeholder={
+                siteView.local_site.require_email_verification
+                  ? I18NextService.i18n.t("required")
+                  : I18NextService.i18n.t("optional")
+              }
+              value={this.state.form.email}
+              autoComplete="email"
+              onInput={linkEvent(this, this.handleRegisterEmailChange)}
+              required={siteView.local_site.require_email_verification}
+              minLength={3}
+            />
+            {!siteView.local_site.require_email_verification &&
+              this.state.form.email &&
+              !validEmail(this.state.form.email) && (
+                <div className="mt-2 mb-0 alert alert-warning" role="alert">
+                  <Icon icon="alert-triangle" classes="icon-inline me-2" />
+                  {I18NextService.i18n.t("no_password_reset")}
                 </div>
               )}
-            </div>
           </div>
+        </div>
 
-          <div className="form-group row">
-            <label
-              className="col-sm-2 col-form-label"
-              htmlFor="register-verify-password"
-            >
-              {i18n.t("verify_password")}
-            </label>
-            <div className="col-sm-10">
-              <input
-                type="password"
-                id="register-verify-password"
-                value={this.state.registerForm.password_verify}
-                autoComplete="new-password"
-                onInput={linkEvent(
-                  this,
-                  this.handleRegisterPasswordVerifyChange
+        <div className="mb-3 row">
+          <label
+            className="col-sm-2 col-form-label"
+            htmlFor="register-password"
+          >
+            {I18NextService.i18n.t("password")}
+          </label>
+          <div className="col-sm-10">
+            <input
+              type="password"
+              id="register-password"
+              value={this.state.form.password}
+              autoComplete="new-password"
+              onInput={linkEvent(this, this.handleRegisterPasswordChange)}
+              minLength={10}
+              maxLength={60}
+              className="form-control"
+              required
+            />
+            {this.state.form.password && (
+              <div className={this.passwordColorClass}>
+                {I18NextService.i18n.t(
+                  this.passwordStrength as NoOptionI18nKeys
                 )}
-                maxLength={60}
-                className="form-control"
-                required
-              />
-            </div>
+              </div>
+            )}
           </div>
+        </div>
 
-          {siteView.site.require_application && (
-            <>
-              <div className="form-group row">
-                <div className="offset-sm-2 col-sm-10">
-                  <div className="mt-2 alert alert-warning" role="alert">
-                    <Icon icon="alert-triangle" classes="icon-inline mr-2" />
-                    {i18n.t("fill_out_application")}
-                  </div>
-                  {siteView.site.application_question.match({
-                    some: question => (
-                      <div
-                        className="md-div"
-                        dangerouslySetInnerHTML={mdToHtml(question)}
-                      />
-                    ),
-                    none: <></>,
-                  })}
-                </div>
-              </div>
+        <div className="mb-3 row">
+          <label
+            className="col-sm-2 col-form-label"
+            htmlFor="register-verify-password"
+          >
+            {I18NextService.i18n.t("verify_password")}
+          </label>
+          <div className="col-sm-10">
+            <input
+              type="password"
+              id="register-verify-password"
+              value={this.state.form.password_verify}
+              autoComplete="new-password"
+              onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
+              maxLength={60}
+              className="form-control"
+              required
+            />
+          </div>
+        </div>
 
-              <div className="form-group row">
-                <label
-                  className="col-sm-2 col-form-label"
-                  htmlFor="application_answer"
-                >
-                  {i18n.t("answer")}
-                </label>
-                <div className="col-sm-10">
-                  <MarkdownTextArea
-                    initialContent={None}
-                    placeholder={None}
-                    buttonTitle={None}
-                    maxLength={None}
-                    onContentChange={this.handleAnswerChange}
-                    hideNavigationWarnings
-                  />
+        {siteView.local_site.registration_mode == "RequireApplication" && (
+          <>
+            <div className="mb-3 row">
+              <div className="offset-sm-2 col-sm-10">
+                <div className="mt-2 alert alert-warning" role="alert">
+                  <Icon icon="alert-triangle" classes="icon-inline me-2" />
+                  {I18NextService.i18n.t("fill_out_application")}
                 </div>
+                {siteView.local_site.application_question && (
+                  <div
+                    className="md-div"
+                    dangerouslySetInnerHTML={mdToHtml(
+                      siteView.local_site.application_question
+                    )}
+                  />
+                )}
               </div>
-            </>
-          )}
+            </div>
 
-          {this.state.captcha.isSome() && (
-            <div className="form-group row">
-              <label className="col-sm-2" htmlFor="register-captcha">
-                <span className="mr-2">{i18n.t("enter_code")}</span>
-                <button
-                  type="button"
-                  className="btn btn-secondary"
-                  onClick={linkEvent(this, this.handleRegenCaptcha)}
-                  aria-label={i18n.t("captcha")}
-                >
-                  <Icon icon="refresh-cw" classes="icon-refresh-cw" />
-                </button>
+            <div className="mb-3 row">
+              <label
+                className="col-sm-2 col-form-label"
+                htmlFor="application_answer"
+              >
+                {I18NextService.i18n.t("answer")}
               </label>
-              {this.showCaptcha()}
-              <div className="col-sm-6">
-                <input
-                  type="text"
-                  className="form-control"
-                  id="register-captcha"
-                  value={toUndefined(this.state.registerForm.captcha_answer)}
-                  onInput={linkEvent(
-                    this,
-                    this.handleRegisterCaptchaAnswerChange
-                  )}
-                  required
+              <div className="col-sm-10">
+                <MarkdownTextArea
+                  initialContent=""
+                  onContentChange={this.handleAnswerChange}
+                  hideNavigationWarnings
+                  allLanguages={[]}
+                  siteLanguages={[]}
                 />
               </div>
             </div>
-          )}
-          {siteView.site.enable_nsfw && (
-            <div className="form-group row">
-              <div className="col-sm-10">
-                <div className="form-check">
-                  <input
-                    className="form-check-input"
-                    id="register-show-nsfw"
-                    type="checkbox"
-                    checked={this.state.registerForm.show_nsfw}
-                    onChange={linkEvent(
-                      this,
-                      this.handleRegisterShowNsfwChange
-                    )}
-                  />
-                  <label
-                    className="form-check-label"
-                    htmlFor="register-show-nsfw"
-                  >
-                    {i18n.t("show_nsfw")}
-                  </label>
-                </div>
-              </div>
+          </>
+        )}
+        {this.renderCaptcha()}
+        <div className="mb-3 row">
+          <div className="col-sm-10">
+            <div className="form-check">
+              <input
+                className="form-check-input"
+                id="register-show-nsfw"
+                type="checkbox"
+                checked={this.state.form.show_nsfw}
+                onChange={linkEvent(this, this.handleRegisterShowNsfwChange)}
+              />
+              <label className="form-check-label" htmlFor="register-show-nsfw">
+                {I18NextService.i18n.t("show_nsfw")}
+              </label>
             </div>
-          )}
-          <input
-            tabIndex={-1}
-            autoComplete="false"
-            name="a_password"
-            type="text"
-            className="form-control honeypot"
-            id="register-honey"
-            value={toUndefined(this.state.registerForm.honeypot)}
-            onInput={linkEvent(this, this.handleHoneyPotChange)}
-          />
-          <div className="form-group row">
-            <div className="col-sm-10">
-              <button type="submit" className="btn btn-secondary">
-                {this.state.registerLoading ? (
-                  <Spinner />
-                ) : (
-                  this.titleName(siteView)
-                )}
+          </div>
+        </div>
+        <input
+          tabIndex={-1}
+          autoComplete="false"
+          name="a_password"
+          type="text"
+          className="form-control honeypot"
+          id="register-honey"
+          value={this.state.form.honeypot}
+          onInput={linkEvent(this, this.handleHoneyPotChange)}
+        />
+        <div className="mb-3 row">
+          <div className="col-sm-10">
+            <button type="submit" className="btn btn-secondary">
+              {this.state.registerRes.state == "loading" ? (
+                <Spinner />
+              ) : (
+                this.titleName(siteView)
+              )}
+            </button>
+          </div>
+        </div>
+      </form>
+    );
+  }
+
+  renderCaptcha() {
+    switch (this.state.captchaRes.state) {
+      case "loading":
+        return <Spinner />;
+      case "success": {
+        const res = this.state.captchaRes.data;
+        return (
+          <div className="mb-3 row">
+            <label className="col-sm-2" htmlFor="register-captcha">
+              <span className="me-2">
+                {I18NextService.i18n.t("enter_code")}
+              </span>
+              <button
+                type="button"
+                className="btn btn-secondary"
+                onClick={linkEvent(this, this.handleRegenCaptcha)}
+                aria-label={I18NextService.i18n.t("captcha")}
+              >
+                <Icon icon="refresh-cw" classes="icon-refresh-cw" />
               </button>
+            </label>
+            {this.showCaptcha(res)}
+            <div className="col-sm-6">
+              <input
+                type="text"
+                className="form-control"
+                id="register-captcha"
+                value={this.state.form.captcha_answer}
+                onInput={linkEvent(
+                  this,
+                  this.handleRegisterCaptchaAnswerChange
+                )}
+                required
+              />
             </div>
           </div>
-        </form>
-      ),
-      none: <></>,
-    });
+        );
+      }
+    }
   }
 
-  showCaptcha() {
-    return this.state.captcha.match({
-      some: captcha => (
-        <div className="col-sm-4">
-          {captcha.ok.match({
-            some: res => (
-              <>
-                <img
-                  className="rounded-top img-fluid"
-                  src={this.captchaPngSrc(res)}
-                  style="border-bottom-right-radius: 0; border-bottom-left-radius: 0;"
-                  alt={i18n.t("captcha")}
-                />
-                {res.wav.isSome() && (
-                  <button
-                    className="rounded-bottom btn btn-sm btn-secondary btn-block"
-                    style="border-top-right-radius: 0; border-top-left-radius: 0;"
-                    title={i18n.t("play_captcha_audio")}
-                    onClick={linkEvent(this, this.handleCaptchaPlay)}
-                    type="button"
-                    disabled={this.state.captchaPlaying}
-                  >
-                    <Icon icon="play" classes="icon-play" />
-                  </button>
-                )}
-              </>
-            ),
-            none: <></>,
-          })}
-        </div>
-      ),
-      none: <></>,
-    });
+  showCaptcha(res: GetCaptchaResponse) {
+    const captchaRes = res?.ok;
+    return captchaRes ? (
+      <div className="col-sm-4">
+        <>
+          <img
+            className="rounded-top img-fluid"
+            src={this.captchaPngSrc(captchaRes)}
+            style="border-bottom-right-radius: 0; border-bottom-left-radius: 0;"
+            alt={I18NextService.i18n.t("captcha")}
+          />
+          {captchaRes.wav && (
+            <button
+              className="rounded-bottom btn btn-sm btn-secondary d-block"
+              style="border-top-right-radius: 0; border-top-left-radius: 0;"
+              title={I18NextService.i18n.t("play_captcha_audio")}
+              onClick={linkEvent(this, this.handleCaptchaPlay)}
+              type="button"
+              disabled={this.state.captchaPlaying}
+            >
+              <Icon icon="play" classes="icon-play" />
+            </button>
+          )}
+        </>
+      </div>
+    ) : (
+      <></>
+    );
   }
 
-  get passwordStrength() {
-    return passwordStrength(
-      this.state.registerForm.password,
-      passwordStrengthOptions
-    ).value;
+  get passwordStrength(): string | undefined {
+    const password = this.state.form.password;
+    return password
+      ? passwordStrength(password, passwordStrengthOptions).value
+      : undefined;
   }
 
   get passwordColorClass(): string {
-    let strength = this.passwordStrength;
+    const strength = this.passwordStrength;
 
-    if (["weak", "medium"].includes(strength)) {
+    if (strength && ["weak", "medium"].includes(strength)) {
       return "text-warning";
     } else if (strength == "strong") {
       return "text-success";
@@ -440,135 +430,143 @@ export class Signup extends Component<any, State> {
     }
   }
 
-  handleRegisterSubmit(i: Signup, event: any) {
+  async handleRegisterSubmit(i: Signup, event: any) {
     event.preventDefault();
-    i.setState({ registerLoading: true });
-    WebSocketService.Instance.send(wsClient.register(i.state.registerForm));
+    const {
+      show_nsfw,
+      answer,
+      captcha_answer,
+      captcha_uuid,
+      email,
+      honeypot,
+      password,
+      password_verify,
+      username,
+    } = i.state.form;
+    if (username && password && password_verify) {
+      i.setState({ registerRes: { state: "loading" } });
+
+      const registerRes = await HttpService.client.register({
+        username,
+        password,
+        password_verify,
+        email,
+        show_nsfw,
+        captcha_uuid,
+        captcha_answer,
+        honeypot,
+        answer,
+      });
+      switch (registerRes.state) {
+        case "failed": {
+          toast(registerRes.msg, "danger");
+          i.setState({ registerRes: { state: "empty" } });
+          break;
+        }
+
+        case "success": {
+          const data = registerRes.data;
+
+          // Only log them in if a jwt was set
+          if (data.jwt) {
+            UserService.Instance.login({
+              res: data,
+            });
+
+            const site = await HttpService.client.getSite({ auth: myAuth() });
+
+            if (site.state === "success") {
+              UserService.Instance.myUserInfo = site.data.my_user;
+            }
+
+            i.props.history.replace("/communities");
+          } else {
+            if (data.verify_email_sent) {
+              toast(I18NextService.i18n.t("verify_email_sent"));
+            }
+            if (data.registration_created) {
+              toast(I18NextService.i18n.t("registration_application_sent"));
+            }
+            i.props.history.push("/");
+          }
+          break;
+        }
+      }
+    }
   }
 
   handleRegisterUsernameChange(i: Signup, event: any) {
-    i.state.registerForm.username = event.target.value;
+    i.state.form.username = event.target.value.trim();
     i.setState(i.state);
   }
 
   handleRegisterEmailChange(i: Signup, event: any) {
-    i.state.registerForm.email = Some(event.target.value);
-    if (i.state.registerForm.email.unwrap() == "") {
-      i.state.registerForm.email = None;
+    i.state.form.email = event.target.value;
+    if (i.state.form.email == "") {
+      i.state.form.email = undefined;
     }
     i.setState(i.state);
   }
 
   handleRegisterPasswordChange(i: Signup, event: any) {
-    i.state.registerForm.password = event.target.value;
+    i.state.form.password = event.target.value;
     i.setState(i.state);
   }
 
   handleRegisterPasswordVerifyChange(i: Signup, event: any) {
-    i.state.registerForm.password_verify = event.target.value;
+    i.state.form.password_verify = event.target.value;
     i.setState(i.state);
   }
 
   handleRegisterShowNsfwChange(i: Signup, event: any) {
-    i.state.registerForm.show_nsfw = event.target.checked;
+    i.state.form.show_nsfw = event.target.checked;
     i.setState(i.state);
   }
 
   handleRegisterCaptchaAnswerChange(i: Signup, event: any) {
-    i.state.registerForm.captcha_answer = Some(event.target.value);
+    i.state.form.captcha_answer = event.target.value;
     i.setState(i.state);
   }
 
   handleAnswerChange(val: string) {
-    this.setState(s => ((s.registerForm.answer = Some(val)), s));
+    this.setState(s => ((s.form.answer = val), s));
   }
 
   handleHoneyPotChange(i: Signup, event: any) {
-    i.state.registerForm.honeypot = Some(event.target.value);
+    i.state.form.honeypot = event.target.value;
     i.setState(i.state);
   }
 
-  handleRegenCaptcha(i: Signup) {
-    i.audio = null;
+  async handleRegenCaptcha(i: Signup) {
+    i.audio = undefined;
     i.setState({ captchaPlaying: false });
-    WebSocketService.Instance.send(wsClient.getCaptcha());
+    await i.fetchCaptcha();
   }
 
   handleCaptchaPlay(i: Signup) {
     // This was a bad bug, it should only build the new audio on a new file.
     // Replays would stop prematurely if this was rebuilt every time.
-    i.state.captcha.match({
-      some: captcha =>
-        captcha.ok.match({
-          some: res => {
-            if (i.audio == null) {
-              let base64 = `data:audio/wav;base64,${res.wav}`;
-              i.audio = new Audio(base64);
-            }
-
-            i.audio.play();
 
-            i.setState({ captchaPlaying: true });
-
-            i.audio.addEventListener("ended", () => {
-              i.audio.currentTime = 0;
-              i.setState({ captchaPlaying: false });
-            });
-          },
-          none: void 0,
-        }),
-      none: void 0,
-    });
-  }
+    if (i.state.captchaRes.state == "success" && i.state.captchaRes.data.ok) {
+      const captchaRes = i.state.captchaRes.data.ok;
+      if (!i.audio) {
+        const base64 = `data:audio/wav;base64,${captchaRes.wav}`;
+        i.audio = new Audio(base64);
+        i.audio.play();
 
-  captchaPngSrc(captcha: CaptchaResponse) {
-    return `data:image/png;base64,${captcha.png}`;
-  }
+        i.setState({ captchaPlaying: true });
 
-  parseMessage(msg: any) {
-    let op = wsUserOp(msg);
-    console.log(msg);
-    if (msg.error) {
-      toast(i18n.t(msg.error), "danger");
-      this.setState(this.emptyState);
-      this.setState(s => ((s.registerForm.captcha_answer = undefined), s));
-      // Refetch another captcha
-      // WebSocketService.Instance.send(wsClient.getCaptcha());
-      return;
-    } else {
-      if (op == UserOperation.Register) {
-        let data = wsJsonToRes<LoginResponse>(msg, LoginResponse);
-        this.setState(this.emptyState);
-        // Only log them in if a jwt was set
-        if (data.jwt.isSome()) {
-          UserService.Instance.login(data);
-          this.props.history.push("/communities");
-        } else {
-          if (data.verify_email_sent) {
-            toast(i18n.t("verify_email_sent"));
+        i.audio.addEventListener("ended", () => {
+          if (i.audio) {
+            i.audio.currentTime = 0;
+            i.setState({ captchaPlaying: false });
           }
-          if (data.registration_created) {
-            toast(i18n.t("registration_application_sent"));
-          }
-          this.props.history.push("/");
-        }
-      } else if (op == UserOperation.GetCaptcha) {
-        let data = wsJsonToRes<GetCaptchaResponse>(msg, GetCaptchaResponse);
-        data.ok.match({
-          some: res => {
-            this.setState({ captcha: Some(data) });
-            this.setState(
-              s => ((s.registerForm.captcha_uuid = Some(res.uuid)), s)
-            );
-          },
-          none: void 0,
         });
-      } else if (op == UserOperation.PasswordReset) {
-        toast(i18n.t("reset_password_mail_sent"));
-      } else if (op == UserOperation.GetSite) {
-        let data = wsJsonToRes<GetSiteResponse>(msg, GetSiteResponse);
-        this.setState({ siteRes: data });
       }
     }
   }
+
+  captchaPngSrc(captcha: CaptchaResponse) {
+    return `data:image/png;base64,${captcha.png}`;
+  }
 }