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 { LoginForm, RegisterForm, LoginResponse, UserOperation } from '../interfaces';
   5 import { WebSocketService, UserService } from '../services';
   6 import { msgOp } from '../utils';
   7
   8 interface State {
   9   loginForm: LoginForm;
  10   registerForm: RegisterForm;
  11   loginLoading: boolean;
  12   registerLoading: boolean;
  13 }
  14
  15 let emptyState: State = {
  16   loginForm: {
  17     username_or_email: undefined,
  18     password: undefined
  19   },
  20   registerForm: {
  21     username: undefined,
  22     password: undefined,
  23     password_verify: undefined
  24   },
  25   loginLoading: false,
  26   registerLoading: false
  27 }
  28
  29 export class Login extends Component<any, State> {
  30   private subscription: Subscription;
  31
  32   constructor(props: any, context: any) {
  33     super(props, context);
  34
  35     this.state = 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   }
  45
  46   componentWillUnmount() {
  47     this.subscription.unsubscribe();
  48   }
  49
  50   render() {
  51     return (
  52       <div class="container">
  53         <div class="row">
  54           <div class="col-12 col-lg-6 mb-4">
  55             {this.loginForm()}
  56           </div>
  57           <div class="col-12 col-lg-6">
  58             {this.registerForm()}
  59           </div>
  60         </div>
  61       </div>
  62     )
  63   }
  64
  65   loginForm() {
  66     return (
  67       <div>
  68         <form onSubmit={linkEvent(this, this.handleLoginSubmit)}>
  69           <h4>Login</h4>
  70           <div class="form-group row">
  71             <label class="col-sm-2 col-form-label">Email or Username</label>
  72             <div class="col-sm-10">
  73               <input type="text" class="form-control" value={this.state.loginForm.username_or_email} onInput={linkEvent(this, this.handleLoginUsernameChange)} required minLength={3} />
  74             </div>
  75           </div>
  76           <div class="form-group row">
  77             <label class="col-sm-2 col-form-label">Password</label>
  78             <div class="col-sm-10">
  79               <input type="password" value={this.state.loginForm.password} onInput={linkEvent(this, this.handleLoginPasswordChange)} class="form-control" required />
  80             </div>
  81           </div>
  82           <div class="form-group row">
  83             <div class="col-sm-10">
  84               <button type="submit" class="btn btn-secondary">{this.state.loginLoading ?
  85               <svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg> : 'Login'}</button>
  86             </div>
  87           </div>
  88         </form>
  89         Forgot your password or deleted your account? Reset your password. TODO
  90       </div>
  91     );
  92   }
  93   registerForm() {
  94     return (
  95       <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
  96         <h4>Sign Up</h4>
  97         <div class="form-group row">
  98           <label class="col-sm-2 col-form-label">Username</label>
  99           <div class="col-sm-10">
 100             <input type="text" class="form-control" value={this.state.registerForm.username} onInput={linkEvent(this, this.handleRegisterUsernameChange)} required minLength={3} pattern="[a-zA-Z0-9_]+" />
 101           </div>
 102         </div>
 103         <div class="form-group row">
 104           <label class="col-sm-2 col-form-label">Email</label>
 105           <div class="col-sm-10">
 106             <input type="email" class="form-control" placeholder="Optional" value={this.state.registerForm.email} onInput={linkEvent(this, this.handleRegisterEmailChange)} minLength={3} />
 107           </div>
 108         </div>
 109         <div class="form-group row">
 110           <label class="col-sm-2 col-form-label">Password</label>
 111           <div class="col-sm-10">
 112             <input type="password" value={this.state.registerForm.password} onInput={linkEvent(this, this.handleRegisterPasswordChange)} class="form-control" required />
 113           </div>
 114         </div>
 115         <div class="form-group row">
 116           <label class="col-sm-2 col-form-label">Verify Password</label>
 117           <div class="col-sm-10">
 118             <input type="password" value={this.state.registerForm.password_verify} onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)} class="form-control" required />
 119           </div>
 120         </div>
 121         <div class="form-group row">
 122           <div class="col-sm-10">
 123             <button type="submit" class="btn btn-secondary">{this.state.registerLoading ?
 124             <svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg> : 'Sign Up'}</button>
 125
 126           </div>
 127         </div>
 128       </form>
 129     );
 130   }
 131
 132   handleLoginSubmit(i: Login, event: any) {
 133     event.preventDefault();
 134     i.state.loginLoading = true;
 135     i.setState(i.state);
 136     WebSocketService.Instance.login(i.state.loginForm);
 137   }
 138
 139   handleLoginUsernameChange(i: Login, event: any) {
 140     i.state.loginForm.username_or_email = event.target.value;
 141     i.setState(i.state);
 142   }
 143
 144   handleLoginPasswordChange(i: Login, event: any) {
 145     i.state.loginForm.password = event.target.value;
 146     i.setState(i.state);
 147   }
 148
 149   handleRegisterSubmit(i: Login, event: any) {
 150     i.state.registerLoading = true;
 151     i.setState(i.state);
 152     event.preventDefault();
 153     WebSocketService.Instance.register(i.state.registerForm);
 154   }
 155
 156   handleRegisterUsernameChange(i: Login, event: any) {
 157     i.state.registerForm.username = event.target.value;
 158     i.setState(i.state);
 159   }
 160
 161   handleRegisterEmailChange(i: Login, event: any) {
 162     i.state.registerForm.email = event.target.value;
 163     i.setState(i.state);
 164   }
 165
 166   handleRegisterPasswordChange(i: Login, event: any) {
 167     i.state.registerForm.password = event.target.value;
 168     i.setState(i.state);
 169   }
 170
 171   handleRegisterPasswordVerifyChange(i: Login, event: any) {
 172     i.state.registerForm.password_verify = event.target.value;
 173     i.setState(i.state);
 174   }
 175
 176   parseMessage(msg: any) {
 177     let op: UserOperation = msgOp(msg);
 178     if (msg.error) {
 179       alert(msg.error);
 180       this.state.loginLoading = false;
 181       this.state.registerLoading = false;
 182       this.setState(this.state);
 183       return;
 184     } else {
 185       if (op == UserOperation.Register || op == UserOperation.Login) {
 186         this.state.loginLoading = false;
 187         this.state.registerLoading = false;
 188         let res: LoginResponse = msg;
 189         UserService.Instance.login(res);
 190         this.props.history.push('/');
 191       }
 192     }
 193   }
 194 }