2017-06-29 12:54:02 -06:00
|
|
|
import * as React from "react";
|
|
|
|
import { connect } from "react-redux";
|
2019-05-02 19:37:10 -06:00
|
|
|
import {
|
2020-02-28 09:35:32 -07:00
|
|
|
Settings, ChangePassword, ExportAccountPanel, DangerousDeleteWidget,
|
2019-05-02 19:37:10 -06:00
|
|
|
} from "./components";
|
2017-08-17 12:36:33 -06:00
|
|
|
import { Props } from "./interfaces";
|
2019-05-02 19:37:10 -06:00
|
|
|
import { Page, Row, Col } from "../ui";
|
2017-06-29 12:54:02 -06:00
|
|
|
import { mapStateToProps } from "./state_to_props";
|
2019-07-01 10:43:03 -06:00
|
|
|
import { User } from "farmbot/dist/resources/api_resources";
|
2017-08-17 12:36:33 -06:00
|
|
|
import { edit, save } from "../api/crud";
|
|
|
|
import { updateNO } from "../resources/actions";
|
2019-05-02 19:37:10 -06:00
|
|
|
import { deleteUser, resetAccount } from "./actions";
|
2017-09-28 06:41:56 -06:00
|
|
|
import { LabsFeatures } from "./labs/labs_features";
|
2018-04-30 09:06:59 -06:00
|
|
|
import { requestAccountExport } from "./request_account_export";
|
2018-12-30 11:05:45 -07:00
|
|
|
import { DevWidget } from "./dev/dev_widget";
|
2018-12-03 20:06:13 -07:00
|
|
|
import { BooleanConfigKey } from "farmbot/dist/resources/configs/web_app";
|
2018-12-30 11:05:45 -07:00
|
|
|
import { DevMode } from "./dev/dev_mode";
|
2019-04-02 13:59:37 -06:00
|
|
|
import { t } from "../i18next_wrapper";
|
2019-05-02 19:37:10 -06:00
|
|
|
import { Content } from "../constants";
|
2019-06-24 15:39:49 -06:00
|
|
|
import { success } from "../toast/toast";
|
2017-08-17 12:36:33 -06:00
|
|
|
|
2017-09-27 15:36:55 -06:00
|
|
|
const KEYS: (keyof User)[] = ["id", "name", "email", "created_at", "updated_at"];
|
2017-08-17 12:36:33 -06:00
|
|
|
|
2017-08-28 05:44:37 -06:00
|
|
|
const isKey = (x: string): x is keyof User => KEYS.includes(x as keyof User);
|
2017-06-29 12:54:02 -06:00
|
|
|
|
2017-10-17 13:25:06 -06:00
|
|
|
interface State {
|
|
|
|
warnThem: boolean;
|
|
|
|
}
|
|
|
|
|
2019-09-19 13:09:00 -06:00
|
|
|
export class RawAccount extends React.Component<Props, State> {
|
2017-10-17 13:25:06 -06:00
|
|
|
state: State = { warnThem: false };
|
|
|
|
|
|
|
|
/** WHAT WE NEED: The ability to tell users to check their email if they try
|
|
|
|
* changing their email address.
|
|
|
|
*
|
|
|
|
* WHAT THAT REQUIRES: Attribute-level dirty checking. Right now we're only
|
|
|
|
* able to track changes at the record level (we know it
|
|
|
|
* changed, but not which field).
|
|
|
|
*
|
|
|
|
* This is a quick fix until we can dedicate resources to implement
|
2018-05-01 20:35:23 -06:00
|
|
|
* reversible edits to TaggedResource. I don't want to do anything weird like
|
2017-10-17 13:25:06 -06:00
|
|
|
* store `TaggedResource`s in `this.state` (risk of storing invalid UUIDs).
|
|
|
|
*
|
|
|
|
* TODO: Implement attribute level dirty tracking
|
|
|
|
*/
|
|
|
|
tempHack =
|
2017-12-12 09:52:02 -07:00
|
|
|
(key: keyof User) => (key === "email") && this.setState({ warnThem: true });
|
2017-06-29 12:54:02 -06:00
|
|
|
|
2017-08-17 12:36:33 -06:00
|
|
|
onChange = (e: React.FormEvent<HTMLInputElement>) => {
|
2020-02-28 09:34:28 -07:00
|
|
|
const { value } = e.currentTarget;
|
|
|
|
const field = e.currentTarget.name;
|
|
|
|
if (isKey(field)) {
|
|
|
|
this.tempHack(field);
|
|
|
|
this.props.dispatch(edit(this.props.user, { [field]: value }));
|
2017-08-17 12:36:33 -06:00
|
|
|
} else {
|
2020-02-28 09:34:28 -07:00
|
|
|
throw new Error("Bad key: " + field);
|
2017-06-29 12:54:02 -06:00
|
|
|
}
|
2017-08-17 12:36:33 -06:00
|
|
|
};
|
2017-06-29 12:54:02 -06:00
|
|
|
|
2017-10-17 13:25:06 -06:00
|
|
|
doSave = () => {
|
|
|
|
const conf = this.state.warnThem ?
|
|
|
|
t("Please check your email to confirm email address changes") : "Saved";
|
2019-07-02 11:03:16 -06:00
|
|
|
success(t(conf));
|
2017-10-17 13:25:06 -06:00
|
|
|
this.setState({ warnThem: false });
|
|
|
|
}
|
2017-08-17 12:36:33 -06:00
|
|
|
onSave = () => this
|
|
|
|
.props
|
|
|
|
.dispatch(save(this.props.user.uuid))
|
2017-10-17 13:25:06 -06:00
|
|
|
.then(this.doSave, updateNO);
|
2017-06-29 12:54:02 -06:00
|
|
|
|
|
|
|
render() {
|
2019-02-10 22:10:29 -07:00
|
|
|
return <Page className="account-page">
|
2017-08-28 05:44:37 -06:00
|
|
|
<Col xs={12} sm={6} smOffset={3}>
|
|
|
|
<Row>
|
|
|
|
<Settings
|
|
|
|
user={this.props.user}
|
|
|
|
onChange={this.onChange}
|
|
|
|
onSave={this.onSave} />
|
|
|
|
</Row>
|
|
|
|
<Row>
|
|
|
|
<ChangePassword />
|
|
|
|
</Row>
|
2017-12-19 14:28:14 -07:00
|
|
|
<Row>
|
2018-08-30 19:25:58 -06:00
|
|
|
<LabsFeatures
|
|
|
|
dispatch={this.props.dispatch}
|
|
|
|
getConfigValue={this.props.getConfigValue} />
|
2017-12-19 14:28:14 -07:00
|
|
|
</Row>
|
2017-08-28 05:44:37 -06:00
|
|
|
<Row>
|
2019-05-02 19:37:10 -06:00
|
|
|
<DangerousDeleteWidget
|
|
|
|
title={t("Reset Account")}
|
|
|
|
warning={t(Content.ACCOUNT_RESET_WARNING)}
|
|
|
|
confirmation={t(Content.TYPE_PASSWORD_TO_RESET)}
|
|
|
|
dispatch={this.props.dispatch}
|
|
|
|
onClick={resetAccount} />
|
|
|
|
</Row>
|
|
|
|
<Row>
|
|
|
|
<DangerousDeleteWidget
|
|
|
|
title={t("Delete Account")}
|
|
|
|
warning={t(Content.ACCOUNT_DELETE_WARNING)}
|
|
|
|
confirmation={t(Content.TYPE_PASSWORD_TO_DELETE)}
|
|
|
|
dispatch={this.props.dispatch}
|
|
|
|
onClick={deleteUser} />
|
2018-04-30 09:06:59 -06:00
|
|
|
</Row>
|
|
|
|
<Row>
|
|
|
|
<ExportAccountPanel onClick={requestAccountExport} />
|
2017-08-28 05:44:37 -06:00
|
|
|
</Row>
|
2018-12-03 20:06:13 -07:00
|
|
|
<Row>
|
|
|
|
{this.props.getConfigValue("show_dev_menu" as BooleanConfigKey) &&
|
|
|
|
<DevWidget dispatch={this.props.dispatch} />}
|
|
|
|
</Row>
|
2018-12-21 11:58:17 -07:00
|
|
|
<DevMode dispatch={this.props.dispatch} />
|
2017-08-28 05:44:37 -06:00
|
|
|
</Col>
|
|
|
|
</Page>;
|
2017-06-29 12:54:02 -06:00
|
|
|
}
|
|
|
|
}
|
2019-09-19 13:09:00 -06:00
|
|
|
|
|
|
|
export const Account = connect(mapStateToProps)(RawAccount);
|