Merge branch 'master' into v1.4.0

Author: Scott Prue

examples/complete/material/package.json

@@ -71,7 +71,7 @@
     "react-tap-event-plugin": "1.0.0",
     "redux": "^3.6.0",
     "redux-auth-wrapper": "^1.0.0",
-    "redux-form": "^6.4.3",
+    "redux-form": "^6.6.1",
     "redux-thunk": "^2.2.0"
   },
   "devDependencies": {

examples/complete/material/src/constants/formNames.js

@@ -1,6 +1,12 @@
 export const ACCOUNT_FORM_NAME = 'account'
+export const RECOVER_CODE_FORM_NAME = 'recoverCode'
+export const RECOVER_EMAIL_FORM_NAME = 'recoverEmail'
 
 export default {
   ACCOUNT_FORM_NAME,
-  account: ACCOUNT_FORM_NAME
+  RECOVER_CODE_FORM_NAME,
+  RECOVER_EMAIL_FORM_NAME,
+  account: ACCOUNT_FORM_NAME,
+  recoverCode: RECOVER_CODE_FORM_NAME,
+  recoverEmail: RECOVER_EMAIL_FORM_NAME
 }

examples/complete/material/src/constants/paths.js

@@ -2,10 +2,12 @@ export const LIST_PATH = '/projects'
 export const ACCOUNT_PATH = '/account'
 export const LOGIN_PATH = '/login'
 export const SIGNUP_PATH = '/signup'
+export const RECOVER_PATH = '/recover'
 
 export default {
   LIST_PATH,
   ACCOUNT_PATH,
   LOGIN_PATH,
-  SIGNUP_PATH
+  SIGNUP_PATH,
+  RECOVER_PATH
 }

examples/complete/material/src/routes/Account/components/AccountForm/AccountForm.js

@@ -1,36 +1,69 @@
 import React, { PropTypes } from 'react'
-
-import classes from './AccountForm.scss'
-import ProviderDataForm from '../ProviderDataForm/ProviderDataForm'
-
-import { Field } from 'redux-form'
+import { connect } from 'react-redux'
+import { Field, reduxForm, submit } from 'redux-form'
+import { firebaseConnect, pathToJS, isLoaded } from 'react-redux-firebase'
+import RaisedButton from 'material-ui/RaisedButton'
 import TextField from 'components/TextField'
+import { List, ListItem } from 'material-ui/List'
+import AccountCircle from 'material-ui/svg-icons/action/account-circle'
+import { ACCOUNT_FORM_NAME } from 'constants/formNames'
+import classes from './AccountForm.scss'
 
-export const AccountForm = ({ account, handleSubmit, submitting }) => (
-  <div className={classes.container}>
+export const AccountForm = ({ account, handleSubmit, submitForm, submitting }) => (
+  <form className={classes.container} onSubmit={handleSubmit}>
     <h4>Account</h4>
-    <div>
-      <Field
-        name='username'
-        component={TextField}
-        label='Username'
-      />
-    </div>
-    <div>
-      <Field
-        name='email'
-        component={TextField}
-        label='Email'
-      />
-    </div>
+    <Field
+      name='displayName'
+      component={TextField}
+      label='Name'
+    />
+    <Field
+      name='email'
+      component={TextField}
+      label='Email'
+    />
     <div>
       <h4>Linked Accounts</h4>
       {
-        account.providerData &&
-          <ProviderDataForm providerData={account.providerData} />
+        account.providerData
+          ?
+            <List>
+              {
+                account.providerData.map((providerAccount, i) =>
+                  <ListItem
+                    key={i}
+                    primaryText={providerAccount.providerId}
+                    leftIcon={<AccountCircle />}
+                    nestedItems={[
+                      <ListItem
+                        key='display_name'
+                        primaryText={providerAccount.displayName}
+                      />,
+                      <ListItem
+                        key='email'
+                        label='email'
+                        primaryText={providerAccount.email}
+                        disabled
+                      />
+                    ]}
+                  />
+                )
+              }
+            </List>
+          :
+          null
       }
     </div>
-  </div>
+    <div>
+      <RaisedButton
+        label='Save'
+        primary
+        type='submit'
+        onTouchTap={submitForm}
+        disabled={submitting}
+      />
+    </div>
+  </form>
 )
 
 AccountForm.propTypes = {
@@ -40,4 +73,14 @@ AccountForm.propTypes = {
   handleSubmit: PropTypes.func,
   submitting: PropTypes.bool
 }
-export default AccountForm
+
+const form = reduxForm({
+  form: ACCOUNT_FORM_NAME,
+  enableReinitialization: true
+})(AccountForm)
+
+export default connect(
+  ({ firebase }) => ({
+    initialValues: pathToJS(firebase, 'profile')
+  }),
+)(form)

examples/complete/material/src/routes/Account/containers/AccountContainer.js

@@ -3,6 +3,8 @@ import Paper from 'material-ui/Paper'
 import { connect } from 'react-redux'
 import { reduxForm } from 'redux-form'
 import { firebaseConnect, pathToJS, isLoaded } from 'react-redux-firebase'
+import { submit } from 'redux-form'
+import { reduxFirebase as rfConfig } from 'config'
 import { ACCOUNT_FORM_NAME } from 'constants/formNames'
 import { UserIsAuthenticated } from 'utils/router'
 import defaultUserImageUrl from 'static/User.png'
@@ -11,31 +13,25 @@ import AccountForm from '../components/AccountForm/AccountForm'
 import classes from './AccountContainer.scss'
 
 @UserIsAuthenticated // redirect to /login if user is not authenticated
-@firebaseConnect()
+@firebaseConnect() // add this.props.firebase
 @connect(
-  // Map state to props
+  // Map redux state to props
   ({ firebase }) => ({
-    authError: pathToJS(firebase, 'authError'),
+    auth: pathToJS(firebase, 'auth'),
     account: pathToJS(firebase, 'profile'),
-    initialValues: pathToJS(firebase, 'profile')
-  })
+  }),
+  {
+    // action for submitting redux-form
+    submitForm: () => (dispatch) => dispatch(submit(ACCOUNT_FORM_NAME))
+  }
 )
-@reduxForm({
-  form: ACCOUNT_FORM_NAME,
-  enableReinitialization: true
-})
 export default class Account extends Component {
-
-  static contextTypes = {
-    router: React.PropTypes.object.isRequired
-  }
-
   static propTypes = {
     account: PropTypes.object,
     firebase: PropTypes.shape({
+      update: PropTypes.func.isRequired,
       logout: PropTypes.func.isRequired,
-      uploadAvatar: PropTypes.func,
-      updateAccount: PropTypes.func
+      uploadAvatar: PropTypes.func
     })
   }
 
@@ -51,8 +47,17 @@ export default class Account extends Component {
     })
   }
 
+  updateAccount = (newData) => {
+    return this.props.firebase
+      .update(`${rfConfig.userProfile}/${this.props.auth.uid}`, newData)
+      .catch((err) => {
+        console.error('Error updating account', err)
+        // TODO: Display error to user
+      })
+  }
+
   render () {
-    const { account, firebase: { saveAccount } } = this.props
+    const { account, submitForm } = this.props
 
     if (!isLoaded(account)) {
       return <LoadingSpinner />
@@ -71,8 +76,9 @@ export default class Account extends Component {
             </div>
             <div className={classes.meta}>
               <AccountForm
-                onSubmit={saveAccount}
                 account={account}
+                submitForm={submitForm}
+                onSubmit={this.updateAccount}
               />
             </div>
           </div>
@@ -81,3 +87,4 @@ export default class Account extends Component {
     )
   }
 }
+0

examples/complete/material/src/routes/Recover/components/EmailForm/EmailForm.js

@@ -0,0 +1,47 @@
+import React, { PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { Field, reduxForm, submit } from 'redux-form'
+import { firebaseConnect, pathToJS, isLoaded } from 'react-redux-firebase'
+import RaisedButton from 'material-ui/RaisedButton'
+import TextField from 'components/TextField'
+import { List, ListItem } from 'material-ui/List'
+import AccountCircle from 'material-ui/svg-icons/action/account-circle'
+import { RECOVER_EMAIL_FORM_NAME } from 'constants/formNames'
+import classes from './EmailForm.scss'
+
+const required = value => value ? undefined : 'Required'
+const email = value =>
+  value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) ?
+  'Invalid email address' : undefined
+
+export const EmailForm = ({ account, handleSubmit, submitting, pristine, valid }) => (
+  <form className={classes.container} onSubmit={handleSubmit}>
+    <h4>Send Recovery Code To Email</h4>
+    <Field
+      name='email'
+      component={TextField}
+      label='Email'
+      validate={[required, email]}
+    />
+    <div className={classes.submit}>
+      <RaisedButton
+        label='Send'
+        primary
+        type='submit'
+        disabled={submitting}
+      />
+    </div>
+  </form>
+)
+
+EmailForm.propTypes = {
+  account: PropTypes.shape({
+    providerData: PropTypes.array
+  }),
+  handleSubmit: PropTypes.func.isRequired,
+  submitting: PropTypes.bool
+}
+
+export default reduxForm({
+  form: RECOVER_EMAIL_FORM_NAME
+})(EmailForm)

examples/complete/material/src/routes/Recover/components/EmailForm/EmailForm.scss

@@ -0,0 +1,10 @@
+@import 'base';
+
+.container {
+  @extend .flex-column-center;
+  padding: 3rem;
+}
+
+.submit {
+  margin-top: 2rem;
+}

examples/complete/material/src/routes/Recover/components/EmailForm/index.js

@@ -0,0 +1,3 @@
+import EmailForm from './EmailForm'
+
+export default EmailForm

examples/complete/material/src/routes/Recover/components/RecoverForm/RecoverForm.js

@@ -0,0 +1,57 @@
+import React, { PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { Field, reduxForm, submit } from 'redux-form'
+import { firebaseConnect, pathToJS, isLoaded } from 'react-redux-firebase'
+import RaisedButton from 'material-ui/RaisedButton'
+import Subheader from 'material-ui/Subheader'
+import TextField from 'components/TextField'
+import { List, ListItem } from 'material-ui/List'
+import AccountCircle from 'material-ui/svg-icons/action/account-circle'
+import { RECOVER_CODE_FORM_NAME } from 'constants/formNames'
+import classes from './RecoverForm.scss'
+
+const required = value => value ? undefined : 'Required'
+
+export const RecoverForm = ({ account, handleSubmit, onRecoverClick, submitting, pristine, valid }) => (
+  <form className={classes.container} onSubmit={handleSubmit}>
+    <h4>Recover Using Code From Email</h4>
+    <div>
+      <Subheader>
+        <strong>Note:</strong> Not used for OAuth
+      </Subheader>
+    </div>
+    <Field
+      name='code'
+      component={TextField}
+      label='Recover Code'
+      validate={[required]}
+    />
+    <Field
+      name='password'
+      component={TextField}
+      label='New Password'
+      validate={[required]}
+    />
+    <div className={classes.submit}>
+      <RaisedButton
+        label='Recover'
+        primary
+        type='submit'
+        disabled={submitting}
+      />
+    </div>
+  </form>
+)
+
+RecoverForm.propTypes = {
+  account: PropTypes.shape({
+    providerData: PropTypes.array
+  }),
+  handleSubmit: PropTypes.func,
+  onRecoverClick: PropTypes.func,
+  submitting: PropTypes.bool
+}
+
+export default reduxForm({
+  form: RECOVER_CODE_FORM_NAME
+})(RecoverForm)

examples/complete/material/src/routes/Recover/components/RecoverForm/RecoverForm.scss

@@ -0,0 +1,10 @@
+@import 'base';
+
+.container {
+  @extend .flex-column-center;
+  padding: 3rem;
+}
+
+.submit {
+  margin-top: 2rem;
+}