New Account Page

backend/database.py

@@ -35,10 +35,10 @@ def init_db():
 
 
     users = [
-        User(name="Grant", personal_portfolio=portfolios[0], bio="Love me some AI and maybe web dev.", profile_pic=get_sample_encoded_profile_image(), email="grant@grant.com", metrics=UserMetrics(), achievements=[achievements[1], achievements[0]]),
-        User(name="Braden", personal_portfolio=portfolios[1], bio="Spending some time on CSC 400.", profile_pic=get_sample_encoded_profile_image(), email="braden@braden.com", metrics=UserMetrics(), achievements=[achievements[1]]),
-        User(name="Kyle", personal_portfolio=portfolios[2], bio="Fitness, meditation and good books.", profile_pic=get_sample_encoded_profile_image(), email="kyle@kyle.com", metrics=UserMetrics(), achievements=[achievements[1], achievements[0]]),
-        User(name="John", personal_portfolio=portfolios[3], bio="Looking around for some art. Wasn't satisfied with my dope Windows Vista wallpaper.", profile_pic=get_sample_encoded_profile_image(), email="john@john.com", metrics=UserMetrics(), achievements=[achievements[1]])
+        User(name="Grant", personal_portfolio=portfolios[0], bio="Love me some AI and maybe web dev.", profile_pic=get_sample_encoded_profile_image(), email="grant@grant.com", password="grantiscool", metrics=UserMetrics(), achievements=[achievements[1], achievements[0]]),
+        User(name="Braden", personal_portfolio=portfolios[1], bio="Spending some time on CSC 400.", profile_pic=get_sample_encoded_profile_image(), email="braden@braden.com", password="bradeniscool", metrics=UserMetrics(), achievements=[achievements[1]]),
+        User(name="Kyle", personal_portfolio=portfolios[2], bio="Fitness, meditation and good books.", profile_pic=get_sample_encoded_profile_image(), email="kyle@kyle.com", password="kyleiscool", metrics=UserMetrics(), achievements=[achievements[1], achievements[0]]),
+        User(name="John", personal_portfolio=portfolios[3], bio="Looking around for some art. Wasn't satisfied with my dope Windows Vista wallpaper.", profile_pic=get_sample_encoded_profile_image(), email="john@john.com", password="johniscool", metrics=UserMetrics(), achievements=[achievements[1]])
     ]
 
     groups = [

backend/models.py

@@ -24,6 +24,7 @@ class User(Document):
     name = StringField(required=True)
     bio = StringField()
     email = StringField(primary_key=True, required=True)
+    password = StringField(required=True)
     profile_pic = StringField()
     date_joined = DateTimeField(default=datetime.now)
     metrics = EmbeddedDocumentField("UserMetrics", dbref=True)

backend/mutations.py

@@ -196,6 +196,7 @@ class UserInput(graphene.InputObjectType):
     name = graphene.String()
     bio = graphene.String()
     email = graphene.String()
+    password = graphene.String()
     profile_pic = graphene.String()   # NOTE: will assume base64 encoded string
     metrics = graphene.InputField(UserMetricsInput)
     achievement = graphene.String()     # achievement id to add to user's achievements
@@ -222,6 +223,7 @@ def mutate(self, info, user_data=None):
             name = user_data.name,
             bio = user_data.bio,    # not required by model, will assume frontend filters input
             email = user_data.email,
+            password = user_data.password,
             profile_pic = user_data.profile_pic,
             metrics = metrics,
             achievements = [], # will likely want to add a hard coded initial achievement
@@ -254,6 +256,8 @@ def mutate(self, info, user_data=None):
             user.bio = user_data.bio
         if user_data.email: # don't think I want this while primary key is email
             user.email = user_data.email
+        if user_data.password:
+            user.password = user_data.password
         if user_data.metrics:
             user.metrics = UserMetrics(
                 works_visited = user_data.metrics.works_visited,
@@ -520,8 +524,10 @@ def mutate(self, info, report_data=None):
 mutation {
   createUser(userData: {
     name: "Tony Richard",
-    bio: "Likes to take long walks in the valley",
-    email: "tony@richard.com"
+    bio: "Very Happy Boi",
+    email: "email@email.com"
+    password: "password"
+    profilePic: "ijf092ct890t423m98rym230948yrm32409r8y23m490asf"
   }) {
     user {
       name,
@@ -571,6 +577,8 @@ def mutate(self, info, report_data=None):
   	userData: {
     	name: "Branden"
     	bio: "Sweet Hater of Science"
+      email: "email@email.com"
+      password: "password"
   	}
 	) {
     id

backend/testing.py

@@ -80,29 +80,30 @@ def create_achievements(client):
 
 def create_users(client):
     create_user_inputs = [
-        ("Braden", "Spending some time on CSC 400.", "braden@gmail.com"),
-        ("Grant", "Love me some AI and maybe web dev.", "grant@gmail.com"),
-        ("Kyle", "Fitness, meditation and good books.", "kyle@gmail.com"),
-        ("John", "Looking around for some art. Wasn't satisfied with my dope Windows Vista wallpaper.", "john@gmail.com")]
+        ("Braden", "Spending some time on CSC 400.", "braden@gmail.com", "bradeniscool"),
+        ("Grant", "Love me some AI and maybe web dev.", "grant@gmail.com", "grantiscool"),
+        ("Kyle", "Fitness, meditation and good books.", "kyle@gmail.com", "kyleiscool"),
+        ("John", "Looking around for some art. Wasn't satisfied with my dope Windows Vista wallpaper.", "john@gmail.com", "johniscool")]
 
     users_with_ids = [] # user names with db ids
     for user_input in create_user_inputs:
         executed = client.execute("""
         mutation {{
             createUser(
   	            userData: {{
-    	            name: "{0}"
-    	            bio: "{1}"
+                    name: "{0}"
+                    bio: "{1}"
                     email: "{2}"
-                    profilePic: "{3}"
+                    password: "{3}"
+                    profilePic: "{4}"
   	            }}
 	        ) {{
                 user {{
                     id
                     name
                 }}
             }}
-        }}""".format(user_input[0], user_input[1], user_input[2], get_sample_encoded_profile_image()))
+        }}""".format(user_input[0], user_input[1], user_input[2], user_input[3], get_sample_encoded_profile_image()))
         users_with_ids.append((executed["data"]["createUser"]["user"]["name"], executed["data"]["createUser"]["user"]["id"]))
         # append (user's name, user id)
     return(users_with_ids)
@@ -465,4 +466,4 @@ def test_submit_artwork_review(client, user, artwork): #[name, id]
 
 if __name__ == "__main__" :
     connect(host="mongomock://localhost")
-    testing_boot_up()
+    testing_boot_up()

frontend/src/App.js

@@ -11,6 +11,7 @@ import GroupsList from "./pages/Groups/GroupsList/GroupsList";
 import ReportArtwork from "./pages/ReportArtwork/ReportArtwork";
 import TabBar from "./components/TabBar/TabBar";
 import useProfileInfo from "./hooks/useProfileInfo";
+import NewAccount from "./pages/NewAccount/NewAccount";
 import { useEffect } from "react";
 
 const userId = "VXNlclR5cGU6am9obkBqb2huLmNvbQ==";
@@ -42,6 +43,7 @@ function App() {
             <Route path="/portfolio" component={Portfolio} />
             <Route path="/groups" component={GroupsList} />
             <Route path="/style-guide" component={StyleGuide} />
+            <Route path="/new-account" component={NewAccount} />
             <Route path="*" component={ArtMap} />
           </Switch>
         </div>

frontend/src/index.scss

@@ -98,7 +98,8 @@ input[type="submit"] {
 
 input[type="text"],
 input[type="password"],
-input[type="number"] {
+input[type="number"],
+input[type="email"] {
   font-family: inherit;
   font-size: 16px;
   padding: 15px;

frontend/src/pages/NewAccount/NewAccount.jsx

@@ -0,0 +1,87 @@
+import "./NewAccount.scss";
+
+import { useMutation, gql } from "@apollo/client";
+import { useForm, Controller, useController } from "react-hook-form";
+import { useHistory } from "react-router-dom";
+import useProfileInfo from "../../hooks/useProfileInfo";
+
+const NEW_ACCOUNT_MUTATION = gql`
+  mutation addUser($email: String!, $name: String!, $password: String!) {
+    createUser(userData: { email: $email, name: $name, password: $password }) {
+      user {
+        id
+      }
+    }
+  }
+`;
+
+export default function NewAccount() {
+  const [submitUser] = useMutation(NEW_ACCOUNT_MUTATION);
+  const { profile, setUser } = useProfileInfo();
+  const { push } = useHistory();
+
+  const { register, handleSubmit, control, errors } = useForm();
+
+  async function onSubmit(data) {
+    const payload = {
+      email: data.email,
+      name: data.name,
+      password: data.password,
+    };
+
+    let resp = await submitUser({ variables: payload });
+    setUser(resp.data.createUser.user.id);
+    push("/profile");
+  }
+
+  return (
+    <article className="NewAccount">
+      <header>
+        <h2>Sign Up</h2>
+      </header>
+
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <div className="input">
+          <label htmlFor="email">Email</label>
+          <br />
+          <input
+            type="email"
+            name="email"
+            id="email"
+            ref={register({
+              required: true,
+            })}
+          />
+        </div>
+
+        <div className="input">
+          <label htmlFor="username">Username</label>
+          <br />
+          <input
+            type="text"
+            name="name"
+            id="username"
+            ref={register({
+              required: true,
+            })}
+          />
+        </div>
+
+        <div className="input">
+          <label htmlFor="password">Password</label>
+          <br />
+          <input
+            type="password"
+            name="password"
+            id="password"
+            ref={register({
+              required: true,
+            })}
+          />
+        </div>
+
+        <input type="submit" />
+      </form>
+    </article>
+  );
+}

frontend/src/pages/NewAccount/NewAccount.scss

@@ -0,0 +1,34 @@
+.NewAccount {
+
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 30px;
+    box-shadow: var(--shadow-button);
+    margin-bottom: 30px;
+
+    h2 {
+      display: inline-block;
+      margin: 0;
+    }
+  }
+
+  form {
+    margin-left: 30px;
+
+    > * {
+      margin: 0px;
+      margin-bottom: 10px;
+    }
+
+    .input input {
+      padding: 10px;
+    }
+
+    > input {
+      margin-top: 10px;
+      outline: none;
+    }
+  }
+}