improve TOS page
This commit is contained in:
parent
35b5f5fed0
commit
094f3f8608
|
@ -25,6 +25,11 @@
|
|||
input {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.all-content-wrapper {
|
||||
max-width: 50rem;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
.widget-wrapper {
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
@ -36,7 +41,7 @@
|
|||
display: inline-block;
|
||||
}
|
||||
.tos {
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
input[type="checkbox"] {
|
||||
float: left;
|
||||
|
@ -57,6 +62,13 @@
|
|||
color: $medium_gray;
|
||||
font-weight: 500;
|
||||
}
|
||||
.fa-gear {
|
||||
float: right;
|
||||
}
|
||||
.fa-external-link {
|
||||
margin-left: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-device-width: 320px) and (max-device-width: 736px) {
|
||||
|
|
|
@ -10,6 +10,7 @@ import { detectLanguage } from "../i18n";
|
|||
import { API } from "../api";
|
||||
import "../css/_index.scss";
|
||||
import { HttpData } from "../util";
|
||||
import { Row, Col, Widget, WidgetHeader, WidgetBody } from "../ui/index";
|
||||
interface Props { }
|
||||
interface State {
|
||||
hideServerSettings: boolean;
|
||||
|
@ -79,69 +80,11 @@ export class TosUpdate extends React.Component<Props, Partial<State>> {
|
|||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
logInit();
|
||||
const body = t("Before logging in, you must agree to our latest Terms" +
|
||||
" of Service and Privacy Policy");
|
||||
log(body, "New Terms of Service");
|
||||
}
|
||||
get tosLoadOk() { return (globalConfig.TOS_URL && globalConfig.PRIV_URL); }
|
||||
|
||||
render() {
|
||||
if (!globalConfig.TOS_URL && !globalConfig.PRIV_URL) {
|
||||
return <div className="static-page">
|
||||
<div className="all-content-wrapper">
|
||||
<div className="row">
|
||||
<div className={`widget-wrapper col-md-6 col-md-offset-3
|
||||
col-sm-6 col-sm-offset-3`}>
|
||||
<div className="row">
|
||||
<div className="col-sm-12">
|
||||
<div className="widget-header">
|
||||
<h5>{t("Problem Loading Terms of Service")}</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<form onSubmit={this.submit}>
|
||||
<div className="col-sm-12">
|
||||
<div className="widget-body">
|
||||
<div className="input-group">
|
||||
<p>
|
||||
{t("Something went wrong while rendering this page.")}
|
||||
</p>
|
||||
<p>
|
||||
{t("Please send us an email at contact@farmbot.io or see")}
|
||||
<a href="http://forum.farmbot.org/">
|
||||
{t("the FarmBot forum.")}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
return <div className="static-page">
|
||||
<div className="all-content-wrapper">
|
||||
<div className="row">
|
||||
<div className={`widget-wrapper col-md-6 col-md-offset-3
|
||||
col-sm-6 col-sm-offset-3`}>
|
||||
<div className="row">
|
||||
<div className="col-sm-12">
|
||||
<div className="widget-header">
|
||||
<h5>{t("Agree to Terms of Service")}</h5>
|
||||
<i className="fa fa-gear" onClick={this.toggleServerOpts}>
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<form onSubmit={this.submit}>
|
||||
<div className="col-sm-12">
|
||||
<div className="widget-body">
|
||||
tosForm() {
|
||||
if (this.tosLoadOk) {
|
||||
return <form onSubmit={this.submit}>
|
||||
<div className="input-group">
|
||||
<label> {t("Email")} </label>
|
||||
<input type="email"
|
||||
|
@ -151,37 +94,67 @@ export class TosUpdate extends React.Component<Props, Partial<State>> {
|
|||
<input type="password"
|
||||
onChange={this.set("password").bind(this)}>
|
||||
</input>
|
||||
<hr />
|
||||
<ul>
|
||||
<li>
|
||||
<a href={globalConfig.TOS_URL}>
|
||||
{t("Terms of Service")}
|
||||
</a>
|
||||
<span className="fa fa-external-link"></span>
|
||||
<span className="fa fa-external-link" />
|
||||
</li>
|
||||
<li>
|
||||
<a href={globalConfig.PRIV_URL}>
|
||||
{t("Privacy Policy")}
|
||||
</a>
|
||||
<span className="fa fa-external-link">
|
||||
</span>
|
||||
<span className="fa fa-external-link" />
|
||||
</li>
|
||||
</ul>
|
||||
<div className="row">
|
||||
<div className="col-xs-12">
|
||||
<Row>
|
||||
<Col xs={12}>
|
||||
<button className="green fb-button">
|
||||
{t("I Agree to the Terms of Service")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
{this.serverOpts()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>;
|
||||
} else {
|
||||
return <div>
|
||||
<p>
|
||||
{t("Something went wrong while rendering this page.")}
|
||||
</p>
|
||||
<p>
|
||||
{t("Please send us an email at contact@farmbot.io or see the ")}
|
||||
<a href="http://forum.farmbot.org/">
|
||||
{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, "New Terms of Service");
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div className="static-page">
|
||||
<div className="all-content-wrapper">
|
||||
<Widget>
|
||||
<WidgetHeader title={
|
||||
this.tosLoadOk
|
||||
? "Agree to Terms of Service"
|
||||
: "Problem Loading Terms of Service"}>
|
||||
{this.tosLoadOk &&
|
||||
<i className="fa fa-gear" onClick={this.toggleServerOpts} />}
|
||||
</WidgetHeader>
|
||||
<WidgetBody>
|
||||
{this.tosForm()}
|
||||
</WidgetBody>
|
||||
</Widget>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue