#150 [user] allow disabling gravatar

components/Account.vue

@@ -6,18 +6,26 @@
                     <p class="mb-0">
                         <Avatar :user="$user()"/>
                     </p>
-                    <p v-if="$user().avatarSource" class="mt-3">
+                    <div class="mb-2">
+                        <div v-if="$user().avatarSource !== 'gravatar'" class="mt-3">
                             Gravatar:
-                        <a href="#" @click.prevent="setAvatar(null)">
+                            <a href="#" @click.prevent="setAvatar('gravatar')">
-                            <Avatar :user="$user()" grav dsize="2rem"/>
+                                <Avatar :user="$user()" :src="gravatar($user())" dsize="2rem"/>
                             </a>
-                    </p>
+                        </div>
-                    <p v-else>
+                        <div 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>
+                        <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() {

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,
             };
         },
     }

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';

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);
 }

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 = {

src/helpers.js

@@ -78,10 +78,12 @@ export const makeId = (length, characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghi
     return result;
 }
 
-export const gravatar = (user, size = 128) => {
+export const fallbackAvatar = (user, size = 128) => {
-    const fallback = `https://avi.avris.it/${size}/${Base64.encode(user.username).replace(/\+/g, '-').replace(/\//g, '_')}.png`;
+    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 => {