Feature/194

client/src/backendCalls/auth/registerUser.js

@@ -0,0 +1,53 @@
+/**
+ *   Registers a user with the given email, password, first and last name.
+ *   If either first_name or last_name are undefined, the user will be registered
+ *   without a first or last name respectively.
+ */
+
+import store from '../../store.js';
+
+export async function registerUser(email, password, first_name, last_name) {
+  var details = {
+    'email': email,
+    'password': password,
+    'first_name': first_name,
+    'last_name': last_name
+  }
+
+  var formBody = [];
+  for (var property in details) {
+    if (details[property] === undefined) {
+      continue;
+    }
+    var encodedKey = encodeURIComponent(property);
+    var encodedValue = encodeURIComponent(details[property]);
+    formBody.push(encodedKey + '=' + encodedValue);
+  }
+  formBody = formBody.join('&');
+
+  const response = await fetch(store.authApiBase + '/user', {
+      method: 'POST',
+      mode: 'cors',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      body: formBody,
+    });
+
+    const body = await response.json();
+
+    console.log(body);
+    if (response.status !== 201) {
+      if (body.error) {
+        return body.error;
+      }
+      else {
+        return JSON.stringify(body);
+      }
+    } else {
+        return 200;
+    }
+}
+
+export default registerUser

client/src/backendCalls/auth/userLogin.js

@@ -0,0 +1,45 @@
+import store from '../../store.js';
+
+export async function userLogin(email, password) {
+  var details = {
+    'email': email,
+    'password': password,
+  }
+
+  var formBody = [];
+  for (var property in details) {
+    if (details[property] === undefined) {
+      continue;
+    }
+    var encodedKey = encodeURIComponent(property);
+    var encodedValue = encodeURIComponent(details[property]);
+    formBody.push(encodedKey + '=' + encodedValue);
+  }
+  formBody = formBody.join('&');
+
+  const response = await fetch(store.authApiBase + '/user/login', {
+      method: 'POST',
+      mode: 'cors',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      body: formBody,
+    });
+
+    const body = await response.json();
+
+    console.log(body);
+    if (response.status !== 201) {
+      if (body.error) {
+        return body.error;
+      }
+      else {
+        document.cookie = body.token;
+        return JSON.stringify(body);
+      }
+    } else {
+        return 200;
+    }
+}
+
+export default userLogin

client/src/store.js

@@ -1,5 +1,6 @@
 const store = {
   searchResults: [],
   apiBase: 'https://internado.ubclaunchpad.com',
+  authApiBase: 'http://localhost:5050'
 };
 export default store;

client/src/store.js.orig

@@ -0,0 +1,12 @@
+const store = {
+  searchResults: [],
+<<<<<<< HEAD
+  apiBase: 'http://localhost:5000',
+  authApiBase: 'http://localhost:5050'
+||||||| merged common ancestors
+  apiBase: 'http://localhost:5000'
+=======
+  apiBase: 'https://internado.ubclaunchpad.com',
+>>>>>>> develop
+};
+export default store;

client/src/views/Login.js

@@ -1,35 +1,81 @@
-import React from 'react';
+import React, {Component} from 'react';
 import '../sass/LoginSignup.scss';
 import { Button, Form, Grid, Header, Message, Segment } from 'semantic-ui-react';
+import userLogin from '../backendCalls/auth/userLogin.js';
+class LoginForm extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      formData: new Map([
+        ['email', ''],
+        ['password', ''],
+      ]),
+      result: ''
+    };
+  }
 
-const LoginForm = () => (
-  <div className='login-form'>
-    <Grid textAlign='center' style={{ height: '100%' }} verticalAlign='middle'>
-      <Grid.Column style={{ maxWidth: 450 }}>
-        <Header as='h2' color='black' textAlign='center'>
-          Log in
-        </Header>
-        <Form size='large'>
-          <Segment raised>
-            <Form.Input fluid icon='user' iconPosition='left' placeholder='Username/email' />
-            <Form.Input
-              fluid
-              icon='key'
-              iconPosition='left'
-              placeholder='Password'
-              type='password'
-            />
-            <Button color='blue' fluid size='large'>
-              Login
-            </Button>
-          </Segment>
-        </Form>
-        <Message>
-          Don't have an Account? <a href='/signup'>Sign Up</a>
-        </Message>
-      </Grid.Column>
-    </Grid>
-    </div>
-)
+  handleDataChange = (e, item) => {
+    let newData = this.state.formData;
+    newData[item] = e.target.value;
+    this.setState({formData: newData});
+  };
 
-export default LoginForm;
+  handleSubmit = async(e) => {
+    let data = this.state.formData;
+    let response = await userLogin(data['email'], data['password']);
+    let responseHTML = '';
+    try {
+      // If the login failed, the next line will fail to parse response
+      JSON.parse(response);
+      responseHTML = 'Logged in successfully';
+    } catch {
+      // If the login failed, response will be a string describing the failure
+      responseHTML = <font color='#ff0000'> {response} </font>;
+    }
+    this.setState({result: responseHTML});
+  };
+
+  render() {
+    return (
+      <div className='login-form'>
+        <Grid textAlign='center' style={{ height: '100%' }} verticalAlign='middle'>
+          <Grid.Column style={{ maxWidth: 450 }}>
+            <Header as='h2' color='black' textAlign='center'>
+              Log in
+            </Header>
+            <Form size='large'>
+              <Segment raised>
+                <Form.Input fluid icon='user'
+                  iconPosition='left'
+                  placeholder='email'
+                  value={this.state.formData['email']}
+                  onChange={(e) => this.handleDataChange(e, 'email')}
+                />
+                <Form.Input
+                  fluid
+                  icon='key'
+                  iconPosition='left'
+                  placeholder='Password'
+                  type='password'
+                  value={this.state.formData['password']}
+                  onChange={(e) => this.handleDataChange(e, 'password')}
+                />
+                <Button color='blue' fluid size='large' onClick={this.handleSubmit}>
+                  Login
+                </Button>
+              </Segment>
+            </Form>
+            <p>
+              {this.state.result}
+            </p>
+            <Message>
+              Don't have an Account? <a href='/signup'>Sign Up</a>
+            </Message>
+          </Grid.Column>
+        </Grid>
+        </div>
+   )
+  }
+}
+
+export default LoginForm;

client/src/views/SignUp.js

@@ -1,43 +1,105 @@
-import React from 'react';
+import React, {Component} from 'react';
 import '../sass/LoginSignup.scss';
 import { Button, Form, Grid, Header, Message, Segment } from 'semantic-ui-react';
+import registerUser from '../backendCalls/auth/registerUser.js';
 
-const SignUpForm = () => (
-  <div className='signup-form'>
-    <Grid textAlign='center' style={{ height: '100%' }} verticalAlign='middle'>
-      <Grid.Column style={{ maxWidth: 450 }}>
-        <Header as='h2' color='black' textAlign='center'>
-          Sign up
-        </Header>
-        <Form size='large'>
-          <Segment raise>
-            <Form.Input fluid icon='user' iconPosition='left' placeholder='Username/email' />
-            <Form.Input fluid icon='mail' iconPosition='left' placeholder='Email' />
-            <Form.Input
-              fluid
-              icon='key'
-              iconPosition='left'
-              placeholder='Password'
-              type='password'
-            />
-            <Form.Input
-              fluid
-              icon='key'
-              iconPosition='left'
-              placeholder='Repeat password'
-              type='password'
-            />
-            <Button color='blue' fluid size='large'>
-              Create your account
-            </Button>
-          </Segment>
-        </Form>
-        <Message>
-          Already a member? <a href='/login'>Log in</a>
-        </Message>
-      </Grid.Column>
-    </Grid>
-  </div>
-)
+class SignUpForm extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      formData: new Map([
+        ['username', ''],
+        ['email', ''],
+        ['password', ''],
+        ['repeatPassword', '']
+      ]),
+      result: ''
+    };
+  }
 
-export default SignUpForm;
+  handleDataChange = (e, item) => {
+    let newData = this.state.formData;
+    newData[item] = e.target.value;
+    this.setState({formData: newData});
+  };
+
+  handleSubmit = async(e) => {
+    let data = this.state.formData;
+      if (data['password'] !== data['repeatPassword']) {
+        this.setState({result: <font color='#ff0000'> Passwords do not match</font>})
+
+      } else {
+        let response = await registerUser(data['email'], data['password'], data['username'], undefined);
+        let responseHTML = '';
+        if (response === 200) {
+          responseHTML = 'Account successfully created';
+        } else {
+          responseHTML = <font color='#ff0000'> {response} </font>;
+        }
+        this.setState({result: responseHTML});
+      }
+  };
+
+  render() {
+    return (
+      <div className='signup-form'>
+        <Grid textAlign='center' style={{ height: '100%' }} verticalAlign='middle'>
+          <Grid.Column style={{ maxWidth: 450 }}>
+            <Header as='h2' color='black' textAlign='center'>
+              Sign up
+            </Header>
+            <Form size='large'>
+              <Segment raise>
+                <Form.Input
+                  fluid
+                  icon='user'
+                  iconPosition='left'
+                  placeholder='Username/email'
+                  value={this.state.formData['username']}
+                  onChange={(e) => this.handleDataChange(e, 'username')}
+                />
+                <Form.Input
+                  fluid
+                  icon='mail'
+                  iconPosition='left'
+                  placeholder='Email'
+                  value={this.state.formData['email']}
+                  onChange={(e) => this.handleDataChange(e, 'email')}
+                />
+                <Form.Input
+                  fluid
+                  icon='key'
+                  iconPosition='left'
+                  placeholder='Password'
+                  type='password'
+                  value={this.state.formData['password']}
+                  onChange={(e) => this.handleDataChange(e, 'password')}
+                />
+                <Form.Input
+                  fluid
+                  icon='key'
+                  iconPosition='left'
+                  placeholder='Repeat password'
+                  type='password'
+                  value={this.state.formData['repeatPassword']}
+                  onChange={(e) => this.handleDataChange(e, 'repeatPassword')}
+                />
+                <Button color='blue' fluid size='large' onClick={this.handleSubmit}>
+                  Create your account
+                </Button>
+              </Segment>
+            </Form>
+            <p>
+              {this.state.result}
+            </p>
+            <Message>
+              Already a member? <a href='/login'>Log in</a>
+            </Message>
+          </Grid.Column>
+        </Grid>
+      </div>
+    )
+  }
+}
+
+export default SignUpForm;