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   GetSiteResponse,
  11 } from '../interfaces';
  12 import { WebSocketService, UserService } from '../services';
  13 import { msgOp, validEmail, toast } from '../utils';
  14 import { i18n } from '../i18next';
  15 import { T } from 'inferno-i18next';
  16
  17 interface State {
  18   loginForm: LoginForm;
  19   registerForm: RegisterForm;
  20   loginLoading: boolean;
  21   registerLoading: boolean;
  22   enable_nsfw: boolean;
  23 }
  24
  25 export class Login extends Component<any, State> {
  26   private subscription: Subscription;
  27
  28   emptyState: State = {
  29     loginForm: {
  30       username_or_email: undefined,
  31       password: undefined,
  32     },
  33     registerForm: {
  34       username: undefined,
  35       password: undefined,
  36       password_verify: undefined,
  37       admin: false,
  38       show_nsfw: false,
  39     },
  40     loginLoading: false,
  41     registerLoading: false,
  42     enable_nsfw: undefined,
  43   };
  44
  45   constructor(props: any, context: any) {
  46     super(props, context);
  47
  48     this.state = this.emptyState;
  49
  50     this.subscription = WebSocketService.Instance.subject
  51       .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
  52       .subscribe(
  53         msg => this.parseMessage(msg),
  54         err => console.error(err),
  55         () => console.log('complete')
  56       );
  57
  58     WebSocketService.Instance.getSite();
  59   }
  60
  61   componentWillUnmount() {
  62     this.subscription.unsubscribe();
  63   }
  64
  65   render() {
  66     return (
  67       <div class="container">
  68         <div class="row">
  69           <div class="col-12 col-lg-6 mb-4">{this.loginForm()}</div>
  70           <div class="col-12 col-lg-6">{this.registerForm()}</div>
  71         </div>
  72       </div>
  73     );
  74   }
  75
  76   loginForm() {
  77     return (
  78       <div>
  79         <form onSubmit={linkEvent(this, this.handleLoginSubmit)}>
  80           <h5>Login</h5>
  81           <div class="form-group row">
  82             <label class="col-sm-2 col-form-label">
  83               <T i18nKey="email_or_username">#</T>
  84             </label>
  85             <div class="col-sm-10">
  86               <input
  87                 type="text"
  88                 class="form-control"
  89                 value={this.state.loginForm.username_or_email}
  90                 onInput={linkEvent(this, this.handleLoginUsernameChange)}
  91                 required
  92                 minLength={3}
  93               />
  94             </div>
  95           </div>
  96           <div class="form-group row">
  97             <label class="col-sm-2 col-form-label">
  98               <T i18nKey="password">#</T>
  99             </label>
 100             <div class="col-sm-10">
 101               <input
 102                 type="password"
 103                 value={this.state.loginForm.password}
 104                 onInput={linkEvent(this, this.handleLoginPasswordChange)}
 105                 class="form-control"
 106                 required
 107               />
 108               <button
 109                 disabled={!validEmail(this.state.loginForm.username_or_email)}
 110                 onClick={linkEvent(this, this.handlePasswordReset)}
 111                 className="btn p-0 btn-link d-inline-block float-right text-muted small font-weight-bold"
 112               >
 113                 <T i18nKey="forgot_password">#</T>
 114               </button>
 115             </div>
 116           </div>
 117           <div class="form-group row">
 118             <div class="col-sm-10">
 119               <button type="submit" class="btn btn-secondary">
 120                 {this.state.loginLoading ? (
 121                   <svg class="icon icon-spinner spin">
 122                     <use xlinkHref="#icon-spinner"></use>
 123                   </svg>
 124                 ) : (
 125                   i18n.t('login')
 126                 )}
 127               </button>
 128             </div>
 129           </div>
 130         </form>
 131       </div>
 132     );
 133   }
 134   registerForm() {
 135     return (
 136       <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
 137         <h5>
 138           <T i18nKey="sign_up">#</T>
 139         </h5>
 140         <div class="form-group row">
 141           <label class="col-sm-2 col-form-label">
 142             <T i18nKey="username">#</T>
 143           </label>
 144           <div class="col-sm-10">
 145             <input
 146               type="text"
 147               class="form-control"
 148               value={this.state.registerForm.username}
 149               onInput={linkEvent(this, this.handleRegisterUsernameChange)}
 150               required
 151               minLength={3}
 152               maxLength={20}
 153               pattern="[a-zA-Z0-9_]+"
 154             />
 155           </div>
 156         </div>
 157         <div class="form-group row">
 158           <label class="col-sm-2 col-form-label">
 159             <T i18nKey="email">#</T>
 160           </label>
 161           <div class="col-sm-10">
 162             <input
 163               type="email"
 164               class="form-control"
 165               placeholder={i18n.t('optional')}
 166               value={this.state.registerForm.email}
 167               onInput={linkEvent(this, this.handleRegisterEmailChange)}
 168               minLength={3}
 169             />
 170           </div>
 171         </div>
 172         <div class="form-group row">
 173           <label class="col-sm-2 col-form-label">
 174             <T i18nKey="password">#</T>
 175           </label>
 176           <div class="col-sm-10">
 177             <input
 178               type="password"
 179               value={this.state.registerForm.password}
 180               onInput={linkEvent(this, this.handleRegisterPasswordChange)}
 181               class="form-control"
 182               required
 183             />
 184           </div>
 185         </div>
 186         <div class="form-group row">
 187           <label class="col-sm-2 col-form-label">
 188             <T i18nKey="verify_password">#</T>
 189           </label>
 190           <div class="col-sm-10">
 191             <input
 192               type="password"
 193               value={this.state.registerForm.password_verify}
 194               onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
 195               class="form-control"
 196               required
 197             />
 198           </div>
 199         </div>
 200         {this.state.enable_nsfw && (
 201           <div class="form-group row">
 202             <div class="col-sm-10">
 203               <div class="form-check">
 204                 <input
 205                   class="form-check-input"
 206                   type="checkbox"
 207                   checked={this.state.registerForm.show_nsfw}
 208                   onChange={linkEvent(this, this.handleRegisterShowNsfwChange)}
 209                 />
 210                 <label class="form-check-label">
 211                   <T i18nKey="show_nsfw">#</T>
 212                 </label>
 213               </div>
 214             </div>
 215           </div>
 216         )}
 217         <div class="form-group row">
 218           <div class="col-sm-10">
 219             <button type="submit" class="btn btn-secondary">
 220               {this.state.registerLoading ? (
 221                 <svg class="icon icon-spinner spin">
 222                   <use xlinkHref="#icon-spinner"></use>
 223                 </svg>
 224               ) : (
 225                 i18n.t('sign_up')
 226               )}
 227             </button>
 228           </div>
 229         </div>
 230       </form>
 231     );
 232   }
 233
 234   handleLoginSubmit(i: Login, event: any) {
 235     event.preventDefault();
 236     i.state.loginLoading = true;
 237     i.setState(i.state);
 238     WebSocketService.Instance.login(i.state.loginForm);
 239   }
 240
 241   handleLoginUsernameChange(i: Login, event: any) {
 242     i.state.loginForm.username_or_email = event.target.value;
 243     i.setState(i.state);
 244   }
 245
 246   handleLoginPasswordChange(i: Login, event: any) {
 247     i.state.loginForm.password = event.target.value;
 248     i.setState(i.state);
 249   }
 250
 251   handleRegisterSubmit(i: Login, event: any) {
 252     event.preventDefault();
 253     i.state.registerLoading = true;
 254     i.setState(i.state);
 255
 256     WebSocketService.Instance.register(i.state.registerForm);
 257   }
 258
 259   handleRegisterUsernameChange(i: Login, event: any) {
 260     i.state.registerForm.username = event.target.value;
 261     i.setState(i.state);
 262   }
 263
 264   handleRegisterEmailChange(i: Login, event: any) {
 265     i.state.registerForm.email = event.target.value;
 266     if (i.state.registerForm.email == '') {
 267       i.state.registerForm.email = undefined;
 268     }
 269     i.setState(i.state);
 270   }
 271
 272   handleRegisterPasswordChange(i: Login, event: any) {
 273     i.state.registerForm.password = event.target.value;
 274     i.setState(i.state);
 275   }
 276
 277   handleRegisterPasswordVerifyChange(i: Login, event: any) {
 278     i.state.registerForm.password_verify = event.target.value;
 279     i.setState(i.state);
 280   }
 281
 282   handleRegisterShowNsfwChange(i: Login, event: any) {
 283     i.state.registerForm.show_nsfw = event.target.checked;
 284     i.setState(i.state);
 285   }
 286
 287   handlePasswordReset(i: Login) {
 288     event.preventDefault();
 289     let resetForm: PasswordResetForm = {
 290       email: i.state.loginForm.username_or_email,
 291     };
 292     WebSocketService.Instance.passwordReset(resetForm);
 293   }
 294
 295   parseMessage(msg: any) {
 296     let op: UserOperation = msgOp(msg);
 297     if (msg.error) {
 298       toast(i18n.t(msg.error), 'danger');
 299       this.state = this.emptyState;
 300       this.setState(this.state);
 301       return;
 302     } else {
 303       if (op == UserOperation.Login) {
 304         this.state = this.emptyState;
 305         this.setState(this.state);
 306         let res: LoginResponse = msg;
 307         UserService.Instance.login(res);
 308         toast(i18n.t('logged_in'));
 309         this.props.history.push('/');
 310       } else if (op == UserOperation.Register) {
 311         this.state = this.emptyState;
 312         this.setState(this.state);
 313         let res: LoginResponse = msg;
 314         UserService.Instance.login(res);
 315         this.props.history.push('/communities');
 316       } else if (op == UserOperation.PasswordReset) {
 317         toast(i18n.t('reset_password_mail_sent'));
 318       } else if (op == UserOperation.GetSite) {
 319         let res: GetSiteResponse = msg;
 320         this.state.enable_nsfw = res.site.enable_nsfw;
 321         this.setState(this.state);
 322         document.title = `${i18n.t('login')} - ${
 323           WebSocketService.Instance.site.name
 324         }`;
 325       }
 326     }
 327   }
 328 }