Title handling improved.

src/Squidex/Configurations/Identity/IdentityServices.cs

@@ -9,7 +9,6 @@
 using System.Collections.Generic;
 using System.Reflection;
 using System.Security.Cryptography.X509Certificates;
-using IdentityServer4.Configuration;
 using IdentityServer4.Models;
 using IdentityServer4.Stores;
 using IdentityServer4.Stores.InMemory;

src/Squidex/Startup.cs

@@ -7,7 +7,6 @@
 // ==========================================================================
 
 using System;
-using System.Collections.Generic;
 using Autofac;
 using Autofac.Extensions.DependencyInjection;
 using Microsoft.AspNetCore.Builder;
@@ -101,6 +100,8 @@ namespace Squidex
             UseIdentity(app);
             UseApi(app);
             UseFrontend(app);
+
+            app.UseMyEventStore();
         }
 
         private void UseIdentity(IApplicationBuilder app)

src/Squidex/app-libs/icomoon/fonts/icomoon.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe900;" glyph-name="logo" d="M512.34 939.52c-0.174-0.065-226.41-96.5-283.902-294.74-5.545-19.035 40.453-10.673 38.399-31.6-2.517-25.409-55.264-35.821-48.385-108.78 7.001-74.289 74.617-149.342 84.791-194.72v-31.78c-0.615-9.802-5.639-36.405-22.285-49.4-9.13-7.105-21.442-9.661-37.671-7.78-22.528 2.612-31.493 16.604-35.078 27.9-5.881 18.616-0.409 40.331 12.793 50.52 13.271 10.243 15.084 28.513 4.029 40.82-11.055 12.296-30.785 13.965-44.056 3.7-32.168-24.839-45.65-70.615-32.785-111.34 12.146-38.328 44.789-64.147 87.363-69.080 6.067-0.699 11.848-1.040 17.335-1.040 32.945 0 55.27 11.669 68.785 22.32 40.671 32.105 43.867 85.623 44.099 91.62 0.011 0.355 0.022 0.705 0.022 1.060v24.36h0.129v1.64c0 14.177 12.394 25.66 27.707 25.66 14.869 0 26.889-10.843 27.578-24.46v-232.2c-0.255-3.343-3.155-34.297-22.157-49.28-9.118-7.201-21.512-9.802-37.799-7.9-22.54 2.612-31.526 16.605-35.099 27.88-5.893 18.627-0.387 40.341 12.814 50.52 13.271 10.254 15.062 28.523 4.007 40.84-11.044 12.274-30.764 13.945-44.035 3.68-32.191-24.828-45.65-70.615-32.785-111.34 12.122-38.328 44.789-64.136 87.363-69.080 6.067-0.699 11.848-1.040 17.335-1.040 32.945 0 55.262 11.669 68.742 22.32 40.683 32.105 43.879 85.623 44.099 91.62 0.024 0.376 0.042 0.696 0.042 1.040v259l0.129 0.060v1.14c0 14.456 12.65 26.18 28.264 26.18 15.288 0 27.657-11.292 28.135-25.36v-261.020c0-0.355-0.002-0.675 0.022-1.040 0.232-5.987 3.438-59.515 44.121-91.62 13.504-10.652 35.819-22.32 68.764-22.32 5.499 0 11.258 0.341 17.314 1.040 42.562 4.944 75.24 30.763 87.363 69.080 12.876 40.725-0.584 86.501-32.764 111.34-13.294 10.265-33.013 8.584-44.056-3.68-11.055-12.328-9.264-30.586 4.007-40.84 13.201-10.179 18.697-31.893 12.793-50.52-3.561-11.275-12.55-25.268-35.078-27.88-16.217-1.892-28.531 0.675-37.649 7.78-16.716 13.038-21.715 39.783-22.307 49.36v231.8c0.445 13.816 12.612 24.9 27.642 24.9 15.313 0 27.707-11.472 27.707-25.66v-1.64h0.085v-24.36c0-0.365-0.002-0.716 0.022-1.060 0.22-5.987 3.438-59.515 44.121-91.62 13.503-10.651 35.818-22.32 68.763-22.32 5.487 0 11.259 0.332 17.314 1.020 42.562 4.933 75.24 30.783 87.363 69.1 12.876 40.725-0.606 86.49-32.785 111.34-13.294 10.254-33.003 8.576-44.035-3.72-11.067-12.307-9.285-30.557 3.986-40.8 13.201-10.189 18.719-31.904 12.814-50.52-3.561-11.296-12.571-25.299-35.099-27.9-16.194-1.892-28.51 0.686-37.628 7.78-16.716 13.048-21.727 39.785-22.307 49.34v24.24c6.634 62.066 78.084 123.637 85.499 202.32 6.844 72.959-45.943 83.371-48.449 108.78-2.065 20.927 43.943 12.565 38.421 31.6-57.503 198.24-283.718 294.675-283.88 294.74z" />
+<glyph unicode="&#xe901;" glyph-name="plus" d="M810 384.667h-256v-256h-84v256h-256v84h256v256h84v-256h256v-84z" />
+</font></defs></svg>

src/Squidex/app-libs/icomoon/selection.json

@@ -0,0 +1,101 @@
+{
+  "IcoMoonType": "selection",
+  "icons": [
+    {
+      "icon": {
+        "paths": [
+          "M810 554h-256v256h-84v-256h-256v-84h256v-256h84v256h256v84z"
+        ],
+        "attrs": [
+          {}
+        ],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "add"
+        ],
+        "grid": 24
+      },
+      "attrs": [
+        {}
+      ],
+      "properties": {
+        "order": 1,
+        "id": 0,
+        "prevSize": 24,
+        "code": 59649,
+        "name": "plus"
+      },
+      "setIdx": 0,
+      "setId": 1,
+      "iconIdx": 0
+    },
+    {
+      "icon": {
+        "paths": [
+          "M512.34 20.48c-0.174 0.065-226.41 96.5-283.902 294.74-5.545 19.035 40.453 10.673 38.399 31.6-2.517 25.409-55.264 35.821-48.385 108.78 7.001 74.289 74.617 149.342 84.791 194.72v31.78c-0.615 9.802-5.639 36.405-22.285 49.4-9.13 7.105-21.442 9.661-37.671 7.78-22.528-2.612-31.493-16.604-35.078-27.9-5.881-18.616-0.409-40.331 12.793-50.52 13.271-10.243 15.084-28.513 4.029-40.82-11.055-12.296-30.785-13.965-44.056-3.7-32.168 24.839-45.65 70.615-32.785 111.34 12.146 38.328 44.789 64.147 87.363 69.080 6.067 0.699 11.848 1.040 17.335 1.040 32.945 0 55.27-11.669 68.785-22.32 40.671-32.105 43.867-85.623 44.099-91.62 0.011-0.355 0.022-0.705 0.022-1.060v-24.36h0.129v-1.64c0-14.177 12.394-25.66 27.707-25.66 14.869 0 26.889 10.843 27.578 24.46v232.2c-0.255 3.343-3.155 34.297-22.157 49.28-9.118 7.201-21.512 9.802-37.799 7.9-22.54-2.612-31.526-16.605-35.099-27.88-5.893-18.627-0.387-40.341 12.814-50.52 13.271-10.254 15.062-28.523 4.007-40.84-11.044-12.274-30.764-13.945-44.035-3.68-32.191 24.828-45.65 70.615-32.785 111.34 12.122 38.328 44.789 64.136 87.363 69.080 6.067 0.699 11.848 1.040 17.335 1.040 32.945 0 55.262-11.669 68.742-22.32 40.683-32.105 43.879-85.623 44.099-91.62 0.024-0.376 0.042-0.696 0.042-1.040v-259l0.129-0.060v-1.14c0-14.456 12.65-26.18 28.264-26.18 15.288 0 27.657 11.292 28.135 25.36v261.020c0 0.355-0.002 0.675 0.022 1.040 0.232 5.987 3.438 59.515 44.121 91.62 13.504 10.652 35.819 22.32 68.764 22.32 5.499 0 11.258-0.341 17.314-1.040 42.562-4.944 75.24-30.763 87.363-69.080 12.876-40.725-0.584-86.501-32.764-111.34-13.294-10.265-33.013-8.584-44.056 3.68-11.055 12.328-9.264 30.586 4.007 40.84 13.201 10.179 18.697 31.893 12.793 50.52-3.561 11.275-12.55 25.268-35.078 27.88-16.217 1.892-28.531-0.675-37.649-7.78-16.716-13.038-21.715-39.783-22.307-49.36v-231.8c0.445-13.816 12.612-24.9 27.642-24.9 15.313 0 27.707 11.472 27.707 25.66v1.64h0.085v24.36c0 0.365-0.002 0.716 0.022 1.060 0.22 5.987 3.438 59.515 44.121 91.62 13.503 10.651 35.818 22.32 68.763 22.32 5.487 0 11.259-0.332 17.314-1.020 42.562-4.933 75.24-30.783 87.363-69.1 12.876-40.725-0.606-86.49-32.785-111.34-13.294-10.254-33.003-8.576-44.035 3.72-11.067 12.307-9.285 30.557 3.986 40.8 13.201 10.189 18.719 31.904 12.814 50.52-3.561 11.296-12.571 25.299-35.099 27.9-16.194 1.892-28.51-0.686-37.628-7.78-16.716-13.048-21.727-39.785-22.307-49.34v-24.24c6.634-62.066 78.084-123.637 85.499-202.32 6.844-72.959-45.943-83.371-48.449-108.78-2.065-20.927 43.943-12.565 38.421-31.6-57.503-198.24-283.718-294.675-283.88-294.74z"
+        ],
+        "attrs": [
+          {
+            "fill": "rgb(0, 0, 0)"
+          }
+        ],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "grid": 0,
+        "tags": [
+          "logo"
+        ]
+      },
+      "attrs": [
+        {
+          "fill": "rgb(0, 0, 0)"
+        }
+      ],
+      "properties": {
+        "order": 3,
+        "id": 0,
+        "name": "logo",
+        "prevSize": 32,
+        "code": 59648
+      },
+      "setIdx": 1,
+      "setId": 0,
+      "iconIdx": 0
+    }
+  ],
+  "height": 1024,
+  "metadata": {
+    "name": "icomoon"
+  },
+  "preferences": {
+    "showGlyphs": true,
+    "showCodes": true,
+    "showQuickUse": true,
+    "showQuickUse2": true,
+    "showSVGs": true,
+    "fontPref": {
+      "prefix": "icon-",
+      "metadata": {
+        "fontFamily": "icomoon",
+        "majorVersion": 1,
+        "minorVersion": 0
+      },
+      "metrics": {
+        "emSize": 1024,
+        "baseline": 6.25,
+        "whitespace": 50
+      },
+      "embed": false
+    },
+    "imagePref": {
+      "prefix": "icon-",
+      "png": true,
+      "useClassSelector": true,
+      "color": 0,
+      "bgColor": 16777215,
+      "classSelector": ".icon"
+    },
+    "historySize": 100
+  }
+}

src/Squidex/app-libs/icomoon/style.css

@@ -0,0 +1,33 @@
+@font-face {
+  font-family: 'icomoon';
+  src:  url('fonts/icomoon.eot?gn3a4m');
+  src:  url('fonts/icomoon.eot?gn3a4m#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?gn3a4m') format('truetype'),
+    url('fonts/icomoon.woff?gn3a4m') format('woff'),
+    url('fonts/icomoon.svg?gn3a4m#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-plus:before {
+  content: "\e901";
+}
+.icon-logo:before {
+  content: "\e900";
+}
+

src/Squidex/app/app.component.html

@@ -1,5 +1,7 @@
 <nav class="navbar navbar-fixed-top navbar-dark bg-primary bg-faded">
-    <span class="navbar-brand">Squidex</span>
+    <span class="navbar-brand">
+        <i class="icon-logo"></i>
+    </span>
 
     <div class="float-xs-left apps-menu">
         <sqx-apps-menu></sqx-apps-menu>

src/Squidex/app/app.component.scss

@@ -4,6 +4,14 @@
     @include box-shadow(0, 4px, 4px, 0.2px);
 }
 
+.navbar-brand {
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-top: -0.2rem;
+    margin-bottom: -0.2rem;
+    font-size: 1.8rem;
+}
+
 .search-form {
     margin-left: 15px;
 }

src/Squidex/app/app.module.ts

@@ -16,6 +16,8 @@ import {
     DragService,
     DragServiceFactory,
     DecimalSeparatorConfig,
+    TitlesConfig,
+    TitleService
 } from './framework';
 
 import { 
@@ -54,10 +56,12 @@ const baseUrl = window.location.protocol + '//' + window.location.host + '/';
         AppsService,
         AuthGuard,
         AuthService,
+        TitleService,
         { provide: ApiUrlConfig, useValue: new ApiUrlConfig(baseUrl) },
         { provide: CurrencyConfig, useValue: new CurrencyConfig('EUR', '€', true) },
         { provide: DecimalSeparatorConfig, useValue: new DecimalSeparatorConfig('.') },
-        { provide: DragService, useFactory: DragServiceFactory }
+        { provide: DragService, useFactory: DragServiceFactory },
+        { provide: TitlesConfig, useValue: new TitlesConfig({}, null, 'Squidex Headless CMS') }
     ],
     bootstrap: [AppComponent]
 })

src/Squidex/app/app.routes.ts

@@ -11,7 +11,8 @@ import * as Ng2Router from '@angular/router';
 import {
     AppsPageComponent,
     LoginPageComponent,
-    LogoutPageComponent
+    LogoutPageComponent,
+    NotFoundPageComponent
 } from './components';
 
 import { 
@@ -36,6 +37,14 @@ export const routes: Ng2Router.Routes = [
     {
         path: 'logout',
         component: LogoutPageComponent
+    },
+    {
+        path: '404',
+        component: NotFoundPageComponent
+    },
+    {
+        path: '**',
+        component: NotFoundPageComponent
     }
 ];
 

src/Squidex/app/components/apps/apps-page.component.html

@@ -2,7 +2,7 @@
     <div class="apps-empty">
         <h3 class="apps-empty-headline">You are not collaborating to any app yet</h3>
 
-        <button class="apps-empty-button btn btn-success" (click)="modalDialog.show()">Create App</button>
+        <button class="apps-empty-button btn btn-success" (click)="modalDialog.show()"><i class="icon-plus"></i> Create New App</button>
     </div>
 </content>
 

src/Squidex/app/components/apps/apps-page.component.ts

@@ -7,7 +7,11 @@
 
 import * as Ng2 from '@angular/core';
 
-import { fadeAnimation, ModalView } from './../../framework';
+import { 
+    fadeAnimation, 
+    ModalView,
+    TitleService 
+} from './../../framework';
 
 @Ng2.Component({
     selector: 'sqx-apps-page',
@@ -17,6 +21,15 @@ import { fadeAnimation, ModalView } from './../../framework';
         fadeAnimation()
     ]
 })
-export class AppsPageComponent {
+export class AppsPageComponent implements Ng2.OnInit {
     public modalDialog = new ModalView();
+
+    constructor(
+        private readonly title: TitleService
+    ) {
+    }
+
+    public ngOnInit() {
+        this.title.setTitle('Apps');
+    }
 }

src/Squidex/app/components/auth/login-page.component.ts

@@ -10,27 +10,30 @@ import * as Ng2Router from '@angular/router';
 
 import { AuthService } from './../../shared';
 
+import { TitleService } from './../../framework';
+
 @Ng2.Component({
     selector: 'login',
-    template: ''
+    template
 })
 export class LoginPageComponent implements Ng2.OnInit {
     public showError = false;
 
     constructor(
         private readonly authService: AuthService,
-        private readonly router: Ng2Router.Router
+        private readonly router: Ng2Router.Router,
+        private readonly title: TitleService,
     ) {
     }
 
     public ngOnInit() {
         this.authService.loginComplete().subscribe(
             () => {
-        debugger;
-                this.router.navigate(['/']);
+                this.router.navigate(['/'], { replaceUrl: true });
             },
            e => {
-        debugger;
+                this.title.setTitle('Login failed');
+                
                 this.showError = true;
             }
         );

src/Squidex/app/components/auth/logout-page.component.ts

@@ -12,10 +12,9 @@ import { AuthService } from './../../shared';
 
 @Ng2.Component({
     selector: 'logout',
-    template: ''
+    template
 })
 export class LogoutPageComponent implements Ng2.OnInit {
-    public showFailedError = false;
 
     constructor(
         private readonly authService: AuthService,
@@ -26,10 +25,10 @@ export class LogoutPageComponent implements Ng2.OnInit {
     public ngOnInit() {
         this.authService.logoutComplete().subscribe(
             () => {
-                this.router.navigate(['/']);
+                this.router.navigate(['/'], { replaceUrl: true });
             },
             () => {
-                this.showFailedError = true;
+                this.router.navigate(['/'], { replaceUrl: true });
             }
         );
     }

src/Squidex/app/components/layout/apps-menu.component.html

@@ -1,20 +1,21 @@
 <ul class="nav navbar-nav" *ngIf="apps">
     <li class="nav-item dropdown">
-        <span class="nav-link dropdown-toggle" id="app-name" (click)="modalMenu.toggle()">My App with a really very long name</span>
+        <span class="nav-link dropdown-toggle" id="app-name" (click)="modalMenu.toggle()">{{app}}</span>
 
         <div class="dropdown-menu" [(sqxModalView)]="modalMenu">
-            <a class="dropdown-item" href="#">Action</a>
-            <a class="dropdown-item" href="#">Another action</a>
-            <a class="dropdown-item" href="#">Something else here</a>
+            <a class="dropdown-item all-apps" routerLink="/apps">
+                <span class="all-apps-text">All Apps</span> 
+                <span class="all-apps-pill tag tag-pill tag-default">{{apps.length}}</span>
+            </a>
 
             <div class="dropdown-divider"></div>
-
-            <a class="dropdown-item" routerLink="/apps">All apps</a>
+            
+            <a class="dropdown-item" *ngFor="let app of apps">{{app.name}}</a>
 
             <div class="dropdown-divider"></div>
 
             <div class="drodown-button">
-                <button class="btn btn-block btn-success" id="app-create" (click)="createApp()">Create App</button>
+                <button class="btn btn-block btn-success" id="app-create" (click)="createApp()"><i class="icon-plus"></i> Create New App</button>
             </div>
         </div>
     </li>

src/Squidex/app/components/layout/apps-menu.component.scss

@@ -13,6 +13,37 @@
     padding: 3px 1.5rem;
 }
 
+.dropdown-menu {
+    top: 44px;
+}
+
+.dropdown-menu:before {
+    @include absolute(-18px, auto, auto, 10px);
+    content: '';
+    height: 0;
+    border-style: solid;
+    border-width: 10px;
+    border-color: transparent transparent white transparent;
+    width: 0;
+}
+
+.all-apps {
+    & {
+        position: relative;
+    }
+
+    &-text {
+        font-weight: bold;
+    }
+
+    &-pill {
+        @include absolute(auto, 10px, auto, auto);
+        color: $accent-blue;
+        border: none;
+        background: $accent-blue-lighter;
+    }
+}
+
 #app-name {
     & {
         padding-right: 15px;
@@ -29,5 +60,6 @@
 
     &:after {
         @include absolute(50%, 0px, auto, auto);
+        color: $accent-blue-light;
     }
 }

src/Squidex/app/components/layout/apps-menu.component.ts

@@ -6,6 +6,7 @@
  */
 
 import * as Ng2 from '@angular/core';
+import * as Ng2Router from '@angular/router';
 
 import {
     AppDto, 
@@ -14,6 +15,8 @@ import {
 
 import { fadeAnimation, ModalView } from './../../framework';
 
+const FALLBACK_NAME = 'Apps Overview';
+
 @Ng2.Component({
     selector: 'sqx-apps-menu',
     styles,
@@ -23,27 +26,41 @@ import { fadeAnimation, ModalView } from './../../framework';
     ]
 })
 export class AppsMenuComponent implements Ng2.OnInit, Ng2.OnDestroy {
-    private subscription: any | null = null;
+    private appsSubscription: any | null = null;
+    private routeSubscription: any | null = null;
 
     public modalMenu = new ModalView();
     public modalDialog = new ModalView();
 
     public apps: AppDto[] | null = null;
 
+    public app = FALLBACK_NAME;
+
     constructor(
-        private readonly appsStore: AppsStoreService 
+        private readonly appsStore: AppsStoreService,
+        private readonly route: Ng2Router.ActivatedRoute
     ) {
     }
 
     public ngOnInit() {
-        this.subscription = this.appsStore.appsChanges.subscribe(apps => {
+        this.appsSubscription = this.appsStore.appsChanges.subscribe(apps => {
             this.apps = apps;
         });
+
+        this.routeSubscription = this.route.params.map(p => p['app']).subscribe(app => {
+            this.app = app || FALLBACK_NAME;
+        });
     }
 
     public ngOnDestroy() {
-        if (this.subscription) {
-            this.subscription.unsubscribe();
+        if (this.appsSubscription) {
+            this.appsSubscription.unsubscribe();
+            this.appsSubscription = null;
+        }
+
+        if (this.routeSubscription) {
+            this.routeSubscription.unsubscribe();
+            this.routeSubscription = null;
         }
     }
 

src/Squidex/app/components/layout/declarations.ts

@@ -7,4 +7,5 @@
 
 export * from './app-form.component';
 export * from './apps-menu.component';
+export * from './not-found-page.component';
 export * from './search-form.component';

src/Squidex/app/components/layout/layout.module.ts

@@ -12,6 +12,7 @@ import { SqxFrameworkModule } from './../../framework';
 import {
     AppFormComponent,
     AppsMenuComponent,
+    NotFoundPageComponent,
     SearchFormComponent
 } from './declarations';
 
@@ -22,6 +23,7 @@ import {
     declarations: [
         AppFormComponent,
         AppsMenuComponent,
+        NotFoundPageComponent,
         SearchFormComponent,
     ],
     exports: [

src/Squidex/app/components/layout/not-found-page.component.html

@@ -0,0 +1,3 @@
+<div class="simple-error">
+    Not found
+</div>

src/Squidex/app/components/layout/not-found-page.component.ts

@@ -0,0 +1,25 @@
+/*
+ * Squidex Headless CMS
+ * 
+ * @license
+ * Copyright (c) Sebastian Stehle. All rights reserved
+ */
+
+import * as Ng2 from '@angular/core';
+
+import { TitleService } from './../../framework';
+
+@Ng2.Component({
+    selector: 'not-found',
+    template
+})
+export class NotFoundPageComponent implements Ng2.OnInit {
+    constructor(
+        private readonly title: TitleService
+    ) {
+    }
+
+    public ngOnInit() {
+        this.title.setTitle('Not found');
+    }
+}

src/Squidex/app/framework/angular/animations.ts

@@ -22,5 +22,5 @@ export const fadeAnimation = (name = 'fade', timing = '200ms'): Ng2.AnimationEnt
             Ng2.transition('0 => 1', Ng2.animate(timing))
         ]
     );
-}
+};
     

src/Squidex/app/framework/services/title.service.spec.ts

@@ -28,12 +28,28 @@ describe('TitleService', () => {
         expect(titleService).toBeDefined();
     });
 
-    it('should do nothing when title key is not found in configuration', () => {
+    it('should use key when title key is not found in configuration', () => {
         const titleService = new TitleService(new TitlesConfig({}));
 
-        titleService.setTitle('invalid', {});
+        titleService.setTitle('my-title', {});
 
-        expect(document.title).toBe('');
+        expect(document.title).toBe('my-title');
+    });
+
+    it('should prepand prefix to title', () => {
+        const titleService = new TitleService(new TitlesConfig({}, 'myapp'));
+
+        titleService.setTitle('my-title', {});
+
+        expect(document.title).toBe('myapp - my-title');
+    });
+
+    it('should append suffix to title', () => {
+        const titleService = new TitleService(new TitlesConfig({}, null, 'myapp'));
+
+        titleService.setTitle('my-title', {});
+
+        expect(document.title).toBe('my-title - myapp');
     });
 
     it('should set document title when title key is found in configuration', () => {

src/Squidex/app/framework/services/title.service.ts

@@ -7,8 +7,12 @@
 
 import * as Ng2 from '@angular/core';
 
+@Ng2.Injectable()
 export class TitlesConfig {
-    constructor(public readonly value: { [key: string]: string }) { }
+    constructor(
+        public readonly value: { [key: string]: string }, 
+        public readonly prefix?: string,
+        public readonly suffix?: string) { }
 }
 
 export const TitleServiceFactory = (titles: TitlesConfig) => {
@@ -19,19 +23,29 @@ export const TitleServiceFactory = (titles: TitlesConfig) => {
 export class TitleService {
     constructor(private readonly titles: TitlesConfig) { }
 
-    public setTitle(key: string, parameters: { [key: string]: string }) {
-        let title = this.titles.value[key] || '';
+    public setTitle(key: string, parameters?: { [key: string]: string }) {
+        let title = this.titles.value[key] || key;
 
         if (!title) {
             return;
         }
 
-        for (let parameter in parameters) {
-            if (parameters.hasOwnProperty(parameter)) {
-                title = title.replace(`{${parameter}}`, parameters[parameter]);
+        if (parameters) {
+            for (let parameter in parameters) {
+                if (parameters.hasOwnProperty(parameter)) {
+                    title = title.replace(`{${parameter}}`, parameters[parameter]);
+                }
             }
         }
 
+        if (this.titles.prefix) {
+            title = this.titles.prefix + ' - ' + title;
+        }
+
+        if (this.titles.suffix) {
+            title = title + ' - ' + this.titles.suffix;
+        }
+
         document.title = title;
     }
 }

src/Squidex/app/shared/services/auth.service.ts

@@ -39,7 +39,8 @@ export class AuthService {
     }
 
     constructor(apiUrl: ApiUrlConfig,
-        private readonly http: Ng2Http.Http
+        private readonly http: Ng2Http.Http,
+        private readonly router: Ng2Router.Router,
     ) {
         Log.logger = console;
 
@@ -130,24 +131,36 @@ export class AuthService {
     public authGet(url: string, options?: Ng2Http.RequestOptions): Observable<Ng2Http.Response> {
         options = this.setRequestOptions(options);
 
-        return this.http.get(url, options);
+        return this.checkResponse(this.http.get(url, options));
     }
 
     public authPut(url: string, data: any, options?: Ng2Http.RequestOptions): Observable<Ng2Http.Response> {
         options = this.setRequestOptions(options);
 
-        return this.http.put(url, data, options);
+        return this.checkResponse(this.http.put(url, data, options));
     }
 
     public authDelete(url: string, options?: Ng2Http.RequestOptions): Observable<Ng2Http.Response> {
         options = this.setRequestOptions(options);
-        return this.http.delete(url, options);
+        return this.checkResponse(this.http.delete(url, options));
     }
 
     public authPost(url: string, data: any, options?: Ng2Http.RequestOptions): Observable<Ng2Http.Response> {
         options = this.setRequestOptions(options);
 
-        return this.http.post(url, data, options);
+        return this.checkResponse(this.http.post(url, data, options));
+    }
+
+    private checkResponse(response: Observable<Ng2Http.Response>) {
+        return response.catch((errorResponse: Ng2Http.Response) => {
+            if (errorResponse.status === 401) {
+                this.login();
+            } else {
+                this.router.navigate(['/404']);
+            }
+
+            return Observable.throw(response);
+        });
     }
 
     private setRequestOptions(options?: Ng2Http.RequestOptions) {

src/Squidex/app/theme/_bootstrap.scss

@@ -41,10 +41,14 @@
     }
 }
 
-.modal-content {
+.modal-content, .dropdown-menu {
     @include box-shadow(0px, 6px, 16px, 0.2px);
 }
 
 .modal-content, .modal-header {
     border: 0;
+}
+
+.dropdown-menu {
+    border: 0;
 }

src/Squidex/app/theme/_vars.scss

@@ -2,6 +2,8 @@ $nav-text-color: #333;
 
 $accent-blue: #438CEF;
 $accent-blue-dark: #3F83DF;
+$accent-blue-light: #A1C6F7;
+$accent-blue-lighter: #D9E8FC;
 
 $accent-green: #4CC159;
 $accent-green-dark: #47B353;

src/Squidex/app/theme/vendor.scss

@@ -4,4 +4,7 @@
 @import './../../node_modules/font-awesome/scss/font-awesome.scss';
 
 // Bootstrap
-@import './../../node_modules/bootstrap/scss/bootstrap-flex.scss';
+@import './../../node_modules/bootstrap/scss/bootstrap-flex.scss';
+
+// icomoon
+@import './../../app-libs/icomoon/style.css';

src/Squidex/wwwroot/index.html

@@ -2,7 +2,9 @@
 <html>
 <head>
     <base href="/">
-    <title>Angular With Webpack</title>
+    
+    <title>Squidex - Headless CMS</title>
+
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>