+ The new homepage shows the robots you can call, or + as "unavailable" if the robot is powered off or + occupied by another operator. There's also a "What's + New" section with details about new features being + added to the web interface. By default, you are + logged in when running the interface locally, but + there's a login screen that can be accessed by + logging out. In the future, this login screen will + enable you to call your Stretch over the internet. +
++ The operator interface now shows an banner if your + robot needs to be homed. Since some of Stretch's + encoders are relative, there's a homing sequence to + find zero for those joints when Stretch wakes up. + Previously, developers had to use a terminal to + trigger Stretch's homing sequence, but now you can + do it through the web interface. +
++ Lorem ipsum odor amet, consectetuer adipiscing elit. + Mattis purus potenti orci per torquent scelerisque. + Feugiat fringilla tristique various feugiat quis + cras magnis efficitur. Aptent curabitur mattis dui + congue porta cubilia. Lorem scelerisque convallis + tempor himenaeos donec inceptos ultricies dis. + Efficitur feugiat senectus nullam semper conubia + risus mi volutpat. +
++ Lorem ipsum odor amet, consectetuer adipiscing elit. + Mattis purus potenti orci per torquent scelerisque. + Feugiat fringilla tristique various feugiat quis + cras magnis efficitur. Aptent curabitur mattis dui + congue porta cubilia. Lorem scelerisque convallis + tempor himenaeos donec inceptos ultricies dis. + Efficitur feugiat senectus nullam semper conubia + risus mi volutpat. +
++ Lorem ipsum odor amet, consectetuer adipiscing elit. + Mattis purus potenti orci per torquent scelerisque. + Feugiat fringilla tristique various feugiat quis + cras magnis efficitur. Aptent curabitur mattis dui + congue porta cubilia. Lorem scelerisque convallis + tempor himenaeos donec inceptos ultricies dis. + Efficitur feugiat senectus nullam semper conubia + risus mi volutpat. +
+Not implemented
+ ); +}; diff --git a/src/pages/home/tsx/components/LoginView.tsx b/src/pages/home/tsx/components/LoginView.tsx new file mode 100644 index 0000000..0e96d07 --- /dev/null +++ b/src/pages/home/tsx/components/LoginView.tsx @@ -0,0 +1,284 @@ +// This component comes from the template at: +// https://github.com/mui/material-ui/tree/v6.1.5/docs/data/material/getting-started/templates/sign-in + +import "home/css/LoginView.css"; +import React, { useEffect, useState } from "react"; +import { isTablet, isBrowser } from "react-device-detect"; +import Box from "@mui/material/Box"; +import MuiCard from "@mui/material/Card"; +import Typography from "@mui/material/Typography"; +import FormControl from "@mui/material/FormControl"; +import FormLabel from "@mui/material/FormLabel"; +import FormControlLabel from "@mui/material/FormControlLabel"; +import TextField from "@mui/material/TextField"; +import Link from "@mui/material/Link"; +import Checkbox from "@mui/material/Checkbox"; +import Button from "@mui/material/Button"; +import Snackbar from "@mui/material/Snackbar"; +import { styled } from "@mui/material/styles"; +import { ForgotPassword } from "./ForgotPassword"; +import { loginHandler } from "../index"; + +const Card = styled(MuiCard)(({ theme }) => ({ + display: "flex", + flexDirection: "column", + alignSelf: "center", + width: "100%", + padding: theme.spacing(4), + gap: theme.spacing(2), + margin: "auto", + [theme.breakpoints.up("sm")]: { + maxWidth: "450px", + }, + boxShadow: + "hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px", + ...theme.applyStyles("dark", { + boxShadow: + "hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px", + }), +})); + +const SignInError = styled(Box)(({ theme }) => ({ + backgroundColor: "#d32f2f", + margin: `calc(-1 * ${theme.spacing(4)})`, + marginBottom: 0, + padding: 10, + color: "white", +})); + +export const LoginView = (props) => { + const [emailError, setEmailError] = useState(false); + const [emailErrorMessage, setEmailErrorMessage] = useState(""); + const [passwordError, setPasswordError] = useState(false); + const [passwordErrorMessage, setPasswordErrorMessage] = useState(""); + const [open, setOpen] = useState(false); + const [openToast, setOpenToast] = useState(false); + const [openFailureToast, setOpenFailureToast] = useState(false); + const [failureToastMessage, setfailureToastMessage] = useState(""); + const [failureLogin, setfailureLogin] = useState(false); + + const handleClickOpen = () => { + setOpen(true); + }; + + const handleForgotPassword = (email: string) => { + loginHandler + .forgot_password(email) + .then(() => { + setOpenToast(true); + }) + .catch((error) => { + setfailureToastMessage( + `Please contact Hello Robot Support. ERROR ${error.code}: ${error.message}`, + ); + setOpenFailureToast(true); + }); + }; + + const handleClose = () => { + setOpen(false); + }; + + const handleToastClose = () => { + setOpenToast(false); + }; + + const handleSubmit = (event: React.FormEventNot implemented
+ ); +}; diff --git a/src/pages/home/tsx/components/SideBySideView.tsx b/src/pages/home/tsx/components/SideBySideView.tsx new file mode 100644 index 0000000..1222d1f --- /dev/null +++ b/src/pages/home/tsx/components/SideBySideView.tsx @@ -0,0 +1,112 @@ +import "home/css/SideBySideView.css"; +import React, { useEffect, useState } from "react"; +import { isTablet, isBrowser } from "react-device-detect"; +import Box from "@mui/material/Box"; +import Grid from "@mui/material/Grid2"; +import AppBar from "@mui/material/AppBar"; +import Toolbar from "@mui/material/Toolbar"; +import Typography from "@mui/material/Typography"; +import Button from "@mui/material/Button"; +import Snackbar from "@mui/material/Snackbar"; +import { Changelog } from "./Changelog"; +import { CallRobotSelector } from "./CallRobotSelector"; +import { loginHandler } from "../index"; + +export const SideBySideView = (props) => { + const [openFailureToast, setOpenFailureToast] = useState(false); + const [failureToastMessage, setfailureToastMessage] = useState(""); + + const handleLogout = () => { + loginHandler.logout().catch((error) => { + setfailureToastMessage( + `Please contact Hello Robot Support. ERROR ${error.code}: ${error.message}`, + ); + setOpenFailureToast(true); + }); + }; + + return isTablet || isBrowser ? ( +