Merge pull request #37 from DaiPOS/igor/feature/signin_scene

Sign-in scene

Author: pycckuu

.eslintignore

@@ -1,2 +1,4 @@
 flow-typed
 node_modules
+docs
+src/components/app/App.css

docs/schema.md

@@ -1,3 +1,5 @@
+<!-- eslint-disable -->
+
 - users
   - id
   - firstName

flow-typed/npm/prop-types_v15.x.x.js

@@ -0,0 +1,35 @@
+// flow-typed signature: d9a983bb1ac458a256c31c139047bdbb
+// flow-typed version: 927687984d/prop-types_v15.x.x/flow_>=v0.41.x
+
+type $npm$propTypes$ReactPropsCheckType = (
+  props: any,
+  propName: string,
+  componentName: string,
+  href?: string) => ?Error;
+
+declare module 'prop-types' {
+  declare var array: React$PropType$Primitive<Array<any>>;
+  declare var bool: React$PropType$Primitive<boolean>;
+  declare var func: React$PropType$Primitive<Function>;
+  declare var number: React$PropType$Primitive<number>;
+  declare var object: React$PropType$Primitive<Object>;
+  declare var string: React$PropType$Primitive<string>;
+  declare var symbol: React$PropType$Primitive<Symbol>;
+  declare var any: React$PropType$Primitive<any>;
+  declare var arrayOf: React$PropType$ArrayOf;
+  declare var element: React$PropType$Primitive<any>; /* TODO */
+  declare var instanceOf: React$PropType$InstanceOf;
+  declare var node: React$PropType$Primitive<any>; /* TODO */
+  declare var objectOf: React$PropType$ObjectOf;
+  declare var oneOf: React$PropType$OneOf;
+  declare var oneOfType: React$PropType$OneOfType;
+  declare var shape: React$PropType$Shape;
+
+  declare function checkPropTypes<V>(
+    propTypes: $Subtype<{[_: $Keys<V>]: $npm$propTypes$ReactPropsCheckType}>,
+    values: V,
+    location: string,
+    componentName: string,
+    getStack: ?(() => ?string)
+  ) : void;
+}

flow-typed/npm/react-router_v4.x.x.js

@@ -0,0 +1,134 @@
+// flow-typed signature: e15aeed0d3686f71822b54cde7b71c83
+// flow-typed version: fbf3e77efa/react-router_v4.x.x/flow_>=v0.63.x
+
+declare module "react-router" {
+  // NOTE: many of these are re-exported by react-router-dom and
+  // react-router-native, so when making changes, please be sure to update those
+  // as well.
+  declare export type Location = {
+    pathname: string,
+    search: string,
+    hash: string,
+    state?: any,
+    key?: string
+  };
+
+  declare export type LocationShape = {
+    pathname?: string,
+    search?: string,
+    hash?: string,
+    state?: any
+  };
+
+  declare export type HistoryAction = "PUSH" | "REPLACE" | "POP";
+
+  declare export type RouterHistory = {
+    length: number,
+    location: Location,
+    action: HistoryAction,
+    listen(
+      callback: (location: Location, action: HistoryAction) => void
+    ): () => void,
+    push(path: string | LocationShape, state?: any): void,
+    replace(path: string | LocationShape, state?: any): void,
+    go(n: number): void,
+    goBack(): void,
+    goForward(): void,
+    canGo?: (n: number) => boolean,
+    block(
+      callback: (location: Location, action: HistoryAction) => boolean
+    ): void,
+    // createMemoryHistory
+    index?: number,
+    entries?: Array<Location>
+  };
+
+  declare export type Match = {
+    params: { [key: string]: ?string },
+    isExact: boolean,
+    path: string,
+    url: string
+  };
+
+  declare export type ContextRouter = {|
+    history: RouterHistory,
+    location: Location,
+    match: Match,
+    staticContext?: StaticRouterContext
+  |};
+
+  declare export type GetUserConfirmation = (
+    message: string,
+    callback: (confirmed: boolean) => void
+  ) => void;
+
+  declare type StaticRouterContext = {
+    url?: string
+  };
+
+  declare export class StaticRouter extends React$Component<{
+    basename?: string,
+    location?: string | Location,
+    context: StaticRouterContext,
+    children?: React$Node
+  }> {}
+
+  declare export class MemoryRouter extends React$Component<{
+    initialEntries?: Array<LocationShape | string>,
+    initialIndex?: number,
+    getUserConfirmation?: GetUserConfirmation,
+    keyLength?: number,
+    children?: React$Node
+  }> {}
+
+  declare export class Router extends React$Component<{
+    history: RouterHistory,
+    children?: React$Node
+  }> {}
+
+  declare export class Prompt extends React$Component<{
+    message: string | ((location: Location) => string | true),
+    when?: boolean
+  }> {}
+
+  declare export class Redirect extends React$Component<{|
+    to: string | LocationShape,
+    push?: boolean,
+    from?: string,
+    exact?: boolean,
+    strict?: boolean
+  |}> {}
+
+
+  declare export class Route extends React$Component<{|
+    component?: React$ComponentType<*>,
+    render?: (router: ContextRouter) => React$Node,
+    children?: React$ComponentType<ContextRouter> | React$Node,
+    path?: string,
+    exact?: boolean,
+    strict?: boolean,
+    location?: LocationShape,
+    sensitive?: boolean
+  |}> {}
+
+  declare export class Switch extends React$Component<{|
+    children?: React$Node,
+    location?: Location
+  |}> {}
+
+  declare export function withRouter<P>(
+    Component: React$ComponentType<{| ...ContextRouter, ...P |}>
+  ): React$ComponentType<P>;
+
+  declare type MatchPathOptions = {
+    path?: string,
+    exact?: boolean,
+    strict?: boolean,
+    sensitive?: boolean
+  };
+
+  declare export function matchPath(
+    pathname: string,
+    options?: MatchPathOptions | string
+  ): null | Match;
+}

package.json

@@ -23,12 +23,14 @@
     "gh-pages": "^2.0.1",
     "lodash": "^4.17.11",
     "moment": "^2.23.0",
+    "prop-types": "^15.6.2",
     "qrious": "^4.0.2",
     "react": "16.7.0",
     "react-dom": "16.7.0",
     "react-html5-camera-photo": "^1.2.9",
     "react-redux": "^5.1.0",
     "react-redux-firebase": "^2.2.6",
+    "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.3",
     "recompose": "^0.30.0",

src/components/common/icon/arrow-left.js

@@ -0,0 +1,18 @@
+import React from 'react'
+
+const ArrowLeft = () => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M0.707107 8.98528L6.36396 3.32842L7.77817 4.74264L3.82828 8.69253L18.3848  8.69253V10.6922L3.82828 10.6922L7.77817 14.6421L6.36396 16.0563L0.707107 10.3995C0.316784 10.0092 0.316784 9.3756 0.707107 8.98528Z"
+      fill="#333963"
+    />
+  </svg>
+)
+
+export default ArrowLeft

src/components/common/next-button/Vector.png

@@ -0,0 +1,33 @@
+/** @jsx jsx */
+/* eslint-disable */
+
+import { jsx } from '@emotion/core'
+import React from 'react'
+import * as ReactRouter from 'react-router'
+import vectorImg from './Vector.png'
+
+import style from './index.style.js'
+
+class NextButton extends React.Component {
+  render() {
+    return (
+      <div css={style.button__location}>
+        <button css={style.continue__button}>
+          <div css={style.continue__buttonText}>{this.props.children}</div>
+          <div css={style.continue__buttonCircle}>
+            <img css={style.vector} src={vectorImg} alt="" />
+          </div>
+        </button>
+      </div>
+    )
+  }
+
+  handleClick = event => {
+    const { history, to, onClick } = this.props
+    console.log(this.props)
+    onClick && onClick(event)
+    to && history.push(to)
+  }
+}
+
+export default ReactRouter.withRouter(NextButton)

src/components/common/next-button/index.js

@@ -0,0 +1,31 @@
+import STYLE from 'constants/style'
+
+export default {
+  button__location: {
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'row-reverse',
+  },
+  continue__button: {
+    color: STYLE.COLOR.CYAN,
+    backgroundColor: 'transparent',
+    display: 'flex',
+    alignItems: 'center',
+    borderWidth: 0,
+  },
+  continue__buttonText: {
+    marginRight: 20,
+    fontWeight: STYLE.FONT.WEIGHT.BOLD,
+    fontSize: 16,
+  },
+  continue__buttonCircle: {
+    width: '48px',
+    height: '48px',
+    background: '#5EBAA0',
+    borderRadius: '70px',
+
+    display: 'grid',
+    justifyContent: 'center',
+    alignContent: 'center',
+  },
+}

src/components/common/next-button/index.style.js

@@ -0,0 +1,22 @@
+import * as ReactRedux from 'react-redux'
+import PropTypes from 'prop-types'
+import authActions from 'redux/actions/auth'
+import SignIn from '..'
+
+SignIn.propTypes = {
+  signIn: PropTypes.func,
+  authError: PropTypes.string,
+}
+
+const mapStateToProp = state => ({
+  authError: state.auth.authError,
+})
+
+const mapDispatchToProps = dispatch => ({
+  signIn: credentials => dispatch(authActions.signIn(credentials)),
+})
+
+export default ReactRedux.connect(
+  mapStateToProp,
+  mapDispatchToProps
+)(SignIn)