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