limit number of invites user can generate

Author: tdjsnelling

api/src/controllers/user.js

@@ -54,6 +54,10 @@ export const register = async (req, res) => {
         }
 
         await Invite.findOneAndUpdate({ _id: id }, { $set: { claimed: true } })
+        await User.findOneAndUpdate(
+          { _id: invite.invitingUser },
+          { $inc: { remainingInvites: -1 } }
+        )
       } catch (err) {
         res.status(500).send(`Error verifying invitation: ${err.message}`)
         return
@@ -79,6 +83,7 @@ export const register = async (req, res) => {
           created,
           role,
           invitedBy: invite?.invitingUser,
+          remainingInvites: 0,
         })
 
         newUser.uid = crypto
@@ -94,6 +99,7 @@ export const register = async (req, res) => {
             token: jwt.sign(
               {
                 id: newUser._id,
+                username: newUser.username,
                 created,
                 role,
               },
@@ -130,6 +136,7 @@ export const login = async (req, res) => {
             token: jwt.sign(
               {
                 id: user._id,
+                username: user.username,
                 created: user.created,
                 role: user.role,
               },
@@ -154,6 +161,12 @@ export const login = async (req, res) => {
 }
 
 export const generateInvite = async (req, res) => {
+  const user = await User.findOne({ _id: req.userId }).lean()
+
+  if (user.remainingInvites < 1) {
+    res.status(403).send('You do not have any remaining invites')
+  }
+
   const created = Date.now()
   const validUntil = created + 48 * 60 * 60 * 1000
 
@@ -322,6 +335,7 @@ export const fetchUser = async (req, res) => {
           username: 1,
           created: 1,
           ...(req.userRole === 'admin' ? { email: 1, invitedBy: 1 } : {}),
+          remainingInvites: 1,
         },
       },
       {

api/src/schema/user.js

@@ -10,6 +10,7 @@ const User = new mongoose.Schema({
   banned: Boolean,
   role: String,
   invitedBy: mongoose.Schema.ObjectId,
+  remainingInvites: Number,
 })
 
 export default mongoose.model('user', User)

api/src/setup/createAdminUser.js

@@ -14,6 +14,7 @@ const createAdminUser = async () => {
       role: 'admin',
       password: hash,
       created,
+      remainingInvites: Number.MAX_SAFE_INTEGER,
     })
     adminUser.uid = crypto
       .createHash('sha256')

client/components/Button.js

@@ -24,6 +24,16 @@ const StyledButton = styled.button(
         bg: darken(0.1, theme.colors.primary),
         borderColor: darken(0.1, theme.colors.primary),
       },
+      '&[disabled]': {
+        cursor: 'not-allowed',
+        opacity: 0.5,
+        '&:hover': {
+          borderColor: 'primary',
+        },
+        '&:focus, &:active': {
+          bg: 'primary',
+        },
+      },
     }),
   ({ theme }) =>
     variant({
@@ -39,6 +49,14 @@ const StyledButton = styled.button(
             bg: darken(0.1, theme.colors.sidebar),
             borderColor: darken(0.1, theme.colors.sidebar),
           },
+          '&[disabled]': {
+            '&:hover': {
+              borderColor: 'sidebar',
+            },
+            '&:focus, &:active': {
+              bg: 'sidebar',
+            },
+          },
         },
         noBackground: {
           bg: 'transparent',
@@ -58,4 +76,12 @@ const StyledButton = styled.button(
   space
 )
 
-export default StyledButton
+const Button = ({ onClick, disabled, ...rest }) => (
+  <StyledButton
+    onClick={disabled ? undefined : onClick}
+    disabled={disabled}
+    {...rest}
+  />
+)
+
+export default Button

client/pages/account.js

@@ -15,7 +15,7 @@ import Select from '../components/Select'
 import Button from '../components/Button'
 import List from '../components/List'
 
-const Account = ({ token, invites = [], userRole }) => {
+const Account = ({ token, invites = [], user, userRole }) => {
   const [invitesList, setInvitesList] = useState(invites)
 
   const {
@@ -92,14 +92,27 @@ const Account = ({ token, invites = [], userRole }) => {
       >
         <Text as="h2">Invites</Text>
         <form onSubmit={handleGenerateInvite}>
-          <Box display="flex" alignItems="center">
+          <Box
+            display="flex"
+            alignItems="center"
+            border="1px solid"
+            borderColor="border"
+            borderRadius={1}
+            p={2}
+            pl={4}
+          >
+            <Text color="grey" mr={4}>
+              {user.remainingInvites} remaining
+            </Text>
             {userRole === 'admin' && (
               <Select name="role" required mr={3}>
                 <option value="user">Role: user</option>
                 <option value="admin">Role: admin</option>
               </Select>
             )}
-            <Button>Generate invite</Button>
+            <Button disabled={user.remainingInvites < 1}>
+              Generate invite
+            </Button>
           </Box>
         </form>
       </Box>
@@ -126,7 +139,13 @@ const Account = ({ token, invites = [], userRole }) => {
             header: 'Valid until',
             accessor: 'validUntil',
             cell: ({ value }) => (
-              <Text>{moment(value).format('HH:mm Do MMM YYYY')}</Text>
+              <Text
+                style={{
+                  textDecoration: value < Date.now() ? 'line-through' : 'none',
+                }}
+              >
+                {moment(value).format('HH:mm Do MMM YYYY')}
+              </Text>
             ),
             gridWidth: '1.2fr',
           },
@@ -148,21 +167,25 @@ const Account = ({ token, invites = [], userRole }) => {
           },
           {
             header: 'Copy',
-            cell: ({ row }) => (
-              <Button
-                variant="secondary"
-                onClick={() => {
-                  copy(
-                    `${location.protocol}//${location.host}/register?token=${row.token}`
-                  )
-                  alert('Invite link copied to clipboard')
-                }}
-                px={1}
-                py={1}
-              >
-                <Copy size={24} />
-              </Button>
-            ),
+            cell: ({ row }) => {
+              console.log(row)
+              return (
+                <Button
+                  variant="secondary"
+                  onClick={() => {
+                    copy(
+                      `${location.protocol}//${location.host}/register?token=${row.token}`
+                    )
+                    alert('Invite link copied to clipboard')
+                  }}
+                  disabled={row.claimed}
+                  px={1}
+                  py={1}
+                >
+                  <Copy size={24} />
+                </Button>
+              )
+            },
             rightAlign: true,
             gridWidth: '42px',
           },
@@ -184,6 +207,7 @@ const Account = ({ token, invites = [], userRole }) => {
           name="newPassword"
           type="password"
           label="New password"
+          autoComplete="new-password"
           mb={4}
           required
         />
@@ -203,17 +227,24 @@ export const getServerSideProps = async ({ req }) => {
     serverRuntimeConfig: { SQ_JWT_SECRET },
   } = getConfig()
 
-  const { role } = jwt.verify(token, SQ_JWT_SECRET)
+  const { role, username } = jwt.verify(token, SQ_JWT_SECRET)
 
   try {
+    const userRes = await fetch(`${SQ_API_URL}/user/${username}`, {
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${token}`,
+      },
+    })
+    const user = await userRes.json()
     const invitesRes = await fetch(`${SQ_API_URL}/account/invites`, {
       headers: {
         'Content-Type': 'application/json',
         Authorization: `Bearer ${token}`,
       },
     })
     const invites = await invitesRes.json()
-    return { props: { invites, userRole: role } }
+    return { props: { invites, user, userRole: role } }
   } catch (e) {
     return { props: {} }
   }