Splitting login and signup pages. Fixes #386 (#431)

src/shared/components/app/navbar.tsx

@@ -264,7 +264,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
               /^\/search/
             ) && (
               <form
-                class="form-inline"
+                class="form-inline mr-2"
                 onSubmit={linkEvent(this, this.handleSearchSubmit)}
               >
                 <input
@@ -376,13 +376,22 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
               </>
             ) : (
               <ul class="navbar-nav my-2">
-                <li className="ml-2 nav-item">
+                <li className="nav-item">
                   <button
-                    className="btn btn-success"
+                    className="nav-link btn btn-link"
                     onClick={linkEvent(this, this.handleGotoLogin)}
-                    title={i18n.t("login_sign_up")}
+                    title={i18n.t("login")}
                   >
-                    {i18n.t("login_sign_up")}
+                    {i18n.t("login")}
+                  </button>
+                </li>
+                <li className="nav-item">
+                  <button
+                    className="nav-link btn btn-link"
+                    onClick={linkEvent(this, this.handleGotoSignup)}
+                    title={i18n.t("sign_up")}
+                  >
+                    {i18n.t("sign_up")}
                   </button>
                 </li>
               </ul>
@@ -482,6 +491,11 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
     i.context.router.history.push(`/login`);
   }
 
+  handleGotoSignup(i: Navbar) {
+    i.setState({ showDropdown: false, expanded: false });
+    i.context.router.history.push(`/signup`);
+  }
+
   handleShowDropdown(i: Navbar) {
     i.state.showDropdown = !i.state.showDropdown;
     i.setState(i.state);

src/shared/components/home/login.tsx

@@ -1,14 +1,9 @@
-import { Options, passwordStrength } from "check-password-strength";
-import { I18nKeys } from "i18next";
 import { Component, linkEvent } from "inferno";
-import { T } from "inferno-i18next-dess";
 import {
-  GetCaptchaResponse,
   GetSiteResponse,
   Login as LoginForm,
   LoginResponse,
   PasswordReset,
-  Register,
   SiteView,
   UserOperation,
 } from "lemmy-js-client";
@@ -18,7 +13,6 @@ import { UserService, WebSocketService } from "../../services";
 import {
   authField,
   isBrowser,
-  joinLemmyUrl,
   setIsoData,
   toast,
   validEmail,
@@ -28,67 +22,24 @@ import {
   wsUserOp,
 } from "../../utils";
 import { HtmlTags } from "../common/html-tags";
-import { Icon, Spinner } from "../common/icon";
+import { Spinner } from "../common/icon";
-
-const passwordStrengthOptions: Options<string> = [
-  {
-    id: 0,
-    value: "too_weak",
-    minDiversity: 0,
-    minLength: 0,
-  },
-  {
-    id: 1,
-    value: "weak",
-    minDiversity: 2,
-    minLength: 10,
-  },
-  {
-    id: 2,
-    value: "medium",
-    minDiversity: 3,
-    minLength: 12,
-  },
-  {
-    id: 3,
-    value: "strong",
-    minDiversity: 4,
-    minLength: 14,
-  },
-];
 
 interface State {
   loginForm: LoginForm;
-  registerForm: Register;
   loginLoading: boolean;
-  registerLoading: boolean;
-  captcha: GetCaptchaResponse;
-  captchaPlaying: boolean;
   site_view: SiteView;
 }
 
 export class Login extends Component<any, State> {
   private isoData = setIsoData(this.context);
   private subscription: Subscription;
-  private audio: HTMLAudioElement;
 
   emptyState: State = {
     loginForm: {
       username_or_email: undefined,
       password: undefined,
     },
-    registerForm: {
-      username: undefined,
-      password: undefined,
-      password_verify: undefined,
-      show_nsfw: false,
-      captcha_uuid: undefined,
-      captcha_answer: undefined,
-    },
     loginLoading: false,
-    registerLoading: false,
-    captcha: undefined,
-    captchaPlaying: false,
     site_view: this.isoData.site_res.site_view,
   };
 
@@ -134,8 +85,7 @@ export class Login extends Component<any, State> {
           path={this.context.router.route.match.url}
         />
         <div class="row">
-          <div class="col-12 col-lg-6 mb-4">{this.loginForm()}</div>
+          <div class="col-12 col-lg-6 offset-lg-3">{this.loginForm()}</div>
-          <div class="col-12 col-lg-6">{this.registerForm()}</div>
         </div>
       </div>
     );
@@ -204,213 +154,6 @@ export class Login extends Component<any, State> {
     );
   }
 
-  registerForm() {
-    return (
-      <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
-        <h5>{i18n.t("sign_up")}</h5>
-
-        <div class="form-group row">
-          <label class="col-sm-2 col-form-label" htmlFor="register-username">
-            {i18n.t("username")}
-          </label>
-
-          <div class="col-sm-10">
-            <input
-              type="text"
-              id="register-username"
-              class="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")}
-            />
-          </div>
-        </div>
-
-        <div class="form-group row">
-          <label class="col-sm-2 col-form-label" htmlFor="register-email">
-            {i18n.t("email")}
-          </label>
-          <div class="col-sm-10">
-            <input
-              type="email"
-              id="register-email"
-              class="form-control"
-              placeholder={i18n.t("optional")}
-              value={this.state.registerForm.email}
-              autoComplete="email"
-              onInput={linkEvent(this, this.handleRegisterEmailChange)}
-              minLength={3}
-            />
-            {!validEmail(this.state.registerForm.email) && (
-              <div class="mt-2 mb-0 alert alert-light" role="alert">
-                <Icon icon="alert-triangle" classes="icon-inline mr-2" />
-                {i18n.t("no_password_reset")}
-              </div>
-            )}
-          </div>
-        </div>
-
-        <div class="form-group row">
-          <label class="col-sm-2 col-form-label" htmlFor="register-password">
-            {i18n.t("password")}
-          </label>
-          <div class="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}
-              class="form-control"
-              required
-            />
-            {this.state.registerForm.password && (
-              <div class={this.passwordColorClass}>
-                {i18n.t(this.passwordStrength as I18nKeys)}
-              </div>
-            )}
-          </div>
-        </div>
-
-        <div class="form-group row">
-          <label
-            class="col-sm-2 col-form-label"
-            htmlFor="register-verify-password"
-          >
-            {i18n.t("verify_password")}
-          </label>
-          <div class="col-sm-10">
-            <input
-              type="password"
-              id="register-verify-password"
-              value={this.state.registerForm.password_verify}
-              autoComplete="new-password"
-              onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
-              maxLength={60}
-              class="form-control"
-              required
-            />
-          </div>
-        </div>
-
-        {this.state.captcha && (
-          <div class="form-group row">
-            <label class="col-sm-2" htmlFor="register-captcha">
-              <span class="mr-2">{i18n.t("enter_code")}</span>
-              <button
-                type="button"
-                class="btn btn-secondary"
-                onClick={linkEvent(this, this.handleRegenCaptcha)}
-                aria-label={i18n.t("captcha")}
-              >
-                <Icon icon="refresh-cw" classes="icon-refresh-cw" />
-              </button>
-            </label>
-            {this.showCaptcha()}
-            <div class="col-sm-6">
-              <input
-                type="text"
-                class="form-control"
-                id="register-captcha"
-                value={this.state.registerForm.captcha_answer}
-                onInput={linkEvent(
-                  this,
-                  this.handleRegisterCaptchaAnswerChange
-                )}
-                required
-              />
-            </div>
-          </div>
-        )}
-        {this.state.site_view.site.enable_nsfw && (
-          <div class="form-group row">
-            <div class="col-sm-10">
-              <div class="form-check">
-                <input
-                  class="form-check-input"
-                  id="register-show-nsfw"
-                  type="checkbox"
-                  checked={this.state.registerForm.show_nsfw}
-                  onChange={linkEvent(this, this.handleRegisterShowNsfwChange)}
-                />
-                <label class="form-check-label" htmlFor="register-show-nsfw">
-                  {i18n.t("show_nsfw")}
-                </label>
-              </div>
-            </div>
-          </div>
-        )}
-        {this.isLemmyMl && (
-          <div class="mt-2 mb-0 alert alert-light" role="alert">
-            <T i18nKey="lemmy_ml_registration_message">
-              #<a href={joinLemmyUrl}>#</a>
-            </T>
-          </div>
-        )}
-        <div class="form-group row">
-          <div class="col-sm-10">
-            <button type="submit" class="btn btn-secondary">
-              {this.state.registerLoading ? <Spinner /> : i18n.t("sign_up")}
-            </button>
-          </div>
-        </div>
-      </form>
-    );
-  }
-
-  showCaptcha() {
-    return (
-      <div class="col-sm-4">
-        {this.state.captcha.ok && (
-          <>
-            <img
-              class="rounded-top img-fluid"
-              src={this.captchaPngSrc()}
-              style="border-bottom-right-radius: 0; border-bottom-left-radius: 0;"
-              alt={i18n.t("captcha")}
-            />
-            {this.state.captcha.ok.wav && (
-              <button
-                class="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>
-            )}
-          </>
-        )}
-      </div>
-    );
-  }
-
-  get passwordStrength() {
-    return passwordStrength(
-      this.state.registerForm.password,
-      passwordStrengthOptions
-    ).value;
-  }
-
-  get passwordColorClass(): string {
-    let strength = this.passwordStrength;
-
-    if (["weak", "medium"].includes(strength)) {
-      return "text-warning";
-    } else if (strength == "strong") {
-      return "text-success";
-    } else {
-      return "text-danger";
-    }
-  }
-
   handleLoginSubmit(i: Login, event: any) {
     event.preventDefault();
     i.state.loginLoading = true;
@@ -428,53 +171,6 @@ export class Login extends Component<any, State> {
     i.setState(i.state);
   }
 
-  handleRegisterSubmit(i: Login, event: any) {
-    event.preventDefault();
-    i.state.registerLoading = true;
-    i.setState(i.state);
-    WebSocketService.Instance.send(wsClient.register(i.state.registerForm));
-  }
-
-  handleRegisterUsernameChange(i: Login, event: any) {
-    i.state.registerForm.username = event.target.value;
-    i.setState(i.state);
-  }
-
-  handleRegisterEmailChange(i: Login, event: any) {
-    i.state.registerForm.email = event.target.value;
-    if (i.state.registerForm.email == "") {
-      i.state.registerForm.email = undefined;
-    }
-    i.setState(i.state);
-  }
-
-  handleRegisterPasswordChange(i: Login, event: any) {
-    i.state.registerForm.password = event.target.value;
-    i.setState(i.state);
-  }
-
-  handleRegisterPasswordVerifyChange(i: Login, event: any) {
-    i.state.registerForm.password_verify = event.target.value;
-    i.setState(i.state);
-  }
-
-  handleRegisterShowNsfwChange(i: Login, event: any) {
-    i.state.registerForm.show_nsfw = event.target.checked;
-    i.setState(i.state);
-  }
-
-  handleRegisterCaptchaAnswerChange(i: Login, event: any) {
-    i.state.registerForm.captcha_answer = event.target.value;
-    i.setState(i.state);
-  }
-
-  handleRegenCaptcha(i: Login) {
-    i.audio = null;
-    i.state.captchaPlaying = false;
-    i.setState(i.state);
-    WebSocketService.Instance.send(wsClient.getCaptcha());
-  }
-
   handlePasswordReset(i: Login, event: any) {
     event.preventDefault();
     let resetForm: PasswordReset = {
@@ -483,37 +179,12 @@ export class Login extends Component<any, State> {
     WebSocketService.Instance.send(wsClient.passwordReset(resetForm));
   }
 
-  handleCaptchaPlay(i: Login) {
-    // 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.
-    if (i.audio == null) {
-      let base64 = `data:audio/wav;base64,${i.state.captcha.ok.wav}`;
-      i.audio = new Audio(base64);
-    }
-
-    i.audio.play();
-
-    i.state.captchaPlaying = true;
-    i.setState(i.state);
-
-    i.audio.addEventListener("ended", () => {
-      i.audio.currentTime = 0;
-      i.state.captchaPlaying = false;
-      i.setState(i.state);
-    });
-  }
-
-  captchaPngSrc() {
-    return `data:image/png;base64,${this.state.captcha.ok.png}`;
-  }
-
   parseMessage(msg: any) {
     let op = wsUserOp(msg);
     console.log(msg);
     if (msg.error) {
       toast(i18n.t(msg.error), "danger");
       this.state = this.emptyState;
-      this.state.registerForm.captcha_answer = undefined;
       // Refetch another captcha
       WebSocketService.Instance.send(wsClient.getCaptcha());
       this.setState(this.state);
@@ -531,24 +202,6 @@ export class Login extends Component<any, State> {
         );
         toast(i18n.t("logged_in"));
         this.props.history.push("/");
-      } else if (op == UserOperation.Register) {
-        let data = wsJsonToRes<LoginResponse>(msg).data;
-        this.state = this.emptyState;
-        this.setState(this.state);
-        UserService.Instance.login(data);
-        WebSocketService.Instance.send(
-          wsClient.userJoin({
-            auth: authField(),
-          })
-        );
-        this.props.history.push("/communities");
-      } else if (op == UserOperation.GetCaptcha) {
-        let data = wsJsonToRes<GetCaptchaResponse>(msg).data;
-        if (data.ok) {
-          this.state.captcha = data;
-          this.state.registerForm.captcha_uuid = data.ok.uuid;
-          this.setState(this.state);
-        }
       } else if (op == UserOperation.PasswordReset) {
         toast(i18n.t("reset_password_mail_sent"));
       } else if (op == UserOperation.GetSite) {

src/shared/components/home/signup.tsx

@@ -0,0 +1,444 @@
+import { Component, linkEvent } from "inferno";
+import { T } from "inferno-i18next-dess";
+import {
+  GetCaptchaResponse,
+  GetSiteResponse,
+  LoginResponse,
+  Register,
+  SiteView,
+  UserOperation,
+} from "lemmy-js-client";
+import { Subscription } from "rxjs";
+import { i18n } from "../../i18next";
+import { Options, passwordStrength } from "check-password-strength";
+import { UserService, WebSocketService } from "../../services";
+import {
+  authField,
+  isBrowser,
+  joinLemmyUrl,
+  setIsoData,
+  toast,
+  validEmail,
+  wsClient,
+  wsJsonToRes,
+  wsSubscribe,
+  wsUserOp,
+} from "../../utils";
+import { HtmlTags } from "../common/html-tags";
+import { Icon, Spinner } from "../common/icon";
+import {I18nKeys} from "i18next";
+
+const passwordStrengthOptions: Options<string> = [
+  {
+    id: 0,
+    value: "too_weak",
+    minDiversity: 0,
+    minLength: 0,
+  },
+  {
+    id: 1,
+    value: "weak",
+    minDiversity: 2,
+    minLength: 10,
+  },
+  {
+    id: 2,
+    value: "medium",
+    minDiversity: 3,
+    minLength: 12,
+  },
+  {
+    id: 3,
+    value: "strong",
+    minDiversity: 4,
+    minLength: 14,
+  },
+];
+
+interface State {
+  registerForm: Register;
+  registerLoading: boolean;
+  captcha: GetCaptchaResponse;
+  captchaPlaying: boolean;
+  site_view: SiteView;
+}
+
+export class Signup extends Component<any, State> {
+  private isoData = setIsoData(this.context);
+  private subscription: Subscription;
+  private audio: HTMLAudioElement;
+
+  emptyState: State = {
+    registerForm: {
+      username: undefined,
+      password: undefined,
+      password_verify: undefined,
+      show_nsfw: false,
+      captcha_uuid: undefined,
+      captcha_answer: undefined,
+    },
+    registerLoading: false,
+    captcha: undefined,
+    captchaPlaying: false,
+    site_view: this.isoData.site_res.site_view,
+  };
+
+  constructor(props: any, context: any) {
+    super(props, context);
+
+    this.state = this.emptyState;
+
+    this.parseMessage = this.parseMessage.bind(this);
+    this.subscription = wsSubscribe(this.parseMessage);
+
+    if (isBrowser()) {
+      WebSocketService.Instance.send(wsClient.getCaptcha());
+    }
+  }
+
+  componentWillUnmount() {
+    if (isBrowser()) {
+      this.subscription.unsubscribe();
+    }
+  }
+
+  get documentTitle(): string {
+    return `${i18n.t("login")} - ${this.state.site_view.site.name}`;
+  }
+
+  get isLemmyMl(): boolean {
+    return isBrowser() && window.location.hostname == "lemmy.ml";
+  }
+
+  render() {
+    return (
+      <div class="container">
+        <HtmlTags
+          title={this.documentTitle}
+          path={this.context.router.route.match.url}
+        />
+        <div class="row">
+          <div class="col-12 col-lg-6 offset-lg-3">{this.registerForm()}</div>
+        </div>
+      </div>
+    );
+  }
+
+  registerForm() {
+    return (
+      <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
+        <h5>{i18n.t("sign_up")}</h5>
+
+        <div class="form-group row">
+          <label class="col-sm-2 col-form-label" htmlFor="register-username">
+            {i18n.t("username")}
+          </label>
+
+          <div class="col-sm-10">
+            <input
+              type="text"
+              id="register-username"
+              class="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")}
+            />
+          </div>
+        </div>
+
+        <div class="form-group row">
+          <label class="col-sm-2 col-form-label" htmlFor="register-email">
+            {i18n.t("email")}
+          </label>
+          <div class="col-sm-10">
+            <input
+              type="email"
+              id="register-email"
+              class="form-control"
+              placeholder={i18n.t("optional")}
+              value={this.state.registerForm.email}
+              autoComplete="email"
+              onInput={linkEvent(this, this.handleRegisterEmailChange)}
+              minLength={3}
+            />
+            {!validEmail(this.state.registerForm.email) && (
+              <div class="mt-2 mb-0 alert alert-light" role="alert">
+                <Icon icon="alert-triangle" classes="icon-inline mr-2" />
+                {i18n.t("no_password_reset")}
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div class="form-group row">
+          <label class="col-sm-2 col-form-label" htmlFor="register-password">
+            {i18n.t("password")}
+          </label>
+          <div class="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}
+              class="form-control"
+              required
+            />
+            {this.state.registerForm.password && (
+              <div class={this.passwordColorClass}>
+                {i18n.t(this.passwordStrength as I18nKeys)}
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div class="form-group row">
+          <label
+            class="col-sm-2 col-form-label"
+            htmlFor="register-verify-password"
+          >
+            {i18n.t("verify_password")}
+          </label>
+          <div class="col-sm-10">
+            <input
+              type="password"
+              id="register-verify-password"
+              value={this.state.registerForm.password_verify}
+              autoComplete="new-password"
+              onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
+              maxLength={60}
+              class="form-control"
+              required
+            />
+          </div>
+        </div>
+
+        {this.state.captcha && (
+          <div class="form-group row">
+            <label class="col-sm-2" htmlFor="register-captcha">
+              <span class="mr-2">{i18n.t("enter_code")}</span>
+              <button
+                type="button"
+                class="btn btn-secondary"
+                onClick={linkEvent(this, this.handleRegenCaptcha)}
+                aria-label={i18n.t("captcha")}
+              >
+                <Icon icon="refresh-cw" classes="icon-refresh-cw" />
+              </button>
+            </label>
+            {this.showCaptcha()}
+            <div class="col-sm-6">
+              <input
+                type="text"
+                class="form-control"
+                id="register-captcha"
+                value={this.state.registerForm.captcha_answer}
+                onInput={linkEvent(
+                  this,
+                  this.handleRegisterCaptchaAnswerChange
+                )}
+                required
+              />
+            </div>
+          </div>
+        )}
+        {this.state.site_view.site.enable_nsfw && (
+          <div class="form-group row">
+            <div class="col-sm-10">
+              <div class="form-check">
+                <input
+                  class="form-check-input"
+                  id="register-show-nsfw"
+                  type="checkbox"
+                  checked={this.state.registerForm.show_nsfw}
+                  onChange={linkEvent(this, this.handleRegisterShowNsfwChange)}
+                />
+                <label class="form-check-label" htmlFor="register-show-nsfw">
+                  {i18n.t("show_nsfw")}
+                </label>
+              </div>
+            </div>
+          </div>
+        )}
+        {this.isLemmyMl && (
+          <div class="mt-2 mb-0 alert alert-light" role="alert">
+            <T i18nKey="lemmy_ml_registration_message">
+              #<a href={joinLemmyUrl}>#</a>
+            </T>
+          </div>
+        )}
+        <div class="form-group row">
+          <div class="col-sm-10">
+            <button type="submit" class="btn btn-secondary">
+              {this.state.registerLoading ? <Spinner /> : i18n.t("sign_up")}
+            </button>
+          </div>
+        </div>
+      </form>
+    );
+  }
+
+  showCaptcha() {
+    return (
+      <div class="col-sm-4">
+        {this.state.captcha.ok && (
+          <>
+            <img
+              class="rounded-top img-fluid"
+              src={this.captchaPngSrc()}
+              style="border-bottom-right-radius: 0; border-bottom-left-radius: 0;"
+              alt={i18n.t("captcha")}
+            />
+            {this.state.captcha.ok.wav && (
+              <button
+                class="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>
+            )}
+          </>
+        )}
+      </div>
+    );
+  }
+
+  get passwordStrength() {
+    return passwordStrength(
+      this.state.registerForm.password,
+      passwordStrengthOptions
+    ).value;
+  }
+
+  get passwordColorClass(): string {
+    let strength = this.passwordStrength;
+
+    if (["weak", "medium"].includes(strength)) {
+      return "text-warning";
+    } else if (strength == "strong") {
+      return "text-success";
+    } else {
+      return "text-danger";
+    }
+  }
+
+  handleRegisterSubmit(i: Signup, event: any) {
+    event.preventDefault();
+    i.state.registerLoading = true;
+    i.setState(i.state);
+    WebSocketService.Instance.send(wsClient.register(i.state.registerForm));
+  }
+
+  handleRegisterUsernameChange(i: Signup, event: any) {
+    i.state.registerForm.username = event.target.value;
+    i.setState(i.state);
+  }
+
+  handleRegisterEmailChange(i: Signup, event: any) {
+    i.state.registerForm.email = event.target.value;
+    if (i.state.registerForm.email == "") {
+      i.state.registerForm.email = undefined;
+    }
+    i.setState(i.state);
+  }
+
+  handleRegisterPasswordChange(i: Signup, event: any) {
+    i.state.registerForm.password = event.target.value;
+    i.setState(i.state);
+  }
+
+  handleRegisterPasswordVerifyChange(i: Signup, event: any) {
+    i.state.registerForm.password_verify = event.target.value;
+    i.setState(i.state);
+  }
+
+  handleRegisterShowNsfwChange(i: Signup, event: any) {
+    i.state.registerForm.show_nsfw = event.target.checked;
+    i.setState(i.state);
+  }
+
+  handleRegisterCaptchaAnswerChange(i: Signup, event: any) {
+    i.state.registerForm.captcha_answer = event.target.value;
+    i.setState(i.state);
+  }
+
+  handleRegenCaptcha(i: Signup) {
+    i.audio = null;
+    i.state.captchaPlaying = false;
+    i.setState(i.state);
+    WebSocketService.Instance.send(wsClient.getCaptcha());
+  }
+
+  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.
+    if (i.audio == null) {
+      let base64 = `data:audio/wav;base64,${i.state.captcha.ok.wav}`;
+      i.audio = new Audio(base64);
+    }
+
+    i.audio.play();
+
+    i.state.captchaPlaying = true;
+    i.setState(i.state);
+
+    i.audio.addEventListener("ended", () => {
+      i.audio.currentTime = 0;
+      i.state.captchaPlaying = false;
+      i.setState(i.state);
+    });
+  }
+
+  captchaPngSrc() {
+    return `data:image/png;base64,${this.state.captcha.ok.png}`;
+  }
+
+  parseMessage(msg: any) {
+    let op = wsUserOp(msg);
+    console.log(msg);
+    if (msg.error) {
+      toast(i18n.t(msg.error), "danger");
+      this.state = this.emptyState;
+      this.state.registerForm.captcha_answer = undefined;
+      // Refetch another captcha
+      WebSocketService.Instance.send(wsClient.getCaptcha());
+      this.setState(this.state);
+      return;
+    } else {
+      if (op == UserOperation.Register) {
+        let data = wsJsonToRes<LoginResponse>(msg).data;
+        this.state = this.emptyState;
+        this.setState(this.state);
+        UserService.Instance.login(data);
+        WebSocketService.Instance.send(
+          wsClient.userJoin({
+            auth: authField(),
+          })
+        );
+        this.props.history.push("/communities");
+      } else if (op == UserOperation.GetCaptcha) {
+        let data = wsJsonToRes<GetCaptchaResponse>(msg).data;
+        if (data.ok) {
+          this.state.captcha = data;
+          this.state.registerForm.captcha_uuid = data.ok.uuid;
+          this.setState(this.state);
+        }
+      } else if (op == UserOperation.PasswordReset) {
+        toast(i18n.t("reset_password_mail_sent"));
+      } else if (op == UserOperation.GetSite) {
+        let data = wsJsonToRes<GetSiteResponse>(msg).data;
+        this.state.site_view = data.site_view;
+        this.setState(this.state);
+      }
+    }
+  }
+}

src/shared/routes.ts

@@ -8,6 +8,7 @@ import { Instances } from "./components/home/instances";
 import { Login } from "./components/home/login";
 import { PasswordChange } from "./components/home/password_change";
 import { Setup } from "./components/home/setup";
+import { Signup } from "./components/home/signup";
 import { Modlog } from "./components/modlog";
 import { Inbox } from "./components/person/inbox";
 import { Profile } from "./components/person/profile";
@@ -38,6 +39,10 @@ export const routes: IRoutePropsWithFetch[] = [
     path: `/login`,
     component: Login,
   },
+  {
+    path: `/signup`,
+    component: Signup,
+  },
   {
     path: `/create_post`,
     component: CreatePost,