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 - Lemmy";
  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     event.preventDefault();
 160     setTimeout(function(){
 161       WebSocketService.Instance.register(i.state.registerForm);
 162     }, 10000);
 163   }
 164
 165   handleRegisterUsernameChange(i: Login, event: any) {
 166     i.state.registerForm.username = event.target.value;
 167     i.setState(i.state);
 168   }
 169
 170   handleRegisterEmailChange(i: Login, event: any) {
 171     i.state.registerForm.email = event.target.value;
 172     i.setState(i.state);
 173   }
 174
 175   handleRegisterPasswordChange(i: Login, event: any) {
 176     i.state.registerForm.password = event.target.value;
 177     i.setState(i.state);
 178   }
 179
 180   handleRegisterPasswordVerifyChange(i: Login, event: any) {
 181     i.state.registerForm.password_verify = event.target.value;
 182     i.setState(i.state);
 183   }
 184
 185   parseMessage(msg: any) {
 186     let op: UserOperation = msgOp(msg);
 187     if (msg.error) {
 188       alert(msg.error);
 189       this.state = this.emptyState;
 190       this.setState(this.state);
 191       return;
 192     } else {
 193       if (op == UserOperation.Login) {
 194         this.state.loginLoading = false;
 195         this.state.registerLoading = false;
 196         let res: LoginResponse = msg;
 197         UserService.Instance.login(res);
 198         this.props.history.push('/');
 199       } else if (op == UserOperation.Register) {
 200         this.state.loginLoading = false;
 201         this.state.registerLoading = false;
 202         let res: LoginResponse = msg;
 203         UserService.Instance.login(res);
 204         this.props.history.push('/communities');
 205       }
 206     }
 207   }
 208
 209 }