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