fix: review requests

This commit is contained in:
Sérgio Salgado 2021-01-29 13:16:21 +00:00 committed by Josh Harvey
parent 6e7794bfc6
commit 7166559d19
11 changed files with 310 additions and 324 deletions

View file

@ -84,17 +84,15 @@ const LoginCard = () => {
} }
return ( return (
<div> <Paper elevation={1}>
<Paper elevation={1}> <div className={classes.wrapper}>
<div className={classes.wrapper}> <div className={classes.titleWrapper}>
<div className={classes.titleWrapper}> <Logo className={classes.icon} />
<Logo className={classes.icon} /> <H2 className={classes.title}>Lamassu Admin</H2>
<H2 className={classes.title}>Lamassu Admin</H2>
</div>
{renderState()}
</div> </div>
</Paper> {renderState()}
</div> </div>
</Paper>
) )
} }

View file

@ -81,77 +81,73 @@ const Setup2FAState = ({
} }
return ( return (
<> secret &&
{secret && otpauth ? ( otpauth && (
<> <>
<div className={classes.infoWrapper}> <div className={classes.infoWrapper}>
<Label2 className={classes.info2}> <Label2 className={classes.info2}>
We detected that this account does not have its two-factor We detected that this account does not have its two-factor
authentication enabled. In order to protect the resources in the authentication enabled. In order to protect the resources in the
system, a two-factor authentication is enforced. system, a two-factor authentication is enforced.
</Label2> </Label2>
<Label2 className={classes.info2}> <Label2 className={classes.info2}>
To finish this process, please scan the following QR code or To finish this process, please scan the following QR code or insert
insert the secret further below on an authentication app of your the secret further below on an authentication app of your choice,
choice, such as Google Authenticator or Authy. such as Google Authenticator or Authy.
</Label2> </Label2>
</div> </div>
<div className={classes.qrCodeWrapper}> <div className={classes.qrCodeWrapper}>
<QRCode size={240} fgColor={primaryColor} value={otpauth} /> <QRCode size={240} fgColor={primaryColor} value={otpauth} />
</div> </div>
<div className={classes.secretWrapper}> <div className={classes.secretWrapper}>
<Label2 className={classes.secretLabel}>Your secret:</Label2> <Label2 className={classes.secretLabel}>Your secret:</Label2>
<Label2 <Label2 className={isShowing ? classes.secret : classes.hiddenSecret}>
className={isShowing ? classes.secret : classes.hiddenSecret}> {secret}
{secret} </Label2>
</Label2> <ActionButton
<ActionButton disabled={!secret && !otpauth}
disabled={!secret && !otpauth} color="primary"
color="primary" onClick={() => {
onClick={() => { setShowing(!isShowing)
setShowing(!isShowing) }}>
}}> {isShowing ? 'Hide' : 'Show'}
{isShowing ? 'Hide' : 'Show'} </ActionButton>
</ActionButton> </div>
</div> <div className={classes.confirm2FAInput}>
<div className={classes.confirm2FAInput}> <CodeInput
<CodeInput name="2fa"
name="2fa" value={twoFAConfirmation}
value={twoFAConfirmation} onChange={handle2FAChange}
onChange={handle2FAChange} numInputs={6}
numInputs={6} error={invalidToken}
error={invalidToken} shouldAutoFocus
shouldAutoFocus />
/> </div>
</div> <div className={classes.twofaFooter}>
<div className={classes.twofaFooter}> {getErrorMsg() && (
{getErrorMsg() && ( <P className={classes.errorMessage}>{getErrorMsg()}</P>
<P className={classes.errorMessage}>{getErrorMsg()}</P> )}
)} <Button
<Button onClick={() => {
onClick={() => { if (twoFAConfirmation.length !== 6) {
if (twoFAConfirmation.length !== 6) { setInvalidToken(true)
setInvalidToken(true) return
return }
setup2FA({
variables: {
username: clientField,
password: passwordField,
secret: secret,
codeConfirmation: twoFAConfirmation
} }
setup2FA({ })
variables: { }}
username: clientField, buttonClassName={classes.loginButton}>
password: passwordField, Done
secret: secret, </Button>
codeConfirmation: twoFAConfirmation </div>
} </>
}) )
}}
buttonClassName={classes.loginButton}>
Done
</Button>
</div>
</>
) : (
<div></div>
)}
</>
) )
} }

View file

@ -100,7 +100,7 @@ const styles = {
overflowX: 'auto', overflowX: 'auto',
width: '92.5%' width: '92.5%'
}, },
test1: { linkWrapper: {
width: '100%', width: '100%',
height: '100%', height: '100%',
overflow: 'hidden', overflow: 'hidden',

View file

@ -24,43 +24,41 @@ const ChangeRoleModal = ({
} }
return ( return (
<> showModal && (
{showModal && ( <Modal
<Modal closeOnBackdropClick={true}
closeOnBackdropClick={true} width={450}
width={450} height={250}
height={250} handleClose={handleClose}
handleClose={handleClose} open={true}>
open={true}> <Info2 className={classes.modalTitle}>
<Info2 className={classes.modalTitle}> Change {user.username}'s role?
Change {user.username}'s role? </Info2>
</Info2> <P className={classes.info}>
<P className={classes.info}> You are about to alter {user.username}'s role. This will change this
You are about to alter {user.username}'s role. This will change this user's permission to access certain resources.
user's permission to access certain resources. </P>
</P> <P className={classes.info}>Do you wish to proceed?</P>
<P className={classes.info}>Do you wish to proceed?</P> <div className={classes.footer}>
<div className={classes.footer}> <Button
<Button className={classes.submit}
className={classes.submit} onClick={() => {
onClick={() => { setAction(() =>
setAction(() => confirm.bind(null, {
confirm.bind(null, { variables: {
variables: { id: user.id,
id: user.id, newRole: user.role === 'superuser' ? 'user' : 'superuser'
newRole: user.role === 'superuser' ? 'user' : 'superuser' }
} })
}) )
) inputConfirmToggle()
inputConfirmToggle() handleClose()
handleClose() }}>
}}> Confirm
Confirm </Button>
</Button> </div>
</div> </Modal>
</Modal> )
)}
</>
) )
} }

View file

@ -10,7 +10,7 @@ import ErrorMessage from 'src/components/ErrorMessage'
import Modal from 'src/components/Modal' import Modal from 'src/components/Modal'
import { Button } from 'src/components/buttons' import { Button } from 'src/components/buttons'
import { TextInput, RadioGroup } from 'src/components/inputs/formik' import { TextInput, RadioGroup } from 'src/components/inputs/formik'
import { H1, H2, H3, Info3, Mono } from 'src/components/typography' import { H1, H3, Info2, P, Mono } from 'src/components/typography'
import CopyToClipboard from 'src/pages/Transactions/CopyToClipboard' import CopyToClipboard from 'src/pages/Transactions/CopyToClipboard'
import styles from '../UserManagement.styles' import styles from '../UserManagement.styles'
@ -139,19 +139,24 @@ const CreateUserModal = ({ showModal, toggleModal }) => {
{showModal && createUserURL && ( {showModal && createUserURL && (
<Modal <Modal
closeOnBackdropClick={true} closeOnBackdropClick={true}
width={600} width={500}
height={275} height={200}
handleClose={handleClose} handleClose={handleClose}
open={true}> open={true}>
<H2 className={classes.modalTitle}>Creating {usernameField}...</H2> <Info2 className={classes.modalTitle}>
<Info3 className={classes.info}> Creating {usernameField}...
</Info2>
<P className={classes.info}>
Safely share this link with {usernameField} to finish the Safely share this link with {usernameField} to finish the
registration process. registration process.
</Info3> </P>
<div className={classes.addressWrapper}> <div className={classes.addressWrapper}>
<Mono className={classes.address}> <Mono className={classes.address}>
<strong> <strong>
<CopyToClipboard buttonClassname={classes.copyToClipboard}> <CopyToClipboard
className={classes.link}
buttonClassname={classes.copyToClipboard}
wrapperClassname={classes.linkWrapper}>
{createUserURL} {createUserURL}
</CopyToClipboard> </CopyToClipboard>
</strong> </strong>

View file

@ -24,50 +24,48 @@ const DeleteUserModal = ({
} }
return ( return (
<> showModal && (
{showModal && ( <Modal
<Modal closeOnBackdropClick={true}
closeOnBackdropClick={true} width={600}
width={600} height={275}
height={275} handleClose={handleClose}
handleClose={handleClose} open={true}>
open={true}> <Info2 className={classes.modalTitle}>Delete {user.username}?</Info2>
<Info2 className={classes.modalTitle}>Delete {user.username}?</Info2> <P className={classes.info}>
<P className={classes.info}> You are about to delete {user.username}. This will remove existent
You are about to delete {user.username}. This will remove existent sessions and revoke this user's permissions to access the system.
sessions and revoke this user's permissions to access the system. </P>
</P> <P className={classes.info}>
<P className={classes.info}> This is a <b>PERMANENT</b> operation. Do you wish to proceed?
This is a <b>PERMANENT</b> operation. Do you wish to proceed? </P>
</P> <div className={classes.footer}>
<div className={classes.footer}> <Button
<Button className={classes.submit}
className={classes.submit} onClick={() => {
onClick={() => { if (user.role === 'superuser') {
if (user.role === 'superuser') { setAction(() =>
setAction(() => confirm.bind(null, {
confirm.bind(null, {
variables: {
id: user.id
}
})
)
inputConfirmToggle()
} else {
confirm({
variables: { variables: {
id: user.id id: user.id
} }
}) })
} )
handleClose() inputConfirmToggle()
}}> } else {
Confirm confirm({
</Button> variables: {
</div> id: user.id
</Modal> }
)} })
</> }
handleClose()
}}>
Confirm
</Button>
</div>
</Modal>
)
) )
} }

View file

@ -24,68 +24,66 @@ const EnableUserModal = ({
} }
return ( return (
<> showModal && (
{showModal && ( <Modal
<Modal closeOnBackdropClick={true}
closeOnBackdropClick={true} width={450}
width={450} height={275}
height={275} handleClose={handleClose}
handleClose={handleClose} open={true}>
open={true}> {!user.enabled && (
{!user.enabled && ( <>
<> <Info2 className={classes.modalTitle}>
<Info2 className={classes.modalTitle}> Enable {user.username}?
Enable {user.username}? </Info2>
</Info2> <P className={classes.info}>
<P className={classes.info}> You are about to enable {user.username} into the system,
You are about to enable {user.username} into the system, activating previous eligible sessions and grant permissions to
activating previous eligible sessions and grant permissions to access the system.
access the system. </P>
</P> <P className={classes.info}>Do you wish to proceed?</P>
<P className={classes.info}>Do you wish to proceed?</P> </>
</> )}
)} {user.enabled && (
{user.enabled && ( <>
<> <Info2 className={classes.modalTitle}>
<Info2 className={classes.modalTitle}> Disable {user.username}?
Disable {user.username}? </Info2>
</Info2> <P className={classes.info}>
<P className={classes.info}> You are about to disable {user.username} from the system,
You are about to disable {user.username} from the system, deactivating previous eligible sessions and removing permissions
deactivating previous eligible sessions and removing permissions to access the system.
to access the system. </P>
</P> <P className={classes.info}>Do you wish to proceed?</P>
<P className={classes.info}>Do you wish to proceed?</P> </>
</> )}
)} <div className={classes.footer}>
<div className={classes.footer}> <Button
<Button className={classes.submit}
className={classes.submit} onClick={() => {
onClick={() => { if (user.role === 'superuser') {
if (user.role === 'superuser') { setAction(() =>
setAction(() => confirm.bind(null, {
confirm.bind(null, {
variables: {
id: user.id
}
})
)
inputConfirmToggle()
} else {
confirm({
variables: { variables: {
id: user.id id: user.id
} }
}) })
} )
handleClose() inputConfirmToggle()
}}> } else {
Confirm confirm({
</Button> variables: {
</div> id: user.id
</Modal> }
)} })
</> }
handleClose()
}}>
Confirm
</Button>
</div>
</Modal>
)
) )
} }

View file

@ -55,47 +55,45 @@ const Input2FAModal = ({ showModal, toggleModal, action, vars }) => {
} }
return ( return (
<> showModal && (
{showModal && ( <Modal
<Modal closeOnBackdropClick={true}
closeOnBackdropClick={true} width={500}
width={500} height={350}
height={350} handleClose={handleClose}
handleClose={handleClose} open={true}>
open={true}> <Info2 className={classes.modalTitle}>Confirm action</Info2>
<Info2 className={classes.modalTitle}>Confirm action</Info2> <P className={classes.info}>
<P className={classes.info}> To make changes on this user, please confirm this action by entering
To make changes on this user, please confirm this action by entering your two-factor authentication code below.
your two-factor authentication code below. </P>
</P> <CodeInput
<CodeInput name="2fa"
name="2fa" value={twoFACode}
value={twoFACode} onChange={handleCodeChange}
onChange={handleCodeChange} numInputs={6}
numInputs={6} error={invalidCode}
error={invalidCode} containerStyle={classes.codeContainer}
containerStyle={classes.codeContainer} shouldAutoFocus
shouldAutoFocus />
/> {getErrorMsg() && (
{getErrorMsg() && ( <P className={classes.errorMessage}>{getErrorMsg()}</P>
<P className={classes.errorMessage}>{getErrorMsg()}</P> )}
)} <div className={classes.footer}>
<div className={classes.footer}> <Button
<Button className={classes.submit}
className={classes.submit} onClick={() => {
onClick={() => { if (twoFACode.length !== 6) {
if (twoFACode.length !== 6) { setInvalidCode(true)
setInvalidCode(true) return
return }
} confirm2FA({ variables: { code: twoFACode } })
confirm2FA({ variables: { code: twoFACode } }) }}>
}}> Confirm
Confirm </Button>
</Button> </div>
</div> </Modal>
</Modal> )
)}
</>
) )
} }

View file

@ -17,36 +17,34 @@ const Reset2FAModal = ({ showModal, toggleModal, reset2FAURL, user }) => {
} }
return ( return (
<> showModal && (
{showModal && ( <Modal
<Modal closeOnBackdropClick={true}
closeOnBackdropClick={true} width={500}
width={500} height={200}
height={200} handleClose={handleClose}
handleClose={handleClose} open={true}>
open={true}> <Info2 className={classes.modalTitle}>
<Info2 className={classes.modalTitle}> Reset 2FA for {user.username}
Reset 2FA for {user.username} </Info2>
</Info2> <P className={classes.info}>
<P className={classes.info}> Safely share this link with {user.username} for a two-factor
Safely share this link with {user.username} for a two-factor authentication reset.
authentication reset. </P>
</P> <div className={classes.addressWrapper}>
<div className={classes.addressWrapper}> <Mono className={classes.address}>
<Mono className={classes.address}> <strong>
<strong> <CopyToClipboard
<CopyToClipboard className={classes.link}
className={classes.link} buttonClassname={classes.copyToClipboard}
buttonClassname={classes.copyToClipboard} wrapperClassname={classes.linkWrapper}>
wrapperClassname={classes.test1}> {reset2FAURL}
{reset2FAURL} </CopyToClipboard>
</CopyToClipboard> </strong>
</strong> </Mono>
</Mono> </div>
</div> </Modal>
</Modal> )
)}
</>
) )
} }

View file

@ -22,35 +22,33 @@ const ResetPasswordModal = ({
} }
return ( return (
<> showModal && (
{showModal && ( <Modal
<Modal closeOnBackdropClick={true}
closeOnBackdropClick={true} width={500}
width={500} height={180}
height={180} handleClose={handleClose}
handleClose={handleClose} open={true}>
open={true}> <Info2 className={classes.modalTitle}>
<Info2 className={classes.modalTitle}> Reset password for {user.username}
Reset password for {user.username} </Info2>
</Info2> <P className={classes.info}>
<P className={classes.info}> Safely share this link with {user.username} for a password reset.
Safely share this link with {user.username} for a password reset. </P>
</P> <div className={classes.addressWrapper}>
<div className={classes.addressWrapper}> <Mono className={classes.address}>
<Mono className={classes.address}> <strong>
<strong> <CopyToClipboard
<CopyToClipboard className={classes.link}
className={classes.link} buttonClassname={classes.copyToClipboard}
buttonClassname={classes.copyToClipboard} wrapperClassname={classes.linkWrapper}>
wrapperClassname={classes.test1}> {resetPasswordURL}
{resetPasswordURL} </CopyToClipboard>
</CopyToClipboard> </strong>
</strong> </Mono>
</Mono> </div>
</div> </Modal>
</Modal> )
)}
</>
) )
} }

View file

@ -21,7 +21,6 @@ import ResetPassword from 'src/pages/Authentication/ResetPassword'
import Blacklist from 'src/pages/Blacklist' import Blacklist from 'src/pages/Blacklist'
import Cashout from 'src/pages/Cashout' import Cashout from 'src/pages/Cashout'
import Commissions from 'src/pages/Commissions' import Commissions from 'src/pages/Commissions'
// import ConfigMigration from 'src/pages/ConfigMigration'
import { Customers, CustomerProfile } from 'src/pages/Customers' import { Customers, CustomerProfile } from 'src/pages/Customers'
import Dashboard from 'src/pages/Dashboard' import Dashboard from 'src/pages/Dashboard'
import Funding from 'src/pages/Funding' import Funding from 'src/pages/Funding'