add cookie consent banner and tests (#163)

* add cookie consent banner and tests

* update docs and app_diff

* Create .env.client.diff

* Update main.wasp.diff

* add migrattion_lock diff again

* small typo fixes

.github/workflows/e2e-tests.yml

@@ -107,6 +107,8 @@ jobs:
           PRO_SUBSCRIPTION_PRICE_ID: ${{ secrets.PRO_SUBSCRIPTION_PRICE_ID }}
           CREDITS_PRICE_ID: ${{ secrets.CREDITS_PRICE_ID }}
           SKIP_EMAIL_VERIFICATION_IN_DEV: true
+          # Client-side env vars
+          REACT_APP_GOOGLE_ANALYTICS_ID: G-H3LSJCK95H
         working-directory: ./template
         run: |
           cd e2e-tests

.gitignore

@@ -1,2 +1,3 @@
 # There is no need to pollute the template with the migrations.
 template/app/migrations/
+.DS_Store

opensaas-sh/app_diff/main.wasp.diff

@@ -1,6 +1,6 @@
 --- template/app/main.wasp
 +++ opensaas-sh/app/main.wasp
-@@ -3,24 +3,27 @@
+@@ -3,24 +3,24 @@
      version: "^0.13.2"
    },
 
@@ -25,21 +25,18 @@
          "<meta name='twitter:image:width' content='800' />",
          "<meta name='twitter:image:height' content='400' />",
          "<meta name='twitter:card' content='summary_large_image' />",
--        // TODO: You can put your analytics scripts below (https://docs.opensaas.sh/guides/analytics/):
--        //   If you are going with Plausible:
+-        // TODO: You can put your Plausible analytics scripts below (https://docs.opensaas.sh/guides/analytics/):
+-        // NOTE: Plausible does not use Cookies, so you can simply add the scripts here.
+-        // Google, on the other hand, does, so you must instead add the script dynamically
+-        // via the Cookie Consent component after the user clicks the "Accept" cookies button.
 -        "<script defer data-domain='<your-site-id>' src='https://plausible.io/js/script.js'></script>",  // for production
 -        "<script defer data-domain='<your-site-id>' src='https://plausible.io/js/script.local.js'></script>",  // for development
--        //   If you are going with Google Analytics:
--        "<!-- Google tag (gtag.js) --><script>...</script>"  // for both production and development
-+
 +        "<script defer data-domain='opensaas.sh' src='https://plausible.apps.twoducks.dev/js/script.js'></script>",
 +        "<script defer data-domain='opensaas.sh' src='https://plausible.apps.twoducks.dev/js/script.local.js'></script>",
-+
-+        "<!-- Google tag (gtag.js) --><script async src='https://www.googletagmanager.com/gtag/js?id=G-H3LSJCK95H'></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-H3LSJCK95H');</script>"
    ],
 
    // 🔐 Auth out of the box! https://wasp-lang.dev/docs/auth/overview
-@@ -32,7 +35,7 @@
+@@ -32,7 +32,7 @@
        email: {
          fromField: {
            name: "Open SaaS App",
@@ -48,7 +45,7 @@
          },
          emailVerification: {
            clientRoute: EmailVerificationRoute,
-@@ -44,16 +47,14 @@
+@@ -44,16 +44,14 @@
          },
          userSignupFields: import { getEmailUserFields } from "@src/server/auth/setUsername.js",
        },
@@ -73,7 +70,7 @@
      },
      onAuthFailedRedirectTo: "/login",
      onAuthSucceededRedirectTo: "/demo-app",
-@@ -76,11 +77,11 @@
+@@ -76,11 +74,11 @@
      // NOTE: "Dummy" provider is just for local development purposes.
      //   Make sure to check the server logs for the email confirmation url (it will not be sent to an address)!
      //   Once you are ready for production, switch to e.g. "SendGrid" or "MailGun" providers. Check out https://docs.opensaas.sh/guides/email-sending/ .
@@ -87,10 +84,17 @@
      },
    },
  }
-@@ -97,6 +98,9 @@
-   username                  String?         @unique
+@@ -93,10 +91,13 @@
+   id                        Int             @id @default(autoincrement())
+   createdAt                 DateTime        @default(now())
+
+-  email                     String?         @unique
+-  username                  String?         @unique
++  email                     String?         
++  username                  String?         
    lastActiveTimestamp       DateTime        @default(now())
-   isAdmin                   Boolean         @default(false)
+-  isAdmin                   Boolean         @default(false)
++  isAdmin                   Boolean         @default(true)
 +  // isMockUser is an extra property for the demo app ensuring that all users can access
 +  // the admin dashboard but won't be able to see the other users' data, only mock user data.
 +  isMockUser                Boolean         @default(false)

opensaas-sh/app_diff/migrations/20240605151848_remove_has_paid/migration.sql.diff

@@ -0,0 +1,11 @@
+--- template/app/migrations/20240605151848_remove_has_paid/migration.sql
++++ opensaas-sh/app/migrations/20240605151848_remove_has_paid/migration.sql
+@@ -0,0 +1,8 @@
++/*
++  Warnings:
++
++  - You are about to drop the column `hasPaid` on the `User` table. All the data in the column will be lost.
++
++*/
++-- AlterTable
++ALTER TABLE "User" DROP COLUMN "hasPaid";

opensaas-sh/app_diff/src/server/auth/setUsername.ts.diff

@@ -0,0 +1,26 @@
+--- template/app/src/server/auth/setUsername.ts
++++ opensaas-sh/app/src/server/auth/setUsername.ts
+@@ -4,7 +4,6 @@
+
+ export const getEmailUserFields = defineUserSignupFields({
+   username: (data: any) => data.email,
+-  isAdmin: (data: any) => adminEmails.includes(data.email),
+   email: (data: any) => data.email,
+ });
+
+@@ -13,7 +12,6 @@
+   // instead of ["user"] and access args.profile.username instead
+   email: (data: any) => data.profile.emails[0].email,
+   username: (data: any) => data.profile.login,
+-  isAdmin: (data: any) => adminEmails.includes(data.profile.emails[0].email),
+ });
+
+ export function getGitHubAuthConfig() {
+@@ -25,7 +23,6 @@
+ export const getGoogleUserFields = defineUserSignupFields({
+   email: (data: any) => data.profile.email,
+   username: (data: any) => data.profile.name,
+-  isAdmin: (data: any) => adminEmails.includes(data.profile.email),
+ });
+
+ export function getGoogleAuthConfig() {

opensaas-sh/blog/astro.config.mjs

@@ -67,6 +67,7 @@ export default defineConfig({
             { label: 'SEO', link: '/guides/seo/' },
             { label: 'Email Sending', link: '/guides/email-sending/' },
             { label: 'File Uploading', link: '/guides/file-uploading/' },
+            { label: 'Cookie Consent', link: '/guides/cookie-consent/' },
             { label: 'Deploying', link: '/guides/deploying/' },
           ],
         },

opensaas-sh/blog/src/content/docs/guides/analytics.md

@@ -7,9 +7,9 @@ banner:
 ---
 This guide will show you how to integrate analytics for your app. You can choose between [Google Analytics](#google-analytics) and [Plausible](#plausible).
 
-Google Analytics is free, but tends to be more cumbersome to use.
+Google Analytics is free, but uses cookies, so you'll probably want/need to implement the [Cookie Consent Modal](./cookie-consent.md) when using it.
 
-Plausible is an open-source, privacy-friendly alternative to Google Analytics. It's also easier to use than Google if you use their hosted service, which is a paid feature. But, it is completely free if you want to self-host it, although this comes with some additional setup steps.
+Plausible is an open-source, privacy-friendly alternative to Google Analytics. **You DO NOT have to use the cookie consent modal** with Plausible, as it does not use cookies. It's also easier to use than Google if you use their hosted service, but be aware it is a paid feature. It is completely free if you want to self-host it, although this comes with some additional setup steps.
 
 If you're looking to add analytics to your blog, you can follow the [Adding Analytics to your Blog](#adding-analytics-to-your-blog) section at the end of this guide.
 
@@ -40,6 +40,9 @@ app OpenSaaS {
 
 Go back to your Plausible dashboard, click on your username in the top right, and click on the `Settings` tab. Scroll down, find your API key and paste it into your `.env.server` file under the `PLAUSIBLE_API_KEY` variable.
 
+:::note[No Cookies]
+Plausible does not use cookies, so you don't need to add it to your [Cookie Consent Modal](./cookie-consent.md), hence the script can be added directly to `app.head` in your `main.wasp` file.
+:::
 
 ### Self-hosted Plausible
 
@@ -58,18 +61,15 @@ As a completely free, open-source project, we appreciate any help 🙏
 
 After you sign up for [Google analytics](https://analytics.google.com/), go to your `Admin` panel in the bottom of the left sidebar and then create a "Property" for your app.
 
-Once you've completed the steps to create a new Property, some Installation Instructions will pop up. Select `install manually` and copy and paste the Google script tag into the `main.wasp` file's head section. 
+Once you've completed the steps to create a new Property, some Installation Instructions will pop up. Select `install manually` where you should see a string that looks like this:
 
-```js {7}
-app OpenSaaS {
-  wasp: {
-    version: "^0.13.0"
-  },
-  title: "My SaaS App",
-  head: [
-        "<your google analytics script tag here>",
-  ],
-  //...
+```sh "<your-google-analytics-id>"
+ https://www.googletagmanager.com/gtag/js?id=<your-google-analytics-id>
+```
+and copy and paste the Google Analytics ID into your `.env.client` file to get it working with the [Cookie Consent Modal](./cookie-consent.md) provided with this template:
+
+```sh title=".env.client"
+REACT_APP_GOOGLE_ANALYTICS_ID=<your-google-analytics-id> # e.g. G-1234567890
 ```
 
 :::tip[noscript]