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