1 import { fetchThemeList, setIsoData } from "@utils/app";
2 import { Component, linkEvent } from "inferno";
3 import { Helmet } from "inferno-helmet";
9 } from "lemmy-js-client";
10 import { FirstLoadService, I18NextService, UserService } from "../../services";
11 import { HttpService, RequestState } from "../../services/HttpService";
12 import { Spinner } from "../common/icon";
13 import { SiteForm } from "./site-form";
20 password_verify?: string;
22 captcha_uuid?: string;
23 captcha_answer?: string;
27 doneRegisteringUser: boolean;
28 registerRes: RequestState<LoginResponse>;
30 siteRes: GetSiteResponse;
33 export class Setup extends Component<any, State> {
34 private isoData = setIsoData(this.context);
37 registerRes: { state: "empty" },
42 doneRegisteringUser: !!UserService.Instance.myUserInfo,
43 siteRes: this.isoData.site_res,
46 constructor(props: any, context: any) {
47 super(props, context);
49 this.handleCreateSite = this.handleCreateSite.bind(this);
51 FirstLoadService.isFirstLoad;
54 async componentDidMount() {
55 this.setState({ themeList: await fetchThemeList() });
58 get documentTitle(): string {
59 return `${I18NextService.i18n.t("setup")} - Lemmy`;
64 <div className="home-setup container-lg">
65 <Helmet title={this.documentTitle} />
67 <div className="col-12 offset-lg-3 col-lg-6">
68 <h3>{I18NextService.i18n.t("lemmy_instance_setup")}</h3>
69 {!this.state.doneRegisteringUser ? (
74 onSaveSite={this.handleCreateSite}
75 siteRes={this.state.siteRes}
76 themeList={this.state.themeList}
88 <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
89 <h5>{I18NextService.i18n.t("setup_admin")}</h5>
90 <div className="mb-3 row">
91 <label className="col-sm-2 col-form-label" htmlFor="username">
92 {I18NextService.i18n.t("username")}
94 <div className="col-sm-10">
97 className="form-control"
99 value={this.state.form.username}
100 onInput={linkEvent(this, this.handleRegisterUsernameChange)}
103 pattern="[a-zA-Z0-9_]+"
107 <div className="mb-3 row">
108 <label className="col-sm-2 col-form-label" htmlFor="email">
109 {I18NextService.i18n.t("email")}
112 <div className="col-sm-10">
116 className="form-control"
117 placeholder={I18NextService.i18n.t("optional")}
118 value={this.state.form.email}
119 onInput={linkEvent(this, this.handleRegisterEmailChange)}
124 <div className="mb-3 row">
125 <label className="col-sm-2 col-form-label" htmlFor="password">
126 {I18NextService.i18n.t("password")}
128 <div className="col-sm-10">
132 value={this.state.form.password}
133 onInput={linkEvent(this, this.handleRegisterPasswordChange)}
134 className="form-control"
136 autoComplete="new-password"
142 <div className="mb-3 row">
143 <label className="col-sm-2 col-form-label" htmlFor="verify-password">
144 {I18NextService.i18n.t("verify_password")}
146 <div className="col-sm-10">
150 value={this.state.form.password_verify}
151 onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
152 className="form-control"
154 autoComplete="new-password"
160 <div className="mb-3 row">
161 <div className="col-sm-10">
162 <button type="submit" className="btn btn-secondary">
163 {this.state.registerRes.state == "loading" ? (
166 I18NextService.i18n.t("sign_up")
175 async handleRegisterSubmit(i: Setup, event: any) {
176 event.preventDefault();
177 i.setState({ registerRes: { state: "loading" } });
190 if (username && password && password_verify) {
191 const form: Register = {
203 registerRes: await HttpService.client.register(form),
206 if (i.state.registerRes.state == "success") {
207 const data = i.state.registerRes.data;
209 UserService.Instance.login(data);
210 if (UserService.Instance.jwtInfo) {
211 i.setState({ doneRegisteringUser: true });
217 async handleCreateSite(form: CreateSite) {
218 const createRes = await HttpService.client.createSite(form);
219 if (createRes.state === "success") {
220 this.props.history.replace("/");
225 handleRegisterUsernameChange(i: Setup, event: any) {
226 i.state.form.username = event.target.value.trim();
230 handleRegisterEmailChange(i: Setup, event: any) {
231 i.state.form.email = event.target.value;
235 handleRegisterPasswordChange(i: Setup, event: any) {
236 i.state.form.password = event.target.value;
240 handleRegisterPasswordVerifyChange(i: Setup, event: any) {
241 i.state.form.password_verify = event.target.value;