spacecruft/Farmbot-Web-App
spacecruft/Farmbot-Web-App
1
0
Fork 0
Code Issues Pull requests Releases Activity

improve TOS page

Browse source
This commit is contained in:
gabrielburnworth 2017-12-20 14:17:41 -08:00
parent 35b5f5fed0
commit 094f3f8608
2 changed files with 79 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
webpack/css/static_pages.scss
View file

@ -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) {

159
webpack/tos_update/index.tsx
View file

@ -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,6 +80,59 @@ export class TosUpdate extends React.Component<Props, Partial<State>> {
}
}
get tosLoadOk() { return (globalConfig.TOS_URL && globalConfig.PRIV_URL); }
tosForm() {
if (this.tosLoadOk) {
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>
<ul>
<li>
<a href={globalConfig.TOS_URL}>
{t("Terms of Service")}
</a>
<span className="fa fa-external-link" />
</li>
<li>
<a href={globalConfig.PRIV_URL}>
{t("Privacy Policy")}
</a>
<span className="fa fa-external-link" />
</li>
</ul>
<Row>
<Col xs={12}>
<button className="green fb-button">
{t("I Agree to the Terms of Service")}
</button>
</Col>
</Row>
{this.serverOpts()}
</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" +
@ -87,101 +141,20 @@ export class TosUpdate extends React.Component<Props, Partial<State>> {
}
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">
<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>
<hr />
<ul>
<li>
<a href={globalConfig.TOS_URL}>
{t("Terms of Service")}
</a>
<span className="fa fa-external-link"></span>
</li>
<li>
<a href={globalConfig.PRIV_URL}>
{t("Privacy Policy")}
</a>
<span className="fa fa-external-link">
</span>
</li>
</ul>
<div className="row">
<div className="col-xs-12">
<button className="green fb-button">
{t("I Agree to the Terms of Service")}
</button>
</div>
</div>
{this.serverOpts()}
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<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>;
}