Reac front end for psicometric app

password.jsx 5.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. import React from 'react'
  2. import * as Yup from 'yup';
  3. import { useFormik, Form, FormikProvider } from 'formik';
  4. import {
  5. Box, Button,
  6. Stack, TextField,
  7. } from '@mui/material';
  8. import DateFnsUtils from '@date-io/date-fns';
  9. import { DesktopDatePicker, LocalizationProvider } from '@mui/lab';
  10. export function Password(props) {
  11. const PasswordSchema = Yup.object().shape({
  12. pwd:
  13. Yup
  14. .string()
  15. .required('Ingresa un identificador válido')
  16. .min(5,"Ingresa un identificador válido")
  17. .max(50,"identificador demasiado largo"),
  18. deadpwd: Yup.date("Ingresa una fecha válida"),
  19. dateToActived: Yup.date("Ingresa una fecha válida"),
  20. });
  21. let { handleNext, handleBack, password, setPassword } = props
  22. const formik = useFormik({
  23. initialValues: {
  24. pwd: password.pwd ,
  25. deadpwd: password.deadpwd,
  26. dateToActived: password.dateToActived,
  27. },
  28. onSubmit: (fields) => {
  29. fields['deadpwd'] = new Date(fields.deadpwd).toISOString();
  30. fields['dateToActived'] = new Date(fields.dateToActived).toISOString();
  31. setPassword({
  32. ...password,
  33. ...fields
  34. })
  35. handleNext()
  36. },
  37. validationSchema: PasswordSchema,
  38. });
  39. const {errors, touched, handleSubmit, getFieldProps, values,setValues } = formik;
  40. return (
  41. <FormikProvider style={{ padding : 25, paddingTop : 5 }} value={formik}>
  42. <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
  43. <Stack spacing={3}>
  44. <TextField
  45. fullWidth
  46. type="text"
  47. label="Nombre o identificador"
  48. {...getFieldProps('pwd')}
  49. error={Boolean(touched.pwd && errors.pwd)}
  50. helperText={touched.pwd && errors.pwd}
  51. />
  52. <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
  53. <LocalizationProvider
  54. dateAdapter={DateFnsUtils}>
  55. <DesktopDatePicker
  56. label="Fecha de Activación"
  57. fullWidth
  58. inputFormat="dd/MM/yyyy"
  59. {...getFieldProps('dateToActived')}
  60. value={values.dateToActived}
  61. onChange={(val) => setValues({ ...values, dateToActived: new Date(val) })
  62. }
  63. renderInput={(params) =>
  64. <TextField
  65. error={Boolean(touched.dateToActived && errors.dateToActived)}
  66. helperText={touched.dateToActived && errors.dateToActived}
  67. disabled={true}
  68. label="Fecha de Activación"
  69. fullWidth
  70. {...params}
  71. />}
  72. />
  73. </LocalizationProvider>
  74. <LocalizationProvider
  75. dateAdapter={DateFnsUtils}>
  76. <DesktopDatePicker
  77. label="Fecha de Caducidad"
  78. fullWidth
  79. inputFormat="dd/MM/yyyy"
  80. {...getFieldProps('deadpwd')}
  81. value={values.deadpwd}
  82. onChange={(val) => setValues({ ...values, deadpwd: new Date(val) }) }
  83. renderInput={(params) =>
  84. <TextField
  85. error={Boolean(touched.deadpwd && errors.deadpwd)}
  86. helperText={touched.deadpwd && errors.deadpwd}
  87. disabled={true}
  88. label="Fecha de Caducidad"
  89. fullWidth
  90. {...params}
  91. />}
  92. />
  93. </LocalizationProvider>
  94. </Stack>
  95. <Box sx={{ mb: 2 }}>
  96. <div style={{ paddingTop : 15}}>
  97. <Button
  98. type="submit"
  99. className="registerBtn"
  100. variant="contained"
  101. sx={{ mt: 1, mr: 1 }}
  102. >
  103. {'Siguiente'}
  104. </Button>
  105. <Button
  106. disabled={false}
  107. onClick={handleBack}
  108. sx={{ mt: 1, mr: 1 }}
  109. >
  110. Regresar
  111. </Button>
  112. </div>
  113. </Box>
  114. </Stack>
  115. </Form>
  116. </FormikProvider>
  117. );
  118. }