Show Robotoff questions to non-logged users, with a prompt to sign-up or login

[teolemon]

What

Show Robotoff questions to non-logged users, with a prompt to sign-up or login.
Code pointer (original PR by @hangy) : https://github.com/openfoodfacts/openfoodfacts-server/pull/1705/files

Part of

• 🐣 Road to contribution / First time experience #5708

Mockup

[teolemon]

@hangy @VaiTon @raphael0202 added a mockup of an improved web experience for Robotoff that would enable to convert part of the 1,4 million monthly visitors into contributors

[teolemon]

Pseudo-code

on_button_click():
  if is_logged_in:
    save_answer(answer, barcode,user)
  else:
    success = show_login_modal(answer, barcode)
    if success:
      save_answer(answer, barcode, user)
    else:
      show_login_modal(answer, barcode, error)

[teolemon]

Relevant integration points:
Javascript that displays Robotoff:

openfoodfacts-server/html/js/display-product.js

Line 33 in 9af7d87

class RobotoffAsker extends HTMLElement {

User signup:

openfoodfacts-server/cgi/user2.pl

Line 321 in b30b615

ProductOpener::Users::process_user_form($type, $user_ref);

Template for user signup: user_form2.tt.html

[CharlesNepote]

The call to Robotoff questions is only available for registered users. Before rewrriting JS code we have to display it for every users:

openfoodfacts-server/templates/web/pages/product/product_page.tt.html

Line 50 in 319b66b

[% IF (user_id.defined) && (robotoff_url.defined) && (robotoff_url.length > 0) %]

- [% IF (user_id.defined) && (robotoff_url.defined) && (robotoff_url.length > 0) %]
+ [% IF (robotoff_url.defined) && (robotoff_url.length > 0) %]

Then test if user is connected or not. We can start with a simple check to the HTML id logged_in_user_id as we are doing in Power User Script.

    /**
     * getConnectedUserID: returns user id of the current connected user
     *
     * @param    none
     * @returns  {String} user id; Example: "charlesnepote"
     */
    function getConnectedUserID() {
        // Extract connected user_id by reading <span id="user_id">charlesnepote</span>
        var user_name = $("#logged_in_user_id").text();
        console.log("getConnectedUserID() > user_name: "); console.log(user_name);
        return user_name;
    }

If the user is not connected, then display form in a modal.

1. If the user already has an account

2. If the user doesn't have an account
   user.pl does not have a callback to get back to the product.

TO BE COMPLETED

    /**
     * displayLoginForm
     *
     * @param    callback?
     * @returns  none
     */
    function displayLoginForm() {
        // Display form
        // TODO: manage i18n
        const form =
              `<form method="post" action="/cgi/session.pl">
                  <label>Nom d'utilisateur ou adresse e-mail :
                     <input type="text" name="user_id" autocomplete="username" required>
                  </label>
                  <label>Mot de passe
                     <input type="password" name="password" autocomplete="current-password" required>
                  </label>
                  <label>
                     <input type="checkbox" name="remember_me" checked>
                     Se souvenir de moi
                  </label>
                  <input type="submit" name=".submit" value="Se connecter" class="button small">
              </form>`;
        showPowerUserInfo(form); // open a new modal

        // TODO: if the user needs to create a user account

        document.getElementById('property').addEventListener('submit', function(e){
            e.preventDefault();

            // If the user validate the user login form
            const userLoginURL = "https://world.openfoodfacts.org/" + "/cgi/session.pl";
            const user = document.getElementsByName("user_id");
            const password = document.getElementsByName("password");
            fetch(userLoginURL, {
                // Adding method type
                method: "POST",
                // Adding body or contents to send
                body: `user=${user}&password=${password}`
            })
            // Converting to JSON
                .then(response.json())
            // Test if status is 200
                .then(response => {
                console.log(response);
            });
        });
    }

[alexgarel]

With google fellowship, anonymous contribution to robotoff questions was implemented.

So we can no use it, and, of course, we can still encourage users to create an account, but it can simply redirect to the account creation page.

We have yet to implement the client side features:

• Ask question to non logged-in users #6506
• Ask questions to non logged-in users smooth-app#1319

[alexgarel]

We can close this issue, you can test it on openfoodfacts.net

[raphael0202]

I've just tried it on dev instance, the vote is indeed registered on Robotoff dev 👍