1 import { Component, linkEvent } from "inferno";
2 import { Helmet } from "inferno-helmet";
10 } from "lemmy-js-client";
11 import { Subscription } from "rxjs";
12 import { delay, retryWhen, take } from "rxjs/operators";
13 import { i18n } from "../../i18next";
14 import { UserService, WebSocketService } from "../../services";
15 import { setIsoData, toast, wsClient } from "../../utils";
16 import { Spinner } from "../common/icon";
17 import { SiteForm } from "./site-form";
24 password_verify?: string;
26 captcha_uuid?: string;
27 captcha_answer?: string;
31 doneRegisteringUser: boolean;
33 siteRes: GetSiteResponse;
36 export class Setup extends Component<any, State> {
37 private subscription: Subscription;
38 private isoData = setIsoData(this.context);
44 doneRegisteringUser: !!UserService.Instance.myUserInfo,
46 siteRes: this.isoData.site_res,
49 constructor(props: any, context: any) {
50 super(props, context);
52 this.subscription = WebSocketService.Instance.subject
53 .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
55 msg => this.parseMessage(msg),
56 err => console.error(err),
57 () => console.log("complete")
61 componentWillUnmount() {
62 this.subscription.unsubscribe();
65 get documentTitle(): string {
66 return `${i18n.t("setup")} - Lemmy`;
71 <div className="container-lg">
72 <Helmet title={this.documentTitle} />
74 <div className="col-12 offset-lg-3 col-lg-6">
75 <h3>{i18n.t("lemmy_instance_setup")}</h3>
76 {!this.state.doneRegisteringUser ? (
79 <SiteForm siteRes={this.state.siteRes} showLocal />
89 <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
90 <h5>{i18n.t("setup_admin")}</h5>
91 <div className="form-group row">
92 <label className="col-sm-2 col-form-label" htmlFor="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="form-group row">
109 <label className="col-sm-2 col-form-label" htmlFor="email">
113 <div className="col-sm-10">
117 className="form-control"
118 placeholder={i18n.t("optional")}
119 value={this.state.form.email}
120 onInput={linkEvent(this, this.handleRegisterEmailChange)}
125 <div className="form-group row">
126 <label className="col-sm-2 col-form-label" htmlFor="password">
129 <div className="col-sm-10">
133 value={this.state.form.password}
134 onInput={linkEvent(this, this.handleRegisterPasswordChange)}
135 className="form-control"
137 autoComplete="new-password"
143 <div className="form-group row">
144 <label className="col-sm-2 col-form-label" htmlFor="verify-password">
145 {i18n.t("verify_password")}
147 <div className="col-sm-10">
151 value={this.state.form.password_verify}
152 onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
153 className="form-control"
155 autoComplete="new-password"
161 <div className="form-group row">
162 <div className="col-sm-10">
163 <button type="submit" className="btn btn-secondary">
164 {this.state.userLoading ? <Spinner /> : i18n.t("sign_up")}
172 handleRegisterSubmit(i: Setup, event: any) {
173 event.preventDefault();
174 i.setState({ userLoading: true });
175 event.preventDefault();
176 const cForm = i.state.form;
177 if (cForm.username && cForm.password && cForm.password_verify) {
178 const form: Register = {
179 username: cForm.username,
180 password: cForm.password,
181 password_verify: cForm.password_verify,
183 show_nsfw: cForm.show_nsfw,
184 captcha_uuid: cForm.captcha_uuid,
185 captcha_answer: cForm.captcha_answer,
186 honeypot: cForm.honeypot,
187 answer: cForm.answer,
189 WebSocketService.Instance.send(wsClient.register(form));
193 handleRegisterUsernameChange(i: Setup, event: any) {
194 i.state.form.username = event.target.value;
198 handleRegisterEmailChange(i: Setup, event: any) {
199 i.state.form.email = event.target.value;
203 handleRegisterPasswordChange(i: Setup, event: any) {
204 i.state.form.password = event.target.value;
208 handleRegisterPasswordVerifyChange(i: Setup, event: any) {
209 i.state.form.password_verify = event.target.value;
213 parseMessage(msg: any) {
214 const op = wsUserOp(msg);
216 toast(i18n.t(msg.error), "danger");
217 this.setState({ userLoading: false });
219 } else if (op == UserOperation.Register) {
220 const data = wsJsonToRes<LoginResponse>(msg);
221 this.setState({ userLoading: false });
222 UserService.Instance.login(data);
223 if (UserService.Instance.jwtInfo) {
224 this.setState({ doneRegisteringUser: true });
226 } else if (op == UserOperation.CreateSite) {
227 window.location.href = "/";