121 lines
3.6 KiB
TypeScript
121 lines
3.6 KiB
TypeScript
import * as React from "react";
|
|
import axios from "axios";
|
|
import { fun as log, error as logError, init as logInit } from "../toast/toast";
|
|
import { AuthState } from "../auth/interfaces";
|
|
import { Session } from "../session";
|
|
import { prettyPrintApiErrors } from "../util";
|
|
import { API } from "../api";
|
|
import { Row, Col, Widget, WidgetHeader, WidgetBody } from "../ui";
|
|
import { TermsCheckbox } from "../front_page/terms_checkbox";
|
|
import { t } from "../i18next_wrapper";
|
|
import { ExternalUrl } from "../external_urls";
|
|
|
|
interface Props { }
|
|
interface State {
|
|
email: string;
|
|
password: string;
|
|
agree_to_terms: boolean;
|
|
}
|
|
|
|
export class TosUpdate extends React.Component<Props, Partial<State>> {
|
|
constructor(props: Props) {
|
|
super(props);
|
|
this.submit = this.submit.bind(this);
|
|
this.state = { agree_to_terms: false };
|
|
}
|
|
|
|
set = (name: keyof State) => (event: React.FormEvent<HTMLInputElement>) => {
|
|
const state: { [name: string]: State[keyof State] } = {};
|
|
state[name] = (event.currentTarget).value;
|
|
this.setState(state);
|
|
};
|
|
|
|
submit(e: React.SyntheticEvent<HTMLFormElement>) {
|
|
e.preventDefault();
|
|
const { email, password, agree_to_terms } = this.state;
|
|
const payload = { user: { email, password, agree_to_terms } };
|
|
API.setBaseUrl(API.fetchBrowserLocation());
|
|
axios
|
|
.post<AuthState>(API.current.tokensPath, payload)
|
|
.then(resp => {
|
|
Session.replaceToken(resp.data);
|
|
window.location.assign("/app/controls");
|
|
})
|
|
.catch(error => {
|
|
logError(prettyPrintApiErrors(error));
|
|
});
|
|
}
|
|
|
|
get tosLoadOk() { return (globalConfig.TOS_URL && globalConfig.PRIV_URL); }
|
|
|
|
tosForm() {
|
|
if (this.tosLoadOk) {
|
|
const agree = this.state.agree_to_terms;
|
|
return <form onSubmit={this.submit}>
|
|
<div className="input-group">
|
|
<label> {t("Email")} </label>
|
|
<input type="email"
|
|
onChange={this.set("email").bind(this)}>
|
|
</input>
|
|
<label>{t("Password")}</label>
|
|
<input type="password"
|
|
onChange={this.set("password").bind(this)}>
|
|
</input>
|
|
<TermsCheckbox
|
|
privUrl={globalConfig.PRIV_URL}
|
|
tosUrl={globalConfig.TOS_URL}
|
|
onChange={e =>
|
|
this.setState({ agree_to_terms: e.currentTarget.checked })}
|
|
agree={agree} />
|
|
<Row>
|
|
<Col xs={12}>
|
|
<button
|
|
className="green fb-button"
|
|
onClick={() =>
|
|
!agree && logError(t("Please agree to the terms."))}
|
|
type={agree ? "submit" : "button"}>
|
|
{t("I Agree to the Terms of Service")}
|
|
</button>
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
</form>;
|
|
} else {
|
|
return <div>
|
|
<p>
|
|
{t("Something went wrong while rendering this page.")}
|
|
</p>
|
|
<p>
|
|
{t("Please send us an email at contact@farm.bot or see the ")}
|
|
<a href={ExternalUrl.softwareForum}>
|
|
{t("FarmBot forum.")}
|
|
</a>
|
|
</p>
|
|
</div>;
|
|
}
|
|
}
|
|
|
|
componentDidMount() {
|
|
logInit();
|
|
const body = t("Before logging in, you must agree to our latest Terms" +
|
|
" of Service and Privacy Policy");
|
|
log(body, t("New Terms of Service"));
|
|
}
|
|
|
|
render() {
|
|
return <div className="static-page">
|
|
<div className="all-content-wrapper">
|
|
<Widget>
|
|
<WidgetHeader title={
|
|
this.tosLoadOk
|
|
? t("Agree to Terms of Service")
|
|
: t("Problem Loading Terms of Service")} />
|
|
<WidgetBody>
|
|
{this.tosForm()}
|
|
</WidgetBody>
|
|
</Widget>
|
|
</div>
|
|
</div>;
|
|
}
|
|
}
|