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}
86 <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
87 <h5>{i18n.t("setup_admin")}</h5>
88 <div className="form-group row">
89 <label className="col-sm-2 col-form-label" htmlFor="username">
92 <div className="col-sm-10">
95 className="form-control"
97 value={this.state.form.username}
98 onInput={linkEvent(this, this.handleRegisterUsernameChange)}
101 pattern="[a-zA-Z0-9_]+"
105 <div className="form-group row">
106 <label className="col-sm-2 col-form-label" htmlFor="email">
110 <div className="col-sm-10">
114 className="form-control"
115 placeholder={i18n.t("optional")}
116 value={this.state.form.email}
117 onInput={linkEvent(this, this.handleRegisterEmailChange)}
122 <div className="form-group row">
123 <label className="col-sm-2 col-form-label" htmlFor="password">
126 <div className="col-sm-10">
130 value={this.state.form.password}
131 onInput={linkEvent(this, this.handleRegisterPasswordChange)}
132 className="form-control"
134 autoComplete="new-password"
140 <div className="form-group row">
141 <label className="col-sm-2 col-form-label" htmlFor="verify-password">
142 {i18n.t("verify_password")}
144 <div className="col-sm-10">
148 value={this.state.form.password_verify}
149 onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
150 className="form-control"
152 autoComplete="new-password"
158 <div className="form-group row">
159 <div className="col-sm-10">
160 <button type="submit" className="btn btn-secondary">
161 {this.state.registerRes.state == "loading" ? (
173 async handleRegisterSubmit(i: Setup, event: any) {
174 event.preventDefault();
175 i.setState({ registerRes: { state: "loading" } });
188 if (username && password && password_verify) {
189 const form: Register = {
201 registerRes: await HttpService.client.register(form),
204 if (i.state.registerRes.state == "success") {
205 const data = i.state.registerRes.data;
207 UserService.Instance.login(data);
208 if (UserService.Instance.jwtInfo) {
209 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;