utils#session TypeScript Examples

The following examples show how to use utils#session. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.tsx    From ArCovidRos with GNU Affero General Public License v3.0 5 votes vote down vote up 
NoMatch = (): ReactElement => {
  const location = useLocation();

  const { isAuthorized, clearStorage } = session;
  const { ROUTES } = constants;

  const history = useHistory();

  const handleLinkClick = (path: string): void => {
    history.push(path);
  };

  return (
    <div
      style={{
        height: "100vh",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <div
        style={{
          padding: "150px 50px 150px 50px",
          borderRadius: "10px",
          boxShadow: "2px 2px 10px #666 ",
          textAlign: "center",
        }}
      >
        <Typography variant="h6">
          La ruta <code>{location.pathname}</code> es inválida
        </Typography>
        <Button
          style={{
            color: "#00ff8b",
            borderColor: "#00ff8b",
            fontWeight: "bold",
          }}
          variant="outlined"
          onClick={() => handleLinkClick(ROUTES.HOME)}
        >
          Volver al inicio
        </Button>
      </div>
    </div>
  );
}
Example #2
Source File: index.tsx    From ArCovidRos with GNU Affero General Public License v3.0 4 votes vote down vote up 
export default function Header() {
  const { isAuthorized, clearStorage } = session;
  const { ROUTES } = constants;

  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);

  const history = useHistory();

  const logOut = (): void => {
    clearStorage();
    history.push(ROUTES.LOGIN);
  };
  const handleLinkClick = (path: string): void => {
    history.push(path);
  };

  const handleMenuClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <AppBar style={{ background: "#00011A" }} position="static">
        <Toolbar variant="regular">
          <Grid container direction="row" alignItems="center">
            <Grid style={{ margin: "0 15px" }}>
              <img src={HackFunIcon} width="60px" />
            </Grid>
            <Grid xs={10}>
              <Typography variant="h6">HackFun</Typography>
            </Grid>
            <Grid>
              <IconButton edge="end" color="inherit" aria-label="github">
                <a
                  style={{ color: "white" }}
                  href="https://github.com/Hackfun-Rosario/ArCovidRos"
                >
                  <GitHubIcon />
                </a>
              </IconButton>
            </Grid>
            <Grid>
              <IconButton
                style={{ marginLeft: "15px" }}
                edge="end"
                color="inherit"
                aria-label="menu"
                onClick={handleMenuClick}
              >
                <MenuIcon />
              </IconButton>
              <Menu
                id="simple-menu"
                anchorEl={anchorEl}
                keepMounted
                open={Boolean(anchorEl)}
                onClose={handleMenuClose}
              >
                <MenuItem onClick={handleMenuClose}>
                  <Link
                    style={{
                      marginRight: "10px",
                      textDecoration: "none",
                      color: "black",
                    }}
                    onClick={() => handleLinkClick(ROUTES.HOME)}
                  >
                    Inicio
                  </Link>
                </MenuItem>
                {isAuthorized() && (
                  <div>
                    <MenuItem onClick={handleMenuClose}>
                      <Link
                        style={{
                          marginRight: "10px",
                          textDecoration: "none",
                          color: "black",
                        }}
                        onClick={() => handleLinkClick(ROUTES.ABM_PROVINCE)}
                      >
                        Alta Provincia
                      </Link>
                    </MenuItem>
                    <MenuItem onClick={handleMenuClose}>
                      <Link
                        onClick={() => handleLinkClick(ROUTES.ABM_CITY)}
                        style={{ textDecoration: "none", color: "black" }}
                      >
                        Alta Ciudad
                      </Link>
                    </MenuItem>
                    <MenuItem onClick={logOut}>Logout</MenuItem>
                  </div>
                )}
                {!isAuthorized() && (
                  <MenuItem onClick={handleMenuClose}>
                    <Link
                      onClick={() => handleLinkClick(ROUTES.LOGIN)}
                      style={{ textDecoration: "none", color: "black" }}
                    >
                      Login
                    </Link>
                  </MenuItem>
                )}
              </Menu>
            </Grid>
          </Grid>
        </Toolbar>
      </AppBar>
    </div>
  );
}
Example #3
Source File: index.tsx    From ArCovidRos with GNU Affero General Public License v3.0 4 votes vote down vote up 
Login = () => {
  const { isAuthorized } = session;
  const [username, setUsername] = useState<string>('');
  const [password, setPassword] = useState<string>('');
  const [loading, setLoading] = useState<boolean>(false);
  let history = useHistory();

  const handleClick = async () => {
    setLoading(true);

    await axios({
      method: METHODS.POST,
      url: ENDPOINTS.LOGIN,
      data: {
        username,
        password,
      }
    }).then((response) => {
      const { data: { token }} = response;

      localStorage.setItem('covidapi', JSON.stringify({ token: token }));
      history.push('/');
    }).catch((error) => {
      console.warn('Error while tryng to log in', error);
    });

    setLoading(false);
  };

  useEffect(() => {
    if (isAuthorized()) {
      history.push('/abm/province');
    }
  }, [])

  return (
    <Layout className="login">
      <Grid className="login__content" container direction="column" spacing={3} xs={4}>
        <Grid item>
          <Typography variant="h5">Personal autorizado</Typography>
        </Grid>
        <Grid item>
          <TextField
            label="Usuario"
            fullWidth
            required
            onChange={event => {
              setUsername(event?.target?.value);
            }}
            value={username}
          />
        </Grid>
        <Grid item>
          <TextField
            label="Contraseña"
            fullWidth
            required
            onChange={event => {
              setPassword(event?.target?.value);
            }}
            type="password"
            value={password}
          />
        </Grid>
        <Grid item align="right">
          <Button
            style={{
              color:"#00ff8b",
              borderColor:"#00ff8b",
              fontWeight:"bold"
              }}
            disabled={loading}
            variant="outlined"
            onClick={handleClick}
          >
            Iniciar sesion
          </Button>
        </Grid>
      </Grid>
    </Layout>
  );
}