Home styling and small bugfixes

src/Squidex/Configurations/Identity/LazyClientStore.cs

@@ -53,7 +53,7 @@ namespace Squidex.Configurations.Identity
                 },
                 PostLogoutRedirectUris = new List<string>
                 {
-                    options.BuildUrl("logout")
+                    options.BuildUrl("logout", false)
                 },
                 AllowAccessTokensViaBrowser = true,
                 AllowedGrantTypes = GrantTypes.Implicit,

src/Squidex/Configurations/Identity/MyIdentityOptions.cs

@@ -24,12 +24,14 @@ namespace Squidex.Configurations.Identity
 
         public bool RequiresHttps { get; set; }
 
-        public string BuildUrl(string path)
+        public string BuildUrl(string path, bool trailingSlash = true)
         {
             var url = $"{BaseUrl.TrimEnd('/')}/{path.Trim('/')}";
 
-            if (url.IndexOf("?", StringComparison.OrdinalIgnoreCase) < 0 &&
-                url.IndexOf(";", StringComparison.OrdinalIgnoreCase) < 0) {
+            if (trailingSlash && 
+                url.IndexOf("?", StringComparison.OrdinalIgnoreCase) < 0 &&
+                url.IndexOf(";", StringComparison.OrdinalIgnoreCase) < 0) 
+            {
                 url = url + "/";
             }
 

src/Squidex/app/app.component.ts

@@ -11,6 +11,6 @@ import * as Ng2 from '@angular/core';
     selector: 'sqx-app',
     template
 })
-export class AppComponent { 
+export class AppComponent {
     public isLoaded = false;
 }

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

@@ -6,7 +6,7 @@
     </div>
 </content>
 
-<div class="modal" *sqxModalView="modalDialog">
+<div class="modal" *sqxModalView="modalDialog" [@fade]>
 	<div class="modal-dialog">
 		<div class="modal-content">
 			<div class="modal-header">

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

@@ -2,7 +2,7 @@
     <li class="nav-item dropdown">
         <span class="nav-link dropdown-toggle" id="app-name" (click)="modalMenu.toggle()">{{app | async}}</span>
 
-        <div class="dropdown-menu" *sqxModalView="modalMenu">
+        <div class="dropdown-menu" *sqxModalView="modalMenu" [@fade]>
             <sqx-apps-menu-list [apps]="apps | async"></sqx-apps-menu-list>
 
             <div class="drodown-button">
@@ -12,7 +12,7 @@
     </li>
 </ul>
 
-<div class="modal ng-animate" *sqxModalView="modalDialog">
+<div class="modal ng-animate" *sqxModalView="modalDialog" [@fade]>
 	<div class="modal-dialog" role="document">
 		<div class="modal-content">
 			<div class="modal-header">

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

@@ -37,6 +37,7 @@
     & {
         @include transition(opacity .4 ease);
         @include opacity(.95);
+        @include no-selection;
         padding-right: 15px;
         cursor: pointer;
         color: $accent-dark;

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

@@ -6,7 +6,7 @@
             <span>{{displayName | async}}</span>
         </span>
 
-        <div class="dropdown-menu" *sqxModalView="modalMenu">
+        <div class="dropdown-menu" *sqxModalView="modalMenu" [@fade]>
             <a class="dropdown-item" (click)="logout()">Logout</a>
         </div>
     </li>

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

@@ -15,6 +15,7 @@ img {
 
 .navbar-nav {
     .nav-link {
+        @include no-selection;
         padding: 0;
         cursor: pointer;
         color: $accent-dark;

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

@@ -7,20 +7,27 @@
 
 import * as Ng2 from '@angular/core';
 
-import { AuthService, ModalView } from 'shared';
+import {
+    AuthService,
+    fadeAnimation,
+    ModalView
+} from 'shared';
 
 @Ng2.Component({
     selector: 'sqx-profile-menu',
     styles,
-    template
+    template,
+    animations: [
+        fadeAnimation()
+    ]
 })
 export class ProfileMenuComponent {
     public modalMenu = new ModalView();
 
-    public displayName 
+    public displayName
         = this.auth.isAuthenticatedChanges.map(t => t ? this.auth.user.displayName : null);
 
-    public pictureUrl 
+    public pictureUrl
         = this.auth.isAuthenticatedChanges.map(t => t ? this.auth.user.pictureUrl : null);
 
     constructor(

src/Squidex/app/components/public/home-page.component.html

@@ -1,2 +1,13 @@
+<div class="content">
+    <img class="logo" src="/images/logo.png" />
 
-<button class="btn btn-primary" (click)="login()">Login</button>
+    <button class="btn btn-primary btn-lg login-button" (click)="login()">Login to Squidex</button>
+
+    <p class="login-hint">
+        The login button will open a new popup. Once you are logged in successfull we will redirect you to the squidex management portal.
+    </p>
+
+    <p class="proudly-made">
+        Proudly made by Quaisar Ahmad &amp; Sebastian Stehle, 2016-2017
+    <p>
+</div>

src/Squidex/app/components/public/home-page.component.scss

@@ -0,0 +1,24 @@
+.content {
+    margin: 100px auto;
+    max-width: 500px;
+    text-align: center;
+}
+
+.logo {
+    height: 60px;
+    display: display-block;
+}
+
+.login-button {
+    margin: 40px 0;
+}
+
+.login-hint {
+    font-style: italic;
+}
+
+.proudly-made {
+    margin-top: 100px;
+    font-size: 11px;
+    font-style: italic;
+}

src/Squidex/app/components/public/home-page.component.ts

@@ -11,7 +11,8 @@ import * as Ng2Router from '@angular/router';
 import { AuthService, TitleService } from 'shared';
 
 @Ng2.Component({
-    selector: 'not-found',
+    selector: 'home-page',
+    styles,
     template
 })
 export class HomePageComponent implements Ng2.OnInit {

src/Squidex/app/framework/angular/modal-view.directive.ts

@@ -63,6 +63,10 @@ export class ModalViewDirective implements Ng2.OnChanges, Ng2.OnInit, Ng2.OnDest
         if (this.modalView) {
             this.subscription = this.modalView.isOpen.subscribe(isOpen => {
                 if (this.isEnabled) {
+                    if (isOpen === (this.view !== null)) {
+                        return;
+                    }
+
                     if (isOpen) {
                         this.view = this.viewContainer.createEmbeddedView(this.templateRef);
 

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

@@ -63,8 +63,8 @@ export class AuthService {
                            client_id: 'squidex-frontend',
                                scope: 'squidex-api openid profile squidex-profile',
                        response_type: 'id_token token',
-                        redirect_uri: apiUrl.buildUrl('/login;'),
-            post_logout_redirect_uri: apiUrl.buildUrl('/logout;'),
+                        redirect_uri: apiUrl.buildUrl('login;'),
+            post_logout_redirect_uri: apiUrl.buildUrl('logout'),
                  silent_redirect_uri: apiUrl.buildUrl('identity-server/client-callback-silent/'),
                   popup_redirect_uri: apiUrl.buildUrl('identity-server/client-callback-popup/'),
                            authority: apiUrl.buildUrl('identity-server/'),

src/Squidex/app/theme/_mixins.scss

@@ -43,6 +43,15 @@
             box-shadow: inset 1px 1px 1px $color;
 }
 
+@mixin no-selection() {
+  -webkit-touch-callout: none;
+    -webkit-user-select: none;
+     -khtml-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+}
+
 @mixin ellipsis() {
     -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;

src/Squidex/app/vendor.ts

@@ -14,11 +14,13 @@ import '@angular/http';
 import '@angular/forms';
 import '@angular/router';
 
-// Oidc-client
+// Additional libs
+import 'rxjs';
+
 import 'oidc-client';
 
-// RxJS
-import 'rxjs';
+import 'moment';
+import 'immutable';
 
 // Bootstrap
 import 'theme/vendor.scss';