From 5028aedaa1015600ff23cb70bcb86af1989e2b34 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Mon, 28 Dec 2020 18:01:32 -0500
Subject: [PATCH 1/7] #106 Improve spacing on large displays

---
 src/components/Footer/Footer.js             |  2 +-
 src/components/Header/Header.js             |  4 ++--
 src/components/SecondNavbar/SecondNavbar.js | 12 ++++++------
 src/style/custom.scss                       |  4 ++++
 4 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js
index 431966d0..071fa6d9 100644
--- a/src/components/Footer/Footer.js
+++ b/src/components/Footer/Footer.js
@@ -8,7 +8,7 @@ import moment from 'moment';
 function Footer() {
   return (
     <footer className="footer mt-auto py-3">
-      <Container className="px-0">
+      <Container fluid className="px-5">
         <Row>
           <Col>
             <Image src="/logo_mit.png" alt="MIT logo" className="logo mr-3 mt-2" />
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index bb116297..882cb6cd 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -27,8 +27,8 @@ function Header({
   const router = useRouter();
   return (
     <header sticky="top">
-      <Navbar bg="dark" variant="dark">
-        <Container>
+      <Navbar bg="dark" variant="dark" className="px-0">
+        <Container fluid className="px-5">
           <Navbar.Brand href="/">Annotation Studio</Navbar.Brand>
           <Navbar.Toggle aria-controls="responsive-navbar-nav" />
           <Navbar.Collapse className="justify-content-end">
diff --git a/src/components/SecondNavbar/SecondNavbar.js b/src/components/SecondNavbar/SecondNavbar.js
index 000dd135..027dc710 100644
--- a/src/components/SecondNavbar/SecondNavbar.js
+++ b/src/components/SecondNavbar/SecondNavbar.js
@@ -39,10 +39,10 @@ const SecondNavbar = ({
   const [showMoreDocumentInfo, setShowMoreDocumentInfo] = useState();
   return (
     <>
-      <Navbar bg="light" variant="light" className="second-navbar" data-testid="second-navbar">
-        <Container>
+      <Navbar bg="light" variant="light" className="second-navbar px-0" data-testid="second-navbar">
+        <Container fluid className="px-5">
           <Row>
-            <Col sm={8}>
+            <Col>
               <Nav>
                 <Breadcrumb>
                   <Breadcrumb.Item active={type === 'dashboard'} href="/">Dashboard</Breadcrumb.Item>
@@ -91,7 +91,7 @@ const SecondNavbar = ({
         </Container>
         {type === 'document' && document && docView && (
         <>
-          <div style={{ position: 'absolute', right: '16px', top: '7px' }}>
+          <div style={{ position: 'absolute', right: '9px', top: '7px' }} className="pr-5">
             <FilterPopover session={session} />
           </div>
           <Modal
@@ -106,7 +106,7 @@ const SecondNavbar = ({
               </Modal.Title>
             </Modal.Header>
             <Modal.Body>
-              <Table bordered hover size="sm">
+              <Table bordered size="sm">
                 <tbody>
                   {Object.keys(metaData).map((key) => {
                     let str = '';
@@ -119,7 +119,7 @@ const SecondNavbar = ({
                     }
                     return (
                       <tr>
-                        <td className="table-meta-data-name">{metaData[key]}</td>
+                        <td className="table-meta-data-name"><strong>{metaData[key]}</strong></td>
                         <td>{str}</td>
                       </tr>
                     );
diff --git a/src/style/custom.scss b/src/style/custom.scss
index 9dd1818a..62723cee 100644
--- a/src/style/custom.scss
+++ b/src/style/custom.scss
@@ -4,6 +4,10 @@ $theme-colors: (
   "dark": #000000,
 );
 
+ol.breadcrumb {
+  padding-left: 0px !important;
+}
+
 .footer .logo {
   height: 30px;
   max-height: 30px;

From eaf137fe894830ffb13b187e9acf9eb235ebc54e Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Tue, 29 Dec 2020 10:22:14 -0500
Subject: [PATCH 2/7] #106 Create UnauthorizedCard component

---
 src/components/UnauthorizedCard/UnauthorizedCard.js  | 10 ++++++++++
 .../UnauthorizedCard/UnauthorizedCard.test.js        | 12 ++++++++++++
 src/components/UnauthorizedCard/index.js             |  3 +++
 3 files changed, 25 insertions(+)
 create mode 100644 src/components/UnauthorizedCard/UnauthorizedCard.js
 create mode 100644 src/components/UnauthorizedCard/UnauthorizedCard.test.js
 create mode 100644 src/components/UnauthorizedCard/index.js

diff --git a/src/components/UnauthorizedCard/UnauthorizedCard.js b/src/components/UnauthorizedCard/UnauthorizedCard.js
new file mode 100644
index 00000000..edbac783
--- /dev/null
+++ b/src/components/UnauthorizedCard/UnauthorizedCard.js
@@ -0,0 +1,10 @@
+import { Card } from 'react-bootstrap';
+
+const UnauthorizedCard = () => (
+  <Card>
+    <Card.Header><Card.Title>Not authorized</Card.Title></Card.Header>
+    <Card.Body>Please log in to use the application.</Card.Body>
+  </Card>
+);
+
+export default UnauthorizedCard;
diff --git a/src/components/UnauthorizedCard/UnauthorizedCard.test.js b/src/components/UnauthorizedCard/UnauthorizedCard.test.js
new file mode 100644
index 00000000..bd48ad40
--- /dev/null
+++ b/src/components/UnauthorizedCard/UnauthorizedCard.test.js
@@ -0,0 +1,12 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { render } from '@testing-library/react';
+import UnauthorizedCard from './UnauthorizedCard';
+
+test('renders card', () => {
+  const { getByText } = render(<UnauthorizedCard />);
+  const cardTitle = getByText('Not authorized');
+  expect(cardTitle).toBeInTheDocument();
+});
diff --git a/src/components/UnauthorizedCard/index.js b/src/components/UnauthorizedCard/index.js
new file mode 100644
index 00000000..19cd5fba
--- /dev/null
+++ b/src/components/UnauthorizedCard/index.js
@@ -0,0 +1,3 @@
+import UnauthorizedCard from './UnauthorizedCard';
+
+export default UnauthorizedCard;

From 6273d40040c9fd21571a6b0a4bbefc0f1884ddf0 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Tue, 29 Dec 2020 11:00:15 -0500
Subject: [PATCH 3/7] Only update session on edit profile if email match

---
 src/pages/user/[slug]/editprofile.jsx | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/pages/user/[slug]/editprofile.jsx b/src/pages/user/[slug]/editprofile.jsx
index a7323ba6..11ff8bf8 100644
--- a/src/pages/user/[slug]/editprofile.jsx
+++ b/src/pages/user/[slug]/editprofile.jsx
@@ -31,18 +31,20 @@ const EditProfile = ({ user, updateSession, statefulSession }) => {
       slug: values.email.replace(/[*+~.()'"!:@]/g, '-'),
     };
 
-    updateSession({
-      user: {
-        name: newName,
-        firstName: values.firstName,
-        email: values.email,
-        image: session.user.image,
-        id: session.user.id,
-        groups: session.user.groups,
-        role: session.user.role,
-      },
-      expires: session.expires,
-    });
+    if (values.email === session.user.email) {
+      updateSession({
+        user: {
+          name: newName,
+          firstName: values.firstName,
+          email: values.email,
+          image: session.user.image,
+          id: session.user.id,
+          groups: session.user.groups,
+          role: session.user.role,
+        },
+        expires: session.expires,
+      });
+    }
 
     // eslint-disable-next-line no-undef
     const res = await fetch('/api/users', {

From 7e29896adc340ca86fb6da5aced7a2086f9dac7c Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Tue, 29 Dec 2020 11:00:56 -0500
Subject: [PATCH 4/7] #106 Add unauthorized card to all pages

---
 src/pages/annotations/index.jsx       |  6 ++----
 src/pages/documents/[slug]/edit.jsx   |  4 ++++
 src/pages/documents/index.jsx         |  4 ++++
 src/pages/documents/new.jsx           |  4 ++++
 src/pages/groups/[id]/edit.jsx        |  4 ++++
 src/pages/groups/[id]/index.jsx       | 12 +++++++++++-
 src/pages/groups/index.jsx            |  4 ++++
 src/pages/groups/new.jsx              |  4 ++++
 src/pages/user/[slug]/editprofile.jsx |  4 ++++
 src/pages/user/newuser.jsx            |  6 +++++-
 10 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/src/pages/annotations/index.jsx b/src/pages/annotations/index.jsx
index 6acbae9e..c37e27c3 100644
--- a/src/pages/annotations/index.jsx
+++ b/src/pages/annotations/index.jsx
@@ -3,6 +3,7 @@ import { useSession } from 'next-auth/client';
 import { Card } from 'react-bootstrap';
 import Layout from '../../components/Layout';
 import LoadingSpinner from '../../components/LoadingSpinner';
+import UnauthorizedCard from '../../components/UnauthorizedCard';
 import DashboardAnnotationList from '../../components/Dashboard/DashboardAnnotationList';
 
 const AnnotationsListVIew = ({
@@ -22,10 +23,7 @@ const AnnotationsListVIew = ({
         </Card>
       )}
       {!session && !loading && (
-      <Card>
-        <Card.Header><Card.Title>Not authorized</Card.Title></Card.Header>
-        <Card.Body>Please log in to use the application.</Card.Body>
-      </Card>
+        <UnauthorizedCard />
       )}
       {session && !loading && (
         <DashboardAnnotationList
diff --git a/src/pages/documents/[slug]/edit.jsx b/src/pages/documents/[slug]/edit.jsx
index 1778dc29..83c3b655 100644
--- a/src/pages/documents/[slug]/edit.jsx
+++ b/src/pages/documents/[slug]/edit.jsx
@@ -5,6 +5,7 @@ import {
 } from 'react-bootstrap';
 import Layout from '../../../components/Layout';
 import LoadingSpinner from '../../../components/LoadingSpinner';
+import UnauthorizedCard from '../../../components/UnauthorizedCard';
 import DocumentForm from '../../../components/DocumentForm';
 
 import { prefetchDocumentBySlug } from '../../../utils/docUtil';
@@ -26,6 +27,9 @@ const EditDocument = ({ document, alerts, statefulSession }) => {
           {((!session && loading) || pageLoading) && (
             <LoadingSpinner />
           )}
+          {!session && !loading && !pageLoading && (
+            <UnauthorizedCard />
+          )}
           {session && document && !loading && !pageLoading && (
             <>
               <Card.Header><Card.Title>Edit document</Card.Title></Card.Header>
diff --git a/src/pages/documents/index.jsx b/src/pages/documents/index.jsx
index 916610c3..d1fad2d8 100644
--- a/src/pages/documents/index.jsx
+++ b/src/pages/documents/index.jsx
@@ -6,6 +6,7 @@ import {
 import Layout from '../../components/Layout';
 import DocumentList from '../../components/DocumentList';
 import LoadingSpinner from '../../components/LoadingSpinner';
+import UnauthorizedCard from '../../components/UnauthorizedCard';
 import { getSharedDocumentsByGroup, getDocumentsByUser } from '../../utils/docUtil';
 
 const DocumentsIndex = ({
@@ -62,6 +63,9 @@ const DocumentsIndex = ({
         </Card.Body>
       </Card>
       )}
+      {!loading && !session && (
+        <UnauthorizedCard />
+      )}
       {!loading && session && !listLoading && (
       <Card>
         <Card.Header>
diff --git a/src/pages/documents/new.jsx b/src/pages/documents/new.jsx
index bf18225b..9789888d 100644
--- a/src/pages/documents/new.jsx
+++ b/src/pages/documents/new.jsx
@@ -4,6 +4,7 @@ import {
   Card, Col,
 } from 'react-bootstrap';
 import Layout from '../../components/Layout';
+import UnauthorizedCard from '../../components/UnauthorizedCard';
 import LoadingSpinner from '../../components/LoadingSpinner';
 import DocumentForm from '../../components/DocumentForm';
 
@@ -25,6 +26,9 @@ const NewDocument = ({ statefulSession }) => {
           {((!session && loading) || pageLoading) && (
             <LoadingSpinner />
           )}
+          {!session && !loading && (
+            <UnauthorizedCard />
+          )}
           {session && !loading && !pageLoading && (
             <>
               <Card.Header><Card.Title>Create a new document</Card.Title></Card.Header>
diff --git a/src/pages/groups/[id]/edit.jsx b/src/pages/groups/[id]/edit.jsx
index 47246702..fbef4803 100644
--- a/src/pages/groups/[id]/edit.jsx
+++ b/src/pages/groups/[id]/edit.jsx
@@ -19,6 +19,7 @@ import { useRouter } from 'next/router';
 import { Formik } from 'formik';
 import Layout from '../../../components/Layout';
 import LoadingSpinner from '../../../components/LoadingSpinner';
+import UnauthorizedCard from '../../../components/UnauthorizedCard';
 import ConfirmationDialog from '../../../components/ConfirmationDialog';
 import GroupRoleSummaries from '../../../components/GroupRoleSummaries';
 import GroupRoleBadge from '../../../components/GroupRoleBadge';
@@ -92,6 +93,9 @@ const EditGroup = ({
         {((!session && loading) || pageLoading) && (
           <LoadingSpinner />
         )}
+        {((!session && !loading) || (session && roleInGroup(session) === 'unauthorized')) && (
+          <UnauthorizedCard />
+        )}
         {session && !loading && !pageLoading
           && (session.user.role === 'admin'
             || roleInGroup(session) === 'owner'
diff --git a/src/pages/groups/[id]/index.jsx b/src/pages/groups/[id]/index.jsx
index daa24503..26229d10 100644
--- a/src/pages/groups/[id]/index.jsx
+++ b/src/pages/groups/[id]/index.jsx
@@ -9,6 +9,7 @@ import {
 } from 'react-bootstrap-icons';
 import Layout from '../../../components/Layout';
 import LoadingSpinner from '../../../components/LoadingSpinner';
+import UnauthorizedCard from '../../../components/UnauthorizedCard';
 import ConfirmationDialog from '../../../components/ConfirmationDialog';
 import GroupRoleSummaries from '../../../components/GroupRoleSummaries';
 import GroupRoleBadge from '../../../components/GroupRoleBadge';
@@ -23,7 +24,13 @@ const ViewGroup = ({ group, statefulSession }) => {
   const handleCloseModal = () => setShowModal(false);
   const handleShowModal = () => setShowModal(true);
 
-  const roleInGroup = (currentSession) => currentSession.user.groups.find((o) => Object.entries(o).some(([k, value]) => k === 'id' && value === group.id)).role;
+  const roleInGroup = (currentSession) => {
+    const groupInSession = currentSession.user.groups.find((o) => Object.entries(o).some(([k, value]) => k === 'id' && value === group.id));
+    const memberInGroup = group.members.find((o) => Object.entries(o).some(([k, value]) => k === 'id' && value === currentSession.user.id));
+    if (groupInSession || memberInGroup) {
+      return groupInSession ? groupInSession.role : memberInGroup.role;
+    } return 'unauthorized';
+  };
 
   return (
     <Layout alerts={alerts} type="group" title={group.name} statefulSession={statefulSession}>
@@ -31,6 +38,9 @@ const ViewGroup = ({ group, statefulSession }) => {
         {!session && loading && (
           <LoadingSpinner />
         )}
+        {((!session && !loading) || (session && roleInGroup(session) === 'unauthorized')) && (
+          <UnauthorizedCard />
+        )}
         {session && !loading && (
           <>
             <Card.Header>
diff --git a/src/pages/groups/index.jsx b/src/pages/groups/index.jsx
index 28bfc86e..a6a9558c 100644
--- a/src/pages/groups/index.jsx
+++ b/src/pages/groups/index.jsx
@@ -10,6 +10,7 @@ import {
 } from 'react-bootstrap-icons';
 import Layout from '../../components/Layout';
 import LoadingSpinner from '../../components/LoadingSpinner';
+import UnauthorizedCard from '../../components/UnauthorizedCard';
 import ConfirmationDialog from '../../components/ConfirmationDialog';
 import GroupRoleSummaries from '../../components/GroupRoleSummaries';
 import GroupRoleBadge from '../../components/GroupRoleBadge';
@@ -48,6 +49,9 @@ const GroupList = ({ query, initAlerts, statefulSession }) => {
         {((!session && loading) || pageLoading) && (
           <LoadingSpinner />
         )}
+        {!session && !loading && (
+          <UnauthorizedCard />
+        )}
         {session && !loading && !pageLoading && (
           <>
             <Card.Header>
diff --git a/src/pages/groups/new.jsx b/src/pages/groups/new.jsx
index 144628f0..0cd323c9 100644
--- a/src/pages/groups/new.jsx
+++ b/src/pages/groups/new.jsx
@@ -10,6 +10,7 @@ import Router from 'next/router';
 import { addGroupToUser } from '../../utils/groupUtil';
 import Layout from '../../components/Layout';
 import LoadingSpinner from '../../components/LoadingSpinner';
+import UnauthorizedCard from '../../components/UnauthorizedCard';
 
 const NewGroup = ({ statefulSession }) => {
   const [session, loading] = useSession();
@@ -66,6 +67,9 @@ const NewGroup = ({ statefulSession }) => {
           {((!session && loading) || pageLoading) && (
             <LoadingSpinner />
           )}
+          {!session && !loading && (
+            <UnauthorizedCard />
+          )}
           {session && !loading && !pageLoading && (
             <Card.Body className="text-center">
               <Card.Title>Create a new group</Card.Title>
diff --git a/src/pages/user/[slug]/editprofile.jsx b/src/pages/user/[slug]/editprofile.jsx
index 11ff8bf8..678a0957 100644
--- a/src/pages/user/[slug]/editprofile.jsx
+++ b/src/pages/user/[slug]/editprofile.jsx
@@ -8,6 +8,7 @@ import {
 import { FullName } from '../../../utils/nameUtil';
 import Layout from '../../../components/Layout';
 import LoadingSpinner from '../../../components/LoadingSpinner';
+import UnauthorizedCard from '../../../components/UnauthorizedCard';
 import { updateAllAnnotationsByUser } from '../../../utils/annotationUtil';
 
 const EditProfile = ({ user, updateSession, statefulSession }) => {
@@ -119,6 +120,9 @@ const EditProfile = ({ user, updateSession, statefulSession }) => {
           {!session && loading && (
             <LoadingSpinner />
           )}
+          {((!session && !loading) || (session && !user)) && (
+            <UnauthorizedCard />
+          )}
           {session && user && (
             <Card.Body>
               <Card.Title>Edit Profile</Card.Title>
diff --git a/src/pages/user/newuser.jsx b/src/pages/user/newuser.jsx
index eba878e7..53b5889d 100644
--- a/src/pages/user/newuser.jsx
+++ b/src/pages/user/newuser.jsx
@@ -13,6 +13,7 @@ import Link from 'next/link';
 import Router from 'next/router';
 import { FullName } from '../../utils/nameUtil';
 import Layout from '../../components/Layout';
+import UnauthorizedCard from '../../components/UnauthorizedCard';
 import LoadingSpinner from '../../components/LoadingSpinner';
 import { addUserToGroup } from '../../utils/groupUtil';
 
@@ -108,9 +109,12 @@ const NewUser = ({ groupId, updateSession, statefulSession }) => {
     <Layout alerts={alerts} type="newuser" statefulSession={statefulSession}>
       <Col lg="8" className="mx-auto">
         <Card>
-          {(pageLoading || !session) && (
+          {(loading || pageLoading) && (
             <LoadingSpinner />
           )}
+          {!loading && !pageLoading && !session && (
+            <UnauthorizedCard />
+          )}
           {!pageLoading && (statefulSession || (session && session.user.firstName)) && (
             <Card.Body className="text-center">
               <Card.Title>Welcome to Annotation Studio</Card.Title>

From 693f788fa4c6810422dbe5b5e1cac4cfe3693abf Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Tue, 29 Dec 2020 11:06:54 -0500
Subject: [PATCH 5/7] #106 Fix issues with pageLoading

---
 src/pages/documents/[slug]/edit.jsx | 4 ++--
 src/pages/documents/index.jsx       | 2 +-
 src/pages/documents/new.jsx         | 2 +-
 src/pages/groups/[id]/edit.jsx      | 2 +-
 src/pages/groups/index.jsx          | 2 +-
 src/pages/groups/new.jsx            | 2 +-
 src/pages/user/newuser.jsx          | 4 ++--
 7 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/pages/documents/[slug]/edit.jsx b/src/pages/documents/[slug]/edit.jsx
index 83c3b655..e3546b98 100644
--- a/src/pages/documents/[slug]/edit.jsx
+++ b/src/pages/documents/[slug]/edit.jsx
@@ -24,10 +24,10 @@ const EditDocument = ({ document, alerts, statefulSession }) => {
     <Layout alerts={errors} type="document" title={document ? `Edit Document: ${document.title}` : 'error'} statefulSession={statefulSession}>
       <Col lg="12" className="mx-auto">
         <Card>
-          {((!session && loading) || pageLoading) && (
+          {((!session && loading) || (session && pageLoading)) && (
             <LoadingSpinner />
           )}
-          {!session && !loading && !pageLoading && (
+          {!session && !loading && (
             <UnauthorizedCard />
           )}
           {session && document && !loading && !pageLoading && (
diff --git a/src/pages/documents/index.jsx b/src/pages/documents/index.jsx
index d1fad2d8..182e3b2d 100644
--- a/src/pages/documents/index.jsx
+++ b/src/pages/documents/index.jsx
@@ -51,7 +51,7 @@ const DocumentsIndex = ({
 
   return (
     <Layout alerts={alerts} type="document" statefulSession={statefulSession}>
-      {((loading && !session) || listLoading) && (
+      {((loading && !session) || (session && listLoading)) && (
       <Card>
         <Card.Header>
           <Card.Title>
diff --git a/src/pages/documents/new.jsx b/src/pages/documents/new.jsx
index 9789888d..d5196226 100644
--- a/src/pages/documents/new.jsx
+++ b/src/pages/documents/new.jsx
@@ -23,7 +23,7 @@ const NewDocument = ({ statefulSession }) => {
     <Layout alerts={errors} type="document" title="New Document" statefulSession={statefulSession}>
       <Col lg="12" className="mx-auto">
         <Card>
-          {((!session && loading) || pageLoading) && (
+          {((!session && loading) || (session && pageLoading)) && (
             <LoadingSpinner />
           )}
           {!session && !loading && (
diff --git a/src/pages/groups/[id]/edit.jsx b/src/pages/groups/[id]/edit.jsx
index fbef4803..9e08feb9 100644
--- a/src/pages/groups/[id]/edit.jsx
+++ b/src/pages/groups/[id]/edit.jsx
@@ -90,7 +90,7 @@ const EditGroup = ({
   return (
     <Layout alerts={alerts} type="group" title={`Manage Group: ${group.name}`} statefulSession={statefulSession}>
       <Card>
-        {((!session && loading) || pageLoading) && (
+        {((!session && loading) || (session && pageLoading)) && (
           <LoadingSpinner />
         )}
         {((!session && !loading) || (session && roleInGroup(session) === 'unauthorized')) && (
diff --git a/src/pages/groups/index.jsx b/src/pages/groups/index.jsx
index a6a9558c..13d077f1 100644
--- a/src/pages/groups/index.jsx
+++ b/src/pages/groups/index.jsx
@@ -46,7 +46,7 @@ const GroupList = ({ query, initAlerts, statefulSession }) => {
   return (
     <Layout alerts={alerts} type="group" statefulSession={statefulSession}>
       <Card>
-        {((!session && loading) || pageLoading) && (
+        {((!session && loading) || (session && pageLoading)) && (
           <LoadingSpinner />
         )}
         {!session && !loading && (
diff --git a/src/pages/groups/new.jsx b/src/pages/groups/new.jsx
index 0cd323c9..1ebaf9de 100644
--- a/src/pages/groups/new.jsx
+++ b/src/pages/groups/new.jsx
@@ -64,7 +64,7 @@ const NewGroup = ({ statefulSession }) => {
     <Layout alerts={alerts} type="group" title="New Group" statefulSession={statefulSession}>
       <Col lg="8" className="mx-auto">
         <Card>
-          {((!session && loading) || pageLoading) && (
+          {((!session && loading) || (session && pageLoading)) && (
             <LoadingSpinner />
           )}
           {!session && !loading && (
diff --git a/src/pages/user/newuser.jsx b/src/pages/user/newuser.jsx
index 53b5889d..ebcb2772 100644
--- a/src/pages/user/newuser.jsx
+++ b/src/pages/user/newuser.jsx
@@ -109,10 +109,10 @@ const NewUser = ({ groupId, updateSession, statefulSession }) => {
     <Layout alerts={alerts} type="newuser" statefulSession={statefulSession}>
       <Col lg="8" className="mx-auto">
         <Card>
-          {(loading || pageLoading) && (
+          {((loading && !session) || (pageLoading && session)) && (
             <LoadingSpinner />
           )}
-          {!loading && !pageLoading && !session && (
+          {!loading && !session && (
             <UnauthorizedCard />
           )}
           {!pageLoading && (statefulSession || (session && session.user.firstName)) && (

From 9747af5ed7b7d77ceafa83849e17a93a0bc76707 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Tue, 29 Dec 2020 11:10:51 -0500
Subject: [PATCH 6/7] #106 Handle empty group prop

---
 src/pages/groups/[id]/edit.jsx  | 12 ++++++------
 src/pages/groups/[id]/index.jsx |  6 +++---
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/pages/groups/[id]/edit.jsx b/src/pages/groups/[id]/edit.jsx
index 9e08feb9..2bc6718c 100644
--- a/src/pages/groups/[id]/edit.jsx
+++ b/src/pages/groups/[id]/edit.jsx
@@ -59,9 +59,9 @@ const EditGroup = ({
     showModal: false,
     editingGroupName: false,
     showTooltip: false,
-    groupName: group.name,
-    inviteUrl: group.inviteUrl,
-    members: group.members,
+    groupName: group ? group.name : '',
+    inviteUrl: group ? group.inviteUrl : '',
+    members: group ? group.members : '',
   });
   const handleCloseModal = () => setState({ ...state, showModal: false });
   const handleShowModal = () => setState({ ...state, showModal: true });
@@ -88,15 +88,15 @@ const EditGroup = ({
   };
 
   return (
-    <Layout alerts={alerts} type="group" title={`Manage Group: ${group.name}`} statefulSession={statefulSession}>
+    <Layout alerts={alerts} type="group" title={`Manage Group: ${group ? group.name : ''}`} statefulSession={statefulSession}>
       <Card>
         {((!session && loading) || (session && pageLoading)) && (
           <LoadingSpinner />
         )}
-        {((!session && !loading) || (session && roleInGroup(session) === 'unauthorized')) && (
+        {((!session && !loading) || (session && group && roleInGroup(session) === 'unauthorized')) && (
           <UnauthorizedCard />
         )}
-        {session && !loading && !pageLoading
+        {session && !loading && !pageLoading && group
           && (session.user.role === 'admin'
             || roleInGroup(session) === 'owner'
             || roleInGroup(session) === 'manager')
diff --git a/src/pages/groups/[id]/index.jsx b/src/pages/groups/[id]/index.jsx
index 26229d10..d3e13778 100644
--- a/src/pages/groups/[id]/index.jsx
+++ b/src/pages/groups/[id]/index.jsx
@@ -33,15 +33,15 @@ const ViewGroup = ({ group, statefulSession }) => {
   };
 
   return (
-    <Layout alerts={alerts} type="group" title={group.name} statefulSession={statefulSession}>
+    <Layout alerts={alerts} type="group" title={group ? group.name : ''} statefulSession={statefulSession}>
       <Card>
         {!session && loading && (
           <LoadingSpinner />
         )}
-        {((!session && !loading) || (session && roleInGroup(session) === 'unauthorized')) && (
+        {((!session && !loading) || (session && group && roleInGroup(session) === 'unauthorized')) && (
           <UnauthorizedCard />
         )}
-        {session && !loading && (
+        {session && !loading && group && (
           <>
             <Card.Header>
               {group.name}

From 7dc4b970fa6f8a8834d92c8c0241e7886848f7fe Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Tue, 29 Dec 2020 11:13:17 -0500
Subject: [PATCH 7/7] #106 Generalize unauthorized language

---
 src/components/UnauthorizedCard/UnauthorizedCard.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/UnauthorizedCard/UnauthorizedCard.js b/src/components/UnauthorizedCard/UnauthorizedCard.js
index edbac783..440dd01e 100644
--- a/src/components/UnauthorizedCard/UnauthorizedCard.js
+++ b/src/components/UnauthorizedCard/UnauthorizedCard.js
@@ -3,7 +3,7 @@ import { Card } from 'react-bootstrap';
 const UnauthorizedCard = () => (
   <Card>
     <Card.Header><Card.Title>Not authorized</Card.Title></Card.Header>
-    <Card.Body>Please log in to use the application.</Card.Body>
+    <Card.Body>You are not authorized to view this page.</Card.Body>
   </Card>
 );