import { LoadingSpinner } from '@sourcegraph/react-loading-spinner';
import { upperFirst } from 'lodash';
import * as React from 'react';
import { Subject, Subscription } from 'rxjs';
import { catchError, filter, mergeMap, tap } from 'rxjs/operators';
import { PasswordInput } from '../../auth/SignInSignUpCommon';
import { Form } from '../../components/Form';
import { PageTitle } from '../../components/PageTitle';
import { eventLogger } from '../../tracking/eventLogger';
import { updatePassword } from './backend';
export class UserAccountAccountPage extends React.Component {
    constructor() {
        super(...arguments);
        this.state = {
            oldPassword: '',
            newPassword: '',
            newPasswordConfirmation: '',
        };
        this.submits = new Subject();
        this.subscriptions = new Subscription();
        this.newPasswordConfirmationField = null;
        this.setNewPasswordConfirmationField = (e) => (this.newPasswordConfirmationField = e);
        this.onOldPasswordFieldChange = (e) => {
            this.setState({ oldPassword: e.target.value });
        };
        this.onNewPasswordFieldChange = (e) => {
            this.setState({ newPassword: e.target.value }, () => this.validateForm());
        };
        this.onNewPasswordConfirmationFieldChange = (e) => {
            this.setState({ newPasswordConfirmation: e.target.value }, () => this.validateForm());
        };
        this.handleSubmit = (event) => {
            this.submits.next(event);
        };
        this.handleError = (err) => {
            console.error(err);
            this.setState({ loading: false, saved: false, error: err });
            return [];
        };
    }
    componentDidMount() {
        eventLogger.logViewEvent('UserAccount');
        this.subscriptions.add(this.submits
            .pipe(tap(event => {
            event.preventDefault();
            eventLogger.log('UpdatePasswordClicked');
        }), filter(event => event.currentTarget.checkValidity()), tap(() => this.setState({ loading: true })), mergeMap(event => updatePassword({
            oldPassword: this.state.oldPassword,
            newPassword: this.state.newPassword,
        }).pipe(catchError(this.handleError))))
            .subscribe(() => this.setState({
            loading: false,
            error: undefined,
            oldPassword: '',
            newPassword: '',
            newPasswordConfirmation: '',
            saved: true,
        }), this.handleError));
    }
    componentWillUnmount() {
        this.subscriptions.unsubscribe();
    }
    render() {
        return (React.createElement("div", { className: "user-settings-account-page" },
            React.createElement(PageTitle, { title: "Profile" }),
            React.createElement("h2", null, "Change password"),
            this.state.error && React.createElement("p", { className: "alert alert-danger" }, upperFirst(this.state.error.message)),
            this.state.saved && React.createElement("p", { className: "alert alert-success" }, "Password changed!"),
            React.createElement(Form, { className: "user-settings-account-page__form", onSubmit: this.handleSubmit },
                React.createElement("div", { className: "form-group" },
                    React.createElement("label", null, "Old password"),
                    React.createElement(PasswordInput, { value: this.state.oldPassword, onInput: this.onOldPasswordFieldChange, disabled: this.state.loading, name: "oldPassword", placeholder: " ", autoComplete: "current-password" })),
                React.createElement("div", { className: "form-group" },
                    React.createElement("label", null, "New password"),
                    React.createElement(PasswordInput, { value: this.state.newPassword, onInput: this.onNewPasswordFieldChange, disabled: this.state.loading, name: "newPassword", placeholder: " ", autoComplete: "new-password" })),
                React.createElement("div", { className: "form-group" },
                    React.createElement("label", null, "Confirm new password"),
                    React.createElement(PasswordInput, { value: this.state.newPasswordConfirmation, onInput: this.onNewPasswordConfirmationFieldChange, disabled: this.state.loading, name: "newPasswordConfirmation", placeholder: " ", inputRef: this.setNewPasswordConfirmationField, autoComplete: "new-password" })),
                React.createElement("button", { className: "btn btn-primary user-settings-account-page__button", type: "submit", disabled: this.state.loading }, "Update password"),
                this.state.loading && (React.createElement("div", { className: "icon-inline" },
                    React.createElement(LoadingSpinner, { className: "icon-inline" }))))));
    }
    validateForm() {
        if (this.newPasswordConfirmationField) {
            if (this.state.newPassword === this.state.newPasswordConfirmation) {
                this.newPasswordConfirmationField.setCustomValidity(''); // valid
            }
            else {
                this.newPasswordConfirmationField.setCustomValidity("New passwords don't match.");
            }
        }
    }
}
//# sourceMappingURL=UserAccountAccountPage.js.map