get api returns

backend/PyMatcha/__init__.py

@@ -48,7 +48,6 @@
     "DB_PASSWORD",
     "MAIL_PASSWORD",
     "APP_URL",
-    "REACT_APP_API_URL",
 ]
 
 for item in REQUIRED_ENV_VARS:

frontend/src/components/login_card.js

@@ -1,10 +1,16 @@
 import React, { useState } from 'react';
-import { effectDuration, discard } from '../utils';
+import { effectDuration, discard, apiCall } from '../utils';
 import Loading from '../components/loadings';
 import Input from './input';
 
 const logMe = (history, setState, email, password, from) => async () => {
 	setState('loading');
+	let ret = await apiCall({uri: '/auth/login', method: 'POST', body: {username: email, password}})
+	if (!!ret.is_error) {
+		setState(ret.error.message)
+	} else {
+		console.log(ret)
+	}
 	// API call /auth/login
 	// sessionStorage.setItem('token', 'api call result');
 }
@@ -31,12 +37,15 @@ const passwordInput = (value, setValue, state) => ({
 })
 
 const LoginCard = ({ history, from }) => {
-	const [state, setState] = useState('');
+	const [state, setState] = useState('default');
 	const [email, setEmail] = useState('');
 	const [password, setPassword] = useState('');
 
 	return (
 		<div style={{ height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+			{ state != 'default' && state != 'loading' &&
+				<div className="notification is-danger" style={{paddingTop: '0.5em', paddingBottom: '0.5em'}} > { state } </div>
+			}
 			<Loading style={{ position: 'absolute', left: '50%', top: '50%', opacity: state === 'loading' ? '1' : '0', ...effectDuration(1) }} />
 			<Input {...emailInput(email, setEmail, state)} />
 			<Input {...passwordInput(password, setPassword, state)} />

frontend/src/components/register_card.js

@@ -5,13 +5,13 @@ import Input from './input';
 
 const logMe = (history, setState, email, username, password, from) => async () => {
 	setState('loading');
-	// const ret = await apiCall({uri: '/auth/register', method: 'POST', body: {email, password, username}})
-	// console.log(ret)
-	// API call /auth/register
-	// sessionStorage.setItem('token', 'api call result');
-	sleep(2);
-	setState('ok');
-
+	let ret = {}
+	ret = await apiCall({uri: '/auth/register', method: 'POST', body: {email, password, username}})
+	if (!!ret.error) {
+		setState(ret.error.message);
+	} else {
+		console.log(ret)
+	}
 }
 
 const emailInput = (value, setValue, state) => ({
@@ -43,6 +43,12 @@ const passwordInput = (value, setValue, state) => ({
 	setValue
 })
 
+const registerButton = ({history, password_ok, password1, email, setState, from, username}) => ({
+	className: 'button is-info is-light is-rounded',
+	onClick: logMe(history, setState, email, username, password1, from),
+	...(!password_ok ? { disabled: true } : {})
+})
+
 const RegisterCard = ({ history, from }) => {
 	const [state, setState] = useState('default');
 	const [email, setEmail] = useState('');
@@ -54,16 +60,18 @@ const RegisterCard = ({ history, from }) => {
 	if (state === 'ok') return <p>You will soon receive an confimration email</p>
 	return (
 		<div style={{ height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+			{ state != 'default' && state != 'loading' &&
+				<div className="notification is-danger" style={{paddingTop: '0.5em', paddingBottom: '0.5em'}}> { state } </div>
+			}
 			< Loading style={{ position: 'absolute', left: '50%', top: '50%', opacity: state === 'loading' ? '1' : '0', ...effectDuration(1) }} />
 			<Input {...emailInput(email, setEmail, state)} />
 			<Input {...usernameInput(username, setUsername, state)} />
 			<Input {...passwordInput(password1, setPassword1, state)} placeholder="password" outerStyle={state === 'loading' ? discard('left') : {}} />
 			<Input {...passwordInput(password2, setPassword2, state)} placeholder="Password verification" outerStyle={state === 'loading' ? discard('right') : {}} />
 			<div className='field' style={{ ...(state === 'loading' ? discard('bottom') : {}), marginTop: '2em' }}>
-				<button className={`button is-info ${password_ok ? 'is-light' : 'is-danger'} is-rounded`} onClick={password_ok && logMe(history, setState, email, username, password1, from)}> Register </button>
+				<button {...registerButton({history, password_ok, password1, email, setState, from, username})}> Register </button>
 			</div>
 		</div>
 	)
 }
-
 export default RegisterCard;

frontend/src/utils.js

@@ -1,6 +1,6 @@
 import request from 'request-promise';
 
-const API_URL = process.env.REACT_APP_API_URL || 'http://localhost:8080';
+const API_URL = process.env.REACT_APP_API_URL || 'http://localhost:5000';
 
 const discard = side => {
 	const discardDirections = {
@@ -20,12 +20,19 @@ const discard = side => {
 	})
 }
 
-const apiCall = options => {
+const apiCall = async options => {
 	// TODO add token in the header
 	options.json = true;
 	options.method = options.method || 'GET';
 	options.uri = `${API_URL}/${options.uri}`;
-	return request(options);
+	try {
+		return await request(options); 
+	} catch (e) {
+		console.log(e)
+		if (typeof e.error === 'string')
+			return { error: { message: e.error }, is_error: true }
+		return { ...e.error, is_error: true }
+	};
 }
 
 const getToken = () => sessionStorage.getItem('token')