import * as React from 'react';
import { Subject, Subscription } from 'rxjs';
import { catchError, mergeMap, tap } from 'rxjs/operators';
import { EmailInput, UsernameInput } from '../auth/SignInSignUpCommon';
import { CopyableText } from '../components/CopyableText';
import { Form } from '../components/Form';
import { PageTitle } from '../components/PageTitle';
import { eventLogger } from '../tracking/eventLogger';
import { createUser } from './backend';
/**
 * A page with a form to create a user account.
 */
export class SiteAdminCreateUserPage extends React.Component {
    constructor() {
        super(...arguments);
        this.state = {
            loading: false,
            username: '',
            email: '',
        };
        this.submits = new Subject();
        this.subscriptions = new Subscription();
        this.onEmailFieldChange = (e) => {
            this.setState({ email: e.target.value, errorDescription: undefined });
        };
        this.onUsernameFieldChange = (e) => {
            this.setState({ username: e.target.value, errorDescription: undefined });
        };
        this.onSubmit = (event) => {
            event.preventDefault();
            event.stopPropagation();
            this.submits.next({ username: this.state.username, email: this.state.email });
        };
        this.dismissAlert = () => this.setState({
            createUserResult: undefined,
            errorDescription: undefined,
            username: '',
            email: '',
        });
    }
    componentDidMount() {
        eventLogger.logViewEvent('SiteAdminCreateUser');
        this.subscriptions.add(this.submits
            .pipe(tap(() => this.setState({
            createUserResult: undefined,
            loading: true,
            errorDescription: undefined,
        })), mergeMap(({ username, email }) => createUser(username, email).pipe(catchError(error => {
            console.error(error);
            this.setState({
                createUserResult: undefined,
                loading: false,
                errorDescription: error.message,
            });
            return [];
        }))))
            .subscribe(createUserResult => this.setState({
            loading: false,
            errorDescription: undefined,
            createUserResult,
        }), error => console.error(error)));
    }
    componentWillUnmount() {
        this.subscriptions.unsubscribe();
    }
    render() {
        return (React.createElement("div", { className: "site-admin-create-user-page" },
            React.createElement(PageTitle, { title: "Create user - Admin" }),
            React.createElement("h2", null, "Create user account"),
            React.createElement("p", null,
                "Create a new user account",
                window.context.resetPasswordEnabled
                    ? ' and generate a password reset link. You must manually send the link to the new user.'
                    : '. New users must authenticate using a configured authentication provider.'),
            React.createElement("p", { className: "mb-4" },
                "For information about configuring SSO authentication, see",
                ' ',
                React.createElement("a", { href: "https://about.sourcegraph.com/docs/config/authentication" }, "User authentication"),
                " in the Sourcegraph documentation."),
            this.state.createUserResult ? (React.createElement("div", { className: "alert alert-success" },
                React.createElement("p", null,
                    "Account created for ",
                    React.createElement("strong", null, this.state.username),
                    "."),
                this.state.createUserResult.resetPasswordURL !== null ? (React.createElement(React.Fragment, null,
                    React.createElement("p", null, "You must manually send this password reset link to the new user:"),
                    React.createElement(CopyableText, { text: this.state.createUserResult.resetPasswordURL, size: 40 }))) : (React.createElement("p", null, "The user must authenticate using a configured authentication provider.")),
                React.createElement("button", { className: "btn btn-primary mt-2", onClick: this.dismissAlert, autoFocus: true }, "Create another user"))) : (React.createElement(Form, { onSubmit: this.onSubmit, className: "site-admin-create-user-page__form" },
                React.createElement("div", { className: "form-group site-admin-create-user-page__form-group" },
                    React.createElement("label", { htmlFor: "site-admin-create-user-page__form-username" }, "Username"),
                    React.createElement(UsernameInput, { id: "site-admin-create-user-page__form-username", onChange: this.onUsernameFieldChange, value: this.state.username, required: true, disabled: this.state.loading, autoFocus: true })),
                React.createElement("div", { className: "form-group site-admin-create-user-page__form-group" },
                    React.createElement("label", { htmlFor: "site-admin-create-user-page__form-email" }, "Email"),
                    React.createElement(EmailInput, { id: "site-admin-create-user-page__form-email", onChange: this.onEmailFieldChange, value: this.state.email, disabled: this.state.loading, "aria-describedby": "site-admin-create-user-page__form-email-help" }),
                    React.createElement("small", { id: "site-admin-create-user-page__form-email-help", className: "form-text text-muted" }, "Optional verified email for the user.")),
                this.state.errorDescription && (React.createElement("div", { className: "alert alert-danger my-2" }, this.state.errorDescription)),
                React.createElement("button", { className: "btn btn-primary", disabled: this.state.loading, type: "submit" }, window.context.resetPasswordEnabled
                    ? 'Create account & generate password reset link'
                    : 'Create account')))));
    }
}
//# sourceMappingURL=SiteAdminCreateUserPage.js.map