api maintenance

client/src/App.tsx

@@ -50,9 +50,12 @@ function App() {
       <div className="App">
         <Navbar />
         <Routes>
+          {/* Base access privileges */}
           <Route path="/"                       element={<Welcome />} />
           <Route path="/register"               element={<Register />} />
           <Route path="/login"                  element={<Login />} />
+
+          {/* Protected routes */}
           <Route path="/profile"                element={<Profile />} />
           <Route path="/collections"            element={<CollectionBrowser />} />
           <Route path="/collections/:id"        element={<Collection />} />
@@ -61,10 +64,11 @@ function App() {
           <Route path="/recipe/:id"             element={<Recipe />} />
           <Route path="/subscriptions"          element={<Subscriptions />} />
           <Route path="/subscriptions/:id"      element={<Collection />} />
-
           <Route path="/add-recipe"             element={<AddRecipe />} />
           <Route path="/grocery-list"           element={<GroceryListCollection />} />
           <Route path="/grocery-list/:id"       element={<GroceryList />} />
+
+          {/* For dev use */}
           <Route path="/sandbox"                element={<Sandbox />} />
         </Routes>
       </div>

client/src/components/pages/AddFriends.tsx

@@ -4,7 +4,7 @@ import FriendSearchWidget from "../ui/Widgets/NewFriendWidget"
 
 const AddFriends = () => {
     return (
-        <Protect>
+        <Protect redirect="/add-friends">
             <h1>Search for New Friends</h1>
 
             <Divider />

client/src/components/pages/AddRecipe.tsx

@@ -6,6 +6,7 @@ import API from "../../util/API";
 import { useSelectorContext } from "../../context/SelectorContext";
 import IngredientSelector from "../derived/IngredientSelector";
 import { v4 } from "uuid";
+import Protect from "../../util/Protect";
 
 const AddRecipe = () => {
     const { user, token } = useAuthContext();
@@ -99,7 +100,7 @@ const AddRecipe = () => {
     }
     
     return (
-        <Page>
+        <Protect redirect="/add-recipe">
             <h1>Add a New Recipe</h1>
             <Divider />
 
@@ -140,7 +141,7 @@ const AddRecipe = () => {
 
                 <div id="toast">{ toast }</div>
             </Panel>
-        </Page>
+        </Protect>
     )
 }
 

client/src/components/pages/Collection.tsx

@@ -62,7 +62,7 @@ const Collection = () => {
     }, [data, recipes])
 
     return (
-        <Protect>
+        <Protect redirect={`/collections/${id}`}>
             { content }
         </Protect>
     )

client/src/components/pages/CollectionBrowser.tsx

@@ -3,6 +3,7 @@ import { v4 } from "uuid";
 import { useAuthContext } from "../../context/AuthContext";
 import { ICollection } from "../../schemas";
 import API from "../../util/API";
+import Protect from "../../util/Protect";
 import { Page, Panel } from "../ui";
 
 const CollectionBrowser = () => {
@@ -47,7 +48,7 @@ const CollectionBrowser = () => {
     }, [list])
 
     return (
-        <Page>
+        <Protect redirect="/collections">
             { list && (
                 <>
                 <h1>Browsing your {list.length} collection{ (list.length !== 1) && "s" }:</h1>
@@ -62,7 +63,7 @@ const CollectionBrowser = () => {
                 })}
                 </>
             )}
-        </Page>
+        </Protect>
     )
 }
 

client/src/components/pages/Login.tsx

@@ -29,7 +29,7 @@ export default function Login() {
         setToken(result.token);
 
         // if there is a redirect, go there, else go home
-        navigate(`/${redirect ?? ''}`);
+        navigate(redirect ?? '/');
     }
 
     // check for logged in user and mount form

client/src/components/pages/Profile.tsx

@@ -160,7 +160,7 @@ export default function Profile() {
 
                 // if this is the current user's profile
                 setContents(
-                    <Protect redirect="profile">
+                    <Protect redirect="/profile">
                         <div className="profile-authenticated">
                             <h1>{user!.firstname}'s Profile</h1>
     

client/src/components/pages/Recipe.tsx

@@ -3,6 +3,7 @@ import { useParams } from "react-router-dom";
 import { Page, Panel } from "../ui";
 import { IRecipe } from "../../schemas";
 import { getRecipeByID } from "../../util/apiUtils";
+import Protect from "../../util/Protect";
 
 export default function Recipe() {
     const [recipe, setRecipe] = useState<IRecipe>();
@@ -23,7 +24,7 @@ export default function Recipe() {
     }, [])
 
     return (
-        <Page>
+        <Protect redirect={`/recipe/${id}`}>
             { recipe && (
                 <Panel>
                     <h1>{recipe.name}</h1>
@@ -31,6 +32,6 @@ export default function Recipe() {
                     <p>{recipe.preptime}</p>
                 </Panel>
             )}
-        </Page>
+        </Protect>
     )
 }

client/src/components/pages/StatusPages/403.tsx

@@ -0,0 +1,16 @@
+import { useNavigate } from "react-router-dom";
+import { Button, Divider, Page } from "../../ui";
+
+export default function AccessForbidden({ children = <></> }) {
+    const navigate = useNavigate();
+
+    return (
+        <Page>
+            <h1>403: Unauthorized</h1>
+            { children }
+
+            <Divider />
+            <Button onClick={() => navigate('/')}>Home</Button>
+        </Page>
+    )
+}

client/src/components/pages/StatusPages/404.tsx

@@ -0,0 +1,16 @@
+import { useNavigate } from "react-router-dom";
+import { Button, Divider, Page } from "../../ui";
+
+export default function ResourceNotFound({ children = <></> }) {
+    const navigate = useNavigate();
+
+    return (
+        <Page>
+            <h1>404: We didn't find what you are looking for</h1>
+            { children }
+
+            <Divider />
+            <Button onClick={() => navigate('/')}>Home</Button>
+        </Page>
+    )
+}

client/src/components/ui/Browser.tsx

@@ -16,7 +16,7 @@ const Browser: FC<BrowserProps> = ({ children, header, searchFunction }) => {
     })
 
     return (
-        <Protect>
+        <Protect redirect="/explore">
             <h1>{header}</h1>
         </Protect>
     )

client/src/util/API.ts

@@ -172,6 +172,11 @@ module API {
             return Promise.resolve(response.data);
         }
 
+        async getActiveFriends() {
+            const response = await this.instance.get(this.endpoint + "?accepted=true", this.headers);
+            return Promise.resolve(response.data);
+        }
+
         async addFriend(id: string | number) {
             const response = await this.instance.post(this.endpoint + `/${id}`, this.headers);
             return Promise.resolve(response.data);

client/src/util/Protect.tsx

@@ -1,31 +1,47 @@
+import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
+import AccessForbidden from "../components/pages/StatusPages/403";
 import { Button, Page } from "../components/ui";
-import Divider from "../components/ui/Divider";
 import { useAuthContext } from "../context/AuthContext";
+import API from "./API";
 import { ProtectPortal } from "./types";
 
-const Protect: ProtectPortal = ({ children, redirect = '' }) => {
-    const { user } = useAuthContext();
+const Protect: ProtectPortal = ({ children, redirect = '', accessRules = null }) => {
+    const [view, setView] = useState(<Page><h1>Loading...</h1></Page>);
+    const { user, token } = useAuthContext();
     const navigate = useNavigate();
 
-    if (!user) {
-        return (
-            <Page>
-                <div className="content-unauthorized">
-                    <h1>Hi there! You don't look too familiar.</h1>
+    useEffect(() => {
+        if (!user || !token) {
+            setView(
+                <AccessForbidden>
+                    <>
+                    <h2>Hi there! You don't look too familiar.</h2>
                     <p>To view the content on this page, please log in below:</p>
-                    <Divider />
                     <Button onClick={() => navigate(redirect ? `/login?redirect=${redirect}` : '/login')}>Log In</Button>
-                </div>
-            </Page>
-        )
-    } else {
-        return (
-            <Page>
-                { children || <></> }
-            </Page>
-        )
-    }
+                    </>
+                </AccessForbidden>
+            )
+
+            return;
+        }
+    
+        if (accessRules !== null) {
+            if (accessRules.mustBeRecipinAdmin && !(user.isadmin)) {
+                setView(
+                    <AccessForbidden>
+                        <>
+                        <h2>This page requires administrator access.</h2>
+                        <p>If you believe you are receiving this message in error, please contact Recipin support.</p>
+                        </>
+                    </AccessForbidden>
+                )
+            }
+        }
+    }, [user, token])
+
+
+    return view;
 }
 
 export default Protect;

client/src/util/types.ts

@@ -15,8 +15,15 @@ interface ButtonParams extends PortalBase {
     disabledText?: string
 }
 
+export interface AccessRules {
+    mustBeRecipinAdmin: boolean
+    mustBeFriend: boolean
+    mustBeSubscribed: boolean
+}
+
 export interface ProtectParams extends PortalBase {
     redirect?: string
+    accessRules?: AccessRules | null
 }
 
 interface UserCardProps extends PortalBase {