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={{}}>
-
+
-
- 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
assertionOptions()}
- buttonClassName={classes.loginButton}>
+ buttonClassName="w-full">
Use FIDO
>
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
)}
-
+
Login
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 = () => {
+ buttonClassName="w-full">
Done
@@ -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()}
+ )}
+
+ Done
+
+
-
- {getErrorMsg() && (
-
{getErrorMsg()}
- )}
-
- Done
-
-
>
)}
{!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)}
)}
+ buttonClassName="w-full">
Done
@@ -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()}
+ )}
+
+ Done
+
+
-
- {getErrorMsg() && (
-
{getErrorMsg()}
- )}
-
- Done
-
-
>
)
)
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()}
+ )}
+
+
+ Confirm
+
+
- {getErrorMsg() && (
-
{getErrorMsg()}
- )}
-
-
- Confirm
-
-
)
)