From 9d29f1cf9a44fa519fa568563459cfb23283a175 Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Tue, 28 Jan 2020 20:45:06 +0100
Subject: [PATCH] Access token fixed.

---
 .../features/apps/pages/apps-page.component.scss   |  2 +-
 .../features/apps/pages/news-dialog.component.scss |  2 +-
 .../dashboard/pages/dashboard-page.component.scss  |  2 +-
 .../schema/fields/schema-fields.component.scss     |  2 +-
 .../pages/schemas/schema-form.component.scss       |  2 +-
 .../angular/forms/editors/toggle.component.scss    |  4 ++--
 .../components/assets/asset-dialog.component.html  |  2 +-
 .../components/assets/asset-dialog.component.ts    |  7 ++++++-
 .../shared/components/assets/asset.component.html  |  4 ++--
 .../components/assets/image-editor.component.ts    | 14 ++++++++++----
 .../forms/geolocation-editor.component.scss        |  2 +-
 .../app/shared/interceptors/auth.interceptor.ts    |  2 +-
 frontend/app/shared/services/auth.service.ts       |  4 ++--
 .../shell/pages/internal/apps-menu.component.scss  |  4 ++--
 .../pages/internal/internal-area.component.scss    |  2 +-
 frontend/app/theme/_bootstrap.scss                 |  4 ++--
 frontend/app/theme/_forms.scss                     |  2 +-
 frontend/app/theme/_mixins.scss                    |  6 +-----
 frontend/app/theme/_panels.scss                    |  4 ++--
 19 files changed, 39 insertions(+), 32 deletions(-)

diff --git a/frontend/app/features/apps/pages/apps-page.component.scss b/frontend/app/features/apps/pages/apps-page.component.scss
index ab35fad84..f4a931d1d 100644
--- a/frontend/app/features/apps/pages/apps-page.component.scss
+++ b/frontend/app/features/apps/pages/apps-page.component.scss
@@ -69,7 +69,7 @@
         }
 
         &:hover {
-            @include box-shadow(0, 3px, 16px, .2);
+            @include box-shadow-outer(0, 3px, 16px, .2);
         }
 
         &:focus {
diff --git a/frontend/app/features/apps/pages/news-dialog.component.scss b/frontend/app/features/apps/pages/news-dialog.component.scss
index bcc87b52b..c8671547e 100644
--- a/frontend/app/features/apps/pages/news-dialog.component.scss
+++ b/frontend/app/features/apps/pages/news-dialog.component.scss
@@ -1,6 +1,6 @@
 :host ::ng-deep {
     img {
-        @include box-shadow(0, 4px, 20px, .2);
+        @include box-shadow-outer(0, 4px, 20px, .2);
         display: block;
         margin: 10px auto;
         max-width: 80%;
diff --git a/frontend/app/features/dashboard/pages/dashboard-page.component.scss b/frontend/app/features/dashboard/pages/dashboard-page.component.scss
index 2468c97cc..2c21b8727 100644
--- a/frontend/app/features/dashboard/pages/dashboard-page.component.scss
+++ b/frontend/app/features/dashboard/pages/dashboard-page.component.scss
@@ -73,7 +73,7 @@
         }
 
         &:hover {
-            @include box-shadow(0, 3px, 16px, .2px);
+            @include box-shadow-outer(0, 3px, 16px, .2px);
         }
 
         &:focus {
diff --git a/frontend/app/features/schemas/pages/schema/fields/schema-fields.component.scss b/frontend/app/features/schemas/pages/schema/fields/schema-fields.component.scss
index b4b9e68d6..538ff0571 100644
--- a/frontend/app/features/schemas/pages/schema/fields/schema-fields.component.scss
+++ b/frontend/app/features/schemas/pages/schema/fields/schema-fields.component.scss
@@ -8,7 +8,7 @@
 .field-button {
     & {
         @include circle(5.25rem);
-        @include box-shadow(0, 8px, 16px, .3);
+        @include box-shadow-outer(0, 8px, 16px, .3);
         @include absolute(auto, 6rem, 1rem, auto);
     }
 
diff --git a/frontend/app/features/schemas/pages/schemas/schema-form.component.scss b/frontend/app/features/schemas/pages/schemas/schema-form.component.scss
index c9a91d893..07ae3a7e3 100644
--- a/frontend/app/features/schemas/pages/schemas/schema-form.component.scss
+++ b/frontend/app/features/schemas/pages/schemas/schema-form.component.scss
@@ -49,7 +49,7 @@ $icon-size: 4.5rem;
 
         &.active {
             & {
-                @include box-shadow(0, 0, 10px, .5);
+                @include box-shadow-outer(0, 0, 10px, .5);
                 background: $color-theme-blue;
                 border-color: $color-theme-blue;
                 color: $color-dark-foreground;
diff --git a/frontend/app/framework/angular/forms/editors/toggle.component.scss b/frontend/app/framework/angular/forms/editors/toggle.component.scss
index c626b8ebe..d95afe261 100644
--- a/frontend/app/framework/angular/forms/editors/toggle.component.scss
+++ b/frontend/app/framework/angular/forms/editors/toggle.component.scss
@@ -5,7 +5,7 @@ $toggle-button-size: $toggle-height - .25rem;
 .toggle {
     &-button {
         @include circle($toggle-button-size);
-        @include box-shadow(0, 2px, 2px, .2);
+        @include box-shadow-outer(0, 2px, 2px, .2);
         @include absolute($toggle-height * .5, auto, auto, $toggle-width * .5);
         background: $color-dark-foreground;
         border: 0;
@@ -17,7 +17,7 @@ $toggle-button-size: $toggle-height - .25rem;
     &-container {
         & {
             @include border-radius($toggle-height * .5);
-            @include box-shadow-inner;
+            @include box-shadow-outer;
             background: lighten($color-border, 6%);
             border: 0;
             display: inline-block;
diff --git a/frontend/app/shared/components/assets/asset-dialog.component.html b/frontend/app/shared/components/assets/asset-dialog.component.html
index cc454808f..b694c316b 100644
--- a/frontend/app/shared/components/assets/asset-dialog.component.html
+++ b/frontend/app/shared/components/assets/asset-dialog.component.html
@@ -25,7 +25,7 @@
             <ng-container [ngSwitch]="selectedTab">
                 <ng-container *ngSwitchCase="'Image'">
                     <div class="image">
-                        <sqx-image-editor [imageUrl]="asset.contentUrl"></sqx-image-editor>
+                        <sqx-image-editor [accessToken]="accessToken" [imageUrl]="asset.contentUrl"></sqx-image-editor>
                         
                         <div class="image-progress" *ngIf="progress > 0">
                             <sqx-progress-bar
diff --git a/frontend/app/shared/components/assets/asset-dialog.component.ts b/frontend/app/shared/components/assets/asset-dialog.component.ts
index f582bfb29..ada4a0cd8 100644
--- a/frontend/app/shared/components/assets/asset-dialog.component.ts
+++ b/frontend/app/shared/components/assets/asset-dialog.component.ts
@@ -13,6 +13,7 @@ import {
     AssetDto,
     AssetsState,
     AssetUploaderState,
+    AuthService,
     DialogService,
     Types,
     UploadCanceled
@@ -33,6 +34,9 @@ export class AssetDialogComponent implements OnInit {
     @Output()
     public changed = new EventEmitter<AssetDto>();
 
+    @Input()
+    public accessToken: string;
+
     @Input()
     public asset: AssetDto;
 
@@ -58,7 +62,8 @@ export class AssetDialogComponent implements OnInit {
         private readonly assetUploader: AssetUploaderState,
         private readonly changeDetector: ChangeDetectorRef,
         private readonly dialogs: DialogService,
-        private readonly formBuilder: FormBuilder
+        private readonly formBuilder: FormBuilder,
+        public readonly authService: AuthService
     ) {
     }
 
diff --git a/frontend/app/shared/components/assets/asset.component.html b/frontend/app/shared/components/assets/asset.component.html
index a4cd1784c..77e7fddca 100644
--- a/frontend/app/shared/components/assets/asset.component.html
+++ b/frontend/app/shared/components/assets/asset.component.html
@@ -11,7 +11,7 @@
                 
                 <ng-container *ngIf="asset.canPreview; else noPreview">
                     <div class="file-image">
-                        <img [sqxImageSource]="asset | sqxAssetPreviewUrl" [accessToken]="authService.user?.accessKey" class="bg" layoutKey="asset-large">
+                        <img [sqxImageSource]="asset | sqxAssetPreviewUrl" [accessToken]="authService.user?.accessToken" class="bg" layoutKey="asset-large">
                     </div>
                 </ng-container>
                 <ng-template #noPreview>
@@ -152,7 +152,7 @@
 
 <ng-container *ngIf="asset">
     <ng-container *sqxModal="editDialog">
-        <sqx-asset-dialog [allTags]="allTags" [asset]="asset"
+        <sqx-asset-dialog [allTags]="allTags" [asset]="asset" [accessToken]="authService.user?.accessToken"
             (changed)="setAsset($event)"
             (complete)="editDialog.hide()">
         </sqx-asset-dialog>
diff --git a/frontend/app/shared/components/assets/image-editor.component.ts b/frontend/app/shared/components/assets/image-editor.component.ts
index c5a34dbe6..8d1bf205d 100644
--- a/frontend/app/shared/components/assets/image-editor.component.ts
+++ b/frontend/app/shared/components/assets/image-editor.component.ts
@@ -105,6 +105,9 @@ export class ImageEditorComponent implements AfterViewInit, OnChanges {
     private isChanged = false;
     private isChangedBefore = false;
 
+    @Input()
+    public accessToken: string;
+
     @Input()
     public imageUrl: string;
 
@@ -159,15 +162,18 @@ export class ImageEditorComponent implements AfterViewInit, OnChanges {
             'https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.js'
         ];
 
-        styles.forEach(style => this.resourceLoader.loadStyle(style));
+        let path = this.imageUrl;
 
-        const s = scripts.map(script => this.resourceLoader.loadScript(script));
+        if (this.accessToken) {
+            path += `&access_token=${this.accessToken}`;
+        }
 
-        Promise.all(s).then(() => {
+        styles.forEach(style => this.resourceLoader.loadStyle(style));
+        Promise.all(scripts.map(script => this.resourceLoader.loadScript(script))).then(() => {
             this.imageEditor = new tui.ImageEditor(this.editor.nativeElement, {
                 includeUI: {
                     loadImage: {
-                        path: this.imageUrl, name: 'image'
+                        path, name: 'image'
                     },
                     menu: [
                         'crop',
diff --git a/frontend/app/shared/components/forms/geolocation-editor.component.scss b/frontend/app/shared/components/forms/geolocation-editor.component.scss
index 54f3bfbd1..14ead6581 100644
--- a/frontend/app/shared/components/forms/geolocation-editor.component.scss
+++ b/frontend/app/shared/components/forms/geolocation-editor.component.scss
@@ -8,7 +8,7 @@
 
 .search-control {
     @include absolute(.5rem, auto, auto, .5rem);
-    @include box-shadow;
+    @include box-shadow-outer;
     width: 40%;
 }
 
diff --git a/frontend/app/shared/interceptors/auth.interceptor.ts b/frontend/app/shared/interceptors/auth.interceptor.ts
index 026010907..246c35ecd 100644
--- a/frontend/app/shared/interceptors/auth.interceptor.ts
+++ b/frontend/app/shared/interceptors/auth.interceptor.ts
@@ -39,7 +39,7 @@ export class AuthInterceptor implements HttpInterceptor {
     }
 
     private makeRequest(req: HttpRequest<any>, next: HttpHandler, user: Profile | null, renew = false): Observable<HttpEvent<any>> {
-        const token = user ? user.authToken : '';
+        const token = user ? user.authorization : '';
 
         req = req.clone({
             headers: req.headers
diff --git a/frontend/app/shared/services/auth.service.ts b/frontend/app/shared/services/auth.service.ts
index 8c35257ed..8fd9e2eb5 100644
--- a/frontend/app/shared/services/auth.service.ts
+++ b/frontend/app/shared/services/auth.service.ts
@@ -39,11 +39,11 @@ export class Profile {
         return this.user.expired || false;
     }
 
-    public get accessKey(): string {
+    public get accessToken(): string {
         return this.user.access_token;
     }
 
-    public get authToken(): string {
+    public get authorization(): string {
         return `${this.user!.token_type} ${this.user.access_token}`;
     }
 
diff --git a/frontend/app/shell/pages/internal/apps-menu.component.scss b/frontend/app/shell/pages/internal/apps-menu.component.scss
index c36fd6566..f6d29e1ff 100644
--- a/frontend/app/shell/pages/internal/apps-menu.component.scss
+++ b/frontend/app/shell/pages/internal/apps-menu.component.scss
@@ -11,9 +11,9 @@ $color-nav-shadow: rgba(26, 93, 184, .26);
         .nav-link {
             & {
                 @include border-radius;
+                @include box-shadow-outer(0, 2px, 4px $color-nav-shadow);
                 background: $color-theme-blue;
                 border: 1px solid $color-theme-blue-lighter;
-                box-shadow: 0, 2px, 4px $color-nav-shadow;
                 color: $color-dark-foreground;
                 cursor: pointer;
                 line-height: 1.25rem;
@@ -99,7 +99,7 @@ $color-nav-shadow: rgba(26, 93, 184, .26);
     }
 
     .btn-primary {
-        @include box-shadow-inner;
+        @include box-shadow-outer;
         background: $color-theme-blue-dark;
         border: 0;
         pointer-events: none;
diff --git a/frontend/app/shell/pages/internal/internal-area.component.scss b/frontend/app/shell/pages/internal/internal-area.component.scss
index 89ef6d739..b61121636 100644
--- a/frontend/app/shell/pages/internal/internal-area.component.scss
+++ b/frontend/app/shell/pages/internal/internal-area.component.scss
@@ -1,5 +1,5 @@
 .navbar {
-    @include box-shadow(0, 3px, 5px, .13);
+    @include box-shadow-outer(0, 3px, 5px, .13);
     display: block;
 }
 
diff --git a/frontend/app/theme/_bootstrap.scss b/frontend/app/theme/_bootstrap.scss
index ef086ae6c..df336e34c 100644
--- a/frontend/app/theme/_bootstrap.scss
+++ b/frontend/app/theme/_bootstrap.scss
@@ -189,7 +189,7 @@ a {
 .dropdown-menu {
     // White dropdown menu without border and shadow.
     & {
-        @include box-shadow(0, 3px, 16px, .2);
+        @include box-shadow-outer(0, 3px, 16px, .2);
         background: $panel-light-background;
         border: 0;
         z-index: 1200;
@@ -675,7 +675,7 @@ $icon-size: 4.5rem;
     }
 
     &-content {
-        @include box-shadow2(0, 8px, 16px, .3);
+        @include box-shadow-outer(0, 8px, 16px, .3);
         border: 0;
         border-radius: .4rem .35rem .35rem .4rem;
         max-height: 100%;
diff --git a/frontend/app/theme/_forms.scss b/frontend/app/theme/_forms.scss
index 635be9c4d..972f7ac9f 100644
--- a/frontend/app/theme/_forms.scss
+++ b/frontend/app/theme/_forms.scss
@@ -131,7 +131,7 @@
     & {
         @include absolute(2px, auto, auto, 0);
         @include border-radius(.25em);
-        @include box-shadow;
+        @include box-shadow-outer;
         background: $color-dark-foreground;
         border: 1px solid $color-input;
         max-height: 15rem;
diff --git a/frontend/app/theme/_mixins.scss b/frontend/app/theme/_mixins.scss
index 51cabf1ab..8bb286f77 100644
--- a/frontend/app/theme/_mixins.scss
+++ b/frontend/app/theme/_mixins.scss
@@ -166,11 +166,7 @@
     }
 }
 
-@mixin box-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: .1) {
-    box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
-}
-
-@mixin box-shadow2($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: .1) {
+@mixin box-shadow-outer($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: .1) {
     box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
 }
 
diff --git a/frontend/app/theme/_panels.scss b/frontend/app/theme/_panels.scss
index 98c94f2c7..1647aafe8 100644
--- a/frontend/app/theme/_panels.scss
+++ b/frontend/app/theme/_panels.scss
@@ -241,7 +241,7 @@
 //
 .panel-dark {
     & {
-        @include box-shadow(2px, 0, 1px, .3);
+        @include box-shadow-outer(2px, 0, 1px, .3);
         background: $color-dark2-background;
         border-right: 1px solid darken($color-dark2-foreground, 15%);
         color: $color-dark2-foreground;
@@ -278,7 +278,7 @@
 .sidebar {
     & {
         @include fixed($size-navbar-height, auto, 0, 0);
-        @include box-shadow(2px, 0, 1px, .1);
+        @include box-shadow-outer(2px, 0, 1px, .1);
         @include force-width($size-sidebar-width);
         background: $color-dark1-background;
         border-right: 1px solid $color-dark1-border1;