password mok

src/App.css

@@ -190,3 +190,8 @@
     justify-content: space-evenly;
     align-items :stretch;
 }
+
+#password_header{
+    margin-bottom: 20px;
+    padding-bottom: 20px;
+}

src/Components/Register/temp.js

@@ -1,107 +1,167 @@
-const SectionStyle = styled(Card)(({ theme }) => ({
-    width: '100%',
-    maxWidth: 464,
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    margin: theme.spacing(2, 0, 2, 2)
-}));
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableFooter from '@mui/material/TableFooter';
+import TablePagination from '@mui/material/TablePagination';
+import TableRow from '@mui/material/TableRow';
+import Paper from '@mui/material/Paper';
+import IconButton from '@mui/material/IconButton';
+import FirstPageIcon from '@mui/icons-material/FirstPage';
+import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
+import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
+import LastPageIcon from '@mui/icons-material/LastPage';
 
-const ContentStyle = styled('div')(({ theme }) => ({
-    maxWidth: 480,
-    margin: 'auto',
-    display: 'flex',
-    minHeight: '100vh',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    padding: theme.spacing(12, 0)
-}));
+function TablePaginationActions(props) {
+  const theme = useTheme();
+  const { count, page, rowsPerPage, onPageChange } = props;
 
-const RootStyle = styled(Page)(({ theme }) => ({
-    [theme.breakpoints.up('md')]: {
-        display: 'flex'
-    }
-}));
+  const handleFirstPageButtonClick = (event) => {
+    onPageChange(event, 0);
+  };
 
-function temp () {
-    return(
-        <RootStyle title="Register | Minimal-UI">
+  const handleBackButtonClick = (event) => {
+    onPageChange(event, page - 1);
+  };
 
-            <AuthLayout>
-                Ya tiene una cuenta?&nbsp;
-                <Link to="/login" component={RouterLink}>
-                    Ingresa
-                </Link>
-            </AuthLayout>
+  const handleNextButtonClick = (event) => {
+    onPageChange(event, page + 1);
+  };
 
-            <SectionStyle>
-                <Typography variant="h3" sx={{ px: 5, mt: 10, mb: 5 }}>
-                    Efectividad para tus procesos de reclutamiento
-                </Typography>
-                <img alt="register" src={Mock} />
-            </SectionStyle>
+  const handleLastPageButtonClick = (event) => {
+    onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
+  };
 
-            <Container>
-                <ContentStyle>
-                    <Box sx={{ mb: 5 }}>
-                        <Typography variant="h4" gutterBottom>
-                            Empieza de forma gratuita.
-                        </Typography>
-                        <Typography sx={{ color: 'text.secondary' }}>
-                            Gratis para siempre. No se necesita tarjeta de crédito.
-                        </Typography>
-                    </Box>
+  return (
+    <Box sx={{ flexShrink: 0, ml: 2.5 }}>
+      <IconButton
+        onClick={handleFirstPageButtonClick}
+        disabled={page === 0}
+        aria-label="first page"
+      >
+        {theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
+      </IconButton>
+      <IconButton
+        onClick={handleBackButtonClick}
+        disabled={page === 0}
+        aria-label="previous page"
+      >
+        {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
+      </IconButton>
+      <IconButton
+        onClick={handleNextButtonClick}
+        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
+        aria-label="next page"
+      >
+        {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
+      </IconButton>
+      <IconButton
+        onClick={handleLastPageButtonClick}
+        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
+        aria-label="last page"
+      >
+        {theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
+      </IconButton>
+    </Box>
+  );
+}
+
+TablePaginationActions.propTypes = {
+  count: PropTypes.number.isRequired,
+  onPageChange: PropTypes.func.isRequired,
+  page: PropTypes.number.isRequired,
+  rowsPerPage: PropTypes.number.isRequired,
+};
+
+function createData(name, calories, fat) {
+  return { name, calories, fat };
+}
+
+const rows = [
+  createData('Cupcake', 305, 3.7),
+  createData('Donut', 452, 25.0),
+  createData('Eclair', 262, 16.0),
+  createData('Frozen yoghurt', 159, 6.0),
+  createData('Gingerbread', 356, 16.0),
+  createData('Honeycomb', 408, 3.2),
+  createData('Ice cream sandwich', 237, 9.0),
+  createData('Jelly Bean', 375, 0.0),
+  createData('KitKat', 518, 26.0),
+  createData('Lollipop', 392, 0.2),
+  createData('Marshmallow', 318, 0),
+  createData('Nougat', 360, 19.0),
+  createData('Oreo', 437, 18.0),
+].sort((a, b) => (a.calories < b.calories ? -1 : 1));
+
+export default function CustomPaginationActionsTable() {
+  const [page, setPage] = React.useState(0);
+  const [rowsPerPage, setRowsPerPage] = React.useState(5);
+
+  // Avoid a layout jump when reaching the last page with empty rows.
+  const emptyRows =
+    page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
 
-                    <Stepper activeStep={activeStep} orientation="vertical">
-                        {steps.map((step, index) => (
-                            <Step key={step.label}>
-                                <StepLabel
-                                    optional={
-                                        index === 2 ? (
-                                            <Typography variant="caption">Last step</Typography>
-                                        ) : null
-                                    }
-                                >
-                                    {step.label}
-                                </StepLabel>
-                                <StepContent style={{ padding: 25 }}>
-                                    {step.description}
-                                </StepContent>
-                            </Step>
-                        ))}
-                    </Stepper>
-                    {activeStep === steps.length && (
-                        <Paper square elevation={0} sx={{ p: 3 }}>
-                            <Typography>All steps completed - you&apos;re finished</Typography>
-                            <Button onClick={handleReset} sx={{ mt: 1, mr: 1 }}>
-                                Reset
-                            </Button>
-                        </Paper>
-                    )}
+  const handleChangePage = (event, newPage) => {
+    setPage(newPage);
+  };
 
-                    <Typography variant="body2" align="center" sx={{ color: 'text.secondary', mt: 3 }}>
-                        Estoy de acuerdo con las {" "}
-                        <Link underline="always" sx={{ color: "#d32f2f" }}>
-                            Condiciones de servicio
-                        </Link>
-                        {" "}y{" "}
-                        <Link underline="always" sx={{ color: "#d32f2f" }}>
-                            Política de privacidad
-                        </Link>
-                        .
-                    </Typography>
+  const handleChangeRowsPerPage = (event) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
 
-                    <div>
-                        <Typography variant="subtitle2" sx={{ mt: 3, textAlign: 'center' }}>
-                            Ya tiene una cuenta?&nbsp;
-                            <Link to="/login" component={RouterLink}>
-                                Ingresa
-                            </Link>
-                        </Typography>
-                    </div>
-                </ContentStyle>
+  return (
+    <TableContainer component={Paper}>
+      <Table sx={{ minWidth: 500 }} aria-label="custom pagination table">
+        <TableBody>
+          {(rowsPerPage > 0
+            ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+            : rows
+          ).map((row) => (
+            <TableRow key={row.name}>
+              <TableCell component="th" scope="row">
+                {row.name}
+              </TableCell>
+              <TableCell style={{ width: 160 }} align="right">
+                {row.calories}
+              </TableCell>
+              <TableCell style={{ width: 160 }} align="right">
+                {row.fat}
+              </TableCell>
+            </TableRow>
+          ))}
 
-            </Container>
-        </RootStyle>
-    )
+          {emptyRows > 0 && (
+            <TableRow style={{ height: 53 * emptyRows }}>
+              <TableCell colSpan={6} />
+            </TableRow>
+          )}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
+              colSpan={3}
+              count={rows.length}
+              rowsPerPage={rowsPerPage}
+              page={page}
+              SelectProps={{
+                inputProps: {
+                  'aria-label': 'rows per page',
+                },
+                native: true,
+              }}
+              onPageChange={handleChangePage}
+              onRowsPerPageChange={handleChangeRowsPerPage}
+              ActionsComponent={TablePaginationActions}
+            />
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </TableContainer>
+  );
 }

src/Pages/Contras.jsx

@@ -1,44 +1,192 @@
-import $ from 'jquery'  
-import { Button, Col , Row } from 'react-bootstrap'
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useTheme } from '@mui/material/styles';
 
-export function Contras() {
+import { 
+    Table, TableBody, TableCell, TableContainer, TableFooter, TableRow, TablePagination,
+    IconButton, Paper, Box, Card
+} from '@mui/material';
+
+import { Row, Col, Container } from 'react-bootstrap';
+
+import {
+    LastPage as LastPageIcon, 
+    KeyboardArrowRight,
+    KeyboardArrowLeft,
+    FirstPage as FirstPageIcon
+} from '@mui/icons-material/'
+
+function createData(name, calories, fat) {
+  return { name, calories, fat };
+}
+
+function TablePaginationActions(props) {
+
+    const theme = useTheme();
+    const { count, page, rowsPerPage, onPageChange } = props;
+
+    const handleFirstPageButtonClick = (event) => {
+        onPageChange(event, 0);
+    };
 
+    const handleBackButtonClick = (event) => {
+        onPageChange(event, page - 1);
+    };
 
-    const QueryV1 = async () => {
-         await $.post('http://psicoadmin.ditca.org:8081/user?user=patrik&password=12345');
-    }
-    
-    const FetchV2 = async () => {
-        await fetch('http://psicoadmin.ditca.org:8081/user?user=patrik&password=12345', { method : 'POST' });
-    }
+    const handleNextButtonClick = (event) => {
+        onPageChange(event, page + 1);
+    };
 
+    const handleLastPageButtonClick = (event) => {
+        onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
+    };
 
     return (
+        <Box sx={{ flexShrink: 0, ml: 2.5 }}>
+        <IconButton
+        onClick={handleFirstPageButtonClick}
+        disabled={page === 0}
+        aria-label="first page"
+        >
+        {theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
+        </IconButton>
+        <IconButton
+        onClick={handleBackButtonClick}
+        disabled={page === 0}
+        aria-label="previous page"
+        >
+        {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
+        </IconButton>
+        <IconButton
+        onClick={handleNextButtonClick}
+        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
+        aria-label="next page"
+        >
+        {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
+        </IconButton>
+        <IconButton
+        onClick={handleLastPageButtonClick}
+        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
+        aria-label="last page"
+        >
+        {theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
+        </IconButton>
+        </Box>
+    );
+}
+
+
+
+const rows = [
+  createData('Cupcake', 305, 3.7),
+  createData('Donut', 452, 25.0),
+  createData('Eclair', 262, 16.0),
+  createData('Frozen yoghurt', 159, 6.0),
+  createData('Gingerbread', 356, 16.0),
+  createData('Honeycomb', 408, 3.2),
+  createData('Ice cream sandwich', 237, 9.0),
+  createData('Jelly Bean', 375, 0.0),
+  createData('KitKat', 518, 26.0),
+  createData('Lollipop', 392, 0.2),
+  createData('Marshmallow', 318, 0),
+  createData('Nougat', 360, 19.0),
+  createData('Oreo', 437, 18.0),
+].sort((a, b) => (a.calories < b.calories ? -1 : 1));
+
+export function Contras() {
+  const [page, setPage] = React.useState(0);
+  const [rowsPerPage, setRowsPerPage] = React.useState(5);
+
+  // Avoid a layout jump when reaching the last page with empty rows.
+  const emptyRows =
+    page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
+
+  const handleChangePage = (event, newPage) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (event) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
+  return (
+
         <div className="content-section">
             <div className="main">
-                <h1>Passwords</h1>
-
-                    <Row>
-                        <Col>
-                            <Button onClick={QueryV1}> Request tipo 1 </Button>
-                        </Col>
-                    </Row>
-                    <hr/>
-                    
-                    <Row>
-                        <Col>
-                            <Button onClick={FetchV2}> Request tipo 2 </Button>
-                        </Col>
-                    </Row>
-                    <hr/>
-                    
-                    <Row>
-                        <Col>
-                            <Button >Request tipo 3</Button>
-                        </Col>
-                    </Row>
-
-            </div>
-        </div>
-    )
+
+      <Container>
+
+      <Row id="password_header">
+        <Col>
+          <Card>
+          <h1>Buscar Contrasena</h1>
+          </Card>
+        </Col>
+      </Row>
+
+
+      <Row>
+      <Col>
+
+
+
+
+    <TableContainer component={Paper}>
+      <Table sx={{ minWidth: 500 }} aria-label="custom pagination table">
+        <TableBody>
+          {(rowsPerPage > 0
+            ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+            : rows
+          ).map((row) => (
+            <TableRow key={row.name}>
+              <TableCell component="th" scope="row">
+                {row.name}
+              </TableCell>
+              <TableCell style={{ width: 160 }} align="right">
+                {row.calories}
+              </TableCell>
+              <TableCell style={{ width: 160 }} align="right">
+                {row.fat}
+              </TableCell>
+            </TableRow>
+          ))}
+
+          {emptyRows > 0 && (
+            <TableRow style={{ height: 53 * emptyRows }}>
+              <TableCell colSpan={6} />
+            </TableRow>
+          )}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
+              colSpan={3}
+              count={rows.length}
+              rowsPerPage={rowsPerPage}
+              page={page}
+              SelectProps={{
+                inputProps: {
+                  'aria-label': 'rows per page',
+                },
+                native: true,
+              }}
+              onPageChange={handleChangePage}
+              onRowsPerPageChange={handleChangeRowsPerPage}
+              ActionsComponent={TablePaginationActions}
+            />
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </TableContainer>
+
+      </Col>
+      </Row>
+
+      </Container>
+
+      </div>
+      </div>
+  );
 }