src/shared/components/home/password_change.tsx

   1 import { Component, linkEvent } from "inferno";
   2 import {
   3   LoginResponse,
   4   PasswordChange as PasswordChangeForm,
   5   SiteView,
   6   UserOperation,
   7 } from "lemmy-js-client";
   8 import { Subscription } from "rxjs";
   9 import { i18n } from "../../i18next";
  10 import { UserService, WebSocketService } from "../../services";
  11 import {
  12   capitalizeFirstLetter,
  13   isBrowser,
  14   setIsoData,
  15   toast,
  16   wsClient,
  17   wsJsonToRes,
  18   wsSubscribe,
  19   wsUserOp,
  20 } from "../../utils";
  21 import { HtmlTags } from "../common/html-tags";
  22 import { Spinner } from "../common/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               maxLength={60}
  96             />
  97           </div>
  98         </div>
  99         <div class="form-group row">
 100           <label class="col-sm-2 col-form-label" htmlFor="verify-password">
 101             {i18n.t("verify_password")}
 102           </label>
 103           <div class="col-sm-10">
 104             <input
 105               id="verify-password"
 106               type="password"
 107               value={this.state.passwordChangeForm.password_verify}
 108               onInput={linkEvent(this, this.handleVerifyPasswordChange)}
 109               class="form-control"
 110               required
 111               maxLength={60}
 112             />
 113           </div>
 114         </div>
 115         <div class="form-group row">
 116           <div class="col-sm-10">
 117             <button type="submit" class="btn btn-secondary">
 118               {this.state.loading ? (
 119                 <Spinner />
 120               ) : (
 121                 capitalizeFirstLetter(i18n.t("save"))
 122               )}
 123             </button>
 124           </div>
 125         </div>
 126       </form>
 127     );
 128   }
 129
 130   handlePasswordChange(i: PasswordChange, event: any) {
 131     i.state.passwordChangeForm.password = event.target.value;
 132     i.setState(i.state);
 133   }
 134
 135   handleVerifyPasswordChange(i: PasswordChange, event: any) {
 136     i.state.passwordChangeForm.password_verify = event.target.value;
 137     i.setState(i.state);
 138   }
 139
 140   handlePasswordChangeSubmit(i: PasswordChange, event: any) {
 141     event.preventDefault();
 142     i.state.loading = true;
 143     i.setState(i.state);
 144
 145     WebSocketService.Instance.send(
 146       wsClient.passwordChange(i.state.passwordChangeForm)
 147     );
 148   }
 149
 150   parseMessage(msg: any) {
 151     let op = wsUserOp(msg);
 152     console.log(msg);
 153     if (msg.error) {
 154       toast(i18n.t(msg.error), "danger");
 155       this.state.loading = false;
 156       this.setState(this.state);
 157       return;
 158     } else if (op == UserOperation.PasswordChange) {
 159       let data = wsJsonToRes<LoginResponse>(msg).data;
 160       this.state = this.emptyState;
 161       this.setState(this.state);
 162       UserService.Instance.login(data);
 163       this.props.history.push("/");
 164     }
 165   }
 166 }