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