ui/src/components/password_change.tsx

   1 import { Component, linkEvent } from 'inferno';
   2 import { Helmet } from 'inferno-helmet';
   3 import { Subscription } from 'rxjs';
   4 import { retryWhen, delay, take } from 'rxjs/operators';
   5 import {
   6   UserOperation,
   7   LoginResponse,
   8   PasswordChangeForm,
   9   WebSocketJsonResponse,
  10   GetSiteResponse,
  11   Site,
  12 } from 'lemmy-js-client';
  13 import { WebSocketService, UserService } from '../services';
  14 import { wsJsonToRes, capitalizeFirstLetter, toast } from '../utils';
  15 import { i18n } from '../i18next';
  16
  17 interface State {
  18   passwordChangeForm: PasswordChangeForm;
  19   loading: boolean;
  20   site: Site;
  21 }
  22
  23 export class PasswordChange extends Component<any, State> {
  24   private subscription: Subscription;
  25
  26   emptyState: State = {
  27     passwordChangeForm: {
  28       token: this.props.match.params.token,
  29       password: undefined,
  30       password_verify: undefined,
  31     },
  32     loading: false,
  33     site: undefined,
  34   };
  35
  36   constructor(props: any, context: any) {
  37     super(props, context);
  38
  39     this.state = this.emptyState;
  40
  41     this.subscription = WebSocketService.Instance.subject
  42       .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
  43       .subscribe(
  44         msg => this.parseMessage(msg),
  45         err => console.error(err),
  46         () => console.log('complete')
  47       );
  48     WebSocketService.Instance.getSite();
  49   }
  50
  51   componentWillUnmount() {
  52     this.subscription.unsubscribe();
  53   }
  54
  55   get documentTitle(): string {
  56     if (this.state.site) {
  57       return `${i18n.t('password_change')} - ${this.state.site.name}`;
  58     } else {
  59       return 'Lemmy';
  60     }
  61   }
  62
  63   render() {
  64     return (
  65       <div class="container">
  66         <Helmet title={this.documentTitle} />
  67         <div class="row">
  68           <div class="col-12 col-lg-6 offset-lg-3 mb-4">
  69             <h5>{i18n.t('password_change')}</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             {i18n.t('new_password')}
  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             {i18n.t('verify_password')}
  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: WebSocketJsonResponse) {
 144     let res = wsJsonToRes(msg);
 145     if (msg.error) {
 146       toast(i18n.t(msg.error), 'danger');
 147       this.state.loading = false;
 148       this.setState(this.state);
 149       return;
 150     } else if (res.op == UserOperation.PasswordChange) {
 151       let data = res.data as LoginResponse;
 152       this.state = this.emptyState;
 153       this.setState(this.state);
 154       UserService.Instance.login(data);
 155       this.props.history.push('/');
 156     } else if (res.op == UserOperation.GetSite) {
 157       let data = res.data as GetSiteResponse;
 158       this.state.site = data.site;
 159       this.setState(this.state);
 160     }
 161   }
 162 }