Add reset password & UI change

src/components/login/LoginComponent.tsx

@@ -7,6 +7,9 @@ import Paper from 'material-ui/Paper'
 import TextField from 'material-ui/TextField'
 import RaisedButton from 'material-ui/RaisedButton'
 import FlatButton from 'material-ui/FlatButton'
+import FontIcon from 'material-ui/FontIcon'
+import Divider from 'material-ui/Divider'
+import ActionAndroid from 'material-ui/svg-icons/action/android'
 
 // - Import actions
 import * as authorizeActions from 'actions/authorizeActions'
@@ -16,6 +19,24 @@ import { ILoginComponentState } from './ILoginComponentState'
 // - Create Login component class
 export class LoginComponent extends Component<ILoginComponentProps,ILoginComponentState> {
 
+  styles = {
+    singinOptions: {
+      paddingBottom: 10
+    },
+    divider: {
+      marginBottom: 10,
+      marginTop: 15
+    },
+    restPassword: {
+      lineHeight: 6,
+      fontWeight: 100,
+      fontSize: 'small'
+    },
+    restPasswordLink: {
+      color: '#0095ff'
+    }
+  }
+
   /**
    * Component constructor
    * @param  {object} props is an object properties of component
@@ -30,6 +51,7 @@ export class LoginComponent extends Component<ILoginComponentProps,ILoginCompone
       passwordInputError: '',
       confirmInputError: ''
     }
+
     // Binding function to `this`
     this.handleForm = this.handleForm.bind(this)
 
@@ -136,9 +158,21 @@ export class LoginComponent extends Component<ILoginComponentProps,ILoginCompone
                   fontWeight: 400,
                   lineHeight: '32px',
                   margin: 0
-                }}>Sign in</h2>
+                }} className='zoomOutLCorner animated'>Sign in</h2>
               </div>
+              <div style={this.styles.singinOptions}>
+              <FlatButton
+                icon={<div className='icon-fb icon'></div>}
+              />
+              <FlatButton
+                icon={<div className='icon-google icon'></div>}
+              />
+              <FlatButton
+                icon={<div className='icon-github icon'></div>}
+              />
 
+              </div>
+              <Divider style={this.styles.divider} />
               <TextField
                 onChange={this.handleInputChange}
                 errorText={this.state.emailInputError}
@@ -167,7 +201,7 @@ export class LoginComponent extends Component<ILoginComponentProps,ILoginCompone
                   <RaisedButton label='Login' primary={true} onClick={this.handleForm} tabIndex={3} />
                 </div>
               </div>
-
+                <span style={this.styles.restPassword as any}>Have you forgot your password? <NavLink to='/resetPassword' style={this.styles.restPasswordLink}>reset your password</NavLink></span>
             </div>
           </Paper>
         </div>

src/components/master/MasterComponent.tsx

@@ -11,6 +11,7 @@ import LinearProgress from 'material-ui/LinearProgress'
 import Home from 'components/home'
 import Signup from 'components/signup'
 import Login from 'components/login'
+import ResetPassword from 'components/resetPassword'
 import Setting from 'components/setting'
 import MasterLoading from 'components/masterLoading'
 import { IMasterComponentProps } from './IMasterComponentProps'
@@ -133,6 +134,7 @@ export class MasterComponent extends Component<IMasterComponentProps, IMasterCom
           ? (<Switch>
             <Route path='/signup' component={Signup} />
             <Route path='/settings' component={Setting} />
+            <Route path='/resetPassword' component={ResetPassword} />
             <Route path='/login' render={() => {
               console.log('this.props.authed: ', this.props.authed, 'this.props: ', this.props)
               return (

src/components/resetPassword/IRestPasswordComponentProps.ts

@@ -0,0 +1,16 @@
+export interface IRestPasswordComponentProps {
+
+  /**
+   * Reset password
+   *
+   * @memberof IRestPasswordComponentProps
+   */
+  resetPassword: (email: string) => any
+
+  /**
+   * Redirect to login page
+   *
+   * @memberof IRestPasswordComponentProps
+   */
+  loginPage: () => void
+}

src/components/resetPassword/IRestPasswordComponentState.ts

@@ -0,0 +1,20 @@
+
+export interface IRestPasswordComponentState {
+
+  /**
+   * Email input value
+   *
+   * @type {string}
+   * @memberof IRestPasswordComponentState
+   */
+  emailInput: string
+
+  /**
+   * Email input error text
+   *
+   * @type {string}
+   * @memberof IRestPasswordComponentState
+   */
+  emailInputError: string
+
+}

src/components/resetPassword/RestPasswordComponent.tsx

@@ -0,0 +1,173 @@
+// - Import external components
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { NavLink, withRouter } from 'react-router-dom'
+import { push } from 'react-router-redux'
+import Paper from 'material-ui/Paper'
+import TextField from 'material-ui/TextField'
+import RaisedButton from 'material-ui/RaisedButton'
+import FlatButton from 'material-ui/FlatButton'
+import { firebaseRef, firebaseAuth } from 'data/firebaseClient'
+
+// - Import actions
+import * as authorizeActions from 'actions/authorizeActions'
+import { IRestPasswordComponentProps } from './IRestPasswordComponentProps'
+import { IRestPasswordComponentState } from './IRestPasswordComponentState'
+
+/**
+ * Create component class
+ *
+ * @export
+ * @class RestPasswordComponent
+ * @extends {Component}
+ */
+export class RestPasswordComponent extends Component<IRestPasswordComponentProps,IRestPasswordComponentState> {
+
+  /**
+   * Component constructor
+   * @param  {object} props is an object properties of component
+   */
+  constructor (props: IRestPasswordComponentProps) {
+    super(props)
+
+    this.state = {
+      emailInput: '',
+      emailInputError: ''
+
+    }
+    // Binding function to `this`
+    this.handleForm = this.handleForm.bind(this)
+
+  }
+
+  /**
+   * Handle data on input change
+   * @param  {event} evt is an event of inputs of element on change
+   */
+  handleInputChange = (event: any) => {
+    const target = event.target
+    const value = target.type === 'checkbox' ? target.checked : target.value
+    const name = target.name
+    this.setState({
+      [name]: value
+    })
+
+  }
+
+  /**
+   * Handle register form
+   */
+  handleForm = () => {
+
+    let error = false
+    if (this.state.emailInput === '') {
+      this.setState({
+        emailInputError: 'This field is required'
+      })
+
+      return
+    }
+
+    this.props.resetPassword(this.state.emailInput)
+  }
+
+  /**
+   * Reneder component DOM
+   * @return {react element} return the DOM which rendered by component
+   */
+  render () {
+
+    const paperStyle = {
+      minHeight: 370,
+      width: 450,
+      textAlign: 'center',
+      display: 'block',
+      margin: 'auto'
+    }
+    return (
+      <div>
+
+        <h1 style={{
+          textAlign: 'center',
+          padding: '20px',
+          fontSize: '30px',
+          fontWeight: 500,
+          lineHeight: '32px',
+          margin: 'auto',
+          color: 'rgba(138, 148, 138, 0.2)'
+        }}>Green</h1>
+
+        <div className='animate-bottom'>
+          <Paper style={paperStyle} zDepth={1} rounded={false} >
+            <div style={{ padding: '48px 40px 36px' }}>
+              <div style={{
+                paddingLeft: '40px',
+                paddingRight: '40px'
+              }}>
+
+                <h2 style={{
+                  textAlign: 'left',
+                  paddingTop: '16px',
+                  fontSize: '24px',
+                  fontWeight: 400,
+                  lineHeight: '32px',
+                  margin: 0
+                }} className='zoomOutLCorner animated'>Reset Password</h2>
+              </div>
+
+              <TextField
+                onChange={this.handleInputChange}
+                errorText={this.state.emailInputError}
+                name='emailInput'
+                floatingLabelStyle={{ fontSize: '15px' }}
+                floatingLabelText='Email'
+                type='email'
+              /><br />
+              <br />
+              <br />
+              <div className='settings__button-box'>
+                <div>
+                  <FlatButton label='Back' onClick={this.props.loginPage} />
+                </div>
+                <div>
+                  <RaisedButton label='Reset password' primary={true} onClick={this.handleForm} />
+                </div>
+              </div>
+
+            </div>
+          </Paper>
+        </div>
+      </div>
+    )
+  }
+}
+
+/**
+ * Map dispatch to props
+ * @param  {func} dispatch is the function to dispatch action to reducers
+ * @param  {object} ownProps is the props belong to component
+ * @return {object}          props of component
+ */
+const mapDispatchToProps = (dispatch: Function, ownProps: IRestPasswordComponentProps) => {
+  return {
+    loginPage: () => {
+      dispatch(push('/login'))
+    },
+    resetPassword: (emailAddress: string) => dispatch(authorizeActions.dbResetPassword(emailAddress))
+  }
+}
+
+/**
+ * Map state to props
+ * @param  {object} state is the obeject from redux store
+ * @param  {object} ownProps is the props belong to component
+ * @return {object}          props of component
+ */
+const mapStateToProps = (state: any, ownProps: IRestPasswordComponentProps) => {
+  return {
+
+  }
+}
+
+// - Connect component to redux store
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(RestPasswordComponent as any))

src/components/resetPassword/index.ts

@@ -0,0 +1,2 @@
+import RestPasswordComponent from './RestPasswordComponent'
+export default RestPasswordComponent

src/components/signup/SignupComponent.tsx

@@ -193,7 +193,7 @@ export class SignupComponent extends Component<ISignupComponentProps,ISignupComp
        fontSize: '24px',
        fontWeight: 400,
        lineHeight: '32px',
-       margin: 0}}>Sign up</h2>
+       margin: 0}} className='zoomOutLCorner animated'>Sign up</h2>
          </div>
 
      <TextField