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