Skip to content

Commit

Permalink
feat: remove the incitation to login when it's the case (#193)
Browse files Browse the repository at this point in the history 
Co-authored-by: Pierre Slamich <pierre.slamich@gmail.com>
  • Loading branch information
@alexfauquette @teolemon
alexfauquette and teolemon authored Sep 5, 2022
1 parent 19473f9 commit e6b004c
Show file tree
Hide file tree
Showing 3 changed files with 194 additions and 98 deletions.
44 changes: 40 additions & 4 deletions src/components/ResponsiveAppBar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const ResponsiveAppBar = () => {
setAnchorElNav(null);
};

const { isLoggedIn, userName } = React.useContext(LoginContext);
const { isLoggedIn, userName, refresh } = React.useContext(LoginContext);
const { devMode: isDevMode, visiblePages } = React.useContext(DevModeContext);
const displayedPages = pages.filter(
(page) => !page.devModeOnly || (isDevMode && visiblePages[page.url])
Expand Down Expand Up @@ -129,7 +129,25 @@ const ResponsiveAppBar = () => {
>
Hunger Games
</Typography>
<AccountCircleIcon color={isLoggedIn ? "success" : "error"} />
{isLoggedIn ? (
<AccountCircleIcon color="success" />
) : (
<IconButton
onClick={async () => {
const isLoggedIn = await refresh();
if (!isLoggedIn) {
window
.open(
"https://world.openfoodfacts.org/cgi/login.pl",
"_blank"
)
.focus();
}
}}
>
<AccountCircleIcon color="error" />
</IconButton>
)}
</Box>

{/* Desktop content */}
Expand Down Expand Up @@ -216,9 +234,27 @@ const ResponsiveAppBar = () => {
</IconButton>
<Welcome />
<Tooltip
title={isLoggedIn ? `logged as ${userName}` : `not logged in`}
title={isLoggedIn ? `logged as ${userName}` : `click to login`}
>
<AccountCircleIcon color={isLoggedIn ? "success" : "error"} />
{isLoggedIn ? (
<AccountCircleIcon color="success" />
) : (
<IconButton
onClick={async () => {
const isLoggedIn = await refresh();
if (!isLoggedIn) {
window
.open(
"https://world.openfoodfacts.org/cgi/login.pl",
"_blank"
)
.focus();
}
}}
>
<AccountCircleIcon color="error" />
</IconButton>
)}
</Tooltip>
</Box>
</Box>
Expand Down
196 changes: 102 additions & 94 deletions src/pages/home/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import Typography from "@mui/material/Typography";
import { Button, Modal } from "@mui/material";
import QuestionCard from "../../components/QuestionCard";
import { localFavorites } from "../../localeStorageManager";
import LoginContext from "../../contexts/login";
import HomeCards from "./homeCards";
import { useTheme } from "@mui/material/styles";

Expand All @@ -13,6 +14,9 @@ const Home = () => {
const [savedQuestions] = React.useState(() => {
return localFavorites.fetch().questions ?? [];
});

const { isLoggedIn } = React.useContext(LoginContext);

const size = Object.keys(savedQuestions).length;
const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen(true);
Expand Down Expand Up @@ -43,111 +47,115 @@ const Home = () => {
))}
</Stack>
</Box>
<Box
padding={{ xs: "20px", sm: "50px" }}
sx={{
backgroundColor: theme.palette.secondary.main,
}}
>
<Stack
spacing={4}
flexWrap="wrap"
direction={{ xs: "column", sm: "column", md: "row" }}
alignItems="center"
justifyContent="center"
>
<Typography
variant="h5"
{!isLoggedIn && (
<React.Fragment>
<Box
padding={{ xs: "20px", sm: "50px" }}
sx={{
textAlign: "center",
lineHeight: "1.75",
backgroundColor: theme.palette.secondary.main,
}}
>
Want to make your contribution count? Create an account or sign in
on Open Food Facts!
</Typography>
<Stack direction="row">
<Stack
spacing={4}
flexWrap="wrap"
direction={{ xs: "column", sm: "column", md: "row" }}
alignItems="center"
justifyContent="center"
>
<Typography
variant="h5"
sx={{
textAlign: "center",
lineHeight: "1.75",
}}
>
Want to make your contribution count? Create an account or sign
in on Open Food Facts!
</Typography>
<Stack direction="row">
<Button
variant="contained"
href="https://world.openfoodfacts.org/cgi/login.pl"
sx={{
backgroundColor: "white",
color: "black",
margin: "0 20px",
}}
>
Login
</Button>
<Button
variant="contained"
href="https://world.openfoodfacts.org/cgi/user.pl"
sx={{
backgroundColor: "white",
color: "black",
}}
>
Sign up
</Button>
</Stack>
</Stack>
</Box>
<Box textAlign="center">
<Button
variant="contained"
href="https://world.openfoodfacts.org/cgi/login.pl"
onClick={handleOpen}
sx={{
backgroundColor: "white",
color: "black",
margin: "0 20px",
margin: "20px auto",
}}
>
Login
Learn why your contribution matters
</Button>
<Button
variant="contained"
href="https://world.openfoodfacts.org/cgi/user.pl"
</Box>
<Modal
open={open}
onClose={handleClose}
aria-labelledby="modal-contribution-title"
aria-describedby="modal-contribution-information"
>
<Box
width={{ xs: "90%", sm: "50%" }}
sx={{
backgroundColor: "white",
color: "black",
backgroundColor: theme.palette.secondary.main,
color: theme.palette.secondary.contrastText,
position: "absolute",
left: "50%",
top: "50%",
transform: "translate(-50%, -50%)",
padding: "20px",
}}
>
Sign up
</Button>
</Stack>
</Stack>
</Box>
<Box textAlign="center">
<Button
onClick={handleOpen}
sx={{
margin: "20px auto",
}}
>
Learn why your contribution matters
</Button>
</Box>
<Modal
open={open}
onClose={handleClose}
aria-labelledby="modal-contribution-title"
aria-describedby="modal-contribution-information"
>
<Box
width={{ xs: "90%", sm: "50%" }}
sx={{
backgroundColor: theme.palette.secondary.main,
color: theme.palette.secondary.contrastText,
position: "absolute",
left: "50%",
top: "50%",
transform: "translate(-50%, -50%)",
padding: "20px",
}}
>
<Typography
id="modal-contribution-title"
variant="h6"
component="h2"
fontWeight={700}
>
Your contribution matters
</Typography>
<Typography
class="modal-contribution-information"
sx={{ mt: 2 }}
component="p"
>
Hunger Games is an effort to leverage the results of our OCR. When
you use Hunger Games by Open Food Facts, you improve our entire
database which helps the community make better food choices. We
gathers your annotations and use them to make Open Food Facts more
accurate and effecient.
</Typography>
<Typography
class="modal-contribution-information"
sx={{ mt: 2 }}
component="p"
>
Thank you for helping us improve Open Food Facts so that more people
can use it easily.
</Typography>
</Box>
</Modal>
<Typography
id="modal-contribution-title"
variant="h6"
component="h2"
fontWeight={700}
>
Your contribution matters
</Typography>
<Typography
class="modal-contribution-information"
sx={{ mt: 2 }}
component="p"
>
Hunger Games is an effort to leverage the results of our OCR.
When you use Hunger Games by Open Food Facts, you improve our
entire database which helps the community make better food
choices. We gathers your annotations and use them to make Open
Food Facts more accurate and effecient.
</Typography>
<Typography
class="modal-contribution-information"
sx={{ mt: 2 }}
component="p"
>
Thank you for helping us improve Open Food Facts so that more
people can use it easily.
</Typography>
</Box>
</Modal>
</React.Fragment>
)}
</>
);
};
Expand Down
52 changes: 52 additions & 0 deletions src/pages/questions/UserData.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,12 @@ import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
import Link from "@mui/material/Link";
import Dialog from "@mui/material/Dialog";
import DialogTitle from "@mui/material/DialogTitle";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogActions from "@mui/material/DialogActions";
import Button from "@mui/material/Button";

import CancelOutlinedIcon from "@mui/icons-material/CancelOutlined";
import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
Expand All @@ -13,6 +19,7 @@ import CancelScheduleSendIcon from "@mui/icons-material/CancelScheduleSend";
import { useTranslation } from "react-i18next";
import { CORRECT_INSIGHT, WRONG_INSIGHT } from "../../const";
import offService from "../../off";
import LoginContext from "../../contexts/login";
import { AnswerInterface } from "./useQuestionBuffer";

interface UserDataProps {
Expand All @@ -29,6 +36,17 @@ const UserData = ({
}: UserDataProps) => {
const { t } = useTranslation();

const [loginAlreadyProposed, setLoginAlreadyProposed] = React.useState(false);
const [loginModalOpen, setLoginModalOpen] = React.useState(false);

const { isLoggedIn } = React.useContext(LoginContext);

React.useEffect(() => {
if (answers.length > 3 && !isLoggedIn && !loginAlreadyProposed) {
setLoginModalOpen(true);
}
}, [answers.length, isLoggedIn, loginAlreadyProposed]);

let displayedAnswers = answers.filter(
(question) => question.validationValue !== -1
);
Expand Down Expand Up @@ -76,6 +94,40 @@ const UserData = ({
)
)}
</Stack>
<Dialog
open={loginModalOpen}
onClose={() => {
setLoginModalOpen(false);
setLoginAlreadyProposed(true);
}}
>
<DialogTitle>Make your annotation count</DialogTitle>
<DialogContent>
<DialogContentText>
Currently you are not logged in Open Food Facts. To get your answers
directly applied to products, and associated to your account,
consider logging in to your Open Food Facts account, or creating one
</DialogContentText>
</DialogContent>
<DialogActions>
<Button
variant="contained"
href="https://world.openfoodfacts.org/cgi/login.pl"
component={Link}
target="_blank"
>
Login
</Button>
<Button
variant="contained"
href="https://world.openfoodfacts.org/cgi/user.pl"
component={Link}
target="_blank"
>
Sign up
</Button>
</DialogActions>
</Dialog>
</Box>
);
};
Expand Down

0 comments on commit e6b004c

Please sign in to comment.