Add show/hide button to password fields (#1861)

[lemmy-ui.git] / src / shared / components / home / setup.tsx

diff --git a/src/shared/components/home/setup.tsx b/src/shared/components/home/setup.tsx
index fb4c710f3dd4c3a8dab8adf0d8450819445cadf6..7b3d4c27ea9b072e968b4e2ce63f2654346b6280 100644 (file)
--- a/src/shared/components/home/setup.tsx
+++ b/src/shared/components/home/setup.tsx
@@ -7,9 +7,10 @@ import {
   LoginResponse,
   Register,
 } from "lemmy-js-client";
-import { FirstLoadService, I18NextService, UserService } from "../../services";
+import { I18NextService, UserService } from "../../services";
 import { HttpService, RequestState } from "../../services/HttpService";
 import { Spinner } from "../common/icon";
+import PasswordInput from "../common/password-input";
 import { SiteForm } from "./site-form";
 
 interface State {
@@ -47,8 +48,6 @@ export class Setup extends Component<any, State> {
     super(props, context);
 
     this.handleCreateSite = this.handleCreateSite.bind(this);
-
-    FirstLoadService.isFirstLoad;
   }
 
   async componentDidMount() {
@@ -65,7 +64,9 @@ export class Setup extends Component<any, State> {
         <Helmet title={this.documentTitle} />
         <div className="row">
           <div className="col-12 offset-lg-3 col-lg-6">
-            <h3>{I18NextService.i18n.t("lemmy_instance_setup")}</h3>
+            <h1 className="h4 mb-4">
+              {I18NextService.i18n.t("lemmy_instance_setup")}
+            </h1>
             {!this.state.doneRegisteringUser ? (
               this.registerUser()
             ) : (
@@ -86,7 +87,7 @@ export class Setup extends Component<any, State> {
   registerUser() {
     return (
       <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
-        <h5>{I18NextService.i18n.t("setup_admin")}</h5>
+        <h2 className="h5 mb-3">{I18NextService.i18n.t("setup_admin")}</h2>
         <div className="mb-3 row">
           <label className="col-sm-2 col-form-label" htmlFor="username">
             {I18NextService.i18n.t("username")}
@@ -121,41 +122,21 @@ export class Setup extends Component<any, State> {
             />
           </div>
         </div>
-        <div className="mb-3 row">
-          <label className="col-sm-2 col-form-label" htmlFor="password">
-            {I18NextService.i18n.t("password")}
-          </label>
-          <div className="col-sm-10">
-            <input
-              type="password"
-              id="password"
-              value={this.state.form.password}
-              onInput={linkEvent(this, this.handleRegisterPasswordChange)}
-              className="form-control"
-              required
-              autoComplete="new-password"
-              minLength={10}
-              maxLength={60}
-            />
-          </div>
+        <div className="mb-3">
+          <PasswordInput
+            id="password"
+            value={this.state.form.password}
+            onInput={linkEvent(this, this.handleRegisterPasswordChange)}
+            label={I18NextService.i18n.t("password")}
+          />
         </div>
-        <div className="mb-3 row">
-          <label className="col-sm-2 col-form-label" htmlFor="verify-password">
-            {I18NextService.i18n.t("verify_password")}
-          </label>
-          <div className="col-sm-10">
-            <input
-              type="password"
-              id="verify-password"
-              value={this.state.form.password_verify}
-              onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
-              className="form-control"
-              required
-              autoComplete="new-password"
-              minLength={10}
-              maxLength={60}
-            />
-          </div>
+        <div className="mb-3">
+          <PasswordInput
+            id="verify-password"
+            value={this.state.form.password_verify}
+            onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
+            label={I18NextService.i18n.t("verify_password")}
+          />
         </div>
         <div className="mb-3 row">
           <div className="col-sm-10">
@@ -206,10 +187,8 @@ export class Setup extends Component<any, State> {
       if (i.state.registerRes.state == "success") {
         const data = i.state.registerRes.data;
 
-        UserService.Instance.login(data);
-        if (UserService.Instance.jwtInfo) {
-          i.setState({ doneRegisteringUser: true });
-        }
+        UserService.Instance.login({ res: data });
+        i.setState({ doneRegisteringUser: true });
       }
     }
   }