fix: tweak auth messaging

postlight · Feb 28, 2019 · 6cd14d3 · 6cd14d3
1 parent 66e5319
commit 6cd14d3
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 16 deletions.
diff --git a/frontend-graphql/src/components/Home.js b/frontend-graphql/src/components/Home.js
@@ -205,22 +205,29 @@ class Home extends Component {
               </li>
             ))}
           </ul>
-          <p>
-            You are looking at the GraphQL-powered React frontend. Be sure to
-            also check out the{' '}
-            <a href="http://localhost:3000/">REST-powered frontend</a>.
-          </p>
           {authToken ? (
             <div>
               <h2>You Are Logged In</h2>
               <p>
-                Using an authenticated query, we got your id:{' '}
-                <span>{userId}</span>
+                Your user ID is <span>{userId}</span>, retrieved via an
+                authenticated API query.
               </p>
             </div>
           ) : (
-            ''
+            <div>
+              <h2>You Are Not Logged In</h2>
+              <p>
+                The frontend is not making authenticated API requests.{' '}
+                <a href="/login">Log in.</a>
+              </p>
+            </div>
           )}
+          <h2>Where You're At</h2>
+          <p>
+            You are looking at the GraphQL-powered React frontend. Be sure to
+            also check out the{' '}
+            <a href="http://localhost:3000/">REST-powered frontend</a>.
+          </p>
         </div>
       </div>
     );

diff --git a/frontend/pages/index.js b/frontend/pages/index.js
@@ -120,22 +120,29 @@ class Index extends Component {
         {fposts}
         <h2>Pages</h2>
         {fpages}
-
-        <p>
-          You are looking at the REST API-powered React frontend. Be sure to
-          also check out the{' '}
-          <a href="http://localhost:3001/">GraphQL-powered frontend</a>.
-        </p>
         {id ? (
           <div>
             <h2>You Are Logged In</h2>
             <p>
-              Using an authenticated query, we got your id: <span>{id}</span>
+              Your user ID is <span>{id}</span>, retrieved via an authenticated
+              API query.
             </p>
           </div>
         ) : (
-          ''
+          <div>
+            <h2>You Are Not Logged In</h2>
+            <p>
+              The frontend is not making authenticated API requests.{' '}
+              <a href="/login">Log in.</a>
+            </p>
+          </div>
         )}
+        <h2>Where You're At</h2>
+        <p>
+          You are looking at the REST API-powered React frontend. Be sure to
+          also check out the{' '}
+          <a href="http://localhost:3001/">GraphQL-powered frontend</a>.
+        </p>
       </Layout>
     );
   }