fix: 🐛 Fixing creating an account would not log users in.

authentication/signup.js

@@ -132,4 +132,4 @@ if (myInput.nodeValue.match(lowerCaseLetters)) {
         $("#alert .msg").text(err.responseJSON);
         $("#alert").fadeIn(500);
     }
-});
+});

client/src/App.js

@@ -17,7 +17,7 @@ import Logout from "./components/Logout";
 import CharacterSheetPage from "./pages/CharacterSheet";
 
 function App() {
-  const [myCharacters, setmyCharacters] = useState([]);
+  const [myCharacters, setMyCharacters] = useState([]);
 
   const [newCharacter, setNewCharacter] = useState({
     name: "No-Name Baggins",
@@ -63,16 +63,14 @@ function App() {
           API.getUser(user)
             .then((res) => {
               //set characters whether or not they exist from user
-              setmyCharacters(res.data !== null ? res.data.characters : []);
+              setMyCharacters(res.data !== null ? res.data.characters : []);
             })
             .catch(() => {});
         }
       })
       .catch(() => console.log("no session found"));
   }, [user]);
 
-  // console.log("myCharacters", myCharacters)
-
   return (
     <Router>
       {user ? (
@@ -86,7 +84,7 @@ function App() {
                   character={{ ...character }}
                   user={user}
                   myCharacters={myCharacters}
-                  setmyCharacters={setmyCharacters}
+                  setMyCharacters={setMyCharacters}
                 />
               </Route>
 
@@ -125,14 +123,19 @@ function App() {
             <div className="col-12 col-lg-3 p-0 ">
               <MyCharacters
                 myCharacters={myCharacters}
-                setMyCharacters={setmyCharacters}
+                setMyCharacters={setMyCharacters}
                 user={user}
               />
             </div>
           </div>
         </div>
       ) : (
-        <AuthPages signIn={signIn} setSignIn={setSignIn} setUser={setUser} />
+        <AuthPages
+          setMyCharacters={setMyCharacters}
+          signIn={signIn}
+          setSignIn={setSignIn}
+          setUser={setUser}
+        />
       )}
     </Router>
   );

client/src/components/DeleteButton/index.js

@@ -13,7 +13,7 @@ function DeleteButton(props) {
     API.check().then((res) => {
       //delete character based off id of user and character
       API.deleteCharacter(res.data, props.item._id).then((res) => {
-        props.setmyCharacters(res.data.characters);
+        props.setMyCharacters(res.data.characters);
       });
     });
   }

client/src/components/Login/index.js

@@ -5,7 +5,7 @@ import API from "../../utils/API";
 import Button from "../../components/Button";
 import Form from "react-bootstrap/Form";
 
-function Login(props) {
+function Login({ setUser, setMyCharacters }) {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [incorrect, setIncorrect] = useState("");
@@ -14,7 +14,8 @@ function Login(props) {
     e.preventDefault();
     API.login(username.trim(), password.trim())
       .then((res) => {
-        props.setUser(res.data._id);
+        setUser(res.data._id);
+        setMyCharacters([]);
       })
       .catch((err) => {
         setIncorrect(err.response.data.message);

client/src/components/SignUp/index.js

@@ -7,12 +7,12 @@ import API from "../../utils/API";
 import Form from "react-bootstrap/Form";
 import Button from "../../components/Button";
 
-function signUp(props) {
+function signUp({ setUser, setMyCharacters }) {
   const [username, setUsername] = useState("");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
-  // const [signUp, setSignUp] = useState();
+  const [formError, setFormError] = useState("");
 
   function handleSubmit(e) {
     e.preventDefault();
@@ -23,11 +23,13 @@ function signUp(props) {
         password: password.trim(),
       })
         .then((res) => {
-          // console.log(res.data);
           // Redirect to login
-          props.setSignIn(true);
+          setMyCharacters([]);
+          setUser(res.data._id);
         })
         .catch((err) => console.log(err));
+    } else {
+      setFormError("Passwords do not match");
     }
   }
 
@@ -84,8 +86,9 @@ function signUp(props) {
             placeholder="Confirm Password"
           />
         </Form.Group>
-        <div className="d-flex justify-content-center">
-          <div onClick={handleSubmit}>
+        <div className="d-flex justify-content-center flex-column">
+          {formError && <p className="text-danger">{formError}</p>}
+          <div className="d-flex justify-content-center" onClick={handleSubmit}>
             <Button text={"Submit"} />
           </div>
         </div>

client/src/components/TabFeats/index.js

@@ -17,7 +17,7 @@ function TabFeats({
   // getMyCharacters,
   user,
   myCharacters,
-  setmyCharacters,
+  setMyCharacters,
   ...props
 }) {
   const [activeFeat, setActiveFeat] = useState({
@@ -58,7 +58,7 @@ function TabFeats({
     })
       .then((res) => {
         //set characters based off database rather than state. Gives full list with current information.
-        setmyCharacters(res.data.characters);
+        setMyCharacters(res.data.characters);
 
         history.push(`/character-sheet/${myCharacters.length}`);
       })

client/src/pages/AuthPages/index.js

@@ -8,7 +8,7 @@ import "./style.css";
 
 import WoodBeamCard from "../../components/WoodBeamCard";
 
-const AuthPages = ({ setUser, signIn, setSignIn }) => {
+const AuthPages = ({ setMyCharacters, setUser, signIn, setSignIn }) => {
   return (
     <div className="row m-0">
       <div className="col-12 col-sm-8 offset-sm-2  col-md-6 offset-md-3 col-lg-4 offset-lg-4 text-bisque vh-100 d-flex align-items-center">
@@ -30,9 +30,13 @@ const AuthPages = ({ setUser, signIn, setSignIn }) => {
           </h3>
 
           {signIn ? (
-            <Login setUser={setUser} />
+            <Login setUser={setUser} setMyCharacters={setMyCharacters} />
           ) : (
-            <SignUp setSignIn={setSignIn} />
+            <SignUp
+              setSignIn={setSignIn}
+              setUser={setUser}
+              setMyCharacters={setMyCharacters}
+            />
           )}
         </WoodBeamCard>
       </div>