Implement API call to backend for fetchToken (#156)

* Add dotenv field for backend url

* Implement api call to backend

* Fix some security issues with header

* Move redirect to login from academy to application

* Move ivle redirect from /academy to /login

* Fix flickering spinner

Author: ning-y

.env.example

@@ -1,2 +1,3 @@
 REACT_APP_IVLE_KEY=your_ivle_key_here
 REACT_APP_VERSION=$npm_package_version
+REACT_APP_BACKEND_URL=http://something.com

src/actions/actionTypes.ts

@@ -36,12 +36,11 @@ export const UPDATE_CURRENT_ASSESSMENT_ID = 'UPDATE_CURRENT_ASSESSMENT_ID'
 
 /** Session */
 export const FETCH_ANNOUNCEMENTS = 'FETCH_ANNOUNCEMENTS'
+export const FETCH_AUTH = 'FETCH_AUTH'
 export const FETCH_ASSESSMENT = 'FETCH_ASSESSMENT'
 export const FETCH_ASSESSMENT_OVERVIEWS = 'FETCH_ASSESSMENT_OVERVIEWS'
 export const FETCH_GRADING = 'FETCH_GRADING'
 export const FETCH_GRADING_OVERVIEWS = 'FETCH_GRADING_OVERVIEWS'
-export const FETCH_TOKENS = 'FETCH_TOKENS'
-export const FETCH_USERNAME = 'FETCH_USERNAME'
 export const LOGIN = 'LOGIN'
 export const SET_TOKENS = 'SET_TOKENS'
 export const SET_USERNAME = 'SET_USERNAME'

src/actions/session.ts

@@ -4,8 +4,8 @@ import { Grading, GradingOverview } from '../components/academy/grading/gradingS
 import { IAssessment, IAssessmentOverview } from '../components/assessment/assessmentShape'
 import * as actionTypes from './actionTypes'
 
-export const fetchTokens: ActionCreator<actionTypes.IAction> = (ivleToken: string) => ({
-  type: actionTypes.FETCH_TOKENS,
+export const fetchAuth: ActionCreator<actionTypes.IAction> = (ivleToken: string) => ({
+  type: actionTypes.FETCH_AUTH,
   payload: ivleToken
 })
 
@@ -31,10 +31,6 @@ export const fetchGradingOverviews = () => ({
   type: actionTypes.FETCH_GRADING_OVERVIEWS
 })
 
-export const fetchUsername = () => ({
-  type: actionTypes.FETCH_USERNAME
-})
-
 export const login = () => ({
   type: actionTypes.LOGIN
 })

src/components/Application.tsx

@@ -24,7 +24,6 @@ export interface IDispatchProps {
 
 const Application: React.SFC<IApplicationProps> = props => {
   const redirectToNews = () => <Redirect to="/news" />
-  const toAcademy = () => <Academy accessToken={props.accessToken} />
 
   parsePlayground(props)
 
@@ -33,21 +32,35 @@ const Application: React.SFC<IApplicationProps> = props => {
       <NavigationBar title={props.title} username={props.username} />
       <div className="Application__main">
         <Switch>
-          <Route path="/academy" component={toAcademy} />
+          <Route path="/academy" component={toAcademy(props)} />
           <Route path="/news" component={Announcements} />
           <Route path="/material" component={Announcements} />
           <Route path="/playground" component={Playground} />
           <Route path="/status" component={Announcements} />
-          <Route path="/login" component={Login} />
-          <Route exact={true} path="/" component={redirectToNews} />
+          <Route path="/login" render={toLogin(props)} />
+          <Route exact={true} path="/" render={redirectToNews} />
           <Route component={NotFound} />
         </Switch>
       </div>
     </div>
   )
 }
 
-export const parsePlayground = (props: IApplicationProps) => {
+/**
+ * A user routes to /academy,
+ *  1. If the user is logged in, render the Academy component
+ *  2. If the user is not logged in, redirect to /login
+ */
+const toAcademy = (props: IApplicationProps) =>
+  props.accessToken === undefined
+    ? () => <Redirect to="/login" />
+    : () => <Academy accessToken={props.accessToken} />
+
+const toLogin = (props: IApplicationProps) => () => (
+  <Login ivleToken={qs.parse(props.location.search).token} />
+)
+
+const parsePlayground = (props: IApplicationProps) => {
   const prgrm = parsePrgrm(props)
   const lib = parseLib(props)
   if (prgrm) {

src/components/Login.tsx

@@ -1,14 +1,55 @@
-import { Button, ButtonGroup, Card, Icon } from '@blueprintjs/core'
+import { Button, ButtonGroup, Card, Icon, NonIdealState, Spinner } from '@blueprintjs/core'
 import { IconNames } from '@blueprintjs/icons'
 import * as React from 'react'
 import { NavLink } from 'react-router-dom'
 
-type LoginProps = DispatchProps
+type LoginProps = DispatchProps & OwnProps
 
 export type DispatchProps = {
+  handleFetchAuth: (ivleToken: string) => void
   handleLogin: () => void
 }
 
+export type OwnProps = {
+  ivleToken?: string
+}
+
+const Login: React.SFC<LoginProps> = props => {
+  if (props.ivleToken) {
+    startFetchAuth(props.ivleToken, props.handleFetchAuth)
+    return (
+      <div className="Login pt-dark">
+        <Card className="login-card pt-elevation-4">
+          <div className="login-body">
+            <NonIdealState description="Logging In..." visual={<Spinner large={true} />} />
+          </div>
+        </Card>
+      </div>
+    )
+  } else {
+    return (
+      <div className="Login pt-dark">
+        <Card className="login-card pt-elevation-4">
+          <div className="login-header">
+            <h4>
+              <Icon icon={IconNames.LOCK} />LOGIN
+            </h4>
+          </div>
+          <div className="login-body">
+            <ButtonGroup fill={true} vertical={true}>
+              {loginButton(props.handleLogin)}
+              {playgroundButton}
+            </ButtonGroup>
+          </div>
+        </Card>
+      </div>
+    )
+  }
+}
+
+const startFetchAuth = (ivleToken: string, handleFetchAuth: DispatchProps['handleFetchAuth']) =>
+  handleFetchAuth(ivleToken)
+
 const loginButton = (handleClick: () => void) => (
   <Button className="pt-large" rightIcon="log-in" onClick={handleClick}>
     Log in with IVLE
@@ -23,22 +64,4 @@ const playgroundButton = (
   </NavLink>
 )
 
-const Login: React.SFC<LoginProps> = props => (
-  <div className="Login pt-dark">
-    <Card className="login-card pt-elevation-4">
-      <div className="login-header">
-        <h4>
-          <Icon icon={IconNames.LOCK} />LOGIN
-        </h4>
-      </div>
-      <div className="login-body">
-        <ButtonGroup fill={true} vertical={true}>
-          {loginButton(() => props.handleLogin())}
-          {playgroundButton}
-        </ButtonGroup>
-      </div>
-    </Card>
-  </div>
-)
-
 export default Login

src/components/__tests__/Login.tsx

@@ -5,7 +5,19 @@ import Login from '../Login'
 
 test('Login renders correctly', () => {
   const props = {
-    handleLogin: () => {}
+    handleLogin: () => {},
+    handleFetchAuth: (ivleToken: string) => {}
+  }
+  const app = <Login {...props} />
+  const tree = shallow(app)
+  expect(tree.debug()).toMatchSnapshot()
+})
+
+test('Loading login renders correctly', () => {
+  const props = {
+    handleLogin: () => {},
+    handleFetchAuth: (ivleToken: string) => {},
+    ivleToken: '1VL3 T0K3N'
   }
   const app = <Login {...props} />
   const tree = shallow(app)

src/components/__tests__/__snapshots__/Application.tsx.snap

@@ -5,13 +5,13 @@ exports[`Application renders correctly 1`] = `
   <NavigationBar title=\\"Cadet\\" username={[undefined]} />
   <div className=\\"Application__main\\">
     <Switch>
-      <Route path=\\"/academy\\" component={[Function: toAcademy]} />
+      <Route path=\\"/academy\\" component={[Function]} />
       <Route path=\\"/news\\" component={[Function: Connect]} />
       <Route path=\\"/material\\" component={[Function: Connect]} />
       <Route path=\\"/playground\\" component={[Function: C]} />
       <Route path=\\"/status\\" component={[Function: Connect]} />
-      <Route path=\\"/login\\" component={[Function: Connect]} />
-      <Route exact={true} path=\\"/\\" component={[Function: redirectToNews]} />
+      <Route path=\\"/login\\" render={[Function]} />
+      <Route exact={true} path=\\"/\\" render={[Function: redirectToNews]} />
       <Route component={[Function: NotFound]} />
     </Switch>
   </div>

src/components/__tests__/__snapshots__/Login.tsx.snap

@@ -1,5 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Loading login renders correctly 1`] = `
+"<div className=\\"Login pt-dark\\">
+  <Blueprint2.Card className=\\"login-card pt-elevation-4\\" elevation={0} interactive={false}>
+    <div className=\\"login-body\\">
+      <NonIdealState description=\\"Logging In...\\" visual={{...}} />
+    </div>
+  </Blueprint2.Card>
+</div>"
+`;
+
 exports[`Login renders correctly 1`] = `
 "<div className=\\"Login pt-dark\\">
   <Blueprint2.Card className=\\"login-card pt-elevation-4\\" elevation={0} interactive={false}>
@@ -11,7 +21,7 @@ exports[`Login renders correctly 1`] = `
     </div>
     <div className=\\"login-body\\">
       <Blueprint2.ButtonGroup fill={true} vertical={true}>
-        <Blueprint2.Button className=\\"pt-large\\" rightIcon=\\"log-in\\" onClick={[Function]}>
+        <Blueprint2.Button className=\\"pt-large\\" rightIcon=\\"log-in\\" onClick={[Function: handleLogin]}>
           Log in with IVLE
         </Blueprint2.Button>
         <NavLink to=\\"/playground\\" activeClassName=\\"active\\" ariaCurrent=\\"true\\">

src/components/academy/index.tsx

@@ -1,5 +1,3 @@
-/* tslint:disable: jsx-no-lambda */
-import * as qs from 'query-string'
 import * as React from 'react'
 import { Redirect, Route, RouteComponentProps, Switch } from 'react-router'
 
@@ -12,12 +10,7 @@ import { assessmentCategoryLink } from '../../utils/paramParseHelpers'
 import { AssessmentCategories, AssessmentCategory } from '../assessment/assessmentShape'
 import AcademyNavigationBar from './NavigationBar'
 
-interface IAcademyProps extends IDispatchProps, IOwnProps, IStateProps, RouteComponentProps<{}> {}
-
-export interface IDispatchProps {
-  handleFetchTokens: (ivleToken: string) => void
-  handleFetchUsername: () => void
-}
+interface IAcademyProps extends IOwnProps, IStateProps, RouteComponentProps<{}> {}
 
 export interface IOwnProps {
   accessToken?: string
@@ -38,7 +31,6 @@ export const Academy: React.SFC<IAcademyProps> = props => (
   <div className="Academy">
     <AcademyNavigationBar />
     <Switch>
-      {checkLoggedIn(props)}
       <Route
         path={`/academy/${assessmentCategoryLink(
           AssessmentCategories.Contest
@@ -69,19 +61,6 @@ export const Academy: React.SFC<IAcademyProps> = props => (
   </div>
 )
 
-const checkLoggedIn = (props: IAcademyProps) => {
-  const ivleToken = qs.parse(props.location.search).token
-  if (ivleToken !== undefined) {
-    props.handleFetchTokens(ivleToken) // just received a callback from IVLE
-    props.handleFetchUsername()
-    return
-  } else if (props.accessToken === undefined) {
-    return <Route component={redirectToLogin} />
-  } else {
-    return
-  }
-}
-
 /**
  * 1. If user is in /academy.*, redirect to game
  * 2. If not, redirect to the last /acdaemy.* route the user was in
@@ -99,8 +78,6 @@ const dynamicRedirect = (props: IStateProps) => {
 
 const redirectTo404 = () => <Redirect to="/404" />
 
-const redirectToLogin = () => <Redirect to="/login" />
-
 const redirectToGame = () => <Redirect to="/academy/game" />
 
 export default Academy

src/containers/LoginContainer.ts

@@ -1,15 +1,18 @@
-import { connect, MapDispatchToProps } from 'react-redux'
+import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux'
 import { bindActionCreators, Dispatch } from 'redux'
 
-import { login } from '../actions/session'
-import Login, { DispatchProps } from '../components/Login'
+import { fetchAuth, login } from '../actions/session'
+import Login, { DispatchProps, OwnProps } from '../components/Login'
+
+const mapStateToProps: MapStateToProps<{}, OwnProps, {}> = (_, ownProps) => ownProps
 
 const mapDispatchToProps: MapDispatchToProps<DispatchProps, {}> = (dispatch: Dispatch<any>) =>
   bindActionCreators(
     {
+      handleFetchAuth: fetchAuth,
       handleLogin: login
     },
     dispatch
   )
 
-export default connect(undefined, mapDispatchToProps)(Login)
+export default connect(mapStateToProps, mapDispatchToProps)(Login)