ui/src/components/password_change.tsx

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