From 26a051ff0754c8a082f769a4bf00a0894ff54c63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Salgado?= Date: Tue, 20 Apr 2021 20:15:22 +0100 Subject: [PATCH] fix: remove logic unnecessarily tied to components and error handling --- .../src/pages/Authentication/LoginCard.js | 26 ++++++------ .../src/pages/Authentication/Register.js | 42 +++++++++---------- .../src/pages/Authentication/Reset2FA.js | 26 ++++++------ .../src/pages/Authentication/ResetPassword.js | 2 +- .../pages/UserManagement/UserManagement.js | 41 +++++++++--------- .../UserManagement/modals/ChangeRoleModal.js | 6 ++- .../UserManagement/modals/CreateUserModal.js | 22 +++++----- .../UserManagement/modals/EnableUserModal.js | 10 +++-- .../UserManagement/modals/Reset2FAModal.js | 30 +++++++------ .../modals/ResetPasswordModal.js | 30 +++++++------ 10 files changed, 123 insertions(+), 112 deletions(-) diff --git a/new-lamassu-admin/src/pages/Authentication/LoginCard.js b/new-lamassu-admin/src/pages/Authentication/LoginCard.js index 77f97b0c..6dc90c06 100644 --- a/new-lamassu-admin/src/pages/Authentication/LoginCard.js +++ b/new-lamassu-admin/src/pages/Authentication/LoginCard.js @@ -13,22 +13,22 @@ import { STATES } from './states' const useStyles = makeStyles(styles) +const initialState = { + twoFAField: '', + clientField: '', + passwordField: '', + rememberMeField: false, + loginState: STATES.LOGIN +} + +const reducer = (state, action) => { + const { type, payload } = action + return { ...state, ...payload, loginState: type } +} + const LoginCard = () => { const classes = useStyles() - const initialState = { - twoFAField: '', - clientField: '', - passwordField: '', - rememberMeField: false, - loginState: STATES.LOGIN - } - - const reducer = (state, action) => { - const { type, payload } = action - return { ...state, ...payload, loginState: type } - } - const [state, dispatch] = useReducer(reducer, initialState) const renderState = () => { diff --git a/new-lamassu-admin/src/pages/Authentication/Register.js b/new-lamassu-admin/src/pages/Authentication/Register.js index 1572429f..4c8c7121 100644 --- a/new-lamassu-admin/src/pages/Authentication/Register.js +++ b/new-lamassu-admin/src/pages/Authentication/Register.js @@ -61,46 +61,44 @@ const initialValues = { confirmPassword: '' } +const initialState = { + username: null, + role: null, + result: '' +} + +const reducer = (state, action) => { + const { type, payload } = action + return { ...state, ...payload, result: type } +} + const Register = () => { const classes = useStyles() const history = useHistory() const token = QueryParams().get('t') - const initialState = { - username: null, - role: null, - result: '' - } - - const reducer = (state, action) => { - const { type, payload } = action - return { ...state, ...payload, result: type } - } - const [state, dispatch] = useReducer(reducer, initialState) const { error: queryError, loading } = useQuery(VALIDATE_REGISTER_LINK, { variables: { token: token }, onCompleted: ({ validateRegisterLink: info }) => { if (!info) { - dispatch({ + return dispatch({ type: 'failure' }) - } else { - dispatch({ - type: 'success', - payload: { - username: info.username, - role: info.role - } - }) } + dispatch({ + type: 'success', + payload: { + username: info.username, + role: info.role + } + }) }, - onError: () => { + onError: () => dispatch({ type: 'failure' }) - } }) const [register, { error: mutationError }] = useMutation(REGISTER, { diff --git a/new-lamassu-admin/src/pages/Authentication/Reset2FA.js b/new-lamassu-admin/src/pages/Authentication/Reset2FA.js index b58ffc8d..5e112e02 100644 --- a/new-lamassu-admin/src/pages/Authentication/Reset2FA.js +++ b/new-lamassu-admin/src/pages/Authentication/Reset2FA.js @@ -14,7 +14,6 @@ import { primaryColor } from 'src/styling/variables' import styles from './shared.styles' -const QueryParams = () => new URLSearchParams(useLocation().search) const useStyles = makeStyles(styles) const VALIDATE_RESET_2FA_LINK = gql` @@ -33,27 +32,28 @@ const RESET_2FA = gql` } ` +const initialState = { + userID: null, + secret: null, + otpauth: null, + result: null +} + +const reducer = (state, action) => { + const { type, payload } = action + return { ...state, ...payload, result: type } +} + const Reset2FA = () => { const classes = useStyles() const history = useHistory() + const QueryParams = () => new URLSearchParams(useLocation().search) const token = QueryParams().get('t') const [isShowing, setShowing] = useState(false) const [invalidToken, setInvalidToken] = useState(false) const [twoFAConfirmation, setTwoFAConfirmation] = useState('') - const initialState = { - userID: null, - secret: null, - otpauth: null, - result: null - } - - const reducer = (state, action) => { - const { type, payload } = action - return { ...state, ...payload, result: type } - } - const [state, dispatch] = useReducer(reducer, initialState) const handle2FAChange = value => { diff --git a/new-lamassu-admin/src/pages/Authentication/ResetPassword.js b/new-lamassu-admin/src/pages/Authentication/ResetPassword.js index 40e79832..4b4fa62d 100644 --- a/new-lamassu-admin/src/pages/Authentication/ResetPassword.js +++ b/new-lamassu-admin/src/pages/Authentication/ResetPassword.js @@ -14,7 +14,6 @@ import { ReactComponent as Logo } from 'src/styling/icons/menu/logo.svg' import styles from './shared.styles' -const QueryParams = () => new URLSearchParams(useLocation().search) const useStyles = makeStyles(styles) const VALIDATE_RESET_PASSWORD_LINK = gql` @@ -53,6 +52,7 @@ const initialValues = { const ResetPassword = () => { const classes = useStyles() const history = useHistory() + const QueryParams = () => new URLSearchParams(useLocation().search) const token = QueryParams().get('t') const [userID, setUserID] = useState(null) const [isLoading, setLoading] = useState(true) diff --git a/new-lamassu-admin/src/pages/UserManagement/UserManagement.js b/new-lamassu-admin/src/pages/UserManagement/UserManagement.js index 5d7ec85c..76e560ca 100644 --- a/new-lamassu-admin/src/pages/UserManagement/UserManagement.js +++ b/new-lamassu-admin/src/pages/UserManagement/UserManagement.js @@ -33,32 +33,31 @@ const GET_USERS = gql` } ` +const initialState = { + showCreateUserModal: false, + showResetPasswordModal: false, + showReset2FAModal: false, + showRoleModal: false, + showEnableUserModal: false +} + +const reducer = (_, action) => { + const { type, payload } = action + switch (type) { + case 'close': + return initialState + case 'open': + return { ...initialState, [payload]: true } + default: + return initialState + } +} + const Users = () => { const classes = useStyles() const { userData } = useContext(AppContext) const { data: userResponse } = useQuery(GET_USERS) - - const initialState = { - showCreateUserModal: false, - showResetPasswordModal: false, - showReset2FAModal: false, - showRoleModal: false, - showEnableUserModal: false - } - - const reducer = (_, action) => { - const { type, payload } = action - switch (type) { - case 'close': - return initialState - case 'open': - return { ...initialState, [payload]: true } - default: - return initialState - } - } - const [state, dispatch] = useReducer(reducer, initialState) const [userInfo, setUserInfo] = useState(null) diff --git a/new-lamassu-admin/src/pages/UserManagement/modals/ChangeRoleModal.js b/new-lamassu-admin/src/pages/UserManagement/modals/ChangeRoleModal.js index 3704a6bb..0c0ef7ac 100644 --- a/new-lamassu-admin/src/pages/UserManagement/modals/ChangeRoleModal.js +++ b/new-lamassu-admin/src/pages/UserManagement/modals/ChangeRoleModal.js @@ -3,6 +3,7 @@ import { makeStyles } from '@material-ui/core/styles' import gql from 'graphql-tag' import React, { useState } from 'react' +import ErrorMessage from 'src/components/ErrorMessage' import Modal from 'src/components/Modal' import { Button } from 'src/components/buttons' import { Info2, P } from 'src/components/typography' @@ -32,7 +33,8 @@ const useStyles = makeStyles(styles) const ChangeRoleModal = ({ state, dispatch, user, requiresConfirmation }) => { const classes = useStyles() - const [changeUserRole] = useMutation(CHANGE_USER_ROLE, { + const [changeUserRole, { error }] = useMutation(CHANGE_USER_ROLE, { + onCompleted: () => handleClose(), refetchQueries: () => ['users'] }) @@ -46,7 +48,6 @@ const ChangeRoleModal = ({ state, dispatch, user, requiresConfirmation }) => { newRole: user.role === 'superuser' ? 'user' : 'superuser' } }) - handleClose() } const handleClose = () => { @@ -81,6 +82,7 @@ const ChangeRoleModal = ({ state, dispatch, user, requiresConfirmation }) => {

Do you wish to proceed?

+ {error && {error}} diff --git a/new-lamassu-admin/src/pages/UserManagement/modals/CreateUserModal.js b/new-lamassu-admin/src/pages/UserManagement/modals/CreateUserModal.js index 8ab10d15..a7f5947c 100644 --- a/new-lamassu-admin/src/pages/UserManagement/modals/CreateUserModal.js +++ b/new-lamassu-admin/src/pages/UserManagement/modals/CreateUserModal.js @@ -39,23 +39,23 @@ const initialValues = { role: '' } +const radioOptions = [ + { + code: 'user', + display: 'Regular user' + }, + { + code: 'superuser', + display: 'Superuser' + } +] + const CreateUserModal = ({ state, dispatch }) => { const classes = useStyles() const [usernameField, setUsernameField] = useState('') const [createUserURL, setCreateUserURL] = useState(null) - const radioOptions = [ - { - code: 'user', - display: 'Regular user' - }, - { - code: 'superuser', - display: 'Superuser' - } - ] - const handleClose = () => { setCreateUserURL(null) dispatch({ diff --git a/new-lamassu-admin/src/pages/UserManagement/modals/EnableUserModal.js b/new-lamassu-admin/src/pages/UserManagement/modals/EnableUserModal.js index 5757f6ea..598b017a 100644 --- a/new-lamassu-admin/src/pages/UserManagement/modals/EnableUserModal.js +++ b/new-lamassu-admin/src/pages/UserManagement/modals/EnableUserModal.js @@ -3,6 +3,7 @@ import { makeStyles } from '@material-ui/core/styles' import gql from 'graphql-tag' import React, { useState } from 'react' +import ErrorMessage from 'src/components/ErrorMessage' import Modal from 'src/components/Modal' import { Button } from 'src/components/buttons' import { Info2, P } from 'src/components/typography' @@ -32,11 +33,13 @@ const useStyles = makeStyles(styles) const EnableUserModal = ({ state, dispatch, user, requiresConfirmation }) => { const classes = useStyles() - const [enableUser] = useMutation(ENABLE_USER, { + const [enableUser, { error: enableError }] = useMutation(ENABLE_USER, { + onCompleted: () => handleClose(), refetchQueries: () => ['users'] }) - const [disableUser] = useMutation(DISABLE_USER, { + const [disableUser, { error: disableError }] = useMutation(DISABLE_USER, { + onCompleted: () => handleClose(), refetchQueries: () => ['users'] }) @@ -62,7 +65,6 @@ const EnableUserModal = ({ state, dispatch, user, requiresConfirmation }) => { const submit = () => { user?.enabled ? disable() : enable() - handleClose() } const handleClose = () => { @@ -115,6 +117,8 @@ const EnableUserModal = ({ state, dispatch, user, requiresConfirmation }) => { )}
+ {disableError && {disableError}} + {enableError && {enableError}} diff --git a/new-lamassu-admin/src/pages/UserManagement/modals/Reset2FAModal.js b/new-lamassu-admin/src/pages/UserManagement/modals/Reset2FAModal.js index 8712844c..370d58bf 100644 --- a/new-lamassu-admin/src/pages/UserManagement/modals/Reset2FAModal.js +++ b/new-lamassu-admin/src/pages/UserManagement/modals/Reset2FAModal.js @@ -3,6 +3,7 @@ import { makeStyles } from '@material-ui/core/styles' import gql from 'graphql-tag' import React, { useEffect, useState } from 'react' +import ErrorMessage from 'src/components/ErrorMessage' import Modal from 'src/components/Modal' import { Info2, P, Mono } from 'src/components/typography' import CopyToClipboard from 'src/pages/Transactions/CopyToClipboard' @@ -28,7 +29,7 @@ const Reset2FAModal = ({ state, dispatch, user, requiresConfirmation }) => { const classes = useStyles() const [reset2FAUrl, setReset2FAUrl] = useState('') - const [createReset2FAToken, { loading }] = useMutation( + const [createReset2FAToken, { loading, error }] = useMutation( CREATE_RESET_2FA_TOKEN, { onCompleted: ({ createReset2FAToken: token }) => { @@ -88,18 +89,21 @@ const Reset2FAModal = ({ state, dispatch, user, requiresConfirmation }) => { Safely share this link with {user.username} for a two-factor authentication reset.

-
- - - - {reset2FAUrl} - - - -
+ {!error && ( +
+ + + + {reset2FAUrl} + + + +
+ )} + {error && {error}} )) ) diff --git a/new-lamassu-admin/src/pages/UserManagement/modals/ResetPasswordModal.js b/new-lamassu-admin/src/pages/UserManagement/modals/ResetPasswordModal.js index c0875e5b..323867df 100644 --- a/new-lamassu-admin/src/pages/UserManagement/modals/ResetPasswordModal.js +++ b/new-lamassu-admin/src/pages/UserManagement/modals/ResetPasswordModal.js @@ -3,6 +3,7 @@ import { makeStyles } from '@material-ui/core/styles' import gql from 'graphql-tag' import React, { useEffect, useState } from 'react' +import ErrorMessage from 'src/components/ErrorMessage' import Modal from 'src/components/Modal' import { Info2, P, Mono } from 'src/components/typography' import CopyToClipboard from 'src/pages/Transactions/CopyToClipboard' @@ -36,7 +37,7 @@ const ResetPasswordModal = ({ const classes = useStyles() const [resetPasswordUrl, setResetPasswordUrl] = useState('') - const [createResetPasswordToken, { loading }] = useMutation( + const [createResetPasswordToken, { loading, error }] = useMutation( CREATE_RESET_PASSWORD_TOKEN, { onCompleted: ({ createResetPasswordToken: token }) => { @@ -95,18 +96,21 @@ const ResetPasswordModal = ({

Safely share this link with {user.username} for a password reset.

-
- - - - {resetPasswordUrl} - - - -
+ {!error && ( +
+ + + + {resetPasswordUrl} + + + +
+ )} + {error && {error}} )) )