ui/src/components/login.tsx

   1 import { Component, linkEvent } from 'inferno';
   2 import { Subscription } from 'rxjs';
   3 import { retryWhen, delay, take } from 'rxjs/operators';
   4 import {
   5   LoginForm,
   6   RegisterForm,
   7   LoginResponse,
   8   UserOperation,
   9   PasswordResetForm,
  10 } from '../interfaces';
  11 import { WebSocketService, UserService } from '../services';
  12 import { msgOp, validEmail } from '../utils';
  13 import { i18n } from '../i18next';
  14 import { T } from 'inferno-i18next';
  15
  16 interface State {
  17   loginForm: LoginForm;
  18   registerForm: RegisterForm;
  19   loginLoading: boolean;
  20   registerLoading: boolean;
  21 }
  22
  23 export class Login extends Component<any, State> {
  24   private subscription: Subscription;
  25
  26   emptyState: State = {
  27     loginForm: {
  28       username_or_email: undefined,
  29       password: undefined,
  30     },
  31     registerForm: {
  32       username: undefined,
  33       password: undefined,
  34       password_verify: undefined,
  35       admin: false,
  36       show_nsfw: false,
  37     },
  38     loginLoading: false,
  39     registerLoading: false,
  40   };
  41
  42   constructor(props: any, context: any) {
  43     super(props, context);
  44
  45     this.state = this.emptyState;
  46
  47     this.subscription = WebSocketService.Instance.subject
  48       .pipe(
  49         retryWhen(errors =>
  50           errors.pipe(
  51             delay(3000),
  52             take(10)
  53           )
  54         )
  55       )
  56       .subscribe(
  57         msg => this.parseMessage(msg),
  58         err => console.error(err),
  59         () => console.log('complete')
  60       );
  61   }
  62
  63   componentWillUnmount() {
  64     this.subscription.unsubscribe();
  65   }
  66
  67   componentDidMount() {
  68     document.title = `${i18n.t('login')} - ${
  69       WebSocketService.Instance.site.name
  70     }`;
  71   }
  72
  73   render() {
  74     return (
  75       <div class="container">
  76         <div class="row">
  77           <div class="col-12 col-lg-6 mb-4">{this.loginForm()}</div>
  78           <div class="col-12 col-lg-6">{this.registerForm()}</div>
  79         </div>
  80       </div>
  81     );
  82   }
  83
  84   loginForm() {
  85     return (
  86       <div>
  87         <form onSubmit={linkEvent(this, this.handleLoginSubmit)}>
  88           <h5>Login</h5>
  89           <div class="form-group row">
  90             <label class="col-sm-2 col-form-label">
  91               <T i18nKey="email_or_username">#</T>
  92             </label>
  93             <div class="col-sm-10">
  94               <input
  95                 type="text"
  96                 class="form-control"
  97                 value={this.state.loginForm.username_or_email}
  98                 onInput={linkEvent(this, this.handleLoginUsernameChange)}
  99                 required
 100                 minLength={3}
 101               />
 102             </div>
 103           </div>
 104           <div class="form-group row">
 105             <label class="col-sm-2 col-form-label">
 106               <T i18nKey="password">#</T>
 107             </label>
 108             <div class="col-sm-10">
 109               <input
 110                 type="password"
 111                 value={this.state.loginForm.password}
 112                 onInput={linkEvent(this, this.handleLoginPasswordChange)}
 113                 class="form-control"
 114                 required
 115               />
 116               <button
 117                 disabled={!validEmail(this.state.loginForm.username_or_email)}
 118                 onClick={linkEvent(this, this.handlePasswordReset)}
 119                 className="btn p-0 btn-link d-inline-block float-right text-muted small font-weight-bold"
 120               >
 121                 <T i18nKey="forgot_password">#</T>
 122               </button>
 123             </div>
 124           </div>
 125           <div class="form-group row">
 126             <div class="col-sm-10">
 127               <button type="submit" class="btn btn-secondary">
 128                 {this.state.loginLoading ? (
 129                   <svg class="icon icon-spinner spin">
 130                     <use xlinkHref="#icon-spinner"></use>
 131                   </svg>
 132                 ) : (
 133                   i18n.t('login')
 134                 )}
 135               </button>
 136             </div>
 137           </div>
 138         </form>
 139       </div>
 140     );
 141   }
 142   registerForm() {
 143     return (
 144       <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
 145         <h5>
 146           <T i18nKey="sign_up">#</T>
 147         </h5>
 148         <div class="form-group row">
 149           <label class="col-sm-2 col-form-label">
 150             <T i18nKey="username">#</T>
 151           </label>
 152           <div class="col-sm-10">
 153             <input
 154               type="text"
 155               class="form-control"
 156               value={this.state.registerForm.username}
 157               onInput={linkEvent(this, this.handleRegisterUsernameChange)}
 158               required
 159               minLength={3}
 160               maxLength={20}
 161               pattern="[a-zA-Z0-9_]+"
 162             />
 163           </div>
 164         </div>
 165         <div class="form-group row">
 166           <label class="col-sm-2 col-form-label">
 167             <T i18nKey="email">#</T>
 168           </label>
 169           <div class="col-sm-10">
 170             <input
 171               type="email"
 172               class="form-control"
 173               placeholder={i18n.t('optional')}
 174               value={this.state.registerForm.email}
 175               onInput={linkEvent(this, this.handleRegisterEmailChange)}
 176               minLength={3}
 177             />
 178           </div>
 179         </div>
 180         <div class="form-group row">
 181           <label class="col-sm-2 col-form-label">
 182             <T i18nKey="password">#</T>
 183           </label>
 184           <div class="col-sm-10">
 185             <input
 186               type="password"
 187               value={this.state.registerForm.password}
 188               onInput={linkEvent(this, this.handleRegisterPasswordChange)}
 189               class="form-control"
 190               required
 191             />
 192           </div>
 193         </div>
 194         <div class="form-group row">
 195           <label class="col-sm-2 col-form-label">
 196             <T i18nKey="verify_password">#</T>
 197           </label>
 198           <div class="col-sm-10">
 199             <input
 200               type="password"
 201               value={this.state.registerForm.password_verify}
 202               onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
 203               class="form-control"
 204               required
 205             />
 206           </div>
 207         </div>
 208         <div class="form-group row">
 209           <div class="col-sm-10">
 210             <div class="form-check">
 211               <input
 212                 class="form-check-input"
 213                 type="checkbox"
 214                 checked={this.state.registerForm.show_nsfw}
 215                 onChange={linkEvent(this, this.handleRegisterShowNsfwChange)}
 216               />
 217               <label class="form-check-label">
 218                 <T i18nKey="show_nsfw">#</T>
 219               </label>
 220             </div>
 221           </div>
 222         </div>
 223         <div class="form-group row">
 224           <div class="col-sm-10">
 225             <button type="submit" class="btn btn-secondary">
 226               {this.state.registerLoading ? (
 227                 <svg class="icon icon-spinner spin">
 228                   <use xlinkHref="#icon-spinner"></use>
 229                 </svg>
 230               ) : (
 231                 i18n.t('sign_up')
 232               )}
 233             </button>
 234           </div>
 235         </div>
 236       </form>
 237     );
 238   }
 239
 240   handleLoginSubmit(i: Login, event: any) {
 241     event.preventDefault();
 242     i.state.loginLoading = true;
 243     i.setState(i.state);
 244     WebSocketService.Instance.login(i.state.loginForm);
 245   }
 246
 247   handleLoginUsernameChange(i: Login, event: any) {
 248     i.state.loginForm.username_or_email = event.target.value;
 249     i.setState(i.state);
 250   }
 251
 252   handleLoginPasswordChange(i: Login, event: any) {
 253     i.state.loginForm.password = event.target.value;
 254     i.setState(i.state);
 255   }
 256
 257   handleRegisterSubmit(i: Login, event: any) {
 258     event.preventDefault();
 259     i.state.registerLoading = true;
 260     i.setState(i.state);
 261
 262     WebSocketService.Instance.register(i.state.registerForm);
 263   }
 264
 265   handleRegisterUsernameChange(i: Login, event: any) {
 266     i.state.registerForm.username = event.target.value;
 267     i.setState(i.state);
 268   }
 269
 270   handleRegisterEmailChange(i: Login, event: any) {
 271     i.state.registerForm.email = event.target.value;
 272     i.setState(i.state);
 273   }
 274
 275   handleRegisterPasswordChange(i: Login, event: any) {
 276     i.state.registerForm.password = event.target.value;
 277     i.setState(i.state);
 278   }
 279
 280   handleRegisterPasswordVerifyChange(i: Login, event: any) {
 281     i.state.registerForm.password_verify = event.target.value;
 282     i.setState(i.state);
 283   }
 284
 285   handleRegisterShowNsfwChange(i: Login, event: any) {
 286     i.state.registerForm.show_nsfw = event.target.checked;
 287     i.setState(i.state);
 288   }
 289
 290   handlePasswordReset(i: Login) {
 291     event.preventDefault();
 292     let resetForm: PasswordResetForm = {
 293       email: i.state.loginForm.username_or_email,
 294     };
 295     WebSocketService.Instance.passwordReset(resetForm);
 296   }
 297
 298   parseMessage(msg: any) {
 299     let op: UserOperation = msgOp(msg);
 300     if (msg.error) {
 301       alert(i18n.t(msg.error));
 302       this.state = this.emptyState;
 303       this.setState(this.state);
 304       return;
 305     } else {
 306       if (op == UserOperation.Login) {
 307         this.state = this.emptyState;
 308         this.setState(this.state);
 309         let res: LoginResponse = msg;
 310         UserService.Instance.login(res);
 311         this.props.history.push('/');
 312       } else if (op == UserOperation.Register) {
 313         this.state = this.emptyState;
 314         this.setState(this.state);
 315         let res: LoginResponse = msg;
 316         UserService.Instance.login(res);
 317         this.props.history.push('/communities');
 318       } else if (op == UserOperation.PasswordReset) {
 319         alert(i18n.t('reset_password_mail_sent'));
 320       }
 321     }
 322   }
 323 }