Merge pull request #254 from CaptainFact/staging

Release 0.8.17

.dockerignore

@@ -1,9 +1,16 @@
 .git
-.gitignore
+.github
 .idea
+.eslintrc.yml
+.gitignore
+.sass-lint.yml
+.travis.yml
+
 node_modules
 public
 
+dev
 rel/dev*
+docker-compose.yml
 Dockerfile
-
+netlify.toml

.eslintrc.yml

@@ -3,6 +3,7 @@ env:
   es6: true
   jest: true
   node: true
+  cypress/globals: true
 extends: 'airbnb'
 parser: babel-eslint
 parserOptions:
@@ -14,6 +15,8 @@ plugins:
   - react
   - jsx-a11y
   - import
+  - cypress
+  - chai-friendly # See https://github.com/cypress-io/eslint-plugin-cypress#chai-and-no-unused-expressions
 rules:
   max-len:
     - warn
@@ -36,6 +39,10 @@ rules:
   import/no-named-as-default: ['warn']
   no-restricted-globals: ["error", "event", "fdescribe"]
   no-mixed-operators: ['warn']
+  # See https://github.com/cypress-io/eslint-plugin-cypress#chai-and-no-unused-expressions
+  no-unused-expressions: 0
+  chai-friendly/no-unused-expressions: 2
+  # React
   react/destructuring-assignment: off
   react/no-multi-comp: ['warn']
   react/jsx-no-bind: ['warn']
@@ -54,6 +61,7 @@ rules:
   react/jsx-indent: ['warn']
   react/no-array-index-key: ['warn']
   react/prefer-stateless-function: ['warn']
+  # JSX
   jsx-a11y/anchor-is-valid:
     - warn
     - components: ['Link']

.gitignore

@@ -28,6 +28,9 @@ public/
 # Ignore tests coverage
 coverage
 
+# Ignore cypress videos and screenshots
+cypress/videos
+
 # API dev image resources
 dev/dev_docker_api_resources/*
-!dev/dev_docker_api_resources/.keep
+!dev/dev_docker_api_resources/.keep

.travis.yml

@@ -1,16 +1,46 @@
 stages:
-  - name: test
+  - name: Unit-Testing
+  - name: E2E-Testing
+    if: branch =~ /cypress/ OR (type = pull_request AND branch = master)
   - name: deploy
-    if: branch IN (master, staging) OR tag =~ ^v\d+
+    if: type IN (push, api) AND (branch IN (master, staging) OR tag =~ ^v\d+)
 
 jobs:
   include:
-    - stage: test
+    - stage: Unit-Testing
       language: node_js
       node_js: [node]
-      cache: {directories: [node_modules]}
+      cache: { directories: [node_modules, "~/.npm", "~/.cache"] }
       script:
         - npm run coverage && cat ./coverage/lcov.info | coveralls
+
+    - stage: E2E-Testing
+      language: node_js
+      node_js: [node]
+      sudo: required
+      services: [docker]
+      cache: { directories: [node_modules, "~/.npm", "~/.cache"] }
+      script:
+        # Shutdown postgres instances - see https://github.com/travis-ci/travis-ci/issues/4842#issuecomment-311527059
+        - sudo service postgresql stop
+        - while sudo lsof -Pi :5432 -sTCP:LISTEN -t; do sleep 1; done
+        # Start API
+        - docker-compose up -d || exit 1
+        # Build and start Frontend
+        - docker build --build-arg BUILD_ENV=dev -t cf-frontend-e2e-testing . || exit 1
+        - docker run  --rm -d -p 3333:80
+          -v ${TRAVIS_BUILD_DIR}/rel/dev_localhost_keys:/run/secrets
+          -v ${TRAVIS_BUILD_DIR}/node_modules:/opt/app/node_modules
+          cf-frontend-e2e-testing serve
+        # Install cypress
+        - npm install -g cypress
+        # Run Cypress
+        - npm run cypress -- --record --key ${CYPRESS_RECORD_KEY}
+        # Shutdown Frontend and API
+        - kill $(jobs -p) || true
+        - docker-compose down
+        - docker rmi -f cf-frontend-e2e-testing
+
     - stage: deploy
       if: branch IN (master, staging)
       language: generic
@@ -20,9 +50,6 @@ jobs:
         - CF_FRONTEND_IMAGE=captainfact/frontend:$TRAVIS_BRANCH
       script:
         - docker build --build-arg BUILD_ENV=$TRAVIS_BRANCH -t $CF_FRONTEND_IMAGE . &&
-          if [ "$TRAVIS_PULL_REQUEST" = "false" ]; then
-              docker login -u="$DOCKER_USERNAME" -p="$DOCKER_PASSWORD";
-              echo "Pushing $CF_FRONTEND_IMAGE";
-              docker push $CF_FRONTEND_IMAGE;
-          fi
-
+          docker login -u="$DOCKER_USERNAME" -p="$DOCKER_PASSWORD";
+          echo "Pushing $CF_FRONTEND_IMAGE";
+          docker push $CF_FRONTEND_IMAGE;

CONTRIBUTING.md

@@ -20,7 +20,7 @@ comment on these tasks directly.
 - **Ideas**: Participate in an issue thread or start your own to have your voice heard
 - **Resources**: Submit a pull request to add to RESOURCES.md with links to related content
 - **Translations**: You can create and edit translations for the interface in `app/i18n/[locale]/[file].js`.
-                    To translate help pages, get a look at `app/assets/assets/help/[locale]/[page].md`
+                    To translate help pages, get a look at `app/static/assets/help/[locale]/[page].md`
 - **Documentation**: Fix typos, clarify language, and add explanations about how things work
 - **Code**: Submit new features or bug fixes, see "Code contributions" below
 

README.md

@@ -1,4 +1,4 @@
-<p align="center"><img src="app/assets/assets/img/logo.png" height="100"/></p>
+<p align="center"><img src="app/static/assets/img/logo.png" height="100"/></p>
 <h1 align="center"><a href="https://captainfact.io">CaptainFact.io</a></h1>
 <p align="center"><a href="https://discord.gg/2Qd7hMz" title="Discord"><img src="https://discordapp.com/api/guilds/416782744748687361/widget.png" alt="Discord"></a>
 <a href="https://twitter.com/CaptainFact_io" title="Twitter"><img src="https://img.shields.io/twitter/follow/CaptainFact_io.svg?style=social&label=Follow"></a>
@@ -44,7 +44,7 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for more details.
 ```
 app
 ├── API => Api libraries for both REST API and websockets
-├── assets => static assets, directly copied to the public directory
+├── assets => assets imported from JS
 ├── components => All react components
 ├── i18n => Translations
 ├── lib => Misc utilities
@@ -55,6 +55,7 @@ app
 │   │   ├── reducer.js => Reducer + actions creators, always return an action object
 │   │   └── selectors.js => re-select selectors to select data in state
 │   └── ...
+├── static => static assets, directly copied to the public directory
 ├── styles => stylesheets in .sass format, all included from application.sass
 └── router.jsx => Application router and main entry point
 ```

app/components/App/Logo.jsx

@@ -1,11 +1,11 @@
 import React from 'react'
 
-import logo from '../../assets/assets/img/logo.svg'
-import borderlessLogo from '../../assets/assets/img/logo-borderless.svg'
+import logo from '../../assets/logo.svg'
+import borderlessLogo from '../../assets/logo-borderless.svg'
 
-const Logo = ({borderless = false}) => (
+const Logo = ({ borderless = false }) => (
   <h1 className="site-logo title is-1">
-    <img alt="C" src={borderless ? borderlessLogo : logo}/>
+    <img alt="C" src={borderless ? borderlessLogo : logo} />
     <span className="logo-captain">aptain</span>
     <span className="logo-fact">Fact</span>
     <small className="beta"> (Beta)</small>

app/components/App/index.jsx

@@ -9,19 +9,23 @@ import { fetchCurrentUser } from '../../state/users/current_user/effects'
 import Sidebar from './Sidebar'
 import { MainModalContainer } from '../Modal/MainModalContainer'
 import PublicAchievementUnlocker from '../Users/PublicAchievementUnlocker'
+import { isAuthenticated } from '../../state/users/current_user/selectors'
 
 
 @connect(state => ({
   locale: state.UserPreferences.locale,
-  sidebarExpended: state.UserPreferences.sidebarExpended
-}), {fetchCurrentUser})
+  sidebarExpended: state.UserPreferences.sidebarExpended,
+  isAuthenticated: isAuthenticated(state)
+}), { fetchCurrentUser })
 export default class App extends React.PureComponent {
   componentDidMount() {
-    this.props.fetchCurrentUser()
+    if (!this.props.isAuthenticated) {
+      this.props.fetchCurrentUser()
+    }
   }
 
   render() {
-    const {locale, sidebarExpended, children} = this.props
+    const { locale, sidebarExpended, children } = this.props
     const mainContainerClass = sidebarExpended ? undefined : 'expended'
 
     return (
@@ -30,13 +34,13 @@ export default class App extends React.PureComponent {
           <Helmet>
             <title>CaptainFact</title>
           </Helmet>
-          <MainModalContainer/>
-          <FlashMessages/>
-          <Sidebar/>
+          <MainModalContainer />
+          <FlashMessages />
+          <Sidebar />
           <div id="main-container" className={mainContainerClass}>
             {children}
           </div>
-          <PublicAchievementUnlocker achievementId={4} meetConditionsFunc={this.checkExtensionInstall}/>
+          <PublicAchievementUnlocker achievementId={4} meetConditionsFunc={this.checkExtensionInstall} />
         </div>
       </I18nextProvider>
     )

app/components/Home/AllContributors.jsx

@@ -18,6 +18,7 @@ const CONTRIBUTORS = [
   { role: ROLE_PARTNER, name: 'La Tronche en Biais', picture: 'troncheenbiais', url: 'https://www.youtube.com/user/TroncheEnBiais' },
   { role: ROLE_PARTNER, name: 'IMAGO', picture: 'imago', url: 'http://imagotv.fr/pdf/imago_presentation.pdf' },
   { role: ROLE_PARTNER, name: 'TedX Nouméa', picture: 'tedxnoumea', url: 'https://tedxnoumea.com' },
+  { role: ROLE_PARTNER, name: 'YesWeHack', picture: 'yeswehack', url: 'https://yeswehack.com' },
   { role: ROLE_PARTNER, name: 'Maia Mater', picture: 'maiamater', url: 'https://www.maiamater.camp' },
   { role: ROLE_DEVELOPER, name: 'Noé Gambini', picture: 'noe' },
   { role: ROLE_DONATOR, name: 'Julien Edmond', picture: 'julien' },

app/components/Home/Home.jsx

@@ -11,6 +11,7 @@ import ExternalLinkNewTab from '../Utils/ExternalLinkNewTab'
 import { INVITATION_SYSTEM } from '../../config'
 import AllContributors from './AllContributors'
 import Statistics from './Statistics'
+import landingIllustration from '../../assets/landing-illustration.jpg'
 
 
 @connect(state => ({ authenticated: isAuthenticated(state) }))
@@ -53,14 +54,14 @@ export default class Home extends React.PureComponent {
           </ExternalLinkNewTab>
         </section>
         <section className="section has-text-centered illustration">
-          <img src="assets/img/landing-illustration.jpg" alt="" />
+          <img src={landingIllustration} alt="" />
         </section>
         <section className="section has-text-centered community content">
-          <h1>{t('videoDebate:community')}</h1>
+          <h2 className="title is-2">{t('videoDebate:community')}</h2>
           <Statistics />
         </section>
         <section className="section has-text-centered contributors content">
-          <h1>{t('contributors')}</h1>
+          <h2 className="title is-2">{t('contributors')}</h2>
           <AllContributors />
           <ExternalLinkNewTab className="button is-large" href="https://opencollective.com/captainfact_io">
             <Icon name="external-link" />

app/components/Pages/BrowserExtensionsPage.jsx

@@ -4,6 +4,9 @@ import { Link } from 'react-router'
 import ReactPlayer from 'react-player'
 import Icon from '../Utils/Icon'
 import ExternalLinkNewTab from '../Utils/ExternalLinkNewTab'
+import chromeLogo from '../../assets/browsers/chrome.png'
+import firefoxLogo from '../../assets/browsers/firefox.png'
+import ieLogo from '../../assets/browsers/internet_explorer.png'
 
 
 export const BrowserExtensionsPage = withNamespaces('extension')(({ t }) => (
@@ -12,20 +15,20 @@ export const BrowserExtensionsPage = withNamespaces('extension')(({ t }) => (
       <div className="columns">
         <BrowserExtension
           browser="Google Chrome"
-          image="/assets/img/chrome.png"
+          image={chromeLogo}
           buttonLabel={`${t('addTo')} Chrome`}
           onClick={chromeInstall}
           url="https://chrome.google.com/webstore/detail/fnnhlmbnlbgomamcolcpgncflofhjckm"
         />
         <BrowserExtension
           browser="Mozilla Firefox"
-          image="/assets/img/firefox.png"
+          image={firefoxLogo}
           buttonLabel={`${t('addTo')} Firefox`}
           url="https://addons.mozilla.org/addon/captainfact/"
         />
         <BrowserExtension
           browser="Internet Explorer"
-          image="/assets/img/internet_explorer.png"
+          image={ieLogo}
           buttonLabel="Just kidding"
           disabled
           url="https://www.mozilla.org/fr/firefox/"

app/components/Users/Achievement.jsx

@@ -2,26 +2,26 @@ import React from 'react'
 import { withNamespaces } from 'react-i18next'
 
 // Import all achievements images
-import imgDefault from '../../assets/assets/achievements/default.png'
-import imgWelcome from '../../assets/assets/achievements/welcome.jpg'
-import imgRobot from '../../assets/assets/achievements/robot.jpg'
-import imgHelp from '../../assets/assets/achievements/help.jpg'
-import imgBulletproof from '../../assets/assets/achievements/bulletproof.png'
-import imgTrump from '../../assets/assets/achievements/trump.png'
-import imgSocialAddict from '../../assets/assets/achievements/socialAddict.jpg'
-import imgAmbassador from '../../assets/assets/achievements/ambassador.jpg'
-import imgBug from '../../assets/assets/achievements/bug.jpg'
-import imgFamous from '../../assets/assets/achievements/famous.jpg'
-import imgArtist from '../../assets/assets/achievements/artist.jpg'
-import imgGoodVibes from '../../assets/assets/achievements/goodVibes.jpg'
+import imgDefault from '../../assets/achievements/default.png'
+import imgWelcome from '../../assets/achievements/welcome.jpg'
+import imgRobot from '../../assets/achievements/robot.jpg'
+import imgHelp from '../../assets/achievements/help.jpg'
+import imgBulletproof from '../../assets/achievements/bulletproof.png'
+import imgTrump from '../../assets/achievements/trump.png'
+import imgSocialAddict from '../../assets/achievements/socialAddict.jpg'
+import imgAmbassador from '../../assets/achievements/ambassador.jpg'
+import imgBug from '../../assets/achievements/bug.jpg'
+import imgFamous from '../../assets/achievements/famous.jpg'
+import imgArtist from '../../assets/achievements/artist.jpg'
+import imgGoodVibes from '../../assets/achievements/goodVibes.jpg'
 
 // Import all achievements videos
-import videoWelcome from '../../assets/assets/achievements/welcome.mp4'
-import videoRobot from '../../assets/assets/achievements/robot.mp4'
-import videoSocialAddict from '../../assets/assets/achievements/socialAddict.mp4'
-import videoAmbassador from '../../assets/assets/achievements/ambassador.mp4'
-import videoBug from '../../assets/assets/achievements/bug.mp4'
-import videoFamous from '../../assets/assets/achievements/famous.mp4'
+import videoWelcome from '../../assets/achievements/welcome.mp4'
+import videoRobot from '../../assets/achievements/robot.mp4'
+import videoSocialAddict from '../../assets/achievements/socialAddict.mp4'
+import videoAmbassador from '../../assets/achievements/ambassador.mp4'
+import videoBug from '../../assets/achievements/bug.mp4'
+import videoFamous from '../../assets/achievements/famous.mp4'
 
 
 const KNOWN_ACHIEVEMENTS = {

app/components/Users/LoginForm.jsx

@@ -5,7 +5,7 @@ import { Link, withRouter } from 'react-router'
 import { withNamespaces } from 'react-i18next'
 
 import ThirdPartyAuthList from './ThirdPartyAuthList'
-import { emailField, passwordField, submitButton } from './UserFormFields'
+import { emailOrUsernameField, passwordField, submitButton } from './UserFormFields'
 import { login } from '../../state/users/current_user/effects'
 import Notification from '../Utils/Notification'
 import { tError } from '../../lib/errors'
@@ -32,11 +32,11 @@ export default class LoginForm extends React.PureComponent {
       >
         {error && <Notification type="danger">{tError(t, error)}</Notification>}
         <div>
-          <strong>{t('needAnAccountQuestion')} <Link to="signup">{t('signup')}</Link> </strong>
+          <strong>{t('needAnAccountQuestion')} <Link to="/signup">{t('signup')}</Link> </strong>
           <Link to="/reset_password" style={{ float: 'right' }}>{t('forgottenPassword')}</Link>
         </div>
         <hr />
-        {emailField(t)}
+        {emailOrUsernameField(t)}
         {passwordField(t)}
         {submitButton(t('login'), valid)}
         <ThirdPartyAuthList />

app/components/Users/ThirdPartyAuthList.jsx

@@ -11,9 +11,6 @@ const ThirdPartyAuthList = ({ t, location: { query: { invitation_token } } }) =>
     <h4 className="title is-4">{t('actionWithThirdParty')}</h4>
     <div className="services-list">
       <ThirdPartyServiceButton url={facebookAuthUrl(invitation_token || '')} icon="facebook" />
-      <ThirdPartyServiceButton url="facebook.com" icon="google" disabled />
-      <ThirdPartyServiceButton url="facebook.com" icon="github" disabled />
-      <ThirdPartyServiceButton url="facebook.com" icon="twitter" disabled />
     </div>
   </div>
 )