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         {WebSocketService.Instance.site.enable_nsfw && (
 209           <div class="form-group row">
 210             <div class="col-sm-10">
 211               <div class="form-check">
 212                 <input
 213                   class="form-check-input"
 214                   type="checkbox"
 215                   checked={this.state.registerForm.show_nsfw}
 216                   onChange={linkEvent(this, this.handleRegisterShowNsfwChange)}
 217                 />
 218                 <label class="form-check-label">
 219                   <T i18nKey="show_nsfw">#</T>
 220                 </label>
 221               </div>
 222             </div>
 223           </div>
 224         )}
 225         <div class="form-group row">
 226           <div class="col-sm-10">
 227             <button type="submit" class="btn btn-secondary">
 228               {this.state.registerLoading ? (
 229                 <svg class="icon icon-spinner spin">
 230                   <use xlinkHref="#icon-spinner"></use>
 231                 </svg>
 232               ) : (
 233                 i18n.t('sign_up')
 234               )}
 235             </button>
 236           </div>
 237         </div>
 238       </form>
 239     );
 240   }
 241
 242   handleLoginSubmit(i: Login, event: any) {
 243     event.preventDefault();
 244     i.state.loginLoading = true;
 245     i.setState(i.state);
 246     WebSocketService.Instance.login(i.state.loginForm);
 247   }
 248
 249   handleLoginUsernameChange(i: Login, event: any) {
 250     i.state.loginForm.username_or_email = event.target.value;
 251     i.setState(i.state);
 252   }
 253
 254   handleLoginPasswordChange(i: Login, event: any) {
 255     i.state.loginForm.password = event.target.value;
 256     i.setState(i.state);
 257   }
 258
 259   handleRegisterSubmit(i: Login, event: any) {
 260     event.preventDefault();
 261     i.state.registerLoading = true;
 262     i.setState(i.state);
 263
 264     WebSocketService.Instance.register(i.state.registerForm);
 265   }
 266
 267   handleRegisterUsernameChange(i: Login, event: any) {
 268     i.state.registerForm.username = event.target.value;
 269     i.setState(i.state);
 270   }
 271
 272   handleRegisterEmailChange(i: Login, event: any) {
 273     i.state.registerForm.email = event.target.value;
 274     if (i.state.registerForm.email == '') {
 275       i.state.registerForm.email = undefined;
 276     }
 277     i.setState(i.state);
 278   }
 279
 280   handleRegisterPasswordChange(i: Login, event: any) {
 281     i.state.registerForm.password = event.target.value;
 282     i.setState(i.state);
 283   }
 284
 285   handleRegisterPasswordVerifyChange(i: Login, event: any) {
 286     i.state.registerForm.password_verify = event.target.value;
 287     i.setState(i.state);
 288   }
 289
 290   handleRegisterShowNsfwChange(i: Login, event: any) {
 291     i.state.registerForm.show_nsfw = event.target.checked;
 292     i.setState(i.state);
 293   }
 294
 295   handlePasswordReset(i: Login) {
 296     event.preventDefault();
 297     let resetForm: PasswordResetForm = {
 298       email: i.state.loginForm.username_or_email,
 299     };
 300     WebSocketService.Instance.passwordReset(resetForm);
 301   }
 302
 303   parseMessage(msg: any) {
 304     let op: UserOperation = msgOp(msg);
 305     if (msg.error) {
 306       alert(i18n.t(msg.error));
 307       this.state = this.emptyState;
 308       this.setState(this.state);
 309       return;
 310     } else {
 311       if (op == UserOperation.Login) {
 312         this.state = this.emptyState;
 313         this.setState(this.state);
 314         let res: LoginResponse = msg;
 315         UserService.Instance.login(res);
 316         this.props.history.push('/');
 317       } else if (op == UserOperation.Register) {
 318         this.state = this.emptyState;
 319         this.setState(this.state);
 320         let res: LoginResponse = msg;
 321         UserService.Instance.login(res);
 322         this.props.history.push('/communities');
 323       } else if (op == UserOperation.PasswordReset) {
 324         alert(i18n.t('reset_password_mail_sent'));
 325       }
 326     }
 327   }
 328 }