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