]> Untitled Git - lemmy.git/blobdiff - ui/src/components/password_change.tsx
routes.api: fix get_captcha endpoint (#1135)
[lemmy.git] / ui / src / components / password_change.tsx
index 3e542f7b520593dd20783e4c068d924843061ab2..527f21e045e463362746789269c16b9deeed1a3b 100644 (file)
@@ -1,19 +1,23 @@
 import { Component, linkEvent } from 'inferno';
+import { Helmet } from 'inferno-helmet';
 import { Subscription } from 'rxjs';
 import { retryWhen, delay, take } from 'rxjs/operators';
 import {
   UserOperation,
   LoginResponse,
   PasswordChangeForm,
-} from '../interfaces';
+  WebSocketJsonResponse,
+  GetSiteResponse,
+  Site,
+} from 'lemmy-js-client';
 import { WebSocketService, UserService } from '../services';
-import { msgOp, capitalizeFirstLetter } from '../utils';
+import { wsJsonToRes, capitalizeFirstLetter, toast } from '../utils';
 import { i18n } from '../i18next';
-import { T } from 'inferno-i18next';
 
 interface State {
   passwordChangeForm: PasswordChangeForm;
   loading: boolean;
+  site: Site;
 }
 
 export class PasswordChange extends Component<any, State> {
@@ -26,6 +30,7 @@ export class PasswordChange extends Component<any, State> {
       password_verify: undefined,
     },
     loading: false,
+    site: undefined,
   };
 
   constructor(props: any, context: any) {
@@ -34,39 +39,34 @@ export class PasswordChange extends Component<any, State> {
     this.state = this.emptyState;
 
     this.subscription = WebSocketService.Instance.subject
-      .pipe(
-        retryWhen(errors =>
-          errors.pipe(
-            delay(3000),
-            take(10)
-          )
-        )
-      )
+      .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
       .subscribe(
         msg => this.parseMessage(msg),
         err => console.error(err),
         () => console.log('complete')
       );
+    WebSocketService.Instance.getSite();
   }
 
   componentWillUnmount() {
     this.subscription.unsubscribe();
   }
 
-  componentDidMount() {
-    document.title = `${i18n.t('password_change')} - ${
-      WebSocketService.Instance.site.name
-    }`;
+  get documentTitle(): string {
+    if (this.state.site) {
+      return `${i18n.t('password_change')} - ${this.state.site.name}`;
+    } else {
+      return 'Lemmy';
+    }
   }
 
   render() {
     return (
       <div class="container">
+        <Helmet title={this.documentTitle} />
         <div class="row">
           <div class="col-12 col-lg-6 offset-lg-3 mb-4">
-            <h5>
-              <T i18nKey="password_change">#</T>
-            </h5>
+            <h5>{i18n.t('password_change')}</h5>
             {this.passwordChangeForm()}
           </div>
         </div>
@@ -79,7 +79,7 @@ export class PasswordChange extends Component<any, State> {
       <form onSubmit={linkEvent(this, this.handlePasswordChangeSubmit)}>
         <div class="form-group row">
           <label class="col-sm-2 col-form-label">
-            <T i18nKey="new_password">#</T>
+            {i18n.t('new_password')}
           </label>
           <div class="col-sm-10">
             <input
@@ -93,7 +93,7 @@ export class PasswordChange extends Component<any, State> {
         </div>
         <div class="form-group row">
           <label class="col-sm-2 col-form-label">
-            <T i18nKey="verify_password">#</T>
+            {i18n.t('verify_password')}
           </label>
           <div class="col-sm-10">
             <input
@@ -140,21 +140,23 @@ export class PasswordChange extends Component<any, State> {
     WebSocketService.Instance.passwordChange(i.state.passwordChangeForm);
   }
 
-  parseMessage(msg: any) {
-    let op: UserOperation = msgOp(msg);
+  parseMessage(msg: WebSocketJsonResponse) {
+    let res = wsJsonToRes(msg);
     if (msg.error) {
-      alert(i18n.t(msg.error));
+      toast(i18n.t(msg.error), 'danger');
       this.state.loading = false;
       this.setState(this.state);
       return;
-    } else {
-      if (op == UserOperation.PasswordChange) {
-        this.state = this.emptyState;
-        this.setState(this.state);
-        let res: LoginResponse = msg;
-        UserService.Instance.login(res);
-        this.props.history.push('/');
-      }
+    } else if (res.op == UserOperation.PasswordChange) {
+      let data = res.data as LoginResponse;
+      this.state = this.emptyState;
+      this.setState(this.state);
+      UserService.Instance.login(data);
+      this.props.history.push('/');
+    } else if (res.op == UserOperation.GetSite) {
+      let data = res.data as GetSiteResponse;
+      this.state.site = data.site;
+      this.setState(this.state);
     }
   }
 }