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 } from '../interfaces';
   9 import { WebSocketService, UserService } from '../services';
  10 import { msgOp, capitalizeFirstLetter } from '../utils';
  11 import { i18n } from '../i18next';
  12 import { T } from 'inferno-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(
  38         retryWhen(errors =>
  39           errors.pipe(
  40             delay(3000),
  41             take(10)
  42           )
  43         )
  44       )
  45       .subscribe(
  46         msg => this.parseMessage(msg),
  47         err => console.error(err),
  48         () => console.log('complete')
  49       );
  50   }
  51
  52   componentWillUnmount() {
  53     this.subscription.unsubscribe();
  54   }
  55
  56   componentDidMount() {
  57     document.title = `${i18n.t('password_change')} - ${
  58       WebSocketService.Instance.site.name
  59     }`;
  60   }
  61
  62   render() {
  63     return (
  64       <div class="container">
  65         <div class="row">
  66           <div class="col-12 col-lg-6 offset-lg-3 mb-4">
  67             <h5>
  68               <T i18nKey="password_change">#</T>
  69             </h5>
  70             {this.passwordChangeForm()}
  71           </div>
  72         </div>
  73       </div>
  74     );
  75   }
  76
  77   passwordChangeForm() {
  78     return (
  79       <form onSubmit={linkEvent(this, this.handlePasswordChangeSubmit)}>
  80         <div class="form-group row">
  81           <label class="col-sm-2 col-form-label">
  82             <T i18nKey="new_password">#</T>
  83           </label>
  84           <div class="col-sm-10">
  85             <input
  86               type="password"
  87               value={this.state.passwordChangeForm.password}
  88               onInput={linkEvent(this, this.handlePasswordChange)}
  89               class="form-control"
  90               required
  91             />
  92           </div>
  93         </div>
  94         <div class="form-group row">
  95           <label class="col-sm-2 col-form-label">
  96             <T i18nKey="verify_password">#</T>
  97           </label>
  98           <div class="col-sm-10">
  99             <input
 100               type="password"
 101               value={this.state.passwordChangeForm.password_verify}
 102               onInput={linkEvent(this, this.handleVerifyPasswordChange)}
 103               class="form-control"
 104               required
 105             />
 106           </div>
 107         </div>
 108         <div class="form-group row">
 109           <div class="col-sm-10">
 110             <button type="submit" class="btn btn-secondary">
 111               {this.state.loading ? (
 112                 <svg class="icon icon-spinner spin">
 113                   <use xlinkHref="#icon-spinner"></use>
 114                 </svg>
 115               ) : (
 116                 capitalizeFirstLetter(i18n.t('save'))
 117               )}
 118             </button>
 119           </div>
 120         </div>
 121       </form>
 122     );
 123   }
 124
 125   handlePasswordChange(i: PasswordChange, event: any) {
 126     i.state.passwordChangeForm.password = event.target.value;
 127     i.setState(i.state);
 128   }
 129
 130   handleVerifyPasswordChange(i: PasswordChange, event: any) {
 131     i.state.passwordChangeForm.password_verify = event.target.value;
 132     i.setState(i.state);
 133   }
 134
 135   handlePasswordChangeSubmit(i: PasswordChange, event: any) {
 136     event.preventDefault();
 137     i.state.loading = true;
 138     i.setState(i.state);
 139
 140     WebSocketService.Instance.passwordChange(i.state.passwordChangeForm);
 141   }
 142
 143   parseMessage(msg: any) {
 144     let op: UserOperation = msgOp(msg);
 145     if (msg.error) {
 146       alert(i18n.t(msg.error));
 147       this.state.loading = false;
 148       this.setState(this.state);
 149       return;
 150     } else {
 151       if (op == UserOperation.PasswordChange) {
 152         this.state = this.emptyState;
 153         this.setState(this.state);
 154         let res: LoginResponse = msg;
 155         UserService.Instance.login(res);
 156         this.props.history.push('/');
 157       }
 158     }
 159   }
 160 }