applied the feedback
This commit is contained in:
1 parent
4b92683c72
commit
eec11f303c
3 files changed
+80
-35
No files matched your search
@@ -70,8 +70,17 @@ const EmailStep = ({ form, errors, onSubmit, onChange }) => {
|
||||
color="accent"
|
||||
type="submit"
|
||||
disabled={errors.email && true}
|
||||
className="dashboard-style-button"
|
||||
sx={{
|
||||
width: "30%",
|
||||
px: theme.spacing(6),
|
||||
borderRadius: `${theme.shape.borderRadius}px !important`,
|
||||
'&.MuiButtonBase-root': {
|
||||
borderRadius: `${theme.shape.borderRadius}px !important`
|
||||
},
|
||||
'&.MuiButton-root': {
|
||||
borderRadius: `${theme.shape.borderRadius}px !important`
|
||||
},
|
||||
"&.Mui-focusVisible": {
|
||||
outline: `2px solid ${theme.palette.primary.main}`,
|
||||
outlineOffset: `2px`,
|
||||
|
||||
@@ -75,8 +75,16 @@ const PasswordStep = ({ form, errors, onSubmit, onChange, onBack }) => {
|
||||
variant="outlined"
|
||||
color="info"
|
||||
onClick={onBack}
|
||||
className="dashboard-style-button"
|
||||
sx={{
|
||||
px: theme.spacing(5),
|
||||
borderRadius: `${theme.shape.borderRadius}px !important`,
|
||||
'&.MuiButtonBase-root': {
|
||||
borderRadius: `${theme.shape.borderRadius}px !important`
|
||||
},
|
||||
'&.MuiButton-root': {
|
||||
borderRadius: `${theme.shape.borderRadius}px !important`
|
||||
},
|
||||
"& svg.MuiSvgIcon-root": {
|
||||
mr: theme.spacing(3),
|
||||
},
|
||||
@@ -95,13 +103,22 @@ const PasswordStep = ({ form, errors, onSubmit, onChange, onBack }) => {
|
||||
type="submit"
|
||||
loading={authState.isLoading}
|
||||
disabled={errors.password && true}
|
||||
className="dashboard-style-button"
|
||||
sx={{
|
||||
width: "30%",
|
||||
px: theme.spacing(4),
|
||||
borderRadius: `${theme.shape.borderRadius}px !important`,
|
||||
'&.MuiButtonBase-root': {
|
||||
borderRadius: `${theme.shape.borderRadius}px !important`
|
||||
},
|
||||
'&.MuiButton-root': {
|
||||
borderRadius: `${theme.shape.borderRadius}px !important`
|
||||
},
|
||||
"&.Mui-focusVisible": {
|
||||
outline: `2px solid ${theme.palette.primary.main}`,
|
||||
outlineOffset: `2px`,
|
||||
boxShadow: `none`,
|
||||
},
|
||||
boxShadow: `none`,
|
||||
}}
|
||||
>
|
||||
{t("continue")}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Box, Stack, Typography, Alert, Button } from "@mui/material";
|
||||
import { Box, Stack, Typography, Button } from "@mui/material";
|
||||
import Alert from "../../../Components/Alert";
|
||||
import { useTheme } from "@emotion/react";
|
||||
import { credentials } from "../../../Validation/validation";
|
||||
import { login } from "../../../Features/Auth/authSlice";
|
||||
@@ -281,39 +282,52 @@ const Login = () => {
|
||||
</Stack>
|
||||
) : !backendReachable ? (
|
||||
<Stack spacing={theme.spacing(6)} alignItems="center">
|
||||
<Alert
|
||||
severity="error"
|
||||
sx={{
|
||||
width: '100%',
|
||||
'& .MuiAlert-message': {
|
||||
display: 'flex',
|
||||
alignItems: 'center'
|
||||
},
|
||||
'& .MuiAlert-icon': {
|
||||
display: 'flex',
|
||||
<Box sx={{
|
||||
width: theme.spacing(220),
|
||||
mx: 'auto',
|
||||
'& .alert.row-stack': {
|
||||
width: '100%',
|
||||
alignItems: 'center',
|
||||
marginRight: theme.spacing(2)
|
||||
}
|
||||
}}
|
||||
>
|
||||
{t("backendUnreachable")}
|
||||
</Alert>
|
||||
<Typography
|
||||
variant="body1"
|
||||
align="center"
|
||||
mt={theme.spacing(2)}
|
||||
>
|
||||
{t("backendUnreachableMessage")}
|
||||
</Typography>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="accent"
|
||||
onClick={handleRetry}
|
||||
disabled={isCheckingConnection}
|
||||
mt={theme.spacing(4)}
|
||||
>
|
||||
{isCheckingConnection ? t("retryingConnection") : t("retryConnection")}
|
||||
</Button>
|
||||
gap: theme.spacing(3)
|
||||
}
|
||||
}}>
|
||||
<Alert
|
||||
variant="error"
|
||||
body={t("backendUnreachable")}
|
||||
hasIcon={true}
|
||||
/>
|
||||
</Box>
|
||||
<Box mt={theme.spacing(2)}>
|
||||
<Typography
|
||||
variant="body1"
|
||||
align="center"
|
||||
color={theme.palette.primary.contrastTextSecondary}
|
||||
>
|
||||
{t("backendUnreachableMessage")}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ mt: theme.spacing(4) }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="accent"
|
||||
onClick={handleRetry}
|
||||
disabled={isCheckingConnection}
|
||||
loading={isCheckingConnection}
|
||||
className="dashboard-style-button"
|
||||
sx={{
|
||||
px: theme.spacing(6),
|
||||
borderRadius: `${theme.shape.borderRadius}px !important`,
|
||||
'&.MuiButtonBase-root': {
|
||||
borderRadius: `${theme.shape.borderRadius}px !important`
|
||||
},
|
||||
'&.MuiButton-root': {
|
||||
borderRadius: `${theme.shape.borderRadius}px !important`
|
||||
}
|
||||
}}
|
||||
>
|
||||
{isCheckingConnection ? t("retryingConnection") : t("retryConnection")}
|
||||
</Button>
|
||||
</Box>
|
||||
</Stack>
|
||||
) : step === 0 ? (
|
||||
<EmailStep
|
||||
@@ -353,7 +367,12 @@ const Login = () => {
|
||||
component="span"
|
||||
color={theme.palette.accent.main}
|
||||
ml={theme.spacing(2)}
|
||||
sx={{ userSelect: "none" }}
|
||||
sx={{
|
||||
cursor: 'pointer',
|
||||
'&:hover': {
|
||||
color: theme.palette.accent.darker
|
||||
}
|
||||
}}
|
||||
onClick={() => navigate("/register")}
|
||||
>
|
||||
{t("registerHere")}
|
||||
|
||||
Reference in new issue
Block a user