diff --git a/src/components/Header.js b/src/components/Header.js index d4dcf9dd321a0ae5b41e9f221c66ef7042a358c2..0663cc382019e1aa00f9757a98b4fe5fb1a5508f 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -1,9 +1,9 @@ -import React from "react"; +import React from 'react'; -import LoginForm from "./LoginForm"; -import RegisterForm from "./RegisterForm"; -import GameList from "./GameList"; -import NewGameForm from "./NewGameForm"; +import LoginForm from './LoginForm'; +import RegisterForm from './RegisterForm'; +import GameList from './GameList'; +import NewGameForm from './NewGameForm'; class Header extends React.Component { constructor(props) { @@ -11,7 +11,7 @@ class Header extends React.Component { } state = { - form: "", // Popup form (login, register etc.) + form: '', // Popup form (login, register etc.) username: null, token: null }; @@ -24,23 +24,23 @@ class Header extends React.Component { }; handleState = data => { - sessionStorage.setItem("name", data.name); - sessionStorage.setItem("token", data.token); + sessionStorage.setItem('name', data.name); + sessionStorage.setItem('token', data.token); this.setState({ username: data.name, token: data.token }); }; handleLogout = () => { this.setState({ username: null, token: null }); - sessionStorage.removeItem("token"); + sessionStorage.removeItem('token'); }; // verifies the token (if it exists) on element mount with backend server componentDidMount() { - let token = sessionStorage.getItem("token"); + let token = sessionStorage.getItem('token'); if (token) { - fetch(`${process.env.REACT_APP_URL}/user/verify`, { + fetch(`${process.env.REACT_APP_API_URL}/user/verify`, { headers: { - Authorization: "Bearer " + token + Authorization: 'Bearer ' + token } }) .then(res => res.json()) @@ -49,7 +49,7 @@ class Header extends React.Component { // if token is still valid, login user if (result === true) { this.setState({ - username: sessionStorage.getItem("name"), + username: sessionStorage.getItem('name'), token: token }); // logout user if token has expired / is invalid @@ -67,56 +67,56 @@ class Header extends React.Component { render() { return ( <div> - <div className="header"> + <div className='header'> {!this.state.username && ( <button - id="registerButton" - onClick={() => this.toggleView("register")} + id='registerButton' + onClick={() => this.toggleView('register')} > register </button> )} {!this.state.username && ( - <button id="loginButton" onClick={() => this.toggleView("login")}> + <button id='loginButton' onClick={() => this.toggleView('login')}> login </button> )} {this.state.username && ( <button - id="newGameButton" - onClick={() => this.toggleView("newgame")} + id='newGameButton' + onClick={() => this.toggleView('newgame')} > New Game </button> )} {this.state.username && ( - <button id="logoutButton" onClick={this.handleLogout}> + <button id='logoutButton' onClick={this.handleLogout}> logout </button> )} {this.state.username && <button>{this.state.username}</button>} - <button id="changeLayerButton" onClick={this.props.handleLayerChange}> + <button id='changeLayerButton' onClick={this.props.handleLayerChange}> change layer </button> <GameList handleGameChange={this.props.handleGameChange} /> </div> - {this.state.form === "register" && ( + {this.state.form === 'register' && ( <RegisterForm - view="" + view='' handleState={this.handleState} toggleView={this.toggleView} /> )} - {this.state.form === "login" && ( + {this.state.form === 'login' && ( <LoginForm - view="" + view='' handleState={this.handleState} toggleView={this.toggleView} /> )} - {this.state.form === "newgame" && ( + {this.state.form === 'newgame' && ( <NewGameForm - view="" + view='' handleState={this.handleState} toggleView={this.toggleView} /> diff --git a/src/components/LoginForm.js b/src/components/LoginForm.js index 3c559b053bd7e78408fcac4f0e2f6aab17bfce08..dbf1c833d38183336d0d372c975699694ed5db65 100644 --- a/src/components/LoginForm.js +++ b/src/components/LoginForm.js @@ -1,13 +1,13 @@ -import React from "react"; +import React from 'react'; export class LoginForm extends React.Component { constructor(props) { super(props); this.state = { - errorMsg: "", - username: "", - password: "" + errorMsg: '', + username: '', + password: '' }; } @@ -38,11 +38,11 @@ export class LoginForm extends React.Component { e.preventDefault(); // Send login info to the server - fetch(`${process.env.REACT_APP_URL}/user/login`, { - method: "POST", + fetch(`${process.env.REACT_APP_API_URL}/user/login`, { + method: 'POST', headers: { - Accept: "application/json", - "Content-Type": "application/json" + Accept: 'application/json', + 'Content-Type': 'application/json' }, body: JSON.stringify({ name: name, @@ -69,47 +69,47 @@ export class LoginForm extends React.Component { }; componentDidMount() { - document.addEventListener("keyup", this.handleEsc); + document.addEventListener('keyup', this.handleEsc); } componentWillUnmount() { - document.removeEventListener("keyup", this.handleEsc); + document.removeEventListener('keyup', this.handleEsc); } render() { return ( - <div className="fade-main"> - <div className="sticky"> + <div className='fade-main'> + <div className='sticky'> <span - id="closeLoginFormX" - className="close" + id='closeLoginFormX' + className='close' onClick={this.handleView} > × </span> </div> - <div className="login"> + <div className='login'> <form onSubmit={this.handleLogin}> <h1>demo login</h1> <br /> <input - placeholder="Enter Username" - name="username" + placeholder='Enter Username' + name='username' value={this.state.username} onChange={this.handleChange} - id="loginUsernameInput" + id='loginUsernameInput' /> <br /> <input - placeholder="Enter password" - type="password" - name="password" + placeholder='Enter password' + type='password' + name='password' value={this.state.password} onChange={this.handleChange} - id="loginPasswordInput" + id='loginPasswordInput' /> <br /> - <button id="submitLoginButton" type="submit"> + <button id='submitLoginButton' type='submit'> login </button> <h2>{this.state.errorMsg}</h2>