ui/src/components/setup.tsx

   1 import { Component, linkEvent } from 'inferno';
   2 import { Helmet } from 'inferno-helmet';
   3 import { Subscription } from 'rxjs';
   4 import { retryWhen, delay, take } from 'rxjs/operators';
   5 import {
   6   RegisterForm,
   7   LoginResponse,
   8   UserOperation,
   9   WebSocketJsonResponse,
  10 } from '../interfaces';
  11 import { WebSocketService, UserService } from '../services';
  12 import { wsJsonToRes, toast } from '../utils';
  13 import { SiteForm } from './site-form';
  14 import { i18n } from '../i18next';
  15
  16 interface State {
  17   userForm: RegisterForm;
  18   doneRegisteringUser: boolean;
  19   userLoading: boolean;
  20 }
  21
  22 export class Setup extends Component<any, State> {
  23   private subscription: Subscription;
  24
  25   private emptyState: State = {
  26     userForm: {
  27       username: undefined,
  28       password: undefined,
  29       password_verify: undefined,
  30       admin: true,
  31       show_nsfw: true,
  32     },
  33     doneRegisteringUser: false,
  34     userLoading: false,
  35   };
  36
  37   constructor(props: any, context: any) {
  38     super(props, context);
  39
  40     this.state = this.emptyState;
  41
  42     this.subscription = WebSocketService.Instance.subject
  43       .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
  44       .subscribe(
  45         msg => this.parseMessage(msg),
  46         err => console.error(err),
  47         () => console.log('complete')
  48       );
  49   }
  50
  51   componentWillUnmount() {
  52     this.subscription.unsubscribe();
  53   }
  54
  55   get documentTitle(): string {
  56     return `${i18n.t('setup')} - Lemmy`;
  57   }
  58
  59   render() {
  60     return (
  61       <div class="container">
  62         <Helmet title={this.documentTitle} />
  63         <div class="row">
  64           <div class="col-12 offset-lg-3 col-lg-6">
  65             <h3>{i18n.t('lemmy_instance_setup')}</h3>
  66             {!this.state.doneRegisteringUser ? (
  67               this.registerUser()
  68             ) : (
  69               <SiteForm />
  70             )}
  71           </div>
  72         </div>
  73       </div>
  74     );
  75   }
  76
  77   registerUser() {
  78     return (
  79       <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
  80         <h5>{i18n.t('setup_admin')}</h5>
  81         <div class="form-group row">
  82           <label class="col-sm-2 col-form-label" htmlFor="username">
  83             {i18n.t('username')}
  84           </label>
  85           <div class="col-sm-10">
  86             <input
  87               type="text"
  88               class="form-control"
  89               id="username"
  90               value={this.state.userForm.username}
  91               onInput={linkEvent(this, this.handleRegisterUsernameChange)}
  92               required
  93               minLength={3}
  94               maxLength={20}
  95               pattern="[a-zA-Z0-9_]+"
  96             />
  97           </div>
  98         </div>
  99         <div class="form-group row">
 100           <label class="col-sm-2 col-form-label" htmlFor="email">
 101             {i18n.t('email')}
 102           </label>
 103
 104           <div class="col-sm-10">
 105             <input
 106               type="email"
 107               id="email"
 108               class="form-control"
 109               placeholder={i18n.t('optional')}
 110               value={this.state.userForm.email}
 111               onInput={linkEvent(this, this.handleRegisterEmailChange)}
 112               minLength={3}
 113             />
 114           </div>
 115         </div>
 116         <div class="form-group row">
 117           <label class="col-sm-2 col-form-label" htmlFor="password">
 118             {i18n.t('password')}
 119           </label>
 120           <div class="col-sm-10">
 121             <input
 122               type="password"
 123               id="password"
 124               value={this.state.userForm.password}
 125               onInput={linkEvent(this, this.handleRegisterPasswordChange)}
 126               class="form-control"
 127               required
 128             />
 129           </div>
 130         </div>
 131         <div class="form-group row">
 132           <label class="col-sm-2 col-form-label" htmlFor="verify-password">
 133             {i18n.t('verify_password')}
 134           </label>
 135           <div class="col-sm-10">
 136             <input
 137               type="password"
 138               id="verify-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: WebSocketJsonResponse) {
 192     let res = wsJsonToRes(msg);
 193     if (msg.error) {
 194       toast(i18n.t(msg.error), 'danger');
 195       this.state.userLoading = false;
 196       this.setState(this.state);
 197       return;
 198     } else if (res.op == UserOperation.Register) {
 199       let data = res.data as LoginResponse;
 200       this.state.userLoading = false;
 201       this.state.doneRegisteringUser = true;
 202       UserService.Instance.login(data);
 203       this.setState(this.state);
 204     } else if (res.op == UserOperation.CreateSite) {
 205       this.props.history.push('/');
 206     }
 207   }
 208 }