1 import { Component, linkEvent } from "inferno";
4 PasswordChange as PasswordChangeForm,
7 } from "lemmy-js-client";
8 import { Subscription } from "rxjs";
9 import { i18n } from "../../i18next";
10 import { UserService, WebSocketService } from "../../services";
12 capitalizeFirstLetter,
21 import { HtmlTags } from "../common/html-tags";
22 import { Spinner } from "../common/icon";
25 passwordChangeForm: PasswordChangeForm;
30 export class PasswordChange extends Component<any, State> {
31 private isoData = setIsoData(this.context);
32 private subscription: Subscription;
36 token: this.props.match.params.token,
38 password_verify: undefined,
41 site_view: this.isoData.site_res.site_view,
44 constructor(props: any, context: any) {
45 super(props, context);
47 this.state = this.emptyState;
49 this.parseMessage = this.parseMessage.bind(this);
50 this.subscription = wsSubscribe(this.parseMessage);
53 componentWillUnmount() {
55 this.subscription.unsubscribe();
59 get documentTitle(): string {
60 return `${i18n.t("password_change")} - ${this.state.site_view.site.name}`;
65 <div class="container">
67 title={this.documentTitle}
68 path={this.context.router.route.match.url}
71 <div class="col-12 col-lg-6 offset-lg-3 mb-4">
72 <h5>{i18n.t("password_change")}</h5>
73 {this.passwordChangeForm()}
80 passwordChangeForm() {
82 <form onSubmit={linkEvent(this, this.handlePasswordChangeSubmit)}>
83 <div class="form-group row">
84 <label class="col-sm-2 col-form-label" htmlFor="new-password">
85 {i18n.t("new_password")}
87 <div class="col-sm-10">
91 value={this.state.passwordChangeForm.password}
92 onInput={linkEvent(this, this.handlePasswordChange)}
99 <div class="form-group row">
100 <label class="col-sm-2 col-form-label" htmlFor="verify-password">
101 {i18n.t("verify_password")}
103 <div class="col-sm-10">
107 value={this.state.passwordChangeForm.password_verify}
108 onInput={linkEvent(this, this.handleVerifyPasswordChange)}
115 <div class="form-group row">
116 <div class="col-sm-10">
117 <button type="submit" class="btn btn-secondary">
118 {this.state.loading ? (
121 capitalizeFirstLetter(i18n.t("save"))
130 handlePasswordChange(i: PasswordChange, event: any) {
131 i.state.passwordChangeForm.password = event.target.value;
135 handleVerifyPasswordChange(i: PasswordChange, event: any) {
136 i.state.passwordChangeForm.password_verify = event.target.value;
140 handlePasswordChangeSubmit(i: PasswordChange, event: any) {
141 event.preventDefault();
142 i.state.loading = true;
145 WebSocketService.Instance.send(
146 wsClient.passwordChange(i.state.passwordChangeForm)
150 parseMessage(msg: any) {
151 let op = wsUserOp(msg);
154 toast(i18n.t(msg.error), "danger");
155 this.state.loading = false;
156 this.setState(this.state);
158 } else if (op == UserOperation.PasswordChange) {
159 let data = wsJsonToRes<LoginResponse>(msg).data;
160 this.state = this.emptyState;
161 this.setState(this.state);
162 UserService.Instance.login(data);
163 this.props.history.push("/");