1 import { Component, linkEvent } from "inferno";
2 import { Helmet } from "inferno-helmet";
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";
21 password_verify?: string;
23 captcha_uuid?: string;
24 captcha_answer?: string;
28 doneRegisteringUser: boolean;
29 registerRes: RequestState<LoginResponse>;
31 siteRes: GetSiteResponse;
34 export class Setup extends Component<any, State> {
35 private isoData = setIsoData(this.context);
38 registerRes: { state: "empty" },
43 doneRegisteringUser: !!UserService.Instance.myUserInfo,
44 siteRes: this.isoData.site_res,
47 constructor(props: any, context: any) {
48 super(props, context);
50 this.handleCreateSite = this.handleCreateSite.bind(this);
53 async componentDidMount() {
54 this.setState({ themeList: await fetchThemeList() });
57 get documentTitle(): string {
58 return `${i18n.t("setup")} - Lemmy`;
63 <div className="container-lg">
64 <Helmet title={this.documentTitle} />
66 <div className="col-12 offset-lg-3 col-lg-6">
67 <h3>{i18n.t("lemmy_instance_setup")}</h3>
68 {!this.state.doneRegisteringUser ? (
73 onSaveSite={this.handleCreateSite}
74 siteRes={this.state.siteRes}
75 themeList={this.state.themeList}
87 <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
88 <h5>{i18n.t("setup_admin")}</h5>
89 <div className="form-group row">
90 <label className="col-sm-2 col-form-label" htmlFor="username">
93 <div className="col-sm-10">
96 className="form-control"
98 value={this.state.form.username}
99 onInput={linkEvent(this, this.handleRegisterUsernameChange)}
102 pattern="[a-zA-Z0-9_]+"
106 <div className="form-group row">
107 <label className="col-sm-2 col-form-label" htmlFor="email">
111 <div className="col-sm-10">
115 className="form-control"
116 placeholder={i18n.t("optional")}
117 value={this.state.form.email}
118 onInput={linkEvent(this, this.handleRegisterEmailChange)}
123 <div className="form-group row">
124 <label className="col-sm-2 col-form-label" htmlFor="password">
127 <div className="col-sm-10">
131 value={this.state.form.password}
132 onInput={linkEvent(this, this.handleRegisterPasswordChange)}
133 className="form-control"
135 autoComplete="new-password"
141 <div className="form-group row">
142 <label className="col-sm-2 col-form-label" htmlFor="verify-password">
143 {i18n.t("verify_password")}
145 <div className="col-sm-10">
149 value={this.state.form.password_verify}
150 onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
151 className="form-control"
153 autoComplete="new-password"
159 <div className="form-group row">
160 <div className="col-sm-10">
161 <button type="submit" className="btn btn-secondary">
162 {this.state.registerRes.state == "loading" ? (
174 async handleRegisterSubmit(i: Setup, event: any) {
175 event.preventDefault();
176 i.setState({ registerRes: { state: "loading" } });
189 if (username && password && password_verify) {
190 const form: Register = {
202 registerRes: await HttpService.client.register(form),
205 if (i.state.registerRes.state == "success") {
206 const data = i.state.registerRes.data;
208 UserService.Instance.login(data);
209 if (UserService.Instance.jwtInfo) {
210 i.setState({ doneRegisteringUser: true });
216 async handleCreateSite(form: CreateSite) {
217 const createRes = await HttpService.client.createSite(form);
218 if (createRes.state === "success") {
219 this.props.history.replace("/");
224 handleRegisterUsernameChange(i: Setup, event: any) {
225 i.state.form.username = event.target.value.trim();
229 handleRegisterEmailChange(i: Setup, event: any) {
230 i.state.form.email = event.target.value;
234 handleRegisterPasswordChange(i: Setup, event: any) {
235 i.state.form.password = event.target.value;
239 handleRegisterPasswordVerifyChange(i: Setup, event: any) {
240 i.state.form.password_verify = event.target.value;