Move password reset form to separate route, view

src/server/handlers/robots-handler.ts

@@ -5,6 +5,7 @@ export default async ({ res }: { res: Response }) => {
 
   res.send(`User-Agent: *
   Disallow: /login
+  Disallow: /login_reset
   Disallow: /settings
   Disallow: /create_community
   Disallow: /create_post

src/shared/components/home/login-reset.tsx

@@ -0,0 +1,147 @@
+import { Component, linkEvent } from "inferno";
+import { GetSiteResponse } from "lemmy-js-client";
+import { i18n } from "../../i18next";
+import { UserService } from "../../services";
+import { HttpService } from "../../services/HttpService";
+import {
+  capitalizeFirstLetter,
+  isBrowser,
+  setIsoData,
+  toast,
+  validEmail,
+} from "../../utils";
+import { HtmlTags } from "../common/html-tags";
+import { Spinner } from "../common/icon";
+
+interface State {
+  form: {
+    email: string;
+  };
+  loading: boolean;
+  siteRes: GetSiteResponse;
+}
+
+export class LoginReset extends Component<any, State> {
+  private isoData = setIsoData(this.context);
+
+  state: State = {
+    form: {
+      email: "",
+    },
+    loading: false,
+    siteRes: this.isoData.site_res,
+  };
+
+  constructor(props: any, context: any) {
+    super(props, context);
+  }
+
+  componentDidMount() {
+    if (UserService.Instance.myUserInfo) {
+      this.context.router.history.push("/");
+    }
+  }
+
+  get documentTitle(): string {
+    return `${capitalizeFirstLetter(i18n.t("forgot_password"))} - ${
+      this.state.siteRes.site_view.site.name
+    }`;
+  }
+
+  get isLemmyMl(): boolean {
+    return isBrowser() && window.location.hostname == "lemmy.ml";
+  }
+
+  render() {
+    return (
+      <div className="container-lg">
+        <HtmlTags
+          title={this.documentTitle}
+          path={this.context.router.route.match.url}
+        />
+        <div className="row">
+          <div className="col-12 col-lg-6 offset-lg-3">
+            {this.loginResetForm()}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  loginResetForm() {
+    return (
+      <div>
+        <form onSubmit={linkEvent(this, this.handlePasswordReset)}>
+          <h5>{capitalizeFirstLetter(i18n.t("forgot_password"))}</h5>
+
+          <div className="form-group row">
+            <label className="col-form-label col-sm-10">
+              {i18n.t("no_password_reset")}
+            </label>
+          </div>
+
+          <div className="form-group row">
+            <label
+              className="col-sm-2 col-form-label"
+              htmlFor="login-email-or-username"
+            >
+              {i18n.t("email")}
+            </label>
+
+            <div className="col-sm-10">
+              <input
+                type="text"
+                className="form-control"
+                id="login-email-or-username"
+                value={this.state.form.email}
+                onInput={linkEvent(this, this.handleEmailInputChange)}
+                autoComplete="email"
+                required
+                minLength={3}
+              />
+            </div>
+          </div>
+
+          <div className="form-group row">
+            <div className="col-sm-10">
+              <button
+                type="button"
+                onClick={linkEvent(this, this.handlePasswordReset)}
+                className="btn btn-secondary"
+                disabled={
+                  !validEmail(this.state.form.email) || this.state.loading
+                }
+              >
+                {this.state.loading ? <Spinner /> : i18n.t("reset_password")}
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    );
+  }
+
+  handleEmailInputChange(i: LoginReset, event: any) {
+    i.state.form.email = event.target.value.trim();
+    i.setState(i.state);
+  }
+
+  async handlePasswordReset(i: LoginReset, event: any) {
+    event.preventDefault();
+
+    const email = i.state.form.email;
+
+    if (email && validEmail(email)) {
+      i.setState({ loading: true });
+
+      const res = await HttpService.client.passwordReset({ email });
+
+      if (res.state == "success") {
+        toast(i18n.t("reset_password_mail_sent"));
+        this.context.router.history.push("/login");
+      }
+
+      i.setState({ loading: false });
+    }
+  }
+}

src/shared/components/home/login.tsx

@@ -1,9 +1,10 @@
 import { Component, linkEvent } from "inferno";
+import { NavLink } from "inferno-router";
 import { GetSiteResponse, LoginResponse } from "lemmy-js-client";
 import { i18n } from "../../i18next";
 import { UserService } from "../../services";
 import { HttpService, RequestState } from "../../services/HttpService";
-import { isBrowser, myAuth, setIsoData, toast, validEmail } from "../../utils";
+import { isBrowser, myAuth, setIsoData, toast } from "../../utils";
 import { HtmlTags } from "../common/html-tags";
 import { Spinner } from "../common/icon";
 
@@ -101,18 +102,12 @@ export class Login extends Component<any, State> {
                 required
                 maxLength={60}
               />
-              <button
-                type="button"
-                onClick={linkEvent(this, this.handlePasswordReset)}
+              <NavLink
                 className="btn p-0 btn-link d-inline-block float-right text-muted small font-weight-bold pointer-events not-allowed"
-                disabled={
-                  !!this.state.form.username_or_email &&
-                  !validEmail(this.state.form.username_or_email)
-                }
-                title={i18n.t("no_password_reset")}
+                to="/login_reset"
               >
                 {i18n.t("forgot_password")}
-              </button>
+              </NavLink>
             </div>
           </div>
           {this.state.showTotp && (
@@ -210,15 +205,4 @@ export class Login extends Component<any, State> {
     i.state.form.password = event.target.value;
     i.setState(i.state);
   }
-
-  async handlePasswordReset(i: Login, event: any) {
-    event.preventDefault();
-    const email = i.state.form.username_or_email;
-    if (email) {
-      const res = await HttpService.client.passwordReset({ email });
-      if (res.state == "success") {
-        toast(i18n.t("reset_password_mail_sent"));
-      }
-    }
-  }
 }

src/shared/routes.ts

@@ -7,6 +7,7 @@ import { Home } from "./components/home/home";
 import { Instances } from "./components/home/instances";
 import { Legal } from "./components/home/legal";
 import { Login } from "./components/home/login";
+import { LoginReset } from "./components/home/login-reset";
 import { Setup } from "./components/home/setup";
 import { Signup } from "./components/home/signup";
 import { Modlog } from "./components/modlog";
@@ -38,6 +39,10 @@ export const routes: IRoutePropsWithFetch<Record<string, any>>[] = [
     path: `/login`,
     component: Login,
   },
+  {
+    path: `/login_reset`,
+    component: LoginReset,
+  },
   {
     path: `/signup`,
     component: Signup,