Farmbot-Web-App/frontend/devices/components/fbos_settings/change_ownership_form.tsx

101 lines
2.8 KiB
TypeScript

import * as React from "react";
import { Row, Col, BlurableInput } from "../../../ui/index";
import { success, error } from "../../../toast/toast";
import { getDevice } from "../../../device";
import { transferOwnership } from "../../transfer_ownership/transfer_ownership";
import { API } from "../../../api";
import { NonsecureContentWarning } from "./nonsecure_content_warning";
import { Content } from "../../../constants";
import { BlurablePassword } from "../../../ui/blurable_password";
import { t } from "../../../i18next_wrapper";
interface ChangeOwnershipFormState {
email: string;
password: string;
}
export function submitOwnershipChange(input: ChangeOwnershipFormState) {
const { email, password } = input;
const p = { email, password, device: getDevice() };
const ok = () => success(t("Received change of ownership."));
const no = () => error(t("Bad username or password"));
return transferOwnership(p).then(ok, no);
}
export class ChangeOwnershipForm
extends React.Component<{}, ChangeOwnershipFormState> {
state: ChangeOwnershipFormState = { email: "", password: "" };
render() {
return <div className={"change-ownership-form"}>
<Row>
<p>
{t("Change the account FarmBot is connected to.")}
</p>
<Col xs={4}>
<label>
{t("Email")}
</label>
</Col>
<Col xs={8}>
<BlurableInput
allowEmpty={true}
onCommit={e => this.setState({ email: e.currentTarget.value })}
name="email"
value={this.state.email}
type="email" />
</Col>
</Row>
<Row>
<Col xs={4}>
<label>
{t("Password")}
</label>
</Col>
<Col xs={8}>
<BlurablePassword
onCommit={e => this.setState({ password: e.currentTarget.value })}
name="password" />
</Col>
</Row>
<Row>
<Col xs={4}>
<label>
{t("Server")}
</label>
</Col>
<Col xs={8}>
<BlurableInput
allowEmpty={true}
onCommit={() => { }}
name="server"
disabled={true}
value={API.current.baseUrl}
type="text" />
</Col>
</Row>
<Row>
<NonsecureContentWarning urls={[API.current.baseUrl, location.protocol]}>
<Col xs={12}>
<strong>
{t(Content.NOT_HTTPS)}
</strong>
<p>
{t(Content.CONTACT_SYSADMIN)}
</p>
</Col>
</NonsecureContentWarning>
</Row>
<Row>
<button
className={"fb-button gray"}
title={t("submit")}
onClick={() => submitOwnershipChange(this.state)}>
{t("submit")}
</button>
</Row>
</div>;
}
}