1 import { None, Some } from "@sniptt/monads";
2 import { Component, linkEvent } from "inferno";
3 import { Helmet } from "inferno-helmet";
12 } from "lemmy-js-client";
13 import { Subscription } from "rxjs";
14 import { delay, retryWhen, take } from "rxjs/operators";
15 import { i18n } from "../../i18next";
16 import { UserService, WebSocketService } from "../../services";
17 import { setIsoData, toast, wsClient } from "../../utils";
18 import { Spinner } from "../common/icon";
19 import { SiteForm } from "./site-form";
23 doneRegisteringUser: boolean;
25 siteRes: GetSiteResponse;
28 export class Setup extends Component<any, State> {
29 private subscription: Subscription;
30 private isoData = setIsoData(this.context);
32 private emptyState: State = {
33 userForm: new Register({
36 password_verify: undefined,
38 // The first admin signup doesn't need a captcha
45 doneRegisteringUser: UserService.Instance.myUserInfo.isSome(),
47 siteRes: this.isoData.site_res,
50 constructor(props: any, context: any) {
51 super(props, context);
53 this.state = this.emptyState;
55 this.subscription = WebSocketService.Instance.subject
56 .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
58 msg => this.parseMessage(msg),
59 err => console.error(err),
60 () => console.log("complete")
64 componentWillUnmount() {
65 this.subscription.unsubscribe();
68 get documentTitle(): string {
69 return `${i18n.t("setup")} - Lemmy`;
74 <div className="container-lg">
75 <Helmet title={this.documentTitle} />
77 <div className="col-12 offset-lg-3 col-lg-6">
78 <h3>{i18n.t("lemmy_instance_setup")}</h3>
79 {!this.state.doneRegisteringUser ? (
82 <SiteForm siteRes={this.state.siteRes} showLocal />
92 <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
93 <h5>{i18n.t("setup_admin")}</h5>
94 <div className="form-group row">
95 <label className="col-sm-2 col-form-label" htmlFor="username">
98 <div className="col-sm-10">
101 className="form-control"
103 value={this.state.userForm.username}
104 onInput={linkEvent(this, this.handleRegisterUsernameChange)}
107 pattern="[a-zA-Z0-9_]+"
111 <div className="form-group row">
112 <label className="col-sm-2 col-form-label" htmlFor="email">
116 <div className="col-sm-10">
120 className="form-control"
121 placeholder={i18n.t("optional")}
122 value={toUndefined(this.state.userForm.email)}
123 onInput={linkEvent(this, this.handleRegisterEmailChange)}
128 <div className="form-group row">
129 <label className="col-sm-2 col-form-label" htmlFor="password">
132 <div className="col-sm-10">
136 value={this.state.userForm.password}
137 onInput={linkEvent(this, this.handleRegisterPasswordChange)}
138 className="form-control"
140 autoComplete="new-password"
146 <div className="form-group row">
147 <label className="col-sm-2 col-form-label" htmlFor="verify-password">
148 {i18n.t("verify_password")}
150 <div className="col-sm-10">
154 value={this.state.userForm.password_verify}
155 onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
156 className="form-control"
158 autoComplete="new-password"
164 <div className="form-group row">
165 <div className="col-sm-10">
166 <button type="submit" className="btn btn-secondary">
167 {this.state.userLoading ? <Spinner /> : i18n.t("sign_up")}
175 handleRegisterSubmit(i: Setup, event: any) {
176 event.preventDefault();
177 i.setState({ userLoading: true });
178 event.preventDefault();
179 WebSocketService.Instance.send(wsClient.register(i.state.userForm));
182 handleRegisterUsernameChange(i: Setup, event: any) {
183 i.state.userForm.username = event.target.value;
187 handleRegisterEmailChange(i: Setup, event: any) {
188 i.state.userForm.email = Some(event.target.value);
192 handleRegisterPasswordChange(i: Setup, event: any) {
193 i.state.userForm.password = event.target.value;
197 handleRegisterPasswordVerifyChange(i: Setup, event: any) {
198 i.state.userForm.password_verify = event.target.value;
202 parseMessage(msg: any) {
203 let op = wsUserOp(msg);
205 toast(i18n.t(msg.error), "danger");
206 this.setState({ userLoading: false });
208 } else if (op == UserOperation.Register) {
209 let data = wsJsonToRes<LoginResponse>(msg, LoginResponse);
210 this.setState({ userLoading: false });
211 UserService.Instance.login(data);
212 } else if (op == UserOperation.CreateSite) {
213 window.location.href = "/";