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