Merge pull request #9 from sorrelbri/guest_account

Guest account

packages/play-node-go/public/reset.css

@@ -51,3 +51,8 @@ table {
 	border-collapse: collapse;
 	border-spacing: 0;
 }
+
+button {
+  background: none;
+  border: none;
+}

packages/play-node-go/src/components/Button/Guest/Guest.js

@@ -0,0 +1,34 @@
+import React from "react";
+import authServices from "../../../services/authServices";
+
+const Guest = ({ dispatch }) => {
+  const handleClick = async (e) => {
+    e.preventDefault();
+    // dispatch to guest endpoint
+    const guestResponse = await authServices.guestService();
+
+    if (guestResponse.errors) {
+      const authError = guestResponse.errors[0].auth;
+      return dispatch({
+        type: "ERR",
+        message: "AUTH_ERROR",
+        body: { authError },
+      });
+    }
+
+    return dispatch({
+      type: "AUTH",
+      message: "GUEST",
+      body: guestResponse,
+    });
+  };
+  return (
+    <>
+      <button className="nav__section__button" onClick={handleClick}>
+        Continue As Guest
+      </button>
+    </>
+  );
+};
+
+export default Guest;

packages/play-node-go/src/components/Form/Auth/Auth.js

@@ -1,45 +1,49 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 
-import Login from '../Login/Login';
+import Login from "../Login/Login";
-import Signup from '../Signup/Signup';
+import Signup from "../Signup/Signup";
+import Guest from "../../Button/Guest/Guest";
 
 const Auth = (props) => {
-  const [ showForm, setShowForm ] = useState('login')
+  const [showForm, setShowForm] = useState("login");
   const { state, dispatch } = props;
 
   return (
     <>
-      <div 
+      <div
-        className="nav__section nav__section--auth" 
+        className="nav__section nav__section--auth"
-        onClick={()=>{setShowForm('login')}}
+        onClick={() => {
+          setShowForm("login");
+        }}
       >
-        <p 
+        <p className="nav__section__label">Login</p>
-          className="nav__section__label"
-        >Login</p>
 
-        {
+        {showForm === "login" ? (
-          showForm === 'login' 
+          <Login dispatch={dispatch} state={state} />
-          ? <Login dispatch={dispatch} state={state}/> 
+        ) : (
-          : <></>
+          <></>
-        }
+        )}
       </div>
 
       <div
-        className="nav__section nav__section--auth" 
+        className="nav__section nav__section--auth"
-        onClick={()=>{setShowForm('signup')}}
+        onClick={() => {
+          setShowForm("signup");
+        }}
       >
-        <p 
+        <p className="nav__section__label">Signup</p>
-          className="nav__section__label"
-        >Signup</p>
 
-      {
+        {showForm === "signup" ? (
-        showForm === 'signup' 
+          <Signup dispatch={dispatch} state={state} />
-        ? <Signup dispatch={dispatch} state={state}/> 
+        ) : (
-        : <></>
+          <></>
-      }
+        )}
+      </div>
+      <div className="nav__section nav__section--auth">
+        <Guest dispatch={dispatch} />
       </div>
     </>
   );
-}
+};
 
 export default Auth;

packages/play-node-go/src/pages/Layout/MainWrapper/MainWrapper.scss

@@ -1,4 +1,5 @@
 @import '../../../../public/stylesheets/partials/mixins';
+@import '../../../../public/stylesheets/partials/variables';
 
 div.main-wrapper {
   display: flex;
@@ -33,4 +34,15 @@ div.main-wrapper {
       height: 100%;
     }
   }
+}
+
+button {
+  color:map-get($colors, 'sidebar_link');
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 110%;
+  font-weight: bold;
+  margin-bottom: .5em;
+  padding: 0;
+  text-decoration: none;
 }

packages/play-node-go/src/pages/Layout/NavBar/NavBar.js

@@ -1,29 +1,36 @@
-import React from 'react';
+import React from "react";
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
-import './NavBar.scss';
+import "./NavBar.scss";
-import Logo from '../../../components/Display/Logo/Logo';
+import Logo from "../../../components/Display/Logo/Logo";
-
-const NavBar = (props) => {
 
+const NavBar = ({ state }) => {
   return (
     <div className="NavBar" data-testid="NavBar">
-      <Link to="/home" >
+      <Link to="/home">
-        <div className="NavBar__logo"><Logo /></div>
+        <div className="NavBar__logo">
+          <Logo />
+        </div>
       </Link>
 
-      <Link to="/home" >
+      <Link to="/home">
-        <div className="NavBar__menu-item NavBar__home"><p className="--link">Find a Game</p></div>
+        <div className="NavBar__menu-item NavBar__home">
+          <p className="--link">Find a Game</p>
+        </div>
       </Link>
-      
+
       <Link to="/news">
-        <div className="NavBar__menu-item NavBar__news"><p className="--link">News</p></div>
+        <div className="NavBar__menu-item NavBar__news">
+          <p className="--link">News</p>
+        </div>
       </Link>
 
       <Link to="/account">
-        <div className="NavBar__menu-item NavBar__account">{props.user ? props.user.username : <></>}</div>
+        <div className="NavBar__menu-item NavBar__account">
+          {state.user.username ? state.user.username : <></>}
+        </div>
       </Link>
     </div>
   );
-}
+};
 
-export default NavBar;
+export default NavBar;

packages/play-node-go/src/reducers/auth/reducer.auth.js

@@ -1,20 +1,23 @@
 export const authReducer = (state, action) => {
   switch (action.message) {
-    case 'LOGIN':
+    case "LOGIN":
-      return loginReducer(state, action);
-      
-    case 'SIGNUP':
       return loginReducer(state, action);
 
-    case 'LOGOUT':
+    case "SIGNUP":
+      return loginReducer(state, action);
+
+    case "GUEST":
+      return loginReducer(state, action);
+
+    case "LOGOUT":
       return state;
 
     default:
       return state;
-  } 
+  }
-}
+};
 
 function loginReducer(state, action) {
   const newUser = action.body;
-  return {...state, user: newUser };  
+  return { ...state, user: newUser };
-}
+}

packages/play-node-go/src/services/authServices.js

@@ -1,43 +1,58 @@
-import config from '../config';
+import config from "../config";
 
 const authEndpoint = config.authAddress;
-const signupEndpoint = `${authEndpoint}/signup`
+const signupEndpoint = `${authEndpoint}/signup`;
-const loginEndpoint = `${authEndpoint}/login`
+const loginEndpoint = `${authEndpoint}/login`;
+const guestEndpoint = `${authEndpoint}/guest`;
 
 var headers = new Headers();
-headers.append('Content-Type', 'application/json');
+headers.append("Content-Type", "application/json");
-headers.append('Accept', 'application/json');
+headers.append("Accept", "application/json");
-headers.append('Sec-Fetch-Site', 'cross-site')
+headers.append("Sec-Fetch-Site", "cross-site");
 
-const loginService = async(formData) => {
+const loginService = async (formData) => {
   const response = await fetch(loginEndpoint, {
-    method: 'POST',
+    method: "POST",
-    credentials: 'include',
+    credentials: "include",
     body: JSON.stringify(formData),
-    headers: headers
+    headers: headers,
   })
-  .then(res => res.text())
+    .then((res) => res.text())
-  .then(text => JSON.parse(text))
+    .then((text) => JSON.parse(text))
-  .catch(err => err);
+    .catch((err) => err);
-  
+
   return response;
-}
+};
 
 const signupService = async (formData) => {
   const response = await fetch(signupEndpoint, {
-    method: 'POST',
+    method: "POST",
-    credentials: 'include',
+    credentials: "include",
     body: JSON.stringify(formData),
-    headers: headers
+    headers: headers,
   })
-  .then(res => res.text())
+    .then((res) => res.text())
-  .then(text => JSON.parse(text))
+    .then((text) => JSON.parse(text))
-  .catch(err => err);
+    .catch((err) => err);
 
   return response;
-}
+};
+
+const guestService = async () => {
+  const response = await fetch(guestEndpoint, {
+    method: "POST",
+    credentials: "include",
+    headers,
+  })
+    .then((res) => res.text())
+    .then((text) => JSON.parse(text))
+    .catch((err) => err);
+
+  return response;
+};
 
 export default {
   loginService,
-  signupService
+  signupService,
-}
+  guestService,
+};

packages/server/controllers/auth.js

@@ -1,15 +1,16 @@
-const { validationResult } = require('express-validator');
+const { validationResult } = require("express-validator");
 
-const userQueries = require('../data/queries/user');
+const userQueries = require("../data/queries/user");
-const { hashPassword, compareHash } = require('../services/bcrypt');
+const { hashPassword, compareHash } = require("../services/bcrypt");
-const signToken = require('../services/signToken');
+const signToken = require("../services/signToken");
+const guestServices = require("../services/guestServices");
 
 const checkValidationErrors = (req, res) => {
   const errors = validationResult(req);
   if (!errors.isEmpty()) {
     return res.status(422).json({ errors: errors.array() });
   }
-}
+};
 
 const signup = async (req, res, next) => {
   checkValidationErrors(req, res);
@@ -20,51 +21,68 @@ const signup = async (req, res, next) => {
     const hashedPassword = await hashPassword(user.password);
     const secureUser = { ...user, password: hashedPassword };
     if (existingUser.length) {
-      return res.status(409).json({errors: [{auth: 'User already exists!'}]})
+      return res
+        .status(409)
+        .json({ errors: [{ auth: "User already exists!" }] });
     }
 
     const newUser = await userQueries.insertUser(secureUser);
-    signToken(res, newUser)
+    signToken(res, newUser);
-    res.status(201).json({...newUser});
+    res.status(201).json({ ...newUser });
-  } 
+  } catch (err) {
-
-  catch (err) {
     res.status(500).json(err);
   }
-}
+};
 
 const login = async (req, res, next) => {
   checkValidationErrors(req, res);
   const user = req.body;
-  
+
   try {
     const queryResults = await userQueries.findUserByNameOrEmail(user);
     const savedUser = queryResults[0] || null;
-    
+
     if (!savedUser) {
-      return res.status(401).send({errors: 'bad credentials'});
+      return res.status(401).send({ errors: "bad credentials" });
     }
-    
+
     const hashedPassword = savedUser.password;
     const passwordMatch = await compareHash(user.password, hashedPassword);
 
     if (!passwordMatch) {
-      return res.status(401).send({errors: 'bad credentials'});
+      return res.status(401).send({ errors: "bad credentials" });
     }
-    
+
-    const authorizedUser = {...savedUser};
+    const authorizedUser = { ...savedUser };
     delete authorizedUser.password;
-    
+
     signToken(res, authorizedUser);
-    res.send({...authorizedUser}).status(200);
+    res.send({ ...authorizedUser }).status(200);
+  } catch (e) {
+    res.status(500).send({ errors: e });
   }
-  
+};
-  catch (err) {
+
-    res.status(500).send({errors: err});
+const guest = async (req, res, next) => {
+  try {
+    // username generator returns `Guest-${num}`
+    const { username, password } = guestServices.generateGuest();
+    // generateGuestUser();
+    const email = null;
+    // id generator returns `
+    const id = null;
+    const user = { username, email, id, password };
+    signToken(res, user);
+    delete user.password;
+    res.send(user);
+  } catch (e) {
+    console.log(e);
+    res.status(500).send({ errors: e });
   }
-}
+};
 
 module.exports = {
   signup,
-  login
+  login,
-}
+  guest,
+};

packages/server/routes/auth.js

@@ -1,10 +1,20 @@
-const express = require('express');
+const express = require("express");
 const router = express.Router();
-const app = require('../server');
+const app = require("../server");
-const authController = require('../controllers/auth');
+const authController = require("../controllers/auth");
-const { signupValidationRules, loginValidationRules, validate } = require('../middleware/userValidator');
+const {
+  signupValidationRules,
+  loginValidationRules,
+  validate,
+} = require("../middleware/userValidator");
 
-router.post('/signup', signupValidationRules(), validate, authController.signup);
+router.post(
-router.post('/login', loginValidationRules(), validate, authController.login);
+  "/signup",
+  signupValidationRules(),
+  validate,
+  authController.signup
+);
+router.post("/login", loginValidationRules(), validate, authController.login);
+router.post("/guest", authController.guest);
 
 module.exports = router;

packages/server/services/guestServices.js

@@ -0,0 +1,25 @@
+const generateRandomPassword = () => {
+  const minLength = 8,
+    maxLength = 16,
+    minUTF = 33,
+    maxUTF = 126;
+  const randomize = (min, max) => Math.floor(Math.random() * (max - min) + min);
+  return Array(randomize(minLength, maxLength))
+    .fill(0)
+    .map(() => String.fromCharCode(randomize(minUTF, maxUTF)))
+    .join("");
+};
+
+const guestService = {
+  currentGuest: 0,
+  generateGuest() {
+    // generate unique username
+    const username = `Guest-${String(this.currentGuest++).padStart(6, 0)}`;
+    // generate random "password"
+    // this exists solely to add extra randomness to signed token and is not validated
+    const password = generateRandomPassword();
+    return { username, password };
+  },
+};
+
+module.exports = guestService;