diff --git a/new-lamassu-admin/src/pages/Authentication/Authentication.module.css b/new-lamassu-admin/src/pages/Authentication/Authentication.module.css new file mode 100644 index 00000000..88648763 --- /dev/null +++ b/new-lamassu-admin/src/pages/Authentication/Authentication.module.css @@ -0,0 +1,73 @@ +.welcomeBackground { + background: var(--ghost) url(/wizard-background.svg) no-repeat fixed center center; + background-size: cover; + height: 100vh; + width: 100vw; + position: relative; + left: 50%; + right: 50%; + margin-left: -50vw; + margin-right: -50vw; + min-height: 100vh; +} + +.wrapper { + padding: 2.5em 4em; + width: 575px; + display: flex; + flex-direction: column; +} + +.titleWrapper { + display: flex; + flex-direction: row; + align-items: center; + margin-bottom: 30px +} + +.icon { + transform: scale(1.5); + margin-right: 25px; +} + +.title { + padding-top: 8px; +} + +.infoWrapper { + margin-bottom: 3vh; +} + +.info2 { + text-align: justify; +} + +.qrCodeWrapper { + display: flex; + justify-content: center; + margin-bottom: 3vh; +} + +.secretWrapper { + display: flex; + justify-content: center; + align-items: center; +} + +.secretLabel { + margin-right: 15px; +} + +.secret { + margin-right: 35px; +} + +.hiddenSecret { + margin-right: 35px; + filter: blur(8px); +} + +.confirm2FAInput { + margin-top: 25px; +} + diff --git a/new-lamassu-admin/src/pages/Authentication/Input2FAState.jsx b/new-lamassu-admin/src/pages/Authentication/Input2FAState.jsx index f7fd5cce..b1326044 100644 --- a/new-lamassu-admin/src/pages/Authentication/Input2FAState.jsx +++ b/new-lamassu-admin/src/pages/Authentication/Input2FAState.jsx @@ -1,5 +1,4 @@ -import { useMutation, useLazyQuery, gql } from "@apollo/client"; -import { makeStyles } from '@mui/styles' +import { useMutation, useLazyQuery, gql } from '@apollo/client' import { Form, Formik } from 'formik' import React, { useContext, useState } from 'react' import { useHistory } from 'react-router-dom' @@ -9,11 +8,8 @@ import AppContext from 'src/AppContext' import { Button } from 'src/components/buttons' import { CodeInput } from 'src/components/inputs/base' -import styles from './shared.styles' import { STATES } from './states' -const useStyles = makeStyles(styles) - const INPUT_2FA = gql` mutation input2FA( $username: String! @@ -41,7 +37,6 @@ const GET_USER_DATA = gql` ` const Input2FAState = ({ state, dispatch }) => { - const classes = useStyles() const history = useHistory() const { setUserData } = useContext(AppContext) @@ -104,9 +99,7 @@ const Input2FAState = ({ state, dispatch }) => { return ( <> - - Enter your two-factor authentication code - + Enter your two-factor authentication code {/* TODO: refactor the 2FA CodeInput to properly use Formik */} {}} initialValues={{}}>
@@ -117,15 +110,14 @@ const Input2FAState = ({ state, dispatch }) => { numInputs={6} error={invalidToken} /> - +
-
- {errorMessage &&

{errorMessage}

} - -
) } diff --git a/new-lamassu-admin/src/pages/Authentication/InputFIDOState.jsx b/new-lamassu-admin/src/pages/Authentication/InputFIDOState.jsx index 82f73041..3c8a1b70 100644 --- a/new-lamassu-admin/src/pages/Authentication/InputFIDOState.jsx +++ b/new-lamassu-admin/src/pages/Authentication/InputFIDOState.jsx @@ -1,5 +1,4 @@ -import { useMutation, useLazyQuery, gql } from "@apollo/client"; -import { makeStyles } from '@mui/styles' +import { useMutation, useLazyQuery, gql } from '@apollo/client' import { startAssertion } from '@simplewebauthn/browser' import { Field, Form, Formik } from 'formik' import React, { useState, useContext } from 'react' @@ -11,10 +10,6 @@ import AppContext from 'src/AppContext' import { Button } from 'src/components/buttons' import { Checkbox, TextInput } from 'src/components/inputs/formik' -import styles from './shared.styles' - -const useStyles = makeStyles(styles) - const GET_USER_DATA = gql` { userData { @@ -66,7 +61,6 @@ const InputFIDOState = ({ state, strategy }) => { } ` - const classes = useStyles() const history = useHistory() const { setUserData } = useContext(AppContext) @@ -166,32 +160,25 @@ const InputFIDOState = ({ state, strategy }) => { component={TextInput} fullWidth autoFocus - className={classes.input} + className="-mt-4 mb-6" error={getErrorMsg(errors, touched)} onKeyUp={() => { if (invalidUsername) setInvalidUsername(false) }} /> -
+
- - Keep me logged in - + Keep me logged in
-
+
{getErrorMsg(errors, touched) && ( -

- {getErrorMsg(errors, touched)} -

+

{getErrorMsg(errors, touched)}

)} -
@@ -201,14 +188,14 @@ const InputFIDOState = ({ state, strategy }) => { )} {strategy === 'FIDO2FA' && ( <> -

+

Insert your hardware key and follow the instructions

diff --git a/new-lamassu-admin/src/pages/Authentication/Login.jsx b/new-lamassu-admin/src/pages/Authentication/Login.jsx index ab883a64..0ea27cb0 100644 --- a/new-lamassu-admin/src/pages/Authentication/Login.jsx +++ b/new-lamassu-admin/src/pages/Authentication/Login.jsx @@ -1,15 +1,10 @@ import Grid from '@mui/material/Grid' -import { makeStyles } from '@mui/styles' import React from 'react' import LoginCard from './LoginCard' -import styles from './shared.styles' - -const useStyles = makeStyles(styles) +import classes from './Authentication.module.css' const Login = () => { - const classes = useStyles() - return ( { - ); + ) } export default Login diff --git a/new-lamassu-admin/src/pages/Authentication/LoginCard.jsx b/new-lamassu-admin/src/pages/Authentication/LoginCard.jsx index e9c1da4c..4179cfe9 100644 --- a/new-lamassu-admin/src/pages/Authentication/LoginCard.jsx +++ b/new-lamassu-admin/src/pages/Authentication/LoginCard.jsx @@ -1,5 +1,4 @@ import Paper from '@mui/material/Paper' -import { makeStyles } from '@mui/styles' import React, { useReducer } from 'react' import { H5 } from 'src/components/typography' import Logo from 'src/styling/icons/menu/logo.svg?react' @@ -8,14 +7,12 @@ import Input2FAState from './Input2FAState' import InputFIDOState from './InputFIDOState' import LoginState from './LoginState' import Setup2FAState from './Setup2FAState' -import styles from './shared.styles' import { STATES } from './states' +import classes from './Authentication.module.css' // FIDO2FA, FIDOPasswordless or FIDOUsernameless const AUTHENTICATION_STRATEGY = 'FIDO2FA' -const useStyles = makeStyles(styles) - const initialState = { twoFAField: '', clientField: '', @@ -30,8 +27,6 @@ const reducer = (state, action) => { } const LoginCard = () => { - const classes = useStyles() - const [state, dispatch] = useReducer(reducer, initialState) const renderState = () => { diff --git a/new-lamassu-admin/src/pages/Authentication/LoginState.jsx b/new-lamassu-admin/src/pages/Authentication/LoginState.jsx index f5f89055..ce8b4c72 100644 --- a/new-lamassu-admin/src/pages/Authentication/LoginState.jsx +++ b/new-lamassu-admin/src/pages/Authentication/LoginState.jsx @@ -1,5 +1,4 @@ -import { useMutation, useLazyQuery, gql } from "@apollo/client"; -import { makeStyles } from '@mui/styles' +import { useMutation, useLazyQuery, gql } from '@apollo/client' import { startAssertion } from '@simplewebauthn/browser' import { Field, Form, Formik } from 'formik' import React, { useContext } from 'react' @@ -11,10 +10,6 @@ import AppContext from 'src/AppContext' import { Button } from 'src/components/buttons' import { Checkbox, SecretInput, TextInput } from 'src/components/inputs/formik' -import styles from './shared.styles' - -const useStyles = makeStyles(styles) - const LOGIN = gql` mutation login($username: String!, $password: String!) { login(username: $username, password: $password) @@ -68,7 +63,6 @@ const getErrorMsg = (formikErrors, formikTouched, mutationError) => { } const LoginState = ({ state, dispatch, strategy }) => { - const classes = useStyles() const history = useHistory() const { setUserData } = useContext(AppContext) @@ -148,7 +142,7 @@ const LoginState = ({ state, dispatch, strategy }) => { component={TextInput} fullWidth autoFocus - className={classes.input} + className="-mt-4 mb-6" error={getErrorMsg( errors, touched, @@ -173,15 +167,16 @@ const LoginState = ({ state, dispatch, strategy }) => { userDataQueryError )} /> -
+
Keep me logged in
-
+
{getErrorMsg( errors, touched, @@ -190,7 +185,7 @@ const LoginState = ({ state, dispatch, strategy }) => { assertionQueryError || userDataQueryError ) && ( -

+

{getErrorMsg( errors, touched, @@ -214,15 +209,12 @@ const LoginState = ({ state, dispatch, strategy }) => { payload: {} }) }} - buttonClassName={classes.loginButton} - className={classes.fidoLoginButtonWrapper}> + buttonClassName="w-full" + className="mb-3"> I have a hardware key )} -

diff --git a/new-lamassu-admin/src/pages/Authentication/Register.jsx b/new-lamassu-admin/src/pages/Authentication/Register.jsx index cec03435..e7b71398 100644 --- a/new-lamassu-admin/src/pages/Authentication/Register.jsx +++ b/new-lamassu-admin/src/pages/Authentication/Register.jsx @@ -1,6 +1,5 @@ -import { useQuery, useMutation, gql } from "@apollo/client"; +import { useQuery, useMutation, gql } from '@apollo/client' import Grid from '@mui/material/Grid' -import { makeStyles } from '@mui/styles' import Paper from '@mui/material/Paper' import { Field, Form, Formik } from 'formik' import React, { useReducer } from 'react' @@ -11,11 +10,9 @@ import * as Yup from 'yup' import { Button } from 'src/components/buttons' import { SecretInput } from 'src/components/inputs/formik' - -import styles from './shared.styles' +import classes from './Authentication.module.css' const QueryParams = () => new URLSearchParams(useLocation().search) -const useStyles = makeStyles(styles) const VALIDATE_REGISTER_LINK = gql` query validateRegisterLink($token: String!) { @@ -87,7 +84,6 @@ const getErrorMsg = ( } const Register = () => { - const classes = useStyles() const history = useHistory() const token = QueryParams().get('t') @@ -165,7 +161,7 @@ const Register = () => { component={SecretInput} size="lg" fullWidth - className={classes.input} + className="-mt-4 mb-6" /> { size="lg" fullWidth /> -
+
{getErrorMsg( errors, touched, queryError, mutationError ) && ( -

+

{getErrorMsg( errors, touched, @@ -193,7 +189,7 @@ const Register = () => {

@@ -215,7 +211,7 @@ const Register = () => {
- ); + ) } export default Register diff --git a/new-lamassu-admin/src/pages/Authentication/Reset2FA.jsx b/new-lamassu-admin/src/pages/Authentication/Reset2FA.jsx index e16e1fd8..3d93ce88 100644 --- a/new-lamassu-admin/src/pages/Authentication/Reset2FA.jsx +++ b/new-lamassu-admin/src/pages/Authentication/Reset2FA.jsx @@ -1,6 +1,5 @@ -import { useQuery, useMutation, gql } from "@apollo/client"; +import { useQuery, useMutation, gql } from '@apollo/client' import Grid from '@mui/material/Grid' -import { makeStyles } from '@mui/styles' import Paper from '@mui/material/Paper' import { Form, Formik } from 'formik' import { QRCodeSVG as QRCode } from 'qrcode.react' @@ -13,9 +12,7 @@ import { ActionButton, Button } from 'src/components/buttons' import { CodeInput } from 'src/components/inputs/base' import { primaryColor } from 'src/styling/variables' -import styles from './shared.styles' - -const useStyles = makeStyles(styles) +import classes from './Authentication.module.css' const VALIDATE_RESET_2FA_LINK = gql` query validateReset2FALink($token: String!) { @@ -46,7 +43,6 @@ const reducer = (state, action) => { } const Reset2FA = () => { - const classes = useStyles() const history = useHistory() const QueryParams = () => new URLSearchParams(useLocation().search) const token = QueryParams().get('t') @@ -177,23 +173,19 @@ const Reset2FA = () => { numInputs={6} error={invalidToken} /> - +
-
- {getErrorMsg() && ( -

{getErrorMsg()}

- )} - -
)} {!loading && state.result === 'failure' && ( @@ -206,7 +198,7 @@ const Reset2FA = () => {
- ); + ) } export default Reset2FA diff --git a/new-lamassu-admin/src/pages/Authentication/ResetPassword.jsx b/new-lamassu-admin/src/pages/Authentication/ResetPassword.jsx index 5c9392b6..5f440f17 100644 --- a/new-lamassu-admin/src/pages/Authentication/ResetPassword.jsx +++ b/new-lamassu-admin/src/pages/Authentication/ResetPassword.jsx @@ -1,6 +1,5 @@ -import { useQuery, useMutation, gql } from "@apollo/client"; +import { useQuery, useMutation, gql } from '@apollo/client' import Grid from '@mui/material/Grid' -import { makeStyles } from '@mui/styles' import Paper from '@mui/material/Paper' import { Field, Form, Formik } from 'formik' import React, { useState } from 'react' @@ -12,9 +11,7 @@ import * as Yup from 'yup' import { Button } from 'src/components/buttons' import { SecretInput } from 'src/components/inputs/formik/' -import styles from './shared.styles' - -const useStyles = makeStyles(styles) +import classes from './Authentication.module.css' const VALIDATE_RESET_PASSWORD_LINK = gql` query validateResetPasswordLink($token: String!) { @@ -60,7 +57,6 @@ const getErrorMsg = (formikErrors, formikTouched, mutationError) => { } const ResetPassword = () => { - const classes = useStyles() const history = useHistory() const QueryParams = () => new URLSearchParams(useLocation().search) const token = QueryParams().get('t') @@ -129,7 +125,7 @@ const ResetPassword = () => { component={SecretInput} label="New password" fullWidth - className={classes.input} + className="-mt-4 mb-6" /> { label="Confirm your password" fullWidth /> -
+
{getErrorMsg(errors, touched, error) && ( -

+

{getErrorMsg(errors, touched, error)}

)}
@@ -165,7 +161,7 @@ const ResetPassword = () => {
- ); + ) } export default ResetPassword diff --git a/new-lamassu-admin/src/pages/Authentication/Setup2FAState.jsx b/new-lamassu-admin/src/pages/Authentication/Setup2FAState.jsx index 8ddb0594..24c8507b 100644 --- a/new-lamassu-admin/src/pages/Authentication/Setup2FAState.jsx +++ b/new-lamassu-admin/src/pages/Authentication/Setup2FAState.jsx @@ -1,5 +1,4 @@ -import { useMutation, useQuery, useLazyQuery, gql } from "@apollo/client"; -import { makeStyles } from '@mui/styles' +import { useMutation, useQuery, useLazyQuery, gql } from '@apollo/client' import { Form, Formik } from 'formik' import { QRCodeSVG as QRCode } from 'qrcode.react' import React, { useContext, useState } from 'react' @@ -11,7 +10,7 @@ import { ActionButton, Button } from 'src/components/buttons' import { CodeInput } from 'src/components/inputs/base' import { primaryColor } from 'src/styling/variables' -import styles from './shared.styles' +import classes from './Authentication.module.css' const SETUP_2FA = gql` mutation setup2FA( @@ -48,10 +47,7 @@ const GET_USER_DATA = gql` } ` -const useStyles = makeStyles(styles) - const Setup2FAState = ({ state, dispatch }) => { - const classes = useStyles() const history = useHistory() const { setUserData } = useContext(AppContext) @@ -159,18 +155,17 @@ const Setup2FAState = ({ state, dispatch }) => { error={invalidToken} shouldAutoFocus /> - +
-
- {getErrorMsg() && ( -

{getErrorMsg()}

- )} - -
) ) diff --git a/new-lamassu-admin/src/pages/Authentication/shared.styles.js b/new-lamassu-admin/src/pages/Authentication/shared.styles.js deleted file mode 100644 index 20ed5058..00000000 --- a/new-lamassu-admin/src/pages/Authentication/shared.styles.js +++ /dev/null @@ -1,109 +0,0 @@ -import { backgroundColor, errorColor } from 'src/styling/variables' - -const styles = { - title: { - paddingTop: 8 - }, - input: { - marginBottom: 25, - marginTop: -15 - }, - wrapper: { - padding: '2.5em 4em', - width: 575, - display: 'flex', - flexDirection: 'column' - }, - titleWrapper: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - marginBottom: 30 - }, - rememberMeWrapper: { - marginTop: 35, - display: 'flex', - flexDirection: 'row' - }, - icon: { - transform: 'scale(1.5)', - marginRight: 25 - }, - checkbox: { - transform: 'scale(1.5)', - marginRight: 5, - marginLeft: -5 - }, - footer: { - marginTop: '10vh' - }, - twofaFooter: { - marginTop: '6vh' - }, - fidoLoginButtonWrapper: { - marginBottom: 12 - }, - loginButton: { - display: 'block', - width: '100%' - }, - welcomeBackground: { - background: 'url(/wizard-background.svg) no-repeat center center fixed', - backgroundColor: backgroundColor, - backgroundSize: 'cover', - height: '100vh', - width: '100vw', - position: 'relative', - left: '50%', - right: '50%', - marginLeft: '-50vw', - marginRight: '-50vw', - minHeight: '100vh' - }, - info: { - marginBottom: '5vh' - }, - info2: { - textAlign: 'justify' - }, - infoWrapper: { - marginBottom: '3vh' - }, - errorMessage: { - color: errorColor - }, - qrCodeWrapper: { - display: 'flex', - justifyContent: 'center', - marginBottom: '3vh' - }, - secretWrapper: { - display: 'flex', - justifyContent: 'center', - alignItems: 'center' - }, - secretLabel: { - marginRight: 15 - }, - secret: { - marginRight: 35 - }, - hiddenSecret: { - marginRight: 35, - filter: 'blur(8px)' - }, - confirm2FAInput: { - marginTop: 25 - }, - confirmPassword: { - marginTop: 25 - }, - error: { - color: errorColor - }, - enterButton: { - display: 'none' - } -} - -export default styles diff --git a/new-lamassu-admin/src/pages/UserManagement/UserManagement.styles.js b/new-lamassu-admin/src/pages/UserManagement/UserManagement.styles.js index 745d226f..6859dd97 100644 --- a/new-lamassu-admin/src/pages/UserManagement/UserManagement.styles.js +++ b/new-lamassu-admin/src/pages/UserManagement/UserManagement.styles.js @@ -118,9 +118,6 @@ const styles = { actionButtonWrapper: { display: 'flex', gap: 12 - }, - enterButton: { - display: 'none' } } diff --git a/new-lamassu-admin/src/pages/UserManagement/modals/CreateUserModal.jsx b/new-lamassu-admin/src/pages/UserManagement/modals/CreateUserModal.jsx index b3704f68..e6048622 100644 --- a/new-lamassu-admin/src/pages/UserManagement/modals/CreateUserModal.jsx +++ b/new-lamassu-admin/src/pages/UserManagement/modals/CreateUserModal.jsx @@ -1,4 +1,4 @@ -import { useMutation, gql } from "@apollo/client"; +import { useMutation, gql } from '@apollo/client' import { makeStyles } from '@mui/styles' import classnames from 'classnames' import { Field, Form, Formik } from 'formik' @@ -73,7 +73,7 @@ const CreateUserModal = ({ state, dispatch }) => { const [createUser, { error }] = useMutation(CREATE_USER, { onCompleted: ({ createRegisterToken: token }) => { - setCreateUserURL(urlResolver(`/register?t${token.token}`)) + setCreateUserURL(urlResolver(`/register?t=${token.token}`)) } }) diff --git a/new-lamassu-admin/src/pages/UserManagement/modals/Input2FAModal.jsx b/new-lamassu-admin/src/pages/UserManagement/modals/Input2FAModal.jsx index 73666fa7..a6639358 100644 --- a/new-lamassu-admin/src/pages/UserManagement/modals/Input2FAModal.jsx +++ b/new-lamassu-admin/src/pages/UserManagement/modals/Input2FAModal.jsx @@ -1,4 +1,4 @@ -import { useLazyQuery, gql } from "@apollo/client"; +import { useLazyQuery, gql } from '@apollo/client' import { makeStyles } from '@mui/styles' import { Form, Formik } from 'formik' import React, { useState } from 'react' @@ -80,17 +80,16 @@ const Input2FAModal = ({ showModal, handleClose, setConfirmation }) => { error={invalidCode} containerStyle={classes.codeContainer} /> - + - {getErrorMsg() && ( -

{getErrorMsg()}

- )} -
- -
) )