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   constructor(props: any, context: any) {
  33     super(props, context);
  34
  35     this.state = this.emptyState;
  36
  37     this.subscription = WebSocketService.Instance.subject
  38       .pipe(
  39         retryWhen(errors =>
  40           errors.pipe(
  41             delay(3000),
  42             take(10)
  43           )
  44         )
  45       )
  46       .subscribe(
  47         msg => this.parseMessage(msg),
  48         err => console.error(err),
  49         () => console.log('complete')
  50       );
  51   }
  52
  53   componentWillUnmount() {
  54     this.subscription.unsubscribe();
  55   }
  56
  57   componentDidMount() {
  58     document.title = `${i18n.t('setup')} - Lemmy`;
  59   }
  60
  61   render() {
  62     return (
  63       <div class="container">
  64         <div class="row">
  65           <div class="col-12 offset-lg-3 col-lg-6">
  66             <h3>
  67               <T i18nKey="lemmy_instance_setup">#</T>
  68             </h3>
  69             {!this.state.doneRegisteringUser ? (
  70               this.registerUser()
  71             ) : (
  72               <SiteForm />
  73             )}
  74           </div>
  75         </div>
  76       </div>
  77     );
  78   }
  79
  80   registerUser() {
  81     return (
  82       <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
  83         <h5>
  84           <T i18nKey="setup_admin">#</T>
  85         </h5>
  86         <div class="form-group row">
  87           <label class="col-sm-2 col-form-label">
  88             <T i18nKey="username">#</T>
  89           </label>
  90           <div class="col-sm-10">
  91             <input
  92               type="text"
  93               class="form-control"
  94               value={this.state.userForm.username}
  95               onInput={linkEvent(this, this.handleRegisterUsernameChange)}
  96               required
  97               minLength={3}
  98               maxLength={20}
  99               pattern="[a-zA-Z0-9_]+"
 100             />
 101           </div>
 102         </div>
 103         <div class="form-group row">
 104           <label class="col-sm-2 col-form-label">
 105             <T i18nKey="email">#</T>
 106           </label>
 107           <div class="col-sm-10">
 108             <input
 109               type="email"
 110               class="form-control"
 111               placeholder={i18n.t('optional')}
 112               value={this.state.userForm.email}
 113               onInput={linkEvent(this, this.handleRegisterEmailChange)}
 114               minLength={3}
 115             />
 116           </div>
 117         </div>
 118         <div class="form-group row">
 119           <label class="col-sm-2 col-form-label">
 120             <T i18nKey="password">#</T>
 121           </label>
 122           <div class="col-sm-10">
 123             <input
 124               type="password"
 125               value={this.state.userForm.password}
 126               onInput={linkEvent(this, this.handleRegisterPasswordChange)}
 127               class="form-control"
 128               required
 129             />
 130           </div>
 131         </div>
 132         <div class="form-group row">
 133           <label class="col-sm-2 col-form-label">
 134             <T i18nKey="verify_password">#</T>
 135           </label>
 136           <div class="col-sm-10">
 137             <input
 138               type="password"
 139               value={this.state.userForm.password_verify}
 140               onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
 141               class="form-control"
 142               required
 143             />
 144           </div>
 145         </div>
 146         <div class="form-group row">
 147           <div class="col-sm-10">
 148             <button type="submit" class="btn btn-secondary">
 149               {this.state.userLoading ? (
 150                 <svg class="icon icon-spinner spin">
 151                   <use xlinkHref="#icon-spinner"></use>
 152                 </svg>
 153               ) : (
 154                 i18n.t('sign_up')
 155               )}
 156             </button>
 157           </div>
 158         </div>
 159       </form>
 160     );
 161   }
 162
 163   handleRegisterSubmit(i: Setup, event: any) {
 164     event.preventDefault();
 165     i.state.userLoading = true;
 166     i.setState(i.state);
 167     event.preventDefault();
 168     WebSocketService.Instance.register(i.state.userForm);
 169   }
 170
 171   handleRegisterUsernameChange(i: Setup, event: any) {
 172     i.state.userForm.username = event.target.value;
 173     i.setState(i.state);
 174   }
 175
 176   handleRegisterEmailChange(i: Setup, event: any) {
 177     i.state.userForm.email = event.target.value;
 178     i.setState(i.state);
 179   }
 180
 181   handleRegisterPasswordChange(i: Setup, event: any) {
 182     i.state.userForm.password = event.target.value;
 183     i.setState(i.state);
 184   }
 185
 186   handleRegisterPasswordVerifyChange(i: Setup, event: any) {
 187     i.state.userForm.password_verify = event.target.value;
 188     i.setState(i.state);
 189   }
 190
 191   parseMessage(msg: any) {
 192     let op: UserOperation = msgOp(msg);
 193     if (msg.error) {
 194       alert(i18n.t(msg.error));
 195       this.state.userLoading = false;
 196       this.setState(this.state);
 197       return;
 198     } else if (op == UserOperation.Register) {
 199       this.state.userLoading = false;
 200       this.state.doneRegisteringUser = true;
 201       let res: LoginResponse = msg;
 202       UserService.Instance.login(res);
 203       console.log(res);
 204       this.setState(this.state);
 205     } else if (op == UserOperation.CreateSite) {
 206       this.props.history.push('/');
 207     }
 208   }
 209 }