@@ -2,30 +2,41 @@ import React, { useState } from 'react'
22import getConfig from 'next/config'
33import moment from 'moment'
44import copy from 'copy-to-clipboard'
5+ import jwt from 'jsonwebtoken'
56import { Copy } from '@styled-icons/boxicons-regular/Copy'
67import withAuth from '../utils/withAuth'
78import getReqCookies from '../utils/getReqCookies'
89import SEO from '../components/SEO'
910import Box from '../components/Box'
1011import Text from '../components/Text'
12+ import Infobox from '../components/Infobox'
1113import Input from '../components/Input'
14+ import Select from '../components/Select'
1215import Button from '../components/Button'
1316import List from '../components/List'
1417
15- const Account = ( { token, invites } ) => {
18+ const Account = ( { token, invites, userRole } ) => {
1619 const [ invitesList , setInvitesList ] = useState ( invites )
1720
1821 const {
1922 publicRuntimeConfig : { SQ_API_URL } ,
2023 } = getConfig ( )
2124
22- const handleGenerateInvite = async ( ) => {
25+ const handleGenerateInvite = async ( e ) => {
26+ e . preventDefault ( )
27+ const form = new FormData ( e . target )
28+
2329 try {
24- const inviteRes = await fetch ( `${ SQ_API_URL } /account/generate-invite` , {
25- headers : {
26- Authorization : `Bearer ${ token } ` ,
27- } ,
28- } )
30+ const inviteRes = await fetch (
31+ `${ SQ_API_URL } /account/generate-invite?role=${
32+ form . get ( 'role' ) || 'user'
33+ } `,
34+ {
35+ headers : {
36+ Authorization : `Bearer ${ token } ` ,
37+ } ,
38+ }
39+ )
2940 const invite = await inviteRes . json ( )
3041 setInvitesList ( ( cur ) => {
3142 const currentInvitesList = [ ...cur ]
@@ -68,51 +79,75 @@ const Account = ({ token, invites }) => {
6879 < Text as = "h1" mb = { 5 } >
6980 My account
7081 </ Text >
82+ { userRole === 'admin' && (
83+ < Infobox mb = { 5 } >
84+ < Text > This is an admin account.</ Text >
85+ </ Infobox >
86+ ) }
7187 < Box
7288 display = "flex"
7389 alignItems = "center"
7490 justifyContent = "space-between"
7591 mb = { 4 }
7692 >
7793 < Text as = "h2" > Invites</ Text >
78- < Button onClick = { handleGenerateInvite } > Generate invite</ Button >
94+ < form onSubmit = { handleGenerateInvite } >
95+ < Box display = "flex" alignItems = "center" >
96+ { userRole === 'admin' && (
97+ < Select name = "role" required mr = { 3 } >
98+ < option value = "user" > Role: user</ option >
99+ < option value = "admin" > Role: admin</ option >
100+ </ Select >
101+ ) }
102+ < Button > Generate invite</ Button >
103+ </ Box >
104+ </ form >
79105 </ Box >
80106 < List
81107 data = { invitesList }
82108 columns = { [
83109 {
110+ header : 'Token' ,
84111 accessor : 'token' ,
85112 cell : ( { value } ) => (
86113 < Text fontFamily = "monospace" >
87- { value . slice ( 0 , 10 ) } ... { value . slice ( value . length - 10 ) }
114+ ... { value . slice ( value . length - 16 ) }
88115 </ Text >
89116 ) ,
90117 gridWidth : '1fr' ,
91118 } ,
92119 {
120+ header : 'Claimed' ,
93121 accessor : 'claimed' ,
94- cell : ( { value } ) => (
95- < Text > { value ? 'Claimed' : 'Not claimed' } </ Text >
96- ) ,
122+ cell : ( { value } ) => < Text > { value ? 'Yes' : 'No' } </ Text > ,
97123 gridWidth : '0.5fr' ,
98124 } ,
99125 {
126+ header : 'Valid until' ,
100127 accessor : 'validUntil' ,
101128 cell : ( { value } ) => (
102- < Text >
103- Valid until { moment ( value ) . format ( 'HH:mm Do MMM YYYY' ) }
104- </ Text >
129+ < Text > { moment ( value ) . format ( 'HH:mm Do MMM YYYY' ) } </ Text >
105130 ) ,
106131 gridWidth : '1.2fr' ,
107132 } ,
108133 {
134+ header : 'Created' ,
109135 accessor : 'created' ,
110136 cell : ( { value } ) => (
111- < Text > Created { moment ( value ) . format ( 'Do MMM YYYY' ) } </ Text >
137+ < Text > { moment ( value ) . format ( 'HH:mm Do MMM YYYY' ) } </ Text >
112138 ) ,
113139 gridWidth : '1fr' ,
114140 } ,
115141 {
142+ header : 'Role' ,
143+ accessor : 'role' ,
144+ cell : ( { value } ) => (
145+ < Text css = { { textTransform : 'capitalize' } } > { value } </ Text >
146+ ) ,
147+ gridWidth : '0.6fr' ,
148+ } ,
149+ {
150+ header : 'Copy' ,
116151 cell : ( { row } ) => (
117152 < Button
118153 variant = "secondary"
@@ -128,7 +163,8 @@ const Account = ({ token, invites }) => {
128163 < Copy size = { 24 } />
129164 </ Button >
130165 ) ,
131- gridWidth : '32px' ,
166+ rightAlign : true ,
167+ gridWidth : '42px' ,
132168 } ,
133169 ] }
134170 mb = { 5 }
@@ -164,8 +200,11 @@ export const getServerSideProps = async ({ req }) => {
164200
165201 const {
166202 publicRuntimeConfig : { SQ_API_URL } ,
203+ serverRuntimeConfig : { SQ_JWT_SECRET } ,
167204 } = getConfig ( )
168205
206+ const { role } = jwt . verify ( token , SQ_JWT_SECRET )
207+
169208 try {
170209 const invitesRes = await fetch ( `${ SQ_API_URL } /account/invites` , {
171210 headers : {
@@ -174,7 +213,7 @@ export const getServerSideProps = async ({ req }) => {
174213 } ,
175214 } )
176215 const invites = await invitesRes . json ( )
177- return { props : { invites } }
216+ return { props : { invites, userRole : role } }
178217 } catch ( e ) {
179218 return { props : { } }
180219 }
0 commit comments