Gkey improved. New pages. Home improved based in startbootstrap
This commit is contained in:
vjrj
parent
6497278755
commit
b6b8f893e3
19 changed files with 782 additions and 269 deletions
|
|
@ -6,6 +6,10 @@
|
|||
<!-- FIXME integrate this better with meteor
|
||||
https://fezvrasta.github.io/bootstrap-material-design/docs/4.0/getting-started/introduction/ -->
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
|
||||
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
|
||||
|
||||
<!-- <link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.0.0-beta.4/dist/css/bootstrap-material-design.min.css" integrity="sha384-R80DC0KVBO4GSTw+wZ5x2zn2pu4POSErBkf8/fSFhPXHxvHJydT0CSgAP2Yo2r4I" crossorigin="anonymous"> -->
|
||||
<!-- <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
||||
<script src="https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script> -->
|
||||
|
|
|
|||
|
|
@ -1,47 +1,52 @@
|
|||
import React from 'react';
|
||||
import { Meteor } from 'meteor/meteor';
|
||||
import { ReactiveVar } from 'meteor/reactive-var';
|
||||
import i18n from 'i18next';
|
||||
|
||||
const gmapkey = new ReactiveVar();
|
||||
|
||||
Meteor.startup(function() {
|
||||
Meteor.call('getMapKey', function (error, key) {
|
||||
if (typeof key !== 'undefined') {
|
||||
// console.log(key);
|
||||
gmapkey.set(key);
|
||||
} else {
|
||||
callback(error, null)
|
||||
}
|
||||
})
|
||||
});
|
||||
import { Tracker } from 'meteor/tracker';
|
||||
|
||||
class GkeysC {
|
||||
constructor() {
|
||||
this.state = { init: false };
|
||||
this.gmapkey = new ReactiveVar(null);
|
||||
const self = this;
|
||||
this.callbacks = [];
|
||||
Meteor.startup(() => {
|
||||
Meteor.call('getMapKey', (error, key) => {
|
||||
const script = document.createElement('script');
|
||||
script.type = 'text/javascript';
|
||||
script.onload = () => {
|
||||
self.gmapkey.set(key);
|
||||
console.log('GMaps script just loaded');
|
||||
self.doCallbacks(key);
|
||||
};
|
||||
// https://stackoverflow.com/questions/28130114/google-maps-places-autocomplete-language-output
|
||||
script.src = `https://maps.googleapis.com/maps/api/js?key=${key}&libraries=places&language=${i18n.language}`;
|
||||
document.body.appendChild(script);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
doCallbacks(key) {
|
||||
for (let i = 0; i < this.callbacks.length; i += 1) {
|
||||
this.callbacks[i](null, key);
|
||||
}
|
||||
this.callbacks = [];
|
||||
}
|
||||
|
||||
load(callback) {
|
||||
if (this.state.init) {
|
||||
// already loaded
|
||||
callback(null, gmapkey.get());
|
||||
} else {
|
||||
this.state.init = true;
|
||||
Meteor.autorun(function() {
|
||||
var key = gmapkey.get();
|
||||
if (typeof key !== 'undefined') {
|
||||
var script = document.createElement('script');
|
||||
script.type = 'text/javascript';
|
||||
script.onload = function () {
|
||||
// console.log(key);
|
||||
callback(null, key);
|
||||
}.bind(this);
|
||||
// https://stackoverflow.com/questions/28130114/google-maps-places-autocomplete-language-output
|
||||
script.src = `https://maps.googleapis.com/maps/api/js?key=${key}&libraries=places&language=${i18n.language}`
|
||||
document.body.appendChild(script);
|
||||
}
|
||||
}.bind(this));
|
||||
}
|
||||
this.callbacks.push(callback);
|
||||
Tracker.autorun((computation) => {
|
||||
const key = this.gmapkey.get();
|
||||
if (key) {
|
||||
// already loaded
|
||||
console.log(`GMaps already loaded: ${key}`);
|
||||
this.doCallbacks(key);
|
||||
computation.stop();
|
||||
} else {
|
||||
console.log('Waiting for the gkey');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export let Gkeys = new GkeysC();
|
||||
const Gkeys = new GkeysC();
|
||||
|
||||
export default Gkeys;
|
||||
|
|
|
|||
|
|
@ -37,7 +37,8 @@ const cacheOptions = {
|
|||
i18nOpts.cache = cacheOptions;
|
||||
i18nOpts.detection = detectorOptions;
|
||||
i18nOpts.react = {
|
||||
wait: true
|
||||
wait: true,
|
||||
defaultTransParent: 'span'
|
||||
// https://react.i18next.com/components/i18next-instance.ht
|
||||
/* bindI18n: 'languageChanged loaded',
|
||||
bindStore: 'added removed',
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React from 'react';
|
|||
import PropTypes from 'prop-types';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import { LinkContainer } from 'react-router-bootstrap';
|
||||
import { Nav, NavDropdown } from 'react-bootstrap';
|
||||
/* import { Nav, NavDropdown } from 'react-bootstrap'; */
|
||||
import { translate, Trans } from 'react-i18next';
|
||||
/*
|
||||
FIXME:
|
||||
|
|
@ -13,26 +13,25 @@ import { translate, Trans } from 'react-i18next';
|
|||
*/
|
||||
import NavItem from '../NavItem/NavItem';
|
||||
|
||||
import { Meteor } from 'meteor/meteor';
|
||||
|
||||
const AuthenticatedNavigation = ({ name, history, props }) => (
|
||||
<ul className="navbar-nav ml-auto ">
|
||||
<ul className="navbar-nav">
|
||||
{/* <Nav pullRight> */}
|
||||
<LinkContainer className="nav-item" anchorClassName="nav-link" to="/documents">
|
||||
<NavItem eventKey={3} href="/documents">Documents</NavItem>
|
||||
<NavItem eventKey={5} href="/documents">Documents</NavItem>
|
||||
</LinkContainer>
|
||||
<LinkContainer className="nav-item" anchorClassName="nav-link" to="/profile">
|
||||
<NavItem eventKey={3.1} href="/profile">{name}</NavItem>
|
||||
<NavItem eventKey={5.1} href="/profile">{name}</NavItem>
|
||||
</LinkContainer>
|
||||
<LinkContainer className="nav-item" anchorClassName="nav-link" to="/logout">
|
||||
<NavItem eventKey={3.2} onClick={() => history.push('/logout')} href="/logout"><Trans i18nKey="Cerrar sesión">Cerrar sesión</Trans></NavItem>
|
||||
<NavItem eventKey={5.2} onClick={() => history.push('/logout')} href="/logout"><Trans i18nKey="Cerrar sesión">Cerrar sesión</Trans></NavItem>
|
||||
</LinkContainer>
|
||||
{/* </Nav> */}
|
||||
{/* </Nav> */}
|
||||
</ul>
|
||||
);
|
||||
|
||||
AuthenticatedNavigation.propTypes = {
|
||||
name: PropTypes.string.isRequired,
|
||||
|
||||
};
|
||||
|
||||
export default translate([], { wait: true })(withRouter(AuthenticatedNavigation));
|
||||
|
|
|
|||
|
|
@ -1,11 +1,8 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Trans, translate } from 'react-i18next';
|
||||
import Slider, { Range } from 'rc-slider';
|
||||
import Tooltip from 'rc-tooltip';
|
||||
// We can just import Slider or Range to reduce bundle size
|
||||
// import Slider from 'rc-slider/lib/Slider';
|
||||
// import Range from 'rc-slider/lib/Range';
|
||||
import Slider from 'rc-slider';
|
||||
import 'rc-slider/assets/index.css';
|
||||
|
||||
// https://www.npmjs.com/package/rc-slider
|
||||
|
|
@ -15,13 +12,7 @@ const Handle = Slider.Handle;
|
|||
const handle = (props) => {
|
||||
const { value, dragging, index, ...restProps } = props;
|
||||
return (
|
||||
<Tooltip
|
||||
prefixCls="rc-slider-tooltip"
|
||||
overlay={value}
|
||||
visible={dragging}
|
||||
placement="top"
|
||||
key={index}
|
||||
>
|
||||
<Tooltip prefixCls="rc-slider-tooltip" overlay={value} visible={dragging} placement="top" key={index} >
|
||||
<Handle value={value} {...restProps} />
|
||||
</Tooltip>
|
||||
);
|
||||
|
|
@ -35,26 +26,27 @@ class DistanceSlider extends React.Component {
|
|||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: 10,
|
||||
value: 10
|
||||
};
|
||||
this.onSliderChange = this.onSliderChange.bind(this);
|
||||
this.onAfterChange = this.onAfterChange.bind(this);
|
||||
}
|
||||
|
||||
onSliderChange = (value) => {
|
||||
onSliderChange(value) {
|
||||
// console.log(value);
|
||||
this.setState({
|
||||
value,
|
||||
value
|
||||
});
|
||||
this.props.onChange(value);
|
||||
}
|
||||
|
||||
onAfterChange = (value) => {
|
||||
onAfterChange(value) {
|
||||
// console.log(`After change: ${value}`); //eslint-disable-line
|
||||
this.props.onChange(value);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
|
||||
<div style={wrapperStyle}>
|
||||
<p><Trans parent="span">¿A que distancia a la redonda quieres recibir notificaciones?</Trans></p>
|
||||
<Slider min={5}
|
||||
|
|
@ -89,8 +81,16 @@ class DistanceSlider extends React.Component {
|
|||
step={5}
|
||||
handle={handle} />
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
DistanceSlider.defaultProps = {
|
||||
onChange: null
|
||||
};
|
||||
|
||||
DistanceSlider.propTypes = {
|
||||
onChange: PropTypes.func
|
||||
};
|
||||
|
||||
export default translate([], { wait: true })(DistanceSlider);
|
||||
|
|
|
|||
|
|
@ -2,9 +2,11 @@ import React from 'react';
|
|||
import PropTypes from 'prop-types';
|
||||
import { Navbar } from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { LinkContainer } from 'react-router-bootstrap';
|
||||
import { translate } from 'react-i18next';
|
||||
import PublicNavigation from '../PublicNavigation/PublicNavigation';
|
||||
import AuthenticatedNavigation from '../AuthenticatedNavigation/AuthenticatedNavigation';
|
||||
import { translate } from 'react-i18next';
|
||||
import NavItem from '../NavItem/NavItem';
|
||||
|
||||
import './Navigation.scss';
|
||||
|
||||
|
|
@ -27,6 +29,17 @@ const Navigation = props => (
|
|||
</button>
|
||||
{/* <Navbar.Collapse> */}
|
||||
<div className="collapse navbar-collapse" id="navbarNavDropdown">
|
||||
<ul className="navbar-nav ml-auto ">
|
||||
<LinkContainer className="nav-item" anchorClassName="nav-link" to="/sandbox">
|
||||
<NavItem eventKey={1.1} href="/sandbox">Sandbox</NavItem>
|
||||
</LinkContainer>
|
||||
<LinkContainer className="nav-item" anchorClassName="nav-link" to="/subscriptions">
|
||||
<NavItem eventKey={1.2} href="/subscriptions">Mis alertas</NavItem>
|
||||
</LinkContainer>
|
||||
<LinkContainer className="nav-item" anchorClassName="nav-link" to="/fires">
|
||||
<NavItem eventKey={2} href="/fires">{props.t('activeFires')}</NavItem>
|
||||
</LinkContainer>
|
||||
</ul>
|
||||
{!props.authenticated ? <PublicNavigation /> : <AuthenticatedNavigation {...props} />}
|
||||
{/* </Navbar.Collapse> */}
|
||||
</div>
|
||||
|
|
@ -35,13 +48,11 @@ const Navigation = props => (
|
|||
);
|
||||
|
||||
Navigation.defaultProps = {
|
||||
name: '',
|
||||
name: ''
|
||||
};
|
||||
|
||||
Navigation.propTypes = {
|
||||
authenticated: PropTypes.bool.isRequired
|
||||
};
|
||||
|
||||
// export default Navigation;
|
||||
|
||||
export default translate([], { wait: true })(Navigation);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { LinkContainer } from 'react-router-bootstrap';
|
||||
import { Nav } from 'react-bootstrap';
|
||||
/* import { Nav } from 'react-bootstrap'; */
|
||||
import { translate } from 'react-i18next';
|
||||
/*
|
||||
FIXME:
|
||||
|
|
@ -11,23 +12,21 @@ import { translate } from 'react-i18next';
|
|||
*/
|
||||
import NavItem from '../NavItem/NavItem';
|
||||
|
||||
const PublicNavigation = (props) => (
|
||||
<ul className="navbar-nav ml-auto ">
|
||||
{/* <Nav pullRight> */}
|
||||
<LinkContainer className="nav-item" anchorClassName="nav-link" to="/sandbox">
|
||||
<NavItem href="/sandbox">Sandbox</NavItem>
|
||||
</LinkContainer>
|
||||
<LinkContainer className="nav-item" anchorClassName="nav-link" to="/fires">
|
||||
<NavItem href="/fires">{props.t('activeFires')}</NavItem>
|
||||
</LinkContainer>
|
||||
const PublicNavigation = props => (
|
||||
<ul className="navbar-nav">
|
||||
{/* <Nav pullRight> */}
|
||||
<LinkContainer className="nav-item" anchorClassName="nav-link" to="/signup">
|
||||
<NavItem eventKey={1} href="/signup">{props.t('Registrarse')}</NavItem>
|
||||
<NavItem eventKey={3} href="/signup">{props.t('Registrarse')}</NavItem>
|
||||
</LinkContainer>
|
||||
<LinkContainer className="nav-item" anchorClassName="nav-link" to="/login">
|
||||
<NavItem eventKey={2} href="/login">{props.t('Iniciar sesión')}</NavItem>
|
||||
<NavItem eventKey={4} href="/login">{props.t('Iniciar sesión')}</NavItem>
|
||||
</LinkContainer>
|
||||
{/* </Nav> */}
|
||||
{/* </Nav> */}
|
||||
</ul>
|
||||
);
|
||||
|
||||
PublicNavigation.propTypes = {
|
||||
t: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default translate([], { wait: true })(PublicNavigation);
|
||||
|
|
|
|||
|
|
@ -1,26 +1,23 @@
|
|||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Map, TileLayer, Marker, Popup, CircleMarker, Circle} from 'react-leaflet';
|
||||
import { Map, TileLayer, Marker, CircleMarker, Circle } from 'react-leaflet';
|
||||
import Leaflet from 'leaflet';
|
||||
import { withTracker } from 'meteor/react-meteor-data';
|
||||
import { translate, Trans } from 'react-i18next';
|
||||
import { translate } from 'react-i18next';
|
||||
import geolocation from '/imports/startup/client/geolocation';
|
||||
import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css';
|
||||
import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js';
|
||||
import Control from 'react-leaflet-control';
|
||||
import { Button, ButtonToolbar } from 'react-bootstrap';
|
||||
import DistanceSlider from '/imports/ui/components/DistanceSlider/DistanceSlider';
|
||||
import CenterInMyPosition from '/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js';
|
||||
import './SelectionMap.scss';
|
||||
|
||||
const positionIcon = new Leaflet.Icon({
|
||||
iconUrl: "/your-position.png",
|
||||
iconUrl: '/your-position.png',
|
||||
/* shadowUrl: require('../public/marker-shadow.png'), */
|
||||
iconSize: [50, 77], // size of the icon
|
||||
iconSize: [50, 77], // size of the icon
|
||||
/* shadowSize: [50, 64], // size of the shadow */
|
||||
iconAnchor: [25, 82] // point of the icon which will correspond to marker's location
|
||||
iconAnchor: [25, 82] // point of the icon which will correspond to marker's location
|
||||
/* shadowAnchor: [4, 62], // the same for the shadow
|
||||
* popupAnchor: [-3, -76]// point from which the popup should open relative to the iconAnchor*/
|
||||
* popupAnchor: [-3, -76]// point from which the popup should open relative to the iconAnchor */
|
||||
});
|
||||
|
||||
class SelectionMap extends Component {
|
||||
|
|
@ -33,25 +30,35 @@ class SelectionMap extends Component {
|
|||
draggable: true,
|
||||
modified: false
|
||||
};
|
||||
// console.log(this.state);
|
||||
|
||||
this.getMap = this.getMap.bind(this);
|
||||
this.toggleDraggable = this.toggleDraggable.bind(this);
|
||||
this.updatePosition = this.updatePosition.bind(this);
|
||||
this.fit = this.fit.bind(this);
|
||||
this.addScale = this.addScale.bind(this);
|
||||
this.doSubs = this.doSubs.bind(this);
|
||||
}
|
||||
|
||||
componentDidUpdate = () => {
|
||||
componentDidMount() {
|
||||
this.addScale();
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
this.fit();
|
||||
}
|
||||
|
||||
getMap = () => {
|
||||
return this.refs.selectionMap.leafletElement;
|
||||
getMap() {
|
||||
return this.selectionMap.leafletElement;
|
||||
}
|
||||
|
||||
toggleDraggable = () => {
|
||||
toggleDraggable() {
|
||||
this.setState({ draggable: !this.state.draggable });
|
||||
}
|
||||
|
||||
updatePosition = () => {
|
||||
const { lat, lng } = this.refs.marker.leafletElement.getLatLng();
|
||||
updatePosition() {
|
||||
const { lat, lng } = this.marker.leafletElement.getLatLng();
|
||||
this.setState({
|
||||
marker: [ lat, lng ],
|
||||
marker: [lat, lng],
|
||||
modified: true
|
||||
});
|
||||
this.fit();
|
||||
|
|
@ -59,14 +66,10 @@ class SelectionMap extends Component {
|
|||
|
||||
fit() {
|
||||
// console.log("fit!");
|
||||
this.getMap().fitBounds(this.refs.distanceCircle.leafletElement.getBounds(), [70, 70]);
|
||||
this.getMap().fitBounds(this.distanceCircle.leafletElement.getBounds(), [70, 70]);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.addScale();
|
||||
}
|
||||
|
||||
addScale = () => {
|
||||
addScale() {
|
||||
// https://www.npmjs.com/package/leaflet-graphicscale
|
||||
const map = this.getMap();
|
||||
var options = {
|
||||
|
|
@ -76,12 +79,11 @@ class SelectionMap extends Component {
|
|||
var graphicScale = L.control.graphicScale([options]).addTo(map);
|
||||
}
|
||||
|
||||
doSubs = (event) => {
|
||||
console.log(event);
|
||||
}
|
||||
|
||||
centerOnUserLocation = (event) => {
|
||||
console.log(event);
|
||||
doSubs() { // event param not used
|
||||
this.props.history.push(
|
||||
'/login',
|
||||
{ subscription: { center: this.state.center, distance: this.state.distance } }
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
@ -94,7 +96,8 @@ class SelectionMap extends Component {
|
|||
return (
|
||||
<div>
|
||||
{ this.state && this.state.center &&
|
||||
<Map center={this.state.center} zoom={this.state.zoom} ref="selectionMap">
|
||||
<Map center={this.state.center} zoom={this.state.zoom}
|
||||
ref={(map) => { this.selectionMap = map; }}>
|
||||
<TileLayer
|
||||
attribution="&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors"
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
|
|
@ -105,7 +108,7 @@ class SelectionMap extends Component {
|
|||
position={this.state.marker}
|
||||
icon={positionIcon}
|
||||
title={this.props.t("Arrastrar para seleccionar otro punto")}
|
||||
ref="marker">
|
||||
ref={(ref) => { this.marker = ref; }}>
|
||||
</Marker>
|
||||
<CircleMarker
|
||||
center={this.state.marker} color="red"
|
||||
|
|
@ -114,12 +117,11 @@ class SelectionMap extends Component {
|
|||
fill={true}
|
||||
radius={3} />
|
||||
<Circle center={this.state.marker}
|
||||
ref="distanceCircle"
|
||||
ref={(ref) => { this.distanceCircle = ref; }}
|
||||
color="#145A32"
|
||||
fillColor="green"
|
||||
fillOpacity={.1}
|
||||
radius={this.state.distance * 1000} />
|
||||
|
||||
<Control position="topright" >
|
||||
<ButtonToolbar>
|
||||
<Button bsStyle="success" onClick={(event) => this.doSubs(event)}>
|
||||
|
|
@ -134,6 +136,7 @@ class SelectionMap extends Component {
|
|||
}
|
||||
|
||||
SelectionMap.propTypes = {
|
||||
history: PropTypes.object.isRequired,
|
||||
lat: PropTypes.number,
|
||||
lng: PropTypes.number,
|
||||
distance: PropTypes.number
|
||||
|
|
|
|||
|
|
@ -1,13 +1,25 @@
|
|||
/* eslint-disable jsx-a11y/no-href*/
|
||||
/* eslint-disable jsx-a11y/no-href */
|
||||
/* eslint import/no-absolute-path: [2, { esmodule: false, commonjs: false, amd: false }] */
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Router, Switch, Route } from 'react-router-dom';
|
||||
import { Grid, Alert, Button } from 'react-bootstrap';
|
||||
import createHistory from 'history/createBrowserHistory';
|
||||
import { Grid } from 'react-bootstrap';
|
||||
import { I18nextProvider } from 'react-i18next';
|
||||
import { Meteor } from 'meteor/meteor';
|
||||
import { createContainer } from 'meteor/react-meteor-data';
|
||||
import { withTracker } from 'meteor/react-meteor-data';
|
||||
import { Roles } from 'meteor/alanning:roles';
|
||||
import { Bert } from 'meteor/themeteorchef:bert';
|
||||
|
||||
// https://github.com/gadicc/meteor-blaze-react-component/
|
||||
import Blaze from 'meteor/gadicc:blaze-react-component';
|
||||
/* import Reconnect from '../../components/Reconnect/Reconnect'; */
|
||||
// i18n
|
||||
import i18n from '/imports/startup/client/i18n';
|
||||
import '/imports/startup/client/ravenLogger';
|
||||
import '/imports/startup/client/geolocation';
|
||||
import '/imports/startup/client/piwik-start.js';
|
||||
import 'simple-line-icons/css/simple-line-icons.css';
|
||||
import Navigation from '../../components/Navigation/Navigation';
|
||||
import Authenticated from '../../components/Authenticated/Authenticated';
|
||||
import Public from '../../components/Public/Public';
|
||||
|
|
@ -28,87 +40,78 @@ import Footer from '../../components/Footer/Footer';
|
|||
import Terms from '../../pages/Terms/Terms';
|
||||
import Privacy from '../../pages/Privacy/Privacy';
|
||||
import License from '../../pages/License/License';
|
||||
import FireSubscription from '../../pages/FireSubscription/FireSubscription';
|
||||
import ReSendEmail from '../../components/ReSendEmail/ReSendEmail';
|
||||
/* import Reconnect from '../../components/Reconnect/Reconnect';*/
|
||||
// i18n
|
||||
import { I18nextProvider } from 'react-i18next';
|
||||
import i18n from '/imports/startup/client/i18n';
|
||||
import '/imports/startup/client/piwik-start.js';
|
||||
import ravenLogger from '/imports/startup/client/ravenLogger';
|
||||
import geolocation from '/imports/startup/client/geolocation';
|
||||
// https://github.com/gadicc/meteor-blaze-react-component/
|
||||
import Blaze from 'meteor/gadicc:blaze-react-component';
|
||||
import createHistory from 'history/createBrowserHistory';
|
||||
import { check } from 'meteor/check';
|
||||
import FiresMap from '../../pages/FiresMap/FiresMap';
|
||||
import Sandbox from '../../pages/Sandbox/Sandbox';
|
||||
|
||||
import 'simple-line-icons/css/simple-line-icons.css';
|
||||
import FiresMap from '../../pages/FiresMap/FiresMap';
|
||||
import Sandbox from '../../pages/Sandbox/Sandbox';
|
||||
import './App.scss';
|
||||
|
||||
const history = createHistory()
|
||||
history.listen((location, action) => {
|
||||
const history = createHistory();
|
||||
history.listen((location) => { // , action ) => {
|
||||
// console.log(location.pathname);
|
||||
// console.log(action); // PUSH, etc
|
||||
Meteor.Piwik.trackPage(location.pathname);
|
||||
});
|
||||
|
||||
const App = props => (
|
||||
/* https://react.i18next.com/components/i18nextprovider.html */
|
||||
<I18nextProvider i18n={i18n}>
|
||||
<Router history={history}>
|
||||
{!props.loading ? <div className="App">
|
||||
<Navigation {...props} />
|
||||
<ReSendEmail {...props} />
|
||||
<Grid> {/* bsClass="previously-container-but-disabled" > */}
|
||||
<Switch>
|
||||
<Route exact name="index" path="/" component={Index} />
|
||||
<Authenticated exact path="/documents" component={Documents} {...props} />
|
||||
<Authenticated exact path="/documents/new" component={NewDocument} {...props} />
|
||||
<Authenticated exact path="/documents/:_id" component={ViewDocument} {...props} />
|
||||
<Authenticated exact path="/documents/:_id/edit" component={EditDocument} {...props} />
|
||||
<Authenticated exact path="/profile" component={Profile} {...props} />
|
||||
<Route path="/fires" component={FiresMap} {...props} />
|
||||
<Public path="/signup" component={Signup} {...props} />
|
||||
<Public path="/login" component={Login} {...props} />
|
||||
<Route path="/logout" component={Logout} {...props} />
|
||||
<Route path="/sandbox" component={Sandbox} {...props} />
|
||||
<Route name="verify-email" path="/verify-email/:token" component={VerifyEmail} />
|
||||
<Route name="recover-password" path="/recover-password" component={RecoverPassword} />
|
||||
<Route name="reset-password" path="/reset-password/:token" component={ResetPassword} />
|
||||
<Route name="terms" path="/terms" component={Terms} />
|
||||
<Route name="privacy" path="/privacy" component={Privacy} />
|
||||
<Route name="license" path="/license" component={License} />
|
||||
<Route component={NotFound} />
|
||||
</Switch>
|
||||
</Grid>
|
||||
<Footer />
|
||||
<Router history={history}>
|
||||
{ !props.loading ?
|
||||
<div className="App">
|
||||
<Navigation {...props} />
|
||||
<ReSendEmail {...props} />
|
||||
<Grid> {/* bsClass="previously-container-but-disabled" > */}
|
||||
<Switch>
|
||||
<Route exact name="index" path="/" component={Index} />
|
||||
<Authenticated exact path="/documents" component={Documents} {...props} />
|
||||
<Authenticated exact path="/documents/new" component={NewDocument} {...props} />
|
||||
<Authenticated exact path="/documents/:_id" component={ViewDocument} {...props} />
|
||||
<Authenticated exact path="/documents/:_id/edit" component={EditDocument} {...props} />
|
||||
<Authenticated exact path="/profile" component={Profile} {...props} />
|
||||
<Route path="/fires" component={FiresMap} {...props} />
|
||||
<Public path="/signup" component={Signup} {...props} />
|
||||
<Public path="/login" component={Login} {...props} />
|
||||
<Route path="/logout" component={Logout} {...props} />
|
||||
<Route path="/sandbox" component={Sandbox} {...props} />
|
||||
<Public path="/subscriptions" component={FireSubscription} {...props} />
|
||||
<Route name="verify-email" path="/verify-email/:token" component={VerifyEmail} />
|
||||
<Route name="recover-password" path="/recover-password" component={RecoverPassword} />
|
||||
<Route name="reset-password" path="/reset-password/:token" component={ResetPassword} />
|
||||
<Route name="terms" path="/terms" component={Terms} />
|
||||
<Route name="privacy" path="/privacy" component={Privacy} />
|
||||
<Route name="license" path="/license" component={License} />
|
||||
<Route component={NotFound} />
|
||||
</Switch>
|
||||
</Grid>
|
||||
<Footer />
|
||||
|
||||
{/* <Reconnect /> */}
|
||||
<Blaze template="cookieConsent" />
|
||||
{/* <Blaze template="cookieConsentImply" /> */}
|
||||
</div> : ''}
|
||||
</Router>
|
||||
{/* <Reconnect /> */}
|
||||
<Blaze template="cookieConsent" />
|
||||
{/* <Blaze template="cookieConsentImply" /> */}
|
||||
</div> : ''}
|
||||
</Router>
|
||||
</I18nextProvider>
|
||||
);
|
||||
|
||||
App.defaultProps = {
|
||||
userId: '',
|
||||
emailAddress: '',
|
||||
emailAddress: ''
|
||||
};
|
||||
|
||||
App.propTypes = {
|
||||
loading: PropTypes.bool.isRequired,
|
||||
userId: PropTypes.string,
|
||||
emailAddress: PropTypes.string,
|
||||
emailVerified: PropTypes.bool.isRequired,
|
||||
emailVerified: PropTypes.bool.isRequired
|
||||
};
|
||||
|
||||
const getUserName = name => ({
|
||||
string: name,
|
||||
object: `${name.first} ${name.last}`,
|
||||
object: `${name.first} ${name.last}`
|
||||
}[typeof name]);
|
||||
|
||||
export default createContainer(() => {
|
||||
export default withTracker(() => {
|
||||
const loggingIn = Meteor.loggingIn();
|
||||
const user = Meteor.user();
|
||||
const userId = Meteor.userId();
|
||||
|
|
@ -124,6 +127,6 @@ export default createContainer(() => {
|
|||
roles: !loading && Roles.getRolesForUser(userId),
|
||||
userId,
|
||||
emailAddress,
|
||||
emailVerified: user && user.emails ? user && user.emails && user.emails[0].verified : true,
|
||||
emailVerified: user && user.emails ? user && user.emails && user.emails[0].verified : true
|
||||
};
|
||||
}, App);
|
||||
})(App);
|
||||
|
|
|
|||
|
|
@ -5,8 +5,7 @@ import { Trans, translate } from 'react-i18next';
|
|||
import DistanceSlider from '/imports/ui/components/DistanceSlider/DistanceSlider';
|
||||
import SelectionMap from '/imports/ui/components/SelectionMap/SelectionMap';
|
||||
import update from 'immutability-helper';
|
||||
import { withTracker } from 'meteor/react-meteor-data';
|
||||
import { Gkeys } from '/imports/startup/client/Gkeys';
|
||||
import Gkeys from '/imports/startup/client/Gkeys';
|
||||
import SubsAutocomplete from './SubsAutocomplete';
|
||||
import CenterInMyPosition from '/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js';
|
||||
|
||||
|
|
@ -16,23 +15,24 @@ class FireSubscription extends React.Component {
|
|||
this.state = {
|
||||
init: false
|
||||
};
|
||||
// console.log(this.props.location.state);
|
||||
}
|
||||
|
||||
componentDidMount = () => {
|
||||
Gkeys.load(function(err, key) {
|
||||
this.setState({init: true});
|
||||
Gkeys.load(function (err, key) {
|
||||
this.setState({ init: true });
|
||||
}.bind(this));
|
||||
}
|
||||
|
||||
centerOnUserLocation = (value) => {
|
||||
centerOnUserLocation(value) {
|
||||
this.setState(update(this.state, {$merge: {lat: value.center[0], lng: value.center[1]}}));
|
||||
}
|
||||
|
||||
onAutocompleteChange = (value) => {
|
||||
onAutocompleteChange(value) {
|
||||
this.setState(update(this.state, {$merge: {lat: value.lat, lng: value.lng}}));
|
||||
}
|
||||
|
||||
onSliderChange = (value) => {
|
||||
onSliderChange(value) {
|
||||
this.setState(update(this.state, {$merge: {distance: value}}));
|
||||
}
|
||||
|
||||
|
|
@ -42,14 +42,15 @@ class FireSubscription extends React.Component {
|
|||
|
||||
if (!this.state.init) {
|
||||
return <div/>
|
||||
} else
|
||||
return (
|
||||
<div>
|
||||
<Row>
|
||||
} else {
|
||||
return (
|
||||
<div>
|
||||
<Row>
|
||||
<Col xs={12} sm={12} md={6} lg={6} >
|
||||
<div>
|
||||
<h4 className="page-header"><Trans parent="span">Suscríbete a alertas de fuegos</Trans></h4>
|
||||
<SubsAutocomplete onChange={(value) => this.onAutocompleteChange(value)}/>
|
||||
<SubsAutocomplete
|
||||
onChange={ (value) => this.onAutocompleteChange(value) }/>
|
||||
</div>
|
||||
</Col>
|
||||
<Col xs={12} sm={12} md={6} lg={6} >
|
||||
|
|
@ -60,11 +61,21 @@ class FireSubscription extends React.Component {
|
|||
</Col>
|
||||
</Row>
|
||||
<Row className="align-items-center justify-content-center">
|
||||
<SelectionMap lat={this.state.lat} lng={this.state.lng} distance={this.state.distance || 10} />
|
||||
<SelectionMap
|
||||
lat={this.state.lat}
|
||||
lng={this.state.lng}
|
||||
distance={this.state.distance || 10}
|
||||
history={this.props.history}
|
||||
/>
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default translate([], { wait: true }) (FireSubscription);
|
||||
FireSubscription.propTypes = {
|
||||
history: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
export default translate([], { wait: true })(FireSubscription);
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ const fireIcon = new Leaflet.Icon({
|
|||
iconAnchor: [8, 26] // point of the icon which will correspond to marker's location
|
||||
/* shadowAnchor: [4, 62], // the same for the shadow
|
||||
* popupAnchor: [-3, -76]// point from which the popup should open relative to the iconAnchor*/
|
||||
})
|
||||
});
|
||||
|
||||
const nFireIcon = new Leaflet.Icon({
|
||||
iconUrl: "/n-fire-marker.png",
|
||||
|
|
@ -49,7 +49,7 @@ const nFireIcon = new Leaflet.Icon({
|
|||
iconAnchor: [8, 26] // point of the icon which will correspond to marker's location
|
||||
/* shadowAnchor: [4, 62], // the same for the shadow
|
||||
* popupAnchor: [-3, -76]// point from which the popup should open relative to the iconAnchor*/
|
||||
})
|
||||
});
|
||||
|
||||
// http://leafletjs.com/reference-1.2.0.html#icon
|
||||
const MyPopupMarker = ({ children, lat, lon, nasa}) => (
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
import React, {Component} from 'react';
|
||||
import { Button } from 'react-bootstrap';
|
||||
import { translate } from 'react-i18next';
|
||||
import { translate, Trans } from 'react-i18next';
|
||||
import {render} from 'react-dom';
|
||||
import { Link } from 'react-router-dom';
|
||||
// https://www.npmjs.com/package/react-resize-detector
|
||||
import ReactResizeDetector from 'react-resize-detector';
|
||||
import FiresMap from '../FiresMap/FiresMap';
|
||||
import FireSubscription from '/imports/ui/pages/FireSubscription/FireSubscription';
|
||||
import './new-age.js';
|
||||
|
||||
import './Index.scss';
|
||||
import './Index-custom.scss';
|
||||
|
|
@ -121,6 +123,125 @@ class Index extends Component {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section className="download bg-primary text-center" id="download">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-md-8 mx-auto">
|
||||
<h2 className="section-heading">Discover what all the buzz is about!</h2>
|
||||
<p>Our app is available on any mobile device! Download now to get started!</p>
|
||||
<div className="badges">
|
||||
<a className="badge-link" href="#"><img src="img/google-play-badge.svg" alt=""/></a>
|
||||
<a className="badge-link" href="#"><img src="img/app-store-badge.svg" alt=""/></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="features" id="features">
|
||||
<div className="container">
|
||||
<div className="section-heading text-center">
|
||||
<h2>Unlimited Features, Unlimited Fun</h2>
|
||||
<p className="text-muted">Check out what you can do with this app theme!</p>
|
||||
<hr/>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-4 my-auto">
|
||||
<div className="device-container">
|
||||
<div className="device-mockup iphone6_plus portrait white">
|
||||
<div className="device">
|
||||
<div className="screen">
|
||||
{/* Demo image for screen mockup, you can put an image here, some HTML, an animation, video, or anything else! */}
|
||||
<img src="img/demo-screen-1.jpg" className="img-fluid" alt=""/>
|
||||
</div>
|
||||
<div className="button">
|
||||
{/* You can hook the "home button" to some JavaScript events or just remove it */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-8 my-auto">
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<div className="feature-item">
|
||||
<i className="fa fa-telegram text-primary"></i>
|
||||
<h3>Telegram</h3>
|
||||
<p className="text-muted"><Trans>Usa nuestro bot de Telegram</Trans></p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="feature-item">
|
||||
<i className="icon-envelope-open text-primary"></i>
|
||||
<h3><Trans>Correo electronico</Trans></h3>
|
||||
<p className="text-muted"><Trans>Recibe nuestras notificaciones de fuegos por correo</Trans></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<div className="feature-item">
|
||||
<i className="icon-lock-open text-primary"></i>
|
||||
<h3>Open Source</h3>
|
||||
<p className="text-muted">Since this theme is MIT licensed, you can use it commercially!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="feature-item">
|
||||
<i className="icon-screen-smartphone text-primary"></i>
|
||||
<h3>Device Mockups</h3>
|
||||
<p className="text-muted">Ready to use HTML/CSS device mockups, no Photoshop required!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="cta">
|
||||
<div className="cta-content">
|
||||
<div className="container">
|
||||
<h2>Stop waiting.<br/>Start building.</h2>
|
||||
<a href="#contact" className="btn btn-outline btn-xl js-scroll-trigger">Let's Get Started!</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="overlay"></div>
|
||||
</section>
|
||||
|
||||
<section className="contact bg-primary" id="contact">
|
||||
<div className="container">
|
||||
<h2>We
|
||||
<i className="fa fa-heart"></i>
|
||||
new friends!</h2>
|
||||
<ul className="list-inline list-social">
|
||||
<li className="list-inline-item social-twitter">
|
||||
<a href="#">
|
||||
<i className="fa fa-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
{/* <li className="list-inline-item social-facebook">
|
||||
<a href="#">
|
||||
<i className="fa fa-facebook"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li className="list-inline-item social-google-plus">
|
||||
<a href="#">
|
||||
<i className="fa fa-google-plus"></i>
|
||||
</a>
|
||||
</li> */}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-5">
|
||||
<div className="container">
|
||||
<FireSubscription history={this.props.history} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-5">
|
||||
<div className="container">
|
||||
<FiresMap />
|
||||
|
|
|
|||
42
imports/ui/pages/Index/new-age.js
Normal file
42
imports/ui/pages/Index/new-age.js
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
(function($) {
|
||||
"use strict"; // Start of use strict
|
||||
|
||||
// Smooth scrolling using jQuery easing
|
||||
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
|
||||
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
|
||||
var target = $(this.hash);
|
||||
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
|
||||
if (target.length) {
|
||||
$('html, body').animate({
|
||||
scrollTop: (target.offset().top - 48)
|
||||
}, 1000, "easeInOutExpo");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Closes responsive menu when a scroll trigger link is clicked
|
||||
$('.js-scroll-trigger').click(function() {
|
||||
$('.navbar-collapse').collapse('hide');
|
||||
});
|
||||
|
||||
// Activate scrollspy to add active class to navbar items on scroll
|
||||
$('body').scrollspy({
|
||||
target: '#mainNav',
|
||||
offset: 54
|
||||
});
|
||||
|
||||
// Collapse Navbar
|
||||
/* var navbarCollapse = function() {
|
||||
* if ($("#mainNav").offset().top > 100) {
|
||||
* $("#mainNav").addClass("navbar-shrink");
|
||||
* } else {
|
||||
* $("#mainNav").removeClass("navbar-shrink");
|
||||
* }
|
||||
* };
|
||||
* // Collapse now if page is not at top
|
||||
* navbarCollapse();
|
||||
* // Collapse the navbar when page is scrolled
|
||||
* $(window).scroll(navbarCollapse); */
|
||||
|
||||
})(jQuery); // End of use strict
|
||||
|
|
@ -1,21 +1,22 @@
|
|||
import React from 'react';
|
||||
import { Row, FormGroup, ControlLabel, Button } from 'react-bootstrap';
|
||||
import Col from '../../components/Col/Col';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Row, FormGroup, ControlLabel, Button } from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Meteor } from 'meteor/meteor';
|
||||
import { Bert } from 'meteor/themeteorchef:bert';
|
||||
import { translate } from 'react-i18next';
|
||||
import { T9n } from 'meteor-accounts-t9n';
|
||||
import Col from '../../components/Col/Col';
|
||||
import OAuthLoginButtons from '../../components/OAuthLoginButtons/OAuthLoginButtons';
|
||||
import AccountPageFooter from '../../components/AccountPageFooter/AccountPageFooter';
|
||||
import validate from '../../../modules/validate';
|
||||
import { translate } from 'react-i18next';
|
||||
import { T9n } from 'meteor-accounts-t9n';
|
||||
|
||||
class Login extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.t = props.t;
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
console.log(this.props.location.state);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
|
@ -25,26 +26,26 @@ class Login extends React.Component {
|
|||
rules: {
|
||||
emailAddress: {
|
||||
required: true,
|
||||
email: true,
|
||||
email: true
|
||||
},
|
||||
password: {
|
||||
required: true,
|
||||
},
|
||||
required: true
|
||||
}
|
||||
},
|
||||
messages: {
|
||||
emailAddress: {
|
||||
required: this.t("Necesitamos un correo aquí."),
|
||||
email: this.t("¿Es este correo correcto?"),
|
||||
required: this.t('Necesitamos un correo aquí.'),
|
||||
email: this.t('¿Es este correo correcto?')
|
||||
},
|
||||
password: {
|
||||
required: this.t("Necesitamos una contraseña aquí."),
|
||||
},
|
||||
required: this.t('Necesitamos una contraseña aquí.')
|
||||
}
|
||||
},
|
||||
submitHandler() { component.handleSubmit(); },
|
||||
submitHandler() { component.handleSubmit(); }
|
||||
});
|
||||
}
|
||||
|
||||
handleSubmit() {
|
||||
handleSubmit = () => {
|
||||
const { history } = this.props;
|
||||
|
||||
Meteor.loginWithPassword(this.emailAddress.value, this.password.value, (error) => {
|
||||
|
|
@ -52,61 +53,69 @@ class Login extends React.Component {
|
|||
Bert.alert(T9n.get(`error.accounts.${error.reason}`), 'danger');
|
||||
} else {
|
||||
Bert.alert(this.t('Bienvenid@ de nuevo'), 'success');
|
||||
console.log(this.props.location.state);
|
||||
if (this.props.location.state &&
|
||||
this.props.location.state.center &&
|
||||
this.props.location.state.distance) {
|
||||
this.props.history.push('/subscriptions', this.props.location.state);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (<div className="Login">
|
||||
<Row className="align-items-center justify-content-center">
|
||||
<Col xs={12} sm={6} md={5} lg={4}>
|
||||
<h4 className="page-header">{this.t("Iniciar sesión")}</h4>
|
||||
<Row>
|
||||
<Col xs={12}>
|
||||
<OAuthLoginButtons
|
||||
services={['google']}
|
||||
emailMessage={{
|
||||
offset: 100,
|
||||
text: this.t('o inicia sesión con un correo'),
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<form ref={form => (this.form = form)} onSubmit={event => event.preventDefault()}>
|
||||
<FormGroup>
|
||||
<ControlLabel>{this.t("Correo electrónico")}</ControlLabel>
|
||||
<input
|
||||
type="email"
|
||||
name="emailAddress"
|
||||
ref={emailAddress => (this.emailAddress = emailAddress)}
|
||||
className="form-control"
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<ControlLabel className="clearfix">
|
||||
<span className="pull-left">{this.t("Contraseña")}</span>
|
||||
<Link className="pull-right" to="/recover-password">{this.t("¿Olvidaste tu contraseña?")}</Link>
|
||||
</ControlLabel>
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
ref={password => (this.password = password)}
|
||||
className="form-control"
|
||||
/>
|
||||
</FormGroup>
|
||||
<Button type="submit" bsStyle="success">{this.t("Iniciar sesión")}</Button>
|
||||
<AccountPageFooter>
|
||||
<p>{this.t("¿No tienes una cuenta?")} <Link to="/signup">{this.t("Regístrate")}</Link>.</p>
|
||||
</AccountPageFooter>
|
||||
</form>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>);
|
||||
return (
|
||||
<div className="Login">
|
||||
<Row className="align-items-center justify-content-center">
|
||||
<Col xs={12} sm={6} md={5} lg={4}>
|
||||
<h4 className="page-header">{this.t('Iniciar sesión')}</h4>
|
||||
<Row>
|
||||
<Col xs={12}>
|
||||
<OAuthLoginButtons
|
||||
services={['google']}
|
||||
emailMessage={{
|
||||
offset: 100,
|
||||
text: this.t('o inicia sesión con un correo')
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<form ref={form => (this.form = form)} onSubmit={event => event.preventDefault()}>
|
||||
<FormGroup>
|
||||
<ControlLabel>{this.t('Correo electrónico')}</ControlLabel>
|
||||
<input
|
||||
type="email"
|
||||
name="emailAddress"
|
||||
ref={emailAddress => (this.emailAddress = emailAddress)}
|
||||
className="form-control"
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<ControlLabel className="clearfix">
|
||||
<span className="pull-left">{this.t('Contraseña')}</span>
|
||||
<Link className="pull-right" to="/recover-password">{this.t('¿Olvidaste tu contraseña?')}</Link>
|
||||
</ControlLabel>
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
ref={password => (this.password = password)}
|
||||
className="form-control"
|
||||
/>
|
||||
</FormGroup>
|
||||
<Button type="submit" bsStyle="success">{this.t('Iniciar sesión')}</Button>
|
||||
<AccountPageFooter>
|
||||
<p>{this.t('¿No tienes una cuenta?')} <Link to="/signup">{this.t('Regístrate')}</Link>.</p>
|
||||
</AccountPageFooter>
|
||||
</form>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>);
|
||||
}
|
||||
}
|
||||
|
||||
Login.propTypes = {
|
||||
history: PropTypes.object.isRequired,
|
||||
t: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default translate([], { wait: true })(Login);
|
||||
|
|
|
|||
|
|
@ -1,33 +1,28 @@
|
|||
import React from 'react';
|
||||
import { Trans, translate } from 'react-i18next';
|
||||
import DistanceSlider from '/imports/ui/components/DistanceSlider/DistanceSlider';
|
||||
import SelectionMap from '/imports/ui/components/SelectionMap/SelectionMap';
|
||||
import update from 'immutability-helper';
|
||||
import { Gkeys } from '/imports/startup/client/Gkeys';
|
||||
import FireSubscription from '/imports/ui/pages/FireSubscription/FireSubscription';
|
||||
// import PropTypes from 'prop-types';
|
||||
import { translate } from 'react-i18next';
|
||||
|
||||
class Sandbox extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
init: false
|
||||
};
|
||||
/* this.state = {
|
||||
* init: false
|
||||
* }; */
|
||||
}
|
||||
|
||||
componentDidMount = () => {
|
||||
this.setState({init: true});
|
||||
Gkeys.load(function(err, key) {
|
||||
console.log(key);
|
||||
}.bind(this));
|
||||
componentDidMount() {
|
||||
// this.setState({init: true});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<FireSubscription />
|
||||
</div>
|
||||
<div></div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Sandbox.propTypes = {
|
||||
// history: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
export default translate([], { wait: true }) (Sandbox);
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ import OAuthLoginButtons from '../../components/OAuthLoginButtons/OAuthLoginButt
|
|||
import InputHint from '../../components/InputHint/InputHint';
|
||||
import AccountPageFooter from '../../components/AccountPageFooter/AccountPageFooter';
|
||||
import validate from '../../../modules/validate';
|
||||
import Icon from '../../components/Icon/Icon';
|
||||
import './Signup.scss';
|
||||
import { translate } from 'react-i18next';
|
||||
import { T9n } from 'meteor-accounts-t9n';
|
||||
|
|
@ -164,7 +163,7 @@ class Signup extends React.Component {
|
|||
}
|
||||
|
||||
Signup.propTypes = {
|
||||
history: PropTypes.object.isRequired,
|
||||
history: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
export default translate([], { wait: true })(Signup)
|
||||
export default translate([], { wait: true })(Signup);
|
||||
|
|
|
|||
|
|
@ -3,3 +3,4 @@
|
|||
@import './bootstrap-overrides';
|
||||
@import './custom';
|
||||
@import './cookies-eu';
|
||||
@import './new-age';
|
||||
|
|
|
|||
311
imports/ui/stylesheets/new-age.scss
Normal file
311
imports/ui/stylesheets/new-age.scss
Normal file
|
|
@ -0,0 +1,311 @@
|
|||
/*!
|
||||
* Start Bootstrap - New Age v4.0.0-beta.2 (https://startbootstrap.com/template-overviews/new-age)
|
||||
* Copyright 2013-2017 Start Bootstrap
|
||||
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-new-age/blob/master/LICENSE)
|
||||
*/
|
||||
|
||||
/* html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%; } */
|
||||
|
||||
body {
|
||||
font-family: 'Muli', 'Helvetica', 'Arial', 'sans-serif';
|
||||
}
|
||||
|
||||
a {
|
||||
color: #fdcc52;
|
||||
-webkit-transition: all .35s;
|
||||
-moz-transition: all .35s;
|
||||
transition: all .35s; }
|
||||
|
||||
a:hover, a:focus {
|
||||
color: #fcbd20; }
|
||||
|
||||
hr {
|
||||
max-width: 100px;
|
||||
margin: 25px auto 0;
|
||||
border-width: 1px;
|
||||
border-color: rgba(34, 34, 34, 0.1); }
|
||||
|
||||
hr.light {
|
||||
border-color: white; }
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif';
|
||||
font-weight: 200;
|
||||
letter-spacing: 1px; }
|
||||
|
||||
p {
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 20px; }
|
||||
|
||||
section {
|
||||
padding: 100px 0; }
|
||||
section h2 {
|
||||
font-size: 50px; }
|
||||
|
||||
#mainNav {
|
||||
border-color: rgba(34, 34, 34, 0.05);
|
||||
background-color: white;
|
||||
-webkit-transition: all .35s;
|
||||
-moz-transition: all .35s;
|
||||
transition: all .35s;
|
||||
font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif';
|
||||
font-weight: 200;
|
||||
letter-spacing: 1px; }
|
||||
#mainNav .navbar-brand {
|
||||
color: #fdcc52;
|
||||
font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif';
|
||||
font-weight: 200;
|
||||
letter-spacing: 1px; }
|
||||
#mainNav .navbar-brand:hover, #mainNav .navbar-brand:focus {
|
||||
color: #fcbd20; }
|
||||
#mainNav .navbar-toggler {
|
||||
font-size: 12px;
|
||||
padding: 8px 10px;
|
||||
color: #222222; }
|
||||
#mainNav .navbar-nav > li > a {
|
||||
font-size: 11px;
|
||||
font-family: 'Lato', 'Helvetica', 'Arial', 'sans-serif';
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase; }
|
||||
#mainNav .navbar-nav > li > a.active {
|
||||
color: #fdcc52 !important;
|
||||
background-color: transparent; }
|
||||
#mainNav .navbar-nav > li > a.active:hover {
|
||||
background-color: transparent; }
|
||||
#mainNav .navbar-nav > li > a,
|
||||
#mainNav .navbar-nav > li > a:focus {
|
||||
color: #222222; }
|
||||
#mainNav .navbar-nav > li > a:hover,
|
||||
#mainNav .navbar-nav > li > a:focus:hover {
|
||||
color: #fdcc52; }
|
||||
@media (min-width: 992px) {
|
||||
#mainNav {
|
||||
border-color: transparent;
|
||||
background-color: transparent; }
|
||||
#mainNav .navbar-brand {
|
||||
color: fade(white, 70%); }
|
||||
#mainNav .navbar-brand:hover, #mainNav .navbar-brand:focus {
|
||||
color: white; }
|
||||
#mainNav .navbar-nav > li > a,
|
||||
#mainNav .navbar-nav > li > a:focus {
|
||||
color: rgba(255, 255, 255, 0.7); }
|
||||
#mainNav .navbar-nav > li > a:hover,
|
||||
#mainNav .navbar-nav > li > a:focus:hover {
|
||||
color: white; }
|
||||
#mainNav.navbar-shrink {
|
||||
border-color: rgba(34, 34, 34, 0.1);
|
||||
background-color: white; }
|
||||
#mainNav.navbar-shrink .navbar-brand {
|
||||
color: #222222; }
|
||||
#mainNav.navbar-shrink .navbar-brand:hover, #mainNav.navbar-shrink .navbar-brand:focus {
|
||||
color: #fdcc52; }
|
||||
#mainNav.navbar-shrink .navbar-nav > li > a,
|
||||
#mainNav.navbar-shrink .navbar-nav > li > a:focus {
|
||||
color: #222222; }
|
||||
#mainNav.navbar-shrink .navbar-nav > li > a:hover,
|
||||
#mainNav.navbar-shrink .navbar-nav > li > a:focus:hover {
|
||||
color: #fdcc52; } }
|
||||
|
||||
header.masthead {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 150px;
|
||||
padding-bottom: 100px;
|
||||
color: white;
|
||||
background: url("../img/bg-pattern.png"), #7b4397;
|
||||
background: url("../img/bg-pattern.png"), -webkit-linear-gradient(to left, #7b4397, #dc2430);
|
||||
background: url("../img/bg-pattern.png"), linear-gradient(to left, #7b4397, #dc2430); }
|
||||
header.masthead .header-content {
|
||||
max-width: 500px;
|
||||
margin-bottom: 100px;
|
||||
text-align: center; }
|
||||
header.masthead .header-content h1 {
|
||||
font-size: 30px; }
|
||||
header.masthead .device-container {
|
||||
max-width: 325px;
|
||||
margin-right: auto;
|
||||
margin-left: auto; }
|
||||
header.masthead .device-container .screen img {
|
||||
border-radius: 3px; }
|
||||
@media (min-width: 992px) {
|
||||
header.masthead {
|
||||
height: 100vh;
|
||||
min-height: 775px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0; }
|
||||
header.masthead .header-content {
|
||||
margin-bottom: 0;
|
||||
text-align: left; }
|
||||
header.masthead .header-content h1 {
|
||||
font-size: 50px; }
|
||||
header.masthead .device-container {
|
||||
max-width: 325px; } }
|
||||
|
||||
section.download {
|
||||
position: relative;
|
||||
padding: 150px 0; }
|
||||
section.download h2 {
|
||||
font-size: 50px;
|
||||
margin-top: 0; }
|
||||
section.download .badges .badge-link {
|
||||
display: block;
|
||||
margin-bottom: 25px; }
|
||||
section.download .badges .badge-link:last-child {
|
||||
margin-bottom: 0; }
|
||||
section.download .badges .badge-link img {
|
||||
height: 60px; }
|
||||
@media (min-width: 768px) {
|
||||
section.download .badges .badge-link {
|
||||
display: inline-block;
|
||||
margin-bottom: 0; } }
|
||||
@media (min-width: 768px) {
|
||||
section.download h2 {
|
||||
font-size: 70px; } }
|
||||
|
||||
section.features .section-heading {
|
||||
margin-bottom: 100px; }
|
||||
section.features .section-heading h2 {
|
||||
margin-top: 0; }
|
||||
section.features .section-heading p {
|
||||
margin-bottom: 0; }
|
||||
|
||||
section.features .device-container,
|
||||
section.features .feature-item {
|
||||
max-width: 325px;
|
||||
margin: 0 auto; }
|
||||
|
||||
section.features .device-container {
|
||||
margin-bottom: 100px; }
|
||||
@media (min-width: 992px) {
|
||||
section.features .device-container {
|
||||
margin-bottom: 0; } }
|
||||
|
||||
section.features .feature-item {
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
text-align: center; }
|
||||
section.features .feature-item h3 {
|
||||
font-size: 30px; }
|
||||
section.features .feature-item i {
|
||||
font-size: 80px;
|
||||
display: block;
|
||||
margin-bottom: 15px;
|
||||
background: -webkit-linear-gradient(to left, #7b4397, #dc2430);
|
||||
background: linear-gradient(to left, #7b4397, #dc2430);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent; }
|
||||
|
||||
section.cta {
|
||||
position: relative;
|
||||
padding: 250px 0;
|
||||
background-image: url("../img/bg-cta.jpg");
|
||||
background-position: center;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
background-size: cover; }
|
||||
section.cta .cta-content {
|
||||
position: relative;
|
||||
z-index: 1; }
|
||||
section.cta .cta-content h2 {
|
||||
font-size: 50px;
|
||||
max-width: 450px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 25px;
|
||||
color: white; }
|
||||
@media (min-width: 768px) {
|
||||
section.cta .cta-content h2 {
|
||||
font-size: 80px; } }
|
||||
section.cta .overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); }
|
||||
|
||||
section.contact {
|
||||
text-align: center; }
|
||||
section.contact h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 25px; }
|
||||
section.contact h2 i {
|
||||
color: #dd4b39; }
|
||||
section.contact ul.list-social {
|
||||
margin-bottom: 0; }
|
||||
section.contact ul.list-social li a {
|
||||
font-size: 40px;
|
||||
line-height: 80px;
|
||||
display: block;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
color: white;
|
||||
border-radius: 100%; }
|
||||
section.contact ul.list-social li.social-twitter a {
|
||||
background-color: #1da1f2; }
|
||||
section.contact ul.list-social li.social-twitter a:hover {
|
||||
background-color: #0d95e8; }
|
||||
section.contact ul.list-social li.social-facebook a {
|
||||
background-color: #3b5998; }
|
||||
section.contact ul.list-social li.social-facebook a:hover {
|
||||
background-color: #344e86; }
|
||||
section.contact ul.list-social li.social-google-plus a {
|
||||
background-color: #dd4b39; }
|
||||
section.contact ul.list-social li.social-google-plus a:hover {
|
||||
background-color: #d73925; }
|
||||
|
||||
footer {
|
||||
padding: 25px 0;
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
background-color: #222222; }
|
||||
footer p {
|
||||
font-size: 12px;
|
||||
margin: 0; }
|
||||
footer ul {
|
||||
margin-bottom: 0; }
|
||||
footer ul li a {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.3); }
|
||||
footer ul li a:hover, footer ul li a:focus, footer ul li a:active, footer ul li a.active {
|
||||
text-decoration: none; }
|
||||
|
||||
.bg-primary {
|
||||
background: #fdcc52;
|
||||
background: -webkit-linear-gradient(#fdcc52, #fdc539);
|
||||
background: linear-gradient(#fdcc52, #fdc539); }
|
||||
|
||||
.text-primary {
|
||||
color: #fdcc52; }
|
||||
|
||||
.no-gutter > [class*='col-'] {
|
||||
padding-right: 0;
|
||||
padding-left: 0; }
|
||||
|
||||
.btn-outline {
|
||||
color: white;
|
||||
border: 1px solid;
|
||||
border-color: white; }
|
||||
.btn-outline:hover, .btn-outline:focus, .btn-outline:active, .btn-outline.active {
|
||||
color: white;
|
||||
border-color: #fdcc52;
|
||||
background-color: #fdcc52; }
|
||||
|
||||
.btn {
|
||||
border-radius: 300px;
|
||||
font-family: 'Lato', 'Helvetica', 'Arial', 'sans-serif';
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase; }
|
||||
|
||||
.btn-xl {
|
||||
font-size: 11px;
|
||||
padding: 15px 45px; }
|
||||
|
|
@ -128,5 +128,4 @@
|
|||
"<0>Para preservar la privacidad de nuestros usuarios/as, los datos reflejados están aleatoriamente alterados y son solo orientativos.</0> <0>Para preservar la privacidad de nuestros usuarios/as, los datos reflejados están aleatoriamente alterados y son solo orientativos.</0>",
|
||||
"Nuevas notificaciones de {{app}}":
|
||||
"Nuevas notificaciones de {{app}}"
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue