Change ads provider, and add consent system for advertising (#155)

* Add GAM integration & base for GPDR consent

* Moved consent to a specific page.

* Added functionality to the privacy page, and desactivate tracking if consent is not given.

* Added GeoEdge support, and fixed auth issues

* Fix actions issue

* Fix actions issue, attempt 2

* Added a module for analytics with consent support.

* Remove unnecessary function

* Add support for runtime config

pages/dashboard.vue

@@ -2,7 +2,7 @@
   <div class="page-container">
     <div class="page-contents">
       <div class="sidebar-l">
-        <div class="card page-nav">
+        <div v-if="$auth.user != null" class="card page-nav">
           <nuxt-link :to="'/dashboard/projects'" class="tab last">
             <ModIcon />
             My mods
@@ -30,6 +30,16 @@
             Settings
           </nuxt-link>
         </div>
+        <div v-else class="card page-nav">
+          <a :href="authUrl" class="tab last">
+            <UserIcon />
+            Log in
+          </a>
+          <nuxt-link :to="'/dashboard/privacy'" class="tab last">
+            <SettingsIcon />
+            Privacy Settings
+          </nuxt-link>
+        </div>
         <m-footer class="footer" />
       </div>
       <div class="content">
@@ -44,6 +54,7 @@ import ModerationIcon from '~/assets/images/sidebar/admin.svg?inline'
 import SettingsIcon from '~/assets/images/sidebar/settings.svg?inline'
 import NotificationsIcon from '~/assets/images/sidebar/notifications.svg?inline'
 import FollowIcon from '~/assets/images/utils/heart.svg?inline'
+import UserIcon from '~/assets/images/utils/user.svg?inline'
 
 export default {
   name: 'DashboardPage',
@@ -53,6 +64,12 @@ export default {
     SettingsIcon,
     NotificationsIcon,
     FollowIcon,
+    UserIcon,
+  },
+  computed: {
+    authUrl() {
+      return `https://api.modrinth.com/api/v1/auth/init?url=https://modrinth.com${this.$route.fullPath}`
+    },
   },
 }
 </script>

pages/dashboard/privacy.vue

@@ -0,0 +1,161 @@
+<!--suppress HtmlFormInputWithoutLabel -->
+<template>
+  <div class="popup card">
+    <div class="consent-container">
+      <div class="h1">Tweak your privacy settings</div>
+      <div>
+        Modrinth relies on different providers and in-house tools to allow us to
+        provide custom-tailored experiences, and personalized advertising. You
+        can at any moment change your privacy settings by going to the setting
+        page, or at the footer of any page.
+      </div>
+      <br class="divider" />
+      <div class="toggles">
+        <div v-for="(scope, id) in scopes" :key="id" class="toggle">
+          <div class="toggle-text">
+            <div class="title">{{ scope.title }}</div>
+            <div class="contents">
+              {{ scope.description }}
+            </div>
+          </div>
+          <div class="spacer"></div>
+          <div class="toggle-action">
+            <label :for="id"></label>
+            <input
+              :id="id"
+              ref="toggles"
+              v-model="scopes[id].value"
+              type="checkbox"
+              class="switch stylized-toggle"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="actions">
+      <button class="btn button" @click="toggleOff">Refuse All</button>
+      <button class="btn button" @click="toggleOn">Accept All</button>
+      <button class="btn brand-button" @click="confirm">
+        Confirm my choices
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable require-await */
+import scopes from '@/privacy-toggles'
+export default {
+  name: 'Privacy',
+  data: () => {
+    const settings = scopes.settings
+    return {
+      scopes: settings,
+    }
+  },
+  mounted() {
+    this.$store.dispatch('consent/loadFromCookies', this.$cookies)
+    // Load the allowed scopes from the store
+    this.$store.state.consent.scopes_allowed.forEach((scope) => {
+      if (this.scopes[scope] != null)
+        this.$set(this.scopes[scope], 'value', true)
+    })
+  },
+  options: {
+    auth: false,
+  },
+  methods: {
+    toggleOff() {
+      for (const elem in this.scopes) {
+        this.$set(this.scopes[elem], 'value', false)
+      }
+    },
+    toggleOn() {
+      for (const elem in this.scopes) {
+        this.$set(this.scopes[elem], 'value', true)
+      }
+    },
+    confirm() {
+      this.$store.commit('consent/set_consent', true)
+      for (const elem in this.scopes) {
+        if (this.scopes[elem].value === true) {
+          this.$store.commit('consent/add_scope', elem)
+        } else {
+          this.$store.commit('consent/remove_scope', elem)
+        }
+      }
+      this.$store.dispatch('consent/save', this.$cookies)
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.card {
+  @extend %card;
+  padding: var(--spacing-card-lg);
+}
+.popup {
+  display: flex;
+  flex-direction: column;
+}
+.spacer {
+  margin-top: 1rem;
+}
+.actions {
+  margin-top: 1.5rem;
+  margin-right: -0.5rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  .btn {
+    margin-right: 0.5rem;
+  }
+}
+.consent-container {
+  overflow-x: auto;
+  max-height: 90vh;
+
+  @media screen and (min-width: 900px) {
+    max-height: 50vh;
+  }
+  .h1 {
+    font-size: 2rem;
+    font-weight: bold;
+    margin-bottom: 0.6rem;
+  }
+  .divider {
+    margin-top: 1rem;
+  }
+  .toggles {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    .toggle {
+      display: flex;
+      flex-direction: row;
+      margin-bottom: 1rem;
+      .toggle-text {
+        .title {
+          color: var(--color-text-dark);
+          font-weight: bold;
+          margin-bottom: 0.5rem;
+        }
+        .contents {
+          color: var(--color-text);
+        }
+      }
+      .spacer {
+        flex-grow: 1;
+      }
+      .toggle-action {
+        margin-left: 1rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        margin-right: 1rem;
+      }
+    }
+  }
+}
+</style>

pages/mods.vue

@@ -63,7 +63,7 @@
           ></pagination>
         </section>
         <div class="results column-grow-4">
-          <Advertisement />
+          <Advertisement ad-unit="banner" size="728x90,468x60" />
           <div v-if="results === null" class="no-results">
             <p>Loading...</p>
           </div>
@@ -279,7 +279,7 @@
             @input="toggleLicense"
           />
         </div>
-        <Advertisement format="rectangle" />
+        <Advertisement ad-unit="square" size="250x250,200x200" />
         <m-footer class="footer" />
       </section>
     </div>
@@ -313,7 +313,7 @@ import FabricLoader from '~/assets/images/categories/fabric.svg?inline'
 import SearchIcon from '~/assets/images/utils/search.svg?inline'
 import ExitIcon from '~/assets/images/utils/exit.svg?inline'
 
-import Advertisement from '~/components/Advertisement'
+import Advertisement from '~/components/ads/Advertisement'
 
 export default {
   auth: false,

pages/user/_id.vue

@@ -55,11 +55,11 @@
             </div>
           </div>
         </div>
-        <Advertisement format="rectangle" />
+        <Advertisement ad-unit="square" size="250x250,200x200" />
         <m-footer class="footer" />
       </div>
       <div class="content">
-        <Advertisement />
+        <Advertisement ad-unit="banner" size="728x90,468x60" />
         <div class="mods">
           <SearchResult
             v-for="result in mods"
@@ -89,7 +89,7 @@ import MFooter from '~/components/layout/MFooter'
 import ReportIcon from '~/assets/images/utils/report.svg?inline'
 import CalendarIcon from '~/assets/images/utils/calendar.svg?inline'
 import DownloadIcon from '~/assets/images/utils/download.svg?inline'
-import Advertisement from '~/components/Advertisement'
+import Advertisement from '~/components/ads/Advertisement'
 
 export default {
   auth: false,