adds authentication to website; uses firestore as remote storage management solution

docs/metrics.md

@@ -60,5 +60,5 @@ In addition to those built-in metrics, the following metrics are added to the pi
 
 Data categories are [defined here](https://wiki.mozilla.org/Firefox/Data_Collection).
 
-<!-- AUTOGENERATED BY glean_parser.  DO NOT EDIT. DO NOT COMMIT. -->
+<!-- AUTOGENERATED BY glean_parser. DO NOT EDIT. -->
 

firebase.config.js

@@ -0,0 +1,8 @@
+export default {
+    apiKey: "AIzaSyAJv0aTJMCbG_e6FJZzc6hSzri9qDCmvoo",
+    authDomain: "rally-web-spike.firebaseapp.com",
+    projectId: "rally-web-spike",
+    storageBucket: "rally-web-spike.appspot.com",
+    messagingSenderId: "85993993890",
+    appId: "1:85993993890:web:b975ff99733d2d8b50c9fb"
+  };

package.json

@@ -23,6 +23,9 @@
     "start:web": "sirv public",
     "watch": "npm-run-all --parallel watch:raw watch:bundled",
     "watch:raw": "npm run build:schema && npm run dev -- -w",
+    "autobuild": "rollup -c rollup.config.web.js -w --environment NODE_ENV:dev",
+    "start:dev": "sirv public --single --dev",
+    "site-dev": "run-p start:dev autobuild",
     "watch:bundled": "npm run build:schema && web-ext run --watch-file dist/background.js --watch-file dist/content-scripts/attention-collector.js --watch-file schemas/measurements.1.schema.json"
   },
   "jest": {
@@ -59,6 +62,7 @@
   "devDependencies": {
     "@babel/plugin-transform-runtime": "^7.13.10",
     "@babel/preset-env": "^7.13.12",
+    "@mozilla-protocol/core": "^12.1.0",
     "@mozilla/glean": "^0.15.0",
     "@mozilla/rally": "0.6.0",
     "@rollup/plugin-commonjs": "^18.0.0",
@@ -73,6 +77,7 @@
     "eslint-plugin-mocha": "^8.0.0",
     "eslint-plugin-node": "^11.1.0",
     "geckodriver": "^1.21.0",
+    "immer": "^9.0.3",
     "jest": "^26.6.3",
     "jest-transform-stub": "^2.0.0",
     "jest-webextension-mock": "^3.7.6",
@@ -94,6 +99,7 @@
     "webextension-polyfill": "^0.7.0"
   },
   "dependencies": {
+    "firebase": "^9.0.0-beta.2",
     "sirv-cli": "^1.0.10"
   },
   "engines": {

public/index.html

@@ -13,6 +13,10 @@
     <link rel="stylesheet" href="tokens.css" />
     <link rel="stylesheet" href="build/bundle.css" />
 
+    <script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-firestore.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-auth.js"></script>
+
     <script defer src="build/bundle.js"></script>
   </head>
 

public/locally-available-studies.json

@@ -22,10 +22,7 @@
       "The domains you visit as you browse the web (e.g., wikipedia.org) and the title, description, and type of page that you're on (e.g., article, video, website)",
       "The time spent on each page and how far you scroll down a page"
     ],
-    "tags": [
-      "community insights",
-      "product discovery"
-    ],
+    "tags": ["community insights", "product discovery"],
     "schemaNamespace": "rally-zero-one"
   },
   {
@@ -51,10 +48,7 @@
       "Whether you post links to these websites on social media",
       "Your Rally demographics and a short Qualtrics survey"
     ],
-    "tags": [
-      "misinformation",
-      "social media"
-    ],
+    "tags": ["misinformation", "social media"],
     "schemaNamespace": "pioneer-citp-news-disinfo-two"
   }
-]
+]

rollup.config.web.js

@@ -17,12 +17,12 @@ function serve() {
   let server;
 
   function toExit() {
-    if (server) server.kill(0);
+    if (server) {server.kill(0);}
   }
 
   return {
     writeBundle() {
-      if (server) return;
+      if (server) {return;}
       server = exec.spawn(
         "npm",
         ["run", "start", "--", "--dev"],
@@ -57,13 +57,13 @@ export default (cliArgs) => [{
     }),
     copy({
       targets: [
-        { src: 'node_modules/@mozilla-protocol/core/protocol/fonts/Inter-Bold.woff2', dest: 'public/fonts/'},
-        { src: 'node_modules/@mozilla-protocol/core/protocol/fonts/Inter-Regular.woff2', dest: 'public/fonts/'},
-        { src: 'node_modules/@mozilla-protocol/core/protocol/fonts/Inter-Italic.woff2', dest: 'public/fonts/'},
-        { src: 'node_modules/@mozilla-protocol/core/protocol/fonts/ZillaSlab-Bold.woff2', dest: 'public/fonts/'},
-        { src: 'node_modules/@mozilla-protocol/core/protocol/fonts/Metropolis-*.woff2', dest: 'public/fonts/'},
-        { src: 'node_modules/@mozilla-protocol/core/protocol/css/protocol.css', dest: 'public/build/'},
-        { src: 'node_modules/@mozilla-protocol/core/protocol/css/protocol-extra.css', dest: 'public/build/'}
+        { src: "node_modules/@mozilla-protocol/core/protocol/fonts/Inter-Bold.woff2", dest: "public/fonts/"},
+        { src: "node_modules/@mozilla-protocol/core/protocol/fonts/Inter-Regular.woff2", dest: "public/fonts/"},
+        { src: "node_modules/@mozilla-protocol/core/protocol/fonts/Inter-Italic.woff2", dest: "public/fonts/"},
+        { src: "node_modules/@mozilla-protocol/core/protocol/fonts/ZillaSlab-Bold.woff2", dest: "public/fonts/"},
+        { src: "node_modules/@mozilla-protocol/core/protocol/fonts/Metropolis-*.woff2", dest: "public/fonts/"},
+        { src: "node_modules/@mozilla-protocol/core/protocol/css/protocol.css", dest: "public/build/"},
+        { src: "node_modules/@mozilla-protocol/core/protocol/css/protocol-extra.css", dest: "public/build/"}
       ]
     }),
     svelte({
@@ -74,7 +74,7 @@ export default (cliArgs) => [{
     }),
     // we'll extract any component CSS out into
     // a separate file - better for performance
-    css({ output: 'bundle.css' }),
+    css({ output: "bundle.css" }),
 
     // If you have external dependencies installed from
     // npm, you'll most likely need these plugins. In

website/App.svelte

@@ -11,16 +11,18 @@
   import Main from './routes/Main.svelte';
   import NotificationCenter from "./routes/NotificationCenter.svelte";
   import NonUSSplashPage from './routes/non-eligible-splashes/NonUSUser.svelte';
+
   setContext("rally:store", store);
   setContext("rally:notification", notification);
 
   // As soon as the store has its initial value, let's
   // set firstRun = !enrolled.
   let firstRun;
-  $: if ($store && firstRun === undefined) {
-    firstRun = !$store.enrolled;
-  }
 
+  $: showStore = ($store._initialized === true);
+  $: if ($store._initialized && firstRun === undefined) {
+    firstRun = !($store.user?.enrolled);
+  }
   // We currently exclusively support Rally on en-US locales,
   // but still support enabling/disabling the locale check
   // to enable the development workflows on other locales.
@@ -30,8 +32,23 @@
 
 </script>
 
+{#if $store.user?.testValue}
+<div style="
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
+  padding: 1rem;
+  border-radius: .5rem;
+  background-color: black;
+  color: white;
+  font-weight: 600;
+">
+  {$store.user?.testValue}
+</div>
+{/if}
+
 {#if isRallySupported}
-  {#if $store}
+  {#if showStore}
     {#if firstRun}
       <!-- onboarding flow -->
       <!-- the onboarding-complete event occurs once the user has

website/app-store.js

@@ -3,28 +3,37 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { writable } from "svelte/store";
-import api from "./web-extension-api";
+import api from "./web-site-api";
 
 export function createAppStore() {
   // initialize the writable store.
-  const { subscribe, set } = writable();
-
-  // initialize from the API.
-  api.initialize().then(async (newState) => {
-    console.log(`initialize: updated state -`, newState);
-    set(newState);
+  const { subscribe, set } = writable({ _initialized: false });
+  api.initialize().then(state => {
+    set(state);
+  });
+  api.onNextState((state) => {
+    const nextState = {...state, _initialized: true };
+    set(nextState);
   });
-
-  // set UI when the background script reports a new state.
-  api.onNextState(set);
 
   return {
     subscribe,
     set,
+    // login and signup functions
+    async loginWithGoogle() {
+      console.log("login with google");
+      return api.loginWithGoogle();
+    },
+    async loginWithEmailAndPassword() {
+      return api.loginWithEmailAndPassword();
+    },
+    async signupWithEmailAndPassword() {
+      return api.signupWithEmailAndPassword();
+    },
     async updateStudyEnrollment(studyID, enroll) {
       // Enforce the truthyness of `enroll`, to make sure
       // it's always a boolean.
-      let coercedEnroll = !!enroll;
+      const coercedEnroll = !!enroll;
       console.debug(
         `Rally - changing study ${studyID} enrollment to ${coercedEnroll}`);
 
@@ -38,7 +47,7 @@ export function createAppStore() {
     async updatePlatformEnrollment(enroll) {
       // Enforce the truthyness of `enroll`, to make sure
       // it's always a boolean.
-      let coercedEnroll = !!enroll;
+      const coercedEnroll = !!enroll;
       console.debug(`Rally - changing enrollment to ${coercedEnroll}`);
 
       // send the ion enrollment message
@@ -52,14 +61,14 @@ export function createAppStore() {
       try {
         await api.updateDemographicSurvey(data);
       } catch (err) {
-        console.error(`Rally - failed to update the demographic survey`, err);
+        console.error("Rally - failed to update the demographic survey", err);
       }
     },
     async setFirstRunCompletion(firstRun) {
       try {
         await api.setFirstRunCompletion(firstRun);
       } catch (err) {
-        console.error(`Rally - failed to set first run flag`, err);
+        console.error("Rally - failed to set first run flag", err);
       }
     }
   };

website/components/layouts/MainLayout.svelte

@@ -4,7 +4,6 @@
 <style>
   div {
     min-height: 100vh;
-    background-color: green;
     display: grid;
     grid-template-columns: max-content auto;
     justify-content: stretch;

website/routes/Main.svelte

@@ -34,7 +34,7 @@ function leaveStudy(studyID) { store.updateStudyEnrollment(studyID, false); noti
 // For now, we should expect that the profile questions are the same set as for the demographic survey.
 // Before we can count the answered questions, let's transform them back into their display version (the format we use
 // for the literal inputs) and then use the questionIsAnswered function to check how many have in fact been answered.
-$: formattedDemographicsData = $store.demographicsData ? formatAnswersForDisplay(demographicsSchema, { ...$store.demographicsData }, inputFormatters) : undefined;
+$: formattedDemographicsData = $store.user.demographicsData ? formatAnswersForDisplay(demographicsSchema, { ...$store.user.demographicsData }, inputFormatters) : undefined;
 $: profileQuestionsAnswered = formattedDemographicsData ? Object.keys(demographicsSchema)
     .filter(key => questionIsAnswered(formattedDemographicsData[key], demographicsSchema[key].type)).length : 0;
 // get the total number of available profile questions
@@ -67,7 +67,8 @@ onMount(() => { mounted = true; })
                 <MainContent  pad={false}>
                     <CurrentStudies
                         sidebarOffset
-                        studies={$store.availableStudies}
+                        studies={$store.studies}
+                        userEnrollment={$store.user?.enrolledStudies || {}}
                         on:cta-clicked={() => {
                             notification.clear();
                         }}

website/routes/Onboarding.svelte

@@ -2,7 +2,7 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-  import { onMount, getContext, createEventDispatcher } from "svelte";
+  import { onMount, getContext, createEventDispatcher, tick } from "svelte";
   import Layout from "../components/layouts/OnboardingLayout.svelte";
   import Main from "../components/layouts/OnboardingBody.svelte";
   import Welcome from "../routes/welcome/Content.svelte";
@@ -29,9 +29,19 @@
     // that we don't need to show first-run graphics
     // such as the arrow pointing to the add-on
     // in the toolbar.
+
+    // if authenticated already, skip welcome page.
+
     dispatch("first-run-initiated");
   });
 
+  $: if (view === 'welcome' && $store.user && $store.user.uid && $store.user.enrolled) {
+    finishOnboarding();
+  }
+  $: if (view === 'welcome' && $store.user && $store.user.uid && !$store.user.enrolled) {
+    send('terms');
+  }
+
   function send(next) {
     view = next;
     window.scrollTo(0, 0);
@@ -58,9 +68,13 @@
         {#if view === 'welcome'}
           <Welcome
             firstRunCompleted={firstRunCompleted}
-            on:get-started={() => {
-              send('terms');
-          }} />
+            on:google-signup={async () => {
+              if ($store.user) {
+                send("terms");
+              }
+            }}
+            on:signup-with-email-and-password
+            />
         {:else if view === 'terms'}
           <TermsOfService />
         {:else if view === 'demographics'}

website/routes/current-studies/Content.svelte

@@ -8,6 +8,7 @@ import { fly } from 'svelte/transition';
 import StudyCard from './StudyCard.svelte';
 
 export let studies = [];
+export let userEnrollment = {};
 export let sidebarOffset = false;
 
 const dispatch = createEventDispatcher();
@@ -65,11 +66,11 @@ p {
     <StudyCard
         title={study.name}
         author={study.authors.name}
-        joined={(!!study.studyJoined)}
+        joined={(study.addonId in userEnrollment && userEnrollment[study.addonId].enrolled)}
         imageSrc={study.icons[64]}
         addonId={study.addonId}
         endDate={parseDateIfNeeded(study.endDate)}
-        joinedDate={parseDateIfNeeded(study.joinedOn)}
+        joinedDate={study.addonId in userEnrollment && userEnrollment[study.addonId].enrolled && userEnrollment[study.addonId].joinedOn.toDate()}
         description={study.description}
         dataCollectionDetails={study.dataCollectionDetails}
         studyDetailsLink={study.studyDetailsLink}

website/routes/demographics/MainDemographicsView.svelte

@@ -20,8 +20,8 @@ const dispatch = createEventDispatcher();
 // what we will send to the server - to the _display_ format -
 // what is displayed to the user in the input fields.
 let intermediateResults;
-$: if ($store && $store.demographicsData) {
-    intermediateResults = formatAnswersForDisplay(schema, { ...$store.demographicsData }, inputFormatters);
+$: if ($store.user && $store.user.demographicsData) {
+    intermediateResults = formatAnswersForDisplay(schema, { ...$store.user.demographicsData }, inputFormatters);
 }
 </script>
 
@@ -42,7 +42,7 @@ $: if ($store && $store.demographicsData) {
                 dispatch("redirect-to", {view: "current-studies", suppressNotifications: true});
             }}>Save Changes</Button>
             <Button size="lg" product disabled={!validated} secondary on:click={() => {
-                intermediateResults = formatAnswersForDisplay(schema, { ...$store.demographicsData }, inputFormatters);
+                intermediateResults = formatAnswersForDisplay(schema, { ...$store.user.demographicsData }, inputFormatters);
                 dispatch("redirect-to", {view: "current-studies"});
             }}>Cancel</Button>
         </div>