123 lines
5.6 KiB
JavaScript
123 lines
5.6 KiB
JavaScript
import {Box, Button, Container, Paper, Stack, TextField, Typography} from "@mui/material";
|
|
import {Field, Formik} from "formik";
|
|
import SvgLogin from "@/core/components/svgs/SvgLogin";
|
|
import StyledForm from "@/core/components/StyledForm";
|
|
import PasswordField from "@/core/components/PasswordField";
|
|
import LoginIcon from "@mui/icons-material/Login";
|
|
import {GET_USER_TOKEN} from "@/core/data/apiRoutes";
|
|
import * as Yup from "yup";
|
|
import useRequest from "@/lib/app/hooks/useRequest";
|
|
import useUser from "@/lib/app/hooks/useUser";
|
|
import {useTranslations} from "next-intl";
|
|
|
|
const LoginExpertComponent = () =>{
|
|
const t = useTranslations();
|
|
const requestServer = useRequest()
|
|
const {setToken} = useUser(); // pass token to set token
|
|
const handleSubmit = (values, props) => {
|
|
requestServer(GET_USER_TOKEN, 'post', {
|
|
data: {
|
|
username: values.username,
|
|
password: values.password,
|
|
},
|
|
success: {
|
|
notification: {show: false}
|
|
}
|
|
}).then((response) => {
|
|
setToken(response.data.token)
|
|
}).catch(() => {
|
|
props.setSubmitting(false)
|
|
})
|
|
};
|
|
const initialValues = {
|
|
username: "",
|
|
password: "",
|
|
};
|
|
const validationSchema = Yup.object().shape({
|
|
username: Yup.string().required(t("LoginPage.username_error_message_required")),
|
|
password: Yup.string().required(t("LoginPage.password_error_message_required")),
|
|
});
|
|
|
|
return(
|
|
<Container maxWidth="sm">
|
|
<Paper elevation={0}>
|
|
<Formik
|
|
initialValues={initialValues}
|
|
onSubmit={handleSubmit}
|
|
validationSchema={validationSchema}
|
|
>
|
|
{(props) => (
|
|
<Stack spacing={2} sx={{p: 2}}>
|
|
<Stack
|
|
sx={{width: "100%"}}
|
|
alignItems='center'
|
|
>
|
|
<SvgLogin width={300} height={200}/>
|
|
</Stack>
|
|
<Typography margin={2} variant="h4" textAlign="center">
|
|
{t("login_expert")}
|
|
</Typography>
|
|
<StyledForm sx={{width: "100%"}}>
|
|
<Stack spacing={3} sx={{p: 2}}>
|
|
<Field
|
|
as={TextField}
|
|
name="username"
|
|
variant="outlined"
|
|
label={t("LoginPage.text_field_user_name")}
|
|
placeholder={t(
|
|
"LoginPage.text_field_enter_your_username"
|
|
)}
|
|
type={"text"}
|
|
error={
|
|
props.touched.username && props.errors.username
|
|
? true
|
|
: false
|
|
}
|
|
fullWidth
|
|
helperText={
|
|
props.touched.username ? props.errors.username : null
|
|
}
|
|
/>
|
|
<PasswordField
|
|
name="password"
|
|
label={t("LoginPage.text_field_password")}
|
|
error={
|
|
props.touched.password && props.errors.password
|
|
? true
|
|
: false
|
|
}
|
|
helperText={
|
|
props.touched.password ? props.errors.password : null
|
|
}
|
|
placeholder={t(
|
|
"LoginPage.text_field_enter_your_password"
|
|
)}
|
|
/>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
}}
|
|
>
|
|
<Button
|
|
type="submit"
|
|
variant="contained"
|
|
fullWidth
|
|
size="medium"
|
|
endIcon={<LoginIcon/>}
|
|
disabled={props.isSubmitting || !(props.values.username && props.values.password)}
|
|
>
|
|
{t("LoginPage.button_submit")}
|
|
</Button>
|
|
</Box>
|
|
</Stack>
|
|
</StyledForm>
|
|
</Stack>
|
|
)}
|
|
</Formik>
|
|
</Paper>
|
|
</Container>
|
|
)
|
|
}
|
|
export default LoginExpertComponent |