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