src/shared/components/person/password-change.tsx

   1 import { Component, linkEvent } from "inferno";
   2 import {
   3   GetSiteResponse,
   4   LoginResponse,
   5   PasswordChangeAfterReset,
   6   UserOperation,
   7   wsJsonToRes,
   8   wsUserOp,
   9 } from "lemmy-js-client";
  10 import { Subscription } from "rxjs";
  11 import { i18n } from "../../i18next";
  12 import { UserService, WebSocketService } from "../../services";
  13 import {
  14   capitalizeFirstLetter,
  15   isBrowser,
  16   setIsoData,
  17   toast,
  18   wsClient,
  19   wsSubscribe,
  20 } from "../../utils";
  21 import { HtmlTags } from "../common/html-tags";
  22 import { Spinner } from "../common/icon";
  23
  24 interface State {
  25   form: {
  26     token: string;
  27     password?: string;
  28     password_verify?: string;
  29   };
  30   loading: boolean;
  31   siteRes: GetSiteResponse;
  32 }
  33
  34 export class PasswordChange extends Component<any, State> {
  35   private isoData = setIsoData(this.context);
  36   private subscription?: Subscription;
  37
  38   state: State = {
  39     form: {
  40       token: this.props.match.params.token,
  41     },
  42     loading: false,
  43     siteRes: this.isoData.site_res,
  44   };
  45
  46   constructor(props: any, context: any) {
  47     super(props, context);
  48
  49     this.parseMessage = this.parseMessage.bind(this);
  50     this.subscription = wsSubscribe(this.parseMessage);
  51   }
  52
  53   componentWillUnmount() {
  54     if (isBrowser()) {
  55       this.subscription?.unsubscribe();
  56     }
  57   }
  58
  59   get documentTitle(): string {
  60     return `${i18n.t("password_change")} - ${
  61       this.state.siteRes.site_view.site.name
  62     }`;
  63   }
  64
  65   render() {
  66     return (
  67       <div className="container-lg">
  68         <HtmlTags
  69           title={this.documentTitle}
  70           path={this.context.router.route.match.url}
  71         />
  72         <div className="row">
  73           <div className="col-12 col-lg-6 offset-lg-3 mb-4">
  74             <h5>{i18n.t("password_change")}</h5>
  75             {this.passwordChangeForm()}
  76           </div>
  77         </div>
  78       </div>
  79     );
  80   }
  81
  82   passwordChangeForm() {
  83     return (
  84       <form onSubmit={linkEvent(this, this.handlePasswordChangeSubmit)}>
  85         <div className="form-group row">
  86           <label className="col-sm-2 col-form-label" htmlFor="new-password">
  87             {i18n.t("new_password")}
  88           </label>
  89           <div className="col-sm-10">
  90             <input
  91               id="new-password"
  92               type="password"
  93               value={this.state.form.password}
  94               onInput={linkEvent(this, this.handlePasswordChange)}
  95               className="form-control"
  96               required
  97               maxLength={60}
  98             />
  99           </div>
 100         </div>
 101         <div className="form-group row">
 102           <label className="col-sm-2 col-form-label" htmlFor="verify-password">
 103             {i18n.t("verify_password")}
 104           </label>
 105           <div className="col-sm-10">
 106             <input
 107               id="verify-password"
 108               type="password"
 109               value={this.state.form.password_verify}
 110               onInput={linkEvent(this, this.handleVerifyPasswordChange)}
 111               className="form-control"
 112               required
 113               maxLength={60}
 114             />
 115           </div>
 116         </div>
 117         <div className="form-group row">
 118           <div className="col-sm-10">
 119             <button type="submit" className="btn btn-secondary">
 120               {this.state.loading ? (
 121                 <Spinner />
 122               ) : (
 123                 capitalizeFirstLetter(i18n.t("save"))
 124               )}
 125             </button>
 126           </div>
 127         </div>
 128       </form>
 129     );
 130   }
 131
 132   handlePasswordChange(i: PasswordChange, event: any) {
 133     i.state.form.password = event.target.value;
 134     i.setState(i.state);
 135   }
 136
 137   handleVerifyPasswordChange(i: PasswordChange, event: any) {
 138     i.state.form.password_verify = event.target.value;
 139     i.setState(i.state);
 140   }
 141
 142   handlePasswordChangeSubmit(i: PasswordChange, event: any) {
 143     event.preventDefault();
 144     i.setState({ loading: true });
 145
 146     const password = i.state.form.password;
 147     const password_verify = i.state.form.password_verify;
 148
 149     if (password && password_verify) {
 150       const form: PasswordChangeAfterReset = {
 151         token: i.state.form.token,
 152         password,
 153         password_verify,
 154       };
 155
 156       WebSocketService.Instance.send(wsClient.passwordChange(form));
 157     }
 158   }
 159
 160   parseMessage(msg: any) {
 161     const op = wsUserOp(msg);
 162     console.log(msg);
 163     if (msg.error) {
 164       toast(i18n.t(msg.error), "danger");
 165       this.setState({ loading: false });
 166       return;
 167     } else if (op == UserOperation.PasswordChangeAfterReset) {
 168       const data = wsJsonToRes<LoginResponse>(msg);
 169       UserService.Instance.login(data);
 170       this.props.history.push("/");
 171       location.reload();
 172     }
 173   }
 174 }