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           />
 132         </div>
 133         <div className="mb-3">
 134           <PasswordInput
 135             id="verify-password"
 136             value={this.state.form.password_verify}
 137             onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
 138             label={I18NextService.i18n.t("verify_password")}
 139           />
 140         </div>
 141         <div className="mb-3 row">
 142           <div className="col-sm-10">
 143             <button type="submit" className="btn btn-secondary">
 144               {this.state.registerRes.state == "loading" ? (
 145                 <Spinner />
 146               ) : (
 147                 I18NextService.i18n.t("sign_up")
 148               )}
 149             </button>
 150           </div>
 151         </div>
 152       </form>
 153     );
 154   }
 155
 156   async handleRegisterSubmit(i: Setup, event: any) {
 157     event.preventDefault();
 158     i.setState({ registerRes: { state: "loading" } });
 159     const {
 160       username,
 161       password_verify,
 162       password,
 163       email,
 164       show_nsfw,
 165       captcha_uuid,
 166       captcha_answer,
 167       honeypot,
 168       answer,
 169     } = i.state.form;
 170
 171     if (username && password && password_verify) {
 172       const form: Register = {
 173         username,
 174         password,
 175         password_verify,
 176         email,
 177         show_nsfw,
 178         captcha_uuid,
 179         captcha_answer,
 180         honeypot,
 181         answer,
 182       };
 183       i.setState({
 184         registerRes: await HttpService.client.register(form),
 185       });
 186
 187       if (i.state.registerRes.state == "success") {
 188         const data = i.state.registerRes.data;
 189
 190         UserService.Instance.login({ res: data });
 191         i.setState({ doneRegisteringUser: true });
 192       }
 193     }
 194   }
 195
 196   async handleCreateSite(form: CreateSite) {
 197     const createRes = await HttpService.client.createSite(form);
 198     if (createRes.state === "success") {
 199       this.props.history.replace("/");
 200       location.reload();
 201     }
 202   }
 203
 204   handleRegisterUsernameChange(i: Setup, event: any) {
 205     i.state.form.username = event.target.value.trim();
 206     i.setState(i.state);
 207   }
 208
 209   handleRegisterEmailChange(i: Setup, event: any) {
 210     i.state.form.email = event.target.value;
 211     i.setState(i.state);
 212   }
 213
 214   handleRegisterPasswordChange(i: Setup, event: any) {
 215     i.state.form.password = event.target.value;
 216     i.setState(i.state);
 217   }
 218
 219   handleRegisterPasswordVerifyChange(i: Setup, event: any) {
 220     i.state.form.password_verify = event.target.value;
 221     i.setState(i.state);
 222   }
 223 }