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