WIP(privacy): layout rough

HabitRPG · Dec 20, 2024 · ac1b82b · ac1b82b
1 parent 21e7d1c
commit ac1b82b
Show file tree

Hide file tree

Showing 7 changed files with 152 additions and 10 deletions.
diff --git a/website/client/src/assets/scss/typography.scss b/website/client/src/assets/scss/typography.scss
@@ -131,6 +131,10 @@ h4 {
   color: $gray-50 !important;
 }
 
+.gray-100 {
+  color: $gray-100 !important;
+}
+
 .gray-200 {
   color: $gray-200 !important;
 }

diff --git a/website/client/src/components/header/banners/privacy.vue b/website/client/src/components/header/banners/privacy.vue
@@ -1,18 +1,18 @@
 <template>
   <div class="d-flex align-items-center justify-content-between py-3 px-4">
-    <div
-      class="mr-3"
+    <p
+      class="mr-3 mb-0"
       v-html="$t('privacyOverview')"
     >
-    </div>
+    </p>
     <div class="d-flex flex-column justify-content-around text-center ml-3">
       <button class="btn btn-primary mb-2">
-        Accept All Cookies
+        {{ $t('acceptAllCookies') }}
       </button>
       <button class="btn btn-secondary mb-2">
-        Deny Non-Essential Cookies
+        {{ $t('denyNonEssentialCookies') }}
       </button>
-      <a>Manage Your Privacy Preferences</a>
+      <a>{{ $t('managePrivacyPreferences') }}</a>
     </div>
   </div>
 </template>
@@ -22,6 +22,10 @@
     min-width: 40px;
     width: 558px;
   }
+
+  a, p {
+    line-height: 1.714;
+  }
 </style>
 
 <script>

diff --git a/website/client/src/components/static/home.vue b/website/client/src/components/static/home.vue
@@ -8,6 +8,9 @@
       <br />
       <a href="https://www.enable-javascript.com/" target="_blank">{{ $t('jsDisabledLink') }}</a>
     </noscript>
+    <privacy-banner
+      class="privacy-banner mx-4"
+    />
     <div
       id="intro-signup"
       class="purple-1"
@@ -354,8 +357,13 @@
 
 <style lang='scss'>
 @import '~@/assets/scss/static.scss';
-  #front .form-text a {
-    color: $white !important;
+  #front {
+    .form-text a {
+      color: $white !important;
+    }
+    .privacy-banner p {
+      font-size: 14px;
+    }
   }
 </style>
 
@@ -427,6 +435,15 @@
       font-family: 'Varela Round', sans-serif;
       font-weight: normal;
     }
+
+    .privacy-banner {
+      position: fixed;
+      bottom: 24px;
+      border-radius: 8px;
+      background-color: $white;
+      z-index: 1;
+      box-shadow: 0px 3px 6px 0px rgba(26, 24, 29, 0.16), 0px 3px 6px 0px rgba(26, 24, 29, 0.24);
+    }
   }
 
   #intro-signup {
@@ -793,6 +810,7 @@ import isEmail from 'validator/es/lib/isEmail';
 import { MINIMUM_PASSWORD_LENGTH } from '@/../../common/script/constants';
 import { buildAppleAuthUrl } from '../../libs/auth';
 import sanitizeRedirect from '@/mixins/sanitizeRedirect';
+import PrivacyBanner from '@/components/header/banners/privacy';
 import googlePlay from '@/assets/images/home/google-play-badge.svg';
 import iosAppStore from '@/assets/images/home/ios-app-store.svg';
 import iphones from '@/assets/images/home/iphones.svg';
@@ -813,6 +831,9 @@ import makeuseof from '@/assets/images/home/make-use-of.svg';
 import thenewyorktimes from '@/assets/images/home/the-new-york-times.svg';
 
 export default {
+  components: {
+    PrivacyBanner,
+  },
   mixins: [sanitizeRedirect],
   data () {
     return {

diff --git a/website/client/src/pages/settings/siteData.vue b/website/client/src/pages/settings/siteData.vue
@@ -16,6 +16,7 @@
       <table class="table">
         <user-id-row />
         <user-data-row />
+        <privacy-preferences-row />
         <tr>
           <td colspan="3">
           </td>
@@ -45,6 +46,7 @@
 <script>
 import UserIdRow from '@/pages/settings/siteDataRows/userIdRow.vue';
 import UserDataRow from '@/pages/settings/siteDataRows/userDataRow.vue';
+import PrivacyPreferencesRow from '@/pages/settings/siteDataRows/privacyPreferencesRow.vue';
 import ApiRow from '@/pages/settings/siteDataRows/apiRow.vue';
 import WebhooksRow from '@/pages/settings/siteDataRows/webhooksRow.vue';
 import DeveloperModeRow from '@/pages/settings/siteDataRows/developerModeRow.vue';
@@ -56,6 +58,7 @@ export default {
     ApiRow,
     UserDataRow,
     UserIdRow,
+    PrivacyPreferencesRow,
   },
   mounted () {
     this.$store.dispatch('common:setTitle', {

diff --git a/website/client/src/pages/settings/siteDataRows/privacyPreferencesRow.vue b/website/client/src/pages/settings/siteDataRows/privacyPreferencesRow.vue
@@ -0,0 +1,97 @@
+<template>
+  <tr>
+    <td colspan="3">
+      <h3
+        v-once
+        class="purple-200 mb-0"
+      >
+        {{ $t('yourPrivacyPreferences') }}
+      </h3>
+      <p
+        v-once
+        class="gray-50"
+        v-html="$t('privacySettingsOverview')"
+      >
+      </p>
+      <div
+        v-once
+        class="d-flex justify-content-center"
+      >
+        <div class="w-66">
+          <div class="mb-28">
+            <div
+              class="d-flex justify-content-between align-items-center"
+            >
+              <div class="settings-label w-50"> {{ $t('strictlyNecessary') }}</div>
+              <div class="settings-label mini green-10"> {{ $t('alwaysActive') }}</div>
+            </div>
+            <small class="gray-100">
+              {{ $t('requiredToRun') }}
+            </small>
+          </div>
+          <div
+            class="d-flex justify-content-between align-items-center"
+          >
+            <div class="settings-label w-50"> {{ $t('performanceAnalytics') }}</div>
+            <toggle-switch
+              v-model="user.preferences.privacy.disableAnalytics"
+              @change="setUserPreference('privacy', 'disableAnalytics')"
+            />
+          </div>
+          <div class="mb-4">
+            <small class="gray-100">
+              {{ $t('usedForSupport') }}
+            </small>
+          </div>
+          <div class="d-flex flex-column justify-content-center">
+            <button class="btn btn-primary mx-auto mb-2">
+              {{ $t('save') }}
+            </button>
+            <a class="mx-auto mb-4">{{ $t('cancel') }}</a>
+          </div>
+        </div>
+      </div>
+    </td>
+  </tr>
+</template>
+
+<style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
+  button {
+    width: fit-content;
+  }
+
+  .mb-28 {
+    margin-bottom: 28px;
+  }
+
+  .settings-label.mini {
+    font-size: 12px;
+    text-align: right;
+  }
+
+  .w-66 {
+    width: 66.7%;
+  }
+</style>
+
+<script>
+import { mapState } from '@/libs/store';
+import ToggleSwitch from '@/components/ui/toggleSwitch.vue';
+import { GenericUserPreferencesMixin } from '@/pages/settings/components/genericUserPreferencesMixin';
+
+export default {
+  mixins: [
+    GenericUserPreferencesMixin,
+  ],
+  components: {
+    ToggleSwitch,
+  },
+  computed: {
+    ...mapState({
+      user: 'user.data',
+    }),
+  },
+};
+</script>
diff --git a/website/client/src/pages/user-main.vue b/website/client/src/pages/user-main.vue
@@ -15,6 +15,7 @@
     <external-link-modal />
     <birthday-modal />
     <template v-if="isUserLoaded">
+      <privacy-banner />
       <chat-banner />
       <damage-paused-banner />
       <gems-promo-banner />
@@ -114,11 +115,12 @@ import { loadProgressBar } from 'axios-progress-bar';
 import birthdayModal from '@/components/news/birthdayModal';
 import AppMenu from '@/components/header/menu';
 import AppHeader from '@/components/header/index';
+import BirthdayBanner from '@/components/header/banners/birthdayBanner';
 import ChatBanner from '@/components/header/banners/chatBanner';
 import DamagePausedBanner from '@/components/header/banners/damagePaused';
 import GemsPromoBanner from '@/components/header/banners/gemsPromo';
 import GiftPromoBanner from '@/components/header/banners/giftPromo';
-import BirthdayBanner from '@/components/header/banners/birthdayBanner';
+import PrivacyBanner from '@/components/header/banners/privacy';
 import AppFooter from '@/components/appFooter';
 import notificationsDisplay from '@/components/notifications';
 import { mapState } from '@/libs/store';
@@ -157,6 +159,7 @@ export default {
     GemsPromoBanner,
     GiftPromoBanner,
     BirthdayBanner,
+    PrivacyBanner,
     notificationsDisplay,
     BuyModal,
     SelectMembersModal,

diff --git a/website/common/locales/en/settings.json b/website/common/locales/en/settings.json
@@ -259,5 +259,15 @@
     "connected": "Connected",
     "connect": "Connect",
     "remove": "Remove",
-    "privacyOverview": "In today's world, it feels like every company is looking to profit from your data. This can make it difficult to find the right app to improve your habits. Habitica uses cookies that store data only to analyze performance, handle support requests, and provide you with the best possible gamified experience. You can change this at any time from your account settings. To learn more, review our <a href='/static/privacy' target='_blank'>Privacy Policy</a>."
+    "privacyOverview": "In today's world, it feels like every company is looking to profit from your data. This can make it difficult to find the right app to improve your habits. Habitica uses cookies that store data only to analyze performance, handle support requests, and provide you with the best possible gamified experience. You can change this at any time from your account settings. To learn more, review our <a href='/static/privacy' target='_blank'>Privacy Policy</a>.",
+    "acceptAllCookies": "Accept All Cookies",
+    "denyNonEssentialCookies": "Deny Non-Essential Cookies",
+    "managePrivacyPreferences": "Manage Your Privacy Preferences",
+    "yourPrivacyPreferences": "Your Privacy Preferences",
+    "privacySettingsOverview": "Habitica uses cookies to analyze performance, handle support requests, and provide you with the best possible gamified experience. To do that, we need to request the following permissions. You can change these at any time from your account settings. To learn more, review our <a href='/static/privacy' target='_blank'>Privacy Policy</a>.",
+    "strictlyNecessary": "Strictly Necessary",
+    "alwaysActive": "Always Active",
+    "requiredToRun": "These are required by our website and apps to run at their best.",
+    "performanceAnalytics": "Performance and Analytics",
+    "usedForSupport": "These are used to improve the user experience, performance, and services of our website and apps. This data is used by our support team when handling requests and bug reports."
 }