Show identifier image if avatar cannot be loaded.

frontend/src/app/framework/angular/avatar.component.html

@@ -1 +1 @@
-<img *ngIf="imageSource" [style.width]="imageSize" [style.height]="imageSize" [src]="imageSource | sqxSafeUrl">
+<img *ngIf="imageSource" [style.width]="imageSize" [style.height]="imageSize" [src]="imageSource | sqxSafeUrl" (error)="unsetImage()">

frontend/src/app/framework/angular/avatar.component.ts

@@ -27,9 +27,15 @@ export class AvatarComponent implements OnChanges {
     public imageSource?: string | null;
     public imageSize = '50px';
 
+    public actualImage: string | undefined | null;
+
     public ngOnChanges(changes: SimpleChanges) {
+        if (changes['image']) {
+            this.actualImage = this.image;
+        }
+
         if (changes['image'] || changes['identifier']) {
-            this.imageSource = this.image || this.createSvg();
+            this.updateSource();
         }
 
         if (changes['size']) {
@@ -37,6 +43,16 @@ export class AvatarComponent implements OnChanges {
         }
     }
 
+    private updateSource() {
+        this.imageSource = this.actualImage || this.createSvg();
+    }
+
+    public unsetImage() {
+        this.actualImage = null;
+
+        this.updateSource();
+    }
+
     private createSvg() {
         if (this.identifier) {
             return `data:image/svg+xml;utf8,${picasso(this.identifier)}`;

frontend/src/app/framework/angular/avatar.stories.tsx

@@ -0,0 +1,77 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { moduleMetadata } from '@storybook/angular';
+import { Meta, Story } from '@storybook/angular/types-6-0';
+import { AvatarComponent, SqxFrameworkModule } from '@app/framework';
+
+export default {
+    title: 'Framework/Avatar',
+    component: AvatarComponent,
+    argTypes: {
+        image: {
+            control: 'text',
+        },
+        identifier: {
+            control: 'text',
+        },
+        size: {
+            control: 'number',
+        },
+    },
+    decorators: [
+        moduleMetadata({
+            imports: [
+                BrowserAnimationsModule,
+                SqxFrameworkModule,
+                SqxFrameworkModule.forRoot(),
+            ],
+        }),
+    ],
+} as Meta;
+
+const Template: Story<AvatarComponent> = (args: AvatarComponent) => ({
+    props: args,
+});
+
+export const Empty = Template.bind({});
+
+Empty.args = {
+};
+
+export const Image = Template.bind({});
+
+Image.args = {
+    image: 'https://via.placeholder.com/50',
+};
+
+export const InvalidImage = Template.bind({});
+
+InvalidImage.args = {
+    image: 'https://invalid-url',
+};
+
+export const Identifier = Template.bind({});
+
+Identifier.args = {
+    identifier: 'image',
+};
+
+export const Large = Template.bind({});
+
+Large.args = {
+    identifier: 'image',
+    size: 200,
+};
+
+export const InvalidImageWithFallback = Template.bind({});
+
+InvalidImageWithFallback.args = {
+    image: 'https://invalid-url',
+    identifier: 'image',
+};

frontend/src/app/theme/_common.scss

@@ -22,7 +22,7 @@ body {
 }
 
 hr {
-    background-color: $color-border;
+    border-color: $color-border;
 }
 
 // Common style for user email.