Merge pull request #42 from darinalleman/8-toggle-pack-privacy

maplethorpej · web-flow · commit 46e32a58d64e · 2021-02-12T20:31:27.000-06:00
Add pack privacy switch
diff --git a/api/controllers/pack.js b/api/controllers/pack.js
@@ -4,11 +4,11 @@ import Sequelize from 'sequelize';
 let router = express.Router();
 
 import models from '../models';
-import { authenticate } from "../utils/jwt";
+import { authenticate, authenicatePublicRequest } from "../utils/jwt";
 import { csvItems, packItemPayload, packPayload } from "../utils/build-payload";
 
 // Get
-router.get('/:id', async (req, res) => {
+router.get('/:id', authenicatePublicRequest, async (req, res) => {
     let { id } = req.params;
     models.Pack.findOne({
         where: { id },
@@ -21,7 +21,17 @@ router.get('/:id', async (req, res) => {
             { model: models.User, attributes: ['id', 'username'] },
         ]
     })
-        .then(pack => res.json(pack))
+        .then(pack => {
+            if (pack.public) { 
+                res.json(pack);
+            } else { //when the pack is private, only allow the owner of the pack to view
+                if (req.user && pack.userId == req.user.id) {
+                    res.json(pack);
+                } else {
+                    res.sendStatus(403); //return 'forbidden'
+                }
+            }
+        })
         .catch(err => res.json(err));
 });
 
diff --git a/api/models/pack.js b/api/models/pack.js
@@ -43,6 +43,9 @@ const pack = (sequelize, DataTypes) => {
         },
         gender: {
             type: DataTypes.ENUM(Object.values(gender))
+        },
+        userId: {
+            type: DataTypes.INTEGER
         }
     });
 
diff --git a/api/utils/jwt.js b/api/utils/jwt.js
@@ -36,4 +36,26 @@ export const authenticate = (req, res, next) => {
             next();
         })
         .catch(() => res.sendStatus(400));
-};
+};
+
+/*
+This method will authenticate the user if one is logged in, but does not return a 400/401 
+if there the user is not logged in to allow for public viewing of packs.
+This could also be used for public/private profiles.
+*/
+export const authenicatePublicRequest = (req, res, next) => {
+    const authHeader = req.get('authorization');
+    if (!authHeader) {
+        req.user = undefined;
+        next();
+    } else {
+        const token = authHeader.split(' ')[1];
+        const decoded = jwt.verify(token, process.env.JWT_SECRET);
+        models.User.findOne({where: {id: decoded.id}})
+            .then(user => {
+                req.user = user;
+                next();
+            })
+            .catch(() => res.sendStatus(400));
+    }
+}
diff --git a/frontend/src/app/Pack/Pack.tsx b/frontend/src/app/Pack/Pack.tsx
@@ -21,9 +21,11 @@ import Items from './Items';
 import { getWeightByCategory } from 'lib/utils/weight';
 
 import { Credit, PackWrapper, SectionHeader, SectionTitle, TripDescription } from "./styles";
+import FullPageError from 'app/components/FullPageError';
 
 const Pack: React.FC<PackSpecs.Props> = ({ getPack, weightUnit, packId }) => {
     const [loading, setLoading] = React.useState<boolean>(true);
+    const [packForbidden, setPackForbidden] = React.useState<boolean>(true);
     const [pack, setPack] = React.useState<PackType | null>(null);
     const [unit, setUnit] = React.useState<WeightUnit>(weightUnit);
     const { dispatch } = useSidebar();
@@ -34,9 +36,16 @@ const Pack: React.FC<PackSpecs.Props> = ({ getPack, weightUnit, packId }) => {
             .then(pack => {
                 setPack(pack);
                 setLoading(false);
+                setPackForbidden(false);
             })
-            .catch(() => {
-                alertError({ message: 'Unable to retrieve pack.' });
+            .catch(e => {
+                setLoading(false);
+                if (e.message.includes("failed with status code 403")){//when forbidden to view
+                    setPackForbidden(true);
+                }
+                else {
+                    alertError({ message: 'Unable to retrieve pack.' });
+                }
             });
 
         return function cleanup() {
@@ -68,6 +77,10 @@ const Pack: React.FC<PackSpecs.Props> = ({ getPack, weightUnit, packId }) => {
     if (loading) {
         return <Loading size="large"/>
     }
+    
+    if (packForbidden) {
+        return <FullPageError text="This pack is private. If you're sure this is your pack, make sure you're logged in."></FullPageError>
+    }
 
     if (!pack) {
         return <p>Pack not found!</p>
diff --git a/frontend/src/app/PackForm/PackForm.tsx b/frontend/src/app/PackForm/PackForm.tsx
@@ -21,7 +21,8 @@ import Loading from "app/components/Loading";
 import { useSidebar } from "app/components/Sidebar/Context";
 import { NavigationConfirmModal } from 'react-router-navigation-confirm';
 
-import { PageTitle, Controls, Box, Grid, PageDescription } from "styles/common";
+import { PageTitle, Controls, Box, Grid } from "styles/common";
+import SwitchInput from "app/components/FormFields/SwitchInput";
 
 const PackForm: React.FC<PackFormSpecs.Props> = ({ history, packId, getPack, exportItems, getItems, createPack, updatePack, user }) => {
     const [loading, setLoading] = React.useState<boolean>(true);
@@ -119,7 +120,8 @@ const PackForm: React.FC<PackFormSpecs.Props> = ({ history, packId, getPack, exp
                     duration_unit: packData ? packData.duration_unit : undefined,
                     temp_range: packData ? packData.temp_range : '',
                     season: packData ? packData.season : '',
-                    gender: packData ? packData.gender : undefined
+                    gender: packData ? packData.gender : undefined,
+                    public: packData ? packData.public : false
                 }}
                 validationSchema={Yup.object().shape({
                     title: Yup.string().required("Trail name or location is required.")
@@ -244,6 +246,13 @@ const PackForm: React.FC<PackFormSpecs.Props> = ({ history, packId, getPack, exp
                                                 />
                                             </Col>
                                         </Row>
+                                        <SwitchInput label="Pack Privacy"
+                                                        checked = {values.public}
+                                                        checkedText="Public"
+                                                        uncheckedText="Private"
+                                                        onChange={v => setFieldValue('public', v)}
+                                                        tip="When public, the pack will be viewable by anyone with a link"
+                                        ></SwitchInput>                       
                                     </div>
                                 </Grid>
                             </Box>
diff --git a/frontend/src/app/components/FormFields/SwitchInput.tsx b/frontend/src/app/components/FormFields/SwitchInput.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Switch } from 'antd';
+import { SharedInputProps } from "./types";
+import { InputContainer } from "./utils";
+
+interface SwitchProps extends SharedInputProps {
+    checked: boolean;
+    checkedText?: string | undefined;
+    uncheckedText?: string | undefined;
+    onChange: (checked: boolean) => void;
+}
+
+const SwitchInput: React.FC<SwitchProps> = ({ checked, checkedText, uncheckedText, onChange, label, tip, style }) => {
+    const handleChange = (value: any) => onChange(value);
+    return (
+        <InputContainer {...{ label, tip, style }} labelStyle = {{display:"inline", paddingRight: '8px'}}>
+            <Switch
+                checked = {checked}   
+                checkedChildren={checkedText}
+                unCheckedChildren={uncheckedText} 
+                onChange={handleChange}
+            />
+        </InputContainer>
+    );
+};
+
+export default SwitchInput;
diff --git a/frontend/src/app/components/FormFields/styles.ts b/frontend/src/app/components/FormFields/styles.ts
@@ -115,4 +115,4 @@ export const CharacterCounter = styled.small`
     &.full {
         color:red;
     }
-`;
+`;
diff --git a/frontend/src/app/components/FormFields/types.ts b/frontend/src/app/components/FormFields/types.ts
@@ -15,5 +15,6 @@ export interface SharedInputProps {
     tip?: string;
     last?: boolean;
     style?: CSSProperties;
+    labelStyle?: CSSProperties;
     onBlur?: () => void;
 }
diff --git a/frontend/src/app/components/FormFields/utils.tsx b/frontend/src/app/components/FormFields/utils.tsx
@@ -18,10 +18,10 @@ const tooltip = (tip: string) => (
     </Tooltip>
 );
 
-export const InputContainer: React.FC<SharedInputProps> = ({ label, errorMsg, error, tip, last, style, children }) => (
+export const InputContainer: React.FC<SharedInputProps> = ({ label, errorMsg, error, tip, last, style, children, labelStyle }) => (
     <Row className={last ? 'last' : ''} style={style}>
         {label && (
-            <Label>
+            <Label style={labelStyle}>
                 {label}
                 {tip && tooltip(tip)}
             </Label>
diff --git a/frontend/src/app/components/FullPageError/index.tsx b/frontend/src/app/components/FullPageError/index.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { PageDescription, PageTitle } from 'styles/common';
+
+interface FullPageErrorProps {
+    text?: string;
+    styles? : React.CSSProperties;
+}
+
+const FullPageError: React.FC<FullPageErrorProps> = ({ text, styles }) => {
+    const defaultStyles: React.CSSProperties = {};
+
+    return ( 
+        <div style={defaultStyles}>
+            <PageTitle><h1>Oops!</h1></PageTitle>  
+            <PageDescription><p>{text}</p></PageDescription>
+        </div>
+    )
+};
+
+export default FullPageError;
diff --git a/frontend/src/app/components/Statistics/index.tsx b/frontend/src/app/components/Statistics/index.tsx
@@ -24,6 +24,7 @@ const Statistics: React.FC<StatProps> = ({ pack }) => {
         return `${duration} ${duration_unit}`;
     };
 
+    let packUrlLabel = "Pack URL " + (pack.public ? "" : "(private)");
     const packUrl = `https://packstack.io${getPackPath(id, title)}`;
 
     return (
@@ -32,7 +33,7 @@ const Statistics: React.FC<StatProps> = ({ pack }) => {
             <Stat label="Temp Range" value={temp_range} icon={<Icon component={TempIcon}/>}/>
             <Stat label="Duration" value={durationValue()} icon={<Icon component={FootprintsIcon}/>}/>
             <Stat label="Gender" value={getGenderName(gender)}/>
-            <Stat label="Pack URL" value={packUrl} icon={<Icon type="link"/>}/>
+            <Stat label={packUrlLabel} value={packUrl} icon={<Icon type="link"/>}></Stat>
         </StatCollection>
     )
 
diff --git a/frontend/src/types/pack.ts b/frontend/src/types/pack.ts
@@ -10,6 +10,7 @@ export interface BasePack {
     temp_range?: string;
     season?: string;
     gender?: Gender;
+    public: boolean;
 }
 
 export interface Pack extends BasePack {

Original file line number	Diff line number	Diff line change
`@@ -43,6 +43,9 @@ const pack = (sequelize, DataTypes) => {`
`43`	`43`	`},`
`44`	`44`	`gender: {`
`45`	`45`	`type: DataTypes.ENUM(Object.values(gender))`
	`46`	`+ },`
	`47`	`+ userId: {`
	`48`	`+ type: DataTypes.INTEGER`
`46`	`49`	`}`
`47`	`50`	`});`
`48`	`51`
Original file line number	Diff line number	Diff line change
@@ -115,4 +115,4 @@ export const CharacterCounter = styled.small`
`115`	`115`	`&.full {`
`116`	`116`	`color:red;`
`117`	`117`	`}`
`118`		-`;
	`118`	+`;
Original file line number	Diff line number	Diff line change
`@@ -15,5 +15,6 @@ export interface SharedInputProps {`
`15`	`15`	`tip?: string;`
`16`	`16`	`last?: boolean;`
`17`	`17`	`style?: CSSProperties;`
	`18`	`+ labelStyle?: CSSProperties;`
`18`	`19`	`onBlur?: () => void;`
`19`	`20`	`}`