Merge pull request #398 from appwrite/avatar-initials

Avatar initials

CHANGES.md

@@ -5,6 +5,7 @@
 - New route in Locale API to fetch a list of languages
 - Added option to force HTTPS connection to the Appwrite server (_APP_OPTIONS_FORCE_HTTPS)
 - Added Google Fonts to Appwrite for offline availability
+- Added a new route in the Avatars API to get user initials avatar
 
 ## Bug Fixes
 

app/controllers/api/avatars.php

@@ -16,6 +16,7 @@ use BaconQrCode\Renderer\Image\ImagickImageBackEnd;
 use BaconQrCode\Renderer\RendererStyle\RendererStyle;
 use BaconQrCode\Writer;
 use Utopia\Config\Config;
+use Utopia\Validator\HexColor;
 
 include_once __DIR__ . '/../shared/api.php';
 
@@ -385,7 +386,83 @@ $utopia->get('/v1/avatars/qr')
             $response
                 ->addHeader('Expires', date('D, d M Y H:i:s', time() + (60 * 60 * 24 * 45)).' GMT') // 45 days cache
                 ->setContentType('image/png')
-                ->send('', $writer->writeString($text))
+                ->send($writer->writeString($text))
+            ;
+        }
+    );
+
+$utopia->get('/v1/avatars/initials')
+    ->desc('Get User Initials')
+    ->param('name', '', function () { return new Text(512); }, 'Full Name. When empty, current user name or email will be used.', true)
+    ->param('width', 500, function () { return new Range(0, 2000); }, 'Image width. Pass an integer between 0 to 2000. Defaults to 100.', true)
+    ->param('height', 500, function () { return new Range(0, 2000); }, 'Image height. Pass an integer between 0 to 2000. Defaults to 100.', true)
+    ->param('color', '', function () { return new HexColor(); }, 'Changes text color. By default a random color will be picked and stay will persistent to the given name.', true)
+    ->param('background', '', function () { return new HexColor(); }, 'Changes background color. By default a random color will be picked and stay will persistent to the given name.', true)
+    ->label('scope', 'avatars.read')
+    ->label('sdk.platform', [APP_PLATFORM_CLIENT, APP_PLATFORM_SERVER])
+    ->label('sdk.namespace', 'avatars')
+    ->label('sdk.method', 'getInitials')
+    ->label('sdk.methodType', 'location')
+    ->label('sdk.description', '/docs/references/avatars/get-initials.md')
+    ->action(
+        function ($name, $width, $height, $color, $background) use ($response, $user) {
+            $themes = [
+                ['color' => '#27005e', 'background' => '#e1d2f6'], // VIOLET
+                ['color' => '#5e2700', 'background' => '#f3d9c6'], // ORANGE
+                ['color' => '#006128', 'background' => '#c9f3c6'], // GREEN
+                ['color' => '#580061', 'background' => '#f2d1f5'], // FUSCHIA
+                ['color' => '#00365d', 'background' => '#c6e1f3'], // BLUE
+                ['color' => '#00075c', 'background' => '#d2d5f6'], // INDIGO
+                ['color' => '#610038', 'background' => '#f5d1e6'], // PINK
+                ['color' => '#386100', 'background' => '#dcf1bd'], // LIME
+                ['color' => '#615800', 'background' => '#f1ecba'], // YELLOW
+                ['color' => '#610008', 'background' => '#f6d2d5'] // RED
+            ];
+
+            $rand = rand(0, count($themes)-1);
+
+            $name = (!empty($name)) ? $name : $user->getAttribute('name', $user->getAttribute('email', ''));
+            $words = explode(' ', strtoupper($name));
+            $initials = null;
+            $code = 0;
+
+            foreach ($words as $key => $w) {
+                $initials .= (isset($w[0])) ? $w[0] : '';
+                $code += (isset($w[0])) ? ord($w[0]) : 0;
+
+                if($key == 1) {
+                    break;
+                }
+            }
+
+            $length = count($words);
+            $rand = substr($code,-1);
+            $background = (!empty($background)) ? '#'.$background : $themes[$rand]['background'];
+            $color = (!empty($color)) ? '#'.$color : $themes[$rand]['color'];
+
+            $image = new \Imagick();
+            $draw = new \ImagickDraw();
+            $fontSize = min($width, $height) / 2;
+            
+            $draw->setFont(__DIR__."/../../../public/fonts/poppins-v9-latin-600.ttf");
+            $image->setFont(__DIR__."/../../../public/fonts/poppins-v9-latin-600.ttf");
+
+            $draw->setFillColor(new \ImagickPixel($color));
+            $draw->setFontSize($fontSize);
+            
+            $draw->setTextAlignment(\Imagick::ALIGN_CENTER);
+            $draw->annotation($width / 1.97, ($height / 2) + ($fontSize / 3), $initials);
+            
+            $image->newImage($width, $height, $background);
+            $image->setImageFormat("png");
+            $image->drawImage($draw);
+
+            //$image->setImageCompressionQuality(9 - round(($quality / 100) * 9));
+
+            $response
+                ->addHeader('Expires', date('D, d M Y H:i:s', time() + (60 * 60 * 24 * 45)).' GMT') // 45 days cache
+                ->setContentType('image/png')
+                ->send($image->getImageBlob())
             ;
         }
     );

docs/references/avatars/get-initials.md

@@ -0,0 +1,3 @@
+Use this endpoint to show your user initials avatar icon on your website or app. By default, this route will try to print your logged-in user name or email initials. You can also overwrite the user name if you pass the 'name' parameter. If no name is given and no user is logged, an empty avatar will be returned.
+
+You can use the color and background params to change the avatar colors. By default, a random theme will be selected. The random theme will persist for the user's initials when reloading the same theme will always return for the same initials.

public/dist/scripts/app-all.js

@@ -2551,15 +2551,10 @@ return k;}
 function J(k){k=k.replace(/rn/g,"n");let d="";for(let F=0;F<k.length;F++){let x=k.charCodeAt(F);if(x<128){d+=String.fromCharCode(x);}else{if(x>127&&x<2048){d+=String.fromCharCode((x>>6)|192);d+=String.fromCharCode((x&63)|128);}else{d+=String.fromCharCode((x>>12)|224);d+=String.fromCharCode(((x>>6)&63)|128);d+=String.fromCharCode((x&63)|128);}}}
 return d;}
 let C=Array();let P,h,E,v,g,Y,X,W,V;let S=7,Q=12,N=17,M=22;let A=5,z=9,y=14,w=20;let o=4,m=11,l=16,j=23;let U=6,T=10,R=15,O=21;s=J(s);C=e(s);Y=1732584193;X=4023233417;W=2562383102;V=271733878;for(P=0;P<C.length;P+=16){h=Y;E=X;v=W;g=V;Y=u(Y,X,W,V,C[P+0],S,3614090360);V=u(V,Y,X,W,C[P+1],Q,3905402710);W=u(W,V,Y,X,C[P+2],N,606105819);X=u(X,W,V,Y,C[P+3],M,3250441966);Y=u(Y,X,W,V,C[P+4],S,4118548399);V=u(V,Y,X,W,C[P+5],Q,1200080426);W=u(W,V,Y,X,C[P+6],N,2821735955);X=u(X,W,V,Y,C[P+7],M,4249261313);Y=u(Y,X,W,V,C[P+8],S,1770035416);V=u(V,Y,X,W,C[P+9],Q,2336552879);W=u(W,V,Y,X,C[P+10],N,4294925233);X=u(X,W,V,Y,C[P+11],M,2304563134);Y=u(Y,X,W,V,C[P+12],S,1804603682);V=u(V,Y,X,W,C[P+13],Q,4254626195);W=u(W,V,Y,X,C[P+14],N,2792965006);X=u(X,W,V,Y,C[P+15],M,1236535329);Y=f(Y,X,W,V,C[P+1],A,4129170786);V=f(V,Y,X,W,C[P+6],z,3225465664);W=f(W,V,Y,X,C[P+11],y,643717713);X=f(X,W,V,Y,C[P+0],w,3921069994);Y=f(Y,X,W,V,C[P+5],A,3593408605);V=f(V,Y,X,W,C[P+10],z,38016083);W=f(W,V,Y,X,C[P+15],y,3634488961);X=f(X,W,V,Y,C[P+4],w,3889429448);Y=f(Y,X,W,V,C[P+9],A,568446438);V=f(V,Y,X,W,C[P+14],z,3275163606);W=f(W,V,Y,X,C[P+3],y,4107603335);X=f(X,W,V,Y,C[P+8],w,1163531501);Y=f(Y,X,W,V,C[P+13],A,2850285829);V=f(V,Y,X,W,C[P+2],z,4243563512);W=f(W,V,Y,X,C[P+7],y,1735328473);X=f(X,W,V,Y,C[P+12],w,2368359562);Y=D(Y,X,W,V,C[P+5],o,4294588738);V=D(V,Y,X,W,C[P+8],m,2272392833);W=D(W,V,Y,X,C[P+11],l,1839030562);X=D(X,W,V,Y,C[P+14],j,4259657740);Y=D(Y,X,W,V,C[P+1],o,2763975236);V=D(V,Y,X,W,C[P+4],m,1272893353);W=D(W,V,Y,X,C[P+7],l,4139469664);X=D(X,W,V,Y,C[P+10],j,3200236656);Y=D(Y,X,W,V,C[P+13],o,681279174);V=D(V,Y,X,W,C[P+0],m,3936430074);W=D(W,V,Y,X,C[P+3],l,3572445317);X=D(X,W,V,Y,C[P+6],j,76029189);Y=D(Y,X,W,V,C[P+9],o,3654602809);V=D(V,Y,X,W,C[P+12],m,3873151461);W=D(W,V,Y,X,C[P+15],l,530742520);X=D(X,W,V,Y,C[P+2],j,3299628645);Y=t(Y,X,W,V,C[P+0],U,4096336452);V=t(V,Y,X,W,C[P+7],T,1126891415);W=t(W,V,Y,X,C[P+14],R,2878612391);X=t(X,W,V,Y,C[P+5],O,4237533241);Y=t(Y,X,W,V,C[P+12],U,1700485571);V=t(V,Y,X,W,C[P+3],T,2399980690);W=t(W,V,Y,X,C[P+10],R,4293915773);X=t(X,W,V,Y,C[P+1],O,2240044497);Y=t(Y,X,W,V,C[P+8],U,1873313359);V=t(V,Y,X,W,C[P+15],T,4264355552);W=t(W,V,Y,X,C[P+6],R,2734768916);X=t(X,W,V,Y,C[P+13],O,1309151649);Y=t(Y,X,W,V,C[P+4],U,4149444226);V=t(V,Y,X,W,C[P+11],T,3174756917);W=t(W,V,Y,X,C[P+2],R,718787259);X=t(X,W,V,Y,C[P+9],O,3951481745);Y=K(Y,h);X=K(X,E);W=K(W,v);V=K(V,g);}
-let i=B(Y)+B(X)+B(W)+B(V);return i.toLowerCase();};let size=element.dataset["size"]||80;let email=$value.email||$value||"";let name=$value.name||$value||"";name=(typeof name!=='string')?'':name;let theme=name.split("").map(char=>char.charCodeAt(0)).reduce((a,b)=>a+b,0).toString();let themes=[{color:"27005e",background:"e1d2f6"},{color:"5e2700",background:"f3d9c6"},{color:"006128",background:"c9f3c6"},{color:"580061",background:"f2d1f5"},{color:"00365d",background:"c6e1f3"},{color:"00075c",background:"d2d5f6"},{color:"610038",background:"f5d1e6"},{color:"386100",background:"dcf1bd"},{color:"615800",background:"f1ecba"},{color:"610008",background:"f6d2d5"}];name=name.split(" ").map(function(n){if(!isNaN(parseFloat(n))&&isFinite(n)){return"";}
+let i=B(Y)+B(X)+B(W)+B(V);return i.toLowerCase();};let size=element.dataset["size"]||80;let email=$value.email||$value||"";let name=$value.name||$value||"";name=(typeof name!=='string')?'--':name;let def="/v1/avatars/initials?project=console"+"&name="+
-return n[0];}).join("")||"--";let background=themes[theme[theme.length-1]]["background"];let color=themes[theme[theme.length-1]]["color"];let def="https://ui-avatars.com/api/"+
+encodeURIComponent(name)+"&width="+
-encodeURIComponent(name)+"/"+
+size+"&height="+
-size+"/"+
+size;return def;}).add("selectedCollection",function($value,router){return $value===router.params.collectionId?"selected":"";}).add("selectedDocument",function($value,router){return $value===router.params.documentId?"selected":"";}).add("localeString",function($value){$value=parseInt($value);return!Number.isNaN($value)?$value.toLocaleString():"";}).add("date",function($value,date){return date.format("Y-m-d",$value);}).add("date-time",function($value,date){return date.format("Y-m-d H:i",$value);}).add("date-text",function($value,date){return date.format("d M Y",$value);}).add("ms2hum",function($value){let temp=$value;const years=Math.floor(temp/31536000),days=Math.floor((temp%=31536000)/86400),hours=Math.floor((temp%=86400)/3600),minutes=Math.floor((temp%=3600)/60),seconds=temp%60;if(days||hours||seconds||minutes){return((years?years+"y ":"")+
-encodeURIComponent(background)+"/"+
-encodeURIComponent(color);return("//www.gravatar.com/avatar/"+
-MD5(email)+".jpg?s="+
-size+"&d="+
-encodeURIComponent(def));}).add("selectedCollection",function($value,router){return $value===router.params.collectionId?"selected":"";}).add("selectedDocument",function($value,router){return $value===router.params.documentId?"selected":"";}).add("localeString",function($value){$value=parseInt($value);return!Number.isNaN($value)?$value.toLocaleString():"";}).add("date",function($value,date){return date.format("Y-m-d",$value);}).add("date-time",function($value,date){return date.format("Y-m-d H:i",$value);}).add("date-text",function($value,date){return date.format("d M Y",$value);}).add("ms2hum",function($value){let temp=$value;const years=Math.floor(temp/31536000),days=Math.floor((temp%=31536000)/86400),hours=Math.floor((temp%=86400)/3600),minutes=Math.floor((temp%=3600)/60),seconds=temp%60;if(days||hours||seconds||minutes){return((years?years+"y ":"")+
 (days?days+"d ":"")+
 (hours?hours+"h ":"")+
 (minutes?minutes+"m ":"")+

public/dist/scripts/app.js

@@ -267,15 +267,10 @@ return k;}
 function J(k){k=k.replace(/rn/g,"n");let d="";for(let F=0;F<k.length;F++){let x=k.charCodeAt(F);if(x<128){d+=String.fromCharCode(x);}else{if(x>127&&x<2048){d+=String.fromCharCode((x>>6)|192);d+=String.fromCharCode((x&63)|128);}else{d+=String.fromCharCode((x>>12)|224);d+=String.fromCharCode(((x>>6)&63)|128);d+=String.fromCharCode((x&63)|128);}}}
 return d;}
 let C=Array();let P,h,E,v,g,Y,X,W,V;let S=7,Q=12,N=17,M=22;let A=5,z=9,y=14,w=20;let o=4,m=11,l=16,j=23;let U=6,T=10,R=15,O=21;s=J(s);C=e(s);Y=1732584193;X=4023233417;W=2562383102;V=271733878;for(P=0;P<C.length;P+=16){h=Y;E=X;v=W;g=V;Y=u(Y,X,W,V,C[P+0],S,3614090360);V=u(V,Y,X,W,C[P+1],Q,3905402710);W=u(W,V,Y,X,C[P+2],N,606105819);X=u(X,W,V,Y,C[P+3],M,3250441966);Y=u(Y,X,W,V,C[P+4],S,4118548399);V=u(V,Y,X,W,C[P+5],Q,1200080426);W=u(W,V,Y,X,C[P+6],N,2821735955);X=u(X,W,V,Y,C[P+7],M,4249261313);Y=u(Y,X,W,V,C[P+8],S,1770035416);V=u(V,Y,X,W,C[P+9],Q,2336552879);W=u(W,V,Y,X,C[P+10],N,4294925233);X=u(X,W,V,Y,C[P+11],M,2304563134);Y=u(Y,X,W,V,C[P+12],S,1804603682);V=u(V,Y,X,W,C[P+13],Q,4254626195);W=u(W,V,Y,X,C[P+14],N,2792965006);X=u(X,W,V,Y,C[P+15],M,1236535329);Y=f(Y,X,W,V,C[P+1],A,4129170786);V=f(V,Y,X,W,C[P+6],z,3225465664);W=f(W,V,Y,X,C[P+11],y,643717713);X=f(X,W,V,Y,C[P+0],w,3921069994);Y=f(Y,X,W,V,C[P+5],A,3593408605);V=f(V,Y,X,W,C[P+10],z,38016083);W=f(W,V,Y,X,C[P+15],y,3634488961);X=f(X,W,V,Y,C[P+4],w,3889429448);Y=f(Y,X,W,V,C[P+9],A,568446438);V=f(V,Y,X,W,C[P+14],z,3275163606);W=f(W,V,Y,X,C[P+3],y,4107603335);X=f(X,W,V,Y,C[P+8],w,1163531501);Y=f(Y,X,W,V,C[P+13],A,2850285829);V=f(V,Y,X,W,C[P+2],z,4243563512);W=f(W,V,Y,X,C[P+7],y,1735328473);X=f(X,W,V,Y,C[P+12],w,2368359562);Y=D(Y,X,W,V,C[P+5],o,4294588738);V=D(V,Y,X,W,C[P+8],m,2272392833);W=D(W,V,Y,X,C[P+11],l,1839030562);X=D(X,W,V,Y,C[P+14],j,4259657740);Y=D(Y,X,W,V,C[P+1],o,2763975236);V=D(V,Y,X,W,C[P+4],m,1272893353);W=D(W,V,Y,X,C[P+7],l,4139469664);X=D(X,W,V,Y,C[P+10],j,3200236656);Y=D(Y,X,W,V,C[P+13],o,681279174);V=D(V,Y,X,W,C[P+0],m,3936430074);W=D(W,V,Y,X,C[P+3],l,3572445317);X=D(X,W,V,Y,C[P+6],j,76029189);Y=D(Y,X,W,V,C[P+9],o,3654602809);V=D(V,Y,X,W,C[P+12],m,3873151461);W=D(W,V,Y,X,C[P+15],l,530742520);X=D(X,W,V,Y,C[P+2],j,3299628645);Y=t(Y,X,W,V,C[P+0],U,4096336452);V=t(V,Y,X,W,C[P+7],T,1126891415);W=t(W,V,Y,X,C[P+14],R,2878612391);X=t(X,W,V,Y,C[P+5],O,4237533241);Y=t(Y,X,W,V,C[P+12],U,1700485571);V=t(V,Y,X,W,C[P+3],T,2399980690);W=t(W,V,Y,X,C[P+10],R,4293915773);X=t(X,W,V,Y,C[P+1],O,2240044497);Y=t(Y,X,W,V,C[P+8],U,1873313359);V=t(V,Y,X,W,C[P+15],T,4264355552);W=t(W,V,Y,X,C[P+6],R,2734768916);X=t(X,W,V,Y,C[P+13],O,1309151649);Y=t(Y,X,W,V,C[P+4],U,4149444226);V=t(V,Y,X,W,C[P+11],T,3174756917);W=t(W,V,Y,X,C[P+2],R,718787259);X=t(X,W,V,Y,C[P+9],O,3951481745);Y=K(Y,h);X=K(X,E);W=K(W,v);V=K(V,g);}
-let i=B(Y)+B(X)+B(W)+B(V);return i.toLowerCase();};let size=element.dataset["size"]||80;let email=$value.email||$value||"";let name=$value.name||$value||"";name=(typeof name!=='string')?'':name;let theme=name.split("").map(char=>char.charCodeAt(0)).reduce((a,b)=>a+b,0).toString();let themes=[{color:"27005e",background:"e1d2f6"},{color:"5e2700",background:"f3d9c6"},{color:"006128",background:"c9f3c6"},{color:"580061",background:"f2d1f5"},{color:"00365d",background:"c6e1f3"},{color:"00075c",background:"d2d5f6"},{color:"610038",background:"f5d1e6"},{color:"386100",background:"dcf1bd"},{color:"615800",background:"f1ecba"},{color:"610008",background:"f6d2d5"}];name=name.split(" ").map(function(n){if(!isNaN(parseFloat(n))&&isFinite(n)){return"";}
+let i=B(Y)+B(X)+B(W)+B(V);return i.toLowerCase();};let size=element.dataset["size"]||80;let email=$value.email||$value||"";let name=$value.name||$value||"";name=(typeof name!=='string')?'--':name;let def="/v1/avatars/initials?project=console"+"&name="+
-return n[0];}).join("")||"--";let background=themes[theme[theme.length-1]]["background"];let color=themes[theme[theme.length-1]]["color"];let def="https://ui-avatars.com/api/"+
+encodeURIComponent(name)+"&width="+
-encodeURIComponent(name)+"/"+
+size+"&height="+
-size+"/"+
+size;return def;}).add("selectedCollection",function($value,router){return $value===router.params.collectionId?"selected":"";}).add("selectedDocument",function($value,router){return $value===router.params.documentId?"selected":"";}).add("localeString",function($value){$value=parseInt($value);return!Number.isNaN($value)?$value.toLocaleString():"";}).add("date",function($value,date){return date.format("Y-m-d",$value);}).add("date-time",function($value,date){return date.format("Y-m-d H:i",$value);}).add("date-text",function($value,date){return date.format("d M Y",$value);}).add("ms2hum",function($value){let temp=$value;const years=Math.floor(temp/31536000),days=Math.floor((temp%=31536000)/86400),hours=Math.floor((temp%=86400)/3600),minutes=Math.floor((temp%=3600)/60),seconds=temp%60;if(days||hours||seconds||minutes){return((years?years+"y ":"")+
-encodeURIComponent(background)+"/"+
-encodeURIComponent(color);return("//www.gravatar.com/avatar/"+
-MD5(email)+".jpg?s="+
-size+"&d="+
-encodeURIComponent(def));}).add("selectedCollection",function($value,router){return $value===router.params.collectionId?"selected":"";}).add("selectedDocument",function($value,router){return $value===router.params.documentId?"selected":"";}).add("localeString",function($value){$value=parseInt($value);return!Number.isNaN($value)?$value.toLocaleString():"";}).add("date",function($value,date){return date.format("Y-m-d",$value);}).add("date-time",function($value,date){return date.format("Y-m-d H:i",$value);}).add("date-text",function($value,date){return date.format("d M Y",$value);}).add("ms2hum",function($value){let temp=$value;const years=Math.floor(temp/31536000),days=Math.floor((temp%=31536000)/86400),hours=Math.floor((temp%=86400)/3600),minutes=Math.floor((temp%=3600)/60),seconds=temp%60;if(days||hours||seconds||minutes){return((years?years+"y ":"")+
 (days?days+"d ":"")+
 (hours?hours+"h ":"")+
 (minutes?minutes+"m ":"")+

public/scripts/filters.js

@@ -3,7 +3,7 @@ window.ls.filter
     if (!$value) {
       return "";
     }
-    
+
     // MD5 (Message-Digest Algorithm) by WebToolkit
     let MD5 = function(s) {
       function L(k, d) {
@@ -216,59 +216,68 @@ window.ls.filter
     let email = $value.email || $value || "";
     let name = $value.name || $value || "";
     
-    name = (typeof name !== 'string') ? '' : name;
+    name = (typeof name !== 'string') ? '--' : name;
 
-    let theme = name
+    // let theme = name
-      .split("")
+    //   .split("")
-      .map(char => char.charCodeAt(0))
+    //   .map(char => char.charCodeAt(0))
-      .reduce((a, b) => a + b, 0)
+    //   .reduce((a, b) => a + b, 0)
-      .toString();
+    //   .toString();
-    let themes = [
+    // let themes = [
-      { color: "27005e", background: "e1d2f6" }, // VIOLET
+    //   { color: "27005e", background: "e1d2f6" }, // VIOLET
-      { color: "5e2700", background: "f3d9c6" }, // ORANGE
+    //   { color: "5e2700", background: "f3d9c6" }, // ORANGE
-      { color: "006128", background: "c9f3c6" }, // GREEN
+    //   { color: "006128", background: "c9f3c6" }, // GREEN
-      { color: "580061", background: "f2d1f5" }, // FUSCHIA
+    //   { color: "580061", background: "f2d1f5" }, // FUSCHIA
-      { color: "00365d", background: "c6e1f3" }, // BLUE
+    //   { color: "00365d", background: "c6e1f3" }, // BLUE
-      { color: "00075c", background: "d2d5f6" }, // INDIGO
+    //   { color: "00075c", background: "d2d5f6" }, // INDIGO
-      { color: "610038", background: "f5d1e6" }, // PINK
+    //   { color: "610038", background: "f5d1e6" }, // PINK
-      { color: "386100", background: "dcf1bd" }, // LIME
+    //   { color: "386100", background: "dcf1bd" }, // LIME
-      { color: "615800", background: "f1ecba" }, // YELLOW
+    //   { color: "615800", background: "f1ecba" }, // YELLOW
-      { color: "610008", background: "f6d2d5" } // RED
+    //   { color: "610008", background: "f6d2d5" } // RED
-    ];
+    // ];
 
-    name =
+    // name =
-      name
+    //   name
-        .split(" ")
+    //     .split(" ")
-        .map(function(n) {
+    //     .map(function(n) {
-          if (!isNaN(parseFloat(n)) && isFinite(n)) {
+    //       if (!isNaN(parseFloat(n)) && isFinite(n)) {
-            return "";
+    //         return "";
-          }
+    //       }
 
-          return n[0];
+    //       return n[0];
-        })
+    //     })
-        .join("") || "--";
+    //     .join("") || "--";
 
-    let background = themes[theme[theme.length - 1]]["background"];
+    // let background = themes[theme[theme.length - 1]]["background"];
-    let color = themes[theme[theme.length - 1]]["color"];
+    // let color = themes[theme[theme.length - 1]]["color"];
 
     let def =
-      "https://ui-avatars.com/api/" +
+      "/v1/avatars/initials?project=console"+
+      "&name=" +
       encodeURIComponent(name) +
-      "/" +
+      "&width=" +
       size +
-      "/" +
+      "&height=" +
-      encodeURIComponent(background) +
+      size;
-      "/" +
-      encodeURIComponent(color);
 
-    return (
+    return def;
-      "//www.gravatar.com/avatar/" +
+    // let def =
-      MD5(email) +
+    //   "https://ui-avatars.com/api/" +
-      ".jpg?s=" +
+    //   encodeURIComponent(name) +
-      size +
+    //   "/" +
-      "&d=" +
+    //   size +
-      encodeURIComponent(def)
+    //   "/" +
-    );
+    //   encodeURIComponent(background) +
+    //   "/" +
+    //   encodeURIComponent(color);
+    // return (
+    //   "//www.gravatar.com/avatar/" +
+    //   MD5(email) +
+    //   ".jpg?s=" +
+    //   size +
+    //   "&d=" +
+    //   encodeURIComponent(def)
+    // );
   })
   .add("selectedCollection", function($value, router) {
     return $value === router.params.collectionId ? "selected" : "";

tests/e2e/Services/Avatars/AvatarsBase.php

@@ -411,4 +411,95 @@ trait AvatarsBase
 
         return [];
     }
+
+
+    public function testGetInitials()
+    {
+        /**
+         * Test for SUCCESS
+         */
+        $response = $this->client->call(Client::METHOD_GET, '/avatars/initials', [
+            'x-appwrite-project' => $this->getProject()['$id'],
+        ]);
+
+        $this->assertEquals(200, $response['headers']['status-code']);
+        $this->assertEquals('image/png; charset=UTF-8', $response['headers']['content-type']);
+        $this->assertNotEmpty($response['body']);
+
+        $response = $this->client->call(Client::METHOD_GET, '/avatars/initials', [
+            'x-appwrite-project' => $this->getProject()['$id'],
+        ], [
+            'width' => 200,
+            'height' => 200,
+        ]);
+
+        $this->assertEquals(200, $response['headers']['status-code']);
+        $this->assertEquals('image/png; charset=UTF-8', $response['headers']['content-type']);
+        $this->assertNotEmpty($response['body']);
+
+        $response = $this->client->call(Client::METHOD_GET, '/avatars/initials', [
+            'x-appwrite-project' => $this->getProject()['$id'],
+        ], [
+            'name' => 'W W',
+            'width' => 200,
+            'height' => 200,
+        ]);
+
+        $this->assertEquals(200, $response['headers']['status-code']);
+        $this->assertEquals('image/png; charset=UTF-8', $response['headers']['content-type']);
+        $this->assertNotEmpty($response['body']);
+
+        $response = $this->client->call(Client::METHOD_GET, '/avatars/initials', [
+            'x-appwrite-project' => $this->getProject()['$id'],
+        ], [
+            'name' => 'W W',
+            'width' => 200,
+            'height' => 200,
+            'color' => 'ffffff',
+            'background' => '000000',
+        ]);
+
+        $this->assertEquals(200, $response['headers']['status-code']);
+        $this->assertEquals('image/png; charset=UTF-8', $response['headers']['content-type']);
+        $this->assertNotEmpty($response['body']);
+
+        /**
+         * Test for FAILURE
+         */
+        $response = $this->client->call(Client::METHOD_GET, '/avatars/initials', [
+            'x-appwrite-project' => $this->getProject()['$id'],
+        ], [
+            'name' => 'W W',
+            'width' => 200000,
+            'height' => 200,
+            'color' => 'ffffff',
+            'background' => '000000',
+        ]);
+
+        $this->assertEquals(400, $response['headers']['status-code']);
+
+        $response = $this->client->call(Client::METHOD_GET, '/avatars/initials', [
+            'x-appwrite-project' => $this->getProject()['$id'],
+        ], [
+            'name' => 'W W',
+            'width' => 200,
+            'height' => 200,
+            'color' => 'white',
+            'background' => '000000',
+        ]);
+
+        $this->assertEquals(400, $response['headers']['status-code']);
+
+        $response = $this->client->call(Client::METHOD_GET, '/avatars/initials', [
+            'x-appwrite-project' => $this->getProject()['$id'],
+        ], [
+            'name' => 'W W',
+            'width' => 200,
+            'height' => 200,
+            'color' => 'ffffff',
+            'background' => 'black',
+        ]);
+
+        $this->assertEquals(400, $response['headers']['status-code']);
+    }
 }