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 {
   5   RegisterForm,
   6   LoginResponse,
   7   UserOperation,
   8   WebSocketJsonResponse,
   9 } from '../interfaces';
  10 import { WebSocketService, UserService } from '../services';
  11 import { wsJsonToRes, toast } from '../utils';
  12 import { SiteForm } from './site-form';
  13 import { i18n } from '../i18next';
  14 import { T } from 'inferno-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   componentDidMount() {
  56     document.title = `${i18n.t('setup')} - Lemmy`;
  57   }
  58
  59   render() {
  60     return (
  61       <div class="container">
  62         <div class="row">
  63           <div class="col-12 offset-lg-3 col-lg-6">
  64             <h3>
  65                 { i18n.t('lemmy_instance_setup') }
  66             </h3>
  67             {!this.state.doneRegisteringUser ? (
  68               this.registerUser()
  69             ) : (
  70               <SiteForm />
  71             )}
  72           </div>
  73         </div>
  74       </div>
  75     );
  76   }
  77
  78   registerUser() {
  79     return (
  80       <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
  81         <h4>{ i18n.t('setup_admin')}</h4>
  82         <div class="form-group row">
  83           <label class="col-sm-2 col-form-label" for="username">
  84             { i18n.t('username') }
  85           </label>
  86           <div class="col-sm-10">
  87             <input
  88               type="text"
  89               class="form-control"
  90               id="username"
  91               value={this.state.userForm.username}
  92               onInput={linkEvent(this, this.handleRegisterUsernameChange)}
  93               required
  94               minLength={3}
  95               maxLength={20}
  96               pattern="[a-zA-Z0-9_]+"
  97             />
  98           </div>
  99         </div>
 100         <div class="form-group row">
 101           <label class="col-sm-2 col-form-label" for="email">
 102             { i18n.t('email') }
 103           </label>
 104
 105           <div class="col-sm-10">
 106             <input
 107               type="email"
 108               id="email"
 109               class="form-control"
 110               placeholder={i18n.t('optional')}
 111               value={this.state.userForm.email}
 112               onInput={linkEvent(this, this.handleRegisterEmailChange)}
 113               minLength={3}
 114             />
 115           </div>
 116         </div>
 117         <div class="form-group row">
 118           <label class="col-sm-2 col-form-label" for="password">
 119             { i18n.t('password')}
 120           </label>
 121           <div class="col-sm-10">
 122             <input
 123               type="password"
 124               id="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" for="verify-password">
 134             { i18n.t('verify_password') }
 135           </label>
 136           <div class="col-sm-10">
 137             <input
 138               type="password"
 139               id="verify-password"
 140               value={this.state.userForm.password_verify}
 141               onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
 142               class="form-control"
 143               required
 144             />
 145           </div>
 146         </div>
 147         <div class="form-group row">
 148           <div class="col-sm-10">
 149             <button type="submit" class="btn btn-secondary">
 150               {this.state.userLoading ? (
 151                 <svg class="icon icon-spinner spin">
 152                   <use xlinkHref="#icon-spinner"></use>
 153                 </svg>
 154               ) : (
 155                 i18n.t('sign_up')
 156               )}
 157             </button>
 158           </div>
 159         </div>
 160       </form>
 161     );
 162   }
 163
 164   handleRegisterSubmit(i: Setup, event: any) {
 165     event.preventDefault();
 166     i.state.userLoading = true;
 167     i.setState(i.state);
 168     event.preventDefault();
 169     WebSocketService.Instance.register(i.state.userForm);
 170   }
 171
 172   handleRegisterUsernameChange(i: Setup, event: any) {
 173     i.state.userForm.username = event.target.value;
 174     i.setState(i.state);
 175   }
 176
 177   handleRegisterEmailChange(i: Setup, event: any) {
 178     i.state.userForm.email = event.target.value;
 179     i.setState(i.state);
 180   }
 181
 182   handleRegisterPasswordChange(i: Setup, event: any) {
 183     i.state.userForm.password = event.target.value;
 184     i.setState(i.state);
 185   }
 186
 187   handleRegisterPasswordVerifyChange(i: Setup, event: any) {
 188     i.state.userForm.password_verify = event.target.value;
 189     i.setState(i.state);
 190   }
 191
 192   parseMessage(msg: WebSocketJsonResponse) {
 193     let res = wsJsonToRes(msg);
 194     if (msg.error) {
 195       toast(i18n.t(msg.error), 'danger');
 196       this.state.userLoading = false;
 197       this.setState(this.state);
 198       return;
 199     } else if (res.op == UserOperation.Register) {
 200       let data = res.data as LoginResponse;
 201       this.state.userLoading = false;
 202       this.state.doneRegisteringUser = true;
 203       UserService.Instance.login(data);
 204       this.setState(this.state);
 205     } else if (res.op == UserOperation.CreateSite) {
 206       this.props.history.push('/');
 207     }
 208   }
 209 }