<file_sep>export const BASE_URL = "http://localhost:8080";

//AUTHENTICATION URLS
export const LOGIN_URL = BASE_URL + '/login';
export const SIGNUP_URL = BASE_URL + '/signup';

//ROOM URLS
export const CREATE_ROOM_URL = BASE_URL + '/room/create';
export const JOIN_ROOM_URL = BASE_URL + '/room/join';
export const LEAVE_ROOM_URL = BASE_URL + '/room/leave';
export const MEMBERS_OF_ROOM_URL = BASE_URL + '/room/members';
export const TASKS_OF_ROOM_URL = BASE_URL + '/room/tasks';


//TASK URLS
export const TASK_CREATE_URL = BASE_URL + '/task/create';
<file_sep>import React, { Component } from 'react';

import RegularButton from "../../components/inputs/RegularButton";
import TextInput from "../../components/inputs/TextInput";
import * as classes from './joinroom.module.css';
import axios from 'axios';
import { JOIN_ROOM_URL } from '../../constants/ServerRoutes';


class JoinRoom extends Component {
    constructor(props) {
        super(props);
        this.state = {
            roomName: '',
            userID: '',
            error: ''
        };
    }
    handleRoomName = event => {
        this.setState({ roomName: event.target.value });
    }
    authenticateRoom = async () => {
        let loginCredentials = { userID: this.state.userID, roomName: this.state.roomName }
        console.log(loginCredentials)
        let loginStatus = (await axios.post(JOIN_ROOM_URL, loginCredentials)).data;
        console.log(loginStatus)
        let { Result, Error } = loginStatus;
    }
    render() {
        let errorMessage = null;
        if (this.state.error)
            errorMessage = (<p className={classes.error}>{this.state.error}</p>)

        return (
            <div>
                <h1>RoomEase</h1>
                <div className={classes.div}>
                    <p> Join Room </p>
                    <TextInput hint="Enter room name" type="text" onChange={this.handleRoomName} ></TextInput>
                    <RegularButton disabled={this.state.roomName} text="Join" onClick={this.authenticateRoom}></RegularButton>
                    <h3> OR</h3>
                    <RegularButton text="Creat a room" onClick={this.createRoom}></RegularButton>
                </div>
            </div>
        );


    }
}


export default JoinRoom;

<file_sep>//reusable text input
import React from 'react';
import * as classes from './regularbutton.module.css';

const RegularButton = props => {

    return (
        <div>
            <input
                className={classes.Button}
                type="button"
                value={props.text}
                onClick={props.onClick}
                disabled={props.disabled? props.disabled: false}
            ></input>
        </div>
    );
};

export default RegularButton;




<file_sep>import React, { Component } from "react";
import { Link } from "react-router-dom";
import RegularButton from "../../../components/inputs/RegularButton";
import TextInput from "../../../components/inputs/TextInput";
import * as classes from './login.module.css';
import axios from 'axios';
import { LOGIN_URL } from '../../../constants/ServerRoutes';

class Login extends Component {

    state = {
        email: '',
        password: '',
        error: ''
    }

    handleEmail = event => {
        this.setState({ email: event.target.value });
    };
    handlePassword = event => {
        this.setState({ password: event.target.value });
    };

    validate = () => {
        if (this.state.email === '' || this.state.password === '')
            this.setState({ error: "Email id/ Password cannot be empty" })
    }

    authenticateUser = async () => {
        this.validate();

        let loginCredentials = { email: this.state.email, password: <PASSWORD> }
        let loginStatus = (await axios.post(LOGIN_URL, loginCredentials)).data;

        let { responseObject, user } = loginStatus;

        if (responseObject.Result === "Success")
            this.setState({ error: "" })

        else
            this.setState({ error: responseObject.Error })

    }

    render() {

        let erorrMessage = null;

        if (this.state.error)
            erorrMessage = (<p className={classes.error}>{this.state.error}</p>)


        return (
            <div >
                <h1>RoomEase</h1>
                <form className={classes.Form}>
                    <p className={classes.signin}>Sign In</p>
                    <TextInput hint="Enter Email" type="text" onChange={this.handleEmail} />
                    <TextInput hint="Enter Password" type="password" onChange={this.handlePassword} />

                    <RegularButton text="SUBMIT" onClick={this.authenticateUser} />

                    {erorrMessage}
                    <p className="forgot-password text-right">
                        <Link to="signup">Don't have an account? Signup here</Link>
                    </p>
                </form>
            </div>
        );
    }
}

export default Login;