ui/src/components/setup.tsx

   1 import { Component, linkEvent } from 'inferno';
   2 import { Subscription } from "rxjs";
   3 import { retryWhen, delay, take } from 'rxjs/operators';
   4 import { RegisterForm, LoginResponse, UserOperation } from '../interfaces';
   5 import { WebSocketService, UserService } from '../services';
   6 import { msgOp } from '../utils';
   7 import { SiteForm } from './site-form';
   8 import { i18n } from '../i18next';
   9 import { T } from 'inferno-i18next';
  10
  11 interface State {
  12   userForm: RegisterForm;
  13   doneRegisteringUser: boolean;
  14   userLoading: boolean;
  15 }
  16
  17 export class Setup extends Component<any, State> {
  18   private subscription: Subscription;
  19
  20   private emptyState: State = {
  21     userForm: {
  22       username: undefined,
  23       password: undefined,
  24       password_verify: undefined,
  25       admin: true,
  26       show_nsfw: true,
  27     },
  28     doneRegisteringUser: false,
  29     userLoading: false,
  30   }
  31
  32
  33   constructor(props: any, context: any) {
  34     super(props, context);
  35
  36     this.state = this.emptyState;
  37
  38     this.subscription = WebSocketService.Instance.subject
  39     .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
  40     .subscribe(
  41       (msg) => this.parseMessage(msg),
  42         (err) => console.error(err),
  43         () => console.log("complete")
  44     );
  45   }
  46
  47   componentWillUnmount() {
  48     this.subscription.unsubscribe();
  49   }
  50
  51   componentDidMount() {
  52     document.title = `${i18n.t('setup')} - Lemmy`;
  53   }
  54
  55   render() {
  56     return (
  57       <div class="container">
  58         <div class="row">
  59           <div class="col-12 offset-lg-3 col-lg-6">
  60             <h3><T i18nKey="lemmy_instance_setup">#</T></h3>
  61             {!this.state.doneRegisteringUser ? this.registerUser() : <SiteForm />}
  62           </div>
  63         </div>
  64       </div>
  65     )
  66   }
  67
  68   registerUser() {
  69     return (
  70       <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
  71         <h5><T i18nKey="setup_admin">#</T></h5>
  72         <div class="form-group row">
  73           <label class="col-sm-2 col-form-label"><T i18nKey="username">#</T></label>
  74           <div class="col-sm-10">
  75             <input type="text" class="form-control" value={this.state.userForm.username} onInput={linkEvent(this, this.handleRegisterUsernameChange)} required minLength={3} maxLength={20} pattern="[a-zA-Z0-9_]+" />
  76           </div>
  77         </div>
  78         <div class="form-group row">
  79           <label class="col-sm-2 col-form-label"><T i18nKey="email">#</T></label>
  80           <div class="col-sm-10">
  81             <input type="email" class="form-control" placeholder={i18n.t('optional')} value={this.state.userForm.email} onInput={linkEvent(this, this.handleRegisterEmailChange)} minLength={3} />
  82           </div>
  83         </div>
  84         <div class="form-group row">
  85           <label class="col-sm-2 col-form-label"><T i18nKey="password">#</T></label>
  86           <div class="col-sm-10">
  87             <input type="password" value={this.state.userForm.password} onInput={linkEvent(this, this.handleRegisterPasswordChange)} class="form-control" required />
  88           </div>
  89         </div>
  90         <div class="form-group row">
  91           <label class="col-sm-2 col-form-label"><T i18nKey="verify_password">#</T></label>
  92           <div class="col-sm-10">
  93             <input type="password" value={this.state.userForm.password_verify} onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)} class="form-control" required />
  94           </div>
  95         </div>
  96         <div class="form-group row">
  97           <div class="col-sm-10">
  98             <button type="submit" class="btn btn-secondary">{this.state.userLoading ?
  99             <svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg> : i18n.t('sign_up')}</button>
 100
 101           </div>
 102         </div>
 103       </form>
 104     );
 105   }
 106
 107
 108   handleRegisterSubmit(i: Setup, event: any) {
 109     event.preventDefault();
 110     i.state.userLoading = true;
 111     i.setState(i.state);
 112     event.preventDefault();
 113     WebSocketService.Instance.register(i.state.userForm);
 114   }
 115
 116   handleRegisterUsernameChange(i: Setup, event: any) {
 117     i.state.userForm.username = event.target.value;
 118     i.setState(i.state);
 119   }
 120
 121   handleRegisterEmailChange(i: Setup, event: any) {
 122     i.state.userForm.email = event.target.value;
 123     i.setState(i.state);
 124   }
 125
 126   handleRegisterPasswordChange(i: Setup, event: any) {
 127     i.state.userForm.password = event.target.value;
 128     i.setState(i.state);
 129   }
 130
 131   handleRegisterPasswordVerifyChange(i: Setup, event: any) {
 132     i.state.userForm.password_verify = event.target.value;
 133     i.setState(i.state);
 134   }
 135
 136   parseMessage(msg: any) {
 137     let op: UserOperation = msgOp(msg);
 138     if (msg.error) {
 139       alert(i18n.t(msg.error));
 140       this.state.userLoading = false;
 141       this.setState(this.state);
 142       return;
 143     } else if (op == UserOperation.Register) {
 144       this.state.userLoading = false;
 145       this.state.doneRegisteringUser = true;
 146       let res: LoginResponse = msg;
 147       UserService.Instance.login(res);
 148       console.log(res);
 149       this.setState(this.state);
 150     } else if (op == UserOperation.CreateSite) {
 151       this.props.history.push('/');
 152     }
 153   }
 154 }