#54 user accounts - avatars

components/Account.vue

@@ -1,33 +1,53 @@
 <template>
     <section>
-        <Alert type="danger" :message="error"/>
+        <div class="card mb-3">
+            <div class="card-body d-flex flex-column flex-md-row">
+                <div class="mx-2 text-center d-flex flex-row flex-md-column">
+                    <p>
+                        <Avatar :user="$user()"/>
+                    </p>
+                    <p class="text-center flex-grow-1">
+                        <a href="https://gravatar.com" target="_blank" rel="noopener" class="small">
+                            <T>user.avatar.change</T>
+                            <br/>
+                            Gravatar.com
+                        </a>
+                    </p>
+                </div>
+                <div class="mx-2 flex-grow-1">
+                    <Alert type="danger" :message="error"/>
 
-        <form @submit.prevent="changeUsername">
-            <h3 class="h6"><T>user.account.changeUsername.header</T></h3>
-            <div class="input-group mb-3">
-                <input type="text" class="form-control" v-model="username"
-                       required minlength="4" maxlength="16"/>
-                <div class="input-group-append">
-                    <button class="btn btn-outline-primary">
-                        <T>user.account.changeUsername.action</T>
-                    </button>
+                    <form @submit.prevent="changeUsername">
+                        <h3 class="h6"><T>user.account.changeUsername.header</T></h3>
+                        <div class="input-group mb-3">
+                            <input type="text" class="form-control" v-model="username"
+                                   required minlength="4" maxlength="16"/>
+                            <div class="input-group-append">
+                                <button class="btn btn-outline-primary">
+                                    <T>user.account.changeUsername.action</T>
+                                </button>
+                            </div>
+                        </div>
+                    </form>
+
+                    <div>
+                        <h3 class="h6"><T>user.account.changeEmail.header</T></h3>
+                        <p>{{ email }}</p>
+                    </div>
+
+                    <p v-if="$admin()">
+                        <span class="badge badge-primary"><T>user.account.admin</T></span>
+                    </p>
                 </div>
             </div>
-        </form>
-
-        <div>
-            <h3 class="h6"><T>user.account.changeEmail.header</T></h3>
-            <p>{{ email }}</p>
         </div>
 
-        <p v-if="$admin()">
-            <span class="badge badge-primary"><T>user.account.admin</T></span>
+        <p>
+            <button class="btn btn-outline-secondary btn-sm" @click="logout">
+                <Icon v="sign-out"/>
+                <T>user.logout</T>
+            </button>
         </p>
-
-        <button class="btn btn-outline-secondary btn-sm" @click="logout">
-            <Icon v="sign-out"/>
-            <T>user.logout</T>
-        </button>
     </section>
 </template>
 
@@ -63,7 +83,7 @@
             logout() {
                 this.$store.commit('setToken', null);
                 this.$cookies.removeAll();
-            }
+            },
         },
     }
 </script>

components/Avatar.vue

@@ -0,0 +1,30 @@
+<template>
+    <img :src="gravatar(user.email)" alt="" class="rounded-circle"/>
+</template>
+
+<script>
+    import md5 from 'js-md5';
+    import { Base64 } from 'js-base64';
+
+    export default {
+        props: {
+            user: { required: true },
+        },
+        methods: {
+            gravatar(email, size = 128) {
+                const fallback = `https://avi.avris.it/${size}/${Base64.encode(email).replace(/\+/g, '-').replace(/\//g, '_')}.png`;
+
+                return `https://www.gravatar.com/avatar/${md5(email)}?d=${encodeURIComponent(fallback)}&s=${size}`;
+            }
+        },
+    }
+</script>
+
+<style lang="scss" scoped>
+    $size: 6rem;
+    img {
+        width: 100%;
+        max-width: $size;
+        max-height: $size;
+    }
+</style>

locale/pl/translations.suml

@@ -607,6 +607,9 @@ user:
             action: 'Zmień'
         admin: 'Adminię'
     logout: 'Wyloguj'
+    avatar:
+        header: 'Avatar'
+        change: 'Zmień avatar na'
 
 share: 'Udostępnij'
 

package.json

@@ -17,6 +17,8 @@
     "canvas": "^2.6.1",
     "cookie-universal-nuxt": "^2.1.4",
     "dotenv": "^8.2.0",
+    "js-base64": "^3.5.2",
+    "js-md5": "^0.7.3",
     "jsonwebtoken": "^8.5.1",
     "mailer": "^0.6.7",
     "nuxt": "^2.13.0",

yarn.lock

@@ -4836,6 +4836,16 @@ jiti@^0.1.11:
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-0.1.11.tgz#8b27b92e4c0866b3c8c91945c55a99a1db17a782"
   integrity sha512-zSPegl+ageMLSYcq1uAZa6V56pX2GbNl/eU3Or7PFHu10a2YhLAXj5fnHJGd6cHZTalSR8zXGH8WmyuyufMhLA==
 
+js-base64@^3.5.2:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-3.5.2.tgz#3cc800e4f10812b55fb5ec53e7cabaef35dc6d3c"
+  integrity sha512-VG2qfvV5rEQIVxq9UmAVyWIaOdZGt9M16BLu8vFkyWyhv709Hyg4nKUb5T+Ru+HmAr9RHdF+kQDKAhbJlcdKeQ==
+
+js-md5@^0.7.3:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/js-md5/-/js-md5-0.7.3.tgz#b4f2fbb0b327455f598d6727e38ec272cd09c3f2"
+  integrity sha512-ZC41vPSTLKGwIRjqDh8DfXoCrdQIyBgspJVPXHBGu4nZlAEvG3nf+jO9avM9RmLiGakg7vz974ms99nEV0tmTQ==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"