routes.api: fix get_captcha endpoint (#1135)

[lemmy.git] / ui / src / components / setup.tsx

diff --git a/ui/src/components/setup.tsx b/ui/src/components/setup.tsx
index 5b0811117442ab22c0dfcfa4587c7a80c161ee9f..6360ec5a36022e4fcb7d21aabc748c1b479dbc50 100644 (file)
--- a/ui/src/components/setup.tsx
+++ b/ui/src/components/setup.tsx
@@ -1,12 +1,17 @@
 import { Component, linkEvent } from 'inferno';
+import { Helmet } from 'inferno-helmet';
 import { Subscription } from 'rxjs';
 import { retryWhen, delay, take } from 'rxjs/operators';
-import { RegisterForm, LoginResponse, UserOperation } from '../interfaces';
+import {
+  RegisterForm,
+  LoginResponse,
+  UserOperation,
+  WebSocketJsonResponse,
+} from 'lemmy-js-client';
 import { WebSocketService, UserService } from '../services';
-import { wsJsonToRes } from '../utils';
+import { wsJsonToRes, toast } from '../utils';
 import { SiteForm } from './site-form';
 import { i18n } from '../i18next';
-import { T } from 'inferno-i18next';
 
 interface State {
   userForm: RegisterForm;
@@ -24,6 +29,9 @@ export class Setup extends Component<any, State> {
       password_verify: undefined,
       admin: true,
       show_nsfw: true,
+      // The first admin signup doesn't need a captcha
+      captcha_uuid: '',
+      captcha_answer: '',
     },
     doneRegisteringUser: false,
     userLoading: false,
@@ -47,18 +55,17 @@ export class Setup extends Component<any, State> {
     this.subscription.unsubscribe();
   }
 
-  componentDidMount() {
-    document.title = `${i18n.t('setup')} - Lemmy`;
+  get documentTitle(): string {
+    return `${i18n.t('setup')} - Lemmy`;
   }
 
   render() {
     return (
       <div class="container">
+        <Helmet title={this.documentTitle} />
         <div class="row">
           <div class="col-12 offset-lg-3 col-lg-6">
-            <h3>
-              <T i18nKey="lemmy_instance_setup">#</T>
-            </h3>
+            <h3>{i18n.t('lemmy_instance_setup')}</h3>
             {!this.state.doneRegisteringUser ? (
               this.registerUser()
             ) : (
@@ -73,17 +80,16 @@ export class Setup extends Component<any, State> {
   registerUser() {
     return (
       <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
-        <h5>
-          <T i18nKey="setup_admin">#</T>
-        </h5>
+        <h5>{i18n.t('setup_admin')}</h5>
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label">
-            <T i18nKey="username">#</T>
+          <label class="col-sm-2 col-form-label" htmlFor="username">
+            {i18n.t('username')}
           </label>
           <div class="col-sm-10">
             <input
               type="text"
               class="form-control"
+              id="username"
               value={this.state.userForm.username}
               onInput={linkEvent(this, this.handleRegisterUsernameChange)}
               required
@@ -94,12 +100,14 @@ export class Setup extends Component<any, State> {
           </div>
         </div>
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label">
-            <T i18nKey="email">#</T>
+          <label class="col-sm-2 col-form-label" htmlFor="email">
+            {i18n.t('email')}
           </label>
+
           <div class="col-sm-10">
             <input
               type="email"
+              id="email"
               class="form-control"
               placeholder={i18n.t('optional')}
               value={this.state.userForm.email}
@@ -109,12 +117,13 @@ export class Setup extends Component<any, State> {
           </div>
         </div>
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label">
-            <T i18nKey="password">#</T>
+          <label class="col-sm-2 col-form-label" htmlFor="password">
+            {i18n.t('password')}
           </label>
           <div class="col-sm-10">
             <input
               type="password"
+              id="password"
               value={this.state.userForm.password}
               onInput={linkEvent(this, this.handleRegisterPasswordChange)}
               class="form-control"
@@ -123,12 +132,13 @@ export class Setup extends Component<any, State> {
           </div>
         </div>
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label">
-            <T i18nKey="verify_password">#</T>
+          <label class="col-sm-2 col-form-label" htmlFor="verify-password">
+            {i18n.t('verify_password')}
           </label>
           <div class="col-sm-10">
             <input
               type="password"
+              id="verify-password"
               value={this.state.userForm.password_verify}
               onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
               class="form-control"
@@ -181,10 +191,10 @@ export class Setup extends Component<any, State> {
     i.setState(i.state);
   }
 
-  parseMessage(msg: any) {
+  parseMessage(msg: WebSocketJsonResponse) {
     let res = wsJsonToRes(msg);
-    if (res.error) {
-      alert(i18n.t(res.error));
+    if (msg.error) {
+      toast(i18n.t(msg.error), 'danger');
       this.state.userLoading = false;
       this.setState(this.state);
       return;