src/shared/components/home/setup.tsx

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