Add auth pages

Author: ryansolid

rollup.config.js

@@ -21,7 +21,6 @@ const plugins = [
 
 export default {
   input: "src/index.js",
-  manualChunks: {vendor: ["solid-js", "solid-js/dom"]},
   output: {
     dir: "dist",
     format: "esm"

src/components/ListErrors.js

@@ -0,0 +1,11 @@
+export default props => (
+  <Show when={props.errors}>
+    <ul class="error-messages">
+      <For each={Object.keys(props.errors)}>
+        {key => (
+          <li>{key} {props.errors[key]}</li>
+        )}
+      </For>
+    </ul>
+  </Show>
+);

src/pages/Auth.js

@@ -1,43 +1,73 @@
+import { createState } from "solid-js";
+import NavLink from "../components/NavLink";
+import ListErrors from "../components/ListErrors";
+import { useStore } from "../store";
+
 export default () => {
+  const [state, setState] = createState({ username: "", inProgress: false }),
+    [, { register, login }] = useStore(),
+    isLogin = location.hash.includes("login"),
+    text = isLogin ? "Sign in" : "Sign up",
+    link = isLogin ? (
+      <NavLink route="register">Need an account?</NavLink>
+    ) : (
+      <NavLink route="login">Have an account?</NavLink>
+    ),
+    handleSubmit = e => {
+      e.preventDefault();
+      setState({ inProgress: true });
+      const p = isLogin
+        ? login(state.email, state.password)
+        : register(state.username, state.email, state.password);
+      p.then(() => (location.hash = "/"))
+        .catch(errors => setState({ errors }))
+        .finally(() => setState({ inProgress: false }));
+    };
+
   return (
     <div class="auth-page">
       <div class="container page">
         <div class="row">
           <div class="col-md-6 offset-md-3 col-xs-12">
-            <h1 class="text-xs-center">Sign up</h1>
-            <p class="text-xs-center">
-              <a href="">Have an account?</a>
-            </p>
-
-            <ul class="error-messages">
-              <li>That email is already taken</li>
-            </ul>
-
-            <form>
-              <fieldset class="form-group">
-                <input
-                  class="form-control form-control-lg"
-                  type="text"
-                  placeholder="Your Name"
-                />
-              </fieldset>
+            <h1 class="text-xs-center" textContent={text} />
+            <p class="text-xs-center">{link}</p>
+            <ListErrors errors={state.errors} />
+            <form onSubmit={handleSubmit}>
+              { !isLogin && (
+                <fieldset class="form-group">
+                  <input
+                    class="form-control form-control-lg"
+                    type="text"
+                    placeholder="Username"
+                    value={state.username}
+                    onChange={e => setState({ username: e.target.value })}
+                  />
+                </fieldset>
+              )}
               <fieldset class="form-group">
                 <input
                   class="form-control form-control-lg"
                   type="text"
                   placeholder="Email"
+                  value={state.email}
+                  onChange={e => setState({ email: e.target.value })}
                 />
               </fieldset>
               <fieldset class="form-group">
                 <input
                   class="form-control form-control-lg"
                   type="password"
                   placeholder="Password"
+                  value={state.password}
+                  onChange={e => setState({ password: e.target.value })}
                 />
               </fieldset>
-              <button class="btn btn-lg btn-primary pull-xs-right">
-                Sign up
-              </button>
+              <button
+                class="btn btn-lg btn-primary pull-xs-right"
+                type="submit"
+                disabled={state.inProgress}
+                textContent={text}
+              />
             </form>
           </div>
         </div>

src/pages/Profile/Profile.js

@@ -2,9 +2,9 @@ import { useStore, useRouter } from "../../store";
 import NavLink from "../../components/NavLink";
 import ArticleList from "../../components/ArticleList";
 
-export default () => {
+export default ({ username }) => {
   const [store, { setPage, loadArticles, unfollow, follow }] = useStore(),
-    {} = useRouter(),
+    { location } = useRouter(),
     handleClick = ev => {
       ev.preventDefault();
       store.profile.following ? unfollow() : follow();
@@ -13,7 +13,7 @@ export default () => {
       setPage(page);
       loadArticles();
     },
-    isUser = store.currentUser && store.profile.username === store.currentUser.username;
+    isUser = store.currentUser && username === store.currentUser.username;
 
   return (
     <div class="profile-page">
@@ -22,7 +22,7 @@ export default () => {
           <div class="row">
             <div class="col-xs-12 col-md-10 offset-md-1">
               <img src={store.profile?.image} class="user-img" alt="" />
-              <h4>{store.profile?.username}</h4>
+              <h4>{username}</h4>
               <p>{store.profile?.bio}</p>
               {isUser && (
                 <NavLink
@@ -32,7 +32,7 @@ export default () => {
                   <i class="ion-gear-a" /> Edit Profile Settings
                 </NavLink>
               )}
-              {!isUser && (
+              {store.token && !isUser && (
                 <button
                   class="btn btn-sm action-btn"
                   classList={{
@@ -59,10 +59,8 @@ export default () => {
                 <li class="nav-item">
                   <NavLink
                     class="nav-link"
-                    isActive={(match, location) => {
-                      return location.pathname.match("/favorites") ? 0 : 1;
-                    }}
-                    to={`/@${store.profile?.username}`}
+                    active={location().includes("/favorites") ? 0 : 1}
+                    href={`@${username}`}
                   >
                     My Articles
                   </NavLink>
@@ -71,7 +69,8 @@ export default () => {
                 <li class="nav-item">
                   <NavLink
                     class="nav-link"
-                    to={`/@${store.profile?.username}/favorites`}
+                    active={location().includes("/favorites")}
+                    href={`@${username}/favorites`}
                   >
                     Favorited Articles
                   </NavLink>

src/pages/Profile/index.js

@@ -1,11 +1,16 @@
-import { lazy } from "solid-js";
-import { useStore } from "../../store";
+import { createEffect, lazy } from "solid-js";
+import { useStore, useRouter } from "../../store";
 const Profile = lazy(() => import("./Profile"));
 
 export default function(props) {
   const [, { loadProfile, loadArticles }] = useStore(),
+    { location } = useRouter(),
     username = props.params[0];
-  loadProfile(username)
-  loadArticles({ author: username })
-  return Profile();
+  loadProfile(username);
+  createEffect(() =>
+    location().includes("/favorites")
+      ? loadArticles({ favoritedBy: username })
+      : loadArticles({ author: username })
+  );
+  return Profile({ username });
 }

src/store/createAuth.js

@@ -3,12 +3,14 @@ export default function createAuth(agent, store, loadState, setState) {
   store[1] = {
     ...actions,
     async login(email, password) {
-      const { user } = await agent.Auth.login(email, password);
+      const { user, errors } = await agent.Auth.login(email, password);
+      if (errors) throw errors;
       actions.setToken(user.token);
       actions.pullUser();
     },
     async register(username, email, password) {
-      const { user } = await agent.Auth.register(username, email, password);
+      const { user, errors } = await agent.Auth.register(username, email, password);
+      if (errors) throw errors;
       actions.setToken(user.token);
       actions.pullUser();
     },

src/store/createRouteHandler.js

@@ -4,6 +4,7 @@ export default function createRouteHandler(init) {
   const [location, setLocation] = createSignal(
       window.location.hash.slice(2) || init
     ),
+    [read, triggerParams] = createSignal(),
     locationHandler = () => setLocation(window.location.hash.slice(2));
   let params;
   window.addEventListener("hashchange", locationHandler);
@@ -13,9 +14,12 @@ export default function createRouteHandler(init) {
     match: (name, test) => {
       const loc = location().split("?")[0];
       const match = test.exec(loc);
-      if (match) params = { params: match.slice(1), routeName: name };
+      if (match) {
+        params = { params: match.slice(1), routeName: name };
+        triggerParams();
+      }
       return !!match;
     },
-    getParams: () => params
+    getParams: () => (read(), params)
   };
 }