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

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