src/shared/components/home/setup.tsx

   1 import { fetchThemeList, setIsoData } from "@utils/app";
   2 import { Component, linkEvent } from "inferno";
   3 import { Helmet } from "inferno-helmet";
   4 import {
   5   CreateSite,
   6   GetSiteResponse,
   7   LoginResponse,
   8   Register,
   9 } from "lemmy-js-client";
  10 import { I18NextService, UserService } from "../../services";
  11 import { HttpService, RequestState } from "../../services/HttpService";
  12 import { Spinner } from "../common/icon";
  13 import PasswordInput from "../common/password-input";
  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 `${I18NextService.i18n.t("setup")} - Lemmy`;
  59   }
  60
  61   render() {
  62     return (
  63       <div className="home-setup container-lg">
  64         <Helmet title={this.documentTitle} />
  65         <div className="row">
  66           <div className="col-12 offset-lg-3 col-lg-6">
  67             <h1 className="h4 mb-4">
  68               {I18NextService.i18n.t("lemmy_instance_setup")}
  69             </h1>
  70             {!this.state.doneRegisteringUser ? (
  71               this.registerUser()
  72             ) : (
  73               <SiteForm
  74                 showLocal
  75                 onSaveSite={this.handleCreateSite}
  76                 siteRes={this.state.siteRes}
  77                 themeList={this.state.themeList}
  78                 loading={false}
  79               />
  80             )}
  81           </div>
  82         </div>
  83       </div>
  84     );
  85   }
  86
  87   registerUser() {
  88     return (
  89       <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
  90         <h2 className="h5 mb-3">{I18NextService.i18n.t("setup_admin")}</h2>
  91         <div className="mb-3 row">
  92           <label className="col-sm-2 col-form-label" htmlFor="username">
  93             {I18NextService.i18n.t("username")}
  94           </label>
  95           <div className="col-sm-10">
  96             <input
  97               type="text"
  98               className="form-control"
  99               id="username"
 100               value={this.state.form.username}
 101               onInput={linkEvent(this, this.handleRegisterUsernameChange)}
 102               required
 103               minLength={3}
 104               pattern="[a-zA-Z0-9_]+"
 105             />
 106           </div>
 107         </div>
 108         <div className="mb-3 row">
 109           <label className="col-sm-2 col-form-label" htmlFor="email">
 110             {I18NextService.i18n.t("email")}
 111           </label>
 112
 113           <div className="col-sm-10">
 114             <input
 115               type="email"
 116               id="email"
 117               className="form-control"
 118               placeholder={I18NextService.i18n.t("optional")}
 119               value={this.state.form.email}
 120               onInput={linkEvent(this, this.handleRegisterEmailChange)}
 121               minLength={3}
 122             />
 123           </div>
 124         </div>
 125         <div className="mb-3">
 126           <PasswordInput
 127             id="password"
 128             value={this.state.form.password}
 129             onInput={linkEvent(this, this.handleRegisterPasswordChange)}
 130             label={I18NextService.i18n.t("password")}
 131             isNew
 132           />
 133         </div>
 134         <div className="mb-3">
 135           <PasswordInput
 136             id="verify-password"
 137             value={this.state.form.password_verify}
 138             onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
 139             label={I18NextService.i18n.t("verify_password")}
 140             isNew
 141           />
 142         </div>
 143         <div className="mb-3 row">
 144           <div className="col-sm-10">
 145             <button type="submit" className="btn btn-secondary">
 146               {this.state.registerRes.state === "loading" ? (
 147                 <Spinner />
 148               ) : (
 149                 I18NextService.i18n.t("sign_up")
 150               )}
 151             </button>
 152           </div>
 153         </div>
 154       </form>
 155     );
 156   }
 157
 158   async handleRegisterSubmit(i: Setup, event: any) {
 159     event.preventDefault();
 160     i.setState({ registerRes: { state: "loading" } });
 161     const {
 162       username,
 163       password_verify,
 164       password,
 165       email,
 166       show_nsfw,
 167       captcha_uuid,
 168       captcha_answer,
 169       honeypot,
 170       answer,
 171     } = i.state.form;
 172
 173     if (username && password && password_verify) {
 174       const form: Register = {
 175         username,
 176         password,
 177         password_verify,
 178         email,
 179         show_nsfw,
 180         captcha_uuid,
 181         captcha_answer,
 182         honeypot,
 183         answer,
 184       };
 185       i.setState({
 186         registerRes: await HttpService.client.register(form),
 187       });
 188
 189       if (i.state.registerRes.state === "success") {
 190         const data = i.state.registerRes.data;
 191
 192         UserService.Instance.login({ res: data });
 193         i.setState({ doneRegisteringUser: true });
 194       }
 195     }
 196   }
 197
 198   async handleCreateSite(form: CreateSite) {
 199     const createRes = await HttpService.client.createSite(form);
 200     if (createRes.state === "success") {
 201       this.props.history.replace("/");
 202       location.reload();
 203     }
 204   }
 205
 206   handleRegisterUsernameChange(i: Setup, event: any) {
 207     i.state.form.username = event.target.value.trim();
 208     i.setState(i.state);
 209   }
 210
 211   handleRegisterEmailChange(i: Setup, event: any) {
 212     i.state.form.email = event.target.value;
 213     i.setState(i.state);
 214   }
 215
 216   handleRegisterPasswordChange(i: Setup, event: any) {
 217     i.state.form.password = event.target.value;
 218     i.setState(i.state);
 219   }
 220
 221   handleRegisterPasswordVerifyChange(i: Setup, event: any) {
 222     i.state.form.password_verify = event.target.value;
 223     i.setState(i.state);
 224   }
 225 }