Terms of service

example.js

@@ -49,6 +49,23 @@ if (useCustomIcons) {
   MyModeIcon = CustomIcons.CustomModeIcon
 }
 
+// Stubs for terms of service/storage for development purposes only.
+// They are required if otpConfig.persistence.strategy === 'otp_middleware'
+// (otherwise, a "Content not found" box will be shown).
+// These components should be placed in their own files with appropriate content.
+const TermsOfService = () => (
+  <>
+    <h1>Terms of Service</h1>
+    <p>Content for terms of service.</p>
+  </>
+)
+const TermsOfStorage = () => (
+  <>
+    <h1>Terms of Storage</h1>
+    <p>Content for terms of storage.</p>
+  </>
+)
+
 // define some application-wide components that should be used in
 // various places. The following components can be provided here:
 // - defaultMobileTitle (required)
@@ -60,6 +77,8 @@ if (useCustomIcons) {
 // - MapWindows (optional)
 // - MobileSearchScreen (required)
 // - ModeIcon (required)
+// - TermsOfService (required if otpConfig.persistence.strategy === 'otp_middleware')
+// - TermsOfStorage (required if otpConfig.persistence.strategy === 'otp_middleware')
 const components = {
   defaultMobileTitle: () => <div className='navbar-title'>OpenTripPlanner</div>,
   ItineraryBody: DefaultItinerary,
@@ -74,7 +93,9 @@ const components = {
   MobileSearchScreen: isBatchRoutingEnabled
     ? BatchSearchScreen
     : MobileSearchScreen,
-  ModeIcon: MyModeIcon
+  ModeIcon: MyModeIcon,
+  TermsOfService,
+  TermsOfStorage
 }
 
 const history = createHashHistory()

lib/components/app/app-frame.js

@@ -0,0 +1,41 @@
+import React from 'react'
+import { Col, Row } from 'react-bootstrap'
+
+import DesktopNav from './desktop-nav'
+import NotFound from './not-found'
+
+/**
+ * This component defines the general application frame, to which
+ * content and an optional sub-navigation component can be inserted.
+ */
+const AppFrame = ({ children, SubNav }) => (
+  <div className='otp'>
+    {/* TODO: Do mobile view. */}
+    <DesktopNav />
+    {SubNav && <SubNav />}
+    <div className='container'>
+      <Row xs={12}>
+        <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
+          {children}
+        </Col>
+      </Row>
+    </div>
+  </div>
+)
+
+/**
+ * Creates a simple wrapper component consisting of an AppFrame that surrounds
+ * the provided component. (Displays "Content not found" if none provided.)
+ */
+export function frame (Component) {
+  return () => (
+    <AppFrame>
+      {Component
+        ? <Component />
+        : <NotFound />
+      }
+    </AppFrame>
+  )
+}
+
+export default AppFrame

lib/components/app/not-found.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import { Alert, Glyphicon } from 'react-bootstrap'
+import styled from 'styled-components'
+
+const StyledAlert = styled(Alert)`
+  margin-top: 25px;
+`
+
+/**
+ * Displays a not-found alert if some content is not found.
+ */
+const NotFound = () => (
+  <StyledAlert bsStyle='warning'>
+    <h1><Glyphicon glyph='alert' /> Content not found</h1>
+    <p>The content you requested is not available.</p>
+  </StyledAlert>
+)
+
+export default NotFound

lib/components/app/responsive-webapp.js

@@ -10,18 +10,19 @@ import { Col, Grid, Row } from 'react-bootstrap'
 import { connect } from 'react-redux'
 import { Route, Switch, withRouter } from 'react-router'
 
-import PrintLayout from './print-layout'
 import * as authActions from '../../actions/auth'
 import * as callTakerActions from '../../actions/call-taker'
 import * as configActions from '../../actions/config'
 import * as formActions from '../../actions/form'
 import * as locationActions from '../../actions/location'
 import * as mapActions from '../../actions/map'
 import * as uiActions from '../../actions/ui'
+import { frame } from '../app/app-frame'
+import DesktopNav from './desktop-nav'
 import { RedirectWithQuery } from '../form/connected-links'
 import Map from '../map/map'
 import MobileMain from '../mobile/main'
-import DesktopNav from './desktop-nav'
+import PrintLayout from './print-layout'
 import { getAuth0Config } from '../../util/auth'
 import {
   ACCOUNT_PATH,
@@ -32,6 +33,8 @@ import {
   CREATE_ACCOUNT_PLACES_PATH,
   CREATE_ACCOUNT_VERIFY_PATH,
   PLACES_PATH,
+  TERMS_OF_SERVICE_PATH,
+  TERMS_OF_STORAGE_PATH,
   TRIPS_PATH,
   URL_ROOT
 } from '../../util/constants'
@@ -320,6 +323,14 @@ class RouterWrapperWithAuth0 extends Component {
               component={UserAccountScreen}
               path={[`${CREATE_ACCOUNT_PATH}/:step`, ACCOUNT_SETTINGS_PATH]}
             />
+            <Route
+              component={frame(components.TermsOfService)}
+              path={TERMS_OF_SERVICE_PATH}
+            />
+            <Route
+              component={frame(components.TermsOfStorage)}
+              path={TERMS_OF_STORAGE_PATH}
+            />
             <Route
               component={SavedTripList}
               path={TRIPS_PATH}

lib/components/user/account-page.js

@@ -1,7 +1,6 @@
 import { withAuthenticationRequired } from '@auth0/auth0-react'
 import { replace } from 'connected-react-router'
 import React, { Component } from 'react'
-import { Col, Row } from 'react-bootstrap'
 import { connect } from 'react-redux'
 
 import * as uiActions from '../../actions/ui'
@@ -12,7 +11,7 @@ import {
 } from '../../util/constants'
 import { RETURN_TO_CURRENT_ROUTE } from '../../util/ui'
 import withLoggedInUserSupport from './with-logged-in-user-support'
-import DesktopNav from '../app/desktop-nav'
+import AppFrame from '../app/app-frame'
 import SubNav from './sub-nav'
 
 /**
@@ -42,18 +41,9 @@ class AccountPage extends Component {
   render () {
     const {children, subnav = true} = this.props
     return (
-      <div className='otp'>
-        {/* TODO: Do mobile view. */}
-        <DesktopNav />
-        {subnav && <SubNav />}
-        <div className='container'>
-          <Row xs={12}>
-            <Col xs={12} sm={10} smOffset={1} md={8} mdOffset={2}>
-              {children}
-            </Col>
-          </Row>
-        </div>
-      </div>
+      <AppFrame SubNav={subnav && SubNav}>
+        {children}
+      </AppFrame>
     )
   }
 }

lib/components/user/terms-of-use-pane.js

@@ -1,6 +1,8 @@
 import React from 'react'
 import { Checkbox, ControlLabel, FormGroup } from 'react-bootstrap'
 
+import { TERMS_OF_SERVICE_PATH, TERMS_OF_STORAGE_PATH } from '../../util/constants'
+
 /**
  * User terms of use pane.
  */
@@ -28,7 +30,7 @@ const TermsOfUsePane = ({
           onChange={disableCheckTerms ? null : handleChange}
         >
           {/* TODO: Implement the link */}
-            I have read and consent to the <a href='/#/terms-of-service'>Terms of Service</a> for using the Trip Planner.
+            I have read and consent to the <a href={`/#${TERMS_OF_SERVICE_PATH}`} target='_blank'>Terms of Service</a> for using the Trip Planner.
         </Checkbox>
       </FormGroup>
 
@@ -41,7 +43,7 @@ const TermsOfUsePane = ({
         >
           {/* TODO: Implement the link */}
             Optional: I consent to the Trip Planner storing my historical planned trips in order to
-            improve transit services in my area. <a href='/#/terms-of-storage'>More info...</a>
+            improve transit services in my area. <a href={`/#${TERMS_OF_STORAGE_PATH}`} target='_blank'>More info...</a>
         </Checkbox>
       </FormGroup>
     </div>

lib/util/constants.js

@@ -19,6 +19,8 @@ export const CREATE_ACCOUNT_TERMS_PATH = `${CREATE_ACCOUNT_PATH}/terms`
 export const CREATE_ACCOUNT_VERIFY_PATH = `${CREATE_ACCOUNT_PATH}/verify`
 export const CREATE_ACCOUNT_PLACES_PATH = `${CREATE_ACCOUNT_PATH}/places`
 export const CREATE_TRIP_PATH = `${TRIPS_PATH}/new`
+export const TERMS_OF_SERVICE_PATH = `/terms-of-service`
+export const TERMS_OF_STORAGE_PATH = `/terms-of-storage`
 
 // Gets the root URL, e.g. https://otp-instance.example.com:8080, computed once for all.
 // TODO: support root URLs that involve paths or subfolders, as in https://otp-ui.example.com/path-to-ui/