diff --git a/frontend/app/features/settings/declarations.ts b/frontend/app/features/settings/declarations.ts index 367ab79ee..e0c7dfdee 100644 --- a/frontend/app/features/settings/declarations.ts +++ b/frontend/app/features/settings/declarations.ts @@ -8,6 +8,7 @@ export * from './pages/backups/backup.component'; export * from './pages/backups/backups-page.component'; export * from './pages/clients/client-add-form.component'; +export * from './pages/clients/client-connect-form.component'; export * from './pages/clients/client.component'; export * from './pages/clients/clients-page.component'; export * from './pages/contributors/contributor-add-form.component'; diff --git a/frontend/app/features/settings/module.ts b/frontend/app/features/settings/module.ts index 1a11eea50..1bf8ccae0 100644 --- a/frontend/app/features/settings/module.ts +++ b/frontend/app/features/settings/module.ts @@ -20,6 +20,7 @@ import { BackupsPageComponent, ClientAddFormComponent, ClientComponent, + ClientConnectFormComponent, ClientsPageComponent, ContributorAddFormComponent, ContributorComponent, @@ -207,6 +208,7 @@ const routes: Routes = [ BackupsPageComponent, ClientAddFormComponent, ClientComponent, + ClientConnectFormComponent, ClientsPageComponent, ContributorAddFormComponent, ContributorComponent, diff --git a/frontend/app/features/settings/pages/clients/client-connect-form.component.html b/frontend/app/features/settings/pages/clients/client-connect-form.component.html new file mode 100644 index 000000000..c0e4c8a00 --- /dev/null +++ b/frontend/app/features/settings/pages/clients/client-connect-form.component.html @@ -0,0 +1,166 @@ + + + Connect + + + + + + + +

Choose a connection method

+ + + Start with the Postman tutorial in the Documentation + + +
+
+
Connect manually
+ + Get instructions how to establish a connection with Postman or curl. + + +
+ +
+
Connect with Squidex CLI
+ + Download the CLI and connect to this app to start backups, sync schemas or export content. + + +
+ +
+
Connect to your App with SDK
+ + Download an SDK and establish a connection to this app. + + +
+
+ + + +
+
a Get a token using curl
+ +

+ {{connectHttpText}} +

+
+ +
+
b Just use the following token
+ +

+ {{connectToken?.accessToken}} +

+
+ +
+
2 Add the token as HTTP header to all requests
+ +

+ Authorization: Bearer [YOUR_TOKEN] +

+
+ +
+ + Tokens usally expire after 30days, but you can request multiple tokens. + +
+ + +
+
1 Get the latest Squidex CLI
+ +

+ Download the CLI from Github + + + The releases contains binaries for all major operation system and a small download if you have .NET Core installed. + +

+
+ +
+
2 Add <your Squidex CLI download directory> to your $PATH variable
+
+ +
+
3 Add your app name the CLI config
+ +

+ + sq config add {{appName}} {{appName}}:{{client.id}} ${{client.secret}} -u ${{apiUrl.value}} + + + + You can manage configuration to multiple apps in the CLI and switch to an app. + +

+
+ +
+
4 Switch to your app in the CLI
+ +

+ + sq config use {{appName}} + +

+
+ + +
+
1 Install the .NET SDK
+ +

+ The SDK is available on nuget +

+ +

+ dotnet add package Squidex.ClientLibrary +

+
+ +
+
2 Create a client manager
+ +

+ {{connectLibraryText}} +

+
+ +
+ + Need more SDK? Contact us in the Support Forum + +
+ + + + + + + + \ No newline at end of file diff --git a/frontend/app/features/settings/pages/clients/client-connect-form.component.scss b/frontend/app/features/settings/pages/clients/client-connect-form.component.scss new file mode 100644 index 000000000..c2485f52e --- /dev/null +++ b/frontend/app/features/settings/pages/clients/client-connect-form.component.scss @@ -0,0 +1,64 @@ +@import '_vars'; +@import '_mixins'; + +.breadcrumb { + &-item { + i { + display: none; + } + + &-done { + color: $color-theme-green; + + i { + display: inline-block; + } + } + } +} + +.badge { + @include circle(1.2rem); + margin-right: .25rem; + font-size: 80%; + padding-left: 0; + padding-right: 0; + vertical-align: top; +} + +.section { + margin-top: 2rem; + + p { + padding-left: 1.75rem; + } +} + +.option { + @include border-radius; + cursor: pointer; + background: none; + border: 1px solid $color-border; + padding: 1rem; + position: relative; + margin-top: .5rem; + + &:hover { + border-color: darken($color-border, 10%); + } + + i { + @include absolute(1.6rem, 1rem, auto, auto); + font-size: 1.8rem; + font-weight: 300; + color: $color-border; + } +} + +.access-token { + height: 10rem; + font-size: 1rem; + font-weight: normal; + font-family: monospace; + resize: none; +} \ No newline at end of file diff --git a/frontend/app/features/settings/pages/clients/client-connect-form.component.ts b/frontend/app/features/settings/pages/clients/client-connect-form.component.ts new file mode 100644 index 000000000..e8a951785 --- /dev/null +++ b/frontend/app/features/settings/pages/clients/client-connect-form.component.ts @@ -0,0 +1,105 @@ +/* + * Squidex Headless CMS + * + * @license + * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. + */ + +import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; + +import { + AccessTokenDto, + ApiUrlConfig, + AppsState, + ClientDto, + ClientsService, + DialogService, + fadeAnimation, + RoleDto +} from '@app/shared'; + +@Component({ + selector: 'sqx-client-connect-form', + styleUrls: ['./client-connect-form.component.scss'], + templateUrl: './client-connect-form.component.html', + animations: [ + fadeAnimation + ] +}) +export class ClientConnectFormComponent implements OnInit { + @Output() + public complete = new EventEmitter(); + + @Input() + public client: ClientDto; + + @Input() + public clientRoles: ReadonlyArray; + + public appName: string; + + public connectToken: AccessTokenDto; + public connectHttpText: string; + public connectLibraryText: string; + + public step = 'Start'; + + public get isStart() { + return this.step === 'Start'; + } + + constructor( + public readonly appsState: AppsState, + public readonly apiUrl: ApiUrlConfig, + private readonly changeDetector: ChangeDetectorRef, + private readonly clientsService: ClientsService, + private readonly dialogs: DialogService + ) { + } + + public ngOnInit() { + this.appName = this.appsState.appName; + + this.connectHttpText = connectHttpText(this.apiUrl, this.appName, this.client); + this.connectLibraryText = connectLibrary(this.apiUrl, this.appName, this.client); + + this.clientsService.createToken(this.appsState.appName, this.client) + .subscribe(dto => { + this.connectToken = dto; + + this.changeDetector.detectChanges(); + }, error => { + this.dialogs.notifyError(error); + }); + } + + public go(step: string) { + this.step = step; + } + + public emitComplete() { + this.complete.emit(); + } +} + +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}")`; +} \ No newline at end of file diff --git a/frontend/app/features/settings/pages/clients/client.component.html b/frontend/app/features/settings/pages/clients/client.component.html index e54649590..3f5790356 100644 --- a/frontend/app/features/settings/pages/clients/client.component.html +++ b/frontend/app/features/settings/pages/clients/client.component.html @@ -9,7 +9,7 @@
- +