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 { 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);
52 async componentDidMount() {
53 this.setState({ themeList: await fetchThemeList() });
56 get documentTitle(): string {
57 return `${I18NextService.i18n.t("setup")} - Lemmy`;
62 <div className="home-setup container-lg">
63 <Helmet title={this.documentTitle} />
65 <div className="col-12 offset-lg-3 col-lg-6">
66 <h1 className="h4 mb-4">
67 {I18NextService.i18n.t("lemmy_instance_setup")}
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 <h2 className="h5 mb-3">{I18NextService.i18n.t("setup_admin")}</h2>
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 i.setState({ doneRegisteringUser: true });
215 async handleCreateSite(form: CreateSite) {
216 const createRes = await HttpService.client.createSite(form);
217 if (createRes.state === "success") {
218 this.props.history.replace("/");
223 handleRegisterUsernameChange(i: Setup, event: any) {
224 i.state.form.username = event.target.value.trim();
228 handleRegisterEmailChange(i: Setup, event: any) {
229 i.state.form.email = event.target.value;
233 handleRegisterPasswordChange(i: Setup, event: any) {
234 i.state.form.password = event.target.value;
238 handleRegisterPasswordVerifyChange(i: Setup, event: any) {
239 i.state.form.password_verify = event.target.value;