user authentication in browser

1 files changed, 192 insertions, 0 deletions

diff --git a/client/components/LoggedOutView.jsx b/client/components/LoggedOutView.jsx
new file mode 100644
index 0000000..e058455
--- /dev/null
+++ b/client/components/LoggedOutView.jsx
@@ -0,0 +1,192 @@
+import React from 'react'
+import ModalDialog from './ModalDialog.jsx'
+
+export default class LoggedOutView extends React.Component {
+  constructor() {
+    super()
+    this.state = { modal: null }
+    this.showLogin = this.showLogin.bind(this)
+    this.showSignup = this.showSignup.bind(this)
+    this.closeModal = this.closeModal.bind(this)
+  }
+  showLogin() {
+    this.setState({ modal: 'login' })
+  }
+  showSignup() {
+    this.setState({ modal: 'signup' })
+  }
+  closeModal() {
+    this.setState({ modal: '' })
+  }
+  render() {
+    const loginVisible = this.state.modal == 'login'
+    const signupVisible = this.state.modal == 'signup'
+    return (
+      <div>
+        <Welcome
+          onLoginClick={this.showLogin}
+          onSignupClick={this.showSignup} />
+        <LoginForm
+          client={this.props.client}
+          visible={loginVisible}
+          onClose={this.closeModal} />
+        <SignupForm
+          client={this.props.client}
+          visible={signupVisible}
+          onClose={this.closeModal} />
+      </div>
+    )
+  }
+}
+
+class Welcome extends React.Component {
+  render() {
+    return (
+      <div className='welcome inner'>
+        <h1>Calorie Counter</h1>
+        <button onClick={this.props.onLoginClick}>
+          Log In
+        </button>
+        <button onClick={this.props.onSignupClick}>
+          Sign Up
+        </button>
+      </div>
+    )
+  }
+}
+
+class LoginForm extends React.Component {
+  constructor() {
+    super()
+    this.state = {
+      email: '',
+      password: '',
+      error: null,
+    }
+    this.updateState = this.updateState.bind(this)
+    this.handleSubmit = this.handleSubmit.bind(this)
+  }
+  updateState(event){
+    const name = event.target.name
+    const value = event.target.value
+    this.setState({
+      [name]: value,
+      error: null,
+    })
+  }
+  handleSubmit(event) {
+    event.preventDefault()
+    this.props.client.authenticate({
+      type: 'local',
+      email: this.state.email,
+      password: this.state.password,
+    }).then(res => {
+      console.log('Authenticated!', res);
+      // this.props.client.set('user', res.data)
+      // something in this library is hardcoded accessToken
+      // return this.props.client.passport.setJWT(res.token)
+    }).catch(error => {
+      console.error('Error authenticating!', error);
+      this.setState({
+        error: error.toString()
+      })
+    })
+  }
+  render() {
+    return (
+      <ModalDialog visible={this.props.visible} onClose={this.props.onClose}>
+        <form onSubmit={this.handleSubmit}>
+          <input type='email'
+                 name='email'
+                 placeholder='Email address'
+                 onChange={this.updateState}
+          /><br/>
+          <input type='password'
+                 name='password'
+                 placeholder='Password'
+                 onChange={this.updateState}
+          /><br/>
+          <input type='submit'
+                 value='Log In'
+          />
+          <div className='error'>{this.state.error}</div>
+        </form>
+      </ModalDialog>
+    )
+  }
+}
+
+class SignupForm extends React.Component {
+  constructor() {
+    super()
+    this.state = {
+      email: '',
+      password: '',
+      goal: 0,
+      error: null,
+    }
+    this.updateState = this.updateState.bind(this)
+    this.handleSubmit = this.handleSubmit.bind(this)
+  }
+  updateState(event){
+    const name = event.target.name
+    const value = event.target.value
+    this.setState({
+      [name]: value,
+      error: null,
+    })
+  }
+  handleSubmit(event) {
+    event.preventDefault()
+    const usersService = this.props.client.service('users')
+    usersService.create(this.state).then(result => {
+      return this.props.client.authenticate({
+        strategy: 'local',
+        email: this.state.email,
+        password: this.state.password,
+      })
+    })
+    .then(res => {
+      this.props.client.set('user', res.data)
+      this.props.client.set('token', res.accessToken)
+      return client.passport.verifyJWT(res.accessToken)
+    })
+    .then(payload => {
+      console.log(payload)
+    }).catch(error => {
+      console.error(error)
+      this.setState({
+        error: error.toString()
+      })
+    })
+  }
+  render() {
+    return (
+      <ModalDialog visible={this.props.visible} onClose={this.props.onClose}>
+        <form onSubmit={this.handleSubmit}>
+          <input type='email'
+                 name='email'
+                 placeholder='Email address'
+                 onChange={this.updateState}
+          /><br/>
+          <input type='password'
+                 name='password'
+                 placeholder='Password'
+                 onChange={this.updateState}
+          /><br/>
+          <input type='number'
+                 name='goal'
+                 min='0'
+                 max='100000'
+                 placeholder='Calorie Goal'
+                 onChange={this.updateState}
+          /><br/>
+          <input type='submit'
+                 value='Sign Up'
+          />
+          <div className='error'>{this.state.error}</div>
+        </form>
+      </ModalDialog>
+    )
+  }
+}