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 { wsJsonToRes, 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(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>
  61               <T i18nKey="password_change">#</T>
  62             </h5>
  63             {this.passwordChangeForm()}
  64           </div>
  65         </div>
  66       </div>
  67     );
  68   }
  69
  70   passwordChangeForm() {
  71     return (
  72       <form onSubmit={linkEvent(this, this.handlePasswordChangeSubmit)}>
  73         <div class="form-group row">
  74           <label class="col-sm-2 col-form-label">
  75             <T i18nKey="new_password">#</T>
  76           </label>
  77           <div class="col-sm-10">
  78             <input
  79               type="password"
  80               value={this.state.passwordChangeForm.password}
  81               onInput={linkEvent(this, this.handlePasswordChange)}
  82               class="form-control"
  83               required
  84             />
  85           </div>
  86         </div>
  87         <div class="form-group row">
  88           <label class="col-sm-2 col-form-label">
  89             <T i18nKey="verify_password">#</T>
  90           </label>
  91           <div class="col-sm-10">
  92             <input
  93               type="password"
  94               value={this.state.passwordChangeForm.password_verify}
  95               onInput={linkEvent(this, this.handleVerifyPasswordChange)}
  96               class="form-control"
  97               required
  98             />
  99           </div>
 100         </div>
 101         <div class="form-group row">
 102           <div class="col-sm-10">
 103             <button type="submit" class="btn btn-secondary">
 104               {this.state.loading ? (
 105                 <svg class="icon icon-spinner spin">
 106                   <use xlinkHref="#icon-spinner"></use>
 107                 </svg>
 108               ) : (
 109                 capitalizeFirstLetter(i18n.t('save'))
 110               )}
 111             </button>
 112           </div>
 113         </div>
 114       </form>
 115     );
 116   }
 117
 118   handlePasswordChange(i: PasswordChange, event: any) {
 119     i.state.passwordChangeForm.password = event.target.value;
 120     i.setState(i.state);
 121   }
 122
 123   handleVerifyPasswordChange(i: PasswordChange, event: any) {
 124     i.state.passwordChangeForm.password_verify = event.target.value;
 125     i.setState(i.state);
 126   }
 127
 128   handlePasswordChangeSubmit(i: PasswordChange, event: any) {
 129     event.preventDefault();
 130     i.state.loading = true;
 131     i.setState(i.state);
 132
 133     WebSocketService.Instance.passwordChange(i.state.passwordChangeForm);
 134   }
 135
 136   parseMessage(msg: any) {
 137     let res = wsJsonToRes(msg);
 138     if (msg.error) {
 139       alert(i18n.t(msg.error));
 140       this.state.loading = false;
 141       this.setState(this.state);
 142       return;
 143     } else {
 144       if (res.op == UserOperation.PasswordChange) {
 145         let data = res.data as LoginResponse;
 146         this.state = this.emptyState;
 147         this.setState(this.state);
 148         UserService.Instance.login(data);
 149         this.props.history.push('/');
 150       }
 151     }
 152   }
 153 }