From c8318775fd315b8a31ccb2b7be21259a15ffca9d Mon Sep 17 00:00:00 2001 From: Sebastian Stehle Date: Fri, 4 Jan 2019 23:20:18 +0100 Subject: [PATCH] Connect screen --- .../Apps/AppHistoryEventsCreator.cs | 12 ++++ .../asset-changed-trigger.component.scss | 16 ----- .../content-changed-trigger.component.scss | 20 ------ src/Squidex/app/features/settings/module.ts | 2 +- .../pages/clients/client.component.html | 68 ++++++++++++++++--- .../pages/clients/client.component.scss | 22 +++--- .../pages/clients/client.component.ts | 53 +++++++++++++-- .../pages/plans/plans-page.component.html | 4 +- src/Squidex/app/theme/_common.scss | 45 ++++++++++++ 9 files changed, 177 insertions(+), 65 deletions(-) diff --git a/src/Squidex.Domain.Apps.Entities/Apps/AppHistoryEventsCreator.cs b/src/Squidex.Domain.Apps.Entities/Apps/AppHistoryEventsCreator.cs index 78a9ecd9b..fc8c2a7f6 100644 --- a/src/Squidex.Domain.Apps.Entities/Apps/AppHistoryEventsCreator.cs +++ b/src/Squidex.Domain.Apps.Entities/Apps/AppHistoryEventsCreator.cs @@ -43,6 +43,9 @@ namespace Squidex.Domain.Apps.Entities.Apps AddEventMessage( "renamed client {[Id]} to {[Name]}"); + AddEventMessage( + "changed plan to {[Plan]}"); + AddEventMessage( "added language {[Language]}"); @@ -200,6 +203,15 @@ namespace Squidex.Domain.Apps.Entities.Apps .AddParameter("Name", @event.Name)); } + protected Task On(AppPlanChanged @event) + { + const string channel = "settings.plan"; + + return Task.FromResult( + ForEvent(@event, channel) + .AddParameter("Plan", @event.PlanId)); + } + protected Task On(AppRoleDeleted @event) { const string channel = "settings.roles"; diff --git a/src/Squidex/app/features/rules/pages/rules/triggers/asset-changed-trigger.component.scss b/src/Squidex/app/features/rules/pages/rules/triggers/asset-changed-trigger.component.scss index b39df7542..6e1eef5ec 100644 --- a/src/Squidex/app/features/rules/pages/rules/triggers/asset-changed-trigger.component.scss +++ b/src/Squidex/app/features/rules/pages/rules/triggers/asset-changed-trigger.component.scss @@ -3,20 +3,4 @@ textarea { height: 100px; -} - -.help { - & { - font-size: .9rem; - } - - &-example { - margin-top: .375rem; - } - - &-examples { - margin-top: 0; - margin-bottom: 0; - padding-left: 1.5rem; - } } \ No newline at end of file diff --git a/src/Squidex/app/features/rules/pages/rules/triggers/content-changed-trigger.component.scss b/src/Squidex/app/features/rules/pages/rules/triggers/content-changed-trigger.component.scss index 5ad65ca60..0f21fbc94 100644 --- a/src/Squidex/app/features/rules/pages/rules/triggers/content-changed-trigger.component.scss +++ b/src/Squidex/app/features/rules/pages/rules/triggers/content-changed-trigger.component.scss @@ -9,24 +9,4 @@ .form-check { margin-top: 1rem; -} - -textarea { - height: 100px; -} - -.help { - & { - font-size: .9rem; - } - - &-example { - margin-top: .375rem; - } - - &-examples { - margin-top: 0; - margin-bottom: 0; - padding-left: 1.5rem; - } } \ No newline at end of file diff --git a/src/Squidex/app/features/settings/module.ts b/src/Squidex/app/features/settings/module.ts index b41b44926..121e03d8b 100644 --- a/src/Squidex/app/features/settings/module.ts +++ b/src/Squidex/app/features/settings/module.ts @@ -66,7 +66,7 @@ const routes: Routes = [ path: 'history', component: HistoryComponent, data: { - channel: 'settings.plans' + channel: 'settings.plan' } } ] diff --git a/src/Squidex/app/features/settings/pages/clients/client.component.html b/src/Squidex/app/features/settings/pages/clients/client.component.html index 1bda96b36..5148d4653 100644 --- a/src/Squidex/app/features/settings/pages/clients/client.component.html +++ b/src/Squidex/app/features/settings/pages/clients/client.component.html @@ -24,11 +24,9 @@ - -
Access tokens expire after 30 days
- +
-
@@ -60,7 +58,7 @@
-
@@ -79,12 +77,66 @@ - + - Access token + Connect - +
+

How to connect to this client

+ +

Using HTTP

+ +
+ 1. Make the following request to get an access token. It will be valid for 30 days. + + 
{{connectHttpText}}
+
+ +
+ 2. Add the bearer token as authorization header to all requests: + + 
Authorization: Bearer [YOUR_TOKEN]
+
+ +
+ Use the following token for testing + + + + +
+ +

Using the command line interface (CLI)

+ +
+ Download the CLI here: CLI Releases (Linux, OS X, Windows) +
+ +
+ Connect with windows: + + 
{{connectCLIWinText}}
+
+ +
+ Connect with Linux / OS X + + 
{{connectCLINixText}}
+
+ +

Using the C# Client Library

+ +
+ Get the nuget library from nuget.org +
+ +
+ Create a client manager + + 
{{connectLibrary}}
+
+
\ No newline at end of file diff --git a/src/Squidex/app/features/settings/pages/clients/client.component.scss b/src/Squidex/app/features/settings/pages/clients/client.component.scss index ec20b3cba..c5ee82cc1 100644 --- a/src/Squidex/app/features/settings/pages/clients/client.component.scss +++ b/src/Squidex/app/features/settings/pages/clients/client.component.scss @@ -12,12 +12,6 @@ $color-editor: #eceeef; vertical-align: top; } - &-expires { - font-size: .8rem; - font-weight: normal; - margin-bottom: .75rem; - } - &-edit { color: $color-border-dark; display: none; @@ -35,11 +29,17 @@ $color-editor: #eceeef; font-size: 1.2rem; font-weight: normal; line-height: 1.5rem; + border-top: 1px solid transparent; + border-bottom: 1px solid transparent; display: inline-block; margin: 0; } &-header { + & { + margin-bottom: .5rem; + } + &:hover { .client-edit { display: inline-block; @@ -48,13 +48,6 @@ $color-editor: #eceeef; } } -h3 { - &.client-name { - border-top: 1px solid transparent; - border-bottom: 1px solid transparent; - } -} - .col-form-label { text-align: left; } @@ -68,8 +61,9 @@ h3 { } .access-token { - height: 18rem; + height: 10rem; font-size: 1rem; font-weight: normal; font-family: monospace; + resize: none; } \ No newline at end of file diff --git a/src/Squidex/app/features/settings/pages/clients/client.component.ts b/src/Squidex/app/features/settings/pages/clients/client.component.ts index 402b1b49b..2c8c91373 100644 --- a/src/Squidex/app/features/settings/pages/clients/client.component.ts +++ b/src/Squidex/app/features/settings/pages/clients/client.component.ts @@ -11,6 +11,7 @@ import { onErrorResumeNext } from 'rxjs/operators'; import { AccessTokenDto, + ApiUrlConfig, AppClientDto, AppClientsService, AppRoleDto, @@ -24,6 +25,36 @@ import { const ESCAPE_KEY = 27; +function connectHttpText(apiUrl: ApiUrlConfig, app: string, client: { id: string, secret: string }) { + const url = apiUrl.buildUrl('identity-server/connect/token'); + + return `$ curl + -X POST '${url}' + -H 'Content-Type: application/x-www-form-urlencoded' + -d 'grant_type=client_credentials& + client_id=${app}:${client.id}& + client_secret=${client.secret}& + scope=squidex-api`; +} + +function connectLibrary(apiUrl: ApiUrlConfig, app: string, client: { id: string, secret: string }) { + const url = apiUrl.value; + + return `var clientManager = new SquidexClientManager( + "${url}", + "${app}", + "${app}:${client.id}", + "${client.secret}")`; +} + +function connectCLIWinText(app: string, client: { id: string, secret: string }) { + return `.\\sq.exe config add ${app} ${app}:${client.id} ${client.secret};.\\sq.exe config use ${app}`; +} + +function connectCLINixText(app: string, client: { id: string, secret: string }) { + return `sq config add ${app} ${app}:${client.id} ${client.secret} && sq config use ${app}`; +} + @Component({ selector: 'sqx-client', styleUrls: ['./client.component.scss'], @@ -38,13 +69,19 @@ export class ClientComponent implements OnChanges { public isRenaming = false; - public token: AccessTokenDto; - public tokenDialog = new DialogModel(); + public connectToken: AccessTokenDto; + public connectDialog = new DialogModel(); public renameForm = new RenameClientForm(this.formBuilder); + public connectHttpText: string; + public connectCLINixText: string; + public connectCLIWinText: string; + public connectLibrary: string; + constructor( public readonly appsState: AppsState, + private readonly apiUrl: ApiUrlConfig, private readonly appClientsService: AppClientsService, private readonly clientsState: ClientsState, private readonly dialogs: DialogService, @@ -54,6 +91,13 @@ export class ClientComponent implements OnChanges { public ngOnChanges() { this.renameForm.load(this.client); + + const app = this.appsState.appName; + + this.connectHttpText = connectHttpText(this.apiUrl, app, this.client); + this.connectCLINixText = connectCLINixText(app, this.client); + this.connectCLIWinText = connectCLIWinText(app, this.client); + this.connectLibrary = connectLibrary(this.apiUrl, app, this.client); } public revoke() { @@ -92,10 +136,11 @@ export class ClientComponent implements OnChanges { } public createToken(client: AppClientDto) { + this.connectDialog.show(); + this.appClientsService.createToken(this.appsState.appName, client) .subscribe(dto => { - this.token = dto; - this.tokenDialog.show(); + this.connectToken = dto; }, error => { this.dialogs.notifyError(error); }); diff --git a/src/Squidex/app/features/settings/pages/plans/plans-page.component.html b/src/Squidex/app/features/settings/pages/plans/plans-page.component.html index c5cade8af..e7dcb0bb2 100644 --- a/src/Squidex/app/features/settings/pages/plans/plans-page.component.html +++ b/src/Squidex/app/features/settings/pages/plans/plans-page.component.html @@ -79,8 +79,8 @@ - - + + diff --git a/src/Squidex/app/theme/_common.scss b/src/Squidex/app/theme/_common.scss index 610285fd4..6b51764e6 100644 --- a/src/Squidex/app/theme/_common.scss +++ b/src/Squidex/app/theme/_common.scss @@ -62,6 +62,51 @@ pre { padding: .25rem .5rem; margin: 0; } + + &.code-block { + display: block; + } +} + +// +// Help texts +// +.help { + & { + font-size: .9rem; + } + + pre { + font-size: 100%; + } + + h2 { + margin-top: 1rem; + } + + h3 { + margin-top: 2rem; + margin-bottom: .25rem; + font-size: 1.1rem; + } + + .code-block { + margin: .25rem 0; + } + + &-section { + padding-top: .5rem; + } + + &-example { + margin-top: .375rem; + } + + &-examples { + margin-top: 0; + margin-bottom: 0; + padding-left: 1.5rem; + } } //