1 import { None, Some } from "@sniptt/monads";
2 import { Component, linkEvent } from "inferno";
3 import { Helmet } from "inferno-helmet";
11 } from "lemmy-js-client";
12 import { Subscription } from "rxjs";
13 import { delay, retryWhen, take } from "rxjs/operators";
14 import { i18n } from "../../i18next";
15 import { UserService, WebSocketService } from "../../services";
16 import { toast, wsClient } from "../../utils";
17 import { Spinner } from "../common/icon";
18 import { SiteForm } from "./site-form";
22 doneRegisteringUser: boolean;
26 export class Setup extends Component<any, State> {
27 private subscription: Subscription;
29 private emptyState: State = {
30 userForm: new Register({
33 password_verify: undefined,
35 // The first admin signup doesn't need a captcha
42 doneRegisteringUser: UserService.Instance.myUserInfo.isSome(),
46 constructor(props: any, context: any) {
47 super(props, context);
49 this.state = this.emptyState;
51 this.subscription = WebSocketService.Instance.subject
52 .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
54 msg => this.parseMessage(msg),
55 err => console.error(err),
56 () => console.log("complete")
60 componentWillUnmount() {
61 this.subscription.unsubscribe();
64 get documentTitle(): string {
65 return `${i18n.t("setup")} - Lemmy`;
70 <div class="container">
71 <Helmet title={this.documentTitle} />
73 <div class="col-12 offset-lg-3 col-lg-6">
74 <h3>{i18n.t("lemmy_instance_setup")}</h3>
75 {!this.state.doneRegisteringUser ? (
78 <SiteForm site={None} showLocal />
88 <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
89 <h5>{i18n.t("setup_admin")}</h5>
90 <div class="form-group row">
91 <label class="col-sm-2 col-form-label" htmlFor="username">
94 <div class="col-sm-10">
99 value={this.state.userForm.username}
100 onInput={linkEvent(this, this.handleRegisterUsernameChange)}
103 pattern="[a-zA-Z0-9_]+"
107 <div class="form-group row">
108 <label class="col-sm-2 col-form-label" htmlFor="email">
112 <div class="col-sm-10">
117 placeholder={i18n.t("optional")}
118 value={toUndefined(this.state.userForm.email)}
119 onInput={linkEvent(this, this.handleRegisterEmailChange)}
124 <div class="form-group row">
125 <label class="col-sm-2 col-form-label" htmlFor="password">
128 <div class="col-sm-10">
132 value={this.state.userForm.password}
133 onInput={linkEvent(this, this.handleRegisterPasswordChange)}
136 autoComplete="new-password"
142 <div class="form-group row">
143 <label class="col-sm-2 col-form-label" htmlFor="verify-password">
144 {i18n.t("verify_password")}
146 <div class="col-sm-10">
150 value={this.state.userForm.password_verify}
151 onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
154 autoComplete="new-password"
160 <div class="form-group row">
161 <div class="col-sm-10">
162 <button type="submit" class="btn btn-secondary">
163 {this.state.userLoading ? <Spinner /> : i18n.t("sign_up")}
171 handleRegisterSubmit(i: Setup, event: any) {
172 event.preventDefault();
173 i.state.userLoading = true;
175 event.preventDefault();
176 WebSocketService.Instance.send(wsClient.register(i.state.userForm));
179 handleRegisterUsernameChange(i: Setup, event: any) {
180 i.state.userForm.username = event.target.value;
184 handleRegisterEmailChange(i: Setup, event: any) {
185 i.state.userForm.email = Some(event.target.value);
189 handleRegisterPasswordChange(i: Setup, event: any) {
190 i.state.userForm.password = event.target.value;
194 handleRegisterPasswordVerifyChange(i: Setup, event: any) {
195 i.state.userForm.password_verify = event.target.value;
199 parseMessage(msg: any) {
200 let op = wsUserOp(msg);
202 toast(i18n.t(msg.error), "danger");
203 this.state.userLoading = false;
204 this.setState(this.state);
206 } else if (op == UserOperation.Register) {
207 let data = wsJsonToRes<LoginResponse>(msg, LoginResponse);
208 this.state.userLoading = false;
209 UserService.Instance.login(data);
210 this.setState(this.state);
211 } else if (op == UserOperation.CreateSite) {
212 window.location.href = "/";