src/shared/components/home/setup.tsx

   1 import { Component, linkEvent } from "inferno";
   2 import { Helmet } from "inferno-helmet";
   3 import {
   4   CreateSite,
   5   GetSiteResponse,
   6   LoginResponse,
   7   Register,
   8 } from "lemmy-js-client";
   9 import { i18n } from "../../i18next";
  10 import { UserService } from "../../services";
  11 import { HttpService, RequestState } from "../../services/HttpService";
  12 import { fetchThemeList, setIsoData } from "../../utils";
  13 import { Spinner } from "../common/icon";
  14 import { SiteForm } from "./site-form";
  15
  16 interface State {
  17   form: {
  18     username?: string;
  19     email?: string;
  20     password?: string;
  21     password_verify?: string;
  22     show_nsfw: boolean;
  23     captcha_uuid?: string;
  24     captcha_answer?: string;
  25     honeypot?: string;
  26     answer?: string;
  27   };
  28   doneRegisteringUser: boolean;
  29   registerRes: RequestState<LoginResponse>;
  30   themeList: string[];
  31   siteRes: GetSiteResponse;
  32 }
  33
  34 export class Setup extends Component<any, State> {
  35   private isoData = setIsoData(this.context);
  36
  37   state: State = {
  38     registerRes: { state: "empty" },
  39     themeList: [],
  40     form: {
  41       show_nsfw: true,
  42     },
  43     doneRegisteringUser: !!UserService.Instance.myUserInfo,
  44     siteRes: this.isoData.site_res,
  45   };
  46
  47   constructor(props: any, context: any) {
  48     super(props, context);
  49
  50     this.handleCreateSite = this.handleCreateSite.bind(this);
  51   }
  52
  53   async componentDidMount() {
  54     this.setState({ themeList: await fetchThemeList() });
  55   }
  56
  57   get documentTitle(): string {
  58     return `${i18n.t("setup")} - Lemmy`;
  59   }
  60
  61   render() {
  62     return (
  63       <div className="container-lg">
  64         <Helmet title={this.documentTitle} />
  65         <div className="row">
  66           <div className="col-12 offset-lg-3 col-lg-6">
  67             <h3>{i18n.t("lemmy_instance_setup")}</h3>
  68             {!this.state.doneRegisteringUser ? (
  69               this.registerUser()
  70             ) : (
  71               <SiteForm
  72                 showLocal
  73                 onSaveSite={this.handleCreateSite}
  74                 siteRes={this.state.siteRes}
  75                 themeList={this.state.themeList}
  76               />
  77             )}
  78           </div>
  79         </div>
  80       </div>
  81     );
  82   }
  83
  84   registerUser() {
  85     return (
  86       <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
  87         <h5>{i18n.t("setup_admin")}</h5>
  88         <div className="form-group row">
  89           <label className="col-sm-2 col-form-label" htmlFor="username">
  90             {i18n.t("username")}
  91           </label>
  92           <div className="col-sm-10">
  93             <input
  94               type="text"
  95               className="form-control"
  96               id="username"
  97               value={this.state.form.username}
  98               onInput={linkEvent(this, this.handleRegisterUsernameChange)}
  99               required
 100               minLength={3}
 101               pattern="[a-zA-Z0-9_]+"
 102             />
 103           </div>
 104         </div>
 105         <div className="form-group row">
 106           <label className="col-sm-2 col-form-label" htmlFor="email">
 107             {i18n.t("email")}
 108           </label>
 109
 110           <div className="col-sm-10">
 111             <input
 112               type="email"
 113               id="email"
 114               className="form-control"
 115               placeholder={i18n.t("optional")}
 116               value={this.state.form.email}
 117               onInput={linkEvent(this, this.handleRegisterEmailChange)}
 118               minLength={3}
 119             />
 120           </div>
 121         </div>
 122         <div className="form-group row">
 123           <label className="col-sm-2 col-form-label" htmlFor="password">
 124             {i18n.t("password")}
 125           </label>
 126           <div className="col-sm-10">
 127             <input
 128               type="password"
 129               id="password"
 130               value={this.state.form.password}
 131               onInput={linkEvent(this, this.handleRegisterPasswordChange)}
 132               className="form-control"
 133               required
 134               autoComplete="new-password"
 135               minLength={10}
 136               maxLength={60}
 137             />
 138           </div>
 139         </div>
 140         <div className="form-group row">
 141           <label className="col-sm-2 col-form-label" htmlFor="verify-password">
 142             {i18n.t("verify_password")}
 143           </label>
 144           <div className="col-sm-10">
 145             <input
 146               type="password"
 147               id="verify-password"
 148               value={this.state.form.password_verify}
 149               onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
 150               className="form-control"
 151               required
 152               autoComplete="new-password"
 153               minLength={10}
 154               maxLength={60}
 155             />
 156           </div>
 157         </div>
 158         <div className="form-group row">
 159           <div className="col-sm-10">
 160             <button type="submit" className="btn btn-secondary">
 161               {this.state.registerRes.state == "loading" ? (
 162                 <Spinner />
 163               ) : (
 164                 i18n.t("sign_up")
 165               )}
 166             </button>
 167           </div>
 168         </div>
 169       </form>
 170     );
 171   }
 172
 173   async handleRegisterSubmit(i: Setup, event: any) {
 174     event.preventDefault();
 175     i.setState({ registerRes: { state: "loading" } });
 176     const {
 177       username,
 178       password_verify,
 179       password,
 180       email,
 181       show_nsfw,
 182       captcha_uuid,
 183       captcha_answer,
 184       honeypot,
 185       answer,
 186     } = i.state.form;
 187
 188     if (username && password && password_verify) {
 189       const form: Register = {
 190         username,
 191         password,
 192         password_verify,
 193         email,
 194         show_nsfw,
 195         captcha_uuid,
 196         captcha_answer,
 197         honeypot,
 198         answer,
 199       };
 200       i.setState({
 201         registerRes: await HttpService.client.register(form),
 202       });
 203
 204       if (i.state.registerRes.state == "success") {
 205         const data = i.state.registerRes.data;
 206
 207         UserService.Instance.login(data);
 208         if (UserService.Instance.jwtInfo) {
 209           i.setState({ doneRegisteringUser: true });
 210         }
 211       }
 212     }
 213   }
 214
 215   async handleCreateSite(form: CreateSite) {
 216     const createRes = await HttpService.client.createSite(form);
 217     if (createRes.state === "success") {
 218       this.props.history.replace("/");
 219       location.reload();
 220     }
 221   }
 222
 223   handleRegisterUsernameChange(i: Setup, event: any) {
 224     i.state.form.username = event.target.value;
 225     i.setState(i.state);
 226   }
 227
 228   handleRegisterEmailChange(i: Setup, event: any) {
 229     i.state.form.email = event.target.value;
 230     i.setState(i.state);
 231   }
 232
 233   handleRegisterPasswordChange(i: Setup, event: any) {
 234     i.state.form.password = event.target.value;
 235     i.setState(i.state);
 236   }
 237
 238   handleRegisterPasswordVerifyChange(i: Setup, event: any) {
 239     i.state.form.password_verify = event.target.value;
 240     i.setState(i.state);
 241   }
 242 }