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

   1 import { setIsoData } from "@utils/app";
   2 import { capitalizeFirstLetter, validEmail } from "@utils/helpers";
   3 import { Component, linkEvent } from "inferno";
   4 import { GetSiteResponse } from "lemmy-js-client";
   5 import { HttpService, I18NextService, UserService } from "../../services";
   6 import { toast } from "../../toast";
   7 import { HtmlTags } from "../common/html-tags";
   8 import { Spinner } from "../common/icon";
   9
  10 interface State {
  11   form: {
  12     email: string;
  13     loading: boolean;
  14   };
  15   siteRes: GetSiteResponse;
  16 }
  17
  18 export class LoginReset extends Component<any, State> {
  19   private isoData = setIsoData(this.context);
  20
  21   state: State = {
  22     form: {
  23       email: "",
  24       loading: false,
  25     },
  26     siteRes: this.isoData.site_res,
  27   };
  28
  29   constructor(props: any, context: any) {
  30     super(props, context);
  31   }
  32
  33   componentDidMount() {
  34     if (UserService.Instance.myUserInfo) {
  35       this.context.router.history.push("/");
  36     }
  37   }
  38
  39   get documentTitle(): string {
  40     return `${capitalizeFirstLetter(
  41       I18NextService.i18n.t("forgot_password")
  42     )} - ${this.state.siteRes.site_view.site.name}`;
  43   }
  44
  45   render() {
  46     return (
  47       <div className="container-lg">
  48         <HtmlTags
  49           title={this.documentTitle}
  50           path={this.context.router.route.match.url}
  51         />
  52         <div className="col-12 col-lg-6 col-md-8 m-auto">
  53           {this.loginResetForm()}
  54         </div>
  55       </div>
  56     );
  57   }
  58
  59   loginResetForm() {
  60     return (
  61       <form onSubmit={linkEvent(this, this.handlePasswordReset)}>
  62         <h5>
  63           {capitalizeFirstLetter(I18NextService.i18n.t("forgot_password"))}
  64         </h5>
  65
  66         <div className="form-group row">
  67           <label className="col-form-label">
  68             {I18NextService.i18n.t("no_password_reset")}
  69           </label>
  70         </div>
  71
  72         <div className="form-group row mt-2">
  73           <label
  74             className="col-sm-2 col-form-label"
  75             htmlFor="login-reset-email"
  76           >
  77             {I18NextService.i18n.t("email")}
  78           </label>
  79
  80           <div className="col-sm-10">
  81             <input
  82               type="text"
  83               className="form-control"
  84               id="login-reset-email"
  85               value={this.state.form.email}
  86               onInput={linkEvent(this, this.handleEmailInputChange)}
  87               autoComplete="email"
  88               required
  89               minLength={3}
  90             />
  91           </div>
  92         </div>
  93
  94         <div className="form-group row mt-3">
  95           <div className="col-sm-10">
  96             <button
  97               type="button"
  98               onClick={linkEvent(this, this.handlePasswordReset)}
  99               className="btn btn-secondary"
 100               disabled={
 101                 !validEmail(this.state.form.email) || this.state.form.loading
 102               }
 103             >
 104               {this.state.form.loading ? (
 105                 <Spinner />
 106               ) : (
 107                 I18NextService.i18n.t("reset_password")
 108               )}
 109             </button>
 110           </div>
 111         </div>
 112       </form>
 113     );
 114   }
 115
 116   handleEmailInputChange(i: LoginReset, event: any) {
 117     i.setState(s => ((s.form.email = event.target.value.trim()), s));
 118   }
 119
 120   async handlePasswordReset(i: LoginReset, event: any) {
 121     event.preventDefault();
 122
 123     const email = i.state.form.email;
 124
 125     if (email && validEmail(email)) {
 126       i.setState(s => ((s.form.loading = true), s));
 127
 128       const res = await HttpService.client.passwordReset({ email });
 129
 130       if (res.state == "success") {
 131         toast(I18NextService.i18n.t("reset_password_mail_sent"));
 132         i.context.router.history.push("/login");
 133       }
 134
 135       i.setState(s => ((s.form.loading = false), s));
 136     }
 137   }
 138 }