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 PasswordInput from "../common/password-input";
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 `${I18NextService.i18n.t("setup")} - Lemmy`;
63 <div className="home-setup container-lg">
64 <Helmet title={this.documentTitle} />
66 <div className="col-12 offset-lg-3 col-lg-6">
67 <h1 className="h4 mb-4">
68 {I18NextService.i18n.t("lemmy_instance_setup")}
70 {!this.state.doneRegisteringUser ? (
75 onSaveSite={this.handleCreateSite}
76 siteRes={this.state.siteRes}
77 themeList={this.state.themeList}
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")}
95 <div className="col-sm-10">
98 className="form-control"
100 value={this.state.form.username}
101 onInput={linkEvent(this, this.handleRegisterUsernameChange)}
104 pattern="[a-zA-Z0-9_]+"
108 <div className="mb-3 row">
109 <label className="col-sm-2 col-form-label" htmlFor="email">
110 {I18NextService.i18n.t("email")}
113 <div className="col-sm-10">
117 className="form-control"
118 placeholder={I18NextService.i18n.t("optional")}
119 value={this.state.form.email}
120 onInput={linkEvent(this, this.handleRegisterEmailChange)}
125 <div className="mb-3">
128 value={this.state.form.password}
129 onInput={linkEvent(this, this.handleRegisterPasswordChange)}
130 label={I18NextService.i18n.t("password")}
133 <div className="mb-3">
136 value={this.state.form.password_verify}
137 onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
138 label={I18NextService.i18n.t("verify_password")}
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" ? (
147 I18NextService.i18n.t("sign_up")
156 async handleRegisterSubmit(i: Setup, event: any) {
157 event.preventDefault();
158 i.setState({ registerRes: { state: "loading" } });
171 if (username && password && password_verify) {
172 const form: Register = {
184 registerRes: await HttpService.client.register(form),
187 if (i.state.registerRes.state == "success") {
188 const data = i.state.registerRes.data;
190 UserService.Instance.login({ res: data });
191 i.setState({ doneRegisteringUser: true });
196 async handleCreateSite(form: CreateSite) {
197 const createRes = await HttpService.client.createSite(form);
198 if (createRes.state === "success") {
199 this.props.history.replace("/");
204 handleRegisterUsernameChange(i: Setup, event: any) {
205 i.state.form.username = event.target.value.trim();
209 handleRegisterEmailChange(i: Setup, event: any) {
210 i.state.form.email = event.target.value;
214 handleRegisterPasswordChange(i: Setup, event: any) {
215 i.state.form.password = event.target.value;
219 handleRegisterPasswordVerifyChange(i: Setup, event: any) {
220 i.state.form.password_verify = event.target.value;