From 5227fa9cf439388a54cbe509c84c533dee560f08 Mon Sep 17 00:00:00 2001
From: Avris <andre@avris.it>
Date: Thu, 24 Dec 2020 13:00:37 +0100
Subject: [PATCH] #150 [user] allow disabling gravatar

---
 components/Account.vue                | 35 ++++++++++++++++++---------
 components/Avatar.vue                 |  8 +++---
 migrations/014-removable-gravatar.sql |  7 ++++++
 server/avatar.js                      |  8 +++---
 server/routes/user.js                 |  2 +-
 src/helpers.js                        |  8 +++---
 6 files changed, 45 insertions(+), 23 deletions(-)
 create mode 100644 migrations/014-removable-gravatar.sql

diff --git a/components/Account.vue b/components/Account.vue
index 67ed2141..bd5cf3cd 100644
--- a/components/Account.vue
+++ b/components/Account.vue
@@ -6,18 +6,26 @@
                     <p class="mb-0">
                         <Avatar :user="$user()"/>
                     </p>
-                    <p v-if="$user().avatarSource" class="mt-3">
-                        Gravatar:
-                        <a href="#" @click.prevent="setAvatar(null)">
-                            <Avatar :user="$user()" grav dsize="2rem"/>
-                        </a>
-                    </p>
-                    <p v-else>
-                        <a href="https://gravatar.com" target="_blank" rel="noopener" class="small">
-                            <Icon v="external-link"/>
-                            <T>user.avatar.change</T>
-                        </a>
-                    </p>
+                    <div class="mb-2">
+                        <div v-if="$user().avatarSource !== 'gravatar'" class="mt-3">
+                            Gravatar:
+                            <a href="#" @click.prevent="setAvatar('gravatar')">
+                                <Avatar :user="$user()" :src="gravatar($user())" dsize="2rem"/>
+                            </a>
+                        </div>
+                        <div v-else>
+                            <a href="https://gravatar.com" target="_blank" rel="noopener" class="small">
+                                <Icon v="external-link"/>
+                                <T>user.avatar.change</T>
+                            </a>
+                        </div>
+                        <div v-if="$user().avatarSource">
+                            <a href="#" @click.prevent="setAvatar(null)" class="small">
+                                <Icon v="trash"/>
+                                <T>crud.remove</T>
+                            </a>
+                        </div>
+                    </div>
                     <p v-if="$admin()">
                         <nuxt-link to="/admin" class="badge badge-primary"><T>user.account.admin</T></nuxt-link>
                     </p>
@@ -112,6 +120,7 @@
 
 <script>
     import {socialProviders} from "../src/data";
+    import {gravatar} from "../src/helpers";
 
     export default {
         data() {
@@ -127,6 +136,8 @@
 
                 socialProviders,
                 socialConnections: undefined,
+
+                gravatar,
             }
         },
         async mounted() {
diff --git a/components/Avatar.vue b/components/Avatar.vue
index 48148386..450605ef 100644
--- a/components/Avatar.vue
+++ b/components/Avatar.vue
@@ -1,10 +1,10 @@
 <template>
-    <img :src="grav ? gravatar : (src || user.avatar || gravatar)" alt="" class="rounded-circle"
+    <img :src="src || user.avatar || (user.avatarSource === 'gravatar' ? gravatar(user, size) : fallbackAvatar(user, size))" alt="" class="rounded-circle"
          :style="`width: 100%;max-width: ${dsize};max-height: ${dsize};`"/>
 </template>
 
 <script>
-    import { gravatar } from "../src/helpers";
+    import { fallbackAvatar, gravatar } from "../src/helpers";
 
     export default {
         props: {
@@ -12,11 +12,11 @@
             src: {},
             size: { 'default': 128 },
             dsize: { 'default': '6rem' },
-            grav: { type: Boolean },
         },
         data() {
             return {
-                gravatar: gravatar(this.user, this.size),
+                fallbackAvatar,
+                gravatar,
             };
         },
     }
diff --git a/migrations/014-removable-gravatar.sql b/migrations/014-removable-gravatar.sql
new file mode 100644
index 00000000..6b12a096
--- /dev/null
+++ b/migrations/014-removable-gravatar.sql
@@ -0,0 +1,7 @@
+-- Up
+
+UPDATE users SET avatarSource = 'gravatar' WHERE avatarSource IS NULL;
+
+-- Down
+
+UPDATE users SET avatarSource = NULL WHERE avatarSource = 'gravatar';
diff --git a/server/avatar.js b/server/avatar.js
index a0e183ef..820ea523 100644
--- a/server/avatar.js
+++ b/server/avatar.js
@@ -1,8 +1,10 @@
-import {gravatar, now} from "../src/helpers";
+import {fallbackAvatar, gravatar, now} from "../src/helpers";
 import SQL from "sql-template-strings";
 
 export default async (db, user) => {
-    if (user.avatarSource) {
+    if (user.avatarSource === 'gravatar') {
+        return gravatar(user);
+    } else if (user.avatarSource) {
         const auth = await db.get(SQL`
             SELECT payload FROM authenticators
             WHERE type = ${user.avatarSource}
@@ -14,5 +16,5 @@ export default async (db, user) => {
         }
     }
 
-    return gravatar(user);
+    return fallbackAvatar(user);
 }
diff --git a/server/routes/user.js b/server/routes/user.js
index 5d520f5e..b2d2522b 100644
--- a/server/routes/user.js
+++ b/server/routes/user.js
@@ -65,7 +65,7 @@ const defaultUsername = async (db, email) => {
     }
 }
 
-const fetchOrCreateUser = async (db, user, avatarSource = null) => {
+const fetchOrCreateUser = async (db, user, avatarSource = 'gravatar') => {
     let dbUser = await db.get(SQL`SELECT * FROM users WHERE email = ${normalise(user.email)}`);
     if (!dbUser) {
         dbUser = {
diff --git a/src/helpers.js b/src/helpers.js
index ddb13fe3..a3770628 100644
--- a/src/helpers.js
+++ b/src/helpers.js
@@ -78,10 +78,12 @@ export const makeId = (length, characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghi
     return result;
 }
 
-export const gravatar = (user, size = 128) => {
-    const fallback = `https://avi.avris.it/${size}/${Base64.encode(user.username).replace(/\+/g, '-').replace(/\//g, '_')}.png`;
+export const fallbackAvatar = (user, size = 128) => {
+    return `https://avi.avris.it/${size}/${Base64.encode(user.username).replace(/\+/g, '-').replace(/\//g, '_')}.png`;
+}
 
-    return `https://www.gravatar.com/avatar/${user.emailHash || md5(user.email)}?d=${encodeURIComponent(fallback)}&s=${size}`;
+export const gravatar = (user, size = 128) => {
+    return `https://www.gravatar.com/avatar/${user.emailHash || md5(user.email)}?d=${encodeURIComponent(fallbackAvatar(user, size))}&s=${size}`;
 }
 
 export const dictToList = dict => {