src/shared/components/password_change.tsx

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